/* ===================================================================
   Fibergo — Sistema de Agentes IA
   Tokens de marca: "Línea de Señal" (ver plan de diseño)
   =================================================================== */

:root {
  --bg-papel: #F7F5F1;
  --bg-sala-control: #0C1116;
  --superficie: #FFFFFF;
  --texto-grafito: #10151A;
  --texto-muted: #4B5259;
  --texto-niebla: #EDEEF0;
  --texto-niebla-muted: #A9B0B6;
  --acento-pulso: #0659D6;
  --acento-pulso-deep: #043A8B;
  --acento-traza: #1C9E89;
  --acento-traza-tint: #D9F5EF;
  /* Claro de apoyo: franjas luminosas dentro del sitio oscuro. Mismo valor que
     ya usan los paneles claros de partner y demo, ahora como token compartido. */
  --bg-niebla: #EEF5FF;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-margin-mobile: 20px;
  --container-max: 1200px;

  --shadow-sm: 0 1px 2px rgba(12, 17, 22, .06);
  --shadow-md: 0 8px 24px rgba(12, 17, 22, .10);
  --border-hairline: 1px solid rgba(12, 17, 22, .08);

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Escala tipográfica modular (contraste "sello": micro-label vs. headline) */
  --fs-micro: 12px;   --lh-micro: 16px;  --ls-micro: 0.08em;
  --fs-caption: 14px; --lh-caption: 20px;
  --fs-body: 17px;    --lh-body: 28px;
  --fs-body-sm: 16px; --lh-body-sm: 24px;
  --fs-h3: 22px;      --lh-h3: 28px;
  --fs-h2: 34px;      --lh-h2: 40px;
  --fs-h1: 44px;      --lh-h1: 51px;
  --fs-display: 56px; --lh-display: 60px;

  /* Iconografía */
  --icon-size: 20px;

  /* Escala de espaciado (base 4px) usada también por los tailwind.config de cada página */
  --space-0-5: 2px;
  --space-8: 128px;

  /* Profundidad (z-index) */
  --z-nav: 50;
  --z-signal: 40;
  --z-overlay: 60;
  --z-toast: 70;

  /* Foco de teclado */
  --focus-ring: 0 0 0 2px var(--bg-papel), 0 0 0 4px var(--acento-pulso);
  --focus-ring-dark: 0 0 0 2px var(--bg-sala-control), 0 0 0 4px var(--acento-pulso);

  /* Movimiento: duraciones */
  --dur-instant: 100ms;
  --dur-ui: 200ms;
  --dur-enter: 450ms;
  --dur-enter-slow: 600ms;
  --stagger-step: 60ms;

  /* Movimiento: easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.6, 0, 1, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-ui: 1ms;
    --dur-enter: 1ms;
    --dur-enter-slow: 1ms;
    --stagger-step: 0ms;
  }
}

/* -------------------------------------------------------------
   Tipografía base
   ------------------------------------------------------------- */
body {
  font-family: var(--font-body);
}

.font-display-lg, .font-display-lg-mobile, .font-headline-lg,
h1.font-display-lg, h2.font-headline-lg {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.data-mono, .stat-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

.eyebrow-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* -------------------------------------------------------------
   Sección oscura "Sala de Control" (hero / CTA final)
   ------------------------------------------------------------- */
.on-dark {
  background-color: var(--bg-sala-control);
}

/* Opt-in: aplicar solo al texto que vive directo sobre el fondo oscuro.
   Las tarjetas blancas flotantes dentro de una sección .on-dark NO
   heredan esto — se dejan intactas. */
.on-dark-text {
  color: var(--texto-niebla) !important;
}

.on-dark-muted {
  color: var(--texto-niebla-muted) !important;
}

/* -------------------------------------------------------------
   Navegación superior
   Al tope de la página la barra no tiene superficie propia: el fondo
   de la primera sección pasa por detrás y menú y hero se leen como
   una sola pieza. Al hacer scroll recupera fondo, borde y sombra para
   seguir legible sobre el resto del contenido.
   Además se retira al bajar y vuelve al subir (ver .is-hidden en theme.js),
   para devolverle la pantalla completa a la lectura.
   ------------------------------------------------------------- */
.site-nav {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background-color var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              box-shadow var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
}

.site-nav.is-hidden {
  transform: translateY(-100%);
}

.site-nav.is-scrolled {
  background-color: var(--bg-papel);
  border-bottom-color: rgba(12, 17, 22, .08);
  box-shadow: var(--shadow-sm);
}

html.dark .site-nav.is-scrolled {
  background-color: var(--dm-surface);
  border-bottom-color: var(--dm-border);
}

/* Con el menú móvil desplegado la barra también toma superficie, para que
   no se corte el tono entre la barra y el panel que cuelga debajo.
   En reglas aparte: un navegador sin :has() no debe invalidar .is-scrolled. */
.site-nav:has(#mobile-menu-btn[aria-expanded="true"]) {
  background-color: var(--bg-papel);
  border-bottom-color: rgba(12, 17, 22, .08);
  box-shadow: var(--shadow-sm);
}

html.dark .site-nav:has(#mobile-menu-btn[aria-expanded="true"]) {
  background-color: var(--dm-surface);
  border-bottom-color: var(--dm-border);
}

/* -------------------------------------------------------------
   Línea de Señal — elemento firma
   Un trazo vertical que recorre la página completa y pulsa
   en cada punto de prueba (métrica, testimonio, feature confirmada).
   ------------------------------------------------------------- */
#signal-line {
  position: fixed;
  top: 0;
  left: 18px;
  width: 2px;
  height: 100vh;
  z-index: 40;
  pointer-events: none;
  display: none;
}

@media (min-width: 1024px) {
  #signal-line { display: block; }
}

#signal-line .signal-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(6, 89, 214, .35) 15%, rgba(6, 89, 214, .35) 85%, transparent);
}

#signal-line .signal-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--acento-pulso);
  transition: height .15s linear;
}

/* Páginas sin puntos de prueba (.is-plain, ver theme.js): sin puntitos que
   marquen el recorrido, el trazo se quedaría inerte. Un pulso lo recorre de
   arriba abajo cada pocos segundos —la señal viajando por la línea— sin robar
   protagonismo al relleno de progreso, que sigue mandando. */
#signal-line.is-plain .signal-track {
  overflow: hidden;
}

#signal-line.is-plain .signal-track::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 22%;
  background: linear-gradient(to bottom, transparent, var(--acento-pulso), transparent);
  animation: signal-pulse 3.6s var(--ease-out) infinite;
}

@keyframes signal-pulse {
  0% { transform: translateY(-100%); opacity: 0; }
  12% { opacity: .9; }
  80% { opacity: .9; }
  100% { transform: translateY(455%); opacity: 0; }
}

/* Puntitos de recorrido: uno por sección ([data-proof]), fijos en el
   trazo. Se encienden cuando el scroll los alcanza, así el trazo
   funciona como mapa de toda la página. */
#signal-line .signal-waypoint {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: var(--texto-muted);
  opacity: .4;
  /* "top" también se anima: las secciones más altas que la pantalla descansan
     en un sitio distinto según se venga bajando o subiendo, y el punto se
     reacomoda a ese extremo (ver layoutWayDots en theme.js). Sin transición el
     reajuste se vería como un salto al cambiar de sentido. */
  transition: background .3s ease, opacity .3s ease, transform .3s ease,
              top .35s var(--ease-out);
}

#signal-line .signal-waypoint.is-passed {
  background: var(--acento-pulso);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.3);
}

/* -------------------------------------------------------------
   Iconografía original (ver assets/icons.svg para la gramática)
   ------------------------------------------------------------- */
.icon {
  width: 1em;
  height: 1em;
  font-size: var(--icon-size);
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-dot {
  fill: currentColor;
  stroke: none;
  opacity: .65;
  transition: opacity var(--dur-ui) var(--ease-out);
}

.icon-solid {
  fill: currentColor;
  stroke: none;
}

a:hover .icon-dot,
button:hover .icon-dot,
.group:hover .icon-dot {
  opacity: 1;
}

/* -------------------------------------------------------------
   Movimiento con propósito
   - Transiciones de interfaz: 150-250ms (--dur-ui)
   - Entradas de contenido: 300-600ms (--dur-enter / --dur-enter-slow)
   - Solo transform y opacity. Entradas con --ease-out, salidas con --ease-in.
   ------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-enter) var(--ease-out),
              transform var(--dur-enter) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Microinteracciones: feedback en <100ms, solo transform/opacity */
button, .btn, a, input, textarea, select {
  transition: transform var(--dur-instant) var(--ease-out),
              opacity var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-ui) var(--ease-out),
              background-color var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out);
}

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

/* Foco de teclado visible y con carácter propio (anillo de dos capas en el acento).
   !important: Tailwind (CDN) genera su propio reset de outline y se inyecta después
   de este stylesheet, así que gana el cascade por orden si no forzamos aquí. */
:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-radius: var(--radius-sm) !important;
}

.on-dark :focus-visible {
  box-shadow: var(--focus-ring-dark) !important;
}

/* Estados vacíos / error: mismo lenguaje de tokens, nunca genéricos */
.state-empty, .state-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--border-hairline);
  background: var(--superficie);
}

.state-error {
  border-color: rgba(186, 26, 26, .3);
}

.state-empty .icon, .state-error .icon {
  width: 28px;
  height: 28px;
  opacity: .7;
}

.state-empty h3, .state-error h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.state-empty p, .state-error p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--texto-muted);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none;
    transition: opacity var(--dur-enter) linear;
  }
  .animate-marquee-left, .animate-marquee-right, .animate-marquee-up,
  .animate-bounce-slow, .animate-pill-pulse, .animate-pulse-opacity,
  .animate-soundwave, .animate-vertical-loop, .pulse-live-dot,
  .sector-word-animation, .icon-dot {
    animation: none !important;
    transition: none !important;
  }
  #signal-fill { transition: none; }
  #signal-line .signal-waypoint { transition: none; }
  #signal-line.is-plain .signal-track::after { animation: none; opacity: 0; }
}

/* ===================================================================
   Modo oscuro — único modo del sitio, fijado con <html class="dark">
   en las 6 páginas (ya no hay selector de tema).
   Extiende la "Sala de Control" (.on-dark) a todo el sitio.
   Las secciones que ya son .on-dark (heroes) no cambian: ya son oscuras.
   =================================================================== */
:root {
  --dm-bg: #0C1116;
  --dm-surface: #12161C;
  --dm-surface-low: #171C24;
  --dm-surface-mid: #1B212A;
  --dm-surface-high: #232A34;
  --dm-border: rgba(255, 255, 255, .08);
  --dm-text: var(--texto-niebla);
  --dm-text-muted: var(--texto-niebla-muted);
  --flash-highlight-bg: #F2EEE4;
}

html.dark {
  --flash-highlight-bg: #232A34;
}

html.dark {
  color-scheme: dark;
}

/* Fondo base de la página */
html.dark body {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

html.dark .on-dark {
  color: var(--dm-text);
}

/* Superficies (tarjetas, secciones, navegación) */
html.dark .bg-background-off-white,
html.dark .bg-surface,
html.dark .bg-surface-container-lowest,
html.dark .bg-white {
  background-color: var(--dm-surface) !important;
}

html.dark .bg-surface\/80 {
  background-color: rgba(18, 22, 28, .8) !important;
}

html.dark .bg-surface-container-low,
html.dark .bg-\[\#EFEBE3\] {
  background-color: var(--dm-surface-low) !important;
}

html.dark .from-\[\#EFEBE3\] {
  --tw-gradient-from: var(--dm-surface-low) !important;
}

html.dark .from-background-off-white {
  --tw-gradient-from: var(--dm-surface) !important;
}

html.dark .bg-surface-container {
  background-color: var(--dm-surface-mid) !important;
}

html.dark .bg-surface-container-high,
html.dark .bg-surface-container-highest {
  background-color: var(--dm-surface-high) !important;
}

/* Las mismas superficies en :hover. Tailwind genera otro nombre de clase para
   la variante (.hover\:bg-…), así que las reglas de arriba no la alcanzaban y
   el fondo se quedaba en claro: crema con texto claro encima, ilegible. */
html.dark .hover\:bg-surface:hover,
html.dark .hover\:bg-white:hover {
  background-color: var(--dm-surface) !important;
}

html.dark .hover\:bg-surface-container-low:hover {
  background-color: var(--dm-surface-low) !important;
}

html.dark .hover\:bg-surface-container:hover {
  background-color: var(--dm-surface-mid) !important;
}

html.dark .hover\:bg-surface-container-high:hover {
  background-color: var(--dm-surface-high) !important;
}

/* Texto principal y secundario (clases Tailwind) */
html.dark .text-on-surface,
html.dark .text-on-background,
html.dark .text-grafito,
html.dark .text-\[\#10151A\] {
  color: var(--dm-text) !important;
}

html.dark .text-on-surface-variant,
html.dark .text-\[\#4B5259\] {
  color: var(--dm-text-muted) !important;
}

/* Variantes de opacidad de on-surface-variant (Tailwind text-on-surface-variant/N):
   se remapean a blanco con la misma opacidad, para conservar la jerarquía
   (día disponible vs. atenuado/deshabilitado) sobre fondo oscuro. */
html.dark .text-on-surface-variant\/10 { color: rgba(237, 238, 240, .10) !important; }
html.dark .text-on-surface-variant\/20 { color: rgba(237, 238, 240, .20) !important; }
html.dark .text-on-surface-variant\/40 { color: rgba(237, 238, 240, .40) !important; }
html.dark .text-on-surface-variant\/60 { color: rgba(237, 238, 240, .60) !important; }
html.dark .text-on-surface-variant\/70 { color: rgba(237, 238, 240, .70) !important; }
html.dark .text-on-surface-variant\/80 { color: rgba(237, 238, 240, .80) !important; }

/* Texto fijado por estilo inline (export de diseño) — los dos tonos
   dominantes del sitio se repiten en casi todos los títulos y párrafos. */
html.dark [style*="color: rgb(16, 21, 26)"] {
  color: var(--dm-text) !important;
}

html.dark [style*="color: rgb(75, 82, 89)"] {
  color: var(--dm-text-muted) !important;
}

/* Bordes y sombras */
html.dark .border-border-glass,
html.dark .glass-border {
  border-color: var(--dm-border) !important;
}

html.dark .soft-shadow {
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, .55) !important;
}

/* Tarjetas blancas dentro de heroes .on-dark: pasan a negro puro para
   que los acentos de color (avatares, chips, barras) contrasten al máximo;
   el borde/soft-shadow sigue marcando el límite de la tarjeta. */
html.dark .on-dark .bg-white,
html.dark .on-dark .bg-surface-container-lowest {
  background-color: #000000 !important;
}

/* Botón secundario "Explorar capacidades" del hero: negro sólido con
   texto blanco en modo oscuro, en vez del blanco translúcido difuminado. */
html.dark .on-dark .bg-white\/50 {
  background-color: #000000 !important;
}

html.dark .on-dark .hover\:bg-white:hover {
  background-color: #1A1F26 !important;
}

/* Chips y tarjetas de acento en pastel: se oscurecen a una versión
   apagada del mismo tono, en vez de quedar pastel sobre fondo oscuro. */
html.dark .bg-\[\#D9F5EF\],
html.dark .bg-tertiary-fixed,
html.dark .bg-tertiary-fixed\/30,
html.dark .bg-\[\#CFF5EE\] {
  background-color: #12302B !important;
}

html.dark .bg-\[\#F1E4CE\],
html.dark .bg-secondary-fixed,
html.dark .bg-secondary-container,
html.dark .bg-\[\#EDE0C9\] {
  background-color: #332A1C !important;
}

html.dark .bg-\[\#EAE4D7\] {
  background-color: var(--dm-surface-mid) !important;
}

html.dark .bg-\[\#DCE8F9\],
html.dark .bg-primary-fixed {
  background-color: #16233A !important;
}

html.dark .bg-\[\#A8C5F1\] {
  background-color: #1C2C47 !important;
}

/* Texto e íconos dentro de estos chips oscurecidos: pasan a claro. */
html.dark .bg-\[\#D9F5EF\] .text-on-surface,
html.dark .bg-tertiary-fixed .text-on-surface,
html.dark .bg-\[\#F1E4CE\] .text-on-surface,
html.dark .bg-secondary-fixed .text-on-surface,
html.dark .bg-\[\#EAE4D7\] .text-on-surface,
html.dark .bg-\[\#DCE8F9\] .text-on-surface,
html.dark .bg-primary-fixed .text-on-surface,
html.dark .bg-\[\#A8C5F1\] .text-on-surface,
html.dark .bg-\[\#D9F5EF\].text-on-surface,
html.dark .bg-tertiary-fixed.text-on-surface,
html.dark .bg-\[\#F1E4CE\].text-on-surface,
html.dark .bg-secondary-fixed.text-on-surface,
html.dark .bg-\[\#DCE8F9\].text-on-surface,
html.dark .bg-primary-fixed.text-on-surface,
html.dark .bg-\[\#A8C5F1\].text-on-surface,
html.dark .bg-\[\#D9F5EF\] .text-\[\#10151A\],
html.dark .bg-tertiary-fixed .text-\[\#10151A\],
html.dark .bg-\[\#F1E4CE\] .text-\[\#10151A\],
html.dark .bg-secondary-fixed .text-\[\#10151A\],
html.dark .bg-\[\#EAE4D7\] .text-\[\#10151A\],
html.dark .bg-\[\#DCE8F9\] .text-\[\#10151A\],
html.dark .bg-primary-fixed .text-\[\#10151A\],
html.dark .bg-\[\#A8C5F1\] .text-\[\#10151A\],
html.dark .bg-\[\#D9F5EF\][style*="color: rgb(16, 21, 26)"],
html.dark .bg-tertiary-fixed[style*="color: rgb(16, 21, 26)"],
html.dark .bg-secondary-fixed[style*="color: rgb(16, 21, 26)"] {
  color: var(--dm-text) !important;
}

html.dark .bg-\[\#D9F5EF\] .text-on-surface-variant,
html.dark .bg-tertiary-fixed .text-on-surface-variant,
html.dark .bg-\[\#F1E4CE\] .text-on-surface-variant,
html.dark .bg-secondary-fixed .text-on-surface-variant,
html.dark .bg-\[\#EAE4D7\] .text-on-surface-variant,
html.dark .bg-\[\#DCE8F9\] .text-on-surface-variant,
html.dark .bg-primary-fixed .text-on-surface-variant,
html.dark .bg-\[\#A8C5F1\] .text-on-surface-variant,
html.dark .bg-\[\#D9F5EF\] [style*="color: rgb(75, 82, 89)"],
html.dark .bg-\[\#F1E4CE\] [style*="color: rgb(75, 82, 89)"],
html.dark .bg-\[\#EAE4D7\] [style*="color: rgb(75, 82, 89)"],
html.dark .bg-secondary-fixed [style*="color: rgb(75, 82, 89)"] {
  color: var(--dm-text-muted) !important;
}

html.dark .bg-\[\#D9F5EF\] .text-on-secondary-fixed-variant,
html.dark .bg-tertiary-fixed .text-on-secondary-fixed-variant,
html.dark .bg-\[\#F1E4CE\] .text-on-secondary-fixed-variant,
html.dark .bg-secondary-fixed .text-on-secondary-fixed-variant,
html.dark .bg-\[\#DCE8F9\] .text-on-primary-fixed-variant,
html.dark .bg-primary-fixed .text-on-primary-fixed-variant,
html.dark .bg-\[\#A8C5F1\] .text-on-primary-fixed-variant,
html.dark .bg-tertiary-fixed.text-on-tertiary-fixed-variant,
html.dark .bg-\[\#F1E4CE\].text-on-secondary-fixed-variant,
html.dark .bg-secondary-fixed.text-on-secondary-fixed-variant,
html.dark .bg-\[\#DCE8F9\].text-on-primary-fixed-variant,
html.dark .bg-primary-fixed.text-on-primary-fixed-variant,
html.dark .bg-\[\#A8C5F1\].text-on-primary-fixed-variant {
  color: var(--dm-text) !important;
}