/* ============================================================
   EVOLVEX — LANDING · SISTEMA DE DISEÑO
   Fuente de verdad: EVOLVEX_BRAND_MASTER.md

   Archivo único de estilos, sin build step: la landing es una
   sola página, así que se organiza en bloques comentados en vez
   de varios archivos.

   Sistema claro y premium, azul tecnológico como color dominante
   (decisión explícita del usuario, que sustituye la ruta de color
   "teal" del Brand Master para esta iteración). Los mismos nombres
   de token se conservan (--color-ink, --color-bg, --color-action...)
   pero sus valores viven en un esquema claro — así ningún
   componente individual necesita reescribirse, solo la paleta.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Color — sistema claro, azul tecnológico dominante. --color-ink
     es el texto oscuro sobre fondo claro; --color-bg es el fondo
     principal claro. */
  --color-ink: #0f172a;            /* texto oscuro principal (títulos) */
  --color-text-secondary: #64748b; /* texto secundario */
  --color-bg: #f8fafc;             /* fondo principal claro */
  --color-surface: #ffffff;        /* superficie elevada (tarjetas, paneles) */
  --color-border: #e2e8f0;
  /* #94a3b8 medía 2.56:1 contra blanco/superficie — no cumplía el
     ≥3:1 que este comentario ya declaraba (WCAG 1.4.11, hallazgo del
     Paso 9). #7c8ba3 es un paso más oscuro dentro de la misma familia
     gris-azulada (mide 3.45:1 en blanco, 3.30:1 en --color-bg) — sin
     cambiar la paleta ni el resultado visual del resto del sitio. */
  --color-border-interactive: #7c8ba3; /* borde ≥3:1 vs superficie — límites de componentes interactivos (WCAG 1.4.11) */
  --color-action: #2563eb;         /* azul tecnológico principal — único color de acción */
  --color-action-hover: #1d4ed8;
  --color-action-contrast: #ffffff; /* texto blanco sobre el botón azul */
  --color-accent: #06b6d4;         /* cian secundario — microacento puntual */
  --color-danger: #dc2626;         /* estados de error de formulario (WCAG 1.4.1 / 3.3.1) */
  --color-surface-2: #eff6ff;      /* azul muy claro — segundo tono de superficie, para profundidad por capas */

  /* Azul luminoso — mismo territorio que --color-action, más claro y
     saturado para funcionar como brillo/energía puntual (núcleo del
     Hero, halos, conexiones del Canvas). Se usa con moderación —
     nunca como texto plano ni como color dominante de toda la
     página. */
  --color-action-glow: #20b7ea;
  --action-glow-rgb: 32, 183, 234;

  /* Verde — EXCLUSIVAMENTE para éxito, confirmación o estados
     positivos (envío de formulario, capacidades ya verificadas en
     Evidencia). Nunca decorativo ni como acento general. */
  --color-success: #10b981;
  --success-rgb: 16, 185, 129;

  /* Componentes RGB de ink/action/bg/accent, para construir sombras,
     halos y tintes sin salir de la paleta aprobada. */
  --ink-rgb: 15, 23, 42;
  --action-rgb: 37, 99, 235;
  --bg-rgb: 248, 250, 252;
  --accent-rgb: 6, 182, 212;
  --surface-rgb: 255, 255, 255;

  /* Sombras — tinte oscuro suave (derivado de --ink-rgb) a baja
     opacidad, nunca negro puro: sensación de profundidad premium,
     no de recorte duro. */
  --shadow-sm: 0 1px 3px rgba(var(--ink-rgb), 0.08), 0 1px 2px rgba(var(--ink-rgb), 0.05);
  --shadow-md: 0 20px 40px -18px rgba(var(--ink-rgb), 0.18), 0 4px 14px rgba(var(--ink-rgb), 0.08);
  --shadow-action: 0 14px 28px -10px rgba(var(--action-rgb), 0.35);

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

  /* Tercera reducción, solo en títulos/subtítulo (decisión explícita
     del usuario: el Hero quedó "muy comprimido" tras el ajuste de
     altura de la pantalla anterior — letra un poco más chica libera
     aire vertical y se percibe más amplio, sin tocar --fs-body ni
     --fs-small, que ya estaban en su punto). */
  --fs-h1: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
  --fs-h2: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --fs-subtitle: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;

  /* Espaciado — escala base 4px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  /* --space-24 ajustado de 6rem a 4.5rem (a petición explícita del
     usuario): es el único token detrás del padding-block de TODAS
     las secciones (bloque 4) y del padding inferior del Hero (bloque
     7) — con el valor anterior, cada sección medía ~192px de solo
     padding contra 160-274px de contenido real (medido con
     Playwright), sensación de "contenido pequeño en un lienzo
     enorme". Un único cambio de token corrige el ritmo vertical de
     toda la página de forma coherente, sin tocar sección por
     sección. */
  --space-24: 4.5rem;
  --space-32: 8rem;

  /* Layout */
  /* Subido de 1200px a 1280px (petición explícita): aprovecha mejor
     el ancho en pantallas de escritorio anchas; en viewports más
     angostos no cambia nada (max-width solo actúa por encima de este
     valor). */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --border-w: 1px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 220ms;
  --duration-base: 320ms;
}

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

html {
  scroll-behavior: smooth;
}

@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;
  }
}

html,
body {
  /* Defensivo: el lienzo principal (bloque 3.5) tiene una sombra
     difusa grande en un elemento a ancho completo — sin esto, el
     desenfoque de la sombra podría asomar unos px más allá del
     viewport y generar una barra de scroll horizontal fantasma. No
     afecta el layout: nada en el sitio depende de overflow-x. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0;
  color: var(--color-ink);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

/* Foco visible — no negociable por accesibilidad */
:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  z-index: 100;
  border-radius: 0 0 6px 0;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

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

/* Compensa el header sticky (bloque 5) al saltar a cualquier ancla
   del menú: sin esto, el título de la sección quedaría oculto detrás
   del header. Selector de atributo genérico — cubre secciones y el
   <form> de conversión (#conversion-form) sin listar cada id. */
[id] {
  scroll-margin-top: 5.5rem;
}

/* ---------- 3. SISTEMA DE FONDO GLOBAL ----------
   Capa ambiental fija detrás de todo el contenido: base clara +
   halos de luz azul muy suaves + líneas geométricas casi
   imperceptibles. Todas las secciones sin fondo propio (o con un
   fondo translúcido) la dejan ver — abundante espacio negativo,
   sin bloques de color desconectados entre sí. Deriva extremadamente
   lento (70s, recorrido mínimo); se desactiva por completo con
   prefers-reduced-motion.

   z-index: -1 es obligatorio, no cosmético: sin él, este elemento
   fixed se pinta ENCIMA de cualquier contenido sin position propio,
   tapándolo por completo (bug real ya encontrado y corregido en una
   iteración anterior de este archivo). */
.ambient-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Base ligeramente más profunda que antes (gris azulado, nunca
     blanco puro) — a petición explícita del usuario, para que el
     "fondo exterior" se perciba como un espacio distinto detrás del
     lienzo principal (bloque 3.5), no como la misma superficie
     blanca. Los halos radiales no se tocan: misma posición, mismo
     tamaño, solo cambia el piso sobre el que se apoyan. */
  background:
    radial-gradient(55% 45% at 12% 6%, rgba(var(--action-rgb), 0.09), transparent 62%),
    radial-gradient(48% 40% at 90% 18%, rgba(var(--action-glow-rgb), 0.09), transparent 65%),
    radial-gradient(60% 46% at 50% 96%, rgba(var(--accent-rgb), 0.05), transparent 70%),
    linear-gradient(180deg, #eef2f7 0%, #e7edf5 45%, #dde6f0 100%);
  background-size: 130% 130%, 130% 130%, 140% 140%, 100% 100%;
  background-position: 0% 0%, 100% 0%, 50% 100%, 0 0;
}

.ambient-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(115deg, transparent 49.6%, rgba(var(--ink-rgb), 0.018) 50%, transparent 50.4%),
    linear-gradient(115deg, transparent 74.6%, rgba(var(--ink-rgb), 0.01) 75%, transparent 75.4%);
  opacity: 0.6;
}

@media (prefers-reduced-motion: no-preference) {
  .ambient-field {
    animation: ambient-drift 70s ease-in-out infinite alternate;
  }
}

@keyframes ambient-drift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0 0;
  }
  100% {
    background-position: 2% 3%, 97% -2%, 52% 97%, 0 0;
  }
}

/* ---------- 3.5 LIENZO PRINCIPAL ----------
   Ajuste de profundidad/composición (a petición explícita del
   usuario) — envuelve <main>+<footer> (ver index.html) para que toda
   la landing se perciba como una única superficie elevada sobre el
   fondo exterior (.ambient-field, bloque 3), no como una página
   plana ni como secciones-tarjeta sueltas.

   Ancho completo siempre (sin max-width ni margin-inline): a
   petición explícita, la profundidad se resuelve con sombra + radio
   + contraste de color, nunca angostando el contenido en pantallas
   normales. margin-block clamp: ~8px en móvil hasta ~36px en
   escritorio — el "aire" mínimo que deja ver el exterior arriba y
   abajo sin restar espacio al contenido.

   overflow: hidden es necesario para que el radio de borde recorte
   las esquinas de .hero (que ya tiene su propio fondo/overflow
   propio) en vez de que asomen en ángulo recto — no crea containing
   block para position:fixed (eso solo ocurre con transform/filter/
   perspective/contain/will-change), así que no interfiere con
   .site-header, que vive FUERA de este wrapper de todos modos. */
.landing-canvas {
  /* Solo margen arriba (recorte a petición explícita del usuario: el
     margen inferior dejaba ver una franja del fondo exterior que se
     percibía como "un cuadro gris que no hace nada" — el footer ya
     cierra la página visualmente, no necesita ese aire debajo). El
     margen superior también se redujo, como parte del ajuste de
     "primera vista" más abajo (bloque 7 HERO). */
  margin-top: clamp(0.375rem, 1.2vw, 1rem);
  margin-bottom: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
  border: 1px solid rgba(var(--ink-rgb), 0.04);
  box-shadow:
    0 -30px 70px -55px rgba(var(--ink-rgb), 0.1),
    0 20px 60px -38px rgba(var(--ink-rgb), 0.12),
    0 70px 130px -45px rgba(var(--ink-rgb), 0.16);
}

/* Radio discreto solo en escritorio (mismo valor que .hero__visual,
   bloque 7, para no inventar una escala nueva). En móvil se mantiene
   en 0: el lienzo llega borde a borde del viewport, "adaptándose
   naturalmente" como pide la especificación — el margen vertical ya
   basta para transmitir profundidad ahí, sin angostar el ancho. */
@media (min-width: 901px) {
  .landing-canvas {
    border-radius: 28px;
  }
}

/* ---------- 4. LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-24);
}

@media (max-width: 640px) {
  .section {
    padding-block: var(--space-16);
  }
}

/* ---------- 5. HEADER / NAV ----------
   Fijo (no sticky): visible en la primera vista del Hero y se oculta
   en cuanto el visitante empieza a hacer scroll — decisión explícita
   del usuario (ver .js .site-header.is-hidden más abajo y
   scripts/main.js initHeaderReveal). Blur sobre el fondo ambiental,
   no un color plano distinto del resto de la página. Cada enlace
   ancla a una sección real (ver index.html); [data-nav-link] recibe
   .is-active desde scripts/main.js (initNavScrollSpy) según la
   sección visible. */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  padding-block: var(--space-4);
  background: rgba(var(--bg-rgb), 0.85);
  border-bottom: var(--border-w) solid var(--color-border);
  /* Sombra extremadamente suave — integra el header al nuevo sistema
     de profundidad del lienzo (bloque 3.5): se siente flotando sobre
     el contenido, no pegado a él. No es un rediseño, solo el mismo
     lenguaje de sombra difusa aplicado aquí. */
  box-shadow: 0 8px 24px -20px rgba(var(--ink-rgb), 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Visible por defecto (primera vista del Hero) y se oculta en cuanto
   hay scroll — scripts/main.js initHeaderReveal añade .is-hidden
   apenas window.scrollY supera un umbral pequeño, y la quita al
   volver arriba. Progressive enhancement: sin JS (sin la clase .js
   en <html>) el header se queda fijo y siempre visible, nunca oculto
   sin forma de revelarlo. position: fixed (no sticky, bloque
   anterior): al no ocupar espacio en el flujo, ocultarlo no deja un
   hueco vacío arriba. */
.js .site-header {
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

.js .site-header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--color-ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--color-ink);
  border-color: var(--color-action);
}

.site-nav__cta {
  padding: 0.6rem 1.25rem;
  font-size: var(--fs-small);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: var(--border-w) solid var(--color-border-interactive);
  border-radius: 8px;
  background: var(--color-surface);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  /* Panel flotante bajo el header, oculto por defecto: JS solo
     alterna .is-open (scripts/main.js initNavToggle); sin JS, el
     panel queda siempre visible en flujo normal (progressive
     enhancement, mismo patrón que .js/.reveal del Hero). */
  .site-nav {
    position: fixed;
    inset: 4.25rem var(--container-pad) auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    padding: var(--space-6);
    border-radius: 16px;
    background: var(--color-surface);
    border: var(--border-w) solid var(--color-border);
    box-shadow: var(--shadow-md);
  }

  .js .site-nav {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      visibility var(--duration-base);
  }

  .js .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .site-nav__cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .site-nav {
    transition: none;
  }
}

/* ---------- 6. BOTONES ----------
   Tamaño cómodo y esquinas moderadas (10px, no píldora completa):
   sensación de producto tecnológico serio, no de aplicación
   consumer/infantil. Elevación + brillo sutil en hover (~240ms). */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1rem 1.75rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
  border: var(--border-w) solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.button--primary {
  background: var(--color-action);
  color: var(--color-action-contrast);
  box-shadow: 0 8px 20px -12px rgba(var(--action-rgb), 0.55);
}

.button--primary:hover {
  background: var(--color-action-hover);
  box-shadow: 0 14px 28px -10px rgba(var(--action-rgb), 0.45);
  transform: translateY(-2px);
}

.button--primary:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px -10px rgba(var(--action-rgb), 0.4);
}

.button--secondary {
  background: transparent;
  color: var(--color-ink);
  border-width: 1.5px;
  border-color: var(--color-border-interactive);
}

.button--secondary:hover {
  border-color: var(--color-action);
  color: var(--color-action);
  background: rgba(var(--action-rgb), 0.05);
  transform: translateY(-1px);
}

.button__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* ---------- 7. HERO ---------- */
/* Padding sensible a la altura del viewport (vh), no solo al ancho
   (a petición explícita del usuario): en una pantalla "normal" de
   escritorio (~800-900px de alto útil), el objetivo es que el menú +
   el contenido del Hero + la franja de capacidades quepan sin hacer
   scroll. Con --space-32 (8rem) fijo arriba, eso no pasaba — el
   clamp da ~72-96px según la altura real en vez de 128px siempre. El
   mínimo sigue dejando aire suficiente bajo el header fijo (~76px)
   para que el badge no quede pegado a él. */
.hero {
  position: relative;
  overflow: hidden;
  /* +1.2rem (~19px, ~0.5cm) arriba respecto a la pasada anterior:
     decisión explícita del usuario — se sentía "muy comprimido"
     pegado al header. La letra más chica (bloque 1) compensa el
     espacio vertical que esto suma, para que siga viéndose completo
     de primeras en la mayoría de pantallas. */
  padding-block: clamp(5.7rem, 4.2rem + 5vh, 7.7rem) clamp(2rem, 1rem + 3vh, 3.5rem);
}

/* Resplandor ambiental del Hero — capa adicional sobre el fondo
   global, para dar protagonismo a la apertura sin desconectarse del
   resto (mismo azul, mismo lenguaje). Deliberadamente contenido: el
   objetivo es "premium", no "neón". */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -12%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, rgba(var(--action-rgb), 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -25%;
  width: 45%;
  height: 90%;
  background: radial-gradient(circle, rgba(var(--action-glow-rgb), 0.08), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 640px) {
  .hero {
    padding-block: var(--space-16) var(--space-12);
  }
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* 1fr 1fr (antes 1.1fr 0.9fr): composición equilibrada entre
     contenido y elemento visual (petición explícita) — con la
     proporción anterior, la columna del hero-orb quedaba más
     angosta que el propio tope de tamaño del orb, así que nunca
     llegaba a usarlo (se veía "perdido" dentro de su propio panel). */
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

.hero__content {
  max-width: 42rem;
}

/* Badge sobre el titular — reemplaza el "Powered by AI" genérico de
   la referencia: nombra el producto real (EVO) en vez de liderar con
   "IA" como argumento de venta (Brand Master §18, anti-posicionamiento). */
/* border-radius moderado (no píldora 999px): el texto del badge es
   una frase completa, no una palabra suelta — con 999px de radio,
   dos líneas de texto se ven como una cápsula deformada en vez de
   una etiqueta. align-items: flex-start + margen en el punto: para
   que el punto quede alineado con la primera línea si el texto
   envuelve a 2 líneas en pantallas angostas. */
.hero__badge {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 26rem;
  padding: 0.5rem 0.9rem;
  border-radius: 14px;
  background: rgba(var(--action-rgb), 0.08);
  border: var(--border-w) solid rgba(var(--action-rgb), 0.18);
  color: var(--color-action);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 var(--space-4);
}

.hero__badge-dot {
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.45em;
  border-radius: 999px;
  background: var(--color-action);
}

/* Nota honesta en el lugar de la prueba social (ver comentario en
   index.html): mismo peso visual discreto que el resto de texto de
   apoyo, sin avatares ni cifras. */
.hero__note {
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hero__subtitle {
  margin-top: var(--space-6);
  font-size: var(--fs-subtitle);
  color: var(--color-text-secondary);
  max-width: 34rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Indicador de scroll: línea con un tramo que "cae" en loop suave.
   margin-top también sensible a vh (ver comentario en .hero) — era
   el mayor "hueco" individual entre el CTA y la franja de
   capacidades. */
.hero__scroll-cue {
  margin-top: clamp(1.25rem, 0.75rem + 2.5vh, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}

.hero__scroll-cue-line {
  position: relative;
  width: 1.5px;
  height: 2.5rem;
  overflow: hidden;
  background: var(--color-border-interactive);
}

.js .hero__scroll-cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-action);
  transform: translateY(-100%);
  animation: hero-scroll-cue 1.8s ease-in-out infinite;
}

@keyframes hero-scroll-cue {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(100%);
  }
}

.hero__scroll-cue-text {
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__scroll-cue-line::after {
    animation: none;
    transform: translateY(0);
  }
}

/* Panel de la pieza central del Hero — superficie clara elevada con
   un toque de translucidez ("glassmorphism muy sutil", no por
   defecto en todo el sitio: solo aquí y en el panel de Conversión). */
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: var(--space-8);
  border-radius: 28px;
  background:
    radial-gradient(120% 120% at 50% 15%, rgba(var(--action-rgb), 0.1), transparent 62%),
    rgba(var(--surface-rgb), 0.72);
  border: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 640px) {
  .hero__visual {
    padding: var(--space-6);
    border-radius: 20px;
  }
}

/* Plataforma + esfera de cristal + tarjetas flotantes — pieza
   central propia de Evolvex (ver comentario en index.html). Puro
   CSS/SVG, siempre visible, sin estado de carga que gestionar y sin
   dependencia de WebGL. La sensación de "cristal" se logra con
   gradientes radiales en capas (brillo + color + sombra interna), no
   con un motor 3D. Movimiento mínimo y opcional (rotación/flotación
   muy lenta + parallax de cursor, ver scripts/main.js
   initHeroParallax), desactivado por completo con
   prefers-reduced-motion. --parallax-x/--parallax-y los actualiza JS;
   valen 0px por defecto, así que sin JS o con motion reducido la
   composición queda perfectamente quieta. */
.hero-orb {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: relative;
  width: 100%;
  max-width: 23rem;
  aspect-ratio: 1 / 1;
  color: var(--color-ink);
}

/* Más espacio en escritorio: 5 nodos con etiqueta de texto necesitan
   más aire alrededor de la esfera que un ícono suelto. Reducido de
   30rem a 24rem (petición explícita del usuario): al ser cuadrada
   (aspect-ratio 1/1), una esfera más grande que la columna de texto
   terminaba marcando la altura de toda la fila del Hero — era lo que
   más empujaba la franja de capacidades fuera de la primera pantalla. */
@media (min-width: 901px) {
  .hero-orb {
    max-width: 24rem;
  }
}

/* Base/plataforma tecnológica: dos anillos aplanados debajo de la
   esfera, para que se sienta suspendida sobre algo, no flotando en
   el vacío. */
.hero-orb__platform {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 84%;
  height: 20%;
  transform: translateX(-50%) scaleY(0.4);
  border-radius: 50%;
  border: 1px solid rgba(var(--action-rgb), 0.16);
  background: radial-gradient(closest-side, rgba(var(--action-rgb), 0.14), transparent 75%);
}

.hero-orb__platform--inner {
  bottom: 9%;
  width: 58%;
  height: 14%;
  border-color: rgba(var(--action-glow-rgb), 0.22);
  background: radial-gradient(closest-side, rgba(var(--action-glow-rgb), 0.2), transparent 75%);
}

.hero-orb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--action-rgb), 0.25);
}

.hero-orb__ring--inner {
  inset: 15%;
  border-color: rgba(var(--action-glow-rgb), 0.3);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-orb__ring--outer {
    animation: hero-orb-spin 50s linear infinite;
  }
  .hero-orb__ring--inner {
    animation: hero-orb-spin 36s linear infinite reverse;
  }
}

@keyframes hero-orb-spin {
  to {
    transform: rotate(360deg);
  }
}

/* El "núcleo de cristal": brillo blanco (luz incidiendo sobre
   vidrio) + halo azul + sombra interior + el logo de Evolvex en el
   centro (assets/logo.png). Plano intermedio de profundidad: se
   mueve con el parallax un poco más que la plataforma/anillos (que
   no se mueven), pero menos que las tarjetas (bloque siguiente). */
.hero-orb__core {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(var(--surface-rgb), 0.95), transparent 38%),
    radial-gradient(circle at 42% 38%, rgba(var(--action-glow-rgb), 0.55), rgba(var(--action-rgb), 0.28) 60%, transparent 78%),
    var(--color-surface-2);
  box-shadow:
    0 22px 44px -16px rgba(var(--action-rgb), 0.35),
    inset 0 0 22px rgba(var(--surface-rgb), 0.55),
    inset 0 -12px 22px rgba(var(--action-rgb), 0.15);
  transform: translate(var(--parallax-x), var(--parallax-y));
  overflow: hidden;
}

/* El PNG del logo tiene fondo negro sólido (no transparente).
   mix-blend-mode: screen lo funde con el fondo oscuro del núcleo sin
   editar el archivo: el negro se vuelve invisible, la cinta clara
   queda con brillo. Estático a propósito (decisión explícita del
   usuario): el logo no gira, solo los anillos exteriores. */
.hero-orb__logo {
  position: absolute;
  inset: 14%;
  width: 72%;
  height: 72%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 12px rgba(var(--action-glow-rgb), 0.45));
}

.hero-orb__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(var(--action-rgb), 0.35);
}

.hero-orb__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
}

/* Plano de primer plano: las tarjetas de conversación se mueven más
   que el núcleo con el parallax (calc multiplica el mismo par de
   variables que ya actualiza JS — sin variables adicionales). */
.hero-orb__chips {
  position: absolute;
  inset: 0;
  transform: translate(calc(var(--parallax-x) * 1.6), calc(var(--parallax-y) * 1.6));
}

/* Nodo = ícono + etiqueta de dos líneas (título + subtítulo), no un
   ícono suelto: cada uno nombra la etapa real del Mecanismo Evolvex
   (ver comentario en index.html) para que el Hero no repita
   "funciones de IA" genéricas desconectadas del resto de la página. */
.hero-orb__node {
  position: absolute;
  left: var(--chip-x);
  top: var(--chip-y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 6.25rem;
  text-align: center;
}

.hero-orb__node-icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(var(--surface-rgb), 0.9);
  border: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-action);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-orb__node-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.hero-orb__node-label {
  font-size: 0.6875rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-ink);
}

.hero-orb__node-label small {
  display: block;
  font-weight: 400;
  font-size: 0.625rem;
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-orb__node {
    animation: hero-orb-float 7s ease-in-out infinite;
  }
  .hero-orb__node--comprende {
    animation-delay: -1.4s;
  }
  .hero-orb__node--actua {
    animation-delay: -2.8s;
  }
  .hero-orb__node--organiza {
    animation-delay: -4.2s;
  }
  .hero-orb__node--escala {
    animation-delay: -5.6s;
  }
}

@keyframes hero-orb-float {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) translateY(-6px);
    opacity: 0.88;
  }
}

@media (max-width: 640px) {
  /* Más grande que antes (16rem → 20rem): a petición explícita del
     usuario, móvil debe mostrar la misma información que escritorio
     — los 5 nodos CON su etiqueta, no solo 4 íconos sueltos. Sigue
     siendo fluido (.hero-orb tiene width:100%): en un iPhone angosto
     se achica solo hasta el ancho real disponible dentro de
     .hero__visual; 20rem es el techo, no un tamaño fijo. */
  .hero-orb {
    max-width: 20rem;
  }

  /* Ancho para 2 líneas de etiqueta (más angosto que el de
     escritorio, 6.25rem, porque hay menos aire alrededor de la
     esfera en móvil). */
  .hero-orb__node {
    width: 4.75rem;
    gap: 0.2rem;
  }

  .hero-orb__node-icon {
    width: 1.9rem;
    height: 1.9rem;
  }

  .hero-orb__node-icon svg {
    width: 0.85rem;
    height: 0.85rem;
  }

  /* Etiqueta visible (a diferencia del ajuste anterior): reducida de
     0.6875rem/0.625rem a este tamaño para que 2 palabras como
     "agenda y confirma" quepan en el ancho del nodo sin forzar una
     tercera línea. */
  .hero-orb__node-label {
    font-size: 0.5625rem;
    line-height: 1.2;
  }

  .hero-orb__node-label small {
    font-size: 0.5rem;
  }

  /* Reposiciona los 5 nodos (vía custom property con !important — la
     única forma de vencer el --chip-x/--chip-y inline del HTML sin
     duplicar el marcado por breakpoint) a un radio más uniforme y
     compacto que el de escritorio, conservando el mismo ángulo/orden
     alrededor de la esfera (misma composición, solo más ceñida para
     que 5 etiquetas quepan sin pisarse entre sí ni salirse del
     círculo). Verificado con las cajas reales de cada nodo, no a
     mano: cero solapamientos y margen positivo contra el borde de la
     esfera en los 5 casos, en 375–430px de ancho. */
  .hero-orb__node--atiende {
    --chip-x: 50% !important;
    --chip-y: 11% !important;
  }

  .hero-orb__node--comprende {
    --chip-x: 85% !important;
    --chip-y: 32% !important;
  }

  .hero-orb__node--actua {
    --chip-x: 76% !important;
    --chip-y: 82% !important;
  }

  .hero-orb__node--organiza {
    --chip-x: 24% !important;
    --chip-y: 84% !important;
  }

  .hero-orb__node--escala {
    --chip-x: 15% !important;
    --chip-y: 34% !important;
  }

  /* Las líneas conectoras son un trazo estático (rutas SVG fijas en
     index.html, no leen --chip-x/--chip-y) — con los nodos
     reposicionados arriba dejarían de apuntar a su ícono real. Se
     ocultan en vez de intentar sincronizarlas: son decorativas, no
     parte de la información (núcleo, anillos y los 5 nodos con su
     texto se conservan, que es lo que el usuario pidió ver completo). */
  .hero-orb__lines {
    display: none;
  }

  /* La plataforma interior (elipse decorativa bajo la esfera) se
     mantiene oculta en móvil por espacio — no es parte de "los 5
     íconos con su información", que es lo que se restauró arriba. */
  .hero-orb__platform--inner {
    display: none;
  }
}

/* Entrada de contenido del Hero (fade + desplazamiento leve) */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 7.1 FRANJA DE CAPACIDADES ----------
   Cierre del Hero: mismo lugar visual que la barra de íconos de la
   referencia, con reclamos que EVO puede sostener hoy (ver
   index.html). Vive dentro de .hero (no es su propia <section>),
   separada del contenido superior por un borde superior sutil. */
.hero-features__list {
  list-style: none;
  /* margin-top/padding-top sensibles a vh (ver comentario en .hero).
     +2.375rem (~1cm) respecto a la pasada anterior: decisión
     explícita del usuario, quería esta franja más abajo. */
  margin: clamp(3.625rem, 3.125rem + 2.5vh, 5.375rem) 0 0;
  padding-top: clamp(1rem, 0.5rem + 1.5vh, 2rem);
  border-top: var(--border-w) solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}

.hero-features__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.hero-features__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(var(--action-rgb), 0.08);
  color: var(--color-action);
}

.hero-features__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.hero-features__title {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink);
}

.hero-features__subtitle {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .hero-features__list {
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--space-12);
  }
}

@media (max-width: 480px) {
  .hero-features__list {
    grid-template-columns: 1fr;
  }
}

/* ---------- 8. SECCIONES DE CONTENIDO (sistema común) ----------
   Cabecera reutilizable (eyebrow + título + texto de apoyo),
   compartida entre secciones para mantener una sola jerarquía
   tipográfica en vez de que cada una invente la suya.
   ------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-action);
  margin: 0 0 var(--space-3);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 38rem;
}

.section-lead {
  margin-top: var(--space-4);
  font-size: var(--fs-subtitle);
  color: var(--color-text-secondary);
  max-width: 38rem;
}

/* Profundidad entre secciones verticales — en vez de bloques de
   color planos, un lavado translúcido con un toque de blur sobre el
   fondo ambiental global ("glassmorphism muy sutil", no decorativo
   por defecto), para que cada sección se sienta como una zona con
   más presencia dentro del mismo espacio, no como una página aparte. */
.evo,
.evidencia,
.conversion {
  background: rgba(var(--surface-rgb), 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- 9. PROBLEMA ---------- */
.signals {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 36rem;
}

.signals__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: var(--border-w) solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--fs-subtitle);
}

.signals__item:last-child {
  border-bottom: none;
}

.signals__mark {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-action);
  opacity: 0.6;
}

.problema__bridge {
  margin-top: var(--space-8);
  max-width: 34rem;
  font-size: var(--fs-subtitle);
  font-weight: 600;
  color: var(--color-ink);
}

/* ---------- 11. EVO ----------
   Un solo plan visible (CORE): sin grid de comparación, sin
   badges de disponibilidad — no hay nada con qué compararlo en
   la experiencia pública. */
.evo__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
}

@media (max-width: 900px) {
  .evo__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.evo__card {
  padding: var(--space-8);
  background: linear-gradient(180deg, rgba(var(--action-rgb), 0.06), transparent 45%), var(--color-surface);
  border: var(--border-w) solid var(--color-action);
  border-radius: 16px;
  box-shadow: var(--shadow-action);
}

@media (max-width: 640px) {
  .evo__card {
    padding: var(--space-6);
  }
}

.evo__name {
  margin-top: var(--space-4);
  font-size: 1.5rem;
}

.evo__promise {
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--color-ink);
}

/* Indicador abstracto de flujo — ver comentario en index.html.
   Puramente CSS (sin SVG): puntos + segmentos en flexbox. */
.evo__flow {
  display: flex;
  align-items: center;
  margin: var(--space-4) 0 var(--space-2);
}

.evo__flow-node {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border-interactive);
  background: var(--color-surface);
}

.evo__flow-node.is-filled {
  background: var(--color-action);
  border-color: var(--color-action);
}

.evo__flow-line {
  flex: 1 0 1rem;
  height: 1.5px;
  background: var(--color-border);
  margin-inline: 3px;
}

.evo__flow-line.is-filled {
  background: var(--color-action);
}

.evo__cta {
  margin-top: var(--space-6);
}

/* ---------- 12. MECANISMO ----------
   Brand Master §23. Nodos numerados conectados por una línea — no
   tarjetas SaaS alineadas. La línea solo aparece en el layout de
   una fila (≥901px); en 2 o 1 columna no tendría sentido visual. */
.mecanismo__list {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .mecanismo__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .mecanismo__list {
    grid-template-columns: 1fr;
    margin-top: var(--space-8);
  }
}

@media (min-width: 901px) {
  .mecanismo__list {
    position: relative;
  }

  .mecanismo__list::before {
    content: "";
    position: absolute;
    top: 1.375rem;
    left: 10%;
    right: 10%;
    height: 1.5px;
    background: var(--color-border-interactive);
    z-index: 0;
  }
}

.mecanismo__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  z-index: 1;
}

.mecanismo__number {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-action);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-action);
  box-shadow: var(--shadow-sm);
}

.mecanismo__title {
  font-size: 1.125rem;
  font-weight: 600;
}

.mecanismo__step p {
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
}

/* ---------- 12.5 POR QUÉ EVOLVEX ----------
   Brand Master §5.1/§19: diferenciación frente a chatbot genérico,
   automatización aislada o reemplazo del equipo — nunca cifras ni
   comparaciones inventadas contra competidores concretos. */
.por-que__claim {
  margin-top: var(--space-6);
  max-width: 34rem;
  font-size: var(--fs-subtitle);
  font-weight: 600;
  color: var(--color-ink);
}

.por-que__list {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .por-que__list {
    grid-template-columns: 1fr;
  }
}

.por-que__item {
  padding: var(--space-6);
  border: var(--border-w) solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.por-que__item h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
}

.por-que__item p {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
}

/* ---------- 13. EVIDENCIA ----------
   Las marcas de verificación usan verde (--color-success): son
   literalmente confirmaciones de capacidades reales — el único uso
   de verde permitido en todo el sitio, junto con el estado de éxito
   del formulario (bloque 15). */
.evidencia__list {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-8);
  max-width: 48rem;
}

@media (max-width: 640px) {
  .evidencia__list {
    grid-template-columns: 1fr;
    margin-top: var(--space-8);
  }
}

.evidencia__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: var(--border-w) solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.evidencia__item p {
  color: var(--color-text-secondary);
}

.evidencia__mark {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(var(--success-rgb), 0.15);
  color: var(--color-success);
}

.evidencia__mark svg {
  width: 1rem;
  height: 1rem;
}

.evidencia__note {
  margin-top: var(--space-8);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  font-style: italic;
  max-width: 42rem;
}

/* ---------- 14. PREGUNTAS (FAQ) ----------
   Sección vertical de refuerzo antes de Conversión. Usa
   <details>/<summary> nativos: foco y estado expandido/colapsado
   accesibles por defecto, sin JavaScript.
   ------------------------------------------------------------- */
.preguntas {
  background: rgba(var(--surface-rgb), 0.45);
  border-block: var(--border-w) solid var(--color-border);
}

.faq {
  margin-top: var(--space-8);
  max-width: 42rem;
  border-top: var(--border-w) solid var(--color-border);
}

.faq__item {
  border-bottom: var(--border-w) solid var(--color-border);
  padding-block: var(--space-4);
}

.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-ink);
  padding-inline-start: var(--space-2);
}

.faq__item summary:hover {
  color: var(--color-action);
}

.faq__item p {
  margin-top: var(--space-3);
  padding-inline-start: var(--space-2);
  color: var(--color-text-secondary);
}

/* ---------- 15. CONVERSIÓN ----------
   Sección vertical normal (ya no una escena dentro de una pista
   horizontal). El panel conserva su propia profundidad/sombra y un
   toque de translucidez para sentirse como un cierre intencional,
   no un formulario aislado. El estado de éxito usa verde
   (--color-success) — es literalmente una confirmación positiva. */
.conversion__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  /* center (antes start): el bloque de texto (eyebrow + título +
     lead) mide ~134px de alto contra ~519px del formulario — con
     align-items: start, esos ~385px de diferencia quedaban como un
     tramo vacío bajo el texto, dentro del propio fondo translúcido
     de la sección (bloque 8): el "cuadro gris vacío antes del
     footer" que se reportó. center reparte esa diferencia arriba y
     abajo del texto en vez de dejarla toda junta como un bloque
     suelto. Causa identificada y medida con Playwright antes de
     aplicar el cambio. */
  align-items: center;
}

@media (max-width: 900px) {
  .conversion__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.conversion__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  border-radius: 20px;
  background: rgba(var(--surface-rgb), 0.85);
  border: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 640px) {
  .conversion__form {
    padding: var(--space-6);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink);
}

.field__optional {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.field input {
  padding: 0.75rem var(--space-4);
  border-radius: 8px;
  border: var(--border-w) solid var(--color-border-interactive);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

.field input:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

.field input:invalid[data-touched="true"] {
  border-color: var(--color-danger);
}

.conversion__submit {
  margin-top: var(--space-2);
  align-self: flex-start;
}

.conversion__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.conversion__status {
  min-height: 1.5em;
  font-size: var(--fs-small);
  margin: 0;
}

.conversion__status[data-tone="success"] {
  color: var(--color-success);
}

.conversion__status[data-tone="error"] {
  color: var(--color-danger);
}

.conversion__status[data-tone="pending"] {
  color: var(--color-text-secondary);
}

/* ---------- 16. FOOTER ---------- */
.site-footer {
  padding-block: var(--space-8);
  border-top: var(--border-w) solid var(--color-border);
}

.site-footer__text {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}