/* ── Tokens: paleta CLARA oficial de THE LAB RE (branding-lab-re.html) ──
   Mismos valores exactos que se usaron en el video de venta, para que la
   landing y el video se lean como la misma pieza. */
:root {
  --bg: #eef1ee;
  --card: #ffffff;
  --ink: #16211f;
  --sub: #48575c;
  --line: rgba(20, 48, 56, 0.18);
  --line-strong: rgba(20, 48, 56, 0.32);
  --signal: #1f8f80;
  --signal-ink: #ffffff;
  /* El verde señal oscurecido lo MÍNIMO para que el texto blanco encima
     llegue a 4.5:1 (AA). #1f8f80 con blanco da 3.96:1 y no pasa; #178070 da
     4.82:1 y a simple vista es el mismo verde. Se usa SOLO como fondo bajo
     texto blanco: barras, avatares y puntos decorativos siguen con
     --signal, porque ahí no hay texto que leer. */
  --signal-fondo: #178070;
  --redline: #b8551f;
  --blueprint: #143038;
  /* La mono es el ACENTO TÉCNICO del Brand Kit, no una segunda voz de texto.
     Úsala solo en: el wordmark, números, y rótulos cortos en mayúsculas.
     Prosa, controles y etiquetas de formulario van SIEMPRE en la sans.
     Repartida por todos lados, la página parece tener muchas tipografías
     teniendo solo dos -- que es justo lo que pasaba antes del 31/08. */

  --font-sans: "IBM Plex Sans", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --header-h: 76px;
}
/* Los controles de formulario NO heredan la familia tipográfica del body:
   es un comportamiento por defecto del navegador, no un olvido del CSS. Sin
   esta regla, cualquier <button> sin familia propia cae en Arial y rompe la
   uniformidad. Lo encontró la medición del 31/08: un solo botón (el de cerrar
   la ficha flotante) salía en Arial. */
button, input, select, textarea { font-family: inherit; }


@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  src: url("assets/fonts/IBMPlexSans-400.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 500;
  src: url("assets/fonts/IBMPlexSans-500.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  src: url("assets/fonts/IBMPlexSans-600.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 700;
  src: url("assets/fonts/IBMPlexSans-700.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  src: url("assets/fonts/IBMPlexMono-400.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500;
  src: url("assets/fonts/IBMPlexMono-500.woff2") format("woff2");
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Logo: los 3 módulos reales del Brand Kit, nunca recreados de memoria ── */
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca svg { width: 30px; height: 30px; flex: none; }
.marca-tipo { font-weight: 600; font-size: 15px; letter-spacing: 0.02em; color: var(--ink); line-height: 1.1; }
.marca-tipo small {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: 10px; letter-spacing: 0.09em; color: var(--sub); margin-top: 3px;
}

/* ── Botón WhatsApp: única acción de conversión de toda la página ── */
.btn-wa {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--signal-fondo); color: var(--signal-ink);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--signal); white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn-wa:hover { background: #197a6d; }
/* Principio 1 de `apple-design`: la respuesta va en el PRESIONAR, no al
   soltar. 100 ms para que se sienta instantáneo pero no brusco. */
.btn-wa:active { transform: scale(0.97); transition-duration: 100ms; }
.btn-wa svg { width: 18px; height: 18px; flex: none; }
.btn-wa:focus-visible { outline: 2px solid var(--blueprint); outline-offset: 3px; }

/* ── Header fijo ── */
.site-header {
  /* position:fixed, NO sticky+margen-negativo. La combinación anterior
     (sticky + margin-top negativo en .hero para que el header "flotara"
     encima) producía un bug de renderizado real -- confirmado con Chrome
     headless en perfil limpio, dos veces, no era un artefacto de la
     captura. fixed saca al header del flujo normal del todo, así que el
     hero puede empezar justo en el borde superior sin ningún truco. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(20, 48, 56, 0.55);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(233, 241, 239, 0.14);
  transition: background-color 0.2s ease;
}
.site-header .marca-tipo { color: #f4f8f7; }
.site-header .marca-tipo small { color: #9fc3bd; }
.site-header .marca svg rect[stroke] { stroke: #f4f8f7; }
/* Fuera del hero (scrolleado a otra sección clara) el header pasa a versión
   clara -- lo activa script.js con la misma IntersectionObserver del hero. */
.site-header.on-light {
  background: rgba(238, 241, 238, 0.88);
  border-bottom-color: var(--line);
}
.site-header.on-light .marca-tipo { color: var(--ink); }
.site-header.on-light .marca-tipo small { color: var(--sub); }
.site-header.on-light .marca svg rect[stroke] { stroke: var(--ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.header-derecha { display: flex; align-items: center; gap: 18px; }

/* ── Selector de idioma: mismo patrón que la referencia (bandera/botón
   arriba a la derecha), pero en el lenguaje del Brand Kit -- mono, sin
   bandera de país (el mercado es bilingüe, no "de otro país"). ── */
.lang-switch {
  display: flex; align-items: center; border: 1px solid rgba(233, 241, 239, 0.28);
  border-radius: 20px; padding: 3px; gap: 2px;
}
.site-header.on-light .lang-switch { border-color: var(--line-strong); }
.lang-btn {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.06em;
  padding: 5px 11px; border-radius: 16px; border: none; background: transparent;
  color: #cfe3df; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.site-header.on-light .lang-btn { color: var(--sub); }
.lang-btn[aria-pressed="true"] { background: var(--signal-fondo); color: #ffffff; }
.lang-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.btn-wa--header { padding: 10px 18px; font-size: 14px; }
.btn-wa--header .btn-wa-full { display: inline; }
@media (max-width: 560px) {
  .btn-wa--header .btn-wa-full { display: none; }
}

/* ── Hero ──
   Asimétrico: texto a la izquierda, el teléfono con la conversación viva a
   la derecha -- el "signature element" es el propio producto en acción, no
   un gráfico decorativo. Mismo lenguaje que el cuadro 1 del video. */
/* El encabezado es position:fixed de --header-h: sin esto, al pulsar el menú
   el título de la sección de destino queda escondido debajo de él. */
#inicio, #camino, #preguntas { scroll-margin-top: calc(var(--header-h) + 12px); }

.hero {
  padding-block: calc(var(--header-h) + 64px) 96px;
  background:
    radial-gradient(1000px 560px at 12% 0%, rgba(95, 216, 200, 0.14), transparent 62%),
    radial-gradient(900px 700px at 92% 100%, rgba(31, 143, 128, 0.10), transparent 58%),
    var(--blueprint);
  color: #e9f1ef;
}
.hero .hero-h1 { color: #f4f8f7; }
.hero .hero-h1 em { color: #5fd8c8; }
.hero .hero-sub { color: #b7cbc7; }
.hero .hero-nota { color: #8fb3ae; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 64px;
  align-items: center;
}
.hero-copy, .hero-visual { min-width: 0; }
.hero-h1 {
  font-family: var(--font-sans); font-weight: 400; font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 22px; color: var(--ink);
}
.hero-h1 em {
  font-style: normal; color: var(--signal); font-weight: 500;
}
.hero-sub {
  font-size: 19px; color: var(--sub); max-width: 46ch; margin: 0 0 34px;
}
.hero-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-nota {
  font-family: var(--font-sans); font-size: 13px; color: var(--sub);
}

/* Entrada del hero al cargar -- no depende de scroll, es lo primero que se
   ve. Fundido + leve subida, escalonado por elemento. */
@keyframes hero-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hero-h1  { animation: hero-entra 0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.05s; }
.hero-sub { animation: hero-entra 0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.15s; }
.hero-ctas{ animation: hero-entra 0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.25s; }
.hero-visual{ animation: hero-entra 0.8s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
  .hero-h1, .hero-sub, .hero-ctas, .hero-visual { animation: none; }
}

/* ── El teléfono ──────────────────────────────────────────────────────
   Rehecho el 02/09 tomando el lenguaje de la referencia que trajo Marcos
   (las demos "AIS. NOW MOBILE." y "EVERYTHING. IN YOUR POCKET." del reel de
   HyperFrames): chasis en CONTORNO con halo, cromado mono en las esquinas y
   líneas guía de plano técnico.

   Lo que NO se copió, a propósito: allí la pantalla es azul noche. Aquí la
   pantalla es WhatsApp y tiene que SEGUIR pareciendo WhatsApp -- que la
   conversación ocurra en WhatsApp es la promesa del producto, no un adorno.
   El contraste marco oscuro / pantalla clara además hace que el teléfono
   destaque más que en la referencia, no menos. ── */

.hero-visual { position: relative; }

/* Resplandor detrás del teléfono. Va DENTRO de .hero-visual (no desbordado
   con inset negativo) para no obligar a un overflow:hidden en el hero -- ese
   truco ya escondió un desborde real en este proyecto y se prohibió. */
.hero-visual::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(95, 216, 200, 0.22), rgba(95, 216, 200, 0.07) 52%, transparent 74%);
}

.tel-rotulo {
  position: relative; z-index: 2; margin: 0 0 16px; text-align: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(95, 216, 200, 0.72);
}

/* ── Líneas guía: el nodo aparece primero y la línea se traza hacia el
   teléfono. Se anima `width` y no `transform` a propósito: lo que tiene que
   leerse es que la línea SE DIBUJA, y un scaleX estira también el degradado
   y el trazo se ve "comprimido" al principio. ── */
/* inset:0 sobre .tel-marco -- el tramo arranca 82px a la izquierda del
   bisel y muere exactamente en él. */
.guias { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.guia {
  position: absolute; left: -82px; height: 1px; width: 0;
  background: linear-gradient(to right, rgba(95, 216, 200, 0), rgba(95, 216, 200, 0.6));
}
.guia-n {
  position: absolute; left: -3px; top: -2.5px; width: 6px; height: 6px;
  border-radius: 50%; background: #5fd8c8;
  box-shadow: 0 0 10px rgba(95, 216, 200, 0.9); opacity: 0;
}
.guia--1 { top: 27%; } .guia--2 { top: 48%; } .guia--3 { top: 69%; }
@keyframes guia-traza { to { width: 82px; } }
@keyframes guia-nodo  { to { opacity: 1; } }
.guia   { animation: guia-traza 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.guia-n { animation: guia-nodo 0.25s ease forwards; }
.guia--1        { animation-delay: 0.55s; } .guia--1 .guia-n { animation-delay: 0.50s; }
.guia--2        { animation-delay: 0.70s; } .guia--2 .guia-n { animation-delay: 0.65s; }
.guia--3        { animation-delay: 0.85s; } .guia--3 .guia-n { animation-delay: 0.80s; }

/* Bajo 1080px la columna de texto y el teléfono quedan demasiado cerca y las
   guías se meterían encima del párrafo. Se apagan; no llevan información. */
@media (max-width: 1080px) { .guias { display: none; } }

/* ── El chasis. Es un CONTORNO con halo, no un iPhone fotorrealista: la
   referencia hace lo mismo y así el teléfono no compite con la pantalla. ── */
/* ── Profundidad 3D real (03/09) ────────────────────────────────────────
   Método de la skill `apple-design` (Emil Kowalski, a partir de *Designing
   Fluid Interfaces*, WWDC 2018): el objeto responde al puntero de forma
   continua, con resorte, y se puede interrumpir en cualquier momento.

   Es 3D DE VERDAD — perspectiva + rotateX/rotateY + translateZ por capas —
   pero con transformaciones CSS, no WebGL. Motivo: el CSP del sitio es
   `script-src 'self'`, así que three.js desde CDN estaría BLOQUEADO y habría
   que auto-alojar ~600 KB en una página que hoy pesa 120 KB. Las
   transformaciones CSS van por GPU y pesan cero.

   La perspectiva vive en el PADRE, no en el elemento: si se pone en el mismo
   elemento que rota, cada capa tendría su propio punto de fuga y el efecto se
   deshace. ── */
.hero-visual { perspective: 1400px; perspective-origin: 50% 45%; }

.tel-marco {
  position: relative; z-index: 1; margin-inline: auto; width: 100%; max-width: 340px;
  /* El JS escribe estas variables; el CSS decide qué hacer con ellas. Así la
     transformación se compone en un solo sitio y no hay dos fuentes de verdad. */
  --rx: 0deg; --ry: 0deg; --lift: 0px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));
  will-change: transform;
  padding: 10px; border-radius: 46px;
  background: linear-gradient(155deg,
    rgba(233, 241, 239, 0.17), rgba(233, 241, 239, 0.03) 42%, rgba(95, 216, 200, 0.13));
  border: 1px solid rgba(95, 216, 200, 0.3);
  box-shadow:
    inset 0 0 0 1px rgba(6, 16, 19, 0.55),
    0 40px 90px -26px rgba(0, 0, 0, 0.75),
    0 0 64px -12px rgba(95, 216, 200, 0.3);
}
@keyframes tel-entra { from { opacity: 0; transform: translateY(26px) scale(0.965); } }
.tel-marco { animation: tel-entra 0.9s cubic-bezier(0.16, 1, 0.3, 1) both 0.3s; }

.tel-pantalla {
  position: relative; border-radius: 37px; overflow: hidden; background: #ffffff;
  display: flex; flex-direction: column;
  /* La pantalla se separa del chasis en el eje Z: al inclinarse, el borde del
     marco pasa por delante y se ve el grosor del aparato. Eso es lo que hace
     que se lea como un objeto y no como una imagen inclinada. */
  transform: translateZ(14px);
}
/* Reflejo del cristal: se desplaza en contra de la inclinación, como haría una
   luz fija sobre un objeto que gira. `--gx/--gy` los escribe el mismo JS. */
.tel-marco::after {
  content: ""; position: absolute; inset: 0; border-radius: 46px;
  pointer-events: none; z-index: 3; transform: translateZ(20px);
  background: radial-gradient(
    58% 44% at calc(50% + var(--gx, 0px)) calc(0% + var(--gy, 0px)),
    rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 42%, transparent 68%);
  opacity: var(--glare, 0);
}
/* Las guías quedan pegadas al chasis en profundidad, no flotando aparte. */
.guias { transform: translateZ(6px); }
/* Isla dinámica. Va por encima de la barra de estado (z-index) y por eso la
   barra lleva 86px de hueco central repartido en su padding lateral. */
.tel-isla {
  position: absolute; z-index: 3; top: 9px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 23px; border-radius: 14px; background: #0d1416;
}
.tel-status {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 32px; padding: 9px 20px 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink);
}
.tel-ic { display: flex; align-items: center; gap: 5px; color: var(--ink); }
.tel-ic svg { fill: currentColor; }
.tel-ic-s { width: 15px; height: 10px; }
.tel-ic-w { width: 14px; height: 10px; }
.tel-ic-b { width: 22px; height: 10px; }
/* Barra indicadora de inicio, la de iOS. */
.tel-inicio {
  width: 118px; height: 4.5px; border-radius: 3px;
  background: rgba(22, 33, 31, 0.3); margin: 2px auto 8px; flex: none;
}

.tel-cab {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 12px; border-bottom: 1px solid var(--line);
}
.tel-av { width: 28px; height: 28px; border-radius: 50%; background: var(--signal); flex: none; }
.tel-cab-n { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.tel-cab-s { font-family: var(--font-sans); font-size: 10px; color: var(--sub); margin-top: 1px; }
/* "escribiendo…" en la cabecera: en WhatsApp el subtítulo cambia de "en
   línea" a "escribiendo…", y ese detalle es la mitad del realismo. */
.tel-cab-s.escribiendo { color: var(--signal); }

/* Tono real del fondo de chat de WhatsApp (#efeae2, un color -- eso no es
   de nadie) con una textura propia en vez del patrón de garabatos de Meta
   (esa sí es una obra protegida, y esta página es pública, a diferencia de
   la presentación interna donde se usó audio real de WhatsApp/Apple). La
   textura es puntos finos en Blueprint a muy baja opacidad, mismo lenguaje
   técnico del resto del sitio -- da profundidad y mejor contraste contra
   fotos sin copiar el arte de nadie. */
.tel-chat {
  /* Altura fija, no min+max: con un rango el teléfono crecía 40px al
     llegar la tercera burbuja y la columna entera saltaba. */
  height: 306px; overflow-y: auto; padding: 18px;
  background-color: #efeae2;
  background-image: radial-gradient(rgba(20, 48, 56, 0.06) 1px, transparent 1px);
  background-size: 14px 14px;
  display: flex; flex-direction: column; gap: 10px; justify-content: flex-end;
  scroll-behavior: smooth;
  /* La barra de scroll de serie rompe la ilusión de pantalla de teléfono. */
  scrollbar-width: none;
}
.tel-chat::-webkit-scrollbar { display: none; }

/* Separador de fecha de WhatsApp: píldora centrada, mono, en versalitas. */
.tel-fecha {
  align-self: center; flex: none; margin-bottom: 2px;
  padding: 4px 11px; border-radius: 8px; background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line); box-shadow: 0 1px 1px rgba(20, 48, 56, 0.05);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--sub);
}

.burbuja {
  /* color EXPLÍCITO a propósito: esta burbuja vive dentro de .hero, que
     define texto claro para su propio fondo oscuro. Sin esto, el texto
     del cliente heredaba ese color claro sobre un fondo blanco -- letras
     casi invisibles. Encontrado por Marcos probando la demo en vivo. */
  max-width: 82%; padding: 11px 14px; font-size: 14.5px; line-height: 1.4;
  color: var(--ink); flex: none;
  border-radius: 12px 12px 12px 3px; background: #ffffff; border: 1px solid var(--line);
  box-shadow: 0 1px 1px rgba(20, 48, 56, 0.06);
  opacity: 0; transform: translateY(12px) scale(0.94);
  /* El origen en la esquina de la "cola" hace que la burbuja crezca DESDE
     donde nace, no desde su centro. Es lo que la hace sentir emitida. */
  transform-origin: bottom left;
}
.burbuja--argo { transform-origin: bottom right; }
/* Rebote corto: pasa 1.2% de largo y vuelve. Sin ese sobrepaso la burbuja
   entra "administrativamente"; con él se lee como un mensaje que llega. */
@keyframes burbuja-entra {
  0%   { opacity: 0; transform: translateY(12px) scale(0.94); }
  62%  { opacity: 1; transform: translateY(-2px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.burbuja.entra { animation: burbuja-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.burbuja--argo {
  align-self: flex-end; background: var(--signal-fondo); color: var(--signal-ink);
  border-radius: 12px 12px 3px 12px; border-color: var(--signal);
}
.burbuja .hora { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; opacity: 0.65; }

/* ── Indicador de "escribiendo…": los tres puntos. Es lo que convierte una
   espera muerta de medio segundo en una espera que se ve trabajando. ── */
.tel-typing {
  align-self: flex-start; display: flex; align-items: center; gap: 5px;
  width: max-content; flex: none; padding: 13px 15px;
  background: #ffffff; border: 1px solid var(--line);
  border-radius: 12px 12px 12px 3px; box-shadow: 0 1px 1px rgba(20, 48, 56, 0.06);
  opacity: 0; transform: translateY(12px) scale(0.94); transform-origin: bottom left;
}
.tel-typing.entra { animation: burbuja-entra 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.tel-typing i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #9aa8a5;
  animation: typing-punto 1.15s ease-in-out infinite; }
.tel-typing i:nth-child(2) { animation-delay: 0.16s; }
.tel-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes typing-punto {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.42; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.tel-barra {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
}
.tel-input {
  flex: 1; min-width: 0; min-height: 38px; border-radius: 20px; border: 1px solid var(--line);
  background: #ffffff; padding: 9px 16px; font-size: 13.5px; color: var(--ink);
  font-family: var(--font-sans);
  transition: border-color 0.15s ease;
}
/* #9aa8a5 daba 2.47:1 sobre blanco — ilegible, y es la ÚNICA instrucción de
   cómo probar la demo, que es el argumento de venta de la página. #66787a
   da 4.63:1 (AA pide 4.5) y sigue leyéndose como placeholder. */
.tel-input::placeholder { color: #66787a; }
.tel-input:disabled { background: #f2f5f3; color: #9aa8a5; }
/* Un solo anillo. Con box-shadow Y outline a la vez salían dos aros teales
   concéntricos -- el campo se enfoca solo al arrancar la demo, así que el
   defecto estaba a la vista en cada carga. */
.tel-input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.tel-send {
  width: 38px; height: 38px; border-radius: 50%; border: none; flex: none;
  background: var(--signal-fondo); color: #fff; display: flex; align-items: center;
  justify-content: center; cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.tel-send svg { width: 16px; height: 16px; }
.tel-send:not(:disabled):hover { transform: scale(1.08); }
.tel-send:not(:disabled):active { transform: scale(0.92); }
.tel-send:disabled { opacity: 0.35; cursor: not-allowed; }

.tel-hint {
  margin: 18px 0 0; padding: 0 18px; font-size: 11.5px; color: var(--sub);
  text-align: center; font-family: var(--font-sans);
}
.hero .tel-hint { color: #8fb3ae; }
.tel-hint.oculto { display: none; }
.tel-reset {
  display: block; margin: 14px auto 0; padding: 8px 16px;
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.04em;
  background: none; border: 1px solid rgba(143, 179, 174, 0.45); border-radius: 20px;
  color: #8fb3ae; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease;
}
.tel-reset:hover { border-color: #5fd8c8; color: #5fd8c8; }

/* ── Cromado HUD del hero: rótulos mono en las cuatro esquinas. Es lo que
   hace que la sección se lea como un instrumento y no como una portada. ── */
.hero { position: relative; }
.hud {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(143, 179, 174, 0.45);
}
.hud-e { position: absolute; white-space: nowrap; opacity: 0; animation: hud-entra 0.9s ease forwards 0.7s; }
@keyframes hud-entra { to { opacity: 1; } }
/* El encabezado es position:fixed y mide --header-h; sin este desplazamiento
   los dos rótulos de arriba quedarían ocultos debajo de él. */
.hud-e--ai { top: calc(var(--header-h) + 16px); left: 28px; }
.hud-e--ad { top: calc(var(--header-h) + 16px); right: 28px; }
.hud-e--bi { bottom: 26px; left: 28px; }
.hud-e--bd { bottom: 26px; right: 28px; }
@media (max-width: 900px) { .hud { display: none; } }

/* Accesibilidad: motion-safe */
@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento: el teléfono se queda de frente y sin brillo. */
  .tel-marco { --rx: 0deg !important; --ry: 0deg !important; --lift: 0px !important; }
  .tel-marco::after { opacity: 0 !important; }
  .burbuja, .tel-typing, .tel-typing i, .tel-marco, .guia, .guia-n, .hud-e {
    animation: none !important; opacity: 1; transform: none;
  }
  /* La guía sin animación se queda en width:0 y no se vería nunca. */
  .guia { width: 82px; }
  .tel-chat { scroll-behavior: auto; }
  .tel-send:hover, .tel-send:active { transform: none; }
}

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .tel-marco { max-width: 320px; }
  /* Sin el tope en ch: a este ancho la columna ya está acotada por el
     padding del .wrap, y el ch aproximado (depende de la fuente) a veces
     dejaba una palabra pegada al borde. */
  .hero-sub { max-width: none; }
}

/* ── Diagrama de flujo -----------------------------------------------
   Sección clara, en contraste con el hero oscuro (mismo ritmo alterno que
   se ve en referencias del sector). Los nodos usan el mismo lenguaje de
   tarjeta de 1px que el resto del sistema -- nada de cajas con sombra. ── */
.camino {
  padding-block: 84px 96px;
  background: var(--bg);
}
.camino-h2 {
  font-family: var(--font-sans); font-weight: 400; font-size: clamp(26px, 3vw, 36px);
  color: var(--ink); margin: 0 0 52px; max-width: 32ch;
}

.diagrama {
  display: flex; align-items: center; gap: 0; flex-wrap: nowrap;
}
.dnodo {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--card);
  padding: 20px 22px; border-radius: 3px; flex: none; width: 190px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dnodo:hover {
  transform: translateY(-3px);
  border-color: var(--signal);
  box-shadow: 0 10px 24px -12px rgba(20,48,56,0.22);
}
.dnodo-fig {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--signal);
}
.dnodo-t { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.dnodo-s { font-family: var(--font-sans); font-size: 11.5px; color: var(--sub); }

.dnodo--centro { border-color: var(--signal); }
.dnodo--final { border-color: var(--signal); background: #f0f7f5; }

.dflecha {
  flex: 1 1 40px; min-width: 24px; height: 1px; background: var(--line-strong);
  position: relative;
}
.dflecha::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 6px solid var(--line-strong);
}

.dramas {
  display: flex; flex-direction: column; gap: 14px; flex: none;
}
.dnodo--rama { width: 190px; }

/* Las dos flechas especiales (bifurca / converge) son en realidad el mismo
   elemento .dflecha con el ::after apuntando -- se dejan simples a
   propósito: dos rectas con leve separación en vez de un SVG de bifurcación
   dibujado, más legible a este tamaño de tarjeta. */

@media (max-width: 980px) {
  .diagrama { flex-direction: column; align-items: stretch; gap: 18px; }
  .dnodo, .dnodo--rama { width: 100%; }
  .dflecha { width: 1px; height: 28px; align-self: center; }
  .dflecha::after {
    right: 50%; top: auto; bottom: 0; transform: translateX(50%) rotate(90deg);
  }
  .dramas { flex-direction: row; gap: 14px; }
  .dramas .dnodo--rama { width: 100%; }
}
@media (max-width: 560px) {
  .dramas { flex-direction: column; }
}

/* ── Footer -- en TODAS las páginas y landings (pedido de Marcos, 29/08). ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.site-footer {
  background: var(--blueprint); color: #cfe3df; padding-block: 64px 28px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.3fr 0.8fr 1fr; gap: 56px;
}
.footer-col-tit {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #5fd8c8; margin: 0 0 18px;
}
.footer-marca .marca-tipo { color: #f4f8f7; }
.footer-marca .marca-tipo small { color: #8fb3ae; }
.footer-blurb { font-size: 14.5px; color: #a9c4bf; max-width: 34ch; margin: 18px 0 20px; }
.footer-contacto {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 14px; color: #dcece8; text-decoration: none;
}
.footer-contacto svg { width: 16px; height: 16px; flex: none; color: #5fd8c8; }
.footer-contacto:hover { color: #5fd8c8; }

.footer-links { display: flex; flex-direction: column; }
.footer-links a {
  display: block; color: #a9c4bf; text-decoration: none; font-size: 14.5px;
  padding: 6px 0; transition: color 0.15s ease;
  position: relative; width: fit-content;
}
.footer-links a::after {
  content: ''; position: absolute; left: 0; bottom: 3px; height: 1px; width: 0;
  background: #5fd8c8; transition: width 0.25s ease;
}
.footer-links a:hover { color: #5fd8c8; }
.footer-links a:hover::after { width: 100%; }

.footer-news-sub { font-size: 13.5px; color: #a9c4bf; margin: 0 0 16px; }
.footer-news-aviso {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: #b7cbc7;
}
.footer-news-aviso a { color: #5fd8c8; font-weight: 600; }
.footer-news-form { display: flex; gap: 0; border: 1px solid rgba(233,241,239,0.22); border-radius: 3px; overflow: hidden; }
.footer-news-form input {
  flex: 1; min-width: 0; background: rgba(233,241,239,0.06); border: none;
  padding: 12px 14px; color: #f4f8f7; font-family: var(--font-sans); font-size: 14px;
}
.footer-news-form input::placeholder { color: #7c9995; }
.footer-news-form input:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.footer-news-form button {
  flex: none; background: var(--signal-fondo); color: #fff; border: none;
  padding: 0 18px; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px;
  cursor: pointer; transition: background-color 0.15s ease;
}
.footer-news-form button:hover { background: #197a6d; }

.footer-legal {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(233,241,239,0.14);
  font-family: var(--font-sans); font-size: 12px; color: #7c9995;
}

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

/* ── Ficha flotante -- mismo patrón que la referencia, en el lenguaje del
   sistema (tarjeta de 1px, sin sombra decorativa de más). ── */
.ficha-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 280px; background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 4px; padding: 18px 20px 20px;
  box-shadow: 0 18px 40px -14px rgba(20,48,56,0.28);
}
.ficha-cerrar {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px;
  border: none; background: none; color: var(--sub); font-size: 14px;
  cursor: pointer; line-height: 1;
}
.ficha-cerrar:hover { color: var(--ink); }
.ficha-tit { font-weight: 600; font-size: 14.5px; color: var(--ink); margin: 0 0 4px; }
.ficha-sub { font-size: 13px; color: var(--sub); margin: 0 0 14px; }
.ficha-tel {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--signal); font-weight: 600; font-size: 15px;
}
.ficha-tel svg { width: 18px; height: 18px; }
.ficha-flotante.oculta { display: none; }
@media (max-width: 480px) {
  .ficha-flotante { left: 16px; right: 16px; width: auto; bottom: 16px; }
}

/* ── Animaciones y transiciones -- pedido de Marcos (29/08). Revelado al
   entrar en pantalla (una sola vez, no en bucle) + transiciones de hover en
   todo lo interactivo. Respeta prefers-reduced-motion: si el sistema lo
   pide, el JS marca todo visible de una vez sin animar nada. ── */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Escalonado dentro de un grupo -- cada hijo entra un poco después del
   anterior, en vez de todos a la vez (se ve como una sola pieza inerte). */
[data-reveal-group] > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group] > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group] > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-group] > *:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none !important; }
}

/* Entrada de la ficha flotante -- antes aparecía de golpe con display:none
   → block; ahora se desliza y aparece. */
.ficha-flotante {
  animation: ficha-entra 0.5s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: 0.6s;
}
@keyframes ficha-entra {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ficha-flotante { animation: none; }
}

/* ══════════════════ Nav del header ══════════════════ */
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  font-size: 14px; color: #cfe3df; text-decoration: none;
  transition: color 0.15s ease;
}
.site-header.on-light .site-nav a { color: var(--sub); }
.site-nav a:hover { color: #5fd8c8; }
.site-header.on-light .site-nav a:hover { color: var(--signal); }
@media (max-width: 980px) { .site-nav { display: none; } }

/* ══════════════════ Hero: badge, frase rotativa, stats ══════════════════ */
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  border: 1px solid rgba(95,216,200,0.35); border-radius: 20px; padding: 7px 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: #9fc3bd;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd8c8; flex: none; }

.hero-typewriter {
  min-height: 26px; margin: 14px 0 0; font-family: var(--font-mono);
  font-size: 15.5px; color: #e28a5c;
}
.hero-type-caret {
  display: inline-block; width: 2px; height: 15px; background: #e28a5c;
  margin-left: 2px; vertical-align: -2px; animation: type-parpadeo 0.9s steps(1) infinite;
}
@keyframes type-parpadeo { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-type-caret { animation: none; } }

.hero-stats {
  display: flex; gap: 0; margin: 40px 0 8px;
  border: 1px solid rgba(233,241,239,0.14); border-radius: 4px; overflow: hidden;
  max-width: 560px;
}
.hero-stat {
  flex: 1; padding: 18px 14px; text-align: center;
  border-left: 1px solid rgba(233,241,239,0.14);
}
.hero-stat:first-child { border-left: none; }
.hero-stat strong {
  display: block; font-family: var(--font-sans); font-weight: 600; font-size: 21px;
  color: #5fd8c8; margin-bottom: 3px;
}
.hero-stat span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em;
  color: #8fb3ae; text-transform: uppercase; line-height: 1.35; display: block;
}
@media (max-width: 860px) {
  .hero-stats,   .hero-stats { flex-wrap: wrap; }
  .hero-stat { flex: 1 1 50%; border-left: none; border-top: 1px solid rgba(233,241,239,0.14); }
  .hero-stat:nth-child(1), .hero-stat:nth-child(2) { border-top: none; }
}

/* ══════════════════ Preguntas frecuentes ══════════════════ */
.preguntas { padding-block: 96px 100px; background: var(--blueprint); color: #e9f1ef; }
.preguntas-h2 {
  font-family: var(--font-sans); font-weight: 400; font-size: clamp(26px, 3vw, 36px);
  color: #f4f8f7; margin: 0 0 44px; max-width: 40ch;
}
.pregunta { border: 1px solid rgba(233,241,239,0.16); background: #0d2126; margin-bottom: 10px; }
.pregunta-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; background: none; border: none; padding: 20px 22px; cursor: pointer;
  font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; color: #e9f1ef; text-align: left;
}
.pregunta-icono {
  flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  color: #5fd8c8; font-size: 18px; transition: transform 0.2s ease;
}
.pregunta[data-abierta] .pregunta-icono { transform: rotate(45deg); }
.pregunta-resp {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
}
.pregunta-resp p { margin: 0; padding: 0 22px 22px; font-size: 14.5px; color: #b7cbc7; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .pregunta-icono, .pregunta-resp { transition: none; } }

/* ── La cadena: agente de IA → contrato → comisión ──
   Una sola tarjeta que cambia de proporción mientras el interior se redibuja.
   Las proporciones son el truco: alto y angosto se lee como documento, bajo y
   ancho se lee como billete. Si fueran tres iconos del mismo tamaño
   turnándose, se leería como un carrusel y no como una transformación.

   Ciclo de 9s: 3s por etapa. Se anima x/y/width/height, que en SVG son
   propiedades geométricas animables por CSS en los navegadores actuales. */
.cadena { margin: 40px 0 0; text-align: center; }
.cadena-svg { width: 100%; max-width: 190px; height: auto; }

.cad-caja {
  fill: none; stroke: var(--ink); stroke-width: 0.5;
  animation: cad-caja 9s ease-in-out infinite;
}
@keyframes cad-caja {
  0%, 26%   { x: 7px;   y: 5px; width: 10px; height: 9px;  rx: 2px; }
  33%, 59%  { x: 6px;   y: 3px; width: 12px; height: 18px; rx: 1px; }
  66%, 92%  { x: 3px;   y: 7px; width: 18px; height: 10px; rx: 1.5px; }
  100%      { x: 7px;   y: 5px; width: 10px; height: 9px;  rx: 2px; }
}

.cad-tz {
  fill: none; stroke: var(--ink); stroke-width: 0.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.cad-signal { stroke: var(--signal); }
.cad-lleno { fill: var(--ink); stroke: none; }

/* Cada etapa aparece solo en su tercio del ciclo. */
.cad-et { opacity: 0; animation: cad-et 9s ease-in-out infinite; }
.cad-et-2 { animation-delay: 3s; }
.cad-et-3 { animation-delay: 6s; }
@keyframes cad-et {
  0%, 2%    { opacity: 0; }
  8%, 28%   { opacity: 1; }
  33%, 100% { opacity: 0; }
}

.cadena-pies {
  display: flex; justify-content: center; gap: 26px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink);
}
.cad-pie { opacity: 0.28; transition: opacity 0.3s ease; animation: cad-pie 9s ease-in-out infinite; }
.cad-pie-2 { animation-delay: 3s; }
.cad-pie-3 { animation-delay: 6s; }
@keyframes cad-pie {
  0%, 2%    { opacity: 0.28; }
  8%, 28%   { opacity: 1; }
  33%, 100% { opacity: 0.28; }
}

/* Sin animación: se muestran las tres etapas encimadas no -- se deja la
   última, que es la que importa, y los tres pies legibles. */
@media (prefers-reduced-motion: reduce) {
  .cad-caja, .cad-et, .cad-pie { animation: none; }
  .cad-caja { x: 3px; y: 7px; width: 18px; height: 10px; }
  .cad-et-1, .cad-et-2 { opacity: 0; }
  .cad-et-3 { opacity: 1; }
  .cad-pie { opacity: 1; }
}

/* ── Volver a The Lab RE ─────────────────────────────────────────────────
   Se lee como parte de la navegación, no como un botón: es una salida, no
   una acción. En móvil el resto de la nav se esconde pero esta se queda,
   porque es justo donde más falta hace no quedar encerrado. */
.site-nav a.volver-lab {
  white-space: nowrap;
  display: inline-flex; align-items: center;
  border: 1px solid rgba(95,216,200,0.30); border-radius: 20px;
  padding: 6px 14px; font-size: 13px; color: #9fc3bd;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.site-nav a.volver-lab:hover {
  color: #eafaf7; border-color: #5fd8c8; background: rgba(95,216,200,0.10);
}
.site-header.on-light .site-nav a.volver-lab {
  border-color: rgba(31,143,128,0.30); color: var(--sub);
}
.site-header.on-light .site-nav a.volver-lab:hover {
  color: var(--signal); border-color: var(--signal); background: rgba(31,143,128,0.07);
}
/* Separa la salida de los saltos dentro de la página. */
.nav-sep {
  width: 1px; height: 16px; background: currentColor; opacity: .18; flex: none;
}
/* La nav entera se esconde bajo 980, pero la salida no puede esconderse:
   es justo en móvil donde quedarse encerrado molesta más. */
@media (max-width: 980px) {
  .site-nav { display: flex !important; }
  .site-nav a:not(.volver-lab), .nav-sep { display: none; }
}


/* El aviso honesto al cerrar el demo. Va DENTRO de la burbuja de Argo pero
   se lee como pie, no como parte de lo que "dice" el bot: el personaje ya
   se rompió en la frase anterior y esto es la web hablando. */
.burbuja--argo .tel-nota {
  display: block;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(20, 48, 56, .14);
  font-size: 11px;
  line-height: 1.45;
  color: #5E7384;
}