/* Nexunia — early-access.nexunia.com
   Hoja de estilos extraída del antiguo <style> inline de index.html
   (rediseño 2026-10, ver plan de rediseño integral) — mismo lenguaje visual
   de siempre (paleta cyan/azul/violeta/magenta, tarjetas --surface-glass,
   animaciones fade-up), sin build step, servida tal cual desde
   apps/early-access/public/. */

:root {
  --ink: #0e1116;
  --ink-raised: #12161d;
  --surface: #171b22;
  --surface-glass: rgba(23, 27, 34, 0.6);
  --line: #262c36;
  --line-soft: #1d222b;
  --fog: #8891a0;
  /* Corrección de contraste (auditoría app/perf 2026-09 + rediseño 2026-10):
     el valor anterior (#767f8d) daba un contraste insuficiente sobre
     --ink-raised; se alinea con el mismo valor ya corregido en
     apps/web/app/globals.css (--color-fog-dim: #8e8e8e). La variante de
     tema claro (#82838a, más abajo) ya cumplía AA y no se toca. */
  --fog-dim: #8e8e8e;
  --paper: #f4f2ec;
  --paper-dim: #cfd0ce;
  --cyan: #00e5ff;
  --cyan-dim: #00a8c4;
  --azure: #0080ff;
  --violet: #8b2fff;
  --magenta: #f21dff;
  --signal: #5bc8af;
  /* Washes/tintas de baja opacidad para fondos de ambiente (aurora del
     footer, fondo de burbuja de chat de IA) — mismo patrón que
     --color-cyan-soft/--color-violet-soft/--color-magenta-soft de
     apps/web/app/globals.css. Con variable propia por tema (más abajo en
     tema claro) en vez de rgba() fijo repartido por el archivo, que es
     justo lo que impedía que el cyan/magenta de marca se viera en tema
     claro (ver nota en el override de tema claro). */
  --cyan-soft: rgba(0, 229, 255, 0.12);
  --violet-soft: rgba(139, 47, 255, 0.14);
  --magenta-soft: rgba(242, 29, 255, 0.12);
  /* Subrayado de los enlaces de texto en cyan (.fine-link, enlaces de
     hoja de ruta/puesta en marcha) — mismo motivo que --cyan-soft. */
  --cyan-underline: rgba(0, 229, 255, 0.35);
  /* Línea de borde superior entre secciones, en degradado de marca sutil
     (ver uso en los `border-image` de cada sección) — valor propio por
     tema por el mismo motivo que --cyan-soft arriba. */
  --section-divider-gradient: linear-gradient(
    90deg,
    rgba(0, 229, 255, 0.4),
    rgba(139, 47, 255, 0.28) 55%,
    rgba(242, 29, 255, 0.22)
  );
  /* Azul distinto de --azure, reservado para identificar el canal de voz
     en la demo de canales en tiempo real (sector "Demo en vivo" + hero
     #ejemplo) — mismo valor que --color-info de apps/web/app/globals.css
     (tono VOICE de CHANNEL_TONE), para que un mismo negocio vea el mismo
     código de color si navega ambos sitios. --azure y --violet sí se
     mantienen idénticos en ambos temas a propósito (ya rondan un
     contraste aceptable sobre fondo claro) — --cyan y --magenta NO: ver
     override de tema claro más abajo. */
  --info: #4a90d9;
  --gradient-brand: linear-gradient(
    115deg,
    var(--cyan) 0%,
    var(--azure) 32%,
    var(--violet) 66%,
    var(--magenta) 100%
  );
  --font-display: 'Hanken Grotesk', 'Hanken Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Fondo del header sticky (fix de layout, 2026-10): mismo tono que
     --ink de este tema, a una opacidad alta para que el contenido no se
     vea sucio pasando por debajo al hacer scroll — pero como variable
     propia por tema, nunca como rgba() fijo, que antes dejaba el header
     gris oscuro incluso en tema claro. */
  --header-glass: rgba(14, 17, 22, 0.82);
  /* Extremo del degradado de borde de .card-wrap (más abajo) — valor
     propio por tema, igual que --header-glass arriba, para que el borde
     se apague hacia un neutro de ESTE tema y no hacia un gris oscuro fijo
     que no pinta nada en tema claro (ver override de tema claro). */
  --card-edge-fade: rgba(38, 44, 54, 0.6);
}

/* Tema claro (fundador, 2026-08-29): re-sincronizado 2026-10-07 con los
   valores REALES actuales del tema claro del panel
   (apps/web/app/globals.css `:root[data-theme='light']`) — el comentario
   anterior decía "mismos valores que la variante clara del panel", pero
   ya no lo eran: esta hoja se había quedado con una paleta de tono cálido
   (crema/beige, ej. --ink #f7f5f0, --line #ddd7c9) que el panel había
   dejado atrás por una neutra (gris frío); el resultado visible era un
   tema claro con fondos de formulario y bordes de aspecto "sucio"/
   amarillento, en choque con el degradado frío cyan→violeta de las
   tarjetas (hallazgo del fundador, captura de #ejemplo). Los valores de
   --fog/--fog-dim NO se tocan: ya estaban auditados en AA (comentario de
   --fog-dim más arriba) y ya eran prácticamente neutros — solo los tonos
   realmente cálidos (superficie/línea/texto) se realinean. El degradado
   de marca sigue igual en ambos temas a propósito: son colores de acento
   saturados (como un color de logo), no tokens neutros de
   superficie/texto.

   Segundo ajuste, mismo día (fundador, tras ver el primer re-sincronizado
   desplegado): "todo el contenido se ve demasiado blanco" comparado con
   el branding real de nexunia.com/el panel — un paso más oscuro que los
   valores neutros recién sincronizados del panel (que sí sirven bien para
   un panel de gestión, pero aquí, en una landing de marca, leían como
   demasiado plano/genérico). --surface baja de #fbfbfc a #f2f4f6, y el
   resto de la escala baja un paso con ella, manteniendo el mismo orden
   relativo de luminosidad (surface > ink > ink-raised > line) y el mismo
   margen de contraste AA ya verificado para --fog sobre --ink-raised
   (≈4,7:1, por encima del 4,5:1 requerido).

   Mismo segundo ajuste — causa real de fondo de "todo se ve blanco": el
   comentario original de arriba decía que cyan/magenta "se mantienen
   idénticos en ambos temas a propósito", pero apps/web/app/globals.css ya
   había descubierto y corregido este mismo problema en 2026-09-04 (ver su
   comentario junto a `--color-cyan`/`--color-cyan-soft` en su propio
   `:root[data-theme='light']`): el cyan neón de marca (#00e5ff) da ~1.5:1
   de contraste sobre blanco — prácticamente invisible como texto/enlace/
   borde —, y el magenta (#f21dff) ~3.3:1, también pobre. Azure y violeta
   ya rondan 3.7-3.8:1 y se dejan sin tocar, igual que allí. Se replican
   aquí los mismos tonos ya validados por el fundador (no se inventan
   nuevos): #0369a1 para cyan, #b0189c para magenta. Los glows/sombras
   (box-shadow, filter, drop-shadow) se dejan con el cyan/magenta neón
   igual en ambos temas a propósito — mismo criterio que apps/web, que
   tampoco ajusta ahí `--shadow-glow-cyan`/`--shadow-glow-magenta`: un
   halo difuminado no tiene el mismo problema de legibilidad que un texto
   o borde sólido. */
:root[data-theme='light'] {
  color-scheme: light;
  --ink: #e5e8eb;
  --ink-raised: #dde1e5;
  --surface: #f2f4f6;
  --surface-glass: rgba(255, 255, 255, 0.62);
  --line: #c9ced4;
  --line-soft: #d4d8dc;
  --fog: #5f6169;
  --fog-dim: #82838a;
  --paper: #14161a;
  --paper-dim: #494c52;
  --header-glass: rgba(229, 232, 235, 0.82);
  --card-edge-fade: rgba(201, 206, 212, 0.55);
  --cyan: #0369a1;
  --cyan-dim: #035079;
  --magenta: #b0189c;
  --cyan-soft: rgba(3, 105, 161, 0.14);
  --violet-soft: rgba(139, 47, 255, 0.14);
  --magenta-soft: rgba(176, 24, 156, 0.13);
  --cyan-underline: rgba(3, 105, 161, 0.35);
  --section-divider-gradient: linear-gradient(
    90deg,
    rgba(3, 105, 161, 0.4),
    rgba(139, 47, 255, 0.28) 55%,
    rgba(176, 24, 156, 0.22)
  );
}

* {
  box-sizing: border-box;
}
html {
  color-scheme: dark;
  /* El header sticky mide ~74px (cabecera "glass flotante" de una sola
     fila, 2026-10 — nav/CTA/logo reunidos en la misma altura tras pedido
     explícito del fundador; llegó a medir ~123px con nav en fila propia
     antes de este último ajuste) — sin esto, cualquier ancla (incluidos
     los dos "Solicitar acceso") dejaba su destino tapado bajo la tarjeta
     flotante (auditoría de conversión, 2026-10, regla original; valor
     actualizado al re-medir el alto real con Playwright tras cada
     rediseño). */
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection {
  background: rgba(139, 47, 255, 0.35);
  color: var(--paper);
}

/* SEO/GEO (2026-09-07): contenido real de cada sector (idéntico al que
   ya se inyecta en el popup interactivo vía SECTOR_DATA/JS), presente en
   el HTML servido desde la carga inicial para que un crawler/LLM pueda
   leerlo — hoy ese texto solo existía en el DOM tras un clic. No se toca
   la experiencia interactiva existente (aria-hidden="true": la interfaz
   por clic ya da una experiencia mejor y sin duplicados a quien usa
   lector de pantalla). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

canvas#field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

main {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 28px 24px 72px;
}

/* El header es hijo directo de <body>, no de <main> (a propósito: así
   puede quedar "sticky" al hacer scroll sin arrastrar consigo el resto
   del contenido) — por eso NO hereda el max-width/padding horizontal de
   main.
   Rediseño "glass flotante" (2026-10, a petición expresa del fundador —
   el header anterior, una barra a ancho completo pegada al borde
   superior, "no tenía nivel de diseño"): el header ya NO pinta fondo ni
   borde propios — solo reserva el hueco sticky e inset lateral/superior
   (.top-shell). Todo el contenido vive dentro de una tarjeta de cristal
   (.top-card) centrada, con radio, blur y sombra propios, separada del
   borde del viewport por el padding de .top-shell, para que se perciba
   como una capa flotando sobre el canvas de partículas y no como una
   barra más del documento. .top-card-glow es un resplandor ambiental
   detrás de la tarjeta (blur fuerte, fuera del overflow:hidden de la
   tarjeta para que no quede recortado). */
header.top {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px 20px 0;
  pointer-events: none;
}

header.top * {
  pointer-events: auto;
}

.top-shell {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
}

.top-card-glow {
  position: absolute;
  inset: -16px -16px -34px;
  z-index: 0;
  border-radius: 32px;
  background:
    radial-gradient(42% 120% at 12% 0%, rgba(0, 229, 255, 0.32), transparent 65%),
    radial-gradient(38% 120% at 88% 100%, rgba(139, 47, 255, 0.3), transparent 65%),
    radial-gradient(30% 90% at 55% 120%, rgba(242, 29, 255, 0.18), transparent 70%);
  filter: blur(30px);
  opacity: 0.6;
}

/* En tema claro el glow necesita menos opacidad: el fondo ya es claro de
   por sí, y a opacidad de tema oscuro se veía sucio/con velo en vez de
   un resplandor de ambiente. */
:root[data-theme='light'] .top-card-glow {
  opacity: 0.3;
}

.top-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 20px;
  background: var(--header-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px var(--line-soft),
    0 24px 60px -24px rgba(0, 0, 0, 0.65);
}

/* Anillo de borde en degradado de marca, superpuesto (no reemplaza el
   inset box-shadow de arriba, que da el borde "real" en ambos temas) —
   el único sitio del header, aparte del CTA y el glow del logo, donde
   aparece la paleta cyan/violeta/magenta: un acento "quieto", casi
   subliminal, no una tarjeta arcoíris. */
.top-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(0, 229, 255, 0.45),
    rgba(139, 47, 255, 0.16) 45%,
    rgba(242, 29, 255, 0.3) 100%
  );
  opacity: 0.4;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Una sola fila (pedido explícito del fundador, 2026-10: "sube el menu
   arriba... manten el diseño del menu en si"): logo, nav y CTA comparten
   ahora la misma altura, en vez de nav en su propia fila debajo con un
   divisor — pero el nav conserva intacto su propio "look" de cristal
   (indicador deslizante, etc.), solo cambia de posición. Grid de 3
   columnas (no flex + justify-content:space-between) para que el centro
   quede REALMENTE centrado en el ancho total de la tarjeta, sin importar
   que .brand y .top-right tengan anchos distintos — con flex,
   space-between solo reparte el hueco entre los tres, no centra el del
   medio respecto al conjunto. grid-column explícito en cada hijo (más
   abajo) es necesario: si el nav desaparece en el breakpoint móvil
   (display:none), sin columna fija el auto-placement movería .top-right a
   la columna 2, rompiendo el reparto izquierda/derecha. */
.top-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 13px 20px;
}

.top-nav-row {
  position: relative;
  z-index: 1;
  grid-column: 2;
  display: flex;
  justify-content: center;
}

.brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  display: inline-block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

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

.brand-mark .brand-mark-arcs {
  transform-origin: center;
  animation: brand-spin 22s linear infinite;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.45));
}

/* El wordmark lleva el degradado de marca como relleno de texto (no un
   color plano, injerto de la dirección B del panel de diseño, 2026-10)
   para que el logo tenga más peso propio — con un barrido de posición muy
   lento para que se sienta "vivo" sin llamar más la atención que el resto
   de la cabecera, deliberadamente contenida. Mismo degradado en ambos
   temas a propósito (color de marca, no token neutro de texto). */
.brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
  background: var(--gradient-brand);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: brand-word-shift 10s ease-in-out infinite;
}

@keyframes brand-word-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(91, 200, 175, 0.4);
  background: rgba(91, 200, 175, 0.1);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  box-shadow: 0 0 18px -6px rgba(91, 200, 175, 0.55);
}

.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px 1px rgba(91, 200, 175, 0.8);
  animation: pulse 2.2s ease-in-out infinite;
}

/* Sin píldora/fondo propios: el nav vive directamente sobre el cristal de
   .top-card. El único "chrome" por enlace es .top-nav-indicator, una
   píldora que app.js desliza (transform + width, con transición) detrás
   del enlace con hover/foco — un modelo de interacción real en vez de un
   simple cambio de color, a propósito para que la cabecera no se sienta
   "flat". position:relative aquí es el ancestro posicionado del
   indicador. */
.top-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.top-nav-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  z-index: 0;
  border-radius: 10px;
  background: var(--surface-glass);
  box-shadow:
    inset 0 0 0 1px var(--line-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 16px -4px rgba(0, 229, 255, 0.35);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.18s ease;
}

.top-nav a {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fog);
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 10px;
}

.top-nav a:hover,
.top-nav a:focus-visible {
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .top-nav-indicator {
    transition: opacity 0.18s ease;
  }
}

/* Umbral propio del nav de cabecera (distinto del 760px que usa el
   popup de detalle de sector más abajo, sin relación con esto): con 9
   enlaces reales, en el mismo orden en que aparecen las secciones en la
   página (Canales/Producto/Puesta en marcha/Conectores/Sectores/
   Restaurantes/Ventas/Hoja de ruta/FAQ — orden corregido y enlace de
   Ventas añadido 2026-10, antes ausente del menú) hace falta más ancho
   disponible antes de pasar al menú de hamburguesa que los 760px que
   bastaban con 2-3 enlaces, de ahí el 1330px en vez de un breakpoint más
   habitual. Los enlaces de Ventas y FAQ usan aquí una etiqueta corta a
   propósito (el menú móvil, sin límite de ancho, usa "Agente de ventas"
   y "Preguntas frecuentes" completos). */
@media (max-width: 1330px) {
  .top-nav-row {
    display: none;
  }
}

.top-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* CTA del final de página (auditoría early-access, 2026-09-11, EA03),
   comparte radio y resplandor con button[type='submit'] (auditoría de
   coherencia de diseño, 2026-10). El CTA de cabecera (.header-cta, más
   abajo) ya NO comparte selector con este — mismo espíritu (gradiente de
   marca, mismo lenguaje de "botón") pero reglas propias e independientes,
   a propósito, para poder afinar su tamaño/icono/hover sin arriesgar
   este botón, que se usa en otros puntos de la página fuera de la
   cabecera. */
.final-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  border-radius: 9px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #05070a;
  background: var(--gradient-brand);
  background-size: 180% 180%;
  background-position: 0% 50%;
  box-shadow:
    0 0 0 1px rgba(139, 47, 255, 0.25),
    0 12px 28px -10px rgba(139, 47, 255, 0.55);
  transition:
    transform 0.18s ease,
    background-position 0.4s ease,
    box-shadow 0.18s ease;
}

.final-cta-button:hover {
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.35),
    0 16px 34px -8px rgba(0, 229, 255, 0.55);
  transform: translateY(-1px);
  background-position: 100% 50%;
}

/* CTA de cabecera: el único lugar del header, junto con el glow del logo,
   donde el degradado de marca aparece a pantalla completa (no como
   acento de 1px) — a propósito, para que siga leyéndose como LA acción
   principal en medio de una cabecera por lo demás deliberadamente
   neutra. Radio de 10px (no 999px): coincide con el radio interior del
   indicador de nav y de los enlaces, un sistema de radios anidados
   (tarjeta 20px → controles 10px) en vez de mezclar píldoras y
   rectángulos sin relación entre sí. La flecha se desliza hacia la
   derecha al pasar el ratón — un segundo micro-detalle de interacción,
   a juego con el indicador de nav. */
.header-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
  padding: 9px 15px;
  color: #05070a;
  background: var(--gradient-brand);
  background-size: 180% 180%;
  background-position: 0% 50%;
  box-shadow:
    0 0 0 1px rgba(139, 47, 255, 0.28),
    0 10px 24px -10px rgba(139, 47, 255, 0.6);
  transition:
    transform 0.18s ease,
    background-position 0.4s ease,
    box-shadow 0.18s ease;
}

.header-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.header-cta:hover,
.header-cta:focus-visible {
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.4),
    0 14px 30px -8px rgba(0, 229, 255, 0.6);
  transform: translateY(-1px);
  background-position: 100% 50%;
}

.header-cta:hover svg,
.header-cta:focus-visible svg {
  transform: translateX(2px);
}

/* Selector de idioma de cabecera (ES/EN/CA, 2026-10, pedido explícito del
   fundador) — mismo lenguaje visual que .theme-toggle (círculo/píldora de
   cristal, mismo alto de 34px) para que ambos controles se lean como la
   misma familia de botones, solo que este muestra texto (el código de
   2 letras) en vez de un icono — de ahí min-width en vez de un ancho fijo
   igual al alto. */
.lang-switcher {
  position: relative;
}

.lang-switcher-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  color: var(--fog);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.lang-switcher-trigger:hover,
.lang-switcher-trigger[aria-expanded='true'] {
  color: var(--paper);
  border-color: var(--line-soft);
}
.lang-switcher-trigger svg {
  width: 12px;
  height: 12px;
  transition: transform 0.18s ease;
}
.lang-switcher-trigger[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

/* Desplegable: mismo lenguaje "glass" que .mobile-menu-panel (tarjeta
   flotante con blur, nunca un cuadro plano), con el mismo radio de card
   (12px) que el resto de superficies flotantes nuevas del rediseño de
   cabecera. Vive como hermano de .top-card dentro de .top-shell, no como
   hijo de .top-right (ver comentario junto a su marcado en index.html:
   .top-card tiene overflow:hidden, que lo recortaba sin mostrarse nunca)
   — por eso su `top`/`right` NO son valores fijos aquí, se calculan en
   JS (app.js, openLangMenu) a partir de la posición real del botón que lo
   abre, relativa a .top-shell (el ancestro posicionado común a ambos).
   display:none como base + :not([hidden]) para mostrarlo (nunca
   `display: flex` suelto): una regla de autor con igual o mayor
   especificidad siempre gana sobre el `[hidden] { display: none }` de la
   hoja de estilos por defecto del navegador, así que un `display: flex`
   incondicional aquí dejaba el menú visible aunque `hidden` estuviera
   puesto — mismo patrón ya usado por `.mobile-menu-panel` en este mismo
   archivo. */
.lang-menu {
  display: none;
  position: absolute;
  z-index: 5;
  flex-direction: column;
  min-width: 140px;
  padding: 6px;
  border-radius: 12px;
  background: var(--header-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px var(--line-soft),
    0 20px 50px -22px rgba(0, 0, 0, 0.65);
}

.lang-menu:not([hidden]) {
  display: flex;
}

.lang-menu button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--fog);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.lang-menu button:hover,
.lang-menu button:focus-visible {
  color: var(--paper);
  background: var(--ink-raised);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  color: var(--fog);
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.theme-toggle:hover {
  color: var(--paper);
  border-color: var(--line-soft);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
}
.theme-toggle .icon-moon {
  display: none;
}
html[data-theme='light'] .theme-toggle .icon-sun {
  display: none;
}
html[data-theme='light'] .theme-toggle .icon-moon {
  display: inline-flex;
}

/* Botón de menú móvil — mismo lenguaje visual que .theme-toggle (círculo,
   borde, --surface-glass), solo visible por debajo de 760px, donde
   .top-nav desaparece (ver media query más abajo). */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  color: var(--fog);
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.menu-toggle:hover {
  color: var(--paper);
  border-color: var(--line-soft);
}
.menu-toggle svg {
  width: 18px;
  height: 18px;
}
.menu-toggle .icon-menu-close {
  display: none;
}
.menu-toggle[aria-expanded='true'] .icon-menu-open {
  display: none;
}
.menu-toggle[aria-expanded='true'] .icon-menu-close {
  display: inline-flex;
}

/* Menú móvil real (antes: .top-nav simplemente desaparecía por debajo de
   760px sin ningún sustituto — "Producto/Restaurantes/Sectores" no
   existían en ninguna parte de la página en móvil). El panel vive dentro
   de .top-shell, como hermano de .top-card (ya no dentro de la propia
   tarjeta): al abrirse aparece como su propia tarjeta de cristal más
   pequeña, flotando con su propio hueco justo debajo de .top-card —
   mismo lenguaje "glass" que el resto de la cabecera en vez de un panel
   plano que cuelga del borde inferior. Empuja hacia abajo el contenido
   de main en vez de superponerse, así que no hace falta overlay ni
   position:fixed (gestionado por JS en app.js, reutilizando trapFocus).
   Oculto por completo en escritorio (display: none, no solo [hidden])
   como salvaguarda si cambia el viewport con el panel abierto. */
.mobile-menu-panel {
  display: none;
}

@media (max-width: 1330px) {
  .menu-toggle {
    display: inline-flex;
  }

  .mobile-menu-panel:not([hidden]) {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    padding: 10px 18px 16px;
    border-radius: 18px;
    background: var(--header-glass);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 0 0 1px var(--line-soft),
      0 20px 50px -22px rgba(0, 0, 0, 0.65);
    /* Vive dentro del propio header sticky — en móvil apaisado, sin
       esto, los últimos enlaces y el CTA quedaban fuera de la pantalla
       sin ninguna forma de llegar a ellos (un sticky no hace scroll
       solo; auditoría de conversión, 2026-10). */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }

  .mobile-menu-nav {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu-nav a {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fog);
    text-decoration: none;
    padding: 14px 6px;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 8px;
    transition:
      color 0.15s ease,
      background 0.15s ease;
  }

  .mobile-menu-nav a:last-child {
    border-bottom: none;
  }

  .mobile-menu-nav a:hover,
  .mobile-menu-nav a:focus-visible {
    color: var(--paper);
    background: var(--ink-raised);
  }

  .mobile-menu-cta {
    margin-top: 14px;
    width: 100%;
    padding: 12px 16px;
    font-size: 13.5px;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 56px;
  align-items: start;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 18px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  text-wrap: balance;
  color: var(--paper);
}

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

.lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--fog);
  max-width: 50ch;
  margin: 0 0 36px;
}

.facts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 40px;
}

.fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.fact-mark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  /* Violeta de marca en vez de cyan (fundador, 2026-10-07: "un lila quizás
     como el de producción") — mismo cambio en .pillar-icon/.channel-icon/
     .restaurant-icon, las 4 comparten exactamente este mismo patrón visual
     de "recuadro de icono", así que se actualizan juntas para no dejar
     unas en cyan y otras en violeta. */
  color: var(--violet);
}

.fact-copy strong {
  display: block;
  font-size: 0.92rem;
  color: var(--paper);
  font-weight: 600;
  margin-bottom: 2px;
}

.fact-copy span {
  font-size: 0.86rem;
  color: var(--fog-dim);
  line-height: 1.5;
}

.quote {
  border-left: 2px solid;
  border-image: var(--gradient-brand) 1;
  padding-left: 16px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper-dim);
  max-width: 42ch;
}

.quote span {
  color: var(--fog-dim);
  font-weight: 500;
  font-size: 0.82rem;
  font-family: var(--font-sans);
}

/* ---- form card ---- */
.card-wrap {
  position: relative;
  border-radius: 18px;
  padding: 1px;
  /* El tercer stop apagaba el degradado hacia un gris oscuro fijo
     (#262c36, igual al --line del tema oscuro) sin importar el tema
     activo — en tema claro dejaba una esquina gris-azulada fuera de
     lugar sobre fondo claro (hallazgo del fundador, 2026-10-07). Ahora
     usa --card-edge-fade, con su propio valor por tema. */
  background: linear-gradient(
    160deg,
    rgba(0, 229, 255, 0.35),
    rgba(139, 47, 255, 0.12) 40%,
    var(--card-edge-fade) 75%
  );
}

.card {
  position: relative;
  border-radius: 17px;
  background: var(--surface-glass);
  backdrop-filter: blur(14px);
  padding: 32px 30px;
}

/* El widget de Turnstile (modo "flexible") no baja de ~300px de ancho —
   con el padding de .card de 30px a cada lado, un móvil estrecho solo le
   dejaba ~250px, y como el body oculta el overflow horizontal, el widget
   quedaba recortado y era imposible de completar (auditoría de
   conversión, 2026-10). Nunca debe superar el ancho real disponible. */
.cf-turnstile {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 400px) {
  .card {
    padding: 24px 16px;
  }
  main {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* El propio widget "sangra" hasta el ancho completo de la tarjeta
     (ignorando el padding de .card) — a 360px de viewport esto le da
     ~324px reales, por encima del mínimo de Turnstile; a .card con más
     padding en pantallas más anchas no hace falta, ahí ya sobra sitio. */
  .cf-turnstile {
    margin-inline: -16px;
    width: calc(100% + 32px);
  }
}

.card-head {
  margin-bottom: 22px;
}

.card-head .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-dim);
  margin: 0 0 8px;
}

.limited-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--gradient-brand);
  box-shadow:
    0 0 0 1px rgba(139, 47, 255, 0.4),
    0 0 22px -4px rgba(139, 47, 255, 0.65);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Mismo #05070a que el resto de elementos sobre --gradient-brand
     (header-cta, button[type='submit'], .success .icon) — antes era el
     único en blanco, auditoría de coherencia de diseño 2026-10. */
  color: #05070a;
  margin: 0 0 12px;
}

.limited-badge .dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #05070a;
  box-shadow: 0 0 8px 1px rgba(5, 7, 10, 0.5);
  animation: pulse 2.2s ease-in-out infinite;
}

.card-head h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  color: var(--paper);
}

.access-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fog-dim);
}

form {
  display: grid;
  gap: 16px;
}

.row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 480px) {
  .row {
    grid-template-columns: 1fr;
  }
}

label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fog);
  margin-bottom: 6px;
}

label .opt {
  color: var(--fog);
  font-weight: 400;
}

input,
textarea,
select {
  width: 100%;
  font-family: var(--font-sans);
  /* 16px, no 14px — por debajo de ese umbral iOS Safari hace zoom
     automático al enfocar cualquier campo (auditoría de conversión,
     2026-10). */
  font-size: 16px;
  color: var(--paper);
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
  /* --fog-dim no llega a 4.5:1 sobre el fondo de los campos
     (--ink-raised) en ninguno de los dos temas — auditoría
     early-access, 2026-09-11, EA05/EA06. --fog sí lo cumple en ambos
     (≈5,7:1 oscuro, ≈5,2:1 claro), sin introducir un color nuevo. */
  color: var(--fog);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--azure);
  box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.16);
}

textarea {
  resize: vertical;
  min-height: 74px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238891a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
  cursor: pointer;
}

select:invalid {
  color: var(--fog-dim);
}
select option {
  color: var(--paper);
  background: var(--ink-raised);
}

/* honeypot — invisible to real visitors, no aria/tab reach */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button[type='submit'] {
  margin-top: 4px;
  border: none;
  cursor: pointer;
  border-radius: 9px;
  padding: 13px 20px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: #05070a;
  background: var(--gradient-brand);
  background-size: 180% 180%;
  background-position: 0% 50%;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-position 0.4s ease;
  box-shadow:
    0 0 0 1px rgba(139, 47, 255, 0.25),
    0 12px 28px -10px rgba(139, 47, 255, 0.55);
}

button[type='submit']:hover:not(:disabled) {
  transform: translateY(-1px);
  background-position: 100% 50%;
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.35),
    0 16px 34px -8px rgba(0, 229, 255, 0.55);
}

button[type='submit']:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fine {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--fog);
  line-height: 1.5;
}

/* Misma convención que .roadmap-contact a/.onboarding-copy a (cian +
   subrayado que se intensifica en hover) — antes era la única de las 3
   variantes de "enlace de texto" de la página que usaba azure en reposo
   y cian en hover, sin relación con las otras dos (auditoría de
   coherencia de diseño, 2026-10). */
.fine-link {
  display: inline;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-underline);
  cursor: pointer;
}

.fine-link:hover {
  border-bottom-color: var(--cyan);
}

.error-msg {
  font-size: 13px;
  color: #ff7a68;
}

/* Aviso específico de un campo (p. ej. "¿Por dónde exactamente?" cuando
   se elige "Otro" y se deja vacío) — antes ese error solo generaba el
   mensaje genérico de nombre/negocio/email, sin relación con la causa
   real (auditoría de conversión, 2026-10). */
.field-error {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #ff7a68;
}

.success {
  text-align: center;
  padding: 20px 4px 6px;
}

.success .icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #05070a;
  font-weight: 700;
}

.success h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 8px;
  color: var(--paper);
}

.success p {
  color: var(--fog);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

/* ---- cabecera de sección reutilizada por todos los bloques (cada
   <section> ya aporta su propio margin-top/padding-top/border-top vía su
   clase específica: .pillars, .channels, .restaurant, .sales-preview,
   .roadmap — esta solo da formato al eyebrow+h2+p interior).
   Antes .chat-demo-head/.sectors-head/.connectors-head copiaban a mano
   esta misma regla del h2 (auditoría de coherencia de diseño, 2026-10):
   se consolidan aquí y esos contenedores llevan AMBAS clases en el HTML
   (p. ej. class="section-head sectors-head"), dejando en su clase propia
   solo lo que de verdad difiere (max-width, centrado). */
.section-head {
  max-width: 64ch;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.18;
  margin: 0 0 14px;
  color: var(--paper);
  text-wrap: balance;
}

.section-head p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fog);
  margin: 0 0 32px;
  max-width: 58ch;
}

/* ---- ejemplo visible: de una consulta a una cita confirmada ---- */
.chat-demo {
  margin-top: 88px;
  padding-top: 56px;
  /* Línea superior en degradado de marca, sutil (fundador, 2026-10-07:
     "reforzar el hilo de color de marca" en todo el contenido, no solo en
     iconos) — mismo recurso que .footer-top-line/border-cyan-10 del panel
     (apps/web). border-top sólido queda como base/fallback; border-image
     lo superpone y se degrada con elegancia donde no se soporte.
     --section-divider-gradient (no un literal aquí) para que el cyan use
     el tono ya corregido por tema en vez del neón, casi invisible sobre
     fondo claro. */
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
}

.chat-demo-head {
  max-width: 62ch;
  margin: 0 auto 36px;
  text-align: center;
}

.chat-demo-head p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fog);
  margin: 0 auto;
  max-width: 52ch;
}

/* Centra la demo del héroe igual que el texto de arriba (.chat-demo-head
   ya usa margin:0 auto + text-align:center). Se aplica también a la
   demo del popup de sector (feedback del fundador: "que esté centrada
   también aquí") — incluso aunque el resto de ese popup (listas de
   funciones, texto del ejemplo) se quede alineado a la izquierda, la
   propia tarjeta de demo se centra igual que la del hero. */
#heroPanelDemo,
#sectorPanelDemo {
  max-width: 600px;
  margin: 0 auto;
}

#heroPanelDemo .panel-demo-tabs,
#sectorPanelDemo .panel-demo-tabs {
  justify-content: center;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.chat-msg--customer {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  color: var(--paper-dim);
}

.chat-msg--ai {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  /* var(--cyan-soft)/var(--cyan-underline) en vez de rgba(0,229,255,...)
     fijo (fundador, 2026-10-07: "reforzar el hilo de color de marca") —
     burbuja de la IA siempre visible en el demo, no un estado hover, así
     que necesita el cyan ya corregido por tema para no lavarse en claro. */
  background: linear-gradient(160deg, var(--cyan-soft), var(--violet-soft));
  border: 1px solid var(--cyan-underline);
  color: var(--paper);
}

.chat-status {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.chat-status--done {
  border-style: solid;
  border-color: rgba(91, 200, 175, 0.4);
  color: var(--signal);
  background: rgba(91, 200, 175, 0.08);
}

/* Revelado en secuencia al hacer scroll hasta el ejemplo — pensado
   para leerse como una conversación real ocurriendo, no como un
   bloque de texto estático. Solo se activa vía JS (clase
   .chat-armed añadida por el observer en app.js): si JS falla o el
   navegador no soporta IntersectionObserver, el contenido se queda
   visible desde el principio — nunca depende de JS para poder leerse. */
.chat-thread.chat-armed > * {
  opacity: 0;
  transform: translateY(8px);
}
.chat-thread.chat-revealed > * {
  animation: fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.chat-thread.chat-revealed > *:nth-child(1) {
  animation-delay: 0.05s;
}
.chat-thread.chat-revealed > *:nth-child(2) {
  animation-delay: 0.55s;
}
.chat-thread.chat-revealed > *:nth-child(3) {
  animation-delay: 1.05s;
}
.chat-thread.chat-revealed > *:nth-child(4) {
  animation-delay: 1.5s;
}
.chat-thread.chat-revealed > *:nth-child(5) {
  animation-delay: 2s;
}
.chat-thread.chat-revealed > *:nth-child(6) {
  animation-delay: 2.3s;
}

/* Mismo patrón de revelado, reutilizado por los mini-diálogos de la
   sección Restaurantes — cada bloque se observa por separado. */
.mini-chat-thread.chat-armed > * {
  opacity: 0;
  transform: translateY(8px);
}
.mini-chat-thread.chat-revealed > * {
  animation: fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mini-chat-thread.chat-revealed > *:nth-child(1) {
  animation-delay: 0.05s;
}
.mini-chat-thread.chat-revealed > *:nth-child(2) {
  animation-delay: 0.4s;
}
.mini-chat-thread.chat-revealed > *:nth-child(3) {
  animation-delay: 0.75s;
}
.mini-chat-thread.chat-revealed > *:nth-child(4) {
  animation-delay: 1.1s;
}
.mini-chat-thread.chat-revealed > *:nth-child(5) {
  animation-delay: 1.45s;
}

@media (max-width: 560px) {
  .chat-msg {
    max-width: 90%;
  }
}

/* ---- pilares de producto (5 módulos reales) ---- */
.pillars {
  margin-top: 88px;
  padding-top: 56px;
  /* Línea superior en degradado de marca, sutil (fundador, 2026-10-07:
     "reforzar el hilo de color de marca" en todo el contenido, no solo en
     iconos) — mismo recurso que .footer-top-line/border-cyan-10 del panel
     (apps/web). border-top sólido queda como base/fallback; border-image
     lo superpone y se degrada con elegancia donde no se soporte.
     --section-divider-gradient (no un literal aquí) para que el cyan use
     el tono ya corregido por tema en vez del neón, casi invisible sobre
     fondo claro. */
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.pillar-card {
  padding: 22px 20px 24px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}

.pillar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.35);
}

.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 16px;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  color: var(--violet);
}

.pillar-icon svg {
  width: 20px;
  height: 20px;
}

.pillar-card .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 8px;
}

.pillar-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--paper);
  margin: 0 0 8px;
  line-height: 1.25;
}

.pillar-card p:last-child {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--fog);
  margin: 0;
}

/* ---- canales ---- */
.channels {
  margin-top: 88px;
  padding-top: 56px;
  /* Línea superior en degradado de marca, sutil (fundador, 2026-10-07:
     "reforzar el hilo de color de marca" en todo el contenido, no solo en
     iconos) — mismo recurso que .footer-top-line/border-cyan-10 del panel
     (apps/web). border-top sólido queda como base/fallback; border-image
     lo superpone y se degrada con elegancia donde no se soporte.
     --section-divider-gradient (no un literal aquí) para que el cyan use
     el tono ya corregido por tema en vez del neón, casi invisible sobre
     fondo claro. */
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* Variante usada dentro de #ejemplo (2026-10): la sección "Canales"
   independiente se fusionó aquí, como ficha de referencia bajo la propia
   demo interactiva de 5 pestañas, para no repetir los mismos 5 canales
   en dos secciones distintas de la página. Mismo ancho que la demo. */
.channel-grid--compact {
  max-width: 600px;
  margin: 28px auto 0;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

.channel-grid--compact .channel-tile {
  padding: 14px 8px;
  gap: 6px;
}

.channel-grid--compact .channel-icon {
  width: 34px;
  height: 34px;
}

.channel-grid--compact .channel-icon svg {
  width: 17px;
  height: 17px;
}

.channel-grid--compact .channel-name {
  font-size: 0.78rem;
}

.channel-grid--compact .channel-note {
  font-size: 0.66rem;
}

.channel-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  text-align: center;
}

.channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  color: var(--violet);
}

.channel-icon svg {
  width: 20px;
  height: 20px;
}

.channel-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--paper);
}

.channel-note {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--fog-dim);
}

.channel-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
}

/* ---- sectores ---- */
.sectors {
  margin-top: 88px;
  padding-top: 56px;
  /* Línea superior en degradado de marca, sutil (fundador, 2026-10-07:
     "reforzar el hilo de color de marca" en todo el contenido, no solo en
     iconos) — mismo recurso que .footer-top-line/border-cyan-10 del panel
     (apps/web). border-top sólido queda como base/fallback; border-image
     lo superpone y se degrada con elegancia donde no se soporte.
     --section-divider-gradient (no un literal aquí) para que el cyan use
     el tono ya corregido por tema en vez del neón, casi invisible sobre
     fondo claro. */
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
}

.sectors-head {
  max-width: 62ch;
}

.soon-inline {
  font-weight: 600;
  color: var(--paper-dim);
}

.soon-inline.soon {
  color: var(--violet);
}

/* 3 columnas, no 2 (auditoría de diseño, 2026-10): con 5 fichas, 2
   columnas dejaba la última sola en su fila — con 3 queda 3+2, un
   patrón de rejilla mucho más habitual y menos "roto" a simple vista,
   y aprovecha mejor el ancho generoso de esta sección. */
.use-case-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 36px;
}

/* Salta directo de 3 a 1 columna (sin paso intermedio de 2): con 5
   fichas, 2 columnas reproduce el mismo problema que se corrige arriba
   (la última ficha sola en su fila). */
@media (max-width: 900px) {
  .use-case-highlights {
    grid-template-columns: 1fr;
  }
}

.use-case-highlight {
  padding: 18px 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  transition: transform 0.18s ease;
}

/* Solo eleva en hover, sin tocar border-color (a diferencia de
   .pillar-card/.restaurant-card): aquí el color del borde ya es
   semántico — Beta en --signal, Próximamente en --violet (ver
   .use-case-highlight.beta/.soon) — y sobrescribirlo a cian perdería
   ese significado justo al interactuar. */
.use-case-highlight:hover {
  transform: translateY(-2px);
}

.use-case-highlight.soon {
  border-color: rgba(139, 47, 255, 0.35);
  background: linear-gradient(160deg, rgba(139, 47, 255, 0.1), rgba(0, 128, 255, 0.04));
}

/* Mismo criterio que .restaurant-card-head .tag.beta: verde --signal
   (no violeta) porque la función SÍ tiene backend real, solo se
   concede a mano en vez de en autoservicio. */
.use-case-highlight.beta {
  border-color: rgba(91, 200, 175, 0.35);
  background: linear-gradient(160deg, rgba(91, 200, 175, 0.1), rgba(0, 128, 255, 0.04));
}

.use-case-highlight .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-dim);
  margin: 0 0 10px;
}

.use-case-highlight .tag.beta {
  color: var(--signal);
}

.use-case-highlight .tag.soon {
  color: var(--violet);
}

.use-case-highlight h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--paper);
  margin: 0 0 8px;
  line-height: 1.25;
}

.use-case-highlight p:last-child {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--fog);
  margin: 0;
}

/* 12 sectores exactos: columnas fijas por breakpoint (6×2 en escritorio)
   en vez de auto-fill, que a la mayoría de anchos de escritorio reales
   (~1312px de contenido) encajaba 7 por fila y dejaba la segunda fila
   coja con 5 (auditoría de diseño, 2026-10). */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

@media (max-width: 1100px) {
  .sector-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 620px) {
  .sector-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sector-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    background 0.15s ease;
}

.sector-card:hover {
  transform: translateY(-2px);
}

.sector-card[aria-pressed='true'] {
  border-color: var(--azure);
  background: linear-gradient(160deg, rgba(0, 128, 255, 0.14), rgba(139, 47, 255, 0.07));
  box-shadow: 0 0 0 1px rgba(0, 128, 255, 0.3);
}

/* Iconos de sector (rediseño 2026-10): sustituyen a los emoji anteriores
   por trazo SVG simple, mismo criterio que el isotipo "N" de la marca
   (stroke="currentColor", sin relleno, extremos redondeados) — más
   profesional y consistente con el resto del lenguaje visual. El color de
   acento en hover/selección reutiliza el cian + violeta ya presentes en
   --gradient-brand (un verdadero stroke con gradiente exigiría un <linearGradient>
   por icono; este atajo de "color + resplandor doble" da el mismo efecto de
   marca con una sola regla reutilizable). */
/* Chip de icono unificado con pillar-icon/channel-icon/connector-icon/
   restaurant-icon (antes era el único de las 5 rejillas sin fondo ni
   borde propios — auditoría de coherencia de diseño, 2026-10). El color
   del propio SVG se queda neutro en reposo y pasa a cian con resplandor
   en hover/selección (abajo), que es la interacción distintiva de esta
   rejilla en concreto. */
.sector-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  line-height: 1;
}

.sector-icon svg {
  width: 20px;
  height: 20px;
  color: var(--fog);
  transition:
    color 0.18s ease,
    filter 0.18s ease;
}

.sector-card:hover .sector-icon svg,
.sector-card[aria-pressed='true'] .sector-icon svg {
  color: var(--cyan);
  filter:
    drop-shadow(0 0 7px rgba(0, 229, 255, 0.5)) drop-shadow(0 0 13px rgba(139, 47, 255, 0.3));
}

.sector-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
}

.sector-example {
  position: relative;
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  min-height: 24px;
}

/* Mismo lenguaje de icon-button (círculo, fondo var(--ink-raised)) que
   .theme-toggle/.menu-toggle — unifica también el cierre del modal legal,
   que antes era un botón plano sin fondo ni borde (auditoría de
   coherencia de diseño, 2026-10). */
.icon-button-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: var(--ink-raised);
  color: var(--fog-dim);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.icon-button-close:hover {
  color: var(--paper);
}

.sector-popup-close {
  display: none;
}

/* En móvil, el detalle de sector se abre como popup sobre el resto de
   la página (con fondo atenuado) en vez de en línea bajo la rejilla —
   evita el salto largo de scroll en pantallas estrechas. En escritorio
   se queda exactamente igual que antes: en flujo, siempre visible. */
@media (max-width: 760px) {
  .sector-popup-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(14, 17, 22, 0.72);
    backdrop-filter: blur(6px);
  }

  .sector-popup-overlay[hidden] {
    display: none;
  }

  .sector-popup-overlay:not([hidden]) .sector-example {
    width: 100%;
    max-height: 82vh;
    overflow-y: auto;
    margin-top: 0;
    animation: fade-up 0.25s ease;
  }

  /* El tamaño/color/fondo vienen de .icon-button-close (compartida con el
     cierre del modal legal); aquí solo el posicionamiento propio de este
     botón sobre la tarjeta de sector. */
  .sector-popup-close {
    display: inline-flex;
    position: absolute;
    top: 14px;
    right: 14px;
  }
}

.sector-example .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-dim);
  margin: 0 0 8px;
}

.sector-example p:last-child {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--paper-dim);
}

.sector-features-tag {
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* "Ya disponible" en --signal, igual que en pillar-card/restaurant-card
   (mismo criterio en toda la página: la función SÍ tiene backend real) —
   antes se quedaba en --fog-dim aquí, el único sitio donde esa etiqueta
   perdía su color, justo en el popup que se repite una vez por cada uno
   de los 12 sectores (auditoría de coherencia de diseño, 2026-10). */
.sector-features-tag:not(.soon) {
  color: var(--signal);
}

.sector-features-tag.soon {
  color: var(--violet);
}

.sector-feature-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
}

.sector-feature-list li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--paper-dim);
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}

.sector-feature-list.soon li {
  color: var(--paper-dim);
  border-color: rgba(139, 47, 255, 0.4);
  background: rgba(139, 47, 255, 0.08);
}

.sector-example p.sector-more {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fog-dim);
}

.sector-example p.sector-more strong {
  color: var(--fog);
  font-weight: 600;
}

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

/* ---- conectores oficiales ---- */
.connectors {
  margin-top: 88px;
  padding-top: 56px;
  /* Línea superior en degradado de marca, sutil (fundador, 2026-10-07:
     "reforzar el hilo de color de marca" en todo el contenido, no solo en
     iconos) — mismo recurso que .footer-top-line/border-cyan-10 del panel
     (apps/web). border-top sólido queda como base/fallback; border-image
     lo superpone y se degrada con elegancia donde no se soporte.
     --section-divider-gradient (no un literal aquí) para que el cyan use
     el tono ya corregido por tema en vez del neón, casi invisible sobre
     fondo claro. */
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
}

.connectors-head {
  max-width: 62ch;
}

.connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 14px;
}

.connector-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  text-align: center;
}

.connector-tile.soon {
  opacity: 0.65;
}

.connector-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
}

.connector-icon svg {
  width: 20px;
  height: 20px;
}

.connector-icon.meta {
  color: #0668e1;
}
.connector-icon.google {
  color: #4285f4;
}
.connector-icon.instagram {
  color: #e1306c;
}
.connector-icon.shopify {
  color: #95bf47;
}
/* "Wc" son dos caracteres (el resto del grupo es un único glifo/letra) —
   única reducción de tamaño con justificación de contenido; las demás
   variaciones de tamaño que había aquí (1.1rem/1.05rem sin relación con
   la longitud del texto) se han unificado al tamaño base, auditoría de
   coherencia de diseño 2026-10. */
.connector-icon.woocommerce {
  font-size: 1rem;
  color: #7f54b2;
}
.connector-icon.wordpress {
  color: #21759b;
}
.connector-icon.github {
  color: var(--paper);
}
.connector-icon.stripe {
  color: #635bff;
}
.connector-icon.paypal {
  color: #009cde;
}
.connector-icon.revolut {
  color: var(--paper);
}
.connector-icon.gesden {
  color: var(--azure);
}
.connector-icon.hubspot {
  color: #ff7a59;
}

.connector-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--paper);
}

.connector-summary {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--fog-dim);
}

.connector-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
}

.connector-badge.soon {
  color: var(--violet);
}

/* ---- restaurantes ---- */
.restaurant {
  margin-top: 88px;
  padding-top: 56px;
  /* Línea superior en degradado de marca, sutil (fundador, 2026-10-07:
     "reforzar el hilo de color de marca" en todo el contenido, no solo en
     iconos) — mismo recurso que .footer-top-line/border-cyan-10 del panel
     (apps/web). border-top sólido queda como base/fallback; border-image
     lo superpone y se degrada con elegancia donde no se soporte.
     --section-divider-gradient (no un literal aquí) para que el cyan use
     el tono ya corregido por tema en vez del neón, casi invisible sobre
     fondo claro. */
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
}

/* Abierto por defecto (feedback del fundador, 2026-10: quería los 5 casos
   de uso visibles sin tener que hacer clic) — <details> nativo en vez de
   JS/CSS puro igualmente: el contenido sigue siendo rastreable por un
   buscador o un LLM si algún navegador no soporta el atributo `open`, y
   funciona sin JavaScript. El summary se deja clicable igualmente para
   poder volver a colapsarlo. */
.restaurant-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--paper);
}

.restaurant-details summary::-webkit-details-marker {
  display: none;
}

.restaurant-details summary::after {
  content: '';
  width: 9px;
  height: 9px;
  margin-left: auto;
  flex: none;
  border-right: 1.8px solid var(--fog);
  border-bottom: 1.8px solid var(--fog);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.restaurant-details[open] summary::after {
  transform: rotate(-135deg);
}

.restaurant-details summary:hover {
  border-color: var(--azure);
  color: var(--azure);
}

.restaurant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.restaurant-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}

.restaurant-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.35);
}

.restaurant-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.restaurant-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  color: var(--violet);
}

.restaurant-icon svg {
  width: 20px;
  height: 20px;
}

.restaurant-card-head .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 4px;
}

/* "Beta — bajo petición" se mantiene en el mismo verde --signal que "Ya
   disponible" (no en --violet): la función SÍ tiene backend real, solo
   está gestionada a mano en vez de en autoservicio — --violet queda
   reservado en toda la página para "Próximamente" (sin backend), mismo
   criterio ya usado por .connector-badge/.connector-badge.soon. */
.restaurant-card-head .tag.beta {
  color: var(--signal);
}

.restaurant-card-head h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--paper);
  margin: 0;
  line-height: 1.25;
}

.restaurant-card > p {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--fog);
  margin: 0;
}

.mini-chat {
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: var(--ink-raised);
  padding: 14px 14px 16px;
  margin-top: auto;
}

.mini-chat-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-dim);
  margin: 0 0 10px;
}

.mini-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mini-chat-thread .chat-msg {
  max-width: 92%;
  font-size: 0.8rem;
  padding: 7px 11px;
}

.mini-chat-thread .chat-status {
  font-size: 9.5px;
  padding: 4px 10px;
}

/* ---- vista previa en vivo: formulario de llamada comercial (cosmética) ---- */
.sales-preview {
  margin-top: 88px;
  padding-top: 56px;
  /* Línea superior en degradado de marca, sutil (fundador, 2026-10-07:
     "reforzar el hilo de color de marca" en todo el contenido, no solo en
     iconos) — mismo recurso que .footer-top-line/border-cyan-10 del panel
     (apps/web). border-top sólido queda como base/fallback; border-image
     lo superpone y se degrada con elegancia donde no se soporte.
     --section-divider-gradient (no un literal aquí) para que el cyan use
     el tono ya corregido por tema en vez del neón, casi invisible sobre
     fondo claro. */
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
}

/* Mismo verde --signal que el resto de etiquetas "Beta" de la página (ver
   comentario en .restaurant-card-head .tag.beta): el formulario de llamada
   comercial SÍ existe y funciona hoy (ADR 0187) — solo esta vista previa
   concreta es cosmética, cosa que ya aclara .sales-preview-disclaimer. */
.sales-preview-beta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(91, 200, 175, 0.4);
  background: rgba(91, 200, 175, 0.1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 16px;
}

.sales-preview-disclaimer {
  font-size: 0.82rem;
  color: var(--fog-dim);
  margin: 0 0 32px;
  max-width: 58ch;
}

.sales-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 860px) {
  .sales-preview-layout {
    grid-template-columns: 1fr;
  }
}

.sales-preview-controls {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
}

.sales-preview-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 420px) {
  .sales-preview-controls-grid {
    grid-template-columns: 1fr;
  }
}

.sales-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sales-field span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fog);
}

/* El <input type="color"> nativo del navegador es un rectángulo plano
   sin relación con el resto de campos de esta página (borde/radio/fondo
   oscuro) — se le da el mismo "chip" oscuro que cualquier otro input,
   con el propio cuadrado de color anidado dentro y redondeado (auditoría
   de diseño, 2026-10). */
.sales-field input[type='color'] {
  padding: 3px;
  height: 36px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-raised);
  cursor: pointer;
}

.sales-field input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
}

.sales-field input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

.sales-field input[type='color']::-moz-color-swatch {
  border: none;
  border-radius: 6px;
}

.sales-field-toggle {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.sales-field-toggle input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--azure);
}

.sales-field-toggle span {
  color: var(--paper-dim);
  font-size: 13px;
}

.sales-preview-reset {
  justify-self: start;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fog);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.sales-preview-reset:hover {
  color: var(--paper);
}

.sales-preview-stage {
  display: flex;
  justify-content: center;
  padding: 28px 16px;
  border-radius: 16px;
  background: repeating-linear-gradient(
    135deg,
    var(--ink-raised),
    var(--ink-raised) 10px,
    var(--surface) 10px,
    var(--surface) 20px
  );
  border: 1px solid var(--line);
}

/* El propio widget cosmético: estilos inline + variables se aplican desde
   app.js (misma paleta de salida que SalesCallWidgetPreview.tsx del panel
   real, adaptada a vanilla DOM), aquí solo lo estructural compartido. */
.nxs-root {
  width: 100%;
  max-width: 360px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    border-radius 0.2s ease;
}

.nxs-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7280;
}

.nxs-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  animation: nxs-dot 2.3s ease-in-out infinite;
}

@keyframes nxs-dot {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.nxs-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.nxs-orb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  animation: nxs-breathe 4.6s ease-in-out infinite;
}

@keyframes nxs-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.nxs-headline {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.nxs-subline {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.45;
}

.nxs-fields {
  display: grid;
  gap: 14px;
}

.nxs-field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.82;
  margin-bottom: 5px;
}

.nxs-input-wrap {
  position: relative;
}

.nxs-input-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.nxs-input {
  padding: 11px 12px 11px 38px;
  font-size: 14px;
  color: #9ca3af;
  background: #ffffff;
  border: 1px solid #d1d5db;
}

.nxs-input.nxs-input-plain {
  padding: 11px 12px;
}

.nxs-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.45;
}

.nxs-consent input {
  margin-top: 2px;
  width: 14px;
  height: 14px;
}

.nxs-consent-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nxs-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  font-size: 14.5px;
  font-weight: 600;
  border: none;
  cursor: default;
}

.nxs-submit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.nxs-submit-icon svg {
  width: 13px;
  height: 13px;
}

/* ---- hoja de ruta honesta ---- */
.roadmap {
  margin-top: 88px;
  padding-top: 56px;
  /* Línea superior en degradado de marca, sutil (fundador, 2026-10-07:
     "reforzar el hilo de color de marca" en todo el contenido, no solo en
     iconos) — mismo recurso que .footer-top-line/border-cyan-10 del panel
     (apps/web). border-top sólido queda como base/fallback; border-image
     lo superpone y se degrada con elegancia donde no se soporte.
     --section-divider-gradient (no un literal aquí) para que el cyan use
     el tono ya corregido por tema en vez del neón, casi invisible sobre
     fondo claro. */
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.roadmap-card {
  padding: 16px 18px 18px;
  border-radius: 12px;
  border: 1px solid rgba(139, 47, 255, 0.3);
  background: linear-gradient(160deg, rgba(139, 47, 255, 0.08), rgba(0, 128, 255, 0.03));
  transition: transform 0.18s ease;
}

/* Mismo criterio que .use-case-highlight: solo eleva en hover, sin tocar
   el borde violeta (es el color semántico de "Próximamente" en toda la
   página). */
.roadmap-card:hover {
  transform: translateY(-2px);
}

.roadmap-card .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet);
  margin: 0 0 8px;
}

.roadmap-card h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--paper);
  margin: 0 0 6px;
  line-height: 1.25;
}

.roadmap-card p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fog);
  margin: 0;
}

.roadmap-contact {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fog);
  margin: 0;
  max-width: 62ch;
}

.roadmap-contact a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-underline);
}
.roadmap-contact a:hover {
  border-bottom-color: var(--cyan);
}

/* ---- preguntas frecuentes ---- */
.faq {
  margin-top: 88px;
  padding-top: 56px;
  /* Línea superior en degradado de marca, sutil (fundador, 2026-10-07:
     "reforzar el hilo de color de marca" en todo el contenido, no solo en
     iconos) — mismo recurso que .footer-top-line/border-cyan-10 del panel
     (apps/web). border-top sólido queda como base/fallback; border-image
     lo superpone y se degrada con elegancia donde no se soporte.
     --section-divider-gradient (no un literal aquí) para que el cyan use
     el tono ya corregido por tema en vez del neón, casi invisible sobre
     fondo claro. */
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 68ch;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  padding: 4px 20px;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--paper);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: auto;
  flex: none;
  border-right: 1.8px solid var(--fog);
  border-bottom: 1.8px solid var(--fog);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item summary:hover {
  color: var(--azure);
}

.faq-item p {
  margin: 0 0 18px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--fog);
}

/* ---- puesta en marcha / onboarding ----
   Antes era una tarjeta aparte (caja con borde en las 4 esquinas, fondo
   degradado propio, margin-top de 72px) en vez de una sección más del
   mismo flujo — sin ningún comentario que explicara por qué, a
   diferencia del resto de excepciones de este fichero, todas
   documentadas (auditoría de coherencia de diseño, 2026-10). Desde que
   esta sección tiene el mismo peso que las demás en la navegación
   (Producto/Puesta en marcha/Canales/...), tiene más sentido que
   también comparta su mismo ritmo visual en vez de leerse como un
   aparte. */
.onboarding {
  margin-top: 88px;
  padding-top: 56px;
  /* Línea superior en degradado de marca, sutil (fundador, 2026-10-07:
     "reforzar el hilo de color de marca" en todo el contenido, no solo en
     iconos) — mismo recurso que .footer-top-line/border-cyan-10 del panel
     (apps/web). border-top sólido queda como base/fallback; border-image
     lo superpone y se degrada con elegancia donde no se soporte.
     --section-divider-gradient (no un literal aquí) para que el cyan use
     el tono ya corregido por tema en vez del neón, casi invisible sobre
     fondo claro. */
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
}

.onboarding-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.18;
  margin: 0 0 14px;
  color: var(--paper);
  text-wrap: balance;
}

/* Los 3 pasos reutilizan .fact/.fact-mark/.fact-copy tal cual (mismo
   componente que ya usa el hero para sus 3 puntos clave) — en vez de
   dejar esta sección como un único bloque de texto sin ningún elemento
   visual que lo acompañe (auditoría de diseño, 2026-10). El párrafo de
   abajo se mantiene para el detalle completo. */
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0 28px;
}

@media (max-width: 760px) {
  .onboarding-steps {
    grid-template-columns: 1fr;
  }
}

.onboarding-copy {
  max-width: 68ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--fog);
  margin: 0 auto;
  text-align: center;
}

.onboarding-copy a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-underline);
}
.onboarding-copy a:hover {
  border-bottom-color: var(--cyan);
}

.section-note {
  max-width: 62ch;
  margin: 16px auto 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--fog-dim);
  text-align: center;
}

/* ---- CTA de cierre (recupera .final-cta-button, ya existía en el CSS
   pero no se usaba en ningún sitio del rediseño — la página se quedaba
   sin ningún llamado a la acción al final, obligando a volver a subir
   hasta la cabecera para solicitar acceso). */
.final-cta {
  margin-top: 88px;
  padding-top: 56px;
  border-top: 1px solid var(--line-soft);
  border-image: var(--section-divider-gradient) 1;
  text-align: center;
}

.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--paper);
  text-wrap: balance;
}

.final-cta p {
  max-width: 48ch;
  margin: 0 auto 28px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--fog);
}

.final-cta-button {
  padding: 14px 28px;
  font-size: 15px;
}

/* Segundo formulario real al final de la página (auditoría de
   conversión, 2026-10) — antes el único cierre era un enlace que volvía
   a subir al formulario del hero. Mismo componente .card-wrap/.card que
   el del hero, centrado y algo más estrecho (solo 3 campos), con el
   texto de los campos alineado a la izquierda aunque el resto de la
   sección esté centrado. */
.final-cta-card-wrap {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

footer {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 72px auto 0;
  padding: 0 24px 48px;
}

/* Aurora de marca en 3 colores detrás del footer (fundador, 2026-10-07:
   "basate en nexunia.com en cuanto a branding") — mismo recurso que
   .footer-nebula de apps/web/app/globals.css, con los --*-soft ya
   corregidos por tema (ver :root de arriba) para que siga siendo visible
   sobre fondo claro. left/right/margin negativo libera el pseudo-elemento
   del max-width de footer (centrado) para que la aurora llegue al borde
   real del viewport, no solo al ancho del contenido — footer ya tiene
   position:relative/z-index propio, así que -1 aquí solo queda detrás del
   texto del footer, no del resto de la página. */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(640px 380px at 4% -20%, var(--cyan-soft), transparent 62%),
    radial-gradient(560px 460px at 96% 130%, var(--magenta-soft), transparent 58%),
    radial-gradient(520px 420px at 68% -10%, var(--violet-soft), transparent 60%);
}

/* Textura de puntos finísima, casi imperceptible, refuerzo del motivo "red
   de nodos" del isotipo — mismo recurso que .footer-nebula::after. */
footer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--cyan-dim) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.05;
  mask-image: radial-gradient(1200px 220px at 30% 0%, black, transparent 75%);
}

footer a {
  color: var(--fog);
  text-decoration: none;
}
footer a:hover {
  color: var(--paper);
}

/* Línea superior del footer en degradado de marca con halo, en vez del
   fade a --line plano de antes — mismo recurso que .footer-top-line de
   apps/web (fundador, 2026-10-07: reforzar el hilo de color de marca). */
.footer-top-line {
  height: 1px;
  margin-bottom: 36px;
  background: var(--gradient-brand);
  opacity: 0.55;
  box-shadow: 0 0 20px -2px var(--cyan);
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px 32px;
}

.footer-brand .brand {
  margin-bottom: 12px;
}

.footer-tagline {
  margin: 0;
  max-width: 30ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fog-dim);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}

.footer-legal button {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fog);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.footer-legal a {
  font-size: 13px;
}

.footer-legal button:hover {
  color: var(--paper);
}

.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--fog-dim);
}

@media (max-width: 640px) {
  footer {
    margin-top: 52px;
    padding: 0 20px 40px;
  }
  .footer-top-line {
    margin-bottom: 28px;
  }
  .footer-main {
    flex-direction: column;
    gap: 24px;
  }
  .footer-legal {
    gap: 10px 20px;
  }
  .footer-bottom {
    margin-top: 28px;
    padding-top: 18px;
  }
}

.legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(14, 17, 22, 0.72);
  backdrop-filter: blur(6px);
}

.legal-overlay[hidden] {
  display: none;
}

.legal-modal {
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 28px 26px;
  animation: fade-up 0.25s ease;
}

.legal-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.legal-modal-head h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--paper);
}


#legalModalBody p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fog);
  margin: 0 0 12px;
}

#legalModalBody p:last-child {
  margin-bottom: 0;
}

.fade-in {
  opacity: 0;
  transform: translateY(14px);
  animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.d1 {
  animation-delay: 0.05s;
}
.d2 {
  animation-delay: 0.15s;
}
.d3 {
  animation-delay: 0.25s;
}
.d4 {
  animation-delay: 0.35s;
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .pill .dot {
    animation: none;
  }
  .nxs-orb,
  .nxs-eyebrow-dot {
    animation: none !important;
  }
  .panel-demo-reveal,
  .panel-demo-typing-dot,
  .panel-demo-status-dot,
  .panel-demo-recording--playing .panel-demo-waveform-bar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --azure, no --cyan (auditoría de coherencia de diseño, 2026-10):
   --azure ya es el acento de "foco/seleccionado" en el resto de la
   página (campos de formulario al enfocar, .sector-card[aria-pressed],
   .panel-demo-tab--active) — antes el foco de teclado global usaba un
   acento distinto al de esos mismos estados. */
:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}

/* Enlace "saltar al contenido" (auditoría de captación, 2026-09-11,
   QA05): oculto visualmente hasta que recibe el foco por teclado —
   primer elemento enfocable de la página, antes del <canvas>/marca de
   agua decorativos. */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--line);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

/* Fricción de copia (pre-lanzamiento) — no impide capturas de pantalla ni
   copiar el contenido a quien de verdad quiera hacerlo (ver código
   fuente, DevTools, foto con el móvil), pero desanima el "seleccionar y
   pegar" casual. Los campos del formulario quedan exentos: deben poder
   escribirse y pegarse con normalidad. */
body.no-copy {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
body.no-copy input,
body.no-copy textarea,
body.no-copy select {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* Marca de agua discreta — repetida en diagonal, con un identificador de
   sesión + hora de carga, para poder rastrear el origen si el contenido
   se filtra igualmente (no evita nada por sí sola). */
.watermark-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.018;
  mix-blend-mode: difference;
}
.watermark-layer .wm-grid {
  position: absolute;
  inset: -20%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 64px;
  transform: rotate(-28deg);
}
.watermark-layer .wm-item {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #ffffff;
  white-space: nowrap;
}

/* ---- demo de canales en vivo (panel) ----
   Rediseño 2026-10 (petición del fundador: "ejemplos de varios canales y
   en tiempo real con el panel de Nexunia... como tenemos en staging
   similar a las demos"). Port fiel, en HTML/CSS/JS plano sin build, del
   lenguaje visual del panel interno real que ya usan las demos de
   apps/web (`PanelChatDemo` — /canales/whatsapp, /canales/instagram,
   /soluciones/telefonia-ia): avatar + insignia de canal, burbujas con
   píldora Cliente/IA, indicador de "escribiendo", transcripción propia
   para llamada (con grabación y resumen decorativos), banner de
   control IA/humano de verdad interactivo, y tarjetas estáticas sin
   animación para email. Decisión de marca explícita de ese componente,
   replicada aquí tal cual: el azul --azure identifica a la IA en esta
   demo (nunca el degradado cian/violeta/magenta de marketing), y
   --signal identifica específicamente el canal WhatsApp. Usado tanto en
   el hero (#ejemplo, GENERIC_CHANNEL_DEMOS) como en el popup de detalle
   de sector (#sectorExample, SECTOR_CHANNEL_DEMOS — ver
   sector-channel-demos.js) a través del mismo motor de render
   (renderPanelDemo / initPanelDemoWidget en app.js). */

.panel-demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.panel-demo-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--paper-dim);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.panel-demo-tab:hover {
  border-color: rgba(0, 128, 255, 0.45);
  color: var(--paper);
}

.panel-demo-tab-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.panel-demo-tab-icon svg {
  width: 15px;
  height: 15px;
}

.panel-demo-tab--active {
  border-color: var(--azure);
  background: rgba(0, 128, 255, 0.14);
  color: var(--paper);
}

.panel-demo-stage {
  max-width: 600px;
}

/* ---- tarjeta tipo bandeja (whatsapp / web / instagram / voz) ---- */
.panel-demo-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(14px);
}

.panel-demo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-raised);
}

.panel-demo-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}

.panel-demo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--paper-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.panel-demo-channel-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid var(--ink-raised);
  color: var(--ink);
  background: var(--fog-dim);
}

.panel-demo-channel-badge svg {
  width: 9px;
  height: 9px;
}

.panel-demo-channel-badge[data-tone='whatsapp'] {
  background: var(--signal);
}

.panel-demo-channel-badge[data-tone='web'],
.panel-demo-channel-badge[data-tone='instagram'] {
  background: var(--azure);
}

.panel-demo-channel-badge[data-tone='voice'] {
  background: var(--info);
}

/* Email no tiene un tono de canal propio en el producto real (no es una
   fila de bandeja con "Channel"), así que aquí usa un gris neutro —
   decorativo, solo para la cabecera de sus tarjetas en esta demo. */
.panel-demo-channel-badge[data-tone='email'] {
  background: var(--fog-dim);
}

.panel-demo-contact {
  min-width: 0;
  flex: 1;
}

.panel-demo-contact-name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-demo-contact-note {
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: var(--fog-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-demo-status-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 128, 255, 0.14);
  color: var(--azure);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.panel-demo-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--azure);
  animation: pulse 2.2s ease-in-out infinite;
}

/* ---- grabación de la llamada (decorativa, siempre visible en voice) ---- */
.panel-demo-recording-wrap {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.panel-demo-recording {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ink-raised);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.panel-demo-recording--playing {
  border-color: rgba(0, 128, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(0, 128, 255, 0.12),
    0 0 22px -6px rgba(0, 128, 255, 0.45);
}

.panel-demo-recording-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--azure);
  color: #05070a;
  cursor: pointer;
}

.panel-demo-recording-btn svg {
  width: 13px;
  height: 13px;
}

.panel-demo-waveform {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.panel-demo-waveform-bar {
  flex-shrink: 0;
  width: 3px;
  border-radius: 999px;
  background: rgba(142, 142, 142, 0.5);
  transition: background 0.2s ease;
}

.panel-demo-recording--playing .panel-demo-waveform-bar {
  background: rgba(0, 128, 255, 0.7);
  animation: pulse 1.1s ease-in-out infinite;
}

.panel-demo-recording-time {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fog-dim);
}

.panel-demo-recording-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--fog-dim);
}

.panel-demo-recording-label svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ---- resumen de la llamada + resultado ---- */
.panel-demo-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.panel-demo-summary-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid rgba(91, 200, 175, 0.4);
  background: rgba(91, 200, 175, 0.1);
  border-radius: 999px;
  padding: 3px 9px;
}

.panel-demo-summary-text {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fog);
}

.panel-demo-summary-text strong {
  color: var(--paper);
  font-weight: 600;
}

/* ---- hilo: burbujas (whatsapp / web / voice / instagram, los 4 iguales) ---- */
.panel-demo-thread {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Revelado en secuencia, disparado una sola vez por tarjeta al entrar en
   el viewport (mismo mecanismo que .chat-thread.chat-revealed de esta
   misma hoja) — pero temporizado con setTimeout desde app.js en vez de
   delays de CSS por nth-child, porque aquí el número de mensajes varía
   por canal/sector. Si JS falla, el contenido se queda en su estado
   final (ver fallback sin-JS más abajo) en vez de invisible para
   siempre. */
.panel-demo-reveal {
  opacity: 0;
  transform: translateY(8px);
}

.panel-demo-reveal.panel-demo-reveal-in {
  animation: fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.panel-demo-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 85%;
  margin-top: 10px;
}

.panel-demo-msg--ai {
  align-self: flex-end;
  align-items: flex-end;
  padding-right: 10px;
  border-right: 2px solid var(--azure);
}

.panel-demo-msg--customer {
  align-self: flex-start;
  align-items: flex-start;
  padding-left: 10px;
  border-left: 2px solid var(--fog-dim);
}

.panel-demo-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.panel-demo-msg--ai .panel-demo-msg-meta {
  flex-direction: row-reverse;
}

.panel-demo-msg-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 8.5px;
  font-weight: 700;
}

.panel-demo-msg-avatar--customer {
  background: var(--surface);
  color: var(--fog);
  border: 1px solid var(--line);
}

.panel-demo-msg-avatar--ai {
  background: rgba(0, 128, 255, 0.16);
  color: var(--azure);
}

.panel-demo-msg-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel-demo-msg-pill--customer {
  background: var(--line-soft);
  color: var(--fog);
}

.panel-demo-msg-pill--ai {
  background: rgba(0, 128, 255, 0.14);
  color: var(--azure);
}

.panel-demo-msg-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.panel-demo-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.86rem;
  line-height: 1.5;
}

.panel-demo-msg--customer .panel-demo-bubble {
  border-bottom-left-radius: 4px;
  background: var(--surface);
  color: var(--paper);
}

.panel-demo-msg--ai .panel-demo-bubble {
  border-bottom-right-radius: 4px;
  background: rgba(0, 128, 255, 0.12);
  border: 1px solid rgba(0, 128, 255, 0.35);
  color: var(--paper);
}

.panel-demo-msg-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fog-dim);
}

/* indicador de "escribiendo" — solo canales de burbuja, nunca llamada */
.panel-demo-typing {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 85%;
  margin-top: 10px;
  padding-right: 10px;
  border-right: 2px solid var(--azure);
}

/* El atributo `hidden` lo alterna app.js para esconder el indicador en
   cuanto el mensaje real se revela — sin esta regla, el `display: flex`
   de arriba (origen "autor") gana por cascada al `[hidden]{display:none}`
   del user-agent, que es de menor prioridad aunque tenga la misma
   especificidad, y el indicador se queda visible para siempre. */
.panel-demo-typing[hidden] {
  display: none;
}

.panel-demo-msg-meta--ai {
  flex-direction: row-reverse;
}

.panel-demo-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 13px;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  background: rgba(0, 128, 255, 0.12);
  border: 1px solid rgba(0, 128, 255, 0.35);
}

.panel-demo-typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--azure);
  animation: panel-demo-bounce 1.1s ease-in-out infinite;
}

.panel-demo-typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.panel-demo-typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes panel-demo-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}

/* ---- tarjeta de confirmación (todos los canales de chat, incluida voz) ---- */
.panel-demo-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  max-width: 85%;
  margin-top: 12px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid rgba(0, 128, 255, 0.35);
  background: var(--surface);
}

.panel-demo-thread .panel-demo-confirmation {
  align-self: flex-end;
}

.panel-demo-confirmation-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 128, 255, 0.14);
  color: var(--azure);
}

.panel-demo-confirmation-icon svg {
  width: 14px;
  height: 14px;
}

.panel-demo-confirmation-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.panel-demo-confirmation-meta {
  margin: 3px 0 0;
  font-size: 0.86rem;
  color: var(--paper);
}

.panel-demo-confirmation-status {
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: var(--azure);
}

/* ---- banner de control IA/humano — de verdad interactivo ---- */
.panel-demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  background: rgba(0, 128, 255, 0.1);
  color: var(--azure);
  font-size: 12px;
}

.panel-demo-banner[data-active='true'] {
  background: var(--ink-raised);
  color: var(--fog);
}

.panel-demo-banner-text {
  font-weight: 600;
}

/* Agrupa "Llamar cliente manualmente" (solo voice) + "Tomar control" —
   antes el banner solo tenía un botón suelto, ahora puede tener dos. */
.panel-demo-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.panel-demo-banner-btn {
  flex-shrink: 0;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 5px 11px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.panel-demo-banner-btn:hover {
  background: rgba(127, 127, 127, 0.14);
}

.panel-demo-banner-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

/* Acción secundaria (voice only) — mismo tamaño, trazo más discreto que
   "Tomar control" para no competir con la acción principal del banner. */
.panel-demo-banner-btn--ghost {
  border-color: var(--line);
  color: var(--fog);
}

.panel-demo-banner-btn--ghost:hover {
  background: var(--ink-raised);
}

/* ---- pie: nota de resolución + composer decorativo ---- */
.panel-demo-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--fog-dim);
}

.panel-demo-footer svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--azure);
}

.panel-demo-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: var(--ink-raised);
}

.panel-demo-composer-input {
  flex: 1;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink);
  font-size: 11.5px;
  color: var(--fog-dim);
}

.panel-demo-composer-send {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--line-soft);
  font-size: 11px;
  font-weight: 600;
  color: var(--fog-dim);
}

/* ---- email: dos tarjetas estáticas, SIN animación (patrón distinto a
   propósito, mismo criterio que apps/web/app/canales/email/page.tsx) ---- */
.panel-demo-email {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-demo-email-card {
  padding: 14px 16px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
}

.panel-demo-email-draft {
  border-color: rgba(0, 128, 255, 0.35);
}

/* Cabecera de cada tarjeta de email — mismo avatar/insignia/nombre que
   .panel-demo-head (canales de chat), para que Email no se sienta un
   cuerpo extraño frente a los otros 4 en el mismo selector de pestañas. */
.panel-demo-email-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.panel-demo-email-head .panel-demo-avatar {
  width: 30px;
  height: 30px;
  font-size: 10.5px;
}

.panel-demo-email-time {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fog-dim);
}

.panel-demo-email-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.panel-demo-email-draft .panel-demo-email-label {
  color: var(--azure);
}

.panel-demo-email-subject {
  margin: 8px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--paper);
}

.panel-demo-email-body {
  margin: 8px 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--fog);
  /* Respeta los saltos de línea/párrafos del texto del email (feedback
     del fundador: "la parte del email tiene que ser más extensa") — sin
     esto, el body llegaba como una sola línea corrida sin importar cuántos
     "\n" tuviera el texto fuente. */
  white-space: pre-line;
}

.panel-demo-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.panel-demo-email-pill {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--paper-dim);
}

.panel-demo-email-pill--primary {
  border-color: rgba(0, 128, 255, 0.45);
  background: rgba(0, 128, 255, 0.12);
  color: var(--azure);
  font-weight: 600;
}

/* ---- subsección "Demo en vivo" dentro del popup de detalle de sector ---- */
.sector-demo-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 560px) {
  .panel-demo-stage {
    max-width: 100%;
  }
  .panel-demo-msg {
    max-width: 92%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Capa v2 (2026-10-14) — ver cabecera propia más abajo.
   ═══════════════════════════════════════════════════════════════ */

/* Nexunia — early-access.nexunia.com · capa v2 (2026-10-14)
   Rediseño "mini-Nexunia": misma identidad que apps/web (tema claro gris
   frío, acentos oscuros legibles, tipografía y espaciado coherentes) y una
   página más corta y mejor organizada en escritorio y móvil.

   Se carga DESPUÉS de styles.css y solo sobrescribe lo necesario, para que
   el diff sea revisable. Cuando se dé por buena, se puede plegar dentro de
   styles.css. */

/* ───────────────────────── 1. Tokens ───────────────────────── */

/* Tema claro = mismos valores que apps/web (globals.css, tema claro). Antes
   usaba crema cálido (#f7f5f0) y el cian neón #00e5ff como TEXTO sobre
   claro (contraste 1,4:1). Aquí los acentos se oscurecen en tema claro; el
   logo conserva los colores de marca (hex fijos en el SVG). */
:root[data-theme='light'] {
  --ink: #f2f3f5;
  --ink-raised: #e9ebef;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.86);
  --line: #dfe2e7;
  --line-soft: #e9ebef;
  --fog: #5b5f68;
  --fog-dim: #646871;
  --paper: #14161a;
  --paper-dim: #494c52;
  --header-glass: rgba(242, 243, 245, 0.86);

  --cyan: #0369a1;
  --azure: #0058b8;
  --violet: #7a22e0;
  --magenta: #b61fd0;
  --signal: #0e6f5b;
  --info: #0b6bcb;
  --gradient-brand: linear-gradient(115deg, #0062cc 0%, #5b3df0 46%, #8b2fff 72%, #b61fd0 100%);

  --card-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 32px -12px rgba(20, 22, 26, 0.14);
  --input-bg: #ffffff;
  --input-border: #c9cdd4;
}

:root {
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  --input-bg: var(--ink-raised);
  --input-border: var(--line);
  --section-gap: clamp(72px, 9vw, 120px);
  --container: 1360px;
}

/* Los textos sobre degradado de marca pasan a blanco en claro (los
   degradados claros son oscuros) y siguen en negro sobre el degradado
   neón del tema oscuro. */
:root[data-theme='light'] .header-cta,
:root[data-theme='light'] button[type='submit'],
:root[data-theme='light'] .limited-badge,
:root[data-theme='light'] .success .icon {
  color: #ffffff;
}
:root[data-theme='light'] .limited-badge .dot {
  background: #ffffff;
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.6);
}
/* select: el fondo se declara con background-color para no pisar la flecha */
:root[data-theme='light'] select {
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%235b5f68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ───────────────────────── 2. Tipografía base ───────────────────────── */

main {
  max-width: var(--container);
  padding-top: 24px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* Etiquetas de estado (Ya disponible / Beta / Próximamente): antes mono
   mayúsculas de 11 px con cian sobre claro. Ahora una píldora legible. */
.pillar-card .tag,
.restaurant-card-head .tag,
.use-case-highlight .tag,
.roadmap-card .tag,
.connector-badge,
.channel-badge,
.sector-features-tag {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 11%, transparent);
}

.section-head h2 {
  font-size: clamp(1.65rem, 1.35rem + 1.3vw, 2.4rem);
  letter-spacing: -0.01em;
}
.section-head p {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 60ch;
}
.lede {
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.6;
}

/* ───────────────────────── 3. Cabecera ───────────────────────── */

.top-row {
  gap: 14px;
}
.top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-cta--bar {
  font-size: 13.5px;
  padding: 10px 16px;
  margin-right: 4px;
}
.top-nav a {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.menu-toggle {
  /* En escritorio el menú son los 5 enlaces; el botón solo existe en móvil */
}
@media (max-width: 1080px) {
  .header-cta--bar {
    padding: 9px 13px;
  }
}
@media (max-width: 440px) {
  .brand-word {
    display: none;
  }
  .header-cta--bar {
    font-size: 13px;
    padding: 9px 12px;
    margin-right: 0;
  }
}

/* ───────────────────────── 4. Hero + formulario ───────────────────────── */

.hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(8px, 2vw, 24px) 0 0;
}
h1 {
  font-size: clamp(2.25rem, 1.65rem + 2.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.facts {
  margin-top: 28px;
  gap: 18px;
}
.fact-mark {
  color: var(--cyan);
  font-family: var(--font-sans);
  font-weight: 700;
}
.fact-copy strong {
  font-size: 1rem;
}
.fact-copy span {
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Tarjeta del formulario: superficie limpia, sin degradado turbio */
.card-wrap {
  background: none;
  padding: 0;
  border-radius: 20px;
  box-shadow: var(--card-shadow);
}
.card {
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: none;
  padding: clamp(22px, 3vw, 34px);
}
:root:not([data-theme='light']) .card {
  background: var(--surface-glass);
}
.card-head h2 {
  font-size: 1.5rem;
}
.access-note {
  font-size: 0.875rem;
}
input,
textarea,
select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
}
label {
  font-size: 0.875rem;
  color: var(--paper-dim);
}
button[type='submit'] {
  padding: 14px 20px;
  font-size: 1rem;
  border-radius: 10px;
}
.fine {
  font-size: 0.8125rem;
  line-height: 1.55;
}
.fine-link {
  color: var(--cyan);
}

/* ───────────────────────── 5. Ritmo y estructura de secciones ───────────────────────── */

main > section {
  margin-top: var(--section-gap);
  padding-top: 0;
  border-top: 0;
}

/* Patrón de escritorio: título a la izquierda (fijo al hacer scroll) y el
   contenido a la derecha — aprovecha todo el ancho en vez de dejar la
   mitad derecha vacía. */
@media (min-width: 981px) {
  .pillars,
  .connectors,
  .faq,
  .roadmap {
    display: grid;
    grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
    column-gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }
  .pillars > .section-head,
  .connectors > .section-head,
  .faq > .section-head,
  .roadmap > .section-head {
    position: sticky;
    top: 110px;
    grid-row: 1 / span 3;
    max-width: none;
  }
  .pillars > :not(.section-head),
  .connectors > :not(.section-head),
  .faq > :not(.section-head),
  .roadmap > :not(.section-head) {
    grid-column: 2;
  }
}

/* ── Demo de canales: se mantiene centrada y a ancho completo ── */
.chat-demo {
  margin-top: var(--section-gap);
}
.chat-demo-head {
  margin-inline: auto;
  text-align: center;
}
.chat-demo-head p {
  margin-inline: auto;
}

/* ── Pilares: 5 filas legibles en lugar de 5 tarjetas minúsculas ── */
.pillar-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
.pillar-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 18px;
  row-gap: 4px;
  align-items: start;
  padding: 20px 22px;
  background: var(--surface);
  backdrop-filter: none;
}
.pillar-card:hover {
  transform: none;
  border-color: var(--azure);
}
.pillar-icon {
  grid-row: 1 / span 3;
  margin: 0;
  background: color-mix(in srgb, var(--azure) 9%, var(--surface));
  color: var(--azure);
}
.pillar-card h3 {
  font-size: 1.125rem;
  margin: 0;
  order: 0;
}
.pillar-card .tag {
  color: var(--signal);
  margin: 0;
  grid-column: 2;
}
.pillar-card p:last-child {
  grid-column: 2;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ── Puesta en marcha: tres pasos en banda ── */
.onboarding {
  text-align: left;
}
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.onboarding-steps .fact {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
@media (max-width: 760px) {
  .onboarding-steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── Conectores: fichas compactas en filas ── */
.connector-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.connector-tile {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-areas:
    'icon name badge'
    'icon summary summary';
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 14px 16px;
  text-align: left;
  background: var(--surface);
  backdrop-filter: none;
  border-radius: 12px;
}
.connector-tile .connector-icon {
  grid-area: icon;
  width: 38px;
  height: 38px;
  align-self: start;
}
.connector-name {
  grid-area: name;
  font-size: 0.9375rem;
  font-weight: 600;
}
.connector-summary {
  grid-area: summary;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fog);
}
.connector-badge {
  grid-area: badge;
  justify-self: end;
  color: var(--signal);
}
.connector-badge.soon {
  color: var(--violet);
}
@media (max-width: 980px) {
  .connector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .connector-grid {
    gap: 8px;
  }
  .connector-tile {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
      'icon name'
      'icon badge';
    padding: 12px;
    column-gap: 10px;
  }
  .connector-tile .connector-icon {
    width: 34px;
    height: 34px;
  }
  .connector-summary {
    display: none;
  }
  .connector-badge {
    justify-self: start;
  }
}

/* ── Sectores: 3 destacados + 2 beta ocupan una cuadrícula de 6 sin huérfanos ── */
.use-case-highlights {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.use-case-highlight {
  grid-column: span 2;
  background: var(--surface);
  backdrop-filter: none;
}
.use-case-highlight:nth-child(n + 4) {
  grid-column: span 3;
}
.use-case-highlight p:not(.tag) {
  font-size: 0.9375rem;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .use-case-highlights {
    grid-template-columns: 1fr;
  }
  .use-case-highlight,
  .use-case-highlight:nth-child(n + 4) {
    grid-column: auto;
  }
}
.sector-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .sector-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .sector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sector-card {
  background: var(--surface);
  font-size: 0.9375rem;
}

/* ── Restaurantes: pestañas con un solo caso visible ── */
.restaurant .section-head {
  max-width: 70ch;
}
.restaurant-tabs {
  display: none;
  gap: 8px;
  margin: 28px 0 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.restaurant-tabs::-webkit-scrollbar {
  display: none;
}
.restaurant-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--paper-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.restaurant-tab:hover {
  border-color: var(--azure);
}
.restaurant-tab[aria-selected='true'] {
  color: #ffffff;
  background: var(--azure);
  border-color: var(--azure);
}
:root:not([data-theme='light']) .restaurant-tab[aria-selected='true'] {
  color: #05070a;
}
.restaurant-tab:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}
.restaurant-grid.is-tabs {
  display: block;
}
.restaurant-grid.is-tabs .restaurant-card {
  display: none;
}
.restaurant-grid.is-tabs .restaurant-card.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    'head chat'
    'body chat';
  grid-template-rows: auto 1fr;
  align-content: start;
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 16px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--surface);
  backdrop-filter: none;
}
.restaurant-grid.is-tabs .restaurant-card:hover {
  transform: none;
}
.restaurant-grid.is-tabs .restaurant-card-head {
  grid-area: head;
}
.restaurant-grid.is-tabs .restaurant-card > p {
  grid-area: body;
  font-size: 1rem;
  line-height: 1.65;
  align-self: start;
}
.restaurant-grid.is-tabs .mini-chat {
  grid-area: chat;
}
@media (max-width: 800px) {
  .restaurant-grid.is-tabs .restaurant-card.is-active {
    grid-template-columns: 1fr;
    grid-template-areas:
      'head'
      'body'
      'chat';
  }
}

/* ── Hoja de ruta: lista compacta ── */
.roadmap-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.roadmap-card {
  padding: 14px 16px;
  background: var(--surface);
  border-color: var(--line);
}
.roadmap-card:hover {
  transform: none;
}
.roadmap-card .tag {
  color: var(--violet);
  margin-bottom: 6px;
}
.roadmap-card h3 {
  font-size: 1rem;
}
.roadmap-card p:last-child {
  font-size: 0.875rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .roadmap-grid {
    grid-template-columns: 1fr;
  }
}
.roadmap-contact a {
  color: var(--cyan);
}

/* ── FAQ ── */
.faq-item summary {
  font-size: 1rem;
  min-height: 48px;
}
.faq-item p {
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ── Cierre ── */
.final-cta {
  text-align: center;
  padding: clamp(40px, 6vw, 72px) 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.final-cta h2 {
  text-wrap: balance;
}
.final-cta p {
  margin-inline: auto;
}
.final-cta-link {
  margin-top: 8px;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 12px;
}

/* ───────────────────────── 6. Móvil ───────────────────────── */

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
}

@media (max-width: 760px) {
  main {
    padding-inline: 16px;
  }
  :root {
    --section-gap: 64px;
  }
  /* Hero compacto: el formulario es la conversión y debe verse enseguida.
     Los tres beneficios quedan como títulos de una línea (el detalle ya
     está en "Producto"). */
  .hero .lede {
    margin-bottom: 0;
  }
  .facts {
    margin-top: 18px;
    gap: 8px;
  }
  .facts .fact-copy span {
    display: none;
  }
  .facts .fact {
    align-items: center;
  }
  .fact-copy strong {
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .card-head h2 {
    font-size: 1.35rem;
  }
}

/* CTA fijo inferior (solo móvil/tablet) */
.sticky-cta {
  display: none;
}
@media (max-width: 980px) {
  body {
    padding-bottom: 76px;
  }
  .sticky-cta {
    display: inline-flex;
    position: fixed;
    z-index: 55;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 15px 20px;
    font-size: 1rem;
    border-radius: 14px;
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.25s ease,
      opacity 0.25s ease;
    box-shadow: 0 14px 34px -10px rgba(91, 61, 240, 0.55);
  }
  .sticky-cta.is-visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

/* Pie */
footer {
  margin-top: var(--section-gap);
}

/* ───────────────────────── 7. Móvil: compactación (2.ª pasada) ───────────────────────── */
@media (max-width: 980px) {
  main > section > .section-head {
    margin-bottom: 28px;
  }
  .chat-demo-head {
    margin-bottom: 24px;
  }
}

@media (max-width: 760px) {
  .hero .lede {
    font-size: 1rem;
    line-height: 1.55;
  }

  /* Pilares: icono + título arriba, texto a ancho completo debajo */
  .pillar-card {
    grid-template-columns: 40px 1fr;
    column-gap: 14px;
    padding: 16px;
  }
  .pillar-icon {
    grid-row: 1 / span 2;
  }
  .pillar-card .tag {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .pillar-card h3 {
    grid-column: 2;
    grid-row: 2;
  }
  .pillar-card p:last-child {
    grid-column: 1 / -1;
    margin-top: 6px;
    font-size: 0.9375rem;
  }

  /* Destacados de sectores: carrusel horizontal con "snap" */
  .use-case-highlights {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -16px;
    padding: 2px 16px 10px;
    scrollbar-width: none;
  }
  .use-case-highlights::-webkit-scrollbar {
    display: none;
  }
  .use-case-highlight,
  .use-case-highlight:nth-child(n + 4) {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }

  /* Hoja de ruta: tarjetas más bajas */
  .roadmap-card p:last-child {
    -webkit-line-clamp: 2;
  }
  .final-cta {
    border-radius: 20px;
    padding: 36px 18px;
  }
}

/* ───────────────────────── 8. Legibilidad (3.ª pasada) ───────────────────────── */

/* Violeta de "Próximamente" legible también en tema oscuro (#8b2fff daba
   3,25:1 sobre #0e1116). */
:root:not([data-theme='light']) {
  --violet-text: #b890ff;
}
:root:not([data-theme='light']) .connector-badge.soon,
:root:not([data-theme='light']) .roadmap-card .tag,
:root:not([data-theme='light']) .soon-inline.soon,
:root:not([data-theme='light']) .use-case-highlight .tag.soon,
:root:not([data-theme='light']) .sector-features-tag.soon,
:root:not([data-theme='light']) .sector-intro .soon {
  color: var(--violet-text);
}

/* Textos pequeños de las demos: la réplica del panel mantiene su densidad,
   pero nada baja de ~10-11 px, y los textos explicativos suben a 11,5-13 px. */
.mini-chat-tag,
.chat-status {
  font-size: 11.5px;
}
.channel-note {
  font-size: 0.8125rem;
}
.panel-demo-msg-time,
.panel-demo-status-pill,
.panel-demo-confirmation-label {
  font-size: 11px;
}
.panel-demo-msg-pill {
  font-size: 10.5px;
}
.panel-demo-msg-avatar {
  font-size: 10px;
}
.panel-demo-contact-note {
  font-size: 12px;
}

/* ───────────────────────── 9. Detalles ───────────────────────── */
.header-cta--bar {
  min-height: 40px;
}
@media (max-width: 980px) {
  .faq-list {
    max-width: none;
  }
}

/* Aviso en vistas previas (app.js marca <html data-preview>): el envío del
   formulario se simula y no se guarda. Posición fija: no mueve el diseño. */
html[data-preview='true'] body::after {
  content: 'Vista previa · envío simulado';
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 40;
  padding: 5px 11px;
  border-radius: 999px;
  font: 600 12px/1.2 var(--font-sans);
  color: #fff;
  background: rgba(20, 22, 26, 0.82);
  pointer-events: none;
}

/* Pestañas de restaurante sin saltos de diseño: con la marca html.js se
   muestra desde el primer pintado el mismo estado que dejará app.js
   (fila de pestañas + solo el primer caso), de modo que al ejecutarse el
   JS no se mueve nada. Sin JS: los 5 casos visibles y sin pestañas. */
html.js .restaurant-tabs {
  display: flex;
}
html.js .restaurant-grid:not(.is-tabs) {
  display: block;
}
html.js .restaurant-grid:not(.is-tabs) .restaurant-card:not(:first-child) {
  display: none;
}
html.js .restaurant-grid:not(.is-tabs) .restaurant-card:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    'head chat'
    'body chat';
  grid-template-rows: auto 1fr;
  align-content: start;
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 16px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--surface);
  backdrop-filter: none;
}
html.js .restaurant-grid:not(.is-tabs) .restaurant-card-head {
  grid-area: head;
}
html.js .restaurant-grid:not(.is-tabs) .restaurant-card > p {
  grid-area: body;
  font-size: 1rem;
  line-height: 1.65;
  align-self: start;
}
html.js .restaurant-grid:not(.is-tabs) .mini-chat {
  grid-area: chat;
}
@media (max-width: 800px) {
  html.js .restaurant-grid:not(.is-tabs) .restaurant-card:first-child {
    grid-template-columns: 1fr;
    grid-template-areas:
      'head'
      'body'
      'chat';
  }
}

/* ───────────────────────── 10. Agentes, verticales y webs de ejemplo ───────────────────────── */

:root {
  --warn: #8a5200;
}
:root:not([data-theme='light']) {
  --warn: #f0b45c;
}

/* Etiquetas de estado */
.status {
  display: inline-block;
  width: fit-content;
  flex: 0 0 auto;
  font: 600 12px/1.4 var(--font-sans);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.status--av {
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 12%, transparent);
}
.status--beta {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
}
.chip {
  display: inline-block;
  font: 500 12px/1.4 var(--font-sans);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--fog);
  white-space: nowrap;
}
.chip--req {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

/* ── Catálogo de agentes (acordeón agrupado) ── */
.agent-group + .agent-group {
  margin-top: 30px;
}
.agent-group-title {
  margin: 0 0 4px;
  font: 600 0.875rem/1.3 var(--font-sans);
  color: var(--fog);
}
.agent {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.15s ease;
}
.agent[open] {
  border-color: var(--azure);
}
.agent summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
}
.agent summary::-webkit-details-marker {
  display: none;
}
.agent summary::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: 0 2px 3px 2px;
  border-right: 2px solid var(--fog);
  border-bottom: 2px solid var(--fog);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.agent[open] summary::after {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}
.agent summary:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
  border-radius: 14px;
}
.agent-name {
  flex: 1;
  min-width: 0;
  font: 600 1rem/1.35 var(--font-display);
  color: var(--paper);
}
.agent-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 28px;
  align-items: start;
  padding: 0 18px 20px;
}
.agent-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fog);
}
.agent .mini-chat {
  margin: 0;
}
@media (max-width: 720px) {
  .agent-body {
    grid-template-columns: 1fr;
    padding: 0 14px 16px;
  }
  .agent summary {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  .agent-name {
    flex-basis: calc(100% - 40px);
  }
}

/* ── Secciones de agente especializado (restaurantes, venta online, academias) ── */
.vertical-head {
  max-width: 78ch;
}
.vertical-status {
  margin: 0 0 12px;
}
.vertical-head h2 {
  text-wrap: balance;
}
.vertical-sub {
  margin: 40px 0 16px;
  font: 700 1.1875rem/1.3 var(--font-display);
  color: var(--paper);
}
.mod-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  align-items: start;
}
@media (min-width: 1100px) {
  #restaurantes .mod-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .mod-groups {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.mod-group-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font: 600 0.9375rem/1.3 var(--font-sans);
  color: var(--paper);
}
.mod-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mod {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.mod-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.mod-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--paper);
}
.mod-desc {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fog);
}

/* Ejemplos de conversación en pestañas (venta online y academias) */
.ex-tabs {
  display: none;
  gap: 8px;
  margin: 0 0 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ex-tabs::-webkit-scrollbar {
  display: none;
}
html.js .ex-tabs {
  display: flex;
}
.ex-panels {
  display: grid;
  gap: 16px;
}
html.js .ex-group .ex-panels {
  gap: 0;
}
html.js .ex-group:not([data-ready]) .ex-panel:not(:first-child),
.ex-group[data-ready] .ex-panel:not(.is-active) {
  display: none;
}
.ex-panel .mini-chat {
  max-width: 620px;
}

/* ── Webs de ejemplo ── */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
}
.demo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    transform 0.18s ease;
}
.demo-card:hover,
.demo-card:focus-visible {
  border-color: var(--azure);
  transform: translateY(-2px);
}
.demo-card:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}
.demo-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  background: var(--ink-raised);
}
.demo-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.demo-kind {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--fog);
}
.demo-name {
  margin: 0;
  font: 700 1.125rem/1.3 var(--font-display);
  color: var(--paper);
}
.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.demo-chips li {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink-raised);
  font: 500 12px/1.4 var(--font-sans);
  color: var(--paper-dim);
}
.demo-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--azure);
}
.demo-open svg {
  width: 16px;
  height: 16px;
}

/* ── Grupos de módulos: siempre abiertos en escritorio, acordeón en móvil ── */
.vertical-head .eyebrow {
  display: inline-block;
  margin: 0 10px 14px 0;
}
.vertical-status {
  display: inline-block;
  margin: 0 0 14px;
}
summary.mod-group-title {
  display: block;
  list-style: none;
  cursor: default;
}
summary.mod-group-title::-webkit-details-marker {
  display: none;
}
@media (max-width: 860px) {
  .mod-group {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }
  summary.mod-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 0;
    cursor: pointer;
  }
  summary.mod-group-title::after {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: 0 2px 3px 0;
    border-right: 2px solid var(--fog);
    border-bottom: 2px solid var(--fog);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
  }
  .mod-group[open] > summary.mod-group-title::after {
    transform: rotate(-135deg);
    margin-bottom: -3px;
  }
  .mod-group[open] > summary.mod-group-title {
    border-bottom: 1px solid var(--line);
  }
  summary.mod-group-title:focus-visible {
    outline: 2px solid var(--azure);
    outline-offset: 2px;
    border-radius: 14px;
  }
  .mod-group .mod-list {
    gap: 0;
    padding: 4px 16px 8px;
  }
  .mod-group .mod {
    padding: 12px 0;
    border: 0;
    border-top: 1px solid var(--line-soft);
    border-radius: 0;
    background: transparent;
  }
  .mod-group .mod:first-child {
    border-top: 0;
  }
}

/* Fichas "Próximamente" de conectores: atenuadas por color, no por opacidad
   (la opacidad dejaba el texto por debajo de 3:1). */
.connector-tile.soon {
  opacity: 1;
  background: var(--ink-raised);
}
.connector-tile.soon .connector-icon {
  opacity: 0.6;
}

.demos > .section-head {
  margin-bottom: 28px;
}
.connector-tile {
  align-content: start;
}

/* ───────────────────────── 11. Móvil y tablet: auditoría de dispositivos ───────────────────────── */

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

/* Zonas seguras (notch / isla dinámica) con viewport-fit=cover */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Objetivos táctiles: mínimo ~40-42 px en pantallas táctiles */
@media (max-width: 980px) {
  .theme-toggle,
  .menu-toggle {
    width: 42px;
    height: 42px;
  }
  .lang-switcher-trigger {
    min-height: 42px;
    min-width: 54px;
  }
  .panel-demo-tab,
  .panel-demo-banner-btn {
    min-height: 40px;
  }
  .faq-item summary,
  .agent summary,
  summary.mod-group-title {
    min-height: 52px;
  }
}

/* Móviles muy estrechos (320-359 px): la cabecera entra sin desbordar */
@media (max-width: 359px) {
  .top-row {
    gap: 6px;
  }
  .top-right {
    gap: 4px;
  }
  .header-cta--bar {
    padding: 8px 10px;
    font-size: 12.5px;
    min-height: 40px;
    margin-right: 0;
  }
  .theme-toggle,
  .menu-toggle {
    width: 38px;
    height: 38px;
  }
  .lang-switcher-trigger {
    min-width: 40px;
    padding-inline: 8px;
  }
  .lang-switcher-trigger svg {
    display: none;
  }
}

/* Las fichas de conectores nunca desbordan, ni con etiquetas largas */
.connector-tile {
  min-width: 0;
}
.connector-name,
.connector-summary {
  overflow-wrap: anywhere;
}
@media (max-width: 400px) {
  .connector-badge,
  .status {
    white-space: normal;
  }
}

/* Móvil apaisado: poca altura — sin barra fija inferior */
@media (max-height: 500px) and (orientation: landscape) {
  .sticky-cta {
    display: none !important;
  }
  body {
    padding-bottom: 0;
  }
}

/* Barra fija: respeta la zona segura lateral */
@media (max-width: 980px) {
  .sticky-cta {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
  }
}

/* Tablet vertical (601-980 px): contenedores y rejillas que aprovechan el ancho */
@media (min-width: 601px) and (max-width: 980px) {
  main {
    padding-inline: 28px;
  }
  .agent-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mod-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 601px) and (max-width: 860px) {
  /* En tablet vertical los grupos de módulos son acordeón: una columna ancha lee mejor */
  .mod-groups {
    grid-template-columns: 1fr;
  }
}

/* ───────────────────────── 12. Táctil: objetivos de 44 px y casos extremos ───────────────────────── */

/* Cualquier pantalla táctil (también tablet horizontal): controles cómodos */
@media (pointer: coarse) {
  .theme-toggle,
  .menu-toggle {
    width: 42px;
    height: 42px;
  }
  .lang-switcher-trigger {
    min-height: 42px;
    min-width: 54px;
  }
  .panel-demo-tab,
  .panel-demo-banner-btn,
  .panel-demo-composer-send {
    min-height: 40px;
  }
  .top-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* Pie: enlaces legales y email como filas táctiles */
  footer .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
  }
  footer .footer-legal a,
  footer .footer-legal button,
  footer a[href^='mailto:'] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
  }
  .fine-link,
  .faq-item p a,
  .roadmap-contact a {
    padding-block: 10px;
  }
}

/* 320-359 px: las fichas de conectores pasan a una columna */
@media (max-width: 359px) {
  .connector-grid {
    grid-template-columns: 1fr;
  }
  .connector-tile {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: 'icon name badge';
    align-items: center;
  }
  .connector-badge {
    justify-self: end;
  }
}

/* ───────────────────────── 13. Compactación móvil/tablet (3.ª pasada) ───────────────────────── */

/* Agentes: nombre y estado en la misma línea cuando caben */
@media (max-width: 720px) {
  .agent summary {
    display: block;
    position: relative;
    min-height: 52px;
    padding: 13px 42px 13px 14px;
  }
  .agent-name {
    display: inline;
    font-size: 0.96875rem;
  }
  .agent .status {
    margin-left: 8px;
    vertical-align: 1px;
  }
  .agent summary::after {
    position: absolute;
    right: 18px;
    top: 50%;
    margin: -7px 0 0;
  }
  .agent[open] summary::after {
    margin: -2px 0 0;
  }
}

/* Hoja de ruta: plegable en móvil/tablet vertical, siempre visible en escritorio */
.roadmap-more > summary {
  display: none;
}
@media (max-width: 860px) {
  .roadmap-more {
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }
  .roadmap-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    font: 600 0.9375rem/1.3 var(--font-sans);
    color: var(--paper);
    cursor: pointer;
    list-style: none;
  }
  .roadmap-more > summary::-webkit-details-marker {
    display: none;
  }
  .roadmap-more > summary::after {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: 0 2px 3px 0;
    border-right: 2px solid var(--fog);
    border-bottom: 2px solid var(--fog);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
  }
  .roadmap-more[open] > summary::after {
    transform: rotate(-135deg);
    margin-bottom: -3px;
  }
  .roadmap-more[open] > summary {
    border-bottom: 1px solid var(--line);
  }
  .roadmap-more > .roadmap-grid {
    margin: 0;
    padding: 12px;
  }
  .roadmap-more > summary:focus-visible {
    outline: 2px solid var(--azure);
    outline-offset: 2px;
    border-radius: 14px;
  }
}

/* Galería de demos: carrusel con snap en móvil */
@media (max-width: 560px) {
  .demo-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -16px;
    padding: 2px 16px 10px;
    scrollbar-width: none;
  }
  .demo-grid::-webkit-scrollbar {
    display: none;
  }
  .demo-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

/* Tablet vertical: destacados de sectores en 2 columnas (el 5.º ocupa el ancho) */
@media (min-width: 561px) and (max-width: 860px) {
  .use-case-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding: 0;
  }
  .use-case-highlight,
  .use-case-highlight:nth-child(n + 4) {
    flex: none;
    grid-column: auto;
  }
  .use-case-highlight:nth-child(5) {
    grid-column: 1 / -1;
  }
}

/* Fichas de sector compactas en móvil: icono a la izquierda, 2 columnas */
@media (max-width: 560px) {
  .sector-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 10px;
    font-size: 0.875rem;
    line-height: 1.25;
  }
  .sector-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
  }
}

/* 360-374 px (muchos Android): cabecera algo más compacta para que todo quepa */
@media (max-width: 374px) {
  .top-row {
    gap: 8px;
  }
  .top-right {
    gap: 4px;
  }
  .header-cta--bar {
    padding: 9px 11px;
    font-size: 13px;
    margin-right: 0;
  }
  .theme-toggle,
  .menu-toggle {
    width: 38px;
    height: 38px;
  }
  .lang-switcher-trigger {
    min-width: 46px;
    padding-inline: 8px;
  }
}

/* ───────────────────────── 14. Rendimiento móvil ───────────────────────── */

/* Tipografías de reserva con métricas equivalentes (medidas en navegador; Hanken se ajusta al
   peso y tamaño reales de los titulares, ~3 % por encima del ajuste del texto corrido):
   al llegar Hanken Grotesk / Inter el texto casi no cambia de tamaño y la
   tarjeta del formulario ya no se desplaza (CLS). */
@font-face {
  font-family: 'Hanken Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 103%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 105%;
}

/* ───────────────────────── 15. Agentes por sector: tarjetas de la home y subpáginas ───────────────────────── */

/* Color de cada sector (texto/acentos sobre claro y oscuro con contraste AA) */
:root {
  --sx-ember: #b43d0a;
  --sx-teal: #0d6b63;
  --sx-indigo: #4338ca;
}
:root:not([data-theme='light']) {
  --sx-ember: #fb9a5c;
  --sx-teal: #3ddbc4;
  --sx-indigo: #aab4ff;
}
[data-sector='rest'] {
  --sx: var(--sx-ember);
  --sx-rgb: 194, 65, 12;
}
[data-sector='shop'] {
  --sx: var(--sx-teal);
  --sx-rgb: 15, 118, 110;
}
[data-sector='acad'] {
  --sx: var(--sx-indigo);
  --sx-rgb: 79, 70, 229;
}
:root:not([data-theme='light']) [data-sector='rest'] {
  --sx-rgb: 251, 146, 60;
}
:root:not([data-theme='light']) [data-sector='shop'] {
  --sx-rgb: 45, 212, 191;
}
:root:not([data-theme='light']) [data-sector='acad'] {
  --sx-rgb: 129, 140, 248;
}

/* ── Home: sección "Agentes por sector" ── */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(var(--sx-rgb), 0.1), transparent 60%),
    var(--surface);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.hub-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(var(--sx-rgb), 0.9), rgba(var(--sx-rgb), 0.15));
}
.hub-card:hover,
.hub-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(var(--sx-rgb), 0.55);
}
.hub-card:focus-within {
  outline: 2px solid var(--sx);
  outline-offset: 3px;
}
.hub-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--sx);
  background: rgba(var(--sx-rgb), 0.12);
}
.hub-icon svg {
  width: 24px;
  height: 24px;
}
.hub-name {
  margin: 4px 0 0;
  font: 700 1.375rem/1.2 var(--font-display);
  color: var(--paper);
}
.hub-link {
  color: inherit;
  text-decoration: none;
}
.hub-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hub-link:focus-visible {
  outline: none;
}
.hub-tag {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fog);
}
.hub-chat {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 14px;
  border-radius: 16px;
  background: var(--ink-raised);
  min-height: 150px;
  align-content: start;
}
.hub-chat .b {
  margin: 0;
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.hub-chat .b--c {
  justify-self: start;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--paper);
  border-bottom-left-radius: 4px;
}
.hub-chat .b--a {
  justify-self: end;
  background: rgba(var(--sx-rgb), 0.14);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}
.hub-chat .b--d {
  justify-self: center;
  max-width: 100%;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal) 14%, transparent);
  color: var(--signal);
  font-weight: 600;
  font-size: 0.75rem;
}
/* los mensajes "entran" al ver la tarjeta (sin JS se ven todos) */
html.js .hub-chat .b {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}
html.js .hub-card.in-view .hub-chat .b {
  animation: hub-bubble 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
html.js .hub-card.in-view .hub-chat .b:nth-child(1) {
  animation-delay: 0.15s;
}
html.js .hub-card.in-view .hub-chat .b:nth-child(2) {
  animation-delay: 0.95s;
}
html.js .hub-card.in-view .hub-chat .b:nth-child(3) {
  animation-delay: 1.75s;
}
@keyframes hub-bubble {
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hub-chat .b {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
.hub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hub-chips li {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink-raised);
  font: 500 12px/1.4 var(--font-sans);
  color: var(--paper-dim);
}
.hub-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--sx);
}
.hub-more svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
.hub-card:hover .hub-more svg {
  transform: translateX(5px);
}
.hub-others {
  margin-top: 20px;
  text-align: center;
}
.hub-others a {
  font-weight: 600;
}

@media (max-width: 980px) {
  .hub-grid {
    grid-template-columns: 1fr;
  }
  .hub-grid:not(.hub-grid--others) .hub-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .hub-grid:not(.hub-grid--others) .hub-card > * {
    grid-column: 1;
  }
  .hub-grid:not(.hub-grid--others) .hub-chat {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
  .hub-grid:not(.hub-grid--others) .hub-chips {
    grid-column: 1;
  }
}
@media (max-width: 700px) {
  /* móvil: carrusel con snap para no alargar la home */
  .hub-grid:not(.hub-grid--others) {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -16px;
    padding: 6px 16px 14px;
    scrollbar-width: none;
  }
  .hub-grid:not(.hub-grid--others)::-webkit-scrollbar {
    display: none;
  }
  .hub-grid:not(.hub-grid--others) .hub-card {
    display: flex;
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
}

/* Chip "Solicitud para: …" en el formulario (llega con ?sector=) */
.sector-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--azure) 12%, transparent);
  color: var(--azure);
  font: 500 0.8125rem/1.4 var(--font-sans);
}
.sector-chip[hidden] {
  display: none;
}

/* ── Subpáginas de sector ── */
.sector-page {
  --sx-soft: rgba(var(--sx-rgb), 0.12);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--fog);
}
.breadcrumb li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--fog);
}
.breadcrumb a {
  color: var(--paper-dim);
  text-decoration: none;
  padding: 10px 2px;
  display: inline-block;
}
.breadcrumb a:hover {
  color: var(--sx);
  text-decoration: underline;
}
.breadcrumb [aria-current] {
  color: var(--paper);
  font-weight: 600;
}

.sector-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(8px, 2vw, 20px);
  padding: clamp(10px, 2vw, 24px) 0;
}
.sector-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -40px -5% -20px 35%;
  background: radial-gradient(60% 60% at 60% 40%, rgba(var(--sx-rgb), 0.18), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.sector-hero h1 {
  text-wrap: balance;
}
.sector-hero .eyebrow {
  display: inline-block;
  margin: 0 10px 12px 0;
  background: none;
  color: var(--sx);
  -webkit-text-fill-color: currentColor;
}
.sector-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 26px;
}
.sector-cta-primary {
  padding: 14px 26px;
  font-size: 1rem;
  border-radius: 12px;
  min-height: 48px;
}
.sector-cta-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  font-weight: 600;
  color: var(--sx);
  text-decoration: none;
  border-bottom: 2px solid rgba(var(--sx-rgb), 0.35);
}
.sector-cta-secondary:hover {
  border-bottom-color: var(--sx);
}
.sector-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.sector-quick li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: 500 0.8125rem/1.3 var(--font-sans);
  color: var(--paper-dim);
}
.sector-quick li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sx);
}

.sector-hero-visual {
  position: relative;
  padding: 18px 0 26px;
}
.device {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow:
    0 30px 60px -28px rgba(var(--sx-rgb), 0.45),
    var(--card-shadow);
  transform: perspective(1400px) rotateY(-5deg) rotateX(1deg);
  transition: transform 0.4s ease;
}
.sector-hero-visual:hover .device {
  transform: perspective(1400px) rotateY(-1deg);
}
.device-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: var(--ink-raised);
  border-bottom: 1px solid var(--line);
}
.device-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.device img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}
.float-chips {
  margin: 0;
  padding: 0;
  list-style: none;
}
.float {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
  font: 600 0.8125rem/1.25 var(--font-sans);
  color: var(--paper);
  animation: float-y 6s ease-in-out infinite;
}
.float::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 22%, transparent);
}
.float-1 {
  top: 6%;
  left: -4%;
}
.float-2 {
  right: -3%;
  top: 42%;
  animation-delay: -2s;
}
.float-3 {
  left: 6%;
  bottom: 0;
  animation-delay: -4s;
}
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .float {
    animation: none;
  }
  .device,
  .sector-hero-visual:hover .device {
    transform: none;
  }
}

/* Horario semanal ilustrativo (academias) */
.timetable {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow:
    0 30px 60px -28px rgba(var(--sx-rgb), 0.45),
    var(--card-shadow);
}
.tt-grid {
  display: grid;
  grid-template-columns: 44px repeat(5, minmax(0, 1fr));
  grid-template-rows: 28px repeat(3, 64px);
  gap: 6px;
}
.tt-head {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  font: 600 0.75rem/28px var(--font-sans);
  color: var(--fog);
  text-align: center;
}
.tt-h {
  align-self: start;
  font: 500 0.6875rem/1 var(--font-mono);
  color: var(--fog);
  padding-top: 6px;
}
.tt-s {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 10px;
  font: 600 0.75rem/1.2 var(--font-sans);
  color: var(--paper);
  overflow: hidden;
}
.tt-s--a {
  background: rgba(79, 70, 229, 0.16);
  border-left: 3px solid #6366f1;
}
.tt-s--b {
  background: rgba(14, 165, 233, 0.16);
  border-left: 3px solid #0ea5e9;
}
.tt-s--c {
  background: rgba(168, 85, 247, 0.16);
  border-left: 3px solid #a855f7;
}
.tt-s--t {
  background: color-mix(in srgb, var(--signal) 16%, transparent);
  border-left: 3px solid var(--signal);
  animation: tt-pulse 3s ease-in-out infinite;
}
@keyframes tt-pulse {
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 25%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt-s--t {
    animation: none;
  }
}

/* Antes / Con Nexunia */
.sector-h2 {
  margin: 0 0 22px;
  font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem) / 1.2 var(--font-display);
  color: var(--paper);
  text-wrap: balance;
}
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pain {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.pain p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.pain-label {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  font: 600 0.75rem/1.4 var(--font-sans);
}
.pain-before .pain-label {
  background: var(--ink-raised);
  color: var(--fog);
}
.pain-after .pain-label {
  background: rgba(var(--sx-rgb), 0.14);
  color: var(--sx);
}
.pain-before .pain-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fog);
}
.pain-after {
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.pain-after .pain-text {
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--paper);
}

/* Cierre y otros agentes */
.sector-cta {
  padding: clamp(36px, 6vw, 64px) 22px;
  border: 1px solid rgba(var(--sx-rgb), 0.35);
  border-radius: 26px;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(var(--sx-rgb), 0.16), transparent 70%),
    var(--surface);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.sector-cta h2 {
  margin: 0 0 10px;
  font: 700 clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem) / 1.2 var(--font-display);
  color: var(--paper);
  text-wrap: balance;
}
.sector-cta p {
  max-width: 54ch;
  margin: 0 auto 24px;
  color: var(--fog);
  line-height: 1.6;
}
.sector-others .section-note {
  margin-top: 18px;
  text-align: center;
}
.sector-others .section-note a {
  font-weight: 600;
}
.hub-grid--others {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}
.hub-grid--others .hub-card {
  gap: 8px;
  padding: 18px;
}

@media (max-width: 980px) {
  .sector-hero {
    grid-template-columns: 1fr;
  }
  .sector-hero::before {
    inset: -20px -10% 0 -10%;
  }
  .pain-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .hub-grid--others {
    grid-template-columns: 1fr;
  }
  .float {
    padding: 7px 10px;
    font-size: 0.75rem;
  }
  .float-1 {
    left: 2%;
    top: 2%;
  }
  .float-2 {
    right: 2%;
    top: 40%;
  }
  .float-3 {
    left: 4%;
    bottom: -2%;
  }
  .device {
    transform: none;
  }
  .tt-grid {
    grid-template-columns: 34px repeat(5, minmax(0, 1fr));
    grid-template-rows: 26px repeat(3, 54px);
    gap: 4px;
  }
  .tt-s {
    padding: 4px 5px;
    font-size: 0.6875rem;
  }
  .timetable {
    padding: 12px;
  }
}
.sector-page > section {
  margin-top: var(--section-gap);
}
.sector-page > .breadcrumb {
  margin-top: 6px;
}
.sector-page > .sector-hero {
  margin-top: 4px;
}

/* El resplandor y los chips flotantes del hero no generan scroll horizontal */
.sector-page {
  overflow-x: clip;
}

/* Horario (academias): los chips flotantes no tapan los días de la semana */
.sector-hero-visual:has(.timetable) {
  padding-top: 30px;
  padding-bottom: 34px;
}
.sector-hero-visual:has(.timetable) .float-1 {
  top: 0;
  left: 3%;
}
.sector-hero-visual:has(.timetable) .float-2 {
  top: auto;
  right: 3%;
  bottom: 0;
}
.sector-hero-visual:has(.timetable) .float-3 {
  top: auto;
  left: 3%;
  bottom: 0;
}
@media (max-width: 600px) {
  .sector-hero-visual:has(.timetable) .float-2 {
    display: none;
  }
}
.hub-others a,
.sector-others .section-note a {
  color: var(--azure);
}

.sector-others .section-note a {
  display: inline-block;
  padding: 12px 10px;
  font-size: 0.9375rem;
}

/* Burbuja final de las tarjetas: verde más profundo (contraste AA sobre el fondo tintado) */
.hub-chat .b--d {
  color: #0a5a49;
}
:root:not([data-theme='light']) .hub-chat .b--d {
  color: #5eead4;
}

/* Galería de la home con 5 demos: 3 arriba y 2 más anchas abajo; en tablet la última ocupa todo el ancho */
@media (min-width: 1101px) {
  .demo-grid:not(.demo-grid--sector) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .demo-grid:not(.demo-grid--sector) > .demo-card {
    grid-column: span 2;
  }
  .demo-grid:not(.demo-grid--sector) > .demo-card:nth-child(n + 4) {
    grid-column: span 3;
  }
}
@media (min-width: 561px) and (max-width: 1100px) {
  .demo-grid:not(.demo-grid--sector) > .demo-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}