/* ============================================================================
   SABNU — Sistema operativo de IA para pymes
   Design system: design-system/sabnu/MASTER.md
   Fuente de verdad de color: brief de marca. No editar tokens sin actualizar
   MASTER.md y volver a correr contrast.py.
   ========================================================================== */

/* ---------------------------------------------------------- 0. TIPOGRAFÍAS
   Autoalojadas: la CSP del sitio es `default-src 'self'` sin excepciones, así
   que un @import a fonts.googleapis.com queda bloqueado y la página cae a las
   fuentes del sistema. Los archivos son los mismos que Google sirve, servidos
   desde este dominio.

   Inter y Space Grotesk ya vivían en /Assets/FONTS/ porque las usan las
   páginas legales y las de acceso: se reutilizan tal cual para que el visitante
   que salta de la portada a /privacidad.html no vuelva a descargarlas.
   JetBrains Mono se añadió ahí por lo mismo — un solo directorio de fuentes.

   Los rangos de peso son los declarados por Google para cada archivo variable;
   el de JetBrains Mono es el archivo variable completo: el @import original pedía sólo
   400 y 500, pero .paso-n y .pan-name piden 600 y con ese build se falseaba. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/Assets/FONTS/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/Assets/FONTS/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/Assets/FONTS/spacegrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/Assets/FONTS/spacegrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/Assets/FONTS/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/Assets/FONTS/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ------------------------------------------- 0b. LO QUE ERA style=""
   La CSP del sitio es `style-src 'self'` sin 'unsafe-inline', y eso alcanza
   también a los atributos style= del marcado: el navegador los descarta sin
   avisar. Todo lo que antes iba en línea vive aquí.

   Ojo: esto NO afecta al JavaScript. `el.style.setProperty(...)` es CSSOM y
   la CSP no lo toca, así que los bloques de main.js que mueven --k, --p,
   --bar-h o el transform del tilt siguen funcionando igual. */

/* El sprite de <symbol> no debe ocupar sitio en el flujo. */
.sprite { position: absolute; }

/* Segundo botón del cajón móvil, separado del primero. */
.drawer .drawer-2 { margin-top: 10px; }

/* Candado de la barra de direcciones de la réplica: más pequeño que el resto
   de iconos del marco. */
.app-url-ico { width: 11px; height: 11px; }

/* El punto de la nota del panel, en cian de acción. */
.app-note .d-cy { background: var(--p-cy); }

/* Valor de partida de la barra del agente. El bloque 10 de main.js la lleva
   de aquí hasta el 100%; este 40% es lo que se ve sin JavaScript. */
#agProg { --p: 40%; }

/* Dispersión de las nueve herramientas de «El problema».
   --tx/--ty van SIN unidad: los multiplica --u en la regla .tool. El anillo
   llega a 432 en horizontal y 248 en vertical, que son justo los dos números
   con los que están calculados los divisores de --u; si mueves una ficha más
   lejos que eso, revisa esa regla. El JavaScript no cuenta las fichas: las
   busca con $$('.tool'), así que añadir o quitar una es editar el HTML y
   añadir aquí su pareja de coordenadas. */
.tool[data-tool="pasarela"]   { --tx: -110; --ty: -228; }
.tool[data-tool="excel"]      { --tx: 128; --ty: -246; }
.tool[data-tool="whatsapp"]   { --tx: -368; --ty: -112; }
.tool[data-tool="nequi"]      { --tx: 352; --ty: -146; }
.tool[data-tool="libreta"]    { --tx: -432; --ty: 48; }
.tool[data-tool="microsoft"]  { --tx: 415; --ty: 26; }
.tool[data-tool="instagram"]  { --tx: -262; --ty: 196; }
.tool[data-tool="hubspot"]    { --tx: 292; --ty: 174; }
.tool[data-tool="salesforce"] { --tx: 18; --ty: 248; }

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* --- Marca ---
     #0ef es el color de acción. Es tan luminoso (L=0.68) que el texto blanco
     encima da 1.43:1: ilegible. Por eso lo que va SOBRE el cian usa --cy-ink. */
  --cy:        #00eeff;
  --cy-lit:    #57f4ff;
  --cy-deep:   #0088a0;
  --cy-glow:   #b3fcff;
  --cy-ink:    #04191c;   /* el valor exacto del :root de app.sabnu.ai */

  /* --- Fondos --- */
  --bg:        #0a0e14;
  --bg-deep:   #0f141c;
  --bg-deeper: #070a0f;
  --d-surf:    #101620;
  --d-sunk:    #0b1017;
  --ring-in:   #111721;

  /* --- Texto --- */
  --w:        #ffffff;
  --muted:    rgba(255,255,255,.78);
  --muted-2:  rgba(255,255,255,.64);
  --muted-3:  rgba(255,255,255,.54);

  /* --- Líneas (DECORATIVAS) --- */
  --line:   rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);
  --line-3: rgba(255,255,255,.05);

  /* --- Acentos --- */
  --a-indigo: #a5b4fc;
  --a-blue:   #7cb2fb;
  --a-violet: #c9a6fd;
  --a-green:  #5ee79a;

  /* --- Medidas de la cabecera -------------------------------------------
     --nav-h   alto del menú.
     --bar-h   alto real del aviso superior; lo mide el JS y lo reescribe aquí,
               así que aguanta que el texto se parta en dos líneas. El valor de
               abajo es sólo el de arranque, para que no haya salto antes de
               que corra el JS.
     --bar-off cuánto se ha ido ya el aviso hacia arriba con el scroll: va de 0
               a --bar-h y de él cuelga el desplazamiento del menú. */
  --nav-h:   72px;
  --bar-h:   52px;
  --bar-off:  0px;

  /* El relleno vertical de las secciones. En una variable porque el salto por
     ancla necesita descontarlo (ver `scroll-margin-top` más abajo). */
  --sec-pad: clamp(56px, 8vw, 100px);

  /* --- Estado --- */
  --bad:  #bd3243;
  --warn: #c2851f;   /* ámbar de "próximamente": 5.5:1 sobre las superficies oscuras (AA) */

  /* --- Capa semántica auditable por contrast.py --------------------------
     Ojo: --color-border es FUNCIONAL (3:1 SC 1.4.11). Para separadores
     decorativos usar --line / --color-separator. No colapsarlos. */
  --color-background:        #0a0e14;
  --color-foreground:        #ffffff;
  --color-card:              #101620;
  --color-card-foreground:   #ffffff;
  --color-muted:             #151c26;
  --color-muted-foreground:  #c9cacb;
  --color-primary:           #00eeff;
  --color-on-primary:        #04222c;
  --color-secondary:         #101620;
  --color-on-secondary:      #ffffff;
  --color-accent:            #00eeff;
  --color-on-accent:         #04222c;
  --color-destructive:       #bd3243;
  --color-on-destructive:    #ffffff;
  --color-border:            #5b6b73;
  --color-separator:         rgba(255,255,255,.07);
  --color-ring:              #00eeff;

  /* --- Espaciado / ritmo --- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  --r-sm: 8px;  --r: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  --wrap: 1200px;
  --wrap-wide: 1400px;
  --gutter: clamp(20px, 5vw, 48px);

  /* --- Motion --- */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-in:   cubic-bezier(.7, 0, .84, 0);
  --e-io:   cubic-bezier(.65, 0, .35, 1);
  --t-press: 120ms;
  --t-micro: 160ms;
  --t-in:    280ms;
  --t-out:   180ms;
  --t-panel: 450ms;

  /* --- Sombras: en dark, la profundidad la dan bordes + superficies --- */
  --sh-1: 0 1px 0 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.8);
  --sh-2: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 24px 60px -24px rgba(0,0,0,.9);
  --sh-cy: 0 0 0 1px rgba(0,238,255,.3), 0 10px 34px -14px rgba(0,238,255,.55);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera medía 125px y aquí había 96 fijos: al saltar desde el menú,
     los primeros 29px de la sección quedaban TAPADOS por la barra. Ahora se
     calcula con las mismas variables que la cabecera, así que se corrige sola
     si el aviso se retira con el scroll (--bar-off) o se cierra (--bar-h: 0). */
  scroll-padding-top: calc(var(--nav-h) + var(--bar-h) - var(--bar-off));
}

body {
  background: var(--bg);
  color: var(--w);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:where(h1,h2,h3,h4,h5,h6) { font-weight: 600; line-height: 1.1; }

::selection { background: var(--cy); color: #fff; }

/* Foco: visible en todo, en un solo sitio. */
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-deeper); }
::-webkit-scrollbar-thumb {
  background: #1c2530; border-radius: 99px;
  border: 3px solid var(--bg-deeper);
}
::-webkit-scrollbar-thumb:hover { background: #2b3946; }

/* ------------------------------------------------- 3. REDUCED MOTION (global)
   Segunda red de seguridad: cubre transiciones CSS y todo lo que el JS no vea. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-child, .reveal-child > * { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------- 4. TIPOGRAFÍA */
.display, h1, h2 { font-family: 'Space Grotesk', 'Inter', sans-serif; }

.display {
  font-size: clamp(1.6rem, 2.35vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -.038em;
  line-height: 1.04;
}
/* El estilo de titular de sección, uno solo para las nueve. Sale del diseño
   de referencia de «Enciendes una cosa»: grande, en negrita, interlínea corta
   y tracking cerrado. La palabra marcada con <em> va en cian. */
.h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4.3vw, 3.4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
}
.h2 em { font-style: normal; color: var(--cy); }
.h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.25;
      font-family: 'Space Grotesk', sans-serif; }

.lede  { font-size: clamp(.94rem, 1.15vw, 1.08rem); line-height: 1.55; color: var(--muted); font-weight: 400; }
.body  { color: var(--muted-2); }
.small { font-size: .875rem; line-height: 1.55; color: var(--muted-2); }
.tiny  { font-size: .75rem; line-height: 1.5; color: var(--muted-3); }

.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  letter-spacing: .06em;
}

/* Ya no hay rótulos de sección: esto sólo viste el «— CREAR CON CHAT» que
   aparece DENTRO de la réplica del panel, porque así se ve la app de verdad. */
.app-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cy-lit);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.app-kicker::before {
  content: '';
  width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cy-lit));
}



/* --------------------------------------------------------- 5. LAYOUT */
.wrap  { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }

section { position: relative; z-index: 1; }

/* Al saltar desde el menú, lo que debe quedar bajo la cabecera es el TITULAR,
   no los 100px de relleno vacío de la sección. Ese relleno se descuenta aquí,
   dejando ~40px de respiro: 22 (margen del h2 con signo cambiado) menos el
   relleno. Sale el mismo hueco en escritorio y en móvil, porque las dos
   piezas del cálculo escalan juntas. */
section.sec[id] { scroll-margin-top: calc(22px - var(--sec-pad)); }
header, .drawer, .topbar { z-index: 900; }
/* 140px arriba y abajo era demasiado aire; con 100 la página respira
   igual y se lee más compacta. */
.sec { padding-block: var(--sec-pad); }

.sec-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .h2 { margin-top: 18px; }
.sec-head .lede { margin-top: 20px; }
.sec-head--center { margin-inline: auto; text-align: center; }

.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}


/* Grano fino sobre todo el documento: quita el look "plano de CSS" */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ===================================================== 6. REVELADOS (scroll)
   Tres gestos distintos, no uno repetido veinte veces. Sin JS el contenido
   queda visible: la clase .reveal sólo la añade el script (ver main.js). */

/* Bloques: recorrido corto y un desenfoque que se resuelve. Se siente más
   caro que subir 18px, y cuesta lo mismo porque va al compositor. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  filter: blur(6px);
  transition: opacity .7s var(--e-out), transform .7s var(--e-out), filter .7s var(--e-out);
  will-change: opacity, transform, filter;
}
.js .reveal.is-in { opacity: 1; transform: none; filter: none; will-change: auto; }

/* Rejillas: escalonado real por posición del hijo, con un pelín de escala. */
.js .reveal-child > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.985);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js .reveal-child.is-in > * { opacity: 1; transform: none; }

/* Titulares: el texto no aparece, se DESTAPA. Un barrido de izquierda a
   derecha mientras la línea sube.

   Con clip-path y no con una máscara sobre variable: mask-image no se puede
   transicionar, y hacerlo con una propiedad registrada dejaba el barrido
   pegado en 0% (comprobado en el navegador: no se movía al entrar en
   pantalla). clip-path sí se anima nativo, no necesita nada registrado, y el
   corte limpio se ve mejor que el degradado. */
.js .sec-head .h2,
.js .sec-head .lede {
  clip-path: inset(0 100% 0 0);
  transform: translate3d(0, 14px, 0);
  transition: clip-path .85s var(--e-out), transform .8s var(--e-out);
}
.js .sec-head.is-in .h2,
.js .sec-head.is-in .lede { clip-path: inset(0 -6% 0 0); transform: none; }
.js .sec-head.is-in .lede { transition-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-child > *,
  .js .sec-head .h2, .js .sec-head .lede { transition: none; filter: none; }
  .js .sec-head .h2, .js .sec-head .lede { clip-path: none; transform: none; }
}

/* ======================================================== 7. BOTONES */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--w);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  min-height: 48px;
  border-radius: var(--r-full);
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  isolation: isolate;
  overflow: hidden;
  white-space: nowrap;
  transition: transform var(--t-micro) var(--e-out),
              background-color var(--t-micro) var(--e-out),
              border-color var(--t-micro) var(--e-out),
              box-shadow var(--t-micro) var(--e-out);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
}
.btn:active { transition-duration: var(--t-press); transform: translate3d(var(--mx,0px), var(--my,0px), 0) scale(.975); }

.btn-primary {
  --btn-bg: var(--cy);
  --btn-fg: var(--cy-ink);
  font-weight: 650;
  box-shadow: var(--sh-cy);
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120px 60px at var(--px, 50%) var(--py, 50%),
              rgba(255,255,255,.6), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-micro) var(--e-out);
}
.btn-primary:hover { --btn-bg: var(--cy-lit); }
.btn-primary:hover::before { opacity: 1; }

.btn-ghost {
  --btn-fg: var(--w);
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }

.btn-quiet { --btn-fg: var(--muted); padding: 10px 14px; min-height: 40px; }
.btn-quiet:hover { --btn-fg: var(--w); }

.btn-lg { padding: 17px 30px; min-height: 56px; font-size: 1rem; }
.btn-block { width: 100%; }

.btn .ico { width: 17px; height: 17px; flex: none; transition: transform var(--t-micro) var(--e-out); }
.btn:hover .ico-arrow { transform: translateX(3px); }

/* ================================================= 8. SUPERFICIES / CARDS */
.card {
  position: relative;
  background: var(--d-surf);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 30px);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t-in) var(--e-out), transform var(--t-in) var(--e-out);
}
.card::before {
  /* hairline superior: da el borde "de cristal" en oscuro */
  content: '';
  position: absolute; inset-inline: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

/* Spotlight de cursor. Las coords las escribe main.js en --px/--py. */
.card-lit::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--px, -100%) var(--py, -100%),
              rgba(0,238,255,.12), transparent 62%);
  opacity: 0;
  transition: opacity var(--t-in) var(--e-out);
}
.card-lit:hover::after,
.card-lit:focus-within::after { opacity: 1; }
.card-lit:hover { border-color: rgba(255,255,255,.16); }


/* ================================================== 9. CHIPS / BADGES */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: rgba(255,255,255,.03);
  font-family: 'JetBrains Mono', monospace;
  font-size: .69rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot-live { background: var(--a-green); box-shadow: 0 0 0 3px rgba(94,231,154,.16); }

/* El estado nunca se comunica sólo con color: siempre lleva texto al lado. */
.status { display: inline-flex; align-items: center; gap: 7px; }
.status .mono { color: var(--muted-3); }

/* ======================================================== 10. BOOT SCREEN */
#boot {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-deeper);
  display: grid; place-items: center;
  transition: opacity 420ms var(--e-in), visibility 0ms linear 420ms;
}
#boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner { width: min(380px, 82vw); text-align: left; }
.boot-mark { display: flex; align-items: center; margin-bottom: 30px; }
.boot-mark .logo { height: 46px; filter: drop-shadow(0 0 22px rgba(0,238,255,.35)); }
.boot-bar { height: 2px; background: var(--ring-in); border-radius: 2px; overflow: hidden; }
.boot-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--cy), var(--cy-glow));
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms linear;
}
.boot-log {
  margin-top: 14px; height: 1.2em;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  letter-spacing: .05em; color: var(--muted-3);
}
.boot-skip {
  margin-top: 26px;
  font-family: 'JetBrains Mono', monospace; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-3);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
}
.boot-skip:hover { color: var(--w); }
/* Sin JS o con reduced-motion nunca debe tapar la página. */
.no-js #boot { display: none; }
@media (prefers-reduced-motion: reduce) { #boot { display: none; } }

/* =========================================================== 11. NAV */
/* El menú arranca justo debajo del aviso (--bar-h) y sube con el scroll a la
   vez que él (--bar-off), hasta quedar pegado arriba. Las dos variables las
   escribe el bloque 'aviso' del JS; sin JS valen su valor por defecto y todo
   queda en su sitio igual. El desplazamiento va por transform y no por top,
   para no recalcular la posición en cada fotograma del scroll; top sí se
   transiciona, pero sólo cambia al cerrar el aviso. */
.nav {
  position: fixed; inset-inline: 0; z-index: 900;
  top: var(--bar-h, 0px);
  transform: translate3d(0, calc(-1 * var(--bar-off, 0px)), 0);
  transition: background-color var(--t-in) var(--e-out),
              border-color var(--t-in) var(--e-out),
              backdrop-filter var(--t-in) var(--e-out);
  /* Sin transicionar `top`: la guía de movimiento lo prohíbe explícitamente
     porque obliga a recalcular disposición en cada fotograma. Al cerrar el
     aviso el menú salta a su sitio, que además es lo correcto: no es un
     movimiento del que el visitante tenga que aprender nada. */
  border-bottom: 1px solid transparent;
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
.nav.stuck {
  background: rgba(10,14,20,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.nav-in {
  display: flex; align-items: center; gap: var(--sp-6);
  height: var(--nav-h);
  max-width: var(--wrap-wide); margin-inline: auto;
  padding-inline: var(--gutter);
}
.brand { display: flex; align-items: center; flex: none; border-radius: var(--r-sm); }
/* El lockup es el PNG original de marca (assets/img/logo.png), con
   transparencia. width/height van en el HTML para que no haya salto de layout. */
.logo { height: 52px; width: auto; }
.brand .logo { transition: filter var(--t-in) var(--e-out); }
.brand:hover .logo { filter: drop-shadow(0 0 14px rgba(0,238,255,.45)); }
@media (max-width: 520px) { .logo { height: 40px; } }

.nav-links {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 4px; margin-inline: auto;
}
.nav-link { white-space: nowrap; }
.nav-link {
  position: relative;
  padding: 9px 14px;
  font-size: .89rem; font-weight: 500;
  color: var(--muted-2);
  border-radius: var(--r-sm);
  transition: color var(--t-micro) var(--e-out), background-color var(--t-micro) var(--e-out);
}
.nav-link:hover { color: var(--w); background: rgba(255,255,255,.05); }
.nav-link[aria-current="true"] { color: var(--w); }
.nav-link[aria-current="true"]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 1px; background: var(--cy-lit);
}
.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }

/* Barra de progreso de lectura: "cuánto falta" */
.nav-prog {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--cy), var(--cy-glow));
  transform: scaleX(var(--p, 0)); transform-origin: left;
  opacity: 0; transition: opacity var(--t-in) var(--e-out);
}
.nav.stuck .nav-prog { opacity: 1; }

/* Columna flex, no grid: en grid las filas se estiran y las barras no se
   cruzan al formar la X. */
.burger {
  display: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  flex-direction: column; align-items: center; justify-content: center;
}
.burger:hover { background: rgba(255,255,255,.06); }
.burger span { display: block; width: 19px; height: 1.5px; background: var(--w); border-radius: 2px;
               transition: transform var(--t-in) var(--e-out), opacity var(--t-out) var(--e-out); }
.burger span + span { margin-top: 5px; }
.nav.open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.open .burger span:nth-child(2) { opacity: 0; }
.nav.open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  /* Colgaba de un 72px escrito a mano, que no cuadraba con los 64px del menú
     en móvil: el panel abría 8px por debajo. Ahora sigue al menú de verdad. */
  position: fixed;
  inset: calc(var(--bar-h, 0px) - var(--bar-off, 0px) + var(--nav-h)) 0 0;
  z-index: 899;
  background: rgba(7,10,15,.97);
  backdrop-filter: blur(20px);
  padding: var(--sp-6) var(--gutter) var(--sp-8);
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; visibility: hidden;
  transform: translate3d(0,-10px,0);
  transition: opacity var(--t-out) var(--e-in), transform var(--t-out) var(--e-in), visibility 0ms linear var(--t-out);
  overflow-y: auto;
}
.nav.open + .drawer, .drawer.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-in) var(--e-out), transform var(--t-in) var(--e-out), visibility 0ms;
}
.drawer a.nav-link { font-size: 1.15rem; padding: 15px 4px; border-bottom: 1px solid var(--line-3); border-radius: 0; }
.drawer .btn { margin-top: var(--sp-5); }

@media (max-width: 1100px) {
  :root { --nav-h: 64px; }
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-cta { margin-left: auto; }
  .nav-cta .btn-ghost { display: none; }
  /* El CTA del header se comprime: el botón grande vive en el drawer. */
  .nav-cta .btn-primary { padding: 10px 16px; min-height: 40px; font-size: .85rem; }
  .nav-in { gap: var(--sp-4); }
}
@media (max-width: 520px) {
  .nav-cta .btn-primary { display: none; }
  .drawer { inset-block-start: 64px; }
}

/* ============================================================ 12. HERO */
.hero {
  position: relative;
  min-height: 0;
  display: flex; align-items: center;
  padding-top: calc(clamp(100px, 11vh, 128px) + var(--bar-h, 0px));
  padding-bottom: clamp(52px, 6vh, 88px);
  overflow: hidden;
}

/* Capa 1: canvas de constelación (lo dibuja main.js) */
#mesh {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: .85;
}

/* Capa 2: retícula técnica + halo. Puro CSS, sin coste de JS. */
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 85% at 50% 32%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 85% at 50% 32%, #000 20%, transparent 72%);
}
.hero-halo {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: -8%;
  width: min(1150px, 128vw); aspect-ratio: 1;
  translate: -50% 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(0,238,255,.42) 0%, rgba(0,238,255,.096) 32%, transparent 62%);
  filter: blur(26px);
}
.hero-fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg) 88%);
}

/* Dos columnas: el producto entra en pantalla junto al titular, no debajo. */
.hero-in {
  position: relative; z-index: 2; width: 100%;
  /* 505 y no 430: con el titular ya pequeño, a 430 la primera frase se
     partía y dejaba «panel.» solo en una línea. */
  display: grid; grid-template-columns: minmax(0, 505px) minmax(0, 1fr);
  gap: clamp(30px, 3.4vw, 60px);
  align-items: center;
}
.hero-copy { max-width: none; }
.hero-app { min-width: 0; }
.hero-app .app { margin-top: 0; }
@media (max-width: 1180px) {
  .hero-in { grid-template-columns: 1fr; gap: clamp(34px, 5vw, 52px); }
  .hero-copy { max-width: 720px; }
}

/* ============================================ AVISO SUPERIOR (topbar)
   Franja cian por encima del menú. Es la pieza más clara de la página, así
   que el texto va en --cy-ink (el mismo tono que usa el botón primario) y no
   en blanco, que sobre cian da 1.43:1 y sería ilegible. */
.topbar {
  position: fixed; inset-inline: 0; top: 0; z-index: 950;
  transform: translate3d(0, calc(-1 * var(--bar-off, 0px)), 0);
  background: linear-gradient(92deg, var(--cy-lit), var(--cy) 46%, var(--cy-deep) 165%);
  color: var(--cy-ink);
  box-shadow: 0 10px 34px -18px rgba(0,238,255,.75);
}
/* Sin JS la barra se queda fija igual que con JS: si pasara al flujo, al
   bajar dejaría un hueco bajo el menú, que va fijo a --bar-h. La ✕ se
   esconde: sin JS no cierra nada y un botón que no hace nada estorba. */
.no-js .topbar { transform: none; }
.no-js .topbar-x { display: none; }
.no-js .topbar-in { padding-right: var(--gutter); }
/* Ya lo cerró antes: se decide en el <head>, sin parpadeo. */
html.sin-aviso { --bar-h: 0px; }
html.sin-aviso .topbar { display: none; }

.topbar-in {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 14px;
  min-height: 52px;
  /* el hueco de la derecha es para la ✕, que va superpuesta */
  padding: 8px calc(var(--gutter) + 30px) 8px var(--gutter);
  max-width: var(--wrap-wide); margin-inline: auto;
}
.topbar-ico { width: 19px; height: 19px; flex: none; opacity: .78; }

.topbar-txt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .93rem; font-weight: 500; line-height: 1.35;
  text-align: center;
}
.topbar-txt b { font-weight: 700; }
.topbar-txt mark {
  background: var(--cy-ink); color: var(--cy);
  padding: 3px 10px; border-radius: 7px;
  font-weight: 650; font-size: .88rem; white-space: nowrap;
}

.topbar-cta {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  min-height: 34px; padding: 7px 15px;
  border-radius: var(--r-full);
  background: var(--cy-ink); color: #fff;
  font-size: .86rem; font-weight: 650; white-space: nowrap;
  transition: transform var(--t-micro) var(--e-out), box-shadow var(--t-micro) var(--e-out);
}
.topbar-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); }
.topbar-cta:active { transform: none; }
.topbar-arr { width: 15px; height: 15px; flex: none; }

.topbar-x {
  position: absolute; right: max(10px, calc(var(--gutter) - 12px));
  top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;               /* objetivo táctil, SC 2.5.8 */
  border: 0; border-radius: 50%;
  background: transparent; color: var(--cy-ink);
  cursor: pointer; opacity: .62;
  transition: opacity var(--t-micro) var(--e-out), background-color var(--t-micro) var(--e-out);
}
.topbar-x svg { width: 17px; height: 17px; }
.topbar-x:hover { opacity: 1; background: rgba(4,25,28,.13); }
.topbar-x:focus-visible { opacity: 1; }
/* Al cerrarlo se va hacia arriba y luego se quita del DOM. */
.topbar.cerrando {
  transition: opacity .2s var(--e-in), transform .22s var(--e-in);
  opacity: 0; transform: translate3d(0, -100%, 0); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .topbar.cerrando { transition: none; } }

.tb-corto { display: none; }

@media (max-width: 720px) {
  :root { --bar-h: 82px; }   /* aquí el aviso pasa a dos líneas */
  .tb-ancho { display: none; }
  .tb-corto { display: inline; }
  .topbar-in { gap: 9px; padding-block: 9px; }
  /* El texto ocupa la fila entera, así el botón cae SIEMPRE en su propia línea
     centrada. Dejado al azar del wrap quedaban tres líneas descuadradas. */
  .topbar-txt { width: 100%; justify-content: center; font-size: .88rem; }
  .topbar-txt mark { font-size: .84rem; padding: 2px 9px; }
  .topbar-cta { font-size: .82rem; padding: 6px 14px; }
  .topbar-ico { display: none; }
}

/* El h1 abre el hero: ya no hay píldora encima de la que separarse. */
.hero h1 { margin-top: 0; }

/* Revelado palabra por palabra: cada .w es un span envuelto en .wm (máscara) */
.wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.w  { display: inline-block; }
.js .w {
  transform: translate3d(0, 105%, 0);
  opacity: 0;
  transition: transform .72s var(--e-out), opacity .5s var(--e-out);
  transition-delay: calc(var(--i, 0) * 55ms + 60ms);
}
.js .is-lit .w { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .w { transform: none !important; opacity: 1 !important; } }

.hero-sub { margin-top: 18px; max-width: 560px; }
.hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { margin-top: 20px; display: grid; gap: 9px; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note svg { width: 13px; height: 13px; color: var(--cy-lit); flex: none; }

/* --------- Ventana de SO del hero --------- */
.os {
  margin-top: clamp(38px, 5vw, 62px);
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #0e141d, #0a0f16);
  box-shadow: var(--sh-2), 0 0 90px -30px rgba(0,238,255,.3);
  overflow: hidden;
  transform-style: preserve-3d;
}
.os-title .dot-live { width: 5px; height: 5px; }

.os-side .mono { color: var(--muted-3); padding: 0 8px 10px; display: block; }
.os-mod.on { background: rgba(0,238,255,.096); color: var(--w); }
.os-mod.on svg { opacity: 1; color: var(--cy-lit); }


/* Chat SABI */

/* Pasos de ejecución: el punto de la sección — SABI ejecuta */
.exec-h .spin { width: 12px; height: 12px; flex: none; }
.exec.running .exec-h .spin { animation: spin 1.4s linear infinite; color: var(--cy-lit); }
.exec:not(.running) .exec-h .spin { color: var(--a-green); }
.exec li.run { opacity: 1; color: var(--w); background: rgba(255,255,255,.04); }
.exec li.ok  { opacity: 1; color: var(--muted); }
.exec li .tick { color: var(--a-green); opacity: 0; transform: scale(.6); transition: opacity .25s var(--e-out), transform .25s var(--e-out); }
.exec li.ok .tick { opacity: 1; transform: none; }
.exec li .ring { color: var(--cy-lit); opacity: 0; }
.exec li.run .ring { opacity: 1; animation: spin 900ms linear infinite; }

@media (max-width: 800px) {
  .os-side > .mono { display: none; }
  .os-mod.on { border-color: rgba(0,238,255,.45); }
}

/* --------- Marquee de módulos --------- */
.strip {
  border-block: 1px solid var(--line);
  background: rgba(255,255,255,.014);
  padding-block: 20px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee { display: flex; width: max-content; gap: 0; }
.marquee ul { display: flex; align-items: center; gap: 44px; padding-right: 44px; animation: slide 42s linear infinite; }
.strip:hover .marquee ul, .strip:focus-within .marquee ul { animation-play-state: paused; }
.marquee li {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: .78rem;
  letter-spacing: .06em; color: var(--muted-3); white-space: nowrap;
}
.marquee svg { width: 15px; height: 15px; color: var(--cy-lit); opacity: .8; flex: none; }
@keyframes slide { to { transform: translate3d(-100%, 0, 0); } }
/* SC 2.2.2: si el usuario pide menos movimiento, el marquee se detiene y se apila. */
@media (prefers-reduced-motion: reduce) {
  .marquee ul { animation: none; }
  .marquee { flex-wrap: wrap; width: 100%; }
  .marquee ul { flex-wrap: wrap; justify-content: center; row-gap: 14px; }
  .marquee ul + ul { display: none; }
  .strip { mask-image: none; -webkit-mask-image: none; }
}

/* ============================== 13. PROBLEMA → CONVERGENCIA (scroll scrub) */
.conv { position: relative; }
.conv-stage {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
  padding-top: clamp(150px, 21vh, 230px);
  overflow: hidden;
}
.conv-track { height: 250svh; }
.conv-field {
  position: relative;
  /* 940 y no 760: el anillo llega a 432u del centro, así que el campo tiene
     que ser lo bastante ancho para contenerlo o se recorta por los lados en
     ventanas de ~900px. */
  width: min(940px, 92vw); aspect-ratio: 1 / .8;
  /* Nunca más alto que el hueco que deja el escenario, que recorta lo que
     sobresalga. Sin esto, a 1280x720 los iconos de abajo se salían 9px. */
  max-height: calc(100svh - clamp(150px, 21vh, 230px) - 20px);
  /* Contenedor de consulta: las fichas miden contra ESTA caja, no contra la
     ventana. Así la dispersión se corrige sola en cualquier pantalla en vez de
     depender de una fórmula en vw/svh que hay que recalibrar a mano. */
  container-type: size;
}

/* Cada herramienta suelta es el icono real de la app. Ya vienen con su propia
   pastilla blanca y su sombra, así que la ficha no pone ni marco ni fondo:
   sólo coloca, escala y desvanece. */
.tool {
  position: absolute;
  left: 50%; top: 50%;
  /* --u es la unidad de dispersión: las coordenadas --tx/--ty van sin unidad y
     se multiplican por esto. Atada a la caja del campo, nunca a la ventana, para
     que se corrija sola en vez de depender de una fórmula que recalibrar a mano.
       · vertical:   el icono más bajo está a 248u + --tool/2 del centro y debe
                     caber en cqh/2. Con --tool = .128cqh sale u <= cqh/569.
       · horizontal: el más lejano está a 432u y el campo mide 940 de referencia.
     El menor de los dos manda, y nunca pasa de 1px. */
  --u: min(100cqh / 600, 100cqw / 940, 1px);   /* 600 y no el 569 justo: deja aire abajo */
  --tool: clamp(46px, 12.8cqh, 78px);
  width: var(--tool); height: var(--tool);
  /* --tx/--ty: posición dispersa. --k: 0 disperso → 1 convergido (lo mueve el JS). */
  transform:
    translate3d(calc(-50% + var(--tx, 0) * var(--u, 1px) * (1 - var(--k, 0))),
                calc(-50% + var(--ty, 0) * var(--u, 1px) * (1 - var(--k, 0))), 0)
    scale(calc(1 - var(--k, 0) * .55));
  /* x1.4: llegan a opacidad 0 en k=.71, antes de amontonarse en el centro.
     Con .92 los nueve se apilaban en el mismo punto y sumaban una mancha. */
  opacity: calc(1 - var(--k, 0) * 1.4);
  will-change: transform, opacity;
}
.tool img {
  width: 100%; height: 100%; display: block; object-fit: contain;
}

.conv-core {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid; place-items: center;
  text-align: center;
  opacity: var(--k, 0);
  scale: calc(.86 + var(--k, 0) * .14);
  transition: none;
}
.conv-core .ring {
  position: absolute; border: 1px solid var(--line-2); border-radius: 50%;
  inset: 50% auto auto 50%; translate: -50% -50%;
}
.conv-core .ring.r1 { width: 300px; height: 300px; }
.conv-core .ring.r2 { width: 440px; height: 440px; border-color: var(--line-3); }
.conv-core .ring.r3 { width: 580px; height: 580px; border-color: var(--line-3); }
.conv-core .core-mark {
  width: 132px; height: 132px;
  display: grid; place-items: center;
  position: relative; z-index: 2;
  filter: drop-shadow(0 0 46px rgba(0,238,255,.45));
}
.conv-core .core-mark img { width: auto; height: 118px; }
.conv-core h3 { margin-top: 26px; position: relative; z-index: 2; }
.conv-core p { margin-top: 10px; max-width: 380px; position: relative; z-index: 2; }

.conv-label {
  position: absolute; inset-inline: 0; top: clamp(80px, 12vh, 130px);
  text-align: center; padding-inline: var(--gutter);
}
.conv-label .h2 { max-width: 640px; margin-inline: auto; }
.conv-swap { display: grid; }
.conv-swap > * { grid-area: 1 / 1; transition: opacity .3s var(--e-out), transform .3s var(--e-out); }
.conv-swap .s-b { opacity: 0; transform: translateY(8px); }
.conv.snapped .conv-swap .s-a { opacity: 0; transform: translateY(-8px); }
.conv.snapped .conv-swap .s-b { opacity: 1; transform: none; }

/* Fallback sin JS / reduced-motion: se muestra todo en su estado final legible. */
.no-js .conv-track, .conv.static .conv-track { height: auto; }
.no-js .conv-stage, .conv.static .conv-stage { position: static; height: auto; padding-block: var(--sp-9); }
.no-js .tool, .conv.static .tool { position: static; transform: none; opacity: 1; scale: 1; }
.no-js .conv-field, .conv.static .conv-field {
  --tf: clamp(52px, 13vw, 72px);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  aspect-ratio: auto; width: 100%; margin-bottom: var(--sp-7);
  /* Ancho de exactamente cinco iconos: los nueve caen en 5 + 4 en vez de
     dejar uno huérfano en una segunda fila. */
  max-width: calc(5 * var(--tf) + 4 * 12px);
  /* aplanado: ni tope de altura ni contenedor de consulta */
  max-height: none; container-type: normal;
}
.no-js .tool, .conv.static .tool { --tool: var(--tf); }
.no-js .conv-core, .conv.static .conv-core { position: static; translate: none; opacity: 1; scale: 1; margin-top: var(--sp-7); }
.no-js .conv-core .ring, .conv.static .conv-core .ring { display: none; }
.no-js .conv-label, .conv.static .conv-label { position: static; margin-bottom: var(--sp-7); }
.conv.static .conv-swap .s-a { display: none; }
.conv.static .conv-swap .s-b { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .conv-track { height: auto; }
  .conv-stage { position: static; height: auto; padding-block: var(--sp-9); }
}

/* --- réplica de Mi Negocio (primer latido del Acto II) ---
   Calcada de app.sabnu.ai/negocio: barra de completitud, el raíl de los ocho
   pasos con su punto, y las dos tarjetas que hacen el trabajo sucio (sacar el
   catálogo de la web o de la foto de una carta). */
.ng { display: flex; flex-direction: column; gap: 14px; }

.ng-pasos li.on { background: rgba(255,255,255,.04); color: var(--w); }



@media (max-width: 560px) {
  .ng-cols { grid-template-columns: 1fr; }
  .ng-pasos { display: flex; flex-wrap: wrap; gap: 4px; }
}

/* ==================================== TRES COSAS QUE NO SE ROMPEN (.rompe)
   Tres tarjetas, tres escenas distintas. Cada una se reproduce sola al entrar
   en pantalla, una vez, y cada una usa un recurso diferente: un tachado, un
   apagón y un corte. Nada de diagramas con flechas. */
.rompe-grid {
  margin-top: var(--sp-7);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.rompe-card {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.rompe-vis {
  height: 132px; margin-bottom: 22px; position: relative;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
}
.rompe-h {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(1.15rem, 1.6vw, 1.34rem); font-weight: 600;
  line-height: 1.2; letter-spacing: -.01em; color: var(--w);
}
.rompe-p { margin-top: 11px; font-size: .88rem; line-height: 1.55; color: var(--muted-2); }

/* ── escena 1: el cobro repetido se tacha ──────────────────────────────── */
.rompe-cobro {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem; font-weight: 600; color: var(--cy);
  font-variant-numeric: tabular-nums;
  padding: 9px 18px; border-radius: var(--r);
  border: 1px solid rgba(0,238,255,.35); background: rgba(0,238,255,.07);
}
/* Nada de position:absolute: encima del original no se leía ninguno de los
   dos. Van uno debajo del otro y el duplicado sólo aparece y se tacha. */
.rompe-cobro--dup {
  transform: rotate(-3deg);
  color: var(--muted-3); border-color: var(--line-2);
  background: var(--d-sunk);
  opacity: 0;
}
.rompe-cobro--dup span { position: relative; }
.rompe-cobro--dup span::after {
  content: ''; position: absolute; left: -6%; right: -6%; top: 52%;
  height: 2px; background: var(--bad); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
}
.va .rompe-cobro--dup { animation: dupEntra .4s var(--e-out) .35s both; }
.va .rompe-cobro--dup span::after { animation: dupTacha .34s var(--e-out) .95s both; }
@keyframes dupEntra { from { opacity: 0; transform: translateY(-12px) rotate(-3deg); }
                      to   { opacity: 1; transform: translateY(0) rotate(-3deg); } }
@keyframes dupTacha { to { transform: scaleX(1); } }

/* ── escena 2: uno se apaga, los demás siguen ──────────────────────────── */
.rompe-mods { list-style: none; display: grid; gap: 7px; width: 100%; max-width: 210px; }
.rompe-mods li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  font-size: .76rem; color: var(--muted-2);
  transition: opacity .3s var(--e-out), border-color .3s var(--e-out);
}
.rompe-mods li span {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--a-green); box-shadow: 0 0 8px rgba(94,231,154,.7);
  transition: background-color .3s var(--e-out), box-shadow .3s var(--e-out);
}
.va .rompe-mods li.cae { animation: modCae .5s var(--e-out) .5s both; }
.va .rompe-mods li.cae span { animation: ledCae .3s var(--e-out) .5s both; }
@keyframes modCae { to { opacity: .32; border-color: var(--line-3); } }
@keyframes ledCae { to { background: var(--bad); box-shadow: none; } }

/* ── escena 3: el bucle se corta ───────────────────────────────────────── */
.rompe-bucle { position: relative; display: flex; align-items: center; gap: 0; }
.rompe-bot {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; border: 1px solid var(--line-2);
  background: var(--d-surf); color: var(--muted-2);
  font-family: 'JetBrains Mono', monospace; font-size: .74rem; z-index: 2;
}
.rompe-hilo {
  width: 96px; height: 2px; background: var(--line-3); position: relative;
}
.rompe-hilo::after {
  content: ''; position: absolute; top: -2px; left: 0;
  width: 14px; height: 6px; border-radius: 3px; background: var(--cy);
  opacity: 0;
}
.va .rompe-hilo::after { animation: pingPong 1.05s var(--e-out) 2; }
@keyframes pingPong {
  0%   { opacity: 1; transform: translateX(0); }
  50%  { opacity: 1; transform: translateX(82px); }
  100% { opacity: 1; transform: translateX(0); }
}
.rompe-corte {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 0; margin-left: -1px;
  background: var(--bad); border-radius: 2px;
  transform: translateY(-50%) rotate(18deg); z-index: 3;
}
.va .rompe-corte { animation: corta .28s var(--e-out) 2.2s both; }
@keyframes corta { to { height: 54px; box-shadow: 0 0 14px rgba(189,50,67,.8); } }

@media (prefers-reduced-motion: reduce) {
  .va .rompe-cobro--dup, .va .rompe-cobro--dup span::after, .va .rompe-mods li.cae,
  .va .rompe-mods li.cae span, .va .rompe-hilo::after, .va .rompe-corte { animation: none; }
  .rompe-cobro--dup { opacity: 1; }
  .rompe-cobro--dup span::after { transform: scaleX(1); }
  .rompe-mods li.cae { opacity: .32; }
  .rompe-mods li.cae span { background: var(--bad); box-shadow: none; }
  .rompe-corte { height: 54px; }
}

/* ==================================== EMPEZAR (.fin)
   Calcada del diseño de referencia. Las medidas salen de mirar la imagen:
   placa numerada de 44px arriba a la izquierda, ilustración de ~200px sobre
   plataforma elíptica luminosa, conectores a media altura entre tarjetas, y
   dos barras anchas debajo (CTA de tres columnas y llaves con caja de 15 días). */

.fin-h {
  /* Sólo posición: el tamaño, el peso y el tracking los pone .h2, común a
     las nueve secciones. */
  margin-top: 14px; text-align: center;
}
.fin-sub {
  margin: 13px auto 0; text-align: center; max-width: 52ch;
  font-size: clamp(.88rem, 1.05vw, .97rem); color: var(--muted-2);
}

/* ── las tres tarjetas ──────────────────────────────────────────────────── */
.fin-pasos {
  list-style: none; margin-top: clamp(26px, 3.6vw, 44px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 3vw, 50px);
}
.paso {
  position: relative;
  padding: clamp(16px, 1.7vw, 22px);
  border: 1px solid var(--line-2); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.008) 55%);
}
/* Conector entre tarjeta y tarjeta: línea cian con nodo cuadrado en cada
   extremo, a media altura, tal como en el diseño. El último no lleva. */
.paso:not(:last-child)::before {
  content: ''; position: absolute; top: 50%; left: 100%;
  width: clamp(14px, 4vw, 68px); height: 1px; margin-top: -.5px;
  background: linear-gradient(90deg, rgba(0,238,255,.7), rgba(0,238,255,.7));
  pointer-events: none;
}
.paso:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; left: 100%;
  width: clamp(14px, 4vw, 68px); height: 7px; margin-top: -3.5px;
  background:
    linear-gradient(var(--cy), var(--cy)) left center / 7px 7px no-repeat,
    linear-gradient(var(--cy), var(--cy)) right center / 7px 7px no-repeat;
  pointer-events: none;
}

.paso-n {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(0,238,255,.45); background: rgba(0,238,255,.07);
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem; font-weight: 600; color: var(--cy);
}

/* La ilustración: el objeto flotando sobre una plataforma elíptica luminosa,
   que es la composición del diseño. Los renders 3D originales van aquí. */
.paso-ilu {
  /* Las tres comparten alto para que los títulos queden alineados.
     206px es 361/1,754: la proporción exacta del panel real (2000x1140)
     con el ancho que tiene la tarjeta.

     Fijo, no elástico: con 190px en móvil el hilo se quedaba 11px corto y
     recortaba la fila de acciones de Sabi. Antes que esconder partes reales
     de la interfaz en pantallas estrechas, el marco mide igual en todas. */
  position: relative; height: 206px;
  display: grid; place-items: center; margin: clamp(11px, 1.4vw, 17px) 0;
}
/* Las tres tarjetas llevan ahora una réplica del panel dentro de .paso-ilu
   (ver .reg, .pan y .wa). La plataforma elíptica y el icono grande que
   había aquí se quedaron sin uso y se han quitado. */

.paso-h {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(1rem, 1.28vw, 1.16rem); font-weight: 700;
  letter-spacing: -.015em; color: var(--w);
}
.paso-p { margin-top: 8px; font-size: .875rem; line-height: 1.55; color: var(--muted-2); }

/* ── barra de CTA, tres columnas ────────────────────────────────────────── */
.fin-cta {
  margin-top: clamp(16px, 2vw, 26px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: clamp(14px, 2vw, 28px);
  padding: clamp(13px, 1.4vw, 17px) clamp(16px, 1.9vw, 24px);
  border: 1px solid var(--line-2); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.fin-cta-h {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(.94rem, 1.2vw, 1.1rem); font-weight: 700; letter-spacing: -.02em;
  color: var(--w);
}
.fin-cta-h em { font-style: normal; color: var(--cy); }
.fin-cta-txt p + p { margin-top: 6px; font-size: .83rem; line-height: 1.5; color: var(--muted-2); }
.fin-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Los botones de esta barra bajan de 62 a ~52px de alto. No más: son la
   llamada a la acción de la sección y encogerlos de verdad sería un mal
   negocio a cambio de unos píxeles. */
.fin-cta-btns .btn-lg { padding: 12px 24px; font-size: .94rem; }
.fin-cta-seg { display: flex; align-items: flex-start; gap: 11px; }
.fin-seg-ico {
  display: grid; place-items: center; flex: none;
  width: 33px; height: 33px; border-radius: 10px;
  border: 1px solid rgba(0,238,255,.4); background: rgba(0,238,255,.07);
}
.fin-seg-ico svg { width: 16px; height: 16px; color: var(--cy); }
.fin-cta-seg b { display: block; font-size: .86rem; color: var(--w); }
/* :not(.fin-seg-ico) obligatorio. Esta regla es para el texto, pero la caja
   del icono también es un <span> dentro de .fin-cta-seg: con (0,1,1) le
   ganaba a .fin-seg-ico (0,1,0) y le imponía display:block, anulando su
   grid y dejando el escudo pegado arriba en vez de centrado. */
.fin-cta-seg span:not(.fin-seg-ico) {
  display: block; margin-top: 4px; font-size: .78rem; line-height: 1.5; color: var(--muted-2);
}

/* ── barra de las llaves ────────────────────────────────────────────────── */
.fin-llaves {
  margin-top: clamp(12px, 1.5vw, 18px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(12px, 1.7vw, 20px);
  padding: clamp(11px, 1.3vw, 15px) clamp(14px, 1.7vw, 22px);
  border: 1px solid var(--line-2); border-left: 2px solid var(--cy);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
.fin-llave-ico {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid rgba(0,238,255,.4); background: rgba(0,238,255,.06);
}
.fin-llave-ico svg { width: 19px; height: 19px; color: var(--cy); }
.fin-llave-txt b { color: var(--w); font-size: .88rem; }
.fin-llave-txt p { margin-top: 4px; font-size: .81rem; line-height: 1.55; color: var(--muted-2); }
.fin-15 {
  text-align: center; flex: none;
  padding: 8px 15px; border-radius: 11px;
  border: 1px solid rgba(0,238,255,.35); background: rgba(0,238,255,.05);
}
.fin-15 b {
  display: block;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(.8rem, 1vw, .92rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; color: var(--cy);
}
.fin-15 span { display: block; margin-top: 2px; font-size: .68rem; color: var(--muted-2); }

@media (max-width: 980px) {
  .fin-pasos { grid-template-columns: 1fr; gap: 16px; }
  .paso:not(:last-child)::before, .paso:not(:last-child)::after { display: none; }
  .fin-cta { grid-template-columns: 1fr; text-align: center; }
  .fin-cta-seg { text-align: left; max-width: 46ch; margin-inline: auto; }
  .fin-llaves { grid-template-columns: auto minmax(0, 1fr); }
  .fin-15 { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .fin-llaves { grid-template-columns: 1fr; }
  .fin-llave-ico { width: 52px; height: 52px; }
}

/* ==================================== MINI REGISTRO (.reg)
   Réplica en miniatura del registro real de app.sabnu.ai dentro de la tarjeta
   01. Los tres pasos, los rótulos y el orden son los del producto.

   Las escenas se apilan con grid-area 1/1 y se ocultan con visibility, no con
   display:none: así el marco mantiene el alto y no da saltos. */
.paso-ilu-app { display: block; }

.reg {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: 7px;
  padding: 8px 10px 9px;
  border: 1px solid rgba(0, 238, 255, .22); border-radius: 12px;
  background: linear-gradient(180deg, rgba(12, 18, 26, .96), rgba(7, 11, 16, .96));
  box-shadow: 0 14px 36px -24px rgba(0, 238, 255, .65);
  overflow: hidden;
}

/* ── cabecera con el paso a paso ─────────────────────────────────────────── */
.reg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reg-marca {
  font-family: 'JetBrains Mono', monospace;
  font-size: .46rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-3);
}
.reg-pasos { display: flex; align-items: center; gap: 4px; }
.reg-pt {
  display: grid; place-items: center;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--line-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: .42rem; font-style: normal; color: var(--muted-3);
  transition: color .18s var(--e-out), border-color .18s var(--e-out),
              background-color .18s var(--e-out), transform .18s var(--e-out);
}
.reg-pt.on { color: var(--cy); border-color: var(--cy); transform: scale(1.12); }
.reg-pt.ok {
  color: var(--cy-ink); border-color: var(--cy); background: var(--cy);
  transform: none;
}
.reg-pl { width: 11px; height: 1px; background: var(--line-2); }

/* ── el escenario: cuatro escenas apiladas ───────────────────────────────── */
.reg-stage { position: relative; flex: 1; display: grid; }
.reg-esc {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 6px, 0);
  transition: opacity .26s var(--e-out), transform .26s var(--e-out), visibility 0s .26s;
}
.reg-esc.on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--e-out), transform .3s var(--e-out), visibility 0s;
}

.reg-lab {
  font-size: .46rem; letter-spacing: .04em; color: var(--muted-3);
}
.reg-tit { font-size: .62rem; font-weight: 700; color: var(--w); }
.reg-nota { font-size: .46rem; color: var(--muted-3); }

/* campos */
.reg-campo {
  display: flex; align-items: center; gap: 1px;
  height: 14px; padding: 0 6px; margin-bottom: 2px;
  border: 1px solid var(--line-2); border-radius: 5px;
  background: rgba(255, 255, 255, .03);
  font-size: .5rem; color: var(--muted); line-height: 1;
  transition: border-color .18s var(--e-out), box-shadow .18s var(--e-out);
}
.reg-campo.foco {
  border-color: rgba(0, 238, 255, .7);
  box-shadow: 0 0 0 2px rgba(0, 238, 255, .12);
}
.reg-campo b { font-weight: 400; white-space: nowrap; }
.reg-caret {
  width: 1px; height: 8px; background: var(--cy);
  opacity: 0; font-style: normal;
}
.reg-campo.foco .reg-caret { animation: regCaret .9s steps(1) infinite; }
@keyframes regCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.reg-campo-clave b { letter-spacing: .16em; font-size: .58rem; color: var(--muted-2); }

/* Teléfono: selector de indicativo + campo, como en el registro real. */
.reg-tel { display: flex; gap: 4px; margin-bottom: 3px; }
.reg-pref {
  flex: none; display: flex; align-items: center; gap: 3px;
  height: 14px; padding: 0 5px;
  border: 1px solid var(--line-2); border-radius: 5px;
  background: rgba(255, 255, 255, .03);
  font-style: normal; font-size: .5rem; color: var(--muted); line-height: 1;
}
.reg-tel .reg-campo { flex: 1; min-width: 0; margin-bottom: 0; }

/* La bandera dibujada, no con emoji: a 7px un emoji depende de la fuente del
   sistema y sale borroso; tres franjas quedan nítidas a cualquier tamaño. */
.reg-bandera {
  flex: none; width: 9px; height: 6.5px; border-radius: 1px;
  background: linear-gradient(180deg,
    #fcd116 0 50%, #003893 50% 75%, #ce1126 75% 100%);
}
.reg-chev {
  flex: none; width: 3.5px; height: 3.5px;
  border-right: 1px solid var(--muted-3); border-bottom: 1px solid var(--muted-3);
  transform: translateY(-1px) rotate(45deg);
}
.reg-pais { gap: 4px; }
.reg-pais .reg-chev { margin-left: auto; }

/* botón */
.reg-btn {
  align-self: stretch; margin-top: 4px;
  display: grid; place-items: center;
  height: 16px; border-radius: 999px;
  background: var(--cy); color: var(--cy-ink);
  font-size: .5rem; font-weight: 700; letter-spacing: .01em;
  transition: transform .12s var(--e-out), box-shadow .12s var(--e-out);
}
.reg-btn.pulsa {
  transform: scale(.94);
  box-shadow: 0 0 0 4px rgba(0, 238, 255, .16);
}

/* casillas del código */
.reg-ojos { display: flex; gap: 4px; margin: 2px 0; }
.reg-ojos i {
  flex: 1; height: 17px; border-radius: 4px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .52rem; font-style: normal; color: var(--w);
  transition: border-color .16s var(--e-out), transform .16s var(--e-out);
}
.reg-ojos i.lleno { border-color: rgba(0, 238, 255, .6); transform: translate3d(0, -1px, 0); }

/* medidor de fuerza: cuatro segmentos, como en el registro real */
.reg-fuerza { display: flex; gap: 3px; margin: 3px 0 1px; }
.reg-fuerza i {
  flex: 1; height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  transition: background-color .22s var(--e-out);
}
.reg-fuerza i.on { background: var(--cy); }

.reg-req { display: flex; align-items: center; gap: 4px; font-size: .46rem; color: var(--muted-3); }
.reg-req-o {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--line-2);
  transition: background-color .18s var(--e-out), border-color .18s var(--e-out);
}
.reg-req.ok { color: var(--muted); }
.reg-req.ok .reg-req-o { background: var(--cy); border-color: var(--cy); }

/* escena final */
.reg-esc[data-esc="listo"] { align-items: center; text-align: center; gap: 3px; }
.reg-ok svg { width: 30px; height: 30px; overflow: visible; }
.reg-ok-c {
  fill: rgba(0, 238, 255, .1); stroke: rgba(0, 238, 255, .55); stroke-width: 1.4;
}
.reg-ok-v {
  fill: none; stroke: var(--cy); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  transition: stroke-dashoffset .5s var(--e-out) .12s;
}
.reg-esc[data-esc="listo"].on .reg-ok-v { stroke-dashoffset: 0; }
.reg-tit-ok { font-size: .66rem; }
.reg-btn-ok { max-width: 130px; align-self: center; padding-inline: 14px; }

/* Sin movimiento: se pinta el fotograma final y no se anima nada. */
@media (prefers-reduced-motion: reduce) {
  .reg-esc, .reg-pt, .reg-campo, .reg-btn, .reg-ojos i,
  .reg-fuerza i, .reg-req-o, .reg-ok-v { transition: none; }
  .reg-cur { display: none; }
  .reg-campo.foco .reg-caret { animation: none; }
  .reg-esc[data-esc="listo"] .reg-ok-v { stroke-dashoffset: 0; }
}

@media (max-width: 980px) {
  .reg { max-width: 320px; margin-inline: auto; }
}

/* ==================================== PANEL DE SABI (.pan)
   Réplica del panel real dentro de la tarjeta 02. Está todo lo de la captura
   y en su sitio: barra lateral (nueva conversación, lista, menú, SABUS),
   cabecera (plegar, buscador, campana, tema), hilo (burbuja propia + respuesta
   de Sabi con avatar, nombre y acciones) y redactor con su nota al pie.

   El texto va a 7 px porque a escala real (18%) sería de 2 px e ilegible.
   Es una maqueta a escala legible, no una reducción fotográfica. */
.pan {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; overflow: hidden;
  border: 1px solid rgba(0, 238, 255, .22); border-radius: 12px;
  background: linear-gradient(180deg, rgba(12, 18, 26, .96), rgba(7, 11, 16, .96));
  box-shadow: 0 14px 36px -24px rgba(0, 238, 255, .65);
  font-size: .44rem; line-height: 1.35;
}
.pan svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }

/* ── barra lateral ───────────────────────────────────────────────────────── */
.pan-side {
  flex: none; width: 27%;
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 5px; overflow: hidden;
  border-right: 1px solid var(--line);
  background: rgba(0, 0, 0, .28);
}
.pan-nueva {
  /* flex:none en todos los hijos de la barra: sin esto el reparto de
     flex los encoge y el botón se queda en 8px con el texto cortado. */
  flex: none;
  display: flex; align-items: center; gap: 3px;
  padding: 4px 5px; border-radius: 6px;
  background: var(--cy); color: var(--cy-ink);
  font-size: .44rem; font-weight: 700;
  white-space: nowrap; overflow: hidden;
}
.pan-nueva svg { flex: none; width: 6px; height: 6px; stroke-width: 2.6; }

.pan-rot {
  flex: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: .38rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-3); padding-left: 2px;
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pan-convs {
  flex: none; display: flex; flex-direction: column; gap: 1px; }
.pan-conv {
  display: flex; align-items: center; gap: 3px;
  padding: 2.5px 4px; border-radius: 4px;
  color: var(--muted-2);
  border: 1px solid transparent;
}
.pan-conv.on {
  background: rgba(255, 255, 255, .06);
  border-color: var(--line-2);
  color: var(--w);
}
.pan-pt {
  flex: none; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, .3);
}
.pan-conv.on .pan-pt { background: var(--cy); }
.pan-conv b {
  flex: 1; min-width: 0; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pan-conv em { flex: none; font-style: normal; font-size: .38rem; color: var(--muted-3); }

.pan-sep { flex: none; height: 1px; background: var(--line-2); margin: 1px 2px; }

.pan-menu {
  flex: none; display: flex; flex-direction: column; gap: 2px; }
.pan-menu span {
  /* Con 2px de relleno la barra sumaba exactamente el alto disponible y no
     quedaba holgura: si una tipografía no carga, las métricas de reserva la
     desbordan. Con 1px quedan ~7px de margen. */
  display: flex; align-items: center; gap: 4px;
  padding: 1px 4px; color: var(--muted-2);
  white-space: nowrap; overflow: hidden;
}
.pan-menu svg { flex: none; width: 6px; height: 6px; }

.pan-sabus {
  flex: none; margin-top: auto;
  padding: 4px 5px; border-radius: 6px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
}
.pan-sabus b { display: block; font-size: .42rem; font-weight: 600; color: var(--muted);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pan-barra {
  display: block; height: 2px; margin: 3px 0;
  border-radius: 2px; background: rgba(255, 255, 255, .1);
}
.pan-barra i { display: block; width: 12%; height: 100%; border-radius: 2px; background: var(--cy); }
.pan-sabus em { display: block; font-style: normal; font-size: .38rem; color: var(--muted-3);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── zona principal ──────────────────────────────────────────────────────── */
.pan-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding: 6px 7px 5px;
}

.pan-top { display: flex; align-items: center; gap: 4px; }
.pan-tb {
  flex: none; display: grid; place-items: center;
  width: 12px; height: 12px; border-radius: 4px;
  border: 1px solid var(--line-2); color: var(--muted-2);
}
.pan-tb.redondo { border-radius: 50%; }
.pan-tb svg { width: 6px; height: 6px; }
.pan-buscar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 3px;
  height: 12px; padding: 0 5px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  color: var(--muted-3);
  white-space: nowrap; overflow: hidden;
}
.pan-buscar svg { flex: none; width: 5.5px; height: 5.5px; }

/* hilo */
.pan-hilo {
  /* Los mensajes van de arriba abajo, no anclados al redactor.
     Anclados abajo, la entrada de la respuesta de Sabi empujaba hacia arriba
     la burbuja que ya estaba visible: contenido ya pintado moviéndose solo.
     Así cada mensaje aparece debajo del anterior y nada se recoloca. */
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
  overflow: hidden;
}
.pan-yo {
  align-self: flex-end; max-width: 78%;
  padding: 3.5px 6px; border-radius: 7px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05);
  color: var(--w);
  opacity: 0; transform: translate3d(0, 5px, 0);
  transition: opacity .24s var(--e-out), transform .24s var(--e-out);
}
.pan-yo.on { opacity: 1; transform: none; }

.pan-sabi {
  display: flex; align-items: flex-start; gap: 4px;
  opacity: 0; transform: translate3d(0, 5px, 0);
  transition: opacity .24s var(--e-out), transform .24s var(--e-out);
}
.pan-sabi.on { opacity: 1; transform: none; }
.pan-av {
  flex: none; display: grid; place-items: center;
  width: 13px; height: 13px; border-radius: 4px;
  border: 1px solid rgba(0, 238, 255, .3); background: rgba(0, 238, 255, .08);
}
.pan-av img { width: 8px; height: auto; }
/* display:block obligatorio: es un <span>, y como inline su caja se mide
   por líneas, lo que bajaba el bloque de Sabi 6px y recortaba la fila de
   acciones contra el fondo del hilo. */
.pan-cuerpo { display: block; min-width: 0; }
.pan-name {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: .38rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cy);
  margin-bottom: 2px;
}
.pan-cuerpo p { color: var(--muted); }

/* puntos de «escribiendo», los del panel real */
.pan-dots { display: none; gap: 2.5px; padding: 2px 0 1px; }
.pan-dots.on { display: flex; }
.pan-dots i {
  width: 3px; height: 3px; border-radius: 50%; background: var(--muted-3);
  animation: panDot 1.05s ease-in-out infinite;
}
.pan-dots i:nth-child(2) { animation-delay: .16s; }
.pan-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes panDot {
  0%, 60%, 100% { opacity: .35; transform: none; }
  30%           { opacity: 1; transform: translate3d(0, -1.5px, 0); }
}

/* Los cuatro atajos que Sabi ofrece al abrir. En una sola fila recortada:
   una fila de atajos que se desplaza es lo que hace la interfaz real, y dos
   filas no caben en el alto del hilo. */
.pan-chips {
  display: flex; gap: 3px; margin-top: 2px;
  white-space: nowrap; overflow: hidden;
  /* El cuarto atajo no cabe y se corta. Con el degradado se desvanece en vez
     de quedar cercenado, que es como se comporta una fila de atajos que se
     desplaza. Sin soporte de máscara simplemente queda el corte limpio. */
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 99%);
          mask-image: linear-gradient(90deg, #000 80%, transparent 99%);
}
.pan-chips i {
  flex: none; font-style: normal;
  padding: 2px 5px; border-radius: 999px;
  border: 1px solid rgba(0, 238, 255, .3); color: var(--cy);
}

/* El botón de acción que Sabi adjunta a sus respuestas (real: «Ir a Mis
   agentes →»). */
.pan-ir {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px; padding: 3px 7px;
  border: 1px solid var(--line-2); border-radius: 5px;
  color: var(--muted);
  opacity: 0; transform: translate3d(0, 3px, 0);
  transition: opacity .28s var(--e-out), transform .28s var(--e-out);
}
.pan-ir.on { opacity: 1; transform: none; }
.pan-ir svg { width: 6px; height: 6px; stroke-width: 2.4; }

.pan-acts {
  display: flex; gap: 5px; margin-top: 2px;
  color: var(--muted-3);
  opacity: 0; transition: opacity .3s var(--e-out);
}
.pan-acts.on { opacity: 1; }
.pan-acts svg { width: 6.5px; height: 6.5px; }

/* redactor */
.pan-comp {
  flex: none;
  padding: 4px 5px; border-radius: 7px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  transition: border-color .18s var(--e-out), box-shadow .18s var(--e-out);
}
.pan-comp.foco {
  border-color: rgba(0, 238, 255, .55);
  box-shadow: 0 0 0 2px rgba(0, 238, 255, .1);
}
.pan-ph {
  min-height: 8px; color: var(--muted-3);
  white-space: nowrap; overflow: hidden;
}
.pan-ph.escrito { color: var(--w); }
.pan-ph .cur {
  display: inline-block; width: 1px; height: 6px;
  margin-left: .5px; vertical-align: -1px; background: var(--cy);
}
.pan-comp.foco .pan-ph .cur { animation: panCur .9s steps(1) infinite; }
@keyframes panCur { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.pan-comp-pie { display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.pan-cb {
  display: grid; place-items: center;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--muted-3);
}
.pan-cb svg { width: 5.5px; height: 5.5px; }
.pan-enviar {
  margin-left: auto; display: grid; place-items: center;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cy); color: var(--cy-ink);
  transition: transform .12s var(--e-out), box-shadow .12s var(--e-out);
}
.pan-enviar svg { width: 6px; height: 6px; stroke-width: 2.6; }
.pan-enviar.pulsa { transform: scale(.86); box-shadow: 0 0 0 3px rgba(0, 238, 255, .18); }

.pan-pie { flex: none; font-size: .38rem; color: var(--muted-3); }

@media (prefers-reduced-motion: reduce) {
  .pan-yo, .pan-sabi, .pan-acts, .pan-comp, .pan-enviar { transition: none; }
  .pan-dots i { animation: none; }
  .pan-comp.foco .pan-ph .cur { animation: none; }
}

/* Por debajo de 980 las tarjetas van a una columna y la maqueta se estrecha:
   la barra lateral necesita algo más de proporción para no picar el texto. */
@media (max-width: 980px) {
  .pan { max-width: 340px; margin-inline: auto; }
  .pan-side { width: 30%; }
  /* El marco baja a 190px y la barra ya no da para tres filas: la tarjeta de
     SABUS se salía y quedaba cortada. Dos filas es además el número
     proporcionalmente correcto (12 filas en 1140px reales → 2 en 190). */
  .pan-conv:nth-child(3) { display: none; }
}

/* ==================================== CONECTAR WHATSAPP (.wa)
   La tarjeta de WhatsApp del panel real, con su flujo de conexión. Todo el
   texto es literal de app.sabnu.ai/agente/: la descripción, la casilla
   «Conservo mi app», el botón, la insignia «conectado», la línea de prueba y
   los dos enlaces de abajo. */
.wa {
  /* El marco sólo centra. La tarjeta se ajusta a su contenido y flota, como
     en la barra lateral del panel real: estirarla a los 206px del marco
     dejaba 96px de vacío debajo de 68px de contenido. */
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: 12px;
  font-size: .44rem; line-height: 1.4;
}
.wa svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }

.wa-card {
  grid-area: 1 / 1;
  width: 100%;                       /* alto: el de su contenido */
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(0, 238, 255, .22); border-radius: 12px;
  background: linear-gradient(180deg, rgba(12, 18, 26, .96), rgba(7, 11, 16, .96));
  box-shadow: 0 14px 36px -24px rgba(0, 238, 255, .65);
}

/* ── cabecera ────────────────────────────────────────────────────────────── */
.wa-head { flex: none; display: flex; align-items: center; gap: 5px; }
.wa-ico {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgba(94, 231, 154, .5); color: var(--a-green);
}
.wa-ico svg { width: 9px; height: 9px; }
/* Un anillo que sale una vez al conectar. Es el remate del momento. */
.wa-ico::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--a-green);
  opacity: 0; transform: scale(1);
}
.wa-ico.late::after { animation: waRing .9s var(--e-out) 1; }
@keyframes waRing {
  from { opacity: .9; transform: scale(1); }
  to   { opacity: 0; transform: scale(2.4); }
}
.wa-head b { font-size: .5rem; font-weight: 600; color: var(--w); }
.wa-badge {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 999px;
  border: 1px solid rgba(94, 231, 154, .4); background: rgba(94, 231, 154, .08);
  font-size: .4rem; color: var(--a-green);
  opacity: 0; transform: scale(.8);
  transition: opacity .24s var(--e-out), transform .24s var(--e-out);
}
.wa-badge i { width: 3px; height: 3px; border-radius: 50%; background: var(--a-green); }
.wa-badge.on { opacity: 1; transform: none; }

/* ── las dos escenas, apiladas ───────────────────────────────────────────── */
/* Sin flex:1: el alto lo fija la más alta de las dos escenas apiladas,
   que difieren en 2px, así que al cambiar de escena no salta. */
.wa-stage { display: grid; }
.wa-esc {
  /* El contenido arranca pegado a la cabecera, como en la tarjeta real del
     panel. Antes iba centrado en vertical y dejaba un hueco raro justo debajo
     de «WhatsApp». */
  grid-area: 1 / 1;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 6px;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 6px, 0);
  transition: opacity .28s var(--e-out), transform .28s var(--e-out), visibility 0s .28s;
}
.wa-esc.on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .32s var(--e-out), transform .32s var(--e-out), visibility 0s;
}

.wa-desc { color: var(--muted-2); }

.wa-check { display: flex; align-items: flex-start; gap: 5px; color: var(--muted-3); }
.wa-check b { color: var(--muted); font-weight: 600; }
.wa-box {
  flex: none; display: grid; place-items: center;
  width: 9px; height: 9px; border-radius: 3px;
  border: 1px solid var(--line-2); color: var(--cy-ink);
  transition: background-color .16s var(--e-out), border-color .16s var(--e-out);
}
.wa-box svg { width: 6px; height: 6px; stroke-width: 3.4; opacity: 0; transform: scale(.5);
              transition: opacity .16s var(--e-out), transform .16s var(--e-out); }
.wa-check.on .wa-box { background: var(--cy); border-color: var(--cy); }
.wa-check.on .wa-box svg { opacity: 1; transform: none; }

.wa-btn {
  align-self: stretch; display: grid; place-items: center;
  height: 17px; border-radius: 999px;
  background: var(--cy); color: var(--cy-ink);
  font-size: .5rem; font-weight: 700;
  transition: transform .12s var(--e-out), box-shadow .12s var(--e-out);
}
.wa-btn.pulsa { transform: scale(.94); box-shadow: 0 0 0 4px rgba(0, 238, 255, .18); }

/* ── estado conectado ────────────────────────────────────────────────────── */
.wa-num {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .82rem; font-weight: 700; letter-spacing: -.01em; color: var(--w);
  min-height: 12px;
}
.wa-help { color: var(--muted-3); }
.wa-probar, .wa-links {
  display: flex; align-items: center; gap: 5px;
  opacity: 0; transform: translate3d(0, 4px, 0);
  transition: opacity .3s var(--e-out), transform .3s var(--e-out);
}
.wa-probar.on, .wa-links.on { opacity: 1; transform: none; }
.wa-inp {
  flex: 1; min-width: 0; height: 14px; padding: 0 6px;
  display: flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: 5px;
  background: rgba(255, 255, 255, .03);
  font-style: normal; color: var(--muted-3);
  white-space: nowrap; overflow: hidden;
}
.wa-inp-b {
  flex: none; height: 14px; padding: 0 8px;
  display: flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-style: normal; color: var(--muted);
}
.wa-links { justify-content: space-between; }
.wa-links i { font-style: normal; color: var(--cy); white-space: nowrap; }
.wa-links i.sub { color: var(--muted-3); text-decoration: underline; }

/* ── la ventana de Meta ──────────────────────────────────────────────────── */
.wa-scrim {
  /* z-index explícito y OBLIGATORIO. El velo está posicionado y la ventana es
     un elemento de rejilla estático: sin z-index, el orden de pintado coloca
     lo posicionado (paso 8) por encima del contenido en flujo (pasos 4-7),
     así que este 68% de negro caía ENCIMA de la ventana y apagaba todo su
     color. El orden en el DOM no lo arregla. */
  position: absolute; inset: 0; z-index: 1; border-radius: 12px;
  background: rgba(2, 5, 8, .68);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--e-out), visibility 0s .3s;
}
.wa-scrim.on { opacity: 1; visibility: visible; transition: opacity .3s var(--e-out), visibility 0s; }

.wa-meta {
  /* En la misma celda de la rejilla que la tarjeta: así queda centrada encima
     sin calcular posiciones a mano, y sigue entrando con transform. */
  grid-area: 1 / 1; width: 80%; justify-self: center;
  z-index: 2;                        /* por encima del velo (z-index funciona
                                        en elementos de rejilla sin position) */
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 9px 9px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  background: linear-gradient(180deg, #1c2431, #141a24);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  /* Entra con transform, no cambiando alto: animar `height` fuerza recálculo
     de disposición en cada fotograma. */
  /* Sin animar la opacidad: al hacerlo, durante la entrada la ventana quedaba
     translúcida y se veía la tarjeta a través de ella. Entra y sale sólo
     desplazándose, siempre opaca, que es como se comporta una ventana real. */
  transform: translate3d(0, 130%, 0);
  visibility: hidden;
  transition: transform .42s var(--e-out), visibility 0s .42s;
}
.wa-meta.on {
  transform: none; visibility: visible;
  transition: transform .42s var(--e-out), visibility 0s;
}
.wa-meta-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.wa-meta-top b {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .5rem; font-weight: 700; letter-spacing: -.01em; color: rgba(255,255,255,.92);
}
.wa-meta-top i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); }
.wa-meta-h { font-size: .46rem; color: rgba(255, 255, 255, .62); }

.wa-op {
  display: flex; align-items: center; gap: 5px;
  height: 15px; padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px;
  color: rgba(255, 255, 255, .88);
  transition: border-color .16s var(--e-out), background-color .16s var(--e-out);
}
.wa-op i {
  margin-left: auto; flex: none;
  display: grid; place-items: center;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .26); color: #10202c;
  transition: background-color .16s var(--e-out), border-color .16s var(--e-out);
}
.wa-op i svg { width: 6px; height: 6px; stroke-width: 3.4; opacity: 0;
               transition: opacity .16s var(--e-out); }
.wa-op.sel { border-color: var(--cy); background: rgba(0, 238, 255, .1); }
.wa-op.sel i { background: var(--cy); border-color: var(--cy); }
.wa-op.sel i svg { opacity: 1; }

.wa-meta-b {
  margin-top: 1px; display: grid; place-items: center;
  height: 15px; border-radius: 5px;
  background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .55);
  font-size: .46rem; font-weight: 700;
  transition: background-color .2s var(--e-out), color .2s var(--e-out),
              transform .12s var(--e-out);
}
.wa-meta-b.viva {
  /* Azul de marca actual de Meta. El anterior (#0a7cff) daba 3,93:1 con
     el blanco encima, por debajo del 4,5 exigible a este tamaño; éste
     da 4,8 y además es el color de marca vigente. */
  background: #0866ff; color: #fff;
}
.wa-meta-b.pulsa { transform: scale(.94); }

/* ── el puntero (lo comparten la tarjeta 01 y la 03) ────────────────────
   Mismo patrón que el puntero del hero: el TAMAÑO va en el envoltorio y el
   svg ocupa el 100% de él.

   Iba directo sobre el <svg> y salía gigante y gris. Dos causas:
   · `.wa svg { width:100%; height:100% }` es (0,1,1) y `.wa-cur` sólo (0,1,0),
     así que ganaba la genérica y el puntero se estiraba a todo el marco.
   · esa misma regla impone fill:none/stroke:currentColor, y el CSS pisa los
     atributos de presentación del símbolo (fill="#000" stroke="#fff"), que
     son los que le dan la silueta de puntero.
   Por eso el color se vuelve a declarar aquí, después y con la misma
   especificidad, en vez de confiar en los atributos del símbolo. */
.wa-cur, .reg-cur {
  position: absolute; top: 0; left: 0;
  width: 11px; height: 15px;
  translate: var(--cx, 50%) var(--cy2, 50%);
  opacity: 0; z-index: 5; pointer-events: none;
  transition: translate .42s var(--e-io), opacity .2s var(--e-out),
              scale .12s var(--e-out);
}
.wa-cur svg, .reg-cur svg {
  width: 100%; height: 100%;
  fill: #04191c; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .65));
}
.wa-cur.on, .reg-cur.on { opacity: 1; }
.wa-cur.tap, .reg-cur.tap { scale: .82; }

/* El anillo del clic: sin él, a este tamaño no se distingue que ha pulsado. */
.wa-cur::after, .reg-cur::after {
  content: ''; position: absolute; left: 1px; top: 2px;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 1.5px solid var(--cy); opacity: 0;
}
.wa-cur.tap::after, .reg-cur.tap::after { animation: waTap .5s var(--e-out); }
@keyframes waTap {
  0%   { opacity: .95; transform: scale(.3); }
  100% { opacity: 0; transform: scale(2.3); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-esc, .wa-badge, .wa-box, .wa-box svg, .wa-btn, .wa-probar, .wa-links,
  .wa-scrim, .wa-meta, .wa-op, .wa-op i, .wa-op i svg, .wa-meta-b { transition: none; }
  .wa-cur, .reg-cur { display: none; }
  .wa-ico.late::after { animation: none; }
}

@media (max-width: 980px) {
  .wa { max-width: 340px; margin-inline: auto; }
}

/* ── foco en la tarjeta que está corriendo ───────────────────────────────
   Se atenúa TODO MENOS EL TEXTO. El título y el párrafo se quedan a plena
   opacidad a propósito: el párrafo va en --muted-2, que ya es blanco al 64%,
   y bajarlo aunque sea a 0,7 lo deja por debajo del 4,5:1 exigible. Lo que
   se apaga es la maqueta, la placa del número y el cromo de la tarjeta, que
   son decoración y no tienen mínimo de contraste que cumplir.

   La clase `por-turnos` la pone el director: sin JS, o con reduced-motion,
   no se atenúa nada. */
.por-turnos .paso-ilu,
.por-turnos .paso-n,
.por-turnos .paso::after {
  transition: opacity .5s var(--e-out);
}
.por-turnos .paso:not(.en-turno) .paso-ilu { opacity: .26; }
/* 0,65 y no menos: medido, al 0,55 la placa da 4,29:1 y se cae del 4,5
   exigible; al 0,60 justo pasa (4,83) y al 0,65 queda margen (5,37). */
.por-turnos .paso:not(.en-turno) .paso-n   { opacity: .65; }
.por-turnos .paso:not(.en-turno)::after    { opacity: .18; }
.por-turnos .paso:not(.en-turno) {
  border-color: var(--line-3);
  transition: border-color .5s var(--e-out);
}
.por-turnos .paso.en-turno {
  border-color: rgba(0, 238, 255, .28);
  transition: border-color .5s var(--e-out);
}
/* Al pasar el ratón por una apagada se ve entera, por si alguien quiere
   mirarla sin esperar su turno. */
.por-turnos .paso:not(.en-turno):hover .paso-ilu { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .por-turnos .paso-ilu, .por-turnos .paso-n, .por-turnos .paso::after { transition: none; }
}

/* ── control de las animaciones por turnos ───────────────────────────────
   Discreto pero real: botón de verdad, enfocable, con nombre accesible que
   cambia, y 28px de alto para cumplir el tamaño mínimo de objetivo. */
.fin-ctrl { margin-top: 12px; display: flex; justify-content: flex-end; }
.fin-pausa {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 28px; padding: 5px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: var(--muted-2);
  font: inherit; font-size: .78rem; cursor: pointer;
  transition: color .18s var(--e-out), border-color .18s var(--e-out);
}
.fin-pausa:hover { color: var(--w); border-color: rgba(0, 238, 255, .35); }
.fin-pausa:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
.fin-pausa svg { width: 11px; height: 11px; flex: none; }
.fin-play-ico { display: none; }
.fin-pausa.en-pausa .fin-pausa-ico { display: none; }
.fin-pausa.en-pausa .fin-play-ico { display: block; }

/* Sin movimiento no hay bucle que parar, así que el botón sobra. */
@media (prefers-reduced-motion: reduce) { .fin-ctrl { display: none; } }

/* ==================================== CROMO HUD + MICRO-INTERACCIONES
   Los corchetes de esquina son el marcador propio del estilo HUD/FUI que la
   base de estilos identifica para esta paleta. Se dibujan con ocho degradados
   sobre un ::after, sin añadir un solo elemento al marcado.

   Al aplicarse a las tarjetas de TODAS las secciones de abajo, hacen que se
   lean como piezas del mismo instrumento en vez de bloques sueltos. Ése es el
   hilo que une, y no cuesta una línea de página entera. */
.hud { position: relative; }
.hud::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  border-radius: inherit;
  --br: 13px;                      /* largo del brazo del corchete */
  --brc: rgba(0, 238, 255, .40);
  background-image:
    linear-gradient(var(--brc), var(--brc)), linear-gradient(var(--brc), var(--brc)),
    linear-gradient(var(--brc), var(--brc)), linear-gradient(var(--brc), var(--brc)),
    linear-gradient(var(--brc), var(--brc)), linear-gradient(var(--brc), var(--brc)),
    linear-gradient(var(--brc), var(--brc)), linear-gradient(var(--brc), var(--brc));
  background-size:
    var(--br) 1px, 1px var(--br), var(--br) 1px, 1px var(--br),
    var(--br) 1px, 1px var(--br), var(--br) 1px, 1px var(--br);
  background-position:
    0 0, 0 0, 100% 0, 100% 0,
    0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  opacity: .55;
  transition: opacity .18s var(--e-out);
}

/* Micro-interacción: 2px de elevación y los corchetes encendiéndose.
   0.18s porque el recorrido es menor de 40px, que es lo que marca la tabla de
   duraciones por distancia. */
.hud {
  transition: transform .18s var(--e-out), border-color .18s var(--e-out),
              box-shadow .18s var(--e-out);
}
.hud:hover {
  transform: translate3d(0, -2px, 0);
  border-color: rgba(0, 238, 255, .3);
  box-shadow: 0 10px 30px -18px rgba(0, 238, 255, .55);
}
.hud:hover::after { opacity: 1; --brc: rgba(0, 238, 255, .85); }

/* Hubo aquí un barrido de escaneo, del catálogo HUD. Se quitó: arrancaba en
   translateY(-110%), o sea FUERA de la tarjeta, y sin recorte se veía como un
   bloque cian flotando encima; congelado quedaba permanente. Recortarlo pedía
   overflow:hidden, que a su vez se comía los corchetes (van en inset:-1px).
   Por la prueba de motion-decisions.md era decoración —no enseña nada que el
   visitante no sepa ya— y la decoración es lo primero que se corta. */

/* Marcador técnico: una etiqueta monoespaciada diminuta en la esquina, del
   catálogo HUD. Sólo donde aporta un dato, nunca de adorno vacío. */
.hud[data-hud]::after { }
.hud-mark {
  position: absolute; top: 10px; right: 13px; z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: .52rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-3);
  transition: color .18s var(--e-out);
}
.hud:hover .hud-mark { color: var(--cy); }

@media (prefers-reduced-motion: reduce) {
  .hud, .hud::after, .hud-mark { transition: none; }
  .hud:hover { transform: none; }
}

/* ==================================== ENCIENDES UNA COSA (.enc)
   Calcada del diseño de referencia. Un mando con tres interruptores a la
   izquierda y cinco tarjetas a la derecha; al encender uno, las tarjetas a
   las que afecta se iluminan y cambian de estado. Todo el marcado conserva
   los ganchos del motor (.enc-sw, .enc-nodo, [data-estado], .vivo, .pulso). */

/* ── cabecera ───────────────────────────────────────────────────────────── */
.enc-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: var(--r-full);
  border: 1px solid rgba(0,238,255,.45); background: rgba(0,238,255,.07);
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cy);
}
.enc-badge svg { width: 14px; height: 14px; }
/* .enc-h ya no necesita nada propio: su estilo es ahora el de .h2, que lo
   heredan las nueve secciones. */
.enc-rule {
  display: block; width: 150px; height: 2px; margin: 26px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cy), transparent);
  box-shadow: 0 0 16px 2px rgba(0,238,255,.45);
}
.enc-head { margin-bottom: clamp(30px, 4vw, 48px); }

/* ── los dos paneles ────────────────────────────────────────────────────── */
.enc-in {
  display: grid; grid-template-columns: minmax(280px, 28%) minmax(0, 1fr);
  gap: 20px; align-items: stretch;
}
.enc-mando, .enc-red {
  padding: clamp(16px, 1.8vw, 24px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

/* ── el mando ───────────────────────────────────────────────────────────── */
.enc-mando { display: grid; gap: 13px; align-content: start; }
.enc-mando-t {
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-3); margin-bottom: 8px;
}
.enc-sw {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 11px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: rgba(255,255,255,.03); color: var(--muted-2);
  transition: border-color .25s var(--e-out), background-color .25s var(--e-out),
              transform .18s var(--e-out);
}
.enc-sw:hover { border-color: var(--line-3); transform: translateX(2px); }
.enc-sw:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
.enc-sw-ico {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(0,0,0,.35);
  color: var(--cy);
}
.enc-sw-ico svg { width: 22px; height: 22px; }
.enc-sw-txt { flex: 1; min-width: 0; }
.enc-sw-txt b { display: block; font-size: .98rem; font-weight: 600; color: var(--w);
                transition: color .25s var(--e-out); }
.enc-sw-txt em { display: block; margin-top: 3px; font-style: normal;
                 font-size: .78rem; color: var(--muted-3); }
.enc-sw.on { border-color: rgba(0,238,255,.6); background: rgba(0,238,255,.08); }
.enc-sw.on .enc-sw-txt b { color: var(--cy); }

/* el interruptor: a la derecha, como en la referencia */
.enc-led {
  position: relative; flex: none; margin-left: auto;
  width: 50px; height: 28px; border-radius: 99px;
  border: 1px solid var(--line-3); background: rgba(0,0,0,.4);
  transition: border-color .25s var(--e-out), background-color .25s var(--e-out);
}
.enc-led::after {
  content: ''; position: absolute; top: 50%; left: 4px;
  width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  background: var(--muted-3);
  transition: transform .28s var(--e-out), background-color .25s var(--e-out),
              box-shadow .25s var(--e-out);
}
.enc-sw.on .enc-led { border-color: var(--cy); background: rgba(0,238,255,.85); }
.enc-sw.on .enc-led::after {
  transform: translateX(20px);
  background: #eafeff; box-shadow: 0 0 10px 1px rgba(0,238,255,.8);
}

/* ── las tarjetas ───────────────────────────────────────────────────────── */
.enc-red {
  list-style: none;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
.enc-nodo {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto auto auto 1fr;
  justify-items: center; text-align: center;
  padding: 24px 12px 16px; min-height: 244px;
  border: 1px solid var(--line-2); border-radius: 16px;
  background: rgba(255,255,255,.02);
  transition: border-color .3s var(--e-out), background .3s var(--e-out),
              transform .3s var(--e-out);
}
.enc-nodo-ico {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  color: var(--muted-2);
  transition: border-color .3s var(--e-out), background-color .3s var(--e-out),
              color .3s var(--e-out);
}
.enc-nodo-ico svg { width: 26px; height: 26px; }
.enc-nodo b { margin-top: 16px; font-size: 1.05rem; font-weight: 600; color: var(--w); }
.enc-nodo span[data-estado] {
  margin-top: 6px; font-size: .8rem; line-height: 1.4; color: var(--muted-2);
  transition: color .3s var(--e-out);
}
/* El número grande y tenue con su barrita, abajo a la izquierda. Es decoración
   (aria-hidden) y por eso puede ir tan apagado como en la referencia. */
.enc-num {
  align-self: end; justify-self: start;
  display: flex; align-items: center; gap: 8px; margin-top: 22px;
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-style: normal;
  font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em;
  color: rgba(255,255,255,.16);
}
.enc-num::after {
  content: ''; width: 22px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.14);
  transition: background-color .3s var(--e-out);
}
/* la tarjeta que se ha enterado */
.enc-nodo.vivo {
  border-color: rgba(0,238,255,.55);
  background: linear-gradient(180deg, rgba(0,238,255,.12), rgba(0,238,255,.03));
  transform: translateY(-2px);
}
.enc-nodo.vivo .enc-nodo-ico {
  border-color: rgba(0,238,255,.55); background: rgba(0,238,255,.08); color: var(--cy);
}
.enc-nodo.vivo span[data-estado] { color: var(--w); }
.enc-nodo.vivo .enc-num::after { background: var(--cy); }
/* el pulso que recorre la tarjeta cuando cambia */
.enc-nodo::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(0,238,255,.28), transparent 80%);
  transform: translateX(-110%); pointer-events: none;
}
.enc-nodo > * { position: relative; z-index: 1; }
.enc-nodo.pulso::before { animation: encPulso .62s var(--e-out) var(--retardo, 0ms); }
@keyframes encPulso { to { transform: translateX(110%); } }

/* ── la barra inferior ──────────────────────────────────────────────────── */
.enc-pie {
  margin-top: 20px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(16px, 2.4vw, 30px);
  padding: clamp(16px, 1.9vw, 22px) clamp(18px, 3vw, 40px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.enc-pie-ico {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(0,238,255,.4);
  background: radial-gradient(circle, rgba(0,238,255,.22), rgba(0,238,255,.05) 70%);
  box-shadow: 0 0 22px 2px rgba(0,238,255,.18);
  color: var(--cy);
}
.enc-pie-ico svg { width: 28px; height: 28px; }
.enc-pie-txt b { display: block; font-size: 1.02rem; font-weight: 600; color: var(--w); }
.enc-pie-txt span { display: block; margin-top: 4px; font-size: .96rem; color: var(--muted-2); }
.enc-viz { display: flex; align-items: center; }
.enc-viz-o {
  flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  color: var(--muted-2);
}
.enc-viz-o svg { width: 22px; height: 22px; }
.enc-viz-l { flex: none; width: clamp(48px, 7vw, 140px); height: 0; border-top: 2px dashed rgba(0,238,255,.32); }
.enc-viz-x { flex: none; width: 22px; height: 22px; margin: 0 12px; color: var(--cy); }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  /* Los dos paneles lado a lado sólo mantienen las proporciones de la
     referencia a partir de 1400px. Medido: a 1340 el mando cae a 345px y la
     fila del interruptor sube de 72 a 92 (título partido); a 1250 sube a 117
     y las tarjetas quedan en 140x364, estiradas por la altura del mando.
     Apilado, cada pieza conserva su tamaño de referencia: interruptores en
     tres columnas y tarjetas en 3+2 (la rejilla fluida daba 4+1 con una
     huérfana). */
  .enc-in { grid-template-columns: 1fr; }
  .enc-mando { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .enc-mando-t { grid-column: 1 / -1; }
  .enc-red { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .enc-nodo { min-height: 220px; }
}
@media (max-width: 1149px) {
  /* Tres columnas de interruptores necesitan ≥325px cada una: a 1100 se
     quedaban en 306 y la fila subía a 97; a 900, a 117. Una columna. */
  .enc-mando { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .enc-mando { grid-template-columns: 1fr; }
  .enc-red { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* cinco tarjetas a dos columnas dejan la última sola: que ocupe el ancho */
  .enc-nodo:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .enc-pie { grid-template-columns: auto minmax(0, 1fr); }
  .enc-viz { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 400px) {
  .enc-sw-ico { width: 44px; height: 44px; }
  .enc-nodo-ico { width: 56px; height: 56px; }
  .enc-nodo { padding: 20px 10px 14px; }
  .enc-num { font-size: 1.6rem; }
  .enc-pie-ico { width: 54px; height: 54px; }
  .enc-viz-o { width: 46px; height: 46px; }
  /* Medido estrechando el contenedor: el ancho mínimo de la tarjeta lo fijaba
     una palabra larga sin punto de corte («existencias», «WhatsApp»), que
     dejaba el suelo de la sección en ~302px. Partiendo palabra baja a ~270 y
     queda margen por debajo de los 320 del móvil más estrecho que existe. */
  .enc-nodo span[data-estado], .enc-sw-txt b, .enc-sw-txt em { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .enc-sw, .enc-led, .enc-led::after, .enc-nodo, .enc-nodo-ico,
  .enc-nodo span[data-estado], .enc-num::after, .enc-sw-txt b { transition: none; }
  .enc-nodo.pulso::before { animation: none; }
}

/* ==================================== CONTESTAR NO ES HACER (.hace)
   Dos columnas que avanzan a la vez. Izquierda: burbujas de conversación.
   Derecha: lo que va quedando hecho, con su palomita dibujándose. En medio,
   tres chevrones que empujan de una a otra.

   La altura de las dos listas está reservada desde el principio (min-height):
   si creciera con cada mensaje, la página daría tirones mientras se reproduce. */
.hace-in {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 38px); align-items: stretch;
}
.hace-t {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-3);
}
.hace-t svg { width: 13px; height: 13px; }
.hace-chat, .hace-lado {
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--d-surf);
  min-height: 372px;                 /* reservado: no da tirones al llenarse */
}
.hace-lado { background: linear-gradient(180deg, rgba(0,238,255,.05), rgba(0,238,255,.01)); }

/* ── la conversación ────────────────────────────────────────────────────── */
.hace-msgs { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.hace-msgs li {
  max-width: 86%; padding: 9px 13px;
  border-radius: 14px; font-size: .84rem; line-height: 1.45;
  /* Sin fill-mode 'both': si la animación no llegara a correr, con 'both'
     el elemento se quedaría en opacidad 0 para siempre. Así el estado en
     reposo es «visible» y la animación sólo lo introduce. */
  animation: haceEntra .34s var(--e-out);
}
.hace-msgs li.cli {
  align-self: flex-start; border-bottom-left-radius: 5px;
  background: rgba(255,255,255,.06); color: var(--w);
}
.hace-msgs li.bot {
  align-self: flex-end; border-bottom-right-radius: 5px;
  background: rgba(0,238,255,.13); border: 1px solid rgba(0,238,255,.26);
  color: var(--w);
}
@keyframes haceEntra { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ── lo que quedó hecho ─────────────────────────────────────────────────── */
.hace-hechos { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hace-hechos li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  font-size: .82rem; line-height: 1.45; color: var(--muted-2);
  animation: haceEntra .34s var(--e-out);
}
.hace-hechos li b { color: var(--w); font-weight: 600; }
/* la palomita se dibuja, no aparece */
.hace-tick { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.hace-tick path {
  fill: none; stroke: var(--a-green); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 0;   /* en reposo: dibujada */
  animation: haceTick .38s var(--e-out) .12s;
}
@keyframes haceTick { from { stroke-dashoffset: 22; } }

/* ── los chevrones del medio ────────────────────────────────────────────── */
.hace-flecha {
  align-self: center; display: flex; flex-direction: column; gap: 5px;
}
.hace-flecha span {
  width: 9px; height: 9px; border-right: 2px solid var(--line-3);
  border-bottom: 2px solid var(--line-3); transform: rotate(-45deg);
  opacity: .35;
}
.hace.corre .hace-flecha span { animation: haceEmpuja 1.5s var(--e-out) infinite; }
.hace.corre .hace-flecha span:nth-child(2) { animation-delay: .16s; }
.hace.corre .hace-flecha span:nth-child(3) { animation-delay: .32s; }
@keyframes haceEmpuja {
  0%, 100% { opacity: .25; border-color: var(--line-3); }
  40%      { opacity: 1;   border-color: var(--cy); }
}

/* ── el remate ──────────────────────────────────────────────────────────── */
.hace-pie {
  margin-top: var(--sp-6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 26px;
}
.hace-marca {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 600; color: var(--muted-2);
}
.hace-marca b { color: var(--cy); font-variant-numeric: tabular-nums; }
/* El punto separador es texto, así que también tiene que leerse: con
   --line-3 daba 1,11:1. */
.hace-marca i { font-style: normal; color: var(--muted-3); margin-inline: 6px; }
.hace-otra {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-full);
  background: transparent; color: var(--muted-2); cursor: pointer;
  font-size: .84rem;
  transition: color var(--t-micro) var(--e-out), border-color var(--t-micro) var(--e-out);
}
.hace-otra:hover { color: var(--w); border-color: var(--cy); }

@media (max-width: 900px) {
  .hace-in { grid-template-columns: 1fr; }
  .hace-flecha { flex-direction: row; justify-self: center; }
  .hace-flecha span { transform: rotate(45deg); }
  .hace-chat, .hace-lado { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hace-msgs li, .hace-hechos li { animation: none; }
  .hace-tick path { animation: none; stroke-dashoffset: 0; }
  .hace.corre .hace-flecha span { animation: none; }
}

/* ==================================== LO QUE NO SE SUMA (.verdad)
   Calcada de la referencia: dos tarjetas, la de la pasarela en cian y la de
   la marca a mano en gris, con el «≠» y sus anillos en el hueco entre ambas.

   Conserva los cuatro ganchos del motor de main.js, que no se toca:
     --k    (0→1) dibuja los anillos mientras suben las cifras
     --sep  empuja las dos tarjetas al separarse
     .roto  estado final: destello del borde superior y anillos encendidos
     .tv-num[data-fin] las cifras que cuenta el JS */
/* 1060 y no los 720 de serie: medido, el titular pide 994px para caber en
   UNA línea como en la referencia, y con 720 se partía en dos. */
.verdad .sec-head { max-width: 1060px; margin-bottom: clamp(30px, 4vw, 46px); }

.tv-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; margin-bottom: 22px; border-radius: var(--r-full);
  border: 1px solid rgba(0,238,255,.45); background: rgba(0,238,255,.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cy);
}
.tv-badge svg { width: 14px; height: 14px; }

/* ── las dos tarjetas ───────────────────────────────────────────────────── */
.tv {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: clamp(60px, 8vw, 130px);
  max-width: 1180px; margin-inline: auto;
  --k: 0;
}
.tv-col {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: rgba(255,255,255,.02);
  /* se acercan y se apartan de golpe; el signo lo pone cada tarjeta */
  transform: translate3d(calc(var(--dir) * var(--sep, 0px)), 0, 0);
}
.tv-a { --dir:  1; border-color: rgba(0,238,255,.42);
        background: linear-gradient(180deg, rgba(0,238,255,.07), rgba(0,238,255,.015)); }
.tv-b { --dir: -1; }

/* el destello del borde superior de la tarjeta cian */
.tv-a::before {
  content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cy-lit), transparent);
  opacity: var(--k, 0);
  box-shadow: 0 0 22px 3px rgba(0,238,255,.55);
  pointer-events: none;
}

.tv-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  color: var(--muted-2); margin-bottom: 20px;
}
.tv-ico svg { width: 22px; height: 22px; }
.tv-a .tv-ico {
  border-color: rgba(0,238,255,.45); background: rgba(0,238,255,.09); color: var(--cy);
}

.tv-lab {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); line-height: 1.5;
}
.tv-a .tv-lab { color: var(--cy); }

.tv-num {
  margin-top: 14px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--w);
}
.tv-a .tv-num { color: var(--cy); }

.tv-raya {
  display: block; width: 88px; height: 2px; margin: 22px 0;
  border-radius: 2px; background: var(--line-2);
}
.tv-a .tv-raya { background: var(--cy); }

.tv-sub { font-size: .95rem; line-height: 1.6; color: var(--muted-2); max-width: 34ch; }

/* ── el operador y sus anillos ──────────────────────────────────────────── */
.tv-eje { position: relative; width: 0; align-self: center; }
.tv-op, .tv-anillo {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
}
.tv-op {
  display: grid; place-items: center;
  width: 78px; height: 78px;
  border: 1px solid rgba(0,238,255,.55);
  background: radial-gradient(circle, rgba(0,238,255,.14), rgba(4,25,28,.9) 72%);
  z-index: 2;
}
.tv-op b {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2rem; font-weight: 500; color: var(--cy); line-height: 1;
}
/* Los anillos se dibujan con --k, que mueve el JS de 0 a 1 mientras las
   cifras suben: aparecen a la vez que el dato, no antes. */
.tv-anillo { border: 1px dashed rgba(0,238,255,.28); opacity: calc(var(--k, 0) * .9); }
.tv-anillo-a { width: 124px; height: 124px; scale: calc(.75 + var(--k, 0) * .25); }
.tv-anillo-b { width: 168px; height: 168px; scale: calc(.7 + var(--k, 0) * .3);
               border-color: rgba(0,238,255,.16); }
.verdad.roto .tv-op { box-shadow: 0 0 32px 2px rgba(0,238,255,.35); }

/* ── el separador con el rótulo ─────────────────────────────────────────── */
.tv-nota {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: clamp(26px, 3.4vw, 42px);
}
.tv-nota i {
  flex: 1; max-width: 210px; height: 1px; background: var(--line-2); position: relative;
}
.tv-nota i::after {
  content: ''; position: absolute; top: 50%; width: 4px; height: 4px;
  margin-top: -2px; border-radius: 50%; background: var(--line-2);
}
.tv-nota i:first-child::after { right: 0; }
.tv-nota i:last-child::after { left: 0; }
.tv-nota span {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-3); white-space: nowrap;
}

/* ── la cita de abajo ───────────────────────────────────────────────────── */
.tv-cita {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(18px, 2.4vw, 30px);
  max-width: 1180px; margin: clamp(24px, 3vw, 38px) auto 0;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: rgba(255,255,255,.02);
}
.tv-cita-ico {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  color: var(--muted-2);
}
.tv-cita-ico svg { width: 24px; height: 24px; }
/* El filete cian va DENTRO, entre el icono y el texto, como en la referencia */
.tv-cita-txt {
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--cy);
}
.tv-cita-txt p { font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.6; color: var(--w); }
.tv-cita-txt cite {
  display: block; margin-top: 12px; font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-3);
}
.tv-puntos {
  flex: none; width: 128px; height: 78px;
  background-image: radial-gradient(circle, rgba(0,238,255,.32) 1.2px, transparent 1.2px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
          mask-image: linear-gradient(90deg, transparent, #000 55%);
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  /* Apiladas, el operador pasa a ir entre las dos, en horizontal. */
  .tv { grid-template-columns: 1fr; gap: 74px; }
  .tv-eje { width: auto; height: 0; justify-self: center; }
  .tv-anillo-a { width: 108px; height: 108px; }
  .tv-anillo-b { width: 146px; height: 146px; }
  .tv-sub { max-width: none; }
}
@media (max-width: 620px) {
  .tv-cita { grid-template-columns: auto minmax(0, 1fr); }
  /* La rejilla de puntos le robaba ancho al párrafo: fuera. */
  .tv-puntos { display: none; }
  .tv-op { width: 66px; height: 66px; }
  .tv-op b { font-size: 1.7rem; }
  .tv-anillo-a { width: 94px; height: 94px; }
  .tv-anillo-b { width: 126px; height: 126px; }
  .tv-nota i { max-width: 70px; }
}
@media (max-width: 460px) {
  .tv-cita { grid-template-columns: 1fr; }
  .tv-ico, .tv-cita-ico { width: 46px; height: 46px; }
  .tv-raya { margin: 16px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-col { transform: none; }
}

/* ============================================== 15. MÓDULOS (bento bol) */

.mod.w3 { grid-column: span 3; }
.mod.w4 { grid-column: span 4; }
.mod.w6 { grid-column: span 6; }

.card-lit:hover .mod-ico { transform: translateY(-2px); background: rgba(0,238,255,.144); }
.mod-tags .t {
  font-family: 'JetBrains Mono', monospace; font-size: .62rem;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--muted-3);
}

@media (max-width: 1000px) { .bento { grid-template-columns: repeat(4, 1fr); } .mod, .mod.w3, .mod.w4 { grid-column: span 2; } .mod.w6 { grid-column: span 4; } }
@media (max-width: 620px)  { .bento { grid-template-columns: 1fr; } .mod, .mod.w3, .mod.w4, .mod.w6 { grid-column: span 1; } }

/* ================================================= 16. FLUUCORE (pipeline) */
/* ================================================= 17. CONSTRUCTOR DE BOL */
.bol { display: grid; grid-template-columns: 1fr 400px; gap: clamp(28px, 4vw, 52px); align-items: start; }

.pick[aria-pressed="true"] .pick-box { background: var(--cy); border-color: var(--cy); }
.pick[aria-pressed="true"] .pick-box svg { opacity: 1; transform: none; }

.bol-chips .chip { animation: chipIn .26s var(--e-out) both; }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px) scale(.94); } }
.bol-note .btn { margin-top: 16px; }

@media (max-width: 950px) { .bol { grid-template-columns: 1fr; } .bol-sum { position: static; } }

/* ================================================= 18. FRENTES / LLAVES */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tri .card { display: flex; flex-direction: column; }
.tri .num {
  font-family: 'JetBrains Mono', monospace; font-size: .68rem;
  letter-spacing: .16em; color: var(--cy-lit);
}
.tri h3 { margin-top: 16px; }
.tri p { margin-top: 10px; }
.tri .foot { margin-top: auto; padding-top: 22px; }
@media (max-width: 860px) { .tri { grid-template-columns: 1fr; } }

.keys {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #0d151d, #090d13 62%);
  padding: clamp(34px, 5vw, 66px);
  overflow: hidden;
}
.keys::before {
  content: ''; position: absolute; right: -12%; top: -40%;
  width: 620px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,238,255,.46), transparent 64%);
  filter: blur(22px); pointer-events: none;
}
@media (max-width: 880px) { .keys-in { grid-template-columns: 1fr; } }

/* ==================================================== 19. PROCESO (3 pasos) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.step { padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 34px); border-bottom: 1px solid var(--line); position: relative; }
.step + .step { border-left: 1px solid var(--line); }
.step::after {
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--cy-lit);
  transition: width .9s var(--e-out);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.steps.is-in .step::after { width: 100%; }
.step .n {
  font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700;
  letter-spacing: -.04em; color: var(--muted-3); line-height: 1;
}
.step h3 { margin-top: 20px; }
.step p { margin-top: 10px; }
.step .what { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-3); }
.step .what b { color: var(--muted); font-weight: 600; }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; }
  .step + .step { border-left: 0; }
}

/* ========================================================= 20. FAQ */
.faq { max-width: 820px; margin-inline: auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px; text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.12rem); font-weight: 600; letter-spacing: -.015em;
  color: var(--muted); line-height: 1.35;
  transition: color var(--t-micro) var(--e-out);
}
.qa-q:hover { color: var(--w); }
.qa-q .pm { width: 22px; height: 22px; flex: none; position: relative; }
.qa-q .pm::before, .qa-q .pm::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--cy-lit);
  translate: -50% -50%;
  transition: transform var(--t-in) var(--e-out), opacity var(--t-in) var(--e-out);
}
.qa-q .pm::before { width: 13px; height: 1.5px; }
.qa-q .pm::after  { width: 1.5px; height: 13px; }
.qa-q[aria-expanded="true"] { color: var(--w); }
.qa-q[aria-expanded="true"] .pm::after { transform: rotate(90deg); opacity: 0; }
/* grid-template-rows anima sin tocar layout de height */
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-panel) var(--e-io); }
.qa-a > div { overflow: hidden; }
.qa-a > div > p { padding: 0 4px 26px; max-width: 66ch; }
.qa-q[aria-expanded="true"] + .qa-a { grid-template-rows: 1fr; }

/* ======================================================== 21. CTA FINAL */
/* Los tres pasos, en línea: el camino completo cabe en un renglón. */
.cta-steps .n {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(0,238,255,.15); border: 1px solid rgba(0,238,255,.35);
  color: var(--cy-glow);
  font-family: 'JetBrains Mono', monospace; font-size: .66rem;
}

/* Bloque secundario: canal y API. Deliberadamente más callado que el principal. */
.cta-alt .form { margin-top: 0; }
@media (max-width: 880px) {
  .cta-alt { grid-template-columns: 1fr; }
  .cta-alt-copy { position: static; }
}

.cta { position: relative; overflow: hidden; }

.form { margin-top: 32px; display: grid; gap: 12px; text-align: left; }
.field label {
  display: block; margin-bottom: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  min-height: 50px;
  background: var(--d-sunk);
  border: 1px solid var(--color-border);
  border-radius: var(--r);
  color: var(--w);
  font-size: .95rem;
  transition: border-color var(--t-micro) var(--e-out), background-color var(--t-micro) var(--e-out);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.36); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,.34); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cy-lit);
  box-shadow: 0 0 0 3px rgba(0,238,255,.168);
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 40px;
}
.field .err { display: none; margin-top: 7px; color: #e2707d; font-size: .8rem; }
.field.bad input, .field.bad select { border-color: var(--bad); }
.field.bad .err { display: flex; align-items: center; gap: 6px; }
.field.bad .err::before { content: '!'; width: 14px; height: 14px; border-radius: 50%; background: var(--bad);
  color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; flex: none; }

.form-msg.ok  { color: var(--a-green); }
.form-msg.no  { color: #e2707d; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

/* ========================================================= 22. FOOTER */
.foot { border-top: 1px solid var(--line); background: var(--bg-deeper); padding-block: var(--sp-8) var(--sp-6); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.foot-brand .logo { height: 32px; }
.foot-brand p { margin-top: 18px; max-width: 300px; }
.foot .foot-h {
  font-family: 'JetBrains Mono', monospace; font-size: .66rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted-3);
  font-weight: 500; margin-bottom: 12px;
}
.foot ul { display: grid; gap: 2px; }
/* Área de clic de 24px con separación, no sólo la altura de la línea (SC 2.5.8). */
.foot ul a {
  display: inline-block; padding: 5px 0;
  font-size: .89rem; color: var(--muted-2);
  transition: color var(--t-micro) var(--e-out);
}
.foot ul a:hover { color: var(--w); }
.foot-legal {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--line-3);
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
}
.foot-legal .mono { color: var(--muted-3); }
/* Privacidad, Términos y Eliminación de datos. Van en la franja inferior y no
   en una cuarta columna para no tocar la rejilla de .foot-grid. Mismo cuerpo
   monoespaciado que el resto de la franja, y el área de clic de 24px que pide
   SC 2.5.8, igual que .foot ul a. */
.foot-legal-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-legal-links a {
  display: inline-block; padding: 5px 0;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  letter-spacing: .04em; color: var(--muted-2);
  transition: color var(--t-micro) var(--e-out);
}
.foot-legal-links a:hover { color: var(--w); }
.soc { display: flex; gap: 6px; }
.soc a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--line); color: var(--muted-2);
  transition: color var(--t-micro) var(--e-out), border-color var(--t-micro) var(--e-out),
              background-color var(--t-micro) var(--e-out);
}
.soc a:hover { color: var(--w); border-color: var(--line-2); background: rgba(255,255,255,.05); }
.soc svg { width: 16px; height: 16px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: span 2; } }

/* ============================================== 23. UTILIDADES FINALES */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  padding: 12px 18px; border-radius: var(--r);
  background: var(--cy); color: var(--cy-ink); font-weight: 650;
  transition: top var(--t-in) var(--e-out);
}
/* Cae por DEBAJO del aviso: es cian sobre cian y ahí no se vería. */
.skip:focus { top: calc(var(--bar-h, 0px) + 12px); }

.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
[hidden] { display: none !important; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   24. RÉPLICA DEL PANEL
   Calcada de app.sabnu.ai. Los tokens de abajo son los mismos nombres que usa
   el :root de la aplicación (--cy #00707f, Inter + Space Grotesk, --r 18px),
   así que la réplica coincide por construcción y no por aproximación.
   Todos los datos que aparecen son de demo.
   ========================================================================== */
.app {
  --p-bg:      #0b0f16;
  --p-surf:    #0f141d;
  --p-card:    #111823;
  --p-line:    rgba(255,255,255,.075);
  --p-line-2:  rgba(255,255,255,.14);
  --p-cy:      #00eeff;          /* cian de acción, igual que en el panel */
  --p-cy-soft: rgba(0,238,255,.14);
  --p-green:   #34d399;
  --p-amber:   #f0b429;
  --p-violet:  #a78bfa;
  --p-red:     #f87171;

  position: relative;
  border: 1px solid var(--p-line-2);
  border-radius: var(--r-xl);
  background: var(--p-bg);
  box-shadow: var(--sh-2), 0 0 100px -34px rgba(0,180,210,.5);
  overflow: hidden;
  font-size: 12.5px;
}

/* --- cromo de navegador --- */
.app-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--p-line);
  background: rgba(255,255,255,.02);
}
.app-dots { display: flex; gap: 6px; flex: none; }
.app-dots i { width: 9px; height: 9px; border-radius: 50%; background: #212b38; }
.app-url {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 14px; border-radius: var(--r-full);
  background: rgba(255,255,255,.04); border: 1px solid var(--p-line);
  font-family: 'JetBrains Mono', monospace; font-size: .68rem;
  letter-spacing: .04em; color: var(--muted-3);
}
.app-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: .62rem;
  letter-spacing: .14em; color: var(--a-green);
}

/* --- rejilla: barra lateral + contenido --- */
.app-body { display: grid; grid-template-columns: 168px 1fr; min-height: 0; }
.app-side {
  border-right: 1px solid var(--p-line);
  background: rgba(0,0,0,.26);
  padding: 12px 9px;
  display: flex; flex-direction: column; gap: 2px;
}
.app-side-logo { padding: 2px 10px 12px; }
.app-side-logo img { height: 19px; width: auto; }
.app-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 9px;
  font-size: .82rem; color: var(--muted-3);
  border: 1px solid transparent;
  transition: color var(--t-micro) var(--e-out), background-color var(--t-micro) var(--e-out),
              border-color var(--t-micro) var(--e-out);
}
.app-nav svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.app-nav.on {
  color: #fff; background: rgba(0,238,255,.09);
  border-color: rgba(0,238,255,.22);
}
.app-nav.on svg { color: var(--p-cy); opacity: 1; }
.app-nav.soon { opacity: .42; }
.app-nav .soon-tag {
  margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-size: .52rem; letter-spacing: .1em; color: var(--warn);
  border: 1px solid rgba(194,133,31,.5); border-radius: 5px; padding: 1px 4px;
}

.app-main { padding: 15px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* --- títulos del panel: media palabra en cian, como en la app --- */
.app-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1;
}
.app-h1 b { color: var(--p-cy); font-weight: 700; }
.app-note {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: .8rem; color: var(--muted-3); margin-top: 6px;
}
.app-note b { color: var(--w); font-weight: 600; }
.app-note .d { width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; }

/* --- tarjeta de KPI --- */
.kpi-sub .up { color: var(--a-green); }
.kpi-sub .dn { color: var(--muted-3); }
.kpi .spark { display: block; width: 100%; height: 30px; margin-top: 10px; overflow: visible; }
.kpi .spark path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- píldoras de filtro --- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-full);
  border: 1px solid var(--p-line); background: rgba(255,255,255,.025);
  font-size: .78rem; color: var(--muted-3);
}
/* Sin opacity: atenuaba justo el número, que es lo que hay que leer, y lo
   dejaba en 4,26:1 tanto sobre la superficie oscura como sobre el cian de
   la píldora activa. Ahora el conteo resalta en vez de apagarse. */
.pill b { font-size: .62rem; color: var(--muted-2); }
.pill.on b { color: inherit; }
.pill.on { background: var(--p-cy); border-color: transparent; color: #05202a; font-weight: 600; }

/* --- filas de lista / tabla --- */
.row {
  display: grid; gap: 12px; align-items: center;
  padding: 12px 14px; font-size: .82rem;
  border-bottom: 1px solid var(--line-3);
}
.row:last-child { border-bottom: 0; }
.av {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 600; letter-spacing: .02em;
  background: linear-gradient(150deg, #1c6b5a, #14493f); color: #d6fff4;
}
.av.b { background: linear-gradient(150deg, #1d5878, #143c52); color: #d6f0ff; }
.av.c { background: linear-gradient(150deg, #4b3f7a, #2e2750); color: #e2dcff; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: .68rem; border: 1px solid var(--p-line);
  background: rgba(255,255,255,.03); color: var(--muted-2); white-space: nowrap;
}
.tag i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

/* --- barra de puntuación (CRM) --- */
.score-bar.am i { background: var(--p-amber); }
.score-bar.vi i { background: var(--p-violet); }

/* --- tarjeta "crear con chat", el corazón del panel real --- */
.build {
  position: relative; overflow: hidden;
  padding: 17px 19px;
  border: 1px solid rgba(0,238,255,.24); border-radius: var(--r-lg);
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(0,238,255,.12), transparent 58%),
    var(--p-card);
}
.build .app-kicker { color: var(--p-cy); }
/* SABI vive en esta misma tarjeta dentro del panel real: aquí igual.
   Rejilla de dos columnas para que nunca se monte sobre el texto. */
.build { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px; align-items: center; }
/* Colocación explícita: si sólo se fija la columna del robot, el auto-placement
   manda el texto a una segunda fila y abre un hueco enorme. */
.build-body { min-width: 0; grid-column: 1; grid-row: 1; }
.build-sabi {
  grid-column: 2; grid-row: 1; width: 100%; height: auto; align-self: center;
  pointer-events: none; opacity: .95;
  filter: drop-shadow(0 10px 30px rgba(0,180,220,.34));
}
@media (max-width: 1320px) { .build { grid-template-columns: minmax(0, 1fr) 112px; } }
@media (max-width: 700px) { .build { grid-template-columns: 1fr; } .build-sabi { display: none; } }
.build .build-t {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: -.03em;
  margin-top: 9px;
}
.build-in {
  margin-top: 14px; display: flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 16px;
  border: 1px solid var(--p-line-2); border-radius: var(--r-full);
  background: rgba(0,0,0,.34);
}
.build-in .txt { flex: 1; min-width: 0; font-size: .86rem; color: var(--muted-2); white-space: nowrap; overflow: hidden; }
.build-in .txt.ghost { color: rgba(255,255,255,.34); }
.build-in .caret {
  width: 1.5px; height: 14px; background: var(--p-cy); flex: none;
  animation: blink 1.05s steps(2) infinite;
}
@media (prefers-reduced-motion: reduce) { .build-in .caret { animation: none; } }
.build-go {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 16px; border-radius: var(--r-full);
  background: var(--p-cy); color: var(--cy-ink); font-weight: 600; font-size: .78rem;
}
.build-go svg { width: 12px; height: 12px; }
.build-chips { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 7px; }
.build-chip {
  padding: 6px 12px; border-radius: var(--r-full);
  border: 1px solid var(--p-line); background: rgba(255,255,255,.03);
  font-size: .74rem; color: var(--muted-2);
  transition: color var(--t-micro) var(--e-out), background-color var(--t-micro) var(--e-out),
              border-color var(--t-micro) var(--e-out);
}
.build-chip.sel {
  color: var(--cy-ink); background: var(--p-cy); border-color: transparent; font-weight: 600;
}
.build-chip.blank { border-style: dashed; color: var(--muted-3); }

/* Cursor fantasma. Flecha de macOS (negra con contorno blanco, que es como la
   dibuja el sistema y por eso se ve sobre cualquier fondo) y mano al pulsar. */
.ghost {
  position: absolute; z-index: 6; width: 18px; height: 25px;
  pointer-events: none; opacity: 0;
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  transition: transform .6s var(--e-io), opacity .22s var(--e-out);
}
.ghost svg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.6));
  transition: opacity .12s linear;
}
.ghost .g-hand { opacity: 0; }
.ghost.mano .g-arrow { opacity: 0; }
.ghost.mano .g-hand  { opacity: 1; }
.ghost.on { opacity: 1; }
.ghost::after {
  content: ''; position: absolute; left: 1px; top: 3px;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 1.5px solid var(--p-cy); opacity: 0;
}
.ghost.tap::after { animation: tap .45s var(--e-out); }
@keyframes tap { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }
@media (prefers-reduced-motion: reduce) { .ghost { display: none; } }

/* --- responsive del panel --- */
@media (max-width: 900px) {
  .app-body { grid-template-columns: 1fr; }
  .app-side {
    flex-direction: row; overflow-x: auto; gap: 7px;
    border-right: 0; border-bottom: 1px solid var(--p-line);
    padding: 11px 14px; scrollbar-width: none;
  }
  .app-side::-webkit-scrollbar { display: none; }
  .app-side-logo { display: none; }
  .app-nav { flex: none; white-space: nowrap; border: 1px solid var(--p-line); border-radius: var(--r-full); padding: 7px 12px; }
  .app-nav .soon-tag { display: none; }
  .app-main { padding: 16px; }
  .app { font-size: 12px; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .app-url { display: none; }
}

/* ============================================================ 25. CONMUTADOR
   Pestañas a la izquierda, pantalla real a la derecha. Patrón de capta.co. */
/* Barra de progreso del avance automático */

.screen.on { display: block; animation: scrIn .34s var(--e-out) both; }
@keyframes scrIn { from { opacity: 0; transform: translateY(8px) scale(.988); } }
@media (prefers-reduced-motion: reduce) { .screen.on { animation: none; } }
.screen .app-body { grid-template-columns: 1fr; }

@media (max-width: 960px) {
  .switch { grid-template-columns: 1fr; }
  .switch-tabs {
    position: static; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr);
    overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  }
  .switch-tabs::-webkit-scrollbar { display: none; }
  .stab { grid-template-columns: 1fr; gap: 8px; }
  .stab-i { display: none; }
}

/* ==================================== CADA COSA NUEVA (.nuevo)
   Calcada de la referencia: a la izquierda el texto con la nota enmarcada, a
   la derecha el render de la plataforma, y debajo las cuatro tarjetas con su
   icono en círculo. */
.nu-top {
  /* Columnas iguales, y no 1/1.06, por una medida: la línea más larga del
     titular («y ya conoce tu negocio.») pide 599px y con 1.06 la columna de
     texto se quedaba en 600 a 1400px de ancho — un margen de 1px, que
     cualquier diferencia de renderizado rompe, partiendo el titular en cuatro
     líneas. Igualadas da 648 y el render pierde 3px, que no se notan. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(34px, 4.6vw, 62px);
}
.nu-txt .h2 em { font-style: normal; color: var(--cy); }
/* 56ch y no 46: medido, la primera frase pide 545px y con 46ch (491) se
   partía en tres líneas. Con 56ch (597) caben las dos frases en dos
   líneas, rompiendo en el punto como en la referencia, y sigue dentro de
   los 604px de la columna. */
.nu-lede { margin-top: 22px; max-width: 56ch; }

.nu-nota {
  display: flex; align-items: center; gap: 16px;
  margin-top: clamp(24px, 3vw, 38px); max-width: 52ch;
  padding: 18px 22px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: rgba(255,255,255,.02);
  font-size: .95rem; line-height: 1.55; color: var(--muted-2);
}
.nu-nota-ico {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(0,238,255,.42); background: rgba(0,238,255,.06);
  color: var(--cy);
}
.nu-nota-ico svg { width: 19px; height: 19px; }

/* El render. Sin fondo propio: el PNG lleva transparencia y su propio halo. */
.nu-arte { justify-self: end; width: 100%; }
.nu-arte img { display: block; width: 100%; height: auto; }

/* --- franja de "en desarrollo" --- */
.soon-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.soon-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
}
.soon-ico {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(0,238,255,.34);
  background: radial-gradient(circle, rgba(0,238,255,.13), rgba(0,238,255,.02) 70%);
  color: var(--cy); margin-bottom: 26px;
}
.soon-ico svg { width: 26px; height: 26px; }

/* Etiqueta de ESTADO de la tarjeta, no rótulo de sección.
   Ojo con el nombre: .soon-tag ya existe para los avisos del menú lateral de
   la réplica del panel; reutilizarlo le metía una rayita delante a cada uno.
   El color pasa de --warn (ámbar) a cian porque así va en la referencia. */
.soon-state {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cy);
}
.soon-state::before {
  content: ''; width: 20px; height: 1px; background: var(--cy);
}
.soon-t {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 700;
  letter-spacing: -.015em; color: var(--w); margin-top: 16px;
}
.soon-desc { font-size: .95rem; color: var(--muted-2); margin-top: 12px; line-height: 1.55; }

@media (max-width: 1400px) {
  /* Se apila donde las dos columnas dejan de funcionar de verdad: medido, a
     1340px la columna de texto cae a 573 y el titular necesita 599, así que
     rompía en cuatro líneas. Apilado, el titular tiene el ancho entero. */
  .nu-top { grid-template-columns: 1fr; }
  .nu-arte { justify-self: center; max-width: 620px; }
}
@media (max-width: 1080px) {
  .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  /* A este ancho los saltos forzados del titular partían la frase donde no
     toca; se anulan y deja que fluya. */
  .nu-txt .h2 br { display: none; }
  .soon-grid { grid-template-columns: 1fr; }
  .nu-nota { align-items: flex-start; padding: 16px 18px; }
  .soon-ico { width: 54px; height: 54px; margin-bottom: 20px; }
}

/* --- semana de la agenda --- */
.wday.on { background: var(--p-cy); border-color: transparent; }
.wday.on em, .wday.on b { color: #05202a; }
.wday.on i { background: #05202a; }

/* --- nota grande dentro de una pantalla --- */
/* --- barra "el agente contesta solo" --- */
.agentbar .toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; color: #86efac;
}
.agentbar .toggle i {
  width: 30px; height: 17px; border-radius: 99px; background: var(--p-green);
  position: relative; flex: none;
}
.agentbar .toggle i::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: #04150f;
}

/* ═══════════════════════════════════════════════ 26. HOY / CON SABNU
   El mismo caso contado dos veces. Patrón de capta.co: el dueño se reconoce
   en la columna de la izquierda antes de que le vendas nada. */

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.vs-case.on { display: contents; }

@keyframes vsIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .vs-card { animation: none; } }

.vs-card.hoy {
  border: 1px solid rgba(189,50,67,.26);
  background: linear-gradient(160deg, rgba(189,50,67,.08), transparent 62%), var(--d-surf);
}
.vs-card.hoy .vs-lab { color: #e2707d; }
.vs-card.hoy .vs-lab::before { background: linear-gradient(90deg, transparent, #e2707d); }

.vs-card.con {
  border: 1px solid rgba(0,238,255,.3);
  background: linear-gradient(160deg, rgba(0,238,255,.096), transparent 62%), var(--d-surf);
  box-shadow: 0 0 60px -26px rgba(0,238,255,.6);
}
.vs-card.con .vs-lab { color: var(--cy-glow); }

.vs-card.con p { color: #fff; }
.vs-card.con .vs-foot { color: #9beaf6; }
.vs-card.con .vs-foot svg { color: var(--a-green); }

@media (max-width: 820px) { .vs { grid-template-columns: 1fr; } }

/* ============================================================================
   27. ESCENAS DEL PANEL DEL HERO
   Dos pantallas reales encadenadas en bucle: Inicio (describes el agente) y
   Agente (hablas con Sabi y lo terminas de armar). Medidas tomadas del panel
   en vivo: columnas 268 / 850 / 352, píldoras a radio 100px, tarjetas a 18px.
   ========================================================================== */
/* Las dos escenas se apilan en la MISMA celda de rejilla. Así la altura del
   marco es siempre max(inicio, agente) y no cambia al pasar de una a otra ni
   al ir entrando mensajes. Se conmuta con visibility, no con display: si se
   ocultara con display:none la celda se recalcularía y volvería el salto. */
.app-stage { display: grid; }
.scene {
  grid-area: 1 / 1;
  display: grid;                 /* el hijo se estira a toda la celda */
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--e-out);
}
.scene.on { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scene { transition: none; } }

/* ── Pantalla del agente ─────────────────────────────────────────────────── */
.ag { display: grid; grid-template-columns: 158px minmax(0, 1fr) 176px; min-height: 0; }

.ag-rail {
  border-right: 1px solid var(--p-line); background: rgba(0,0,0,.26);
  padding: 12px 10px; display: flex; flex-direction: column; gap: 9px; min-width: 0;
}
.ag-logo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ag-logo img { height: 17px; width: auto; }
.ag-chip {
  font-family: 'JetBrains Mono', monospace; font-size: .5rem; letter-spacing: .1em;
  padding: 2px 6px; border-radius: 6px; border: 1px solid var(--p-line-2); color: var(--muted-3);
}
.ag-new {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 9px; border-radius: 13px;
  background: var(--p-cy); color: var(--cy-ink);
  font-family: 'Space Grotesk', sans-serif; font-size: .66rem; font-weight: 600;
  white-space: nowrap;
}
.ag-new svg { width: 12px; height: 12px; }
.ag-lab {
  font-family: 'JetBrains Mono', monospace; font-size: .48rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted-3); margin-top: 2px;
}
.ag-convs { display: grid; gap: 1px; }
.ag-convs li {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 8px;
  font-size: .68rem; color: var(--muted-3); white-space: nowrap; overflow: hidden;
}
.ag-convs li i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: none; opacity: .5; }
.ag-convs li span { margin-left: auto; font-size: .58rem; opacity: .7; flex: none; }
.ag-convs li b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ag-convs li.on { background: rgba(0,238,255,.09); color: #fff; }
.ag-convs li.on i { background: var(--p-cy); opacity: 1; }

.ag-sabus { margin-top: auto; padding: 9px 10px; border: 1px solid var(--p-line); border-radius: 12px; }
.ag-sabus div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.ag-sabus span { font-size: .6rem; color: var(--muted-3); }
.ag-sabus b { font-size: .6rem; color: var(--p-cy); font-family: 'JetBrains Mono', monospace; }
.ag-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.09); margin-top: 7px; overflow: hidden; }
.ag-bar i { display: block; height: 100%; width: 96%; background: linear-gradient(90deg, var(--p-cy), #7bf3ff); }

/* ── Centro: la conversación ─────────────────────────────────────────────── */
.ag-main { display: flex; flex-direction: column; padding: 12px 14px 11px; min-width: 0; gap: 10px; }
.ag-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--p-line);
}
.ag-h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: .95rem; font-weight: 700; letter-spacing: -.02em;
}
.ag-head .sub { display: block; font-size: .62rem; color: var(--muted-3); margin-top: 2px; }
.ag-seg {
  margin-left: auto; display: flex; gap: 3px; padding: 3px;
  border-radius: var(--r-full); border: 1px solid var(--p-line); background: rgba(255,255,255,.02);
}
.ag-seg span {
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: .66rem; color: var(--muted-3); white-space: nowrap;
}
.ag-seg span.on { background: var(--p-cy); color: var(--cy-ink); font-weight: 600; }
.ag-pub {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 5px 11px; border-radius: var(--r-full);
  font-size: .66rem; font-weight: 500;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--muted-2);
  transition: color var(--t-in) var(--e-out), border-color var(--t-in) var(--e-out),
              background-color var(--t-in) var(--e-out);
}
.ag-pub.listo {
  color: #3ee08f; border-color: rgba(62,224,143,.45); background: rgba(62,224,143,.1);
}

.ag-thread {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 11px; flex: 1; min-height: 0; overflow: hidden;
}
.ag-msg { display: flex; gap: 9px; align-items: flex-start; animation: msgIn .34s var(--e-out) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .ag-msg { animation: none; } }
.ag-msg.yo { justify-content: flex-end; }
.ag-msg.yo p {
  max-width: 78%; padding: 9px 13px; border-radius: 14px;
  background: rgba(255,255,255,.06); color: #fff; font-size: .76rem; line-height: 1.5;
}
.ag-av {
  width: 26px; height: 26px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--p-card); border: 1px solid rgba(0,238,255,.34);
  box-shadow: 0 0 14px -3px rgba(0,238,255,.5);
}
.ag-av img { width: 15px; height: auto; }
.ag-body { min-width: 0; }
.ag-name {
  font-family: 'JetBrains Mono', monospace; font-size: .56rem;
  letter-spacing: .18em; color: var(--muted-2); text-transform: uppercase;
}
.ag-body p { font-size: .76rem; line-height: 1.55; color: var(--muted); margin-top: 5px; max-width: 46ch; }
.ag-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ag-act {
  padding: 6px 12px; border-radius: var(--r-full);
  font-size: .68rem; border: 1px solid rgba(0,238,255,.3);
  background: rgba(0,238,255,.09); color: #9beaf6;
  transition: background-color var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out);
}
.ag-act.gris { border-color: var(--p-line-2); background: rgba(255,255,255,.03); color: var(--muted-3); }
.ag-act.pulsado { background: var(--p-cy); color: var(--cy-ink); border-color: transparent; font-weight: 600; }

/* tres puntos mientras Sabi escribe */
.ag-dots { display: inline-flex; gap: 4px; padding: 8px 2px; }
.ag-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted-3);
  animation: puntea 1.2s var(--e-io) infinite;
}
.ag-dots i:nth-child(2) { animation-delay: .15s; }
.ag-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes puntea { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ag-dots i { animation: none; opacity: .6; } }

.ag-comp {
  margin-top: auto; display: flex; align-items: center; gap: 9px;
  padding: 8px 8px 8px 14px; border-radius: 16px;
  border: 1px solid var(--p-line-2); background: rgba(0,0,0,.34);
}
.ag-comp .txt { flex: 1; min-width: 0; font-size: .74rem; color: rgba(255,255,255,.34); white-space: nowrap; overflow: hidden; }
.ag-send {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--p-cy); color: var(--cy-ink);
}
.ag-send svg { width: 12px; height: 12px; }
.ag-dis { font-size: .58rem; color: var(--muted-3); text-align: center; }

/* ── Rail derecho: el agente que se va llenando ──────────────────────────── */
.ag-side { border-left: 1px solid var(--p-line); padding: 12px 11px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ag-side-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ag-side-h span:first-child {
  font-family: 'JetBrains Mono', monospace; font-size: .48rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3);
}
.ag-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .56rem; color: #3ee08f;
}
.ag-live i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ag-card { padding: 10px 11px; border: 1px solid var(--p-line); border-radius: 14px; background: var(--p-card); }
.ag-who { display: flex; align-items: center; gap: 9px; }
.ag-who .av2 {
  width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, #0d8fa0, #095a68); color: #eafcff; font-weight: 600; font-size: .72rem;
}
.ag-who b { display: block; font-size: .76rem; }
.ag-who span { display: block; font-size: .6rem; color: var(--muted-3); }
.ag-card > p { font-size: .64rem; line-height: 1.5; color: var(--muted-3); margin-top: 9px; }
.ag-prog { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.09); margin-top: 9px; overflow: hidden; }
.ag-prog i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--p-cy), #7bf3ff);
  width: var(--p, 40%);
  transition: width .8s var(--e-out);
}
.ag-line {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px; border: 1px solid var(--p-line); border-radius: 12px;
  font-size: .66rem; color: var(--muted-2);
}
.ag-line i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted-3); flex: none; }
.ag-line .est { margin-left: auto; font-size: .58rem; color: var(--muted-3); }
.ag-line.ok i { background: var(--p-cy); }
.ag-line.ok .est { color: var(--p-cy); }
.ag-wa-h { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 600; }
.ag-wa-h svg { width: 14px; height: 14px; color: #25d366; flex: none; }
.ag-pill {
  margin-left: auto; padding: 2px 8px; border-radius: var(--r-full);
  font-size: .52rem; border: 1px solid var(--p-line-2); color: var(--muted-3);
  transition: color var(--t-in) var(--e-out), border-color var(--t-in) var(--e-out),
              background-color var(--t-in) var(--e-out);
}
.ag-pill.ok { color: #3ee08f; border-color: rgba(62,224,143,.45); background: rgba(62,224,143,.1); }
.ag-tel { font-size: .74rem; font-weight: 600; margin-top: 8px; }

@media (max-width: 1180px) { .ag { grid-template-columns: 138px minmax(0,1fr) 164px; } }
@media (max-width: 760px)  { .ag { grid-template-columns: 1fr; } .ag-rail, .ag-side { display: none; } }