/* ==========================================================================
   NEGOVANTA — Hoja de estilos principal
   Sistema de diseño: claro, limpio, tecnológico, con acento naranjo y
   transparencias tipo vidrio ("glass"). Los mockups de producto (mini
   dashboard del hero y las tarjetas de rubros) usan un set de tokens
   "ink" oscuros definidos localmente para simular una app real flotando
   sobre la página clara — ver sección 22.
   Sin frameworks externos. CSS puro + variables.
   ========================================================================== */

/* Registro de la propiedad personalizada --donut para poder animar el
   degradado cónico del mini-gráfico de Finanzas con una transición suave.
   Se ignora de forma segura en navegadores que no soporten @property. */
@property --donut {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0turn;
}

/* --------------------------------------------------------------------------
   1. TOKENS DE DISEÑO
   -------------------------------------------------------------------------- */
:root {
  /* Superficies: blanco, gris muy claro y "gris tarjeta" — identidad
     BLANCO + GRIS + CARBÓN + NARANJO, sin azul ni morado como protagonistas. */
  --bg-base: #e9ecf1;
  --bg-raised: #f2f4f7;
  --bg-card: #e4e8ee;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f6f7f9;
  --bg-elevated: #ffffff;
  --border-subtle: rgba(20, 22, 30, 0.10);
  --border-strong: rgba(20, 22, 30, 0.16);

  /* Texto */
  --text-primary: #171c21;
  --text-secondary: #5e646b;
  --text-muted: #63697d;
  --text-inverse: #ffffff;

  /* Fondo carbón para secciones de contraste (hero, POS, cotización,
     CTA final y footer). Tomado del cuerpo negro-brillante del robot
     y del logotipo: casi negro, con una leve temperatura cálida. */
  --ink-carbon: #14181d;
  --ink-carbon-raised: #1b2026;
  --ink-carbon-deep: #0e1114;

  /* Texto y acento para usar SOBRE los fondos carbón (contraste AA
     verificado: 10.7:1, 8.6:1 y 6.9:1 respectivamente sobre #14181d). */
  --ink-text: #c3c9d2;
  --ink-muted: #aeb5bf;
  --ink-accent: #ff7a33;

  /* Acento primario: naranjo moderno.
     500 = tono base (íconos, bordes, rellenos decorativos, fondos de botón).
     400/600 = variantes con contraste AA verificado sobre fondo claro,
     para texto, enlaces y estados hover. */
  --accent-500: #ff5a0a;
  --accent-400: #b53e0c;
  --accent-600: #a8390b;
  --accent-glow: rgba(255, 90, 10, 0.35);

  /* Acento secundario: ámbar dorado (uso puntual sobre paneles oscuros) */
  --amber-500: #f5a524;
  --amber-400: #ffb84d;
  --amber-glow: rgba(245, 165, 36, 0.3);

  /* Estados semánticos — variantes seguras para texto sobre fondo claro.
     Los paneles oscuros (sección 22) usan versiones más vivas vía override. */
  --danger-500: #d81f38;
  --success-500: #0e7a40;

  /* Gradientes de marca (uso puntual, no saturar).
     --gradient-brand: vivo, para rellenos sólidos (botones con texto
     oscuro, insignias, barras decorativas) — no usar con texto recortado
     (background-clip: text), su extremo más claro no pasa AA sobre blanco.
     --gradient-text: más profundo, seguro para texto con degradado. */
  --gradient-brand: linear-gradient(135deg, #ff7a33 0%, #e05207 100%);
  --gradient-text: linear-gradient(135deg, #e05207 0%, #a8390b 100%);
  --gradient-warm: linear-gradient(135deg, var(--amber-500) 0%, #d81f38 100%);
  --gradient-mesh: radial-gradient(48% 48% at 14% 10%, rgba(255, 90, 10, 0.16) 0%, transparent 68%),
                   radial-gradient(42% 42% at 88% 8%, rgba(100, 116, 139, 0.13) 0%, transparent 65%),
                   radial-gradient(50% 50% at 78% 85%, rgba(255, 90, 10, 0.10) 0%, transparent 65%),
                   radial-gradient(38% 38% at 8% 88%, rgba(245, 165, 36, 0.09) 0%, transparent 65%);

  /* Tipografía */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Radios (variados a propósito, no uniformes) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  /* Botones: redondeados pero NO en forma de píldora, según la
     referencia visual (esquinas suaves, look "tech" moderno). */
  --radius-btn: 10px;

  /* Sombras: suaves y frías, pensadas para fondo claro */
  --shadow-sm: 0 2px 10px rgba(20, 22, 30, 0.07);
  --shadow-md: 0 10px 30px rgba(20, 22, 30, 0.10);
  --shadow-lg: 0 25px 60px rgba(20, 22, 30, 0.14);
  --shadow-glow: 0 0 0 1px rgba(242, 96, 15, 0.22), 0 8px 30px rgba(242, 96, 15, 0.16);

  /* Espaciado fluido */
  --space-section: clamp(4.5rem, 9vw, 8.5rem);
  --space-container: clamp(1.25rem, 5vw, 3rem);
  --container-max: 1220px;

  /* Transiciones */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.4s;
  --dur-slow: 0.8s;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul {
  list-style: none;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--accent-glow);
  color: var(--text-primary);
}

/* Skip link (accesibilidad) */
.skip-link {
  position: absolute;
  top: -60px;
  left: 1rem;
  background: var(--accent-400);
  color: var(--text-inverse);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  font-weight: 700;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
}

/* --------------------------------------------------------------------------
   3. UTILIDADES / LAYOUT
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-container);
}

section {
  position: relative;
  padding-block: var(--space-section);
  scroll-margin-top: 84px;
}

.section-head {
  max-width: 640px;
  margin-bottom: 3rem;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-400);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 12px var(--accent-glow);
}

h2.h-lg {
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  margin-bottom: 1rem;
}

.lead {
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Fondo de malla degradada: manchas de color suaves y difuminadas
   ("blobs"), sin grilla de puntos — look moderno, no técnico/plano.
   Se usa en varias secciones. */
.mesh-bg {
  position: absolute;
  inset: 0;
  background-image: var(--gradient-mesh);
  pointer-events: none;
  z-index: 0;
  filter: blur(6px);
}

/* --------------------------------------------------------------------------
   4. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  /* Naranjo sólido + texto blanco (accent-400 = variante de --accent-500
     con contraste AA verificado sobre blanco para texto de botón). */
  background: var(--accent-400);
  color: var(--text-inverse);
  box-shadow: 0 10px 24px rgba(255, 90, 10, 0.22);
}

.btn-primary:hover {
  background: var(--accent-600);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 90, 10, 0.28);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
  background: var(--bg-surface-hover);
  border-color: var(--accent-500);
  transform: translateY(-2px);
}

/* Verde WhatsApp oscurecido a #177f41: el verde de marca (#1fa855)
   solo alcanza 3.09:1 con texto blanco y el botón es texto normal,
   así que no cumplía AA. Este tono llega a 5.06:1 manteniendo la
   lectura "WhatsApp". El botón flotante circular conserva el verde
   vivo, porque ahí el verde es fondo de un ícono, no de texto. */
.btn-whatsapp {
  background: #177f41;
  color: #ffffff;
}

.btn-whatsapp:hover {
  background: #14773d;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(23, 127, 65, 0.38);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.85rem;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   5. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: border-color var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
  background: #ffffff;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  border-bottom: 1px solid var(--border-subtle);
  padding-block: 0.75rem;
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
}

/* Logotipo real de la marca (imagen provista por el cliente).
   Se controla el alto y se deja el ancho automático para que la
   proporción original del isotipo + wordmark + tagline no se deforme. */
.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}

/* En el footer se usa el lockup completo (logo + mascota), que tiene
   fondo transparente y por eso funciona sobre el carbón oscuro. */
.brand-logo-footer {
  height: 96px;
}

@media (max-width: 640px) {
  .brand-logo {
    height: 30px;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  font-size: 0.94rem;
  color: var(--text-secondary);
  font-weight: 500;
  position: relative;
  padding-block: 0.3rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-links a:hover {
  color: var(--text-primary);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--accent-500);
  transition: width var(--dur-fast) var(--ease-out);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-actions .btn {
  padding: 0.65rem 1.3rem;
  font-size: 0.88rem;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-primary);
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle span::before {
  position: absolute;
  top: -6px;
}
.nav-toggle span::after {
  position: absolute;
  top: 6px;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] span::before {
  transform: rotate(45deg);
  top: 0;
}
.nav-toggle[aria-expanded="true"] span::after {
  transform: rotate(-45deg);
  top: 0;
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   5.b SECCIONES OSCURAS (carbón)
   Utilidad reutilizable: hero, "mejoramos tu cotización", CTA final y
   footer. Re-tematiza los componentes internos (títulos, leads, eyebrow,
   botones secundarios, tarjetas) sin duplicar reglas en cada sección.
   -------------------------------------------------------------------------- */
.section-dark {
  position: relative;
  overflow: hidden;
  background: var(--ink-carbon);
  color: #ffffff;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark strong {
  color: #ffffff;
}

.section-dark p,
.section-dark .lead,
.section-dark li {
  color: var(--ink-text);
}

.section-dark .eyebrow {
  color: var(--ink-accent);
}

.section-dark .btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
}

.section-dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: var(--accent-500);
}

/* Sobre carbón el naranjo puede ser más vivo sin perder contraste */
.section-dark .btn-primary {
  background: var(--accent-500);
  color: #14181d;
}

.section-dark .btn-primary:hover {
  background: #ff6f28;
}

/* Manchas de luz naranja difuminadas, para que el carbón no se vea plano */
.ink-glow {
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(42% 42% at 78% 18%, rgba(255, 90, 10, 0.20) 0%, transparent 68%),
              radial-gradient(38% 38% at 12% 82%, rgba(255, 122, 51, 0.12) 0%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.section-dark > .container {
  position: relative;
  z-index: 1;
}

.hero {
  padding-top: clamp(7.5rem, 14vw, 10.5rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  overflow: hidden;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success-500);
  box-shadow: 0 0 10px rgba(53, 214, 138, 0.6);
}

.hero h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.75rem);
  margin-bottom: 1.4rem;
}

.hero h1 .accent-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lead {
  max-width: 520px;
  margin-bottom: 2.2rem;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.hero-trustline {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.hero-trustline li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hero-trustline svg {
  width: 16px;
  height: 16px;
  color: var(--accent-500);
  flex-shrink: 0;
}

/* Mockup de dashboard (100% CSS/SVG, sin imágenes externas) */
.hero-visual {
  position: relative;
}

/* Paneles "ink": el mini-dashboard del hero y las tarjetas de mockup del
   showcase de rubros simulan una app real flotando sobre la página clara,
   así que mantienen superficies oscuras propias. Al redefinir aquí los
   mismos tokens que ya usan sus reglas internas (--bg-elevated,
   --border-strong, --text-secondary, --accent-500, etc.), toda la
   cascada de esos componentes se re-tematiza automáticamente sin tocar
   cada regla una por una. */
.dash-card,
.mock-card,
.device-phone-screen {
  --bg-elevated: #14161f;
  --bg-surface: #1b1e29;
  --bg-raised: #232734;
  --bg-surface-hover: #262b39;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text-primary: #f4f5f7;
  --text-secondary: #b7bcc8;
  --text-muted: #9aa0b3;
  --text-inverse: #14161f;
  --accent-500: #ff8a42;
  --accent-400: #ffa366;
  --accent-600: #ff7a33;
  --danger-500: #f3596b;
  --success-500: #35d68a;
}

.dash-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-lg);
  animation: float-slow 7s ease-in-out infinite;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

.dash-topbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}

/* Solo los "semáforos" de la barra superior. Se excluye explícitamente
   .dash-view-label, que también es un <span> dentro de .dash-topbar y
   antes heredaba el tamaño de 10px, quedando aplastada e ilegible. */
.dash-topbar span:not(.dash-view-label) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}
.dash-topbar span:nth-child(1) { background: var(--danger-500); opacity: 0.6; }
.dash-topbar span:nth-child(2) { background: var(--amber-500); opacity: 0.6; }
.dash-topbar span:nth-child(3) { background: var(--success-500); opacity: 0.6; }

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.dash-stat {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.7rem;
}

.dash-stat .label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.dash-stat .value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

.dash-stat .value.up {
  color: var(--accent-400);
}

.dash-chart {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1rem 0.9rem 0.6rem;
  margin-bottom: 0.7rem;
}

.dash-chart .chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 72px;
}

.dash-chart .chart-bars span {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--accent-500), rgba(242, 96, 15, 0.15));
  animation: bar-grow 1.4s var(--ease-out) both;
}

@keyframes bar-grow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}

.dash-list {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dash-list .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
}

.dash-list .row .tag {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.6rem;
  font-size: 0.75rem;
}

.dash-list .row-main {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

.dash-list .row .amount {
  font-weight: 700;
  color: var(--text-primary);
}

/* Colores fijos (no heredados de los tokens "ink" del panel padre):
   estas insignias flotantes pueden quedar fuera del alcance de
   .dash-card/.device-phone-screen según en qué dispositivo floten,
   así que se auto-contienen para no perder contraste AA. */
.floating-chip {
  position: absolute;
  background: #14161f;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  animation: float-slow 6s ease-in-out infinite;
}

.floating-chip.chip-1 {
  top: -6%;
  right: -8%;
  animation-delay: 0.3s;
  color: #ffa366;
}

.floating-chip.chip-2 {
  bottom: 6%;
  left: -10%;
  animation-delay: 1.1s;
  color: #ffb94f;
}

.floating-chip .chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

/* Blurbs de beneficio bajo los CTAs del hero (A tu medida / Soporte real / Tecnología simple) */
.hero-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}

.hero-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.hero-benefit-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--accent-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-benefit-icon svg {
  width: 17px;
  height: 17px;
}

.hero-benefit strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  margin-bottom: 0.2rem;
}

.hero-benefit p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Mancha de fondo difuminada, detrás del mockup del hero */
.hero-blob {
  position: absolute;
  inset: -10% -15%;
  background: radial-gradient(55% 55% at 60% 35%, rgba(255, 90, 10, 0.22) 0%, transparent 70%),
              radial-gradient(45% 45% at 20% 80%, rgba(255, 122, 51, 0.12) 0%, transparent 70%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

/* --- Hero sobre carbón: ajustes de los componentes claros --- */
.hero.section-dark .hero-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--ink-text);
}

.hero.section-dark h1 .accent-text {
  background: linear-gradient(135deg, #ff8a4d 0%, var(--accent-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero.section-dark .hero-benefits {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.hero.section-dark .hero-benefit-icon {
  background: rgba(255, 90, 10, 0.16);
  color: var(--ink-accent);
}

.hero.section-dark .hero-benefit p {
  color: var(--ink-muted);
}

/* Mascota del hero: queda de pie junto al laptop, apoyada en su esquina
   inferior derecha (como en las fotos de producto de la marca). */
.hero-mascot {
  position: absolute;
  right: -6%;
  bottom: -20%;
  width: 40%;
  max-width: 205px;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.55));
  animation: float-slow 9s ease-in-out infinite;
  animation-delay: 0.8s;
  pointer-events: none;
}

/* El laptop se alinea a la izquierda para dejarle sitio a la mascota */
.hero-visual .device-laptop,
.hero-visual .device-laptop-base {
  position: relative;
  z-index: 2;
  margin-left: 0;
  margin-right: auto;
}

.hero-visual .device-laptop {
  max-width: 430px;
}

.hero-visual .device-laptop-base {
  max-width: 468px;
}

.hero-visual .device-phone {
  position: absolute;
  z-index: 2;
}

/* El mockup del hero simula una app real: sobre el carbón se muestra
   con superficie CLARA (como en las fotos de producto de la marca),
   así que aquí se revierten los tokens "ink" a valores claros. */
.hero-visual .dash-card,
.hero-visual .device-phone-screen {
  --bg-elevated: #ffffff;
  --bg-surface: #ffffff;
  --bg-raised: #f2f4f7;
  --bg-surface-hover: #eef0f3;
  --border-subtle: rgba(20, 22, 30, 0.10);
  --border-strong: rgba(20, 22, 30, 0.14);
  --text-primary: #171c21;
  --text-secondary: #5e646b;
  /* #5e646b y no #6b7280: las etiquetas del mockup son de 10.9px sobre
     #f2f4f7 y necesitan >= 4.5:1 (queda en 5.43:1). */
  --text-muted: #5e646b;
  --text-inverse: #ffffff;
  --accent-500: #ff5a0a;
  --accent-400: #b53e0c;
  --accent-600: #a8390b;
  --danger-500: #d81f38;
  --success-500: #0e7a40;
  color: var(--text-primary);
}

/* Insignias flotantes: blancas sobre el hero oscuro */
.hero-visual .floating-chip {
  background: #ffffff;
  border-color: rgba(20, 22, 30, 0.12);
  z-index: 3;
}

.hero-visual .floating-chip.chip-1 {
  color: #b53e0c;
}

.hero-visual .floating-chip.chip-2 {
  color: #0e7a40;
}

/* Laptop: el .dash-card ya trae su propia superficie/sombra; aquí solo
   se controla el ancho y se agrega la base (bisagra) debajo. */
.device-laptop {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
}

.device-laptop-base {
  width: 106%;
  max-width: 530px;
  height: 14px;
  margin: 0 auto;
  margin-top: -2px;
  background: linear-gradient(180deg, #d7dae0, #b7bcc8);
  border-radius: 0 0 10px 10px;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  box-shadow: var(--shadow-sm);
}

/* Celular: superpuesto sobre el borde inferior izquierdo del laptop */
.device-phone {
  position: absolute;
  left: -6%;
  bottom: -12%;
  width: 42%;
  max-width: 210px;
  animation: float-slow 7.5s ease-in-out infinite;
  animation-delay: 0.4s;
}

.device-phone-notch {
  width: 34%;
  height: 5px;
  margin: 0 auto;
  background: #0c0e13;
  border-radius: 0 0 6px 6px;
  position: relative;
  z-index: 1;
}

.device-phone-screen {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 1rem 0.85rem 1.1rem;
  margin-top: -5px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.phone-topbar {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.phone-topbar strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  margin-left: 0.3rem;
}

.phone-donut {
  display: flex;
  justify-content: center;
  padding: 0.3rem 0;
}

.phone-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.phone-row span:first-child {
  flex-shrink: 0;
  width: 56px;
}

.phone-row .bar {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  overflow: hidden;
}

.phone-row .bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-600), var(--accent-400));
}

/* --------------------------------------------------------------------------
   7. TARJETAS GENÉRICAS
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
    background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: var(--bg-surface-hover);
  box-shadow: var(--shadow-md);
}

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 96, 15, 0.12);
  color: var(--accent-400);
  margin-bottom: 1.1rem;
}

.card-icon svg {
  width: 22px;
  height: 22px;
}

.card h3 {
  font-size: 1.08rem;
  margin-bottom: 0.5rem;
}

.card p {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   8. SECCIÓN: PROBLEMA
   -------------------------------------------------------------------------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.problem-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.problem-card:hover {
  border-color: rgba(243, 89, 107, 0.4);
  transform: translateY(-3px);
}

.problem-card svg {
  width: 20px;
  height: 20px;
  color: var(--danger-500);
  flex-shrink: 0;
  margin-top: 2px;
}

.problem-resolve {
  margin-top: 2.5rem;
  text-align: center;
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(242, 96, 15, 0.1), rgba(255, 255, 255, 0.55));
  border: 1px solid rgba(242, 96, 15, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.problem-resolve p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. ANTES / DESPUÉS
   -------------------------------------------------------------------------- */
.transform-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
}

.transform-col {
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--border-subtle);
}

.transform-col.before {
  background: var(--bg-surface);
}

.transform-col.after {
  background: linear-gradient(160deg, rgba(242, 96, 15, 0.14), rgba(255, 255, 255, 0.6));
  border-color: rgba(242, 96, 15, 0.3);
  box-shadow: var(--shadow-glow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.transform-col .tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.2rem;
}

.transform-col.before .tag {
  background: rgba(243, 89, 107, 0.15);
  /* Rojo más oscuro que --danger-500 (#d81f38): sobre este fondo
     rosado tan claro aquel solo alcanzaba 4.23:1. Este llega a 5.48:1. */
  color: #b81a2e;
}

.transform-col.after .tag {
  background: rgba(242, 96, 15, 0.16);
  color: var(--accent-400);
}

.chaos-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.chaos-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  padding: 0.6rem 0.8rem;
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.transform-col.after .headline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.transform-col.after ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.transform-col.after ul li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.transform-col.after ul li svg {
  width: 16px;
  height: 16px;
  color: var(--accent-500);
  flex-shrink: 0;
}

.transform-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-400);
}

.transform-arrow svg {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   10. GRIDS DE SERVICIOS / RUBROS
   -------------------------------------------------------------------------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.industry-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.industry-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-500);
}

.industry-card .industry-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.industry-card h3 {
  font-size: 1.02rem;
  margin-bottom: 0.7rem;
}

.industry-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.industry-card ul li {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.industry-card ul li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-500);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11. CÓMO FUNCIONA
   -------------------------------------------------------------------------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

.step-card {
  position: relative;
  padding: 1.75rem 1.5rem;
}

.step-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--border-strong);
  margin-bottom: 1rem;
  display: block;
}

.step-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.step-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   12. DEMOSTRACIÓN
   -------------------------------------------------------------------------- */
.demo-banner {
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(135deg, rgba(242, 96, 15, 0.12), rgba(255, 255, 255, 0.6) 60%);
  border: 1px solid rgba(242, 96, 15, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.demo-banner .no-commit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--accent-400);
  background: rgba(242, 96, 15, 0.12);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-top: 1.2rem;
}

.demo-visual {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.demo-bot {
  width: 38%;
  max-width: 150px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 12px 26px rgba(20, 22, 30, 0.22));
  animation: float-slow 7.5s ease-in-out infinite;
}

.demo-flow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.demo-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
}

.demo-file .file-icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(53, 214, 138, 0.15);
  color: var(--success-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.demo-arrow-down {
  align-self: center;
  color: var(--accent-500);
}

/* --------------------------------------------------------------------------
   13. PORTAFOLIO
   -------------------------------------------------------------------------- */
.portfolio-badge-demo {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  background: rgba(245, 165, 36, 0.16);
  color: var(--amber-400);
  margin-bottom: 0.9rem;
}

.portfolio-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.portfolio-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
}

.portfolio-thumb {
  height: 160px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

.portfolio-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.portfolio-thumb.tone-1 { background: linear-gradient(140deg, #0f2b28, #0a0d14); }
.portfolio-thumb.tone-2 { background: linear-gradient(140deg, #2b2210, #0a0d14); }
.portfolio-thumb.tone-3 { background: linear-gradient(140deg, #1a1330, #0a0d14); }
.portfolio-thumb.tone-4 { background: linear-gradient(140deg, #14202b, #0a0d14); }

.portfolio-thumb .thumb-icon {
  font-size: 2.2rem;
  position: relative;
  z-index: 1;
}

.portfolio-body {
  padding: 1.5rem;
}

.portfolio-body .rubro {
  font-size: 0.78rem;
  color: var(--accent-400);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.portfolio-body h3 {
  font-size: 1.08rem;
  margin-bottom: 0.7rem;
}

.portfolio-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.9rem;
}

.portfolio-meta strong {
  color: var(--text-primary);
}

.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.portfolio-tags span {
  font-size: 0.72rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   14. PLANES
   -------------------------------------------------------------------------- */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.plan-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.plan-card.featured {
  background: linear-gradient(180deg, rgba(242, 96, 15, 0.08), var(--bg-surface) 45%);
  border-color: var(--accent-500);
  box-shadow: var(--shadow-glow);
  transform: scale(1.03);
}

.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-brand);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
}

.plan-card .plan-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.plan-card .plan-desc {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
  min-height: 42px;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.plan-features li svg {
  width: 17px;
  height: 17px;
  color: var(--accent-500);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   15. BENEFICIOS
   -------------------------------------------------------------------------- */
.nosotros-media {
  max-width: 880px;
  margin: 0 auto 3rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle);
}

.nosotros-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Foto real del puesto de venta, bajo la grilla de características */
.pos-photo {
  max-width: 820px;
  margin: 3rem auto 0;
  text-align: center;
}

.pos-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}

.pos-photo figcaption {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.benefit-item .num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-400);
  font-size: 0.85rem;
}

.benefit-item h3 {
  font-size: 1rem;
}

.benefit-item p {
  font-size: 0.86rem;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq-list {
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
}

.faq-question .icon-plus {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  position: relative;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.faq-question .icon-plus::before,
.faq-question .icon-plus::after {
  content: "";
  position: absolute;
  background: var(--accent-400);
  top: 50%;
  left: 50%;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-question .icon-plus::before {
  width: 9px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.faq-question .icon-plus::after {
  width: 1.5px;
  height: 9px;
  transform: translate(-50%, -50%);
}

.faq-item[open] .faq-question .icon-plus {
  background: var(--accent-500);
}
.faq-item[open] .faq-question .icon-plus::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}
.faq-item[open] .faq-question .icon-plus::before {
  background: var(--text-primary);
}

.faq-answer {
  padding: 0 1.5rem 1.25rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* --------------------------------------------------------------------------
   17. CONTACTO
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.contact-grid > * {
  min-width: 0;
}

.contact-info-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  height: fit-content;
}

.contact-info-card .info-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}
.contact-info-card .info-row:last-child {
  border-bottom: none;
}

.contact-info-card .info-row .ic {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-400);
  flex-shrink: 0;
}

.contact-info-card .info-row .ic svg {
  width: 18px;
  height: 18px;
}

.contact-info-card .info-row .label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.contact-info-card .info-row .val {
  font-size: 0.92rem;
  font-weight: 600;
  word-break: break-word;
}

.contact-info-card .info-row .val a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.contact-info-card .info-row .val a:hover {
  color: var(--accent-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-bot {
  display: block;
  width: 60%;
  max-width: 180px;
  height: auto;
  margin: 1.5rem auto -0.5rem;
  filter: drop-shadow(0 14px 30px rgba(20, 22, 30, 0.2));
  animation: float-slow 8s ease-in-out infinite;
}

.contact-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field {
  margin-bottom: 1.15rem;
  min-width: 0;
}

.field label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.45rem;
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  font-size: 0.94rem;
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent-500);
  background: var(--bg-elevated);
  outline: none;
}

.field textarea {
  resize: vertical;
  min-height: 100px;
}

.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 1rem;
  text-align: center;
}

.form-success,
.form-error {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 1.15rem;
}

.form-success {
  background: rgba(53, 214, 138, 0.12);
  color: var(--success-500);
  border: 1px solid rgba(53, 214, 138, 0.3);
}

.form-error {
  background: rgba(243, 89, 107, 0.12);
  color: var(--danger-500);
  border: 1px solid rgba(243, 89, 107, 0.3);
}

.form-success.is-visible,
.form-error.is-visible {
  display: flex;
}

/* Honeypot (anti-spam, oculto para humanos) */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   18. CTA FINAL
   -------------------------------------------------------------------------- */
.final-cta {
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid rgba(255, 90, 10, 0.28);
  box-shadow: var(--shadow-lg);
}

.final-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.final-cta h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.7rem);
  margin-bottom: 1rem;
}

.final-cta p {
  max-width: 560px;
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

.final-cta .cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.final-cta-bot {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.5));
  animation: float-slow 8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-carbon-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 3.5rem 2rem;
  color: var(--ink-text);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer-brand p {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-top: 0.9rem;
  max-width: 280px;
}

.footer-col h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin-bottom: 1rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col a {
  font-size: 0.9rem;
  color: var(--ink-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--ink-accent);
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social a:hover {
  border-color: var(--accent-500);
  color: var(--ink-accent);
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.82rem;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   20. WHATSAPP FLOTANTE
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #1fa855;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(31, 168, 85, 0.45);
  transition: transform var(--dur-fast) var(--ease-out);
  animation: pulse-ring 2.6s ease-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.08);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 10px 30px rgba(31, 168, 85, 0.45), 0 0 0 0 rgba(31, 168, 85, 0.55); }
  70% { box-shadow: 0 10px 30px rgba(31, 168, 85, 0.45), 0 0 0 16px rgba(31, 168, 85, 0); }
  100% { box-shadow: 0 10px 30px rgba(31, 168, 85, 0.45), 0 0 0 0 rgba(31, 168, 85, 0); }
}

/* --------------------------------------------------------------------------
   21. ANIMACIONES DE ENTRADA (scroll reveal)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.03s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.09s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.15s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.21s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.27s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.33s; }
[data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 0.39s; }
[data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .dash-card,
  .floating-chip,
  .whatsapp-float,
  .mesh-bg,
  .marquee-track {
    animation: none !important;
  }
  .viz-stock-bar span,
  .viz-bars span,
  .viz-blocks .block,
  .mock-progress-bar span {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   22. COMPONENTES DINÁMICOS
   (mini-gráficos de servicios, showcase de rubros, ticker, contadores,
   spotlight de cursor, fondos con deriva)
   -------------------------------------------------------------------------- */

/* --- Fondo con deriva sutil (aplica a .mesh-bg en todas las secciones) --- */
.mesh-bg {
  animation: mesh-drift 20s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes mesh-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.5%, 2%, 0) scale(1.08); }
}

/* --- Spotlight: brillo que sigue el cursor sobre tarjetas --- */
.spotlight {
  position: relative;
  isolation: isolate;
}

.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(242, 96, 15, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}

.spotlight:hover::before,
.spotlight:focus-within::before {
  opacity: 1;
}

.spotlight > * {
  position: relative;
  z-index: 1;
}

/* --- Mini-gráficos dentro de las tarjetas de Servicios --- */
.card-viz {
  height: 76px;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
}

/* Inventario: barras de stock horizontales */
.viz-stock {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.viz-stock-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 0.5rem;
}
.viz-stock-label {
  font-size: 0.68rem;
  color: var(--text-muted);
}
.viz-stock-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  overflow: hidden;
}
.viz-stock-bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-out);
}
.viz-stock-row.low .viz-stock-bar span {
  background: linear-gradient(90deg, var(--danger-500), var(--amber-500));
}
.card.is-visible .viz-stock-bar span,
.is-visible .viz-stock-bar span {
  transform: scaleX(1);
}

/* Ventas: mini barras ascendentes */
.viz-bars {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.viz-bars span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent-500), rgba(242, 96, 15, 0.12));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.8s var(--ease-out);
}
.is-visible .viz-bars span {
  transform: scaleY(1);
}

/* Clientes: fila de avatares */
.viz-avatars {
  display: flex;
  align-items: center;
}
.viz-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-display);
  background: var(--bg-raised);
  border: 2px solid var(--bg-surface);
  color: var(--text-secondary);
  margin-left: -10px;
}
.viz-avatar:first-child { margin-left: 0; }
.viz-avatar:nth-child(1) { background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); color: var(--text-primary); }
.viz-avatar:nth-child(2) { background: linear-gradient(135deg, #4f8dfd, #2f6fe0); color: #061426; }
.viz-avatar:nth-child(3) { background: linear-gradient(135deg, var(--amber-500), #d98a10); color: #2b1a00; }
.viz-avatar.more {
  background: var(--bg-raised);
  border-color: var(--border-strong);
  color: var(--text-muted);
  font-size: 0.6rem;
}

/* Finanzas: anillo tipo donut (ingresos vs gastos) */
.viz-donut {
  gap: 0.85rem;
}
.viz-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--accent-500) 0turn, var(--accent-500) var(--donut, 0.68turn), var(--amber-500) var(--donut, 0.68turn), var(--amber-500) 1turn);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: --donut 1s var(--ease-out);
}
.viz-ring::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-surface);
}
.viz-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.viz-donut-legend span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.viz-donut-legend .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.viz-donut-legend .dot.in { background: var(--accent-500); }
.viz-donut-legend .dot.out { background: var(--amber-500); }

/* Reservas: mini calendario */
.viz-calendar {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.viz-calendar span {
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
}
.viz-calendar span.booked {
  background: var(--gradient-brand);
  border-color: transparent;
  box-shadow: 0 0 10px var(--accent-glow);
}

/* Reportes: sparkline SVG */
.viz-sparkline {
  width: 100%;
  height: 100%;
}
.viz-sparkline path {
  fill: none;
  stroke: var(--accent-500);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.is-visible .viz-sparkline path {
  stroke-dashoffset: 0;
}
.viz-sparkline circle {
  fill: var(--accent-400);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out) 1.2s;
}
.is-visible .viz-sparkline circle {
  opacity: 1;
}

/* Automatización: flujo antes/después */
.viz-flow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.viz-flow .flow-before,
.viz-flow .flow-after {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.viz-flow .flow-before {
  background: var(--bg-raised);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}
.viz-flow .flow-after {
  background: rgba(242, 96, 15, 0.14);
  color: var(--accent-400);
  border: 1px solid rgba(242, 96, 15, 0.3);
}
.viz-flow svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Software personalizado: bloques modulares */
.viz-blocks {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.viz-blocks .block {
  aspect-ratio: 1;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px) scale(0.85);
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.is-visible .viz-blocks .block {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.viz-blocks .block:nth-child(1) { background: var(--gradient-brand); transition-delay: 0s; }
.viz-blocks .block:nth-child(2) { background: var(--bg-raised); border: 1px solid var(--border-strong); transition-delay: 0.08s; }
.viz-blocks .block:nth-child(3) { background: var(--bg-raised); border: 1px solid var(--border-strong); transition-delay: 0.16s; }
.viz-blocks .block:nth-child(4) { background: linear-gradient(135deg, var(--amber-500), #d98a10); transition-delay: 0.24s; }

/* Páginas web: mini ventana de navegador con vista previa del sitio */
.viz-browser {
  width: 100%;
  max-height: 76px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);
}
.viz-browser-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.viz-browser-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
}
.viz-browser-url {
  margin-left: 5px;
  font-size: 0.58rem;
  color: var(--text-muted);
  background: var(--bg-raised);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viz-browser-body {
  flex: 1;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.viz-browser-line {
  height: 5px;
  border-radius: 3px;
  background: var(--border-strong);
}
.viz-browser-line.w1 { width: 62%; }
.viz-browser-line.w2 { width: 40%; }
.viz-browser-swatches {
  display: flex;
  gap: 5px;
  margin-top: 3px;
}
.viz-browser-swatch {
  width: 15px;
  height: 15px;
  border-radius: 4px;
}
.viz-browser-swatch:nth-child(1) { background: var(--gradient-brand); }
.viz-browser-swatch:nth-child(2) { background: var(--bg-elevated); border: 1px solid var(--border-subtle); }
.viz-browser-swatch:nth-child(3) { background: var(--amber-500); opacity: 0.85; }

/* Programas offline: ícono de app de escritorio con estado "sin conexión" */
.viz-offline {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.viz-offline-window {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
}
.viz-offline-window svg {
  width: 24px;
  height: 24px;
}
.viz-offline-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.viz-offline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success-500);
  box-shadow: 0 0 6px var(--success-500);
  flex-shrink: 0;
}

/* --- Franja de estadísticas del producto (stats-strip) --- */
.stats-strip {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.stats-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.stat-item {
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}
.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* --- Ticker / marquee de rubros --- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding-block: 1.1rem;
  background: var(--bg-raised);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 2.5rem;
  animation: marquee-scroll 32s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-track span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-secondary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.marquee-track span.sep {
  color: var(--accent-500);
  font-weight: 700;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Contador "4 herramientas → 1 aplicación" (Antes/Después) --- */
.transform-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.count-block {
  text-align: center;
}
.count-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3rem);
  color: var(--text-primary);
  line-height: 1;
}
.count-block.highlight .count-num {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.count-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.count-arrow {
  width: 26px;
  height: 26px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* --- Vista dinámica del hero (label + crossfade de contenido) --- */
.dash-view-label {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-400);
  background: rgba(242, 96, 15, 0.12);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  transition: opacity 0.3s var(--ease-out);
}
.dash-content {
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.dash-content.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

/* --- Showcase interactivo de Rubros --- */
.rubro-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.rubro-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rubro-tab:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.rubro-tab.is-active {
  background: rgba(242, 96, 15, 0.14);
  border-color: var(--accent-500);
  color: var(--accent-400);
}
.rubro-tab-icon {
  font-size: 1rem;
}

.rubro-panels {
  position: relative;
}
.rubro-panel {
  display: none;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.rubro-panel.is-active {
  display: grid;
  animation: rubro-fade 0.5s var(--ease-out);
}
@keyframes rubro-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.rubro-panel-copy h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.rubro-panel-copy ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.rubro-panel-copy ul li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.96rem;
  color: var(--text-secondary);
}
.rubro-panel-copy ul li svg {
  width: 17px;
  height: 17px;
  color: var(--accent-500);
  flex-shrink: 0;
}
.rubro-panel-copy .btn {
  margin-top: 1.5rem;
}

/* Mockup visual dentro del panel de rubro */
.mock-card {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  margin-inline: auto;
}
.mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.mock-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
}
.mock-chip {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mock-chip.amber { background: rgba(245, 165, 36, 0.16); color: var(--amber-400); }
.mock-chip.green { background: rgba(53, 214, 138, 0.16); color: var(--success-500); }
.mock-chip.blue { background: rgba(79, 141, 253, 0.16); color: #7fb0ff; }
.mock-chip.red { background: rgba(243, 89, 107, 0.16); color: var(--danger-500); }

.mock-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
  gap: 1rem;
}
.mock-row-label {
  color: var(--text-muted);
  flex-shrink: 0;
}
.mock-row-val {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}
.mock-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.mock-footer strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--accent-400);
}

.mock-progress {
  margin-top: 0.3rem;
}
.mock-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.mock-progress-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.mock-progress-bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) 0.2s;
}
.rubro-panel.is-active .mock-progress-bar span {
  transform: scaleX(var(--fill, 1));
}
.mock-progress-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.mock-cta {
  text-align: center;
}
.mock-cta-icon {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
}
.mock-cta p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin-bottom: 1.3rem;
}

/* --------------------------------------------------------------------------
   24. SOLUCIONES · NEGOVANTA POS · PRECIOS · SOPORTE
   -------------------------------------------------------------------------- */

/* --- "Soluciones para tu negocio" (3 tarjetas + números decorativos) --- */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.solution-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-500);
  box-shadow: var(--shadow-md);
}

.solution-num {
  position: absolute;
  top: -0.5rem;
  right: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  color: var(--text-primary);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}

.solution-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--accent-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.solution-icon svg {
  width: 22px;
  height: 22px;
}

.solution-card h3 {
  font-size: 1.15rem;
}

.solution-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.solution-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent-400);
}

.solution-cta svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.solution-card:hover .solution-cta svg {
  transform: translateX(3px);
}

/* --- NEGOVANTA POS: sección de contraste con fondo carbón --- */
.pos-section {
  background: linear-gradient(180deg, var(--ink-carbon) 0%, var(--ink-carbon-raised) 100%);
  color: #f4f5f7;
  overflow: hidden;
}

.pos-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.eyebrow-inverse {
  color: var(--accent-400-inverse, #ff8a42);
}

.pos-title {
  color: #ffffff;
  margin-top: 0.5rem;
}

.pos-lead {
  color: #b7bcc8;
  max-width: 480px;
}

.pos-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1.75rem 0 2rem;
}

.pos-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.94rem;
  color: #d7dae0;
}

.pos-checklist svg {
  width: 18px;
  height: 18px;
  color: var(--accent-500);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.pos-visual {
  position: relative;
}

/* Mockup principal de Negovanta POS: 100% HTML/CSS, sin imágenes */
.pos-mockup {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1rem;
  background: #0f1418;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  box-shadow: var(--shadow-lg);
}

.pos-mockup-main {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.pos-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #1b2229;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  color: #8a919e;
  font-size: 0.78rem;
}

.pos-search svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.pos-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pos-toolbar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: #ffffff;
}

.pos-toolbar-actions {
  display: flex;
  gap: 0.4rem;
}

.pos-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #1b2229;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8a919e;
}

.pos-toolbar-btn svg {
  width: 13px;
  height: 13px;
}

.pos-stock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
}

.pos-stock-badge.is-ok {
  background: rgba(46, 196, 122, 0.16);
  color: #4fd68f;
}

.pos-stock-badge.is-low {
  background: rgba(255, 90, 10, 0.16);
  color: #ff8a4d;
}

.pos-product-list {
  background: #1b2229;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.pos-product-head,
.pos-product-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 0.8fr 0.6fr;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.72rem;
}

.pos-product-head {
  color: #8e95a2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.62rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pos-product-row {
  color: #d7dae0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--dur-med) var(--ease-out);
}

.pos-product-row:last-child {
  border-bottom: none;
}

.pos-product-row.is-scanning {
  background: rgba(255, 90, 10, 0.14);
}

.pos-cart {
  background: #151b21;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pos-cart-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.pos-cart-cols {
  display: grid;
  grid-template-columns: 1.4fr 0.5fr 0.7fr 0.7fr 0.35fr;
  gap: 0.3rem;
  font-size: 0.6rem;
  color: #8e95a2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pos-cart-row {
  display: grid;
  grid-template-columns: 1.4fr 0.5fr 0.7fr 0.7fr 0.35fr;
  gap: 0.3rem;
  align-items: center;
  font-size: 0.68rem;
  color: #d7dae0;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--dur-med) var(--ease-out);
  border-radius: 4px;
}

.pos-cart-row.is-added {
  background: rgba(255, 90, 10, 0.12);
}

.pos-cart-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.pos-cart-remove svg {
  width: 13px;
  height: 13px;
}

.pos-cart-discount {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #8e95a2;
  padding: 0.5rem 0.1rem 0;
}

.pos-cart-payment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: #8e95a2;
  padding: 0.5rem 0.1rem 0;
}

.pos-payment-select {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #1b2229;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  color: #d7dae0;
  font-size: 0.68rem;
}

.pos-payment-select svg {
  width: 11px;
  height: 11px;
}

.pos-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffffff;
  padding: 0.6rem 0.1rem;
  margin-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pos-cart-amount {
  color: var(--accent-500);
  font-size: 1.1rem;
}

.pos-charge-btn {
  margin-top: 0.6rem;
  /* Naranjo más profundo que --accent-500: con texto blanco el naranjo
     vivo solo llega a 3.13:1 y este botón lleva texto. Aquí sube a 5.09:1. */
  background: #c2440d;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.85rem;
  border-radius: var(--radius-btn);
  text-align: center;
  cursor: default;
}

.pos-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-top: 1rem;
}

.pos-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pos-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 90, 10, 0.14);
  color: var(--accent-500);
  margin-bottom: 0.15rem;
}

.pos-stat-icon svg {
  width: 14px;
  height: 14px;
}

.pos-stat-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a919e;
}

.pos-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: #ffffff;
}

/* --- "Más que un software" y grillas de características --- */
.software-more-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.software-more-card {
  text-align: center;
  padding: 1.5rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.software-more-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-500);
}

.software-more-card .card-icon {
  margin-inline: auto;
}

.software-more-card h3 {
  font-size: 0.98rem;
  margin-bottom: 0.35rem;
}

.software-more-card p {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* --- Planes de soporte continuo (reutiliza .plan-card) --- */
.support-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.support-plan-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.support-plan-card.featured {
  background: linear-gradient(180deg, rgba(255, 90, 10, 0.08), var(--bg-surface) 45%);
  border-color: var(--accent-500);
  box-shadow: var(--shadow-glow);
}

.support-plan-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

/* --- Precio dentro de .plan-card (Páginas Web / Sistemas / POS) --- */
.plan-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* --- Planes overview (tarjetas con imagen, arriba de los grupos de precios) --- */
.plans-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.plan-overview-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.plan-overview-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.plan-overview-media {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-subtle);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.plan-overview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plan-overview-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.plan-overview-body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.plan-overview-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--accent-400);
  margin-bottom: 0.6rem;
}

.plan-overview-body > p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

.plan-overview-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.plan-overview-list li {
  position: relative;
  padding-left: 1.3rem;
}

.plan-overview-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-500);
}

.plan-overview-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

.plans-overview-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 2.5rem;
}

/* --- Grupos dentro de la sección de Precios --- */
.pricing-group {
  padding-block: 2rem;
  scroll-margin-top: 100px;
}

.pricing-group:first-of-type {
  padding-top: 0;
}

.pricing-group + .pricing-group {
  border-top: 1px solid var(--border-subtle);
}

.pricing-group-head {
  margin-bottom: 2rem;
}

.pricing-group-head h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

.pricing-group-head p {
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   MASCOTA JUNTO AL TÍTULO DE SECCIÓN
   Patrón reutilizable: la mascota acompaña un encabezado centrado sin
   sacarlo de su eje. Es decorativa (aria-hidden) y se oculta en pantallas
   angostas, donde el espacio lo necesita el texto.
   -------------------------------------------------------------------------- */
.head-bot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: 3rem;
}

.head-bot-row .section-head {
  margin-bottom: 0;
}

.head-bot {
  width: clamp(90px, 12vw, 150px);
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 14px 30px rgba(20, 22, 30, 0.24));
  animation: float-slow 7s ease-in-out infinite;
}

.head-bot-row.reverse {
  flex-direction: row-reverse;
}

.section-dark .head-bot {
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.5));
}

@media (max-width: 760px) {
  .head-bot {
    display: none;
  }
}

/* Enlace corto que conecta la sección de precios con la de mejora
   de cotización de la competencia. */
.price-match-hint {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.price-match-hint a {
  color: var(--accent-400);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.price-match-hint a:hover {
  color: var(--accent-600);
}

/* --- "Te mejoramos la propuesta" (cotización de la competencia) --- */
.match-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.match-highlight {
  color: var(--ink-accent);
}

.match-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.match-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.match-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 90, 10, 0.16);
  border: 1px solid rgba(255, 90, 10, 0.38);
  color: var(--ink-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.match-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.match-list p {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.match-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.match-note {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
  max-width: 620px;
}

.match-visual img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.55));
  animation: float-slow 8.5s ease-in-out infinite;
}

/* --- Blurbs de venta cruzada, discretos, entre secciones --- */
.cross-sell {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border-subtle);
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}

.cross-sell a {
  color: var(--accent-400);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Nota legal (boleta electrónica / SII) --- */
.legal-note {
  max-width: 820px;
  margin: 1.75rem auto 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: left;
}

/* --- Campos opcionales del formulario --- */
.field-optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.8em;
}

/* --------------------------------------------------------------------------
   23. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-strip .container { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .solutions-grid { grid-template-columns: 1fr; }
  .pos-grid { grid-template-columns: 1fr; }
  .pos-visual { order: -1; }
  .software-more-grid { grid-template-columns: repeat(3, 1fr); }
  .support-plans-grid { grid-template-columns: 1fr; }
  .hero-benefits { grid-template-columns: 1fr; }
  .plans-overview { grid-template-columns: 1fr; }
  .match-grid { grid-template-columns: 1fr; }
  .match-visual {
    max-width: 260px;
    margin-inline: auto;
  }
  .final-cta-inner { grid-template-columns: 1fr; }
  .final-cta-bot {
    max-width: 240px;
    margin-inline: auto;
  }
}

@media (max-width: 960px) {
  .nav-links,
  .nav-actions .btn-secondary,
  .nav-actions .btn-primary {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-actions {
    gap: 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    /* Sin order:-1 a propósito: en mobile el orden debe ser
       texto -> botones -> mockup (según especificación visual),
       y .hero-copy ya precede a .hero-visual en el DOM. */
    max-width: 420px;
    margin-inline: auto;
    margin-top: 2rem;
  }

  .grid-3,
  .plans-grid {
    grid-template-columns: 1fr;
  }

  .plan-card.featured,
  .support-plan-card.featured {
    transform: none;
  }

  .transform-grid {
    grid-template-columns: 1fr;
  }

  .transform-arrow {
    margin-inline: auto;
    transform: rotate(90deg);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .demo-banner {
    grid-template-columns: 1fr;
  }

  .rubro-panel {
    grid-template-columns: 1fr;
  }
  .rubro-panel .mock-card {
    max-width: 420px;
  }
  .rubro-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 0.5rem;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .rubro-tab {
    flex-shrink: 0;
  }

  .pos-mockup {
    grid-template-columns: 1fr;
  }
  .pos-stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .software-more-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* En mobile la mascota del hero pasa a un tamaño discreto para no
     competir con el mockup del dashboard. */
  .hero-mascot {
    max-width: 190px;
    right: -4%;
    bottom: -6%;
  }

  .demo-visual {
    flex-direction: column;
    align-items: stretch;
  }
  .demo-bot {
    width: 150px;
    align-self: center;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 640px) {
  .problem-grid,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  .steps-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .stats-strip .container {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }
  .transform-count {
    gap: 0.85rem;
  }
  .software-more-grid {
    grid-template-columns: 1fr;
  }
  .pos-stat-cards {
    grid-template-columns: 1fr 1fr;
  }
  .pos-product-head,
  .pos-product-row {
    grid-template-columns: 1fr 1.6fr 0.7fr;
  }
  .pos-product-head span:last-child,
  .pos-product-row span:last-child {
    display: none;
  }
  .pos-cart-cols,
  .pos-cart-row {
    grid-template-columns: 1.4fr 0.5fr 0.9fr;
  }
  .pos-cart-cols span:nth-child(4),
  .pos-cart-row span:nth-child(4),
  .pos-cart-cols span:nth-child(5),
  .pos-cart-row span:nth-child(5),
  .pos-cart-row .pos-cart-remove {
    display: none;
  }
  .pos-toolbar-title {
    font-size: 0.78rem;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .dash-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .floating-chip {
    display: none;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: 1rem;
    right: 1rem;
  }
}

/* Menú móvil (drawer) */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg-base);
  padding: 6rem var(--space-container) 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-menu .btn {
  margin-top: 1rem;
}

body.no-scroll {
  overflow: hidden;
}