/* ═══════════════════════════════════════════════════════════════════
   Deja de Trabajar — hoja de estilo
   Implementa DESIGN.md v1.0. Si cambias algo aquí, actualiza DESIGN.md primero.
   Monocromático por definición: no hay color de acento en este archivo.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-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/space-grotesk-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 Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/space-mono-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 Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/space-mono-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;
}

/* ── Tokens ───────────────────────────────────────────────────────── */
:root {
  --ink:            #0D0D0E;
  --ink-muted:      #5A5A57;
  --ink-subtle:     #8A8A85;
  --ink-faint:      #B8B7B1;
  --paper:          #F6F5F2;
  --surface-1:      #FFFFFF;
  --surface-2:      #EFEEE9;
  --surface-3:      #E6E4DE;
  --hairline:       #DDDBD4;
  --hairline-strong:#C4C2BA;

  /* La banda oscura es siempre oscura: es una decisión de marca, no de tema. */
  --dark-bg:        #0C0C0D;
  --dark-ink:       #F4F3EF;
  --dark-muted:     #9A9A95;
  --dark-hairline:  #242425;
  --dark-surface:   #141415;

  /* Vidrio. El especular es SIEMPRE luz — blanco a baja opacidad — no el color de
     superficie: una arista que recibe luz la recibe igual en tema claro que oscuro. */
  --glass-blur: 24px;
  --glass-tint: 62%;
  --specular: rgba(255, 255, 255, .72);
  --specular-soft: rgba(255, 255, 255, .28);

  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shell: 1120px;
  --gutter: 24px;
  /* Ojo: entre dos bandas contiguas el hueco es 2 × --sy, porque cada una aporta
     su padding. 68px aquí = 136px de separación real entre secciones. */
  --sy: 68px;
  --sy-t: 52px;
  --r: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:            #F4F3EF;
    --ink-muted:      #9A9A95;
    --ink-subtle:     #7E7E79;
    --ink-faint:      #555552;
    --paper:          #0C0C0D;
    --surface-1:      #141415;
    --surface-2:      #131314;
    --surface-3:      #1C1C1D;
    --hairline:       #242425;
    --hairline-strong:#353536;

    --dark-bg:        #1A1A1B;
    --dark-ink:       #F4F3EF;
    --dark-muted:     #9A9A95;
    --dark-hairline:  #2E2E2F;
    --dark-surface:   #222223;
    --glass-tint: 52%;
    --specular: rgba(255, 255, 255, .10);
    --specular-soft: rgba(255, 255, 255, .04);
  }
}

:root[data-theme="dark"] {
  --ink:            #F4F3EF;
  --ink-muted:      #9A9A95;
  --ink-subtle:     #7E7E79;
  --ink-faint:      #555552;
  --paper:          #0C0C0D;
  --surface-1:      #141415;
  --surface-2:      #131314;
  --surface-3:      #1C1C1D;
  --hairline:       #242425;
  --hairline-strong:#353536;

  --dark-bg:        #1A1A1B;
  --dark-ink:       #F4F3EF;
  --dark-muted:     #9A9A95;
  --dark-hairline:  #2E2E2F;
  --dark-surface:   #222223;
  --glass-tint: 52%;
  --specular: rgba(255, 255, 255, .10);
  --specular-soft: rgba(255, 255, 255, .04);
}

/* ── Reset acotado ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 300; text-wrap: balance; }
p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 1px; }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font-family: var(--mono); font-size: 13px; z-index: 100; border-radius: var(--r);
}
.skip:focus { left: 16px; }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }
.prose { max-width: 66ch; }

/* ── Barra de pausa: el único gráfico del sistema ─────────────────── */
.pause { display: inline-flex; gap: .22em; align-items: center; }
.pause i { display: block; width: .26em; height: .92em; background: currentColor; border-radius: var(--r); }
.pause.sm i { width: .22em; height: .8em; }

/* Marcador de sección: la pausa antecede al eyebrow */
.mark { display: flex; align-items: center; gap: 10px; }
.mark::before {
  content: ""; flex: none; width: 4px; height: 13px; background: currentColor;
  border-radius: var(--r); box-shadow: 7px 0 0 currentColor; margin-right: 7px;
}

/* ── Tipos utilitarios ────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--ink-subtle);
}
.label { font-family: var(--mono); font-size: 12.5px; letter-spacing: .4px; }
.label.dim { color: var(--ink-subtle); }

/* ── Nav ──────────────────────────────────────────────────────────── */
/* Capa funcional flotante: el contenido corre por debajo.
   El borde de escala aparece solo cuando de verdad hay algo debajo que separar. */
/* Arriba de todo es transparente: no hay nada debajo que separar. Al hacer scroll
   se despega, se angosta y se vuelve una píldora de vidrio flotante.
   El ancho lo anima el contenedor interno, NO el `top` del sticky: animar `top`
   en un elemento pegajoso produce un salto de layout en el primer frame. */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 0 var(--gutter);
  transition: padding-top .3s ease;
}
.nav.stuck { padding-top: 12px; }

.nav-shell {
  max-width: var(--shell); margin: 0 auto;
  border: 1px solid transparent; border-radius: 0;
  transition: max-width .32s ease, border-radius .32s ease, border-color .28s ease,
              background-color .28s ease, box-shadow .28s ease;
}
.nav.stuck .nav-shell {
  max-width: 1044px; border-radius: var(--r); border-color: var(--hairline);
  background: color-mix(in srgb, var(--paper) var(--glass-tint), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  /* Arista especular: la luz pega arriba y apenas se insinúa abajo.
     Es lo que separa "vidrio" de "fondo semitransparente". */
  /* Sombra en dos tiempos: un contacto corto y cerrado, y una difusa y lejana.
     Una sola sombra media es lo que hace que un panel flotante se vea barato. */
  box-shadow: inset 0 1px 0 var(--specular), inset 0 -1px 0 var(--specular-soft),
              0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
              0 16px 44px -22px color-mix(in srgb, var(--ink) 42%, transparent);
}
/* Vibrancia: sobre material translúcido el texto abre un pelo de tracking.
   SOLO el logotipo. Aplicarlo a los enlaces los ensancha de golpe al hacer scroll
   y los parte en dos líneas — era la causa del amontonamiento. */
.nav.stuck .logo { letter-spacing: .19em; }
.nav.stuck .nav-links a { color: var(--ink-muted); }
/* Nada en el nav se parte en dos líneas ni se encoge: si no cabe, se quita un
   elemento — no se aprieta. Un menú amontonado es lo contrario de premium. */
.nav-in {
  display: flex; align-items: center; gap: 32px; height: 68px;
  padding-inline: 4px;
  transition: height .32s cubic-bezier(.4, 0, .2, 1), padding-inline .32s cubic-bezier(.4, 0, .2, 1);
}
.nav.stuck .nav-in { height: 58px; padding-inline: 18px; }
.nav-in > * { flex: none; }
.nav-in a, .nav-in button, .nav-links a, .logo { white-space: nowrap; }

/* ── Dock móvil ───────────────────────────────────────────────────── */
/* Port de `limelight-nav`: en teléfono la navegación es una barra de vidrio
   fija al pie con cinco paradas y la misma lámpara del limelight de arriba.
   Escritorio no la ve — allá navegan los .nav-links. Diagnóstico va como
   chip de tinta: es el "CTA fijo al pie" que pide DESIGN.md, no un adorno. */
.dock {
  position: fixed; z-index: 60;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: none;
  border: 1px solid var(--hairline); border-radius: var(--r);
  background: color-mix(in srgb, var(--paper) var(--glass-tint), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  box-shadow: inset 0 1px 0 var(--specular), inset 0 -1px 0 var(--specular-soft),
              0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
              0 16px 44px -22px color-mix(in srgb, var(--ink) 42%, transparent);
  overflow: hidden;                /* el cono de la lámpara no se sale de la caja */
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .32s ease;
}
/* Con el teclado abierto el dock estorba: se retira mientras se llena el formulario. */
body:has(.f :focus) .dock { transform: translateY(calc(100% + 34px)); opacity: 0; }

.dock a {
  position: relative; z-index: 2;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 9px 2px 10px; min-height: 60px;
  text-decoration: none; color: var(--ink-subtle);
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease;
}
.dock a.on { color: var(--ink); }
.dock a:active .dock-ico { transform: scale(.92); }
.dock-ico {
  display: grid; place-items: center; width: 30px; height: 30px;
  transition: transform 120ms ease-out;
}
.dock-ico svg { width: 22px; height: 22px; display: block; }
.dock-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
}
/* Diagnóstico es el botón primario del dock. El chip termina en el mismo
   radio que la caja, por la misma regla que el punto del .ihb. */
.dock-cta .dock-ico { background: var(--ink); color: var(--paper); border-radius: var(--r); }
.dock-cta .dock-ico svg { width: 16px; height: 16px; }
/* La lámpara del dock es más corta que la de escritorio y su cono baña
   el ícono completo. El ancho lo fija app.js, igual que arriba. */
.dock .limelight { width: 30px; }
.dock .limelight::after { left: -50%; width: 200%; }

@media (max-width: 899px) {
  .dock { display: flex; }
  /* El body reserva el alto del dock: sin esto, el pie del footer queda enterrado. */
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  /* Doble clase a propósito: `.btn` fija `display` más adelante en el archivo y
     a igual especificidad ganaba por orden — el CTA se veía en teléfono. */
  .nav-act .nav-cta { display: none; }  /* el CTA de teléfono es el chip del dock */
  .nav.stuck .nav-shell { max-width: 100%; }
  .nav-in { gap: 14px; }
  .nav-act { margin-left: auto; }
  /* En pantalla táctil el conmutador sigue discreto pero con objetivo de dedo
     y medio tono más de tinta: allá no hay hover que lo delate. */
  .lang-min { padding: 12px 14px; font-size: 12px; color: var(--ink-subtle); }
  /* Al bajar, el nav se retira y el único cromo es el dock; el primer gesto de
     subir lo regresa (app.js pone .away). El mismo contrato que la barra de Safari. */
  .nav { transition: padding-top .3s ease, transform .34s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
  .nav.away { transform: translateY(calc(-100% - 2px)); opacity: 0; pointer-events: none; }
  /* Navegando con teclado el nav no se esconde de su propio focus. */
  .nav.away:focus-within { transform: none; opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav.stuck .nav-shell, .dock {
    background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .nav.stuck .nav-shell, .dock { background: var(--paper); backdrop-filter: none; border-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-shell, .nav-in, .dock, .dock a, .dock-ico { transition: none; }
  /* Retirada no vestibular: el nav se desvanece en su sitio, sin desplazarse. */
  .nav.away { transform: none; }
}

.logo {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-weight: 700; font-size: 15px; letter-spacing: .18em;
  text-decoration: none; white-space: nowrap; flex: none;
}
.logo .pause { align-self: center; }
.logo.big { font-size: 20px; letter-spacing: .2em; }

/* Limelight: una barra de luz que se desliza sobre el enlace de la sección en la
   que estás. No marca lo que clicaste — marca dónde estás. Es señalización, no adorno. */
.nav-links { position: relative; display: flex; gap: 2px; margin-left: auto; height: 100%; align-items: center; }
.nav-links a {
  position: relative; z-index: 2;
  font-size: 13.5px; letter-spacing: .01em; text-decoration: none; color: var(--ink-subtle);
  padding: 9px 16px; border-radius: var(--r);
  transition: color .18s ease;
}
.nav-links a:hover, .nav-links a.on { color: var(--ink); }

.limelight {
  position: absolute; top: 0; z-index: 1;
  width: 34px; height: 3px; border-radius: 999px; background: var(--ink);
  opacity: 0; pointer-events: none;
  transition: left .38s cubic-bezier(.4, 0, .2, 1), width .38s cubic-bezier(.4, 0, .2, 1),
              opacity .25s ease;
}
.limelight.lit { opacity: 1; }
/* El cono de luz. Es un desvanecido de un solo tono, no un degradado de color:
   la misma técnica que la máscara de la demo. */
.limelight::after {
  content: ""; position: absolute; left: -32%; top: 3px; width: 164%; height: 46px;
  clip-path: polygon(6% 100%, 26% 0, 74% 0, 94% 100%);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 16%, transparent), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .limelight { transition: opacity .2s ease; }
}

.nav-act { display: flex; align-items: center; gap: 12px; flex: none; }

/* Conmutador de idioma discreto: muestra solo el idioma al que puedes cambiar.
   La detección por idioma + zona horaria decide el mercado al llegar; este
   botón es la salida de emergencia, no un control protagónico. */
.lang-min {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  background: none; border: 0; color: var(--ink-faint);
  padding: 12px 10px; cursor: pointer; line-height: 1; flex: none;
  transition: color .18s ease;
}
.lang-min:hover, .lang-min:focus-visible { color: var(--ink); }
.nav-act .btn-sm { padding: 10px 17px; font-size: 13.5px; }

/* ── Botones ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -.1px;
  padding: 15px 26px; border-radius: var(--r); text-decoration: none;
  border: 1px solid transparent; cursor: pointer; line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-1 { background: var(--ink); color: var(--paper); }
.btn-1:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.btn-2 { border-color: var(--hairline-strong); color: var(--ink); }
.btn-2:hover { border-color: var(--ink); }
.btn-inv { background: var(--dark-ink); color: var(--dark-bg); }
.btn-inv:hover { background: color-mix(in srgb, var(--dark-ink) 86%, var(--dark-bg)); }
.btn.wide { width: 100%; }
/* Regla 1 de Motion: la retroalimentación vive en el pointer-down, y es instantánea. */
.btn:active { transform: scale(.97); transition: transform 100ms ease-out; }

/* ── Botón con hover interactivo ──────────────────────────────────────
   Port a CSS puro del componente shadcn `interactive-hover-button`.
   Ver ../componentes-react/README.md para la versión React y el porqué.
   Adaptado al sistema: radio de 3px en vez de rounded-full, monocromo en vez
   de bg-primary, y ancho automático porque "Solicita tu diagnóstico" no cabe
   en los 128px fijos del original.                                        */
.ihb {
  position: relative; overflow: hidden; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  /* El carril izquierdo es del punto: en % sobre un botón ancho el punto caía
     encima del texto. Posiciones fijas, texto después de 46px, cero solapes. */
  padding: 15px 28px 15px 46px; border-radius: var(--r);
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -.1px;
  line-height: 1; text-decoration: none;
}
/* El punto que crece hasta llenar el botón. Es el fondo, no un adorno encima. */
.ihb-dot {
  position: absolute; left: 24px; top: calc(50% - 4px); width: 8px; height: 8px;
  background: var(--ink); border-radius: 999px; z-index: 0;
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease,
              border-radius .3s ease, transform .3s ease;
}
.ihb:hover .ihb-dot, .ihb:focus-visible .ihb-dot {
  left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--r); transform: scale(1.8);
}
/* Capa 1: el texto en reposo, que sale por la derecha. */
.ihb-a {
  position: relative; z-index: 1; display: inline-block;
  transition: transform .3s ease, opacity .3s ease;
}
.ihb:hover .ihb-a, .ihb:focus-visible .ihb-a { transform: translateX(52px); opacity: 0; }
/* Capa 2: el texto con flecha, que entra por la derecha. */
.ihb-b {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transform: translateX(52px); opacity: 0; color: var(--paper);
  transition: transform .3s ease, opacity .3s ease;
}
.ihb:hover .ihb-b, .ihb:focus-visible .ihb-b { transform: translateX(0); opacity: 1; }
.ihb-b svg { width: 17px; height: 17px; flex: none; }
.ihb:active { transform: scale(.97); transition: transform 100ms ease-out; }

/* El original no contempla esto: sin movimiento, el relleno cambia de golpe
   y el texto solo cruza opacidad. La información sigue llegando. */
@media (prefers-reduced-motion: reduce) {
  .ihb-dot, .ihb-a, .ihb-b { transition: opacity .18s ease; }
  .ihb:hover .ihb-a { transform: none; }
  .ihb:hover .ihb-b { transform: none; }
  .ihb:hover .ihb-dot { transform: none; }
}

/* ── Bandas ───────────────────────────────────────────────────────── */
.band { padding: var(--sy) 0; }
.band.alt { background: var(--surface-2); }
.band.dark { background: var(--dark-bg); color: var(--dark-ink); }
.band.dark .eyebrow, .band.dark .label.dim { color: var(--dark-muted); }
.band.dark .prose { color: var(--dark-muted); }

.band-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 34px; }
.band-head h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 500; letter-spacing: -1px; line-height: 1.12; max-width: 20ch; }
.band-head .prose { color: var(--ink-muted); font-size: 17px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.split h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 500; letter-spacing: -.9px; line-height: 1.15; max-width: 18ch; padding-top: 14px; }
.split .prose { display: flex; flex-direction: column; gap: 18px; color: var(--ink-muted); font-size: 17px; }
.split .prose .quiet { color: var(--ink-subtle); font-style: italic; padding-top: 6px; border-top: 1px solid var(--hairline); }

/* ── Atmósfera del hero ───────────────────────────────────────────────
   Del componente `cinematic-landing-hero`: grano de película y retícula con
   máscara radial. Es lo que da la sensación de material sin costar una librería.
   Ambos son monocromos, así que entran al sistema sin excepción. */
.hero { position: relative; padding: clamp(52px, 8vw, 92px) 0 var(--sy); isolation: isolate; }

.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-size: 62px 62px;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 28% 34%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 78% 62% at 28% 34%, #000 0%, transparent 72%);
  opacity: .55;
}
/* Grano: turbulencia SVG en un data URI. 1.4 KB, sin peticiones. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .038; mix-blend-mode: overlay;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.82" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}

/* ── Entrada cinemática ───────────────────────────────────────────────
   Desenfoque que enfoca + escala + desplazamiento, escalonado.
   Se anima el elemento completo, NO palabra por palabra: partir el titular en
   <span> rompería el cambio de idioma, que reemplaza el nodo de texto. */
@keyframes cine-in {
  from { opacity: 0; transform: translateY(var(--cy, 26px)) scale(var(--cs, .965)); filter: blur(var(--cb, 14px)); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.cine { animation: cine-in .95s cubic-bezier(.16, 1, .3, 1) backwards; }
.cine-1 { animation-delay: .06s; --cb: 8px;  --cy: 14px; }
.cine-2 { animation-delay: .16s; --cb: 18px; --cy: 34px; --cs: .955; }
.cine-3 { animation-delay: .40s; --cb: 10px; --cy: 20px; }
.cine-4 { animation-delay: .54s; --cb: 6px;  --cy: 16px; }
.cine-5 { animation-delay: .66s; --cb: 4px;  --cy: 12px; }
.cine-6 { animation-delay: .30s; --cb: 16px; --cy: 40px; --cs: .975; }

@media (prefers-reduced-motion: reduce) {
  .cine { animation: none; }
  .hero::after { display: none; }
}

/* ── Revelado por scroll global ───────────────────────────────────── */
/* Traducción de `sticky-scroll-reveal`: cada bloque se enciende al entrar en
   pantalla, una vez, con la curva del cine. app.js reparte la clase y el
   escalón (--rd); sin JavaScript no hay clase y la página se ve completa.
   El desenfoque solo en escritorio: filter en masa es caro en GPU móvil. */
.rvl { opacity: 0; transform: translateY(14px); }
.rvl.go {
  opacity: 1; transform: none; filter: none;
  transition: opacity .55s ease, transform .6s cubic-bezier(.16, 1, .3, 1), filter .55s ease;
  transition-delay: var(--rd, 0s);
}
@media (min-width: 900px) {
  .rvl { filter: blur(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .rvl { opacity: 1; transform: none; filter: none; }
  .rvl.go { transition: none; }
}
/* `stretch` en vez de `start`: la tarjeta de la conversación toma la altura de
   la fila, que la marca la columna de texto. Así las dos columnas cierran a la
   misma línea en vez de dejar un escalón. */
/* La columna de texto pesa más porque la palabra que rota no se puede partir:
   si no cabe entera, se desborda sobre la tarjeta. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 52px; align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero h1 {
  /* El tope baja a 56px para que 9.8em de la palabra rotatoria quepan en la
     columna: 9.8 × 56 = 549px contra ~590px disponibles. */
  font-size: clamp(32px, 4.4vw, 56px); font-weight: 300;
  /* 18ch queda por encima del ancho de la columna a propósito: el límite real
     lo pone la columna. Un tope en `ch` más estrecho obligaría al guardián de
     app.js a encoger el titular sin necesidad. */
  letter-spacing: clamp(-1px, -.2vw, -2.2px); line-height: 1.04; max-width: 18ch;
}
@media (max-width: 359px) {
  /* 9.8em = 284px: la palabra rotatoria más larga cabe también en 320. */
  .hero h1 { font-size: 29px; }
}
/* La palabra más larga no debe desbordar nunca. app.js baja el cuerpo si hace falta. */
.cyc { max-width: 100%; }
.hero .lede { font-size: clamp(16.5px, 1.6vw, 18.5px); color: var(--ink-muted); max-width: 52ch; line-height: 1.55; }

/* ── Palabra que rota ─────────────────────────────────────────────────
   Port de `animated-text-cycle`. El ancho lo anima el mismo resorte del
   resto del sitio; sin framer-motion. El HTML lleva la primera palabra
   escrita: sin JS y para el rastreador, el titular se lee completo. */
/* La palabra vive EN LÍNEA PROPIA (block): una palabra de ancho variable con
   texto detrás en la misma línea produce un hueco variable — la "a" huérfana
   flotando lejos de la frase. Se pagó dos veces (376px y escritorio).
   Nada que siga a la palabra rotatoria comparte su línea; el clamp del h1
   garantiza que la más larga (9.8em ≈ 18 caracteres en Grotesk 500) quepa. */
.cyc {
  position: relative; display: block;
  overflow: hidden;
  /* El desenfoque se pinta FUERA de la caja del texto y `overflow: hidden` lo
     recortaría. Holgura con padding, cancelada con el margen negativo.
     En `em` para que la holgura acompañe al cuerpo: en px, a 32px de titular
     el mismo padding se come el doble de proporción que a 56px. */
  padding-inline: .2em; margin-inline: -.2em;
}
.cyc-w {
  display: inline-block; white-space: nowrap;
  font-weight: 500;   /* medio peso más: es la palabra que carga el sentido */
}
.cyc-w.out { opacity: 0; transform: translateY(.26em); filter: blur(6px); }
.cyc-w.in  { opacity: 0; transform: translateY(-.26em); filter: blur(6px); }
.cyc-w.go  { opacity: 1; transform: none; filter: blur(0); }
.cyc-w:not(.raw) { transition: opacity .3s ease, transform .34s cubic-bezier(.16,1,.3,1), filter .3s ease; }
.cyc-measure { position: absolute; left: -9999px; top: 0; visibility: hidden; transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cyc { overflow: visible; }
  .cyc-w { transition: none; }
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 2px; }
.micro { display: flex; flex-wrap: wrap; gap: 10px 26px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-subtle); }
.micro li { display: flex; align-items: center; gap: 8px; }
.micro li::before { content: ""; width: 3px; height: 10px; background: currentColor; border-radius: var(--r); box-shadow: 5px 0 0 currentColor; margin-right: 4px; }

/* ── Revelado por scroll de la banda de precio ────────────────────────
   Mecánica de `ContainerInset` (animated-video-on-scroll), sin la librería
   `motion`. Va en la banda de precio y no en el hero: es a sangre completa,
   así que abrirse desde un recuadro le queda — y no le cuesta scroll a la
   prueba social, que es lo que convierte. */
.band.reveal-band {
  clip-path: inset(var(--by, 0%) var(--bx, 0%) round var(--br, 0px));
  will-change: clip-path;
}
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .band.reveal-band { clip-path: none !important; }
}

/* Red de seguridad para el `hidden` del HTML: una sección con padding y
   clip-path no debe reaparecer por una regla de display posterior.
   ⏸ Hoy la usa #precio (oculto desde 2026-08-13, pendiente de reactivar). */
[hidden] { display: none !important; }

/* ── Demo del agente ──────────────────────────────────────────────── */
/* La barra y el pie son capas flotantes con los mensajes pasando por debajo.
   El vidrio sobre un fondo sólido no se ve: necesita contenido detrás que refractar.
   Aquí sí lo hay, porque la lista tiene scroll propio. */
.demo {
  margin: 0; border: 1px solid var(--hairline); background: var(--surface-1);
  /* La altura la impone la fila del grid; el min-height solo actúa cuando la
     columna de texto es más corta que esto (pantallas anchas y bajas). */
  position: relative; height: 100%; min-height: 468px; overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
              0 18px 42px -26px color-mix(in srgb, var(--ink) 30%, transparent);
}
.demo-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px;
  background: color-mix(in srgb, var(--surface-1) var(--glass-tint), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: inset 0 1px 0 var(--specular), 0 1px 0 color-mix(in srgb, var(--hairline) 70%, transparent);
}
.demo-id { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.demo-id b { font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ink); flex: none; }
.demo-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-subtle); border: 1px solid var(--hairline-strong); padding: 2px 7px; border-radius: var(--r);
}
/* El padding deja pasar los mensajes bajo el cromo en vez de que la lista
   arranque después de él. La máscara los desvanece justo donde se encuentran. */
.demo-scroll {
  position: absolute; inset: 0; padding: 68px 18px 66px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, transparent 46px, #000 62px,
                                      #000 calc(100% - 60px), transparent calc(100% - 46px));
  mask-image: linear-gradient(to bottom, transparent 46px, #000 62px,
                              #000 calc(100% - 60px), transparent calc(100% - 46px));
}
.msg {
  max-width: 82%; padding: 11px 14px; font-size: 14.5px; line-height: 1.45;
  border-radius: 10px 10px 10px var(--r); background: var(--surface-2); color: var(--ink);
  align-self: flex-start; white-space: pre-wrap;
  /* estado inicial; el resorte de app.js toma el control desde aquí */
  opacity: 0; transform: translateY(10px);
}
.msg.them { align-self: flex-end; background: var(--ink); color: var(--paper); border-radius: 10px 10px var(--r) 10px; }
.msg-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; opacity: .55; padding-top: 5px; }
.msg.sys {
  align-self: stretch; max-width: none; background: none; border: 1px dashed var(--hairline-strong);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-subtle); border-radius: var(--r);
  text-align: center; padding: 8px 12px;
}
/* El indicador NO hereda el estado inicial de .msg: entra visible. */
.typing { display: flex; gap: 4px; align-items: center; padding: 13px 15px; opacity: 1; transform: none; }
.typing i { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-faint); animation: blip 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes blip { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.demo-foot {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--surface-1) var(--glass-tint), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: inset 0 1px 0 var(--specular-soft), 0 -1px 0 color-mix(in srgb, var(--hairline) 70%, transparent);
}

/* Sin vidrio disponible o no deseado: superficie sólida, misma jerarquía. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .demo-bar, .demo-foot { background: var(--paper); }
  .demo-bar, .demo-foot { background: var(--surface-1); }
}
@media (prefers-reduced-transparency: reduce) {
  .demo-bar, .demo-foot {
    background: var(--surface-1); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .demo-scroll { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-contrast: more) {
  .demo-bar { border-bottom: 1px solid var(--ink); }
  .demo-foot { border-top: 1px solid var(--ink); }
  .demo-bar, .demo-foot { background: var(--surface-1); backdrop-filter: none; }
}
.replay {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 1px solid var(--hairline-strong); color: var(--ink);
  padding: 6px 12px; border-radius: var(--r); cursor: pointer;
}
.replay:hover { border-color: var(--ink); }
.replay:active { transform: scale(.97); transition: transform 100ms ease-out; }
.demo-note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-subtle); text-align: right; }

/* ── KPIs ─────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.kpi { background: var(--surface-2); padding: 26px 22px; display: flex; flex-direction: column; gap: 9px; position: relative; }
.kpi-n { font-family: var(--mono); font-size: clamp(30px, 4vw, 44px); letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
/* La unidad va más chica y en tono secundario: la cifra es la que debe leerse primero. */
.kpi-n em { font-style: normal; font-size: .42em; letter-spacing: 0; color: var(--ink-subtle); padding-left: 2px; }
.kpi-l { font-size: 13.5px; color: var(--ink-muted); line-height: 1.45; }
.kpi.live { background: var(--surface-1); }
.kpi.live .kpi-n::after { content: " ms"; font-size: .42em; letter-spacing: 0; color: var(--ink-subtle); }

/* Clientes: el número de arriba y el nombre que lo respalda, juntos. */
.clients { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 26px; padding-top: 26px; }
.clients .label { flex: none; }
/* Cinta de clientes: port de `marquee`. Corren WORDMARKS reales — los logos de
   los clientes no existen en el repo y no se inventan (regla C1); cuando
   existan con permiso, se sustituyen aquí uno a uno. La pista está duplicada y
   viaja -50%: el aro no tiene costura. */
.marq {
  flex-basis: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marq-track { display: flex; width: max-content; animation: marq 34s linear infinite; }
/* Quieta bajo el cursor o el foco: una cinta que huye no se puede clicar. */
.marq:hover .marq-track, .marq:focus-within .marq-track { animation-play-state: paused; }
.marq-set { display: flex; align-items: center; flex: none; }
.marq-set li { display: flex; align-items: center; }
/* La pausa separa TODOS los nombres: en un aro que da vueltas no hay último. */
.marq-set li::after {
  content: ""; width: 3px; height: 9px; background: var(--ink-faint);
  border-radius: var(--r); box-shadow: 5px 0 0 var(--ink-faint); margin-inline: 26px 34px;
}
.clients a {
  font-size: 17px; font-weight: 500; letter-spacing: -.2px; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 2px;
}
.clients a:hover { border-bottom-color: var(--ink); }
.clients-note { flex-basis: 100%; font-family: var(--mono); font-size: 11.5px; color: var(--ink-subtle); }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* Cinta quieta: la copia se oculta y la lista envuelve — la fila de siempre. */
  .marq { -webkit-mask-image: none; mask-image: none; }
  .marq-track { animation: none; width: auto; }
  .marq-set { flex-wrap: wrap; gap: 10px 0; }
  .marq-set[aria-hidden="true"] { display: none; }
  .marq-set li:last-child::after { display: none; }
}

/* Credenciales. Sin logotipos de terceros: en un sistema monocromático un logo a color
   rompe la paleta, y usar la marca de un tercero sugiere una alianza que hay que poder
   sostener. El texto dice exactamente qué es cada relación. */
/* Fila ligera, NO una segunda rejilla con borde: dos cajas idénticas apiladas se
   leen como un error de maquetación. La barra de métricas es la que lleva caja;
   las credenciales van sueltas y con un peso visual menor. */
.badges {
  display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 22px;
  padding-top: 22px; border-top: 1px solid var(--hairline);
}
.badges li {
  display: flex; align-items: baseline; gap: 9px;
  border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 7px 13px 7px 11px; background: transparent;
}
.badges .pause { color: var(--ink-subtle); font-size: 11px; align-self: center; }
.badges b { font-size: 13.5px; font-weight: 500; letter-spacing: -.2px; }
.badges li > span:last-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-subtle); }

/* ── Tarjetas de sistema ──────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 20px; }
/* Estilo `dark-grid` traducido: chip de icono, borde que despierta al apuntar
   y un marco de recorte — cuatro cuadrados de tinta fuera de las esquinas.
   Sin gradientes ni glow: ese hover no existe en este sistema. */
.card {
  position: relative; background: var(--surface-1); border: 1px solid var(--hairline);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 14px;
  transition: border-color .18s ease;
}
.card:hover { border-color: var(--ink); }
.card::after {
  content: ""; position: absolute; inset: -4px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) left top    / 7px 7px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top   / 7px 7px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 7px 7px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom/ 7px 7px no-repeat;
  opacity: 0; transition: opacity .18s ease;
}
.card:hover::after { opacity: 1; }
.card h3 { display: flex; align-items: center; gap: 13px; font-size: 19px; font-weight: 500; letter-spacing: -.2px; }
.card > p { font-size: 14.5px; color: var(--ink-muted); }

/* El chip de icono: mismo en tarjetas de sistema y pasos del proceso.
   El icono nombra la FUNCIÓN, nunca la marca. */
.chip-ico {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--hairline-strong); border-radius: var(--r);
  background: var(--surface-2); color: var(--ink);
}
.chip-ico svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .card, .card::after { transition: none; }
}

/* Lista con la pausa como viñeta.
   La viñeta va posicionada en absoluto, NO como columna de grid: un <li> con
   <strong> u otro elemento inline dentro genera ítems de grid extra y el texto
   se parte en la columna de la viñeta, una palabra por línea. */
.pl { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.pl.spaced { gap: 12px; font-size: 15.5px; }
.pl li { position: relative; padding-left: 25px; color: var(--ink-muted); }
.pl li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 3px; height: 9px; background: currentColor;
  border-radius: var(--r); box-shadow: 5px 0 0 currentColor; opacity: .55;
}

/* ── Placeholders pendientes ──────────────────────────────────────── */
.hold {
  border: 1px dashed var(--hairline-strong) !important;
  background: repeating-linear-gradient(
    135deg, transparent, transparent 9px,
    color-mix(in srgb, var(--hairline) 40%, transparent) 9px,
    color-mix(in srgb, var(--hairline) 40%, transparent) 10px) !important;
  color: var(--ink-faint);
}
.hold-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--ink-subtle); border: 1px solid var(--hairline-strong);
  padding: 2px 7px; border-radius: var(--r); align-self: start;
}
.hold-help { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-subtle); border-top: 1px dashed var(--hairline-strong); padding-top: 10px; }
.hold-inline { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); border: 1px dashed var(--hairline-strong); padding: 2px 8px; border-radius: var(--r); align-self: start; }
.hold .kpi-n, .hold .case-n { color: var(--ink-faint); }

/* ── Casos ────────────────────────────────────────────────────────── */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 20px; }
.case { background: var(--surface-1); border: 1px solid var(--hairline); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.case-n { font-family: var(--mono); font-size: 40px; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.case-what { font-family: var(--mono); font-size: 12.5px; color: var(--ink-subtle); }
.case b { font-weight: 500; font-size: 17px; color: var(--ink); padding-top: 8px; border-top: 1px solid var(--hairline); margin-top: 6px; }
.case-when { font-family: var(--mono); font-size: 12px; color: var(--ink-subtle); }

/* ── Testimonios: columna fija + tarjetas que se apilan ───────────────
   Port del componente `testimonial-card` de shadcn. Ver ../componentes-react/.
   La mecánica es la misma (sticky escalonado); el vestido es el del sistema:
   sin rounded-2xl, sin estrellas amarillas, sin sombra de color. */
.tgrid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: start; }
.tleft { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.tleft h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 500; letter-spacing: -1px; line-height: 1.12; max-width: 17ch; }
.tleft .prose { color: var(--ink-muted); font-size: 16.5px; }
.tright { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24vh; }

.tcard {
  position: sticky; top: calc(96px + var(--i) * 20px);
  background: var(--surface-1); border: 1px solid var(--hairline);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent),
              0 14px 34px -26px color-mix(in srgb, var(--ink) 34%, transparent);
}
.tcard-head { display: flex; align-items: center; gap: 14px; }
/* Contenedor de logo, no de rostro: `contain` con aire, nunca `cover`.
   Un logo recortado por el borde se lee como error de la agencia que lo publica. */
.tavatar {
  width: 56px; height: 56px; flex: none; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--hairline);
  background-size: 68% auto; background-repeat: no-repeat; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
}
/* Los logos van en escala de grises: son de terceros y el sistema es monocromático.
   Uno a color sería el único acento del sitio y rompería la paleta entera. */
.tavatar img { width: 68%; height: 68%; object-fit: contain; filter: grayscale(1); opacity: .92; }
/* Logo de una sola tinta oscura: en tema oscuro se invierte para no desaparecer
   sobre la tarjeta. Los policromos solo pasan por grayscale. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tavatar img.inv-dark { filter: grayscale(1) invert(1); }
}
:root[data-theme="dark"] .tavatar img.inv-dark { filter: grayscale(1) invert(1); }
/* El dominio del cliente enlaza a su sitio vivo: la prueba se puede abrir. */
.tcard-who a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color .18s ease, border-color .18s ease;
}
.tcard-who a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.tcard-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tcard-who b { font-weight: 500; font-size: 16.5px; letter-spacing: -.2px; }
.tcard-who span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-subtle); }

/* Calificación monocroma: la estrella llena es tinta, la vacía es contorno.
   Un amarillo aquí sería el único color del sitio. */
.trate { display: flex; align-items: center; gap: 10px; }
.trate b { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.tstars { display: flex; gap: 3px; }
.tstars svg { width: 14px; height: 14px; color: var(--ink); }
.tstars svg.off { color: var(--ink-faint); }
.tcard blockquote { font-size: 16px; line-height: 1.58; color: var(--ink-muted); }

@media (max-width: 899px) {
  .tgrid { grid-template-columns: 1fr; gap: 30px; }
  .tleft { position: static; }
  .tright { padding-bottom: 0; }
  .tcard { position: static; }
}

/* ── Precio ───────────────────────────────────────────────────────── */
/* Estilo `pricing-section` traducido: tres columnas comparables, y el plan
   popular destacado POR INVERSIÓN — tarjeta de papel sobre la banda de tinta,
   la versión monocroma del ring-primary. Sus colores son fijos, como los
   --dark-* de la banda: es clara en los dos temas. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.plan { border: 1px solid var(--dark-hairline); background: var(--dark-surface); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.plan-tier { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan .label { color: var(--dark-muted); }
.plan-pop {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  padding: 4px 9px; border: 1px solid var(--dark-muted); border-radius: var(--r);
  color: var(--dark-ink); line-height: 1;
}
.plan h3 { font-size: 23px; font-weight: 500; letter-spacing: -.4px; color: var(--dark-ink); }
.plan-p { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-n { font-family: var(--mono); font-size: clamp(34px, 4.4vw, 44px); letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-u { font-family: var(--mono); font-size: 12.5px; color: var(--dark-muted); }
.plan-d { font-size: 15px; color: var(--dark-muted); }
.plan .pl li { color: var(--dark-muted); }
/* La frase que cierra el argumento del plan: filete + medio peso más. */
.plan-close {
  margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--dark-hairline);
  font-weight: 500; font-size: 15.5px; color: var(--dark-ink);
}
.plan .btn { margin-top: auto; }
/* La invertida. Tinta y papel fijos: no dependen del tema del visitante. */
.plan.feat {
  --pf-ink: #0D0D0E; --pf-muted: #5A5A57; --pf-hair: #C4C2BA;
  background: #F4F3EF; border-color: #F4F3EF;
}
.plan.feat h3, .plan.feat .plan-n, .plan.feat .plan-close { color: var(--pf-ink); }
.plan.feat .label, .plan.feat .plan-u, .plan.feat .plan-d, .plan.feat .pl li { color: var(--pf-muted); }
.plan.feat .plan-close { border-top-color: var(--pf-hair); }
.plan.feat .plan-pop { color: var(--pf-ink); border-color: var(--pf-ink); }
.plan.feat .btn { background: var(--pf-ink); color: #F4F3EF; border: 1px solid var(--pf-ink); }
.plan.feat .btn:hover { background: #2A2A2B; }
/* La fila a la medida: franja horizontal bajo el grid, no una cuarta tarjeta. */
.plan-custom {
  margin-top: 20px; padding: 24px 28px;
  border: 1px solid var(--dark-hairline); background: var(--dark-surface);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px 28px; flex-wrap: wrap;
}
.plan-custom-t { display: flex; flex-direction: column; gap: 6px; max-width: 62ch; }
.plan-custom-t b { font-weight: 500; font-size: 17px; letter-spacing: -.2px; color: var(--dark-ink); }
.plan-custom-t span { font-size: 14.5px; color: var(--dark-muted); line-height: 1.5; }
.plan-custom .btn { flex: none; }
@media (max-width: 639px) {
  .plan-custom .btn { width: 100%; }
}
.band.dark .pl li { color: var(--dark-muted); }
.fineprint { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--dark-muted); max-width: 78ch; padding-top: 26px; }

/* ── Proceso ──────────────────────────────────────────────────────── */
/* Estilo `how-it-works-2` traducido: chip de icono + línea conectora de 1px
   que baja al paso siguiente. El 01–04 se retiró: la secuencia real ya la
   dicen las semanas del título. El último paso no tira línea. */
.steps { display: flex; flex-direction: column; }
.steps li { display: flex; gap: 22px; }
.step-rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.step-rail::after { content: ""; width: 1px; flex: 1; margin-top: 6px; background: var(--hairline); }
.steps li:last-child .step-rail::after { display: none; }
.steps li > div { padding-bottom: 34px; }
.steps li:last-child > div { padding-bottom: 0; }
.steps b { display: block; font-weight: 500; font-size: 19px; letter-spacing: -.2px; padding: 9px 0 7px; }
.steps p { font-size: 15.5px; color: var(--ink-muted); max-width: 62ch; }

/* ── Formulario ───────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 18px; background: var(--surface-1); border: 1px solid var(--hairline); padding: 30px 28px; }
/* Trampa para bots: invisible para personas, irresistible para scripts. */
.hpot { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }
.f { display: flex; flex-direction: column; gap: 7px; }
.f label { font-family: var(--mono); font-size: 12px; letter-spacing: .3px; color: var(--ink-subtle); }
.f input, .f select {
  font-family: var(--sans); font-size: 16px; font-weight: 300; color: var(--ink);
  background: var(--surface-2); border: 1px solid transparent; border-bottom: 1px solid var(--hairline-strong);
  padding: 12px 12px; border-radius: var(--r) var(--r) 0 0; width: 100%;
}
.f input:focus, .f select:focus { outline: none; border-bottom: 2px solid var(--ink); padding-bottom: 11px; }
.f input:focus-visible, .f select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.f input[aria-invalid="true"] { border-bottom-color: var(--ink); border-bottom-width: 2px; }
.form-note { font-family: var(--mono); font-size: 11.5px; color: var(--ink-subtle); line-height: 1.5; }
.form-note a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 1px; }
.form-note a:hover { border-bottom-color: var(--ink); }
.form-note.ok { color: var(--ink); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-size: 18px; font-weight: 500; letter-spacing: -.2px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 1px;
  background: var(--ink); transform: translateY(-50%);
}
.faq summary::before {
  content: ""; position: absolute; right: 11px; top: 50%; width: 1px; height: 11px;
  background: var(--ink); transform: translateY(-50%); transition: opacity .18s ease;
}
.faq details[open] summary::before { opacity: 0; }
/* app.js envuelve el contenido aquí para poder animar la altura. */
.faq-body { overflow: hidden; }
.faq details p { padding: 0 0 24px; font-size: 15.5px; color: var(--ink-muted); max-width: 66ch; }

/* ── Footer ───────────────────────────────────────────────────────── */
/* Estilo `footer-section-1` traducido: marca → navegación → chips de contacto
   → cinta diagonal → fila final. Todo a la izquierda; la cinta es estática. */
.foot { background: var(--paper); border-top: 2px solid var(--ink); padding: var(--sy-t) 0 0; }
.foot-top { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 40px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 2px 24px; }
.foot-nav a { font-size: 14.5px; color: var(--ink-muted); text-decoration: none; padding: 6px 0; }
.foot-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-soc { display: flex; gap: 10px; }
.foot-soc a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--hairline-strong); border-radius: var(--r);
  color: var(--ink-muted); transition: color .18s ease, border-color .18s ease;
}
.foot-soc a:hover { color: var(--ink); border-color: var(--ink); }
.foot-soc svg { width: 18px; height: 18px; }
.foot-end {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  padding: 22px 0 28px; border-top: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-subtle);
}
.foot-end a { color: inherit; text-decoration: none; }
.foot-end a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Nombre legal — requisito de verificación de Meta (2026-08-18). No ocultar ni truncar. */
.legal-name { white-space: nowrap; }

/* ── Riel de sectores (arrastrable) ───────────────────────────────── */
.band-head.row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.drag-hint { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-subtle); }

.rail-wrap { display: flex; flex-direction: column; gap: 22px; }
.rail {
  overflow: hidden; cursor: grab; touch-action: pan-y;
  padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
  -webkit-user-select: none; user-select: none;
}
.rail.dragging { cursor: grabbing; }
.rail-track { display: flex; gap: 20px; will-change: transform; }

.sector {
  flex: none; width: min(400px, 78vw);
  background: var(--surface-1); border: 1px solid var(--hairline);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 13px;
}
.sector h3 { font-size: 21px; font-weight: 500; letter-spacing: -.35px; line-height: 1.22; }
.sector > p { font-size: 14.5px; color: var(--ink-muted); }
.sector .pl { padding-top: 6px; border-top: 1px solid var(--hairline); margin-top: 4px; }
.sector img, .sector a { -webkit-user-drag: none; }

.rail-dots { display: flex; gap: 8px; }
.rail-dots button {
  flex: 1; max-width: 64px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: var(--hairline-strong); border-radius: var(--r);
  transition: background-color .2s ease;
}
.rail-dots button[aria-selected="true"] { background: var(--ink); }
.rail-dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ── Comparativa ──────────────────────────────────────────────────── */
.cmp-scroll { overflow-x: auto; border: 1px solid var(--hairline); background: var(--surface-1); }
.cmp { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 15px; }
.cmp thead th {
  text-align: left; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-subtle); font-weight: 400;
  padding: 16px 20px; border-bottom: 1px solid var(--hairline-strong);
}
.cmp thead th.hl { color: var(--ink); }
.cmp td { padding: 16px 20px; border-bottom: 1px solid var(--hairline); color: var(--ink-muted); vertical-align: top; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td:first-child { font-family: var(--mono); font-size: 12.5px; color: var(--ink-subtle); width: 22%; }
/* Sin color: la diferencia se marca con peso y filete. */
.cmp .hl { color: var(--ink); font-weight: 500; background: var(--surface-2); }
.cmp thead th.hl { background: var(--surface-2); }
.fineprint.light { color: var(--ink-subtle); padding-top: 20px; }

/* ── Stack ────────────────────────────────────────────────────────── */
.band.tight { padding: 0; }
.band.tight .shell { transform: translateY(-1px); }
.band.tight .kpis { margin-block: var(--sy-t); }

/* ── Credenciales en el hero ──────────────────────────────────────── */
.micro .creds { color: var(--ink); font-weight: 500; }
.micro .creds::before { opacity: 1; }

/* ── Reversión de riesgo ──────────────────────────────────────────── */
.risk { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--dark-hairline); border: 1px solid var(--dark-hairline); margin-top: 26px; }
.risk li { background: var(--dark-surface); padding: 22px 24px; display: flex; flex-direction: column; gap: 7px; }
/* El chip sobre banda oscura usa los tokens dark: la banda es siempre oscura
   por marca, así que no puede depender de la inversión del tema. */
.risk .chip-ico {
  border-color: var(--dark-hairline); background: var(--dark-bg);
  color: var(--dark-ink); margin-bottom: 6px;
}
.risk b { font-weight: 500; font-size: 15.5px; color: var(--dark-ink); }
.risk span { font-size: 13.5px; color: var(--dark-muted); line-height: 1.5; }

/* ── Blog ─────────────────────────────────────────────────────────── */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.post {
  display: flex; flex-direction: column; gap: 11px; text-decoration: none;
  background: var(--surface-1); border: 1px solid var(--hairline); padding: 24px 22px;
  transition: border-color .18s ease;
}
.post:hover { border-color: var(--ink); }
.post .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-subtle); }
.post h3 { font-size: 18.5px; font-weight: 500; letter-spacing: -.3px; line-height: 1.25; }
.post p { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.post .more { font-family: var(--mono); font-size: 11.5px; color: var(--ink); margin-top: auto; padding-top: 8px; }

/* Página de artículo */
.art-top { border-bottom: 1px solid var(--hairline); }
.crumb { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 11.5px; color: var(--ink-subtle); padding: 22px 0; }
.crumb a { color: var(--ink-subtle); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.art { padding: var(--sy-t) 0 var(--sy); }
/* Sin max-width en el contenedor: el `ch` se calcula sobre el font-size del elemento,
   así que limitar aquí (16.5px) estrangulaba un titular de 52px a una palabra por línea.
   La medida vive en el h1, donde 1ch sí corresponde a su propia tipografía. */
.art-head { display: flex; flex-direction: column; gap: 18px; padding-bottom: 38px; }
.art-head h1 {
  font-size: clamp(32px, 4.6vw, 52px); font-weight: 300;
  letter-spacing: clamp(-.9px, -.14vw, -1.6px); line-height: 1.08;
  max-width: 19ch; text-wrap: balance;
}
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-subtle); }

.art-body { max-width: 66ch; display: flex; flex-direction: column; gap: 22px; font-size: 17px; line-height: 1.7; }
.art-body > p { color: var(--ink-muted); }
.art-body h2 { font-size: 26px; font-weight: 500; letter-spacing: -.6px; line-height: 1.2; padding-top: 18px; }
.art-body h3 { font-size: 19px; font-weight: 500; letter-spacing: -.2px; }
.art-body strong { font-weight: 500; color: var(--ink); }
.art-body hr { border: 0; border-top: 1px solid var(--hairline); margin: 16px 0; }
.art-body ul { display: flex; flex-direction: column; gap: 11px; }
.art-body ul li { position: relative; padding-left: 27px; color: var(--ink-muted); }
.art-body ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 3px; height: 10px; background: currentColor;
  border-radius: var(--r); box-shadow: 5px 0 0 currentColor; opacity: .55;
}
.art-body ul li strong { color: var(--ink); }
.art-body .lead { font-size: 19px; color: var(--ink); line-height: 1.6; }
.art-body table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.art-body th { text-align: left; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-subtle); font-weight: 400; padding: 11px 14px; border-bottom: 1px solid var(--hairline-strong); }
.art-body td { padding: 11px 14px; border-bottom: 1px solid var(--hairline); color: var(--ink-muted); vertical-align: top; }
.art-body .tw { overflow-x: auto; border: 1px solid var(--hairline); background: var(--surface-1); }
.art-body .note {
  border-left: 2px solid var(--ink); padding: 4px 0 4px 18px; color: var(--ink);
  font-size: 16.5px;
}
.art-cta {
  margin-top: 16px; background: var(--surface-2); border: 1px solid var(--hairline);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; align-items: start;
}
.art-cta h2 { padding-top: 0; font-size: 22px; }
.art-cta p { font-size: 15.5px; color: var(--ink-muted); max-width: 56ch; }
.art-next { border-top: 1px solid var(--hairline); padding-top: 30px; margin-top: 12px; display: flex; flex-direction: column; gap: 16px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { max-width: 18ch; }
  .demo { min-height: 420px; }
}
@media (max-width: 899px) {
  :root { --sy: 54px; --sy-t: 40px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split h2 { padding-top: 0; max-width: 24ch; }
  .nav-links { display: none; }
}
@media (max-width: 639px) {
  :root { --gutter: 16px; --sy: 46px; }
  body { font-size: 16px; }
  /* Enlaces del footer con aire de dedo. */
  .foot-nav { gap: 2px 20px; }
  .foot-nav a { padding: 9px 0; }
  .steps li { gap: 16px; }
  .band-head { padding-bottom: 30px; }
  .cta-row .btn { width: 100%; }
  .band-head.row { flex-direction: column; align-items: flex-start; }
  .sector { width: 84vw; padding: 24px 20px; }
  .demo { min-height: 400px; }
}

/* ── Movimiento reducido: fundido, no desplazamiento ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .msg { opacity: 1 !important; transform: none !important; }
  .typing i { animation: none; opacity: .55; }
}