/* ═══════════════════════════════════════════════════════════════════════════
   OcularFlow · landing de venta
   ---------------------------------------------------------------------------
   Un solo fichero, sin dependencias. La landing se sirve aparte del monorepo,
   asi que las fichas de diseño estan COPIADAS de packages/ui/src/tokens.css en
   el bloque de abajo. Si alli cambia un color, aqui hay que traerlo a mano.

   Las dos reglas de marca que no son decoracion:
     · el ambar es CERCA y el teal es LEJOS. Nunca al reves, ni de adorno.
     · el modo oscuro es el estado nativo; el claro es el derivado.

   Y una regla de maquetacion que se gano a base de fallos: **ningun bloque
   nuevo entra sin `min-width: 0` si vive dentro de un grid**. Los hijos de un
   grid nacen con `min-width: auto` y una palabra larga —un correo, el nombre de
   una revista— ensancha la columna y con ella la pagina entera a 390 px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────── 0 · FUENTES (autoalojadas)
   Las tres tipografias, servidas desde assets/fuentes/ y no desde Google
   (D-SEC-8, 12 de septiembre de 2026, decidido por delegacion del dueño):
   Google Fonts era el unico tercero de la plataforma, dos origenes abiertos
   en la CSP y la IP de cada visita mandada fuera. Son los mismos @font-face
   que servia Google, solo latin y latin-ext (162 kB). Fraunces y Public Sans
   son variables (400 a 700 en un fichero); IBM Plex Mono va por peso. Los
   ficheros son una copia identica de packages/ui/src/fuentes/, y una prueba
   (packages/contenido/test/fuentes-autoalojadas.test.ts) lo exige. */
/* Fraunces · 400 700 · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fuentes/Fraunces-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Fraunces · 400 700 · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fuentes/Fraunces-400-700-latin.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;
}
/* IBM Plex Mono · 400 · latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fuentes/IBMPlexMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono · 400 · latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fuentes/IBMPlexMono-400-latin.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;
}
/* IBM Plex Mono · 500 · latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fuentes/IBMPlexMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono · 500 · latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fuentes/IBMPlexMono-500-latin.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;
}
/* IBM Plex Mono · 600 · latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fuentes/IBMPlexMono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono · 600 · latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fuentes/IBMPlexMono-600-latin.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;
}
/* Public Sans · 400 700 · latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fuentes/PublicSans-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Public Sans · 400 700 · latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fuentes/PublicSans-400-700-latin.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;
}

/* ───────────────────────────────────────────── 1 · FICHAS (copia de tokens.css)
   Ver packages/ui/src/tokens.css. Copiadas, no reinventadas. */

:root {
  /* superficies */
  --of-suelo:        #F5F0E8;  /* hueso calido; nunca blanco puro de fondo */
  --of-papel:        #FFFFFF;
  --of-papel-2:      #EFE9DE;
  --of-linea:        #DFD5C6;
  --of-linea-suave:  #ECE5D9;
  /* El borde de un CONTROL, que no es el de una linea divisoria.
     Usar `--of-linea` para los dos era el mismo color con dos trabajos muy
     distintos: como hilo entre secciones tiene que desaparecer, y como contorno
     de un boton tiene que verse. Ganaba el hilo. En oscuro, #1D3339 sobre
     #0B1A1D da 1,4:1 y el boton secundario del pie de la landing se leia como
     texto en negrita, sin forma de boton. Estos dos valores estan calculados
     para dar 3:1 contra su superficie, que es lo que pide la WCAG para el
     contorno de algo con lo que se interactua. */
  --of-borde-control: #798A86;

  /* texto */
  --of-tinta:        #0F2A2E;  /* petroleo profundo, no negro */
  --of-tinta-2:      #4A5F5C;
  --of-tenue:        #8B9995;

  /* marca */
  --of-teal:         #186E6B;
  --of-teal-claro:   #2A8F8A;
  --of-teal-lavado:  #E4EFED;
  --of-ambar:        #C77A33;
  --of-ambar-lavado: #F7EADC;

  /* semantica del ejercicio */
  --of-cerca:        var(--of-ambar);
  --of-lejos:        var(--of-teal);

  /* estados */
  --of-ok:           #2E6B4F;
  --of-ok-lavado:    #E3F0E9;
  --of-alerta:       #A8442A;
  --of-alerta-lavado:#F9E9E3;

  /* El boton flotante de WhatsApp. No sale de tokens.css: es de esta pagina y
     de ningun sitio mas. Verde propio y no `--of-ok` porque el par tiene que
     dar AA con su texto en los DOS temas, y el verde de estado no lo da. */
  --of-wasap:        #1F7A4D;
  --of-wasap-tinta:  #FFFFFF;

  /* tipografia */
  --of-display: "Fraunces", Georgia, "Times New Roman", serif;
  --of-texto:   "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --of-cifras:  "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* escala */
  --of-r-chico:  8px;
  --of-r:        14px;
  --of-r-grande: 22px;

  /* propias de la landing */
  --ancho:       72rem;
  --ancho-prosa: 36rem;
  /* El aire vertical de una seccion, y la unidad con la que se mide el respiro
     entre dos. Es una variable y no un `clamp()` repetido porque la marca de
     separacion lo divide: si el valor viviera en dos sitios, un dia el margen
     dejaria de ser la mitad del hueco y nadie sabria por que. */
  --of-respiro:  clamp(3.75rem, 9vw, 7rem);
  --sombra:      0 1px 2px rgba(15, 42, 46, .05), 0 8px 24px -12px rgba(15, 42, 46, .18);
}

/* Preferencia del sistema, sin eleccion explicita del usuario. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --of-suelo:        #0B1A1D;
    --of-papel:        #122428;
    --of-papel-2:      #182F34;
    --of-linea:        #1D3339;
    --of-linea-suave:  #16292E;
    --of-borde-control: #56706D;

    --of-tinta:        #EDE4D6;
    --of-tinta-2:      #9DB0AC;
    --of-tenue:        #5E7B78;

    --of-teal:         #5FC9BF;
    --of-teal-claro:   #86DCD3;
    --of-teal-lavado:  #10312F;
    --of-ambar:        #E0A052;
    --of-ambar-lavado: #33220F;

    --of-ok:           #6FC49A;
    --of-ok-lavado:    #14301F;
    --of-alerta:       #E08A6E;
    --of-alerta-lavado:#331A13;

    /* En oscuro el verde apagado desaparece contra el fondo: se sube el verde
       y baja la tinta. El par sigue dando AA, ahora al reves. */
    --of-wasap:        #25D366;
    --of-wasap-tinta:  #06281A;

    --sombra:          0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
  }
}

/* Eleccion explicita: gana sobre el sistema en las dos direcciones. */
:root[data-theme="dark"] {
  --of-suelo:        #0B1A1D;
  --of-papel:        #122428;
  --of-papel-2:      #182F34;
  --of-linea:        #1D3339;
  --of-linea-suave:  #16292E;
  --of-borde-control: #56706D;

  --of-tinta:        #EDE4D6;
  --of-tinta-2:      #9DB0AC;
  --of-tenue:        #5E7B78;

  --of-teal:         #5FC9BF;
  --of-teal-claro:   #86DCD3;
  --of-teal-lavado:  #10312F;
  --of-ambar:        #E0A052;
  --of-ambar-lavado: #33220F;

  --of-ok:           #6FC49A;
  --of-ok-lavado:    #14301F;
  --of-alerta:       #E08A6E;
  --of-alerta-lavado:#331A13;

  --of-wasap:        #25D366;
  --of-wasap-tinta:  #06281A;

  --sombra:          0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
}

/* La escena del ejercicio no hereda el tema: siempre va en noche, porque el
   punto en movimiento tiene que ser lo mas luminoso del encuadre. */
.of-escena {
  --of-suelo: #071316;
  --of-papel: #0C1E22;
  --of-tinta: #EDE4D6;
  --of-tinta-2: #9DB0AC;
  --of-linea: #16292E;
  --of-teal: #5FC9BF;
  --of-ambar: #E0A052;
  background: var(--of-suelo);
  color: var(--of-tinta);
}

/* ───────────────────────────────────────────────────────── 2 · BASE */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--of-suelo);
  color: var(--of-tinta);
  font-family: var(--of-texto);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--of-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 6.4vw, 4.1rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.42rem); line-height: 1.25; }
h4 { font-size: 1.02rem; font-family: var(--of-texto); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

strong { font-weight: 700; }
em { font-style: italic; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .5em; }
li:last-child { margin-bottom: 0; }

img, svg { max-width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--of-linea);
  margin: 0;
}

::selection { background: var(--of-teal); color: var(--of-suelo); }

/* Foco visible de verdad, y el mismo en toda la pagina. */
:focus-visible {
  outline: 3px solid var(--of-ambar);
  outline-offset: 3px;
  border-radius: 3px;
}

.salta-al-contenido {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--of-teal);
  color: var(--of-suelo);
  padding: .7rem 1.1rem;
  border-radius: var(--of-r-chico);
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease;
}
.salta-al-contenido:focus { top: 1rem; }

.oculto-visualmente {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ───────────────────────────────────────────── 3 · LAYOUT Y PIEZAS COMUNES */

.envoltorio {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  min-width: 0;
}

.seccion { padding: var(--of-respiro) 0; }
.seccion--papel { background: var(--of-papel-2); }

/* EL RESPIRO ENTRE SECCIONES, pedido por el dueño el 8 de septiembre de 2026.

   Hasta entonces la separacion era una linea de 1 px de lado a lado, y en las
   secciones con fondo de papel no se veia siquiera: dos secciones seguidas se
   leian como una sola larga.

   Ahora la marca es CORTA y va centrada —cuatro rem de teal que se desvanece
   por los dos lados—, y ademas abre medio respiro extra por encima. Entre dos
   secciones quedan 2,5 respiros en vez de 2: el ojo llega al final de una cosa,
   ve la marca y sabe que empieza otra.

   Va en un `::before` de la propia seccion y no de su `.envoltorio` a
   proposito: hay envoltorios que son `grid` —el de `#que-es`, por ejemplo— y
   ahi un pseudoelemento se convierte en una celda mas y descuadra la rejilla. */
.seccion + .seccion::before {
  content: "";
  display: block;
  width: 4rem;
  height: 2px;
  border-radius: 2px;
  margin: calc(var(--of-respiro) / -2) auto calc(var(--of-respiro) / 2);
  background: linear-gradient(90deg, transparent, var(--of-teal), transparent);
  opacity: .55;
}

.prosa { max-width: var(--ancho-prosa); }
.prosa--ancha { max-width: 44rem; }

.cabecera-seccion { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.cabecera-seccion p { color: var(--of-tinta-2); font-size: 1.14rem; }
/* El ultimo parrafo de una cabecera no arrastra su margen: el hueco hasta el
   contenido lo pone `margin-bottom` de la cabecera, y sumarlos descuadraba el
   espaciado de unas secciones respecto de otras. */
.cabecera-seccion > :last-child { margin-bottom: 0; }

/* Rotulo de seccion: numero en mono + nombre en versalitas. */
.rotulo {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  font-family: var(--of-cifras);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--of-tinta-2);
  margin: 0 0 1.15rem;
}
.rotulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--of-linea);
  transform: translateY(-.2em);
}
.rotulo b { color: var(--of-teal); font-weight: 500; }

.of-cifra {
  font-family: var(--of-cifras);
  font-variant-numeric: tabular-nums;
}

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  min-height: 2.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease;
}
.boton:hover { transform: translateY(-1px); }
/* Al pulsar se HUNDE un 2 %: es la respuesta táctil que un botón de venta
   necesita para que el dedo sepa que ha pulsado, y no crece nunca —un botón
   que crece se lee como un aviso—. */
.boton:active { transform: scale(.98); }

.boton--principal { background: var(--of-teal); color: var(--of-suelo); }
.boton--principal:hover { background: var(--of-teal-claro); }

.boton--secundario {
  background: transparent;
  color: var(--of-tinta);
  /* Ficha propia de control: `--of-linea` es el hilo entre secciones y aqui
     desaparecia. Ver el porque en landing.css, seccion de fichas. */
  border-color: var(--of-borde-control);
}
.boton--secundario:hover { border-color: var(--of-teal); color: var(--of-teal); }
/* La flecha de los secundarios se dibuja aqui y no en el HTML: es un simbolo,
   igual en los tres idiomas, y en el marcado obligaria a repetirla en cada
   tabla de traduccion. Solo con un puntero de verdad se desplaza al pasar por
   encima; en tactil no hay `hover` y no habria nada que ver. */
.boton--secundario::after {
  content: "→";
  display: inline-block;
  transition: translate .2s ease;
}
@media (hover: hover) {
  .boton--secundario:hover::after { translate: 4px 0; }
}

.boton--grande { padding: 1.1rem 2.1rem; font-size: 1.08rem; }

/* Un puente: la linea que cierra una seccion y el boton que faltaba debajo.
   Nacio del «desierto de CTA» de la auditoria del 11 de septiembre de 2026:
   diez pantallas de celular seguidas sin un solo boton. */
.puente {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--of-linea);
  max-width: 44rem;
}
.puente > p:first-child {
  font-family: var(--of-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: 1.1rem;
}
.puente .heroe-acciones { margin: 0; }
.puente--centrado { max-width: none; text-align: center; border-top: 0; padding-top: 0; }
.puente--centrado .heroe-acciones { justify-content: center; }

/* Chips y etiquetas */
.chip {
  /* El cuerpo de la pildora sale por una variable porque hay que volver a
     declararlo mas abajo —ver `.tarjeta-que .chip`— y un numero escrito dos
     veces acaba diciendo dos cosas. Aqui se decide una vez. */
  --of-chip-cuerpo: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .22rem .62rem;
  border-radius: 999px;
  font-family: var(--of-cifras);
  font-size: var(--of-chip-cuerpo);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--of-linea);
  color: var(--of-tinta-2);
  background: var(--of-papel);
  white-space: nowrap;
}
.chip--teal   { border-color: var(--of-teal);   color: var(--of-teal);   background: var(--of-teal-lavado); }
.chip--ambar  { border-color: var(--of-ambar);  color: var(--of-tinta);   background: var(--of-ambar-lavado); }
.chip--ok     { border-color: var(--of-ok);     color: var(--of-ok);     background: var(--of-ok-lavado); }
.chip--alerta { border-color: var(--of-alerta); color: var(--of-alerta); background: var(--of-alerta-lavado); }

/* Tarjetas */
.tarjeta {
  background: var(--of-papel);
  border: 1px solid var(--of-linea);
  border-radius: var(--of-r);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
}

/* ── Las micro-interacciones de las tarjetas ─────────────────────────────────
   Medido antes de hacerlo (auditoria del 11 de septiembre de 2026): 27
   tarjetas y ni una respondia al puntero. Todas las tarjetas de la pagina
   —funciones, citas, publicos, muestra, recorridos, preguntas— se levantan
   4 px, ganan sombra y borde teal, y su icono se enciende.

   Solo bajo `(hover: hover)`: en una pantalla tactil no hay puntero que
   pasar, y un `:hover` pegajoso tras un toque deja una tarjeta «levantada»
   sin motivo. Es una respuesta a la mano, no un bucle: no se mueve nada que
   nadie este leyendo sin que lo haya pedido. */
.tarjeta, .dice, .publicos li, .mov, .trazo, .pregunta {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tarjeta-que .icono, .publicos svg, .mov-icono { transition: color .2s ease; }
@media (hover: hover) {
  .tarjeta:hover, .dice:hover, .publicos li:hover, .mov:hover, .trazo:hover, .pregunta:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra);
    border-color: var(--of-teal);
  }
  .tarjeta:hover .icono, .publicos li:hover svg, .mov:hover .mov-icono { color: var(--of-teal-claro); }
}

.rejilla { display: grid; gap: 1.1rem; }
/* Los elementos de grid nacen con min-width:auto. Una etiqueta larga dentro
   de una tarjeta puede ensanchar toda la columna y crear desplazamiento
   horizontal en móvil aunque la envoltura mida exactamente 100%. */
.rejilla > * { min-width: 0; }
@media (min-width: 640px)  { .rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

/* ───────────────────────────────────────────────────── 4 · CABECERA FIJA */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--of-suelo);                                   /* respaldo */
  background: color-mix(in srgb, var(--of-suelo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--of-linea-suave);
  transition: box-shadow .25s ease;
}
/* La barra gana sombra en cuanto el heroe queda atras: pegada al borde sobre
   el heroe es parte de el; sobre el resto de la pagina es una pieza que flota,
   y sin sombra parece que el contenido le pasa por encima. La clase la pone
   `landing.js` mirando si el heroe sigue a la vista. */
.barra--flotante { box-shadow: 0 8px 24px -16px rgba(15, 42, 46, .35); }
.barra-interior {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4.25rem;
}
.marca {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--of-display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -.01em;
  color: var(--of-tinta);
  margin-right: auto;
}
/* En el pie la marca no compite por el espacio de una barra: es un bloque y
   necesita su aire debajo. Estaba resuelto con un `style=` en el HTML.
   El isotipo mide LO MISMO que en la barra a proposito: es la misma marca, y
   dos tamaños distintos para el mismo dibujo se separan en cuanto alguien
   retoque uno. */
.marca--pie { margin: 0 0 1rem; }

/* EL ISOTIPO MEDIA 25,59 px EN UNA BARRA DE 68, y de eso solo 21,3 eran tinta:
   el anillo va de 10 a 110 dentro de un `viewBox` de 120, asi que un sexto de
   la caja es margen del propio dibujo. La marca quedaba mas baja que la caja de
   linea del texto que lleva al lado —32,19 px— y a menos de la mitad del boton
   de tema, que son 44: era el elemento mas pequeño de su propio conjunto.

   2,5rem son 40 px de caja y 33,3 de tinta. Por encima de la linea del texto, a
   la misma escala que los iconos de las tarjetas —tambien 2,5rem— y con 14 px
   de aire arriba y abajo en una barra de 4,25rem. El dibujo no se toca: son dos
   trazos en un SVG en linea, asi que escala sin perder nada. */
.isotipo { width: 2.5rem; height: 2.5rem; display: block; color: var(--of-tinta); }
.iso-pupila { fill: var(--of-teal); }

.barra-enlaces { display: none; gap: 1.15rem; align-items: center; min-width: 0; }
/* La traducción portuguesa necesita 517 px para las seis secciones. Antes de
   1200 px se solapaban con el selector de idioma aunque la página no desbordara. */
@media (min-width: 1200px) { .barra-enlaces { display: flex; } }
.barra-enlaces a {
  display: inline-flex;
  align-items: center;
  /* UN ROTULO DE MENU NO SE PARTE EN DOS LINEAS.

     Medido en la pagina PORTUGUESA a 1280 px el 9 de septiembre de 2026: el
     menu salia en DOS FILAS de 62 px dentro de una barra de 68. Y no era que no
     cupieran los seis enlaces —suman 1072 de 1152 disponibles— sino que el
     texto de dentro se rompia: «O que voce leva» se partia en «O que voce» /
     «leva» y arrastraba la fila entera.

     Por eso no se vio al arreglar la barra castellana: ahi los rotulos son mas
     cortos y ninguno llegaba a partirse. Es el mismo fallo que la landing tuvo
     con la pildora de idiomas — **el segundo idioma abre la costura**. */
  white-space: nowrap;
  min-height: 2.75rem;
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  color: var(--of-tinta-2);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-bottom-color .2s ease;
}
.barra-enlaces a:hover { color: var(--of-tinta); border-bottom-color: var(--of-teal); }

/* «Ya tengo cuenta»: la puerta del que vuelve.

   SE VE SIEMPRE, tambien por debajo de 1120px, donde la navegacion de arriba
   se esconde. Y no es una excepcion de estilo: esos cinco enlaces llevan a
   secciones de la misma pagina y quien lea hacia abajo llega igual; este es el
   unico camino a otra cosa. Esconderlo en el movil dejaria sin puerta justo al
   que la necesita, que es quien vuelve desde un aparato distinto.

   `margin-left: auto` lo empuja contra el boton principal, y el boton se queda
   el ultimo: el orden visual es «entrar» y luego «empezar», que es el que tiene
   la pagina entera.

   Los 2.75rem de alto no son decorativos: son la zona de pulsacion. El texto
   ocupa una linea de 1.2rem, y sin esto el blanco de alrededor no seria
   pulsable por mucho que lo parezca. */
.barra-acceso {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .35rem .2rem;
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  color: var(--of-tinta-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .2s ease, border-bottom-color .2s ease;
}
.barra-acceso:hover { color: var(--of-tinta); border-bottom-color: var(--of-teal); }

/* El selector de idioma: TRES ENLACES PLEGADOS EN UN `<details>`.

   Plegado el 9 de septiembre de 2026 porque la barra no cabia: los seis enlaces
   de seccion salian en dos filas a 1280 px y esto se llevaba 138 px. Plegado
   ocupa unos 64. El porque entero, y por que sigue siendo HTML y no un menu de
   JavaScript, esta en el comentario del `index.html`.

   Sigue sin poder haber desacuerdo entre lo que dice el control y lo que se
   esta leyendo: el codigo visible y el `aria-current` los escribe el generador
   de las tres paginas, desde el mismo sitio y a la vez. */
.selector-idioma {
  position: relative;
  flex: none;
  color: var(--of-tinta-2);
}
/* El triangulito nativo sobra: el control ya lleva su flecha dibujada. Se quita
   por partida doble porque los navegadores no coinciden en cual leen. */
.selector-idioma > summary { list-style: none; }
.selector-idioma > summary::-webkit-details-marker { display: none; }
.selector-idioma > summary::marker { content: ""; }
.selector-idioma > summary {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  /* Los 2,75 rem de alto son la zona de pulsacion y no se negocian. */
  min-height: 2.75rem;
  padding: 0 .4rem;
  border-radius: var(--of-r);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--of-tinta-2);
  -webkit-tap-highlight-color: transparent;
}
.selector-idioma > summary:hover { color: var(--of-teal); }
.selector-idioma > summary:focus-visible {
  outline: 2px solid var(--of-teal);
  outline-offset: 2px;
}
.icono-idioma { width: 1.05rem; height: 1.05rem; flex: none; }
.icono-abrir {
  width: .8rem; height: .8rem; flex: none;
  transition: transform .18s ease;
}
.selector-idioma[open] > summary .icono-abrir { transform: rotate(180deg); }
.selector-idioma[open] > summary { color: var(--of-tinta); background: var(--of-teal-lavado); }

/* El panel. FONDO OPACO, y eso importa: la barra lleva `backdrop-filter` y un
   panel translucido encima dejaria leer la pagina por debajo del menu. */
.idiomas-panel {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: .35rem;
  border: 1px solid var(--of-linea-suave);
  border-radius: var(--of-r);
  background: var(--of-suelo);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
.idiomas-panel a {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: 0 .6rem;
  border-radius: var(--of-r);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  color: var(--of-tinta-2);
  white-space: nowrap;
}
.idiomas-panel a:hover { color: var(--of-tinta); background: var(--of-teal-lavado); }
.idioma-codigo {
  flex: none;
  min-width: 2rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--of-tinta-3, var(--of-tinta-2));
}
/* La pagina en la que ya estas no es un enlace util: se marca y se apaga. */
.idiomas-panel a[aria-current="page"] {
  color: var(--of-tinta);
  background: var(--of-teal-lavado);
  cursor: default;
}
.idiomas-panel a[aria-current="page"] .idioma-codigo { color: var(--of-teal); }

.boton-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--of-borde-control);
  background: transparent;
  color: var(--of-tinta-2);
  cursor: pointer;
  flex: none;
}
.boton-tema { transition: color .2s ease, border-color .2s ease; }
.boton-tema:hover { color: var(--of-teal); border-color: var(--of-teal); }
.boton-tema svg { width: 1.05rem; height: 1.05rem; }
.icono-luna { display: none; }
:root[data-theme="dark"] .icono-sol { display: none; }
:root[data-theme="dark"] .icono-luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icono-sol  { display: none; }
  :root:not([data-theme="light"]) .icono-luna { display: block; }
  :root[data-theme="light"] .icono-sol  { display: block; }
  :root[data-theme="light"] .icono-luna { display: none; }
}

.barra .boton { padding: .6rem 1rem; font-size: .93rem; white-space: nowrap; }

/* ───────────────────────────────────────────────────────────── 5 · HEROE */

.heroe {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5.5rem);
  position: relative;
  isolation: isolate;
}

/* EL HALO QUE SIGUE AL PUNTERO. Es el punto guia de la marca convertido en
   una luz de fondo que acompaña al raton por el heroe. La caja recorta con
   `overflow: clip`, y NO con el desbordamiento horizontal escondido que esta
   pagina prohibe —no tapa un desbordamiento de la pagina: recorta una luz
   dentro de su propia caja— para que la luz no salga por el borde derecho y
   abra desplazamiento horizontal. (La prohibicion se escribe aqui con palabras
   a proposito: la prueba que la vigila lee este fichero con comentarios, y
   escribirla literal la hacia saltar contra su propia explicacion.)
   `--px`/`--py` los escribe `landing.js` con `setProperty`, que es lo unico
   que la CSP deja escribir en linea. */
.halo {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
/* La luz solo existe con JavaScript (`.anima-on`): sin el nadie escribiria
   `--px`, y una luz clavada en el centro no es un halo, es una mancha. Por
   eso el `content` tambien cuelga de la clase, y por eso el estado invisible
   de partida esta detras de `.anima-on`, como todo estado de partida de esta
   pagina. */
.halo::after { content: none; }
.anima-on .halo::after {
  content: "";
  position: absolute;
  left: var(--px, 50%);
  top: var(--py, 40%);
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--of-teal) 20%, transparent), transparent 68%);
  opacity: 0;
  transition: opacity .6s ease;
}
/* Solo con un puntero de verdad y solo cuando ya ha entrado uno. */
@media (hover: hover) {
  .anima-on .halo--activo::after { opacity: 1; }
}

/* Una sola luz detras del heroe. No es decoracion gratuita: el producto va de
   un punto luminoso en la oscuridad, y la pagina empieza con esa misma idea.
   Va en `position:absolute` dentro de un contenedor que ya recorta a 100%, asi
   que no puede ensanchar la pagina en movil. */
.aurora {
  position: absolute;
  z-index: -1;
  inset: -6rem 0 auto 0;
  height: 32rem;
  max-width: 100%;
  pointer-events: none;
  background:
    radial-gradient(38rem 22rem at 78% 18%, color-mix(in srgb, var(--of-teal) 22%, transparent), transparent 70%),
    radial-gradient(30rem 18rem at 8% 0%, color-mix(in srgb, var(--of-ambar) 14%, transparent), transparent 72%);
  opacity: .85;
}

/* La escena arranca ARRIBA, y no centrada.

   Las dos columnas miden cosas muy distintas: 1.061 px la de texto —lleva ocho
   bloques— y 434 la de la escena, cuya altura la fija el `viewBox` del SVG.
   Con `center` el sobrante se repartia por igual y dejaba 313,3 px de aire
   ARRIBA y otros 313,3 debajo: lo primero que se veia de la mitad derecha era
   un rectangulo vacio, y el ojo flotaba sin alinearse con nada.

   `start` no quita sobrante —eso es adelgazar la columna de texto, y es trabajo
   de copy—: lo manda todo abajo, que es donde no estorba, y hace que la escena
   empiece a la altura del titular.

   En movil no cambia nada: con una sola columna cada fila se ajusta a su
   contenido, y `align-items` es el eje de bloque, no el ancho. */
.heroe-rejilla { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); align-items: start; }
.heroe-rejilla > * { min-width: 0; }
@media (min-width: 1000px) {
  .heroe-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
/* La columna de texto tiene su propio ritmo vertical, y se declara una vez
   aqui en vez de con un margen distinto en cada pieza: asi el heroe no se
   descuadra cuando entra o sale un bloque. */
.heroe-texto > * { margin-bottom: 1.35rem; }
.heroe-texto > :last-child { margin-bottom: 0; }

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--of-cifras);
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--of-teal);
  background: var(--of-teal-lavado);
  border: 1px solid var(--of-teal);                              /* respaldo */
  border-color: color-mix(in srgb, var(--of-teal) 35%, transparent);
  padding: .35rem .8rem;
  border-radius: 999px;
  max-width: 100%;
}

.heroe h1 { margin-bottom: 1.1rem; }

/* La entradilla se estila en los DOS sitios donde vive desde el 9 de septiembre
   de 2026: el heroe nuevo y `#que-es`, que es el heroe de antes bajado una
   seccion. Iba con `.heroe .entradilla` y al bajar el bloque se quedo sin
   estilo: el descendiente dejo de existir sin que nada protestara, porque una
   regla que no casa no da error. */
.heroe .entradilla,
.seccion--quees .entradilla {
  font-size: clamp(1.08rem, 1.9vw, 1.24rem);
  color: var(--of-tinta-2);
  max-width: 34rem;
}
.heroe .entradilla strong,
.seccion--quees .entradilla strong { color: var(--of-tinta); }

/* ── El heroe de la vida ───────────────────────────────────────────────────
   Una sola columna, y a proposito. El heroe anterior tenia dos —ocho bloques
   de texto a la izquierda y la escena a la derecha— y de ahi salieron los 313
   px de hueco que hubo que corregir a mano. Aqui el texto manda arriba, ancho
   y corto, y las fotos ocupan el ancho entero debajo: no hay dos columnas de
   alturas distintas que cuadrar. */
/* EL HERO, EN DOS COLUMNAS A PARTIR DE 1120 px.

   Era una sola columna: el texto arriba, con `max-width: 46rem`, y las cuatro
   fotos debajo en fila. En una pantalla de 1400 px eso dejaba **medio hero
   vacio** a la derecha del titular — el dueño lo marco el 9 de septiembre de
   2026: «existe un hueco del lado derecho absurdo, eso no ayuda con el
   marketing».

   Y no ayudaba de verdad: lo primero que se ve de una pagina de venta es la
   mitad de arriba, y ahi la mitad derecha no decia nada. Ahora las cuatro fotos
   —que son el argumento entero del hero, la vida que se mira— suben a esa mitad
   en 2x2 y se ven SIN BAJAR.

   Por debajo de 1120 px no cambia nada: una columna, texto y luego fotos, que
   es lo que cabe en un movil. */
.heroe-vida { display: grid; gap: clamp(2.25rem, 5vw, 3.25rem); }
@media (min-width: 1120px) {
  .heroe-vida {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: center;
  }
  /* El texto deja de tener tope propio: ya lo limita su columna, y con los dos
     el titular se quedaba corto y volvia a sobrar sitio dentro de su mitad. */
  .heroe-vida-texto { max-width: none; }
  /* La rejilla 2x2 NO se declara aqui: `.vidas` la pisa mas abajo. Va con el
     resto de `.vidas--heroe`, al final del fichero. */
}
.heroe-vida-texto { max-width: 46rem; }
.heroe-vida-texto > * { margin-bottom: 1.35rem; }
.heroe-vida-texto > :last-child { margin-bottom: 0; }
.heroe-vida h1 { text-wrap: balance; }
.heroe-vida-remate {
  font-size: 1.02rem;
  color: var(--of-tinta-2);
  max-width: 34rem;
}

/* Las cuatro fotos del heroe se estilan MAS ABAJO, con el resto de `.vidas`.
   Aqui no, aunque sea donde viven: `.vidas--heroe img` y `.vidas img` tienen la
   misma especificidad (0,1,1), asi que gana la que va despues en el fichero.
   Puesto aqui arriba el `aspect-ratio` nuevo no habria hecho nada y la unica
   forma de enterarse habria sido abriendo la pagina. */

/* Para quien es esto, en tres golpes de vista. La version anterior lo decia
   con un antetitulo —«para quien vive delante de una pantalla»— y eso dejaba
   fuera a casi todo el mundo a quien le sirve. */
.publico-chips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.publico-chips li {
  margin: 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem .35rem .7rem;
  border: 1px solid var(--of-linea);
  border-radius: 999px;
  background: var(--of-papel);
  color: var(--of-tinta-2);
  font-size: .88rem;
  line-height: 1.35;
}
.publico-chips li::before {
  content: "";
  flex: none;
  width: .5rem; height: .5rem;
  border-radius: 999px;
  background: var(--of-teal);
}

/* Lo unico que la pagina firma en primera persona. Va con filete ambar porque
   es una afirmacion NUESTRA y conviene que se distinga de lo atribuido. */
.firma {
  border-left: 3px solid var(--of-ambar);
  padding-left: 1.1rem;
  max-width: 34rem;
  color: var(--of-tinta-2);
  font-size: 1rem;
}
.firma strong { color: var(--of-tinta); }

.heroe-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}
.pie-accion {
  font-size: .92rem;
  color: var(--of-tinta-2);
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.pie-accion svg { width: 1rem; height: 1rem; flex: none; color: var(--of-teal); margin-top: .3rem; }

/* Los nombres que respaldan el catalogo, en el primer pantallazo. No es un
   carrusel: es una lista que ENVUELVE, para que a 390 px baje de linea en vez
   de empujar la pagina a lo ancho. */
/* El rotulo que la estrena, del 9 de septiembre de 2026: «Algunos especialistas
   que recomiendan». Hasta entonces la marquesina iba al final del heroe y sin
   nombre, como una banda de logotipos de las que nadie lee — y la lista de
   instituciones es lo mas fuerte que tiene esta pagina. */
.marquesina-rotulo {
  margin-bottom: .55rem;
  font-family: var(--of-cifras);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--of-teal);
}

.marquesina {
  list-style: none;
  padding: 1.1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .9rem;
  border-top: 1px solid var(--of-linea);
  margin-top: 2rem;
}
.marquesina li {
  margin: 0;
  min-width: 0;
  font-family: var(--of-cifras);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--of-tinta-2);
  overflow-wrap: anywhere;
}
.marquesina li + li::before {
  content: "·";
  margin-right: .45rem;
  color: var(--of-teal);
}
/* Con rotulo delante, la lista no vuelve a abrir hueco: el aire lo pone el
   rotulo. `.heroe-texto > *` le da 1,35rem a todo hijo directo y hay que
   anularlo aqui, no alli — alli manda para los otros ocho bloques. */
.marquesina-rotulo + .marquesina { margin-top: 0; }
.heroe-texto > .marquesina-rotulo { margin-bottom: .55rem; }

/* La escena de demostracion */
.escena {
  border-radius: var(--of-r-grande);
  border: 1px solid #16292E;
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .85);
}
.escena-cuadro { position: relative; }
.escena-lienzo { display: block; width: 100%; height: auto; }

/* El rotulo de la demo, pedido por el dueño el 9 de septiembre de 2026: la
   escena se mueve sola, con sus botones y su cronometro, y no decia en ningun
   sitio que es. Mismo tratamiento que `escena-pie` —dentro de la caja, con su
   borde— para que se lea como parte de la escena y no del texto de al lado. */
.escena-rotulo {
  margin: 0;
  padding: .7rem 1rem;
  border-bottom: 1px solid #16292E;
  background: #0C1E22;
  font-family: var(--of-cifras);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9DB0AC;
}

.escena-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  border-top: 1px solid #16292E;
  background: #0C1E22;
}
/* El titulo hereda el margen inferior de `p` y en una fila flex eso levanta
   los botones respecto del texto: es la clase de descuadre que solo se ve
   cuando alguien lo mide. Aqui el unico margen que interesa es el `auto` que
   empuja los controles a la derecha. */
.escena-pie .titulo-mov {
  margin: 0 auto 0 0;
  font-family: var(--of-cifras);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9DB0AC;
}
.escena-pie .titulo-mov b { color: #EDE4D6; font-weight: 500; }

.control {
  font: inherit;
  font-family: var(--of-cifras);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  min-height: 2.75rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid #23464C;
  background: transparent;
  color: #9DB0AC;
  cursor: pointer;
}
.control { transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.control:hover { color: #EDE4D6; border-color: #5FC9BF; }
.control[aria-pressed="true"] { background: #10312F; border-color: #5FC9BF; color: #86DCD3; }
/* Pausar/Reanudar se separa de los dos trazos: es otra clase de control. */
.control--pausa { margin-left: .35rem; border-color: #3B6A70; color: #EDE4D6; }

/* El punto es lo mas luminoso del encuadre. Nada mas lleva este brillo. */
.punto-guia { filter: drop-shadow(0 0 14px rgba(95, 201, 191, .95)); }
.escena-estado { margin: 0; }
.rastro { stroke: #5FC9BF; opacity: .22; }
/* La nota es HTML encima del lienzo y no un `<text>` del SVG: dentro del SVG
   escalaba con el `viewBox` y en un celular medía unos 4 px. Aqui mide lo que
   dice, en cualquier pantalla. */
.escena-nota {
  position: absolute;
  top: .85rem;
  left: 1rem;
  margin: 0;
  font-family: var(--of-cifras);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9DB0AC;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────── 6 · EL PROBLEMA */

/* La jornada es el corazon narrativo de la pagina, asi que se le da tamaño:
   la hora manda en su propia columna y el texto sube de cuerpo. En movil las
   dos filas se apilan, porque una columna fija de horas mas una linea larga a
   390 px es exactamente como se gana un desplazamiento horizontal. */
.seccion--dia { background: var(--of-papel-2); }

.dia {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  max-width: 52rem;
  border-top: 1px solid var(--of-linea);
  position: relative;
}
.dia li {
  margin: 0;
  min-width: 0;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--of-linea);
  color: var(--of-tinta-2);
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  line-height: 1.6;
}
.dia li b { color: var(--of-tinta); font-weight: 600; }
.dia .hora {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--of-cifras);
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--of-teal);
}
@media (min-width: 640px) {
  .dia li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0 1.5rem;
    align-items: baseline;
  }
  .dia .hora { margin-bottom: 0; }
}

/* ── La jornada avanza con el scroll ─────────────────────────────────────────
   Una linea vertical a la izquierda se rellena de teal conforme la lista
   cruza la pantalla, y cada hora se enciende al pasar por el centro. EL TEXTO
   NO SE MUEVE: solo cambia un color y crece una linea. Va atado al scroll
   (`animation-timeline: view()`), asi que no es un bucle ni corre sola: quien
   no baja no ve moverse nada.

   Bajo `@supports` porque no todos los navegadores lo tienen aun. Sin
   soporte, la hora es teal desde el principio —que es como estaba hasta el
   11 de septiembre de 2026— y la linea no existe: la reserva es la pagina de
   antes, no una pagina rota. Y con `prefers-reduced-motion` se apaga igual
   (ver «MOVIMIENTO REDUCIDO»): un color que cambia al hacer scroll no es un
   desplazamiento, pero la regla de esta pagina es que con esa preferencia
   solo queden los fundidos. */
@supports (animation-timeline: view()) {
  .anima-on .dia::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--of-teal);
    transform-origin: top;
    animation: of-linea-jornada linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 65%;
  }
  .anima-on .dia .hora {
    color: var(--of-tinta-2);
    animation: of-hora-encendida linear both;
    animation-timeline: view();
    animation-range: cover 30% cover 45%;
  }
  .anima-on .dia li { padding-left: 1rem; }
  @media (min-width: 640px) {
    .anima-on .dia li { padding-left: 1.25rem; }
  }
}
@keyframes of-linea-jornada {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes of-hora-encendida {
  from { color: var(--of-tinta-2); }
  to   { color: var(--of-teal); }
}

.remate {
  margin-top: 2.25rem;
  border-left: 3px solid var(--of-ambar);
  padding-left: 1.2rem;
  max-width: 40rem;
  font-size: 1.1rem;
}


/* Las tres puertas de entrada al producto. Es la respuesta a que el relato de
   arriba describe UN dia posible y no el unico: quien no se reconozca en esas
   horas tiene que verse igual aqui. */
.publicos {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  gap: 1rem;
}
.publicos > * { min-width: 0; }
@media (min-width: 760px) { .publicos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.publicos li {
  margin: 0;
  padding: 1.25rem 1.35rem;
  background: var(--of-suelo);
  border: 1px solid var(--of-linea);
  border-radius: var(--of-r);
  color: var(--of-tinta-2);
  font-size: .97rem;
}
.publicos svg {
  display: block;
  width: 1.7rem; height: 1.7rem;
  color: var(--of-teal);
  margin-bottom: .7rem;
}
.publicos b {
  display: block;
  color: var(--of-tinta);
  font-size: 1.04rem;
  margin-bottom: .25rem;
}

/* ────────────────────────────────────── 7 · QUE DICEN LOS ESPECIALISTAS */

.especialistas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
/* Los hijos de un grid nacen con min-width:auto. Un nombre largo de revista
   —«Contact Lens and Anterior Eye»— ensancharia la columna y con ella la
   pagina entera a 390 px. */
.especialistas > * { min-width: 0; }
@media (min-width: 760px)  { .especialistas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .especialistas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dice {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  background: var(--of-suelo);
  border: 1px solid var(--of-linea);
  border-top: 3px solid var(--of-teal);
  border-radius: var(--of-r);
  padding: 1.35rem;
}

.dice-quien {
  margin: 0;
  font-family: var(--of-cifras);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--of-teal);
  overflow-wrap: anywhere;
}

/* Solo las citas llevan comillas; los resúmenes usan el mismo cuerpo de texto. */
.dice-que {
  margin: 0;
  position: relative;
}
blockquote.dice-que {
  padding-left: 1.6rem;
}
blockquote.dice-que::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -.15em;
  font-family: var(--of-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--of-teal);
  opacity: .55;
}
.dice-que p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--of-tinta);
}

/* LA CIFRA DEL PARPADEO, DIBUJADA: quince puntos que se apagan hasta seis al
   asomar la tarjeta (15 por minuto → 5 o 7, la cita de la AAO de al lado).
   El estado final —seis encendidos— es el que se ve sin JavaScript; con el,
   los quince arrancan encendidos y los nueve sobrantes se apagan en cadena
   cuando la tarjeta entra. Apagado es `.18`, no cero: el punto sigue ahi,
   como el parpadeo que no se hace. */
.parpadeos {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0;
}
.parpadeos i {
  display: block;
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--of-teal);
  transition: opacity .35s ease;
}
.parpadeos i:nth-child(n+7) { opacity: .18; }
.anima-on .especialistas:not(.visto) .parpadeos i:nth-child(n+7) { opacity: 1; }
.anima-on .especialistas.visto .parpadeos i:nth-child(7)  { transition-delay: .5s; }
.anima-on .especialistas.visto .parpadeos i:nth-child(8)  { transition-delay: .62s; }
.anima-on .especialistas.visto .parpadeos i:nth-child(9)  { transition-delay: .74s; }
.anima-on .especialistas.visto .parpadeos i:nth-child(10) { transition-delay: .86s; }
.anima-on .especialistas.visto .parpadeos i:nth-child(11) { transition-delay: .98s; }
.anima-on .especialistas.visto .parpadeos i:nth-child(12) { transition-delay: 1.1s; }
.anima-on .especialistas.visto .parpadeos i:nth-child(13) { transition-delay: 1.22s; }
.anima-on .especialistas.visto .parpadeos i:nth-child(14) { transition-delay: 1.34s; }
.anima-on .especialistas.visto .parpadeos i:nth-child(15) { transition-delay: 1.46s; }

/* `margin-top: auto` empuja lo que queda —nuestra linea y el enlace— al fondo
   de la tarjeta, para que las tres columnas acaben a la misma altura aunque
   las citas midan distinto. */
.dice-nuestro {
  margin: auto 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--of-linea-suave);
  font-size: .9rem;
  color: var(--of-tinta-2);
}

/* El enlace a la fuente es politica, no adorno: si la pagina cita a alguien,
   quien lea tiene que poder ir a comprobarlo en un clic. */
.dice-enlace {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
}
.dice-enlace a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.75rem;
  font-family: var(--of-cifras);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--of-teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.dice-enlace a::after { content: "↗"; }
.dice-enlace a:hover { border-bottom-color: var(--of-teal); }

/* ─────────────────────────────────────────────────── 8 · QUE ES / SESION */

.tarjeta-que { display: flex; flex-direction: column; }
.tarjeta-que h3 { display: flex; align-items: center; gap: .7rem; }
.tarjeta-que .icono {
  width: 2.5rem; height: 2.5rem;
  flex: none;
  color: var(--of-teal);
}
.tarjeta-que p { color: var(--of-tinta-2); font-size: .99rem; overflow-wrap: anywhere; }
/* LA PILDORA SE PINTABA UN 41 % MAS GRANDE DE LO DISEÑADO, y no lo decia
   ninguna de las dos reglas por separado.

   El chip es un `<p>`, asi que `.tarjeta-que p` (0-1-1) le ganaba a `.chip`
   (0-1-0) y lo sacaba a 15,84 px en vez de a 11,2. Nadie lo escribio: salio de
   que una regla de parrafo de la tarjeta pisa a la de la pildora, que es un
   choque que no se ve leyendo ninguno de los dos sitios.

   Se recupera aqui, donde la especificidad ya es 0-2-0 y gana, y con la
   variable en vez de con el numero para que siga habiendo un solo cuerpo. */
.tarjeta-que .chip {
  font-size: var(--of-chip-cuerpo);
  max-width: 100%;
  /* El `nowrap` de `.chip` se desactiva a proposito: a 980 px la tarjeta se
     estrecha y una pildora que no puede partir se sale de la pagina. Que quepa
     en una linea es cosa del TEXTO —se acorto por eso—, no de prohibirle
     partir. */
  white-space: normal;
  line-height: 1.35;
  text-wrap: balance;
  margin-top: auto;
}

/* Los datos de contacto, aqui y en el pie con la misma pieza. */
.contacto-lista {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: grid;
  gap: .35rem;
}
.contacto-lista li {
  margin: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
  font-size: .93rem;
  color: var(--of-tinta-2);
}
.contacto-lista svg { width: 1.2rem; height: 1.2rem; color: var(--of-teal); }
/* El enlace es el objetivo tactil y por eso lleva los 44 px; el dato que no se
   pulsa NO se convierte en `inline-flex`, porque un `<br>` dentro de una caja
   flex deja de partir la linea y la direccion sale en un solo renglon. */
.contacto-lista a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--of-tinta);
  font-weight: 600;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}
.contacto-lista span { display: block; padding-block: .3rem; overflow-wrap: anywhere; }
.contacto-lista a:hover { color: var(--of-teal); }
.contacto-lista--pie { margin-top: 1.25rem; }

.pasos {
  list-style: none;
  counter-reset: paso;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } }
.pasos li {
  counter-increment: paso;
  margin: 0;
  padding-top: 1rem;
  border-top: 2px solid var(--of-teal);
}
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-family: var(--of-cifras);
  font-size: .8rem;
  color: var(--of-teal);
  margin-bottom: .45rem;
}
.pasos h3 { margin-bottom: .35rem; }
.pasos p { color: var(--of-tinta-2); font-size: .99rem; }

/* TRES PASOS, TRES COLUMNAS, desde el 9 de septiembre de 2026.

   Iban en UNA sola columna, y no por gusto: al lado tenian una columna de
   figuras, y en dos columnas una secuencia numerada se lee como una rejilla de
   ventajas —se salta, y el orden deja de significar algo—.

   Al tachar el dueño el boceto del «modo esquinas», la columna de figuras se
   quedo sin nada y esta se quedo con media pagina de aire al lado. En TRES
   columnas el problema de antes no existe: hay tantas columnas como pasos, asi
   que se leen izquierda a derecha en el orden en que estan escritos, que es
   como se lee cualquier «tres pasos». */
.pasos--tres { gap: 1.75rem; }
@media (min-width: 860px) { .pasos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

.rejilla--como { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }

/* Aqui estaban `.figuras`, `.figura` y la leyenda del codigo de color. Se
   fueron con las dos figuras que las usaban —el diagrama CERCA/LEJOS el 8 de
   septiembre de 2026 y el boceto del modo esquinas el 9—, porque CSS que no
   viste nadie es CSS que el siguiente da por vivo. */

/* ───────────────────────────────────────────── 9 · LA MUESTRA DE MOVIMIENTOS */

/* LOS RECORRIDOS DIBUJANDOSE. Tres lienzos con el mismo `viewBox` y la misma
   regla que las tarjetas de la muestra: en fila o apiladas, nunca dos y una.
   El trazo se dibuja con `stroke-dashoffset` sobre un `pathLength="1"`, que
   es lo que hace que un solo valor valga para el circulo, el ocho y la recta.
   El punto (`.trazo-punto`) nace escondido: lo enseña `landing.js` justo al
   arrancar su recorrido, para que no se vea un instante en (0,0) antes de que
   `animateMotion` lo coloque. Sin JavaScript el trazo se ve entero y el punto
   no aparece, que es un dibujo valido. */
.trazos {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  display: grid;
  gap: 1rem;
}
@media (min-width: 820px) { .trazos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trazos > * { min-width: 0; }
.trazo {
  margin: 0;
  background: var(--of-papel);
  border: 1px solid var(--of-linea);
  border-radius: var(--of-r);
  padding: 1.1rem 1.25rem 1.2rem;
}
.trazo-lienzo { display: block; width: 100%; height: auto; }
.trazo-camino {
  fill: none;
  stroke: var(--of-teal);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}
.trazo-punto {
  fill: var(--of-teal);
  visibility: hidden;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--of-teal) 70%, transparent));
}
/* Cerca es ambar y lejos es teal: el mismo codigo de color del producto. */
.trazo-cerca { fill: var(--of-ambar); }
.trazo-lejos { fill: none; stroke: var(--of-teal); stroke-width: 2.5; }
.trazo p { margin: .35rem 0 0; color: var(--of-tinta-2); font-size: .95rem; line-height: 1.5; }
.trazo b { color: var(--of-tinta); }

/* Son tres tarjetas, no un inventario: o van las tres en fila o van las tres
   apiladas. Un corte intermedio a dos columnas deja una huerfana debajo, que
   es justo el aspecto de «aqui faltan cosas» que hay que evitar. */
.movimientos { display: grid; gap: 1rem; }
@media (min-width: 820px) { .movimientos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.movimientos > * { min-width: 0; }

.mov {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--of-papel);
  border: 1px solid var(--of-linea);
  border-radius: var(--of-r);
  padding: 1.5rem;
}
.mov-sistema {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-family: var(--of-cifras);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--of-tinta-2);
}
.mov-icono { width: 1.2rem; height: 1.2rem; flex: none; color: var(--of-teal); }
.mov h3 { margin: 0; font-size: 1.22rem; }
.mov p { color: var(--of-tinta-2); font-size: .97rem; margin: 0; }
/* La dosis es el dato que la gente compara, asi que se lee como una pastilla y
   se ancla abajo: las tres tarjetas acaban igual aunque el texto mida distinto. */
.mov-dosis {
  align-self: flex-start;
  margin-top: auto;
  padding: .3rem .75rem;
  border: 1px solid var(--of-teal);
  border-radius: 999px;
  background: var(--of-teal-lavado);
  font-family: var(--of-cifras);
  font-size: .8rem;
  color: var(--of-teal);
  font-variant-numeric: tabular-nums;
  position: relative;
  overflow: clip;
  isolation: isolate;
}
/* La pastilla se RELLENA al asomar: una banda teal que crece de izquierda a
   derecha por detras del numero, como un temporizador que se completa. El
   numero no se mueve ni cambia. Sin JavaScript no hay banda —la pastilla es
   la de siempre—; con el, el relleno empieza vacio y se completa una vez. */
.anima-on .mov-dosis::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--of-teal) 22%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.anima-on .movimientos.visto .mov-dosis::before { transform: scaleX(1); transition-delay: .5s; }

/* ─────────────────────────────────── 10 · LA BANDA DE LOS ESPECIALISTAS */

.seccion--nucleo {
  background: var(--of-papel);
  border-block: 1px solid var(--of-linea);
}

/* ──────────────────────────────────── 12 · FOTOS Y LA FRANJA DE VIDA */

/* Toda foto de la pagina pasa por aqui, y dos de estas reglas no son estetica:
   · `display: block` — una imagen es inline por defecto y arrastra el hueco de
     la linea base, que descuadra el pie de foto por unos pixeles imposibles de
     explicar mirando el codigo.
   · `aspect-ratio` + `object-fit: cover` — el `width`/`height` del HTML reserva
     el hueco antes de que llegue el fichero, y esto garantiza que el hueco
     reservado sea EXACTAMENTE el que ocupa la foto cargada. Sin ello, el dia
     que se cambie una foto por otra de proporcion distinta la pagina pegaria un
     salto justo cuando alguien esta leyendo. */
.foto img,
.vidas img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* Mientras carga, el hueco es papel y no un agujero blanco en tema oscuro. */
  background: var(--of-papel-2);
  border: 1px solid var(--of-linea);
  border-radius: var(--of-r);
}

/* La foto bisagra de la seccion 01. Se corta a 52rem, que es el ancho de la
   lista de horas de arriba: es la alineacion, no una preferencia de tamaño. */
.foto {
  margin: 2.5rem 0 0;
  max-width: 52rem;
  min-width: 0;
}
.foto--ancha img { aspect-ratio: 16 / 9; }
.foto figcaption {
  margin-top: .85rem;
  max-width: 40rem;
  color: var(--of-tinta-2);
  font-size: .97rem;
  line-height: 1.6;
}

/* La franja de vida: una fila de cuatro en escritorio, dos en tableta, una en
   movil. Nunca tres, porque con cuatro fotos un corte en tres deja una huerfana
   debajo — el mismo motivo por el que la muestra de movimientos no se parte. */
.vidas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.vidas > * { min-width: 0; }
.vidas li { margin: 0; }
.vidas img { aspect-ratio: 3 / 4; }
.vidas p {
  margin: .8rem 0 0;
  color: var(--of-tinta-2);
  font-size: .95rem;
  line-height: 1.5;
  text-wrap: balance;
}
@media (min-width: 560px) { .vidas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .vidas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
/* EN EL HEROE, DOS COLUMNAS DESDE CERO. Por debajo de 560 px las cuatro fotos
   iban en una columna: unos 1.000 px de fotos antes de la seccion 01, en un
   celular de 375 (auditoria del 11 de septiembre de 2026). En 2x2 caben en
   media pantalla y el titular y el boton siguen a un gesto de distancia. Va
   DESPUES de las dos reglas de `.vidas` a proposito: misma especificidad,
   decide el orden. */
.vidas--heroe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
/* Entre 980 y 1120 el heroe sigue siendo una columna —texto y luego fotos— y
   ahi caben las cuatro en fila, que es mas corto que dos filas de 2x2. A
   partir de 1120 vuelve el 2x2, en la regla de mas abajo. */
@media (min-width: 980px) { .vidas--heroe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

/* Las mismas cuatro, en el heroe: APAISADAS en vez de verticales. Ahi compiten
   con el CTA por la primera pantalla, y un 3/4 a cuatro columnas se llevaba
   380 px de alto. Va DESPUES de `.vidas img` a proposito: las dos reglas tienen
   la misma especificidad y decide el orden. */
/* LAS CUATRO EN 2x2 CUANDO EL HEROE ES DE DOS COLUMNAS.

   Tiene que ir AQUI y no arriba, con el resto del heroe: `.vidas` declara
   `repeat(4, …)` a 980 px con la misma especificidad, asi que gana la que va
   despues en el fichero. Escrita arriba no hacia nada y las cuatro salian en
   una fila de 169 px de alto dentro de media pagina. Es exactamente lo que
   advierte el comentario de la seccion del heroe, y aun asi se cayo en ello: se
   vio midiendo la pagina, no leyendo el CSS. */
@media (min-width: 1120px) {
  .vidas--heroe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
}
.vidas--heroe img { aspect-ratio: 4 / 3; }
.vidas--heroe p { font-size: .9rem; margin-top: .65rem; }

/* ─────────────────────────────────────────────────────────── 13 · PRECIO */

.precio-caja {
  background: var(--of-papel);
  border: 1px solid var(--of-teal);
  border-radius: var(--of-r-grande);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  box-shadow: var(--sombra);
}
.precio-caja > * { min-width: 0; }
.precio-caja .chip {
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
  text-wrap: balance;
  margin-bottom: 1.1rem;
}
/* La pildora que abre el panel de compra es una FRASE («un unico plan, con
   todo incluido desde el primer dia»), y a 11,2 px en versalitas mono no se
   leia (auditoria del 11 de septiembre de 2026, L-C7). Cuerpo de texto,
   sin mayusculas, y sigue siendo una pildora teal para que se lea como el
   rotulo del panel. La prueba exige que su cuerpo no baje de .85rem. */
.precio-caja .chip--precio {
  font-family: var(--of-texto);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: .35rem .85rem;
}
@media (min-width: 900px) {
  .precio-caja {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 3rem);
    /* CENTRADAS, no colgando de arriba. Con `start` la columna del precio
       —273 px— dejaba 238 de aire debajo del boton frente a los 511 de la
       lista, y eso es lo que el dueño marco en rojo el 9 de septiembre de 2026.
       Centradas, el sobrante se reparte y deja de leerse como una columna que
       se quedo corta. */
    align-items: center;
  }
}

/* El panel de compra: TARJETA, no columna.

   Todo lo que hace falta para decidir —el plan, el importe, el periodo, los
   terminos y el boton— dentro de un mismo recuadro. Suelto sobre el fondo de la
   caja se leia como cuatro cosas caidas una debajo de otra; con su fondo y su
   borde se lee como una: esto es lo que compras y esto es lo que cuesta.

   `--of-papel-2` es el tono intermedio y funciona en los dos temas: sobre el
   blanco de la caja en claro, y sobre el fondo de tarjeta en oscuro. */
.precio-panel {
  background: var(--of-papel-2);
  border: 1px solid var(--of-linea);
  border-radius: var(--of-r);
  padding: clamp(1.35rem, 3vw, 2rem);
}

/* Las dos columnas arrancan a la misma altura: la etiqueta de la izquierda y
   el «Qué entra» de la derecha comparten cuerpo y linea base. */
.precio-columna > :last-child { margin-bottom: 0; }
.precio-columna h3 {
  margin: 0 0 1.1rem;
  font-family: var(--of-texto);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--of-tinta-2);
  line-height: 1.9;
}

.importe {
  font-family: var(--of-display);
  /* El minimo es bajo a proposito. Lo puso el importe en pesos colombianos,
     once caracteres anchos que a 360 px no caben de otra forma; desde el 8 de
     septiembre de 2026 hay una sola moneda y el importe es mas corto. El minimo
     y `anywhere` se quedan igualmente: son el cinturon por si un dia vuelve a
     entrar uno largo, y no cuestan nada mientras no haga falta.
     La cifra no se escribe aqui: este CSS se incrusta en la pagina publicada y
     un importe en un comentario es un importe publicado. */
  font-size: clamp(2rem, 8vw, 3.8rem);
  overflow-wrap: anywhere;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  display: block;
  margin-bottom: .45rem;
  font-variant-numeric: tabular-nums;
}
/* Aqui vivia `.marcador`, el recuadro ambar de «esto falta por decidir». Lo
   llevaba el plazo de devolucion, que desde el 8 de septiembre de 2026 se
   rellena solo desde `valores-legales.ts`: el recuadro seguia saliendo en la
   pagina empaquetada alrededor de un dato ya resuelto, como si faltara. Se fue
   con la letra pequeña; la garantia de abajo lo sustituye. */
.periodo {
  font-family: var(--of-cifras);
  font-size: .86rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--of-tinta-2);
  margin-bottom: .9rem;
}
.precio-caja .heroe-acciones { margin: 1.5rem 0 0; }

.incluye { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.incluye li { margin: 0; padding-left: 1.85rem; position: relative; color: var(--of-tinta-2); font-size: .99rem; }
.incluye li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .48em;
  width: .55rem; height: .95rem;
  border-right: 2px solid var(--of-teal);
  border-bottom: 2px solid var(--of-teal);
  transform: rotate(42deg);
}
.incluye b { color: var(--of-tinta); }

/* Lo que queda de «Antes de venderte nada»: una linea, en positivo, donde se
   mira el importe (D-LAND-1, opcion B, 11 de septiembre de 2026). */
.precio-confianza {
  font-size: .95rem;
  color: var(--of-tinta-2);
  line-height: 1.55;
  max-width: 30rem;
  margin: .2rem 0 0;
}
/* LA GARANTIA, JUNTO AL BOTON y no en letra pequeña: catorce dias y el 100 %
   es de lo mas fuerte que la pagina puede decir, y estaba a .9rem debajo de
   todo, dentro de un recuadro que la marcaba como pendiente. */
.garantia {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--of-linea);
  font-size: .95rem;
  color: var(--of-tinta-2);
  line-height: 1.5;
}
.garantia b { color: var(--of-tinta); }

/* Los TERMINOS del cobro. Los genera `scripts/landing-venta.ts` desde `PRECIO`,
   y hoy no salen: mientras la plataforma no cobre nada, la pagina no promete
   ningun cobro. El dia que haya pasarela aparecen solos.

   Antes aqui estaba `.precio-cerrada`, el aviso de «la venta todavia no esta
   abierta». Se fue con el aviso, por decision del dueño del 9 de septiembre de
   2026. */
.precio-terminos {
  margin: .2rem 0 0;
  font-size: .88rem;
  color: var(--of-tinta-2);
  max-width: 30rem;
  line-height: 1.5;
}

/* El encabezado conserva el CTA visible en tablet, pero reserva la navegación
   completa para un ancho donde las etiquetas y los objetivos táctiles caben. */
@media (max-width: 479px) {
  /* El rótulo sigue dando nombre al enlace para lectores de pantalla. */
  .barra .marca span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  /* Y por eso crece: sin el texto, el isotipo ES la marca entera, y ademas es
     lo unico que queda del enlace que lleva al inicio. 2,75rem para que su zona
     de pulsacion sea la misma que la del resto de la barra, que es el minimo
     que esta pagina no negocia en ningun sitio. */
  .barra .marca .isotipo { width: 2.75rem; height: 2.75rem; }
  /* LA BARRA TIENE QUE CABER EN 360 px. Medido a 375 px el 12 de septiembre de
     2026 con el panel a la vista: idioma 43 + tema 44 + «Ya tengo cuenta» 118
     + «Crear mi rutina» 123, mas tres huecos de 10 y los 20 de margen a cada
     lado, sumaban 390, y el boton principal salia cortado por la derecha. La
     pagina no daba scroll horizontal —el desbordamiento quedaba dentro de la
     barra— asi que ninguna prueba de jsdom lo veia: solo se ve midiendo con
     `getBoundingClientRect` o abriendo un movil. Aqui la barra se ciñe: el
     envoltorio pierde margen (12 px por lado), los huecos bajan a 6 y los dos
     textos se estrechan sin perder la altura tactil de 2,75 rem. */
  .barra .envoltorio { width: min(100% - 1.5rem, var(--ancho)); }
  .barra-interior { gap: .4rem; }
  .barra .boton { padding-inline: .55rem; font-size: .8rem; }
  .barra-acceso { font-size: .82rem; padding-inline: .1rem; }
  /* En un móvil estrecho compiten cuatro cosas por la barra. Cae el globo, que
     es decoración —el grupo de enlaces tiene su propia etiqueta accesible— y
     las tres siglas se estrechan. La altura táctil de 2,75 rem no se toca: es
     lo único que no puede encoger. */
  /* En el movil el globo sobra: el codigo del idioma ya dice lo que es, y cada
     pixel de la barra esta peleado. La flecha se queda, que es lo que dice que
     esto se abre. */
  .icono-idioma { display: none; }
  .selector-idioma > summary { padding: 0 .25rem; font-size: .8rem; }
  /* Y EL PANEL SE ANCLA A LA IZQUIERDA. Medido a 391 px el 9 de septiembre de
     2026, el dia que se pliego el selector: con `right: 0` el panel colgaba
     hacia la izquierda desde un control que en movil esta a 74 px del borde, y
     se salia 102 px fuera de la pantalla. No daba scroll horizontal —el
     desbordamiento era por la izquierda— asi que no se veia de ninguna otra
     forma que abriendolo en un movil.

     Aqui la barra es marca | idioma | tema | acceso | boton, asi que el selector
     nunca esta pegado al borde derecho y `left: 0` cabe siempre. El tope de
     ancho es el cinturon por si algun dia se mueve. */
  .idiomas-panel {
    left: 0;
    right: auto;
    max-width: calc(100vw - 1.5rem);
  }
  .heroe-acciones { flex-direction: column; align-items: stretch; }
  .heroe-acciones .boton { width: 100%; }
}

/* En móvil los cinco controles no caben en una fila, especialmente en PT.
   El CTA ocupa la segunda fila sin reducir objetivos táctiles ni ocultar el
   acceso de quienes ya tienen cuenta. El salto a secciones reserva esa altura. */
@media (max-width: 767px) {
  html { scroll-padding-top: 8rem; }
  .barra-interior {
    display: grid;
    grid-template-columns: minmax(2.75rem, 1fr) repeat(2, 2.75rem) max-content;
    height: auto;
    padding-block: .5rem;
    gap: .375rem;
  }
  .barra .marca { margin: 0; }
  .barra .selector-idioma { position: static; }
  .barra .selector-idioma > summary { width: 100%; justify-content: center; }
  .barra .idiomas-panel {
    top: 3.5rem;
    left: .75rem;
    right: .75rem;
    min-width: 0;
    max-width: none;
  }
  .barra-acceso { margin-left: 0; justify-content: flex-end; white-space: normal; }
  .barra .boton {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 2.75rem;
    font-size: .93rem;
  }
}

/* ─────────────────────────────────────────────────────────────── 15 · PIE */

.pie {
  background: var(--of-papel-2);
  border-top: 1px solid var(--of-linea);
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 2.5rem;
  font-size: .95rem;
}
.pie-rejilla { display: grid; gap: 2.25rem; }
.pie-rejilla > * { min-width: 0; }
@media (min-width: 860px) { .pie-rejilla { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3.5rem; } }

.pie-lema { color: var(--of-tinta-2); max-width: 30rem; }
/* El correo y la direccion pueden ser una sola palabra larga: sin esto, a
   390 px empujan la pagina entera. Es el mismo cinturon del importe. */
.pie-nota { color: var(--of-tinta-2); font-size: .9rem; max-width: 34rem; overflow-wrap: anywhere; }
.pie-legal a, .pie-legal span { overflow-wrap: anywhere; }

/* LOS TRES LEGALES Y EL CORREO SE PODIAN LEER Y NO SE PODIAN PULSAR.

   Medido a 391 px el 9 de septiembre de 2026: 23 px de alto, la mitad de los 44
   que necesita un dedo. Y son justo los cuatro enlaces que mas falta hace poder
   abrir desde un movil — el alta OBLIGA a aceptar los tres documentos.

   Es el mismo fallo que ya se pago una vez en las casillas del filtro: la zona
   de pulsacion existia en la hoja de estilo y en ningun sitio mas. Aqui ni
   siquiera existia en la hoja.

   `inline-flex` con `min-height` y no `padding`: con padding, la caja crece pero
   las lineas del pie se separan de mas cuando el texto envuelve. */
.pie-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.pie-contacto h2 {
  font-size: 1.15rem;
  font-family: var(--of-texto);
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: .5rem;
}
.pie-contacto .heroe-acciones { margin: 1.5rem 0 0; }

/* EL CIERRE: la banda que vuelve al titular del heroe con el ultimo boton
   principal (D-LAND-6, opcion A). Centrada y sobre papel para que se lea como
   un final y no como una seccion mas. */
.seccion--cierre { background: var(--of-papel-2); }
.cierre-caja { text-align: center; max-width: 44rem; }
.cierre-caja h2 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.025em; }
.cierre-caja p { color: var(--of-tinta-2); font-size: 1.12rem; max-width: 36rem; margin-inline: auto; }
.cierre-caja .heroe-acciones { justify-content: center; margin-top: 1.75rem; }

.pie-legal {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--of-linea);
  color: var(--of-tinta-2);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  font-size: .88rem;
}

/* ────────────────────────────────────────── 16 · WHATSAPP FLOTANTE */

/* Una salida al chat desde cualquier punto de la pagina.
   Tres cosas que no son de gusto:
     · `bottom` y `right` con `env(safe-area-inset-*)`, porque en un movil con
       barra gestual el boton se comeria justo lo que hay debajo;
     · en pantalla estrecha se queda en circulo, sin etiqueta: un boton ancho
       fijo tapa contenido, y esta pagina se lee de arriba abajo;
     · z-index por encima de la barra pegajosa (50) y por debajo del enlace de
       saltar al contenido (100), que tiene que poder ganar siempre. */
.wasap {
  position: fixed;
  z-index: 60;
  right: 1rem;
  right: max(1rem, env(safe-area-inset-right));
  bottom: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.25rem;
  min-width: 3.25rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--of-wasap);
  color: var(--of-wasap-tinta);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45);
  transition: transform .12s ease, box-shadow .15s ease;
}
.wasap svg, .wasap-cabecera svg { width: 1.5rem; height: 1.5rem; flex: none; }
.wasap:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .55); }
.wasap:active { transform: translateY(0); }

.wasap-cabecera { display: none; }
@media (max-width: 767px) {
  .wasap { display: none; }
  .barra .boton {
    grid-row: 2;
    width: calc(100% - 3.125rem);
  }
  /* La segunda fila —el botón y WhatsApp— solo mientras el héroe está a la
     vista. En cuanto la barra flota sobre el resto de la página, esa fila se
     recoge: fija, la cabecera medía 220 px en un móvil de 812, un 27 % de
     la pantalla en cada scroll (14 de septiembre de 2026). El botón vuelve
     en cada sección, y el WhatsApp vuelve como burbuja abajo a la derecha,
     que es donde vive en escritorio. */
  .barra--flotante .boton,
  .barra--flotante .wasap-cabecera { display: none; }
  body:has(.barra--flotante) .wasap { display: inline-flex; }
  .wasap-cabecera {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--of-wasap);
    color: var(--of-wasap-tinta);
    text-decoration: none;
  }
}
/* ═══════════════════════════════════════════════════ 17 · MOVIMIENTO ══════
   Pedido DOS VECES por el dueño, la segunda en mayusculas: «TODA LA LANDING
   SIGUE SIN NADA DE MOVIMIENTO, TOTALMENTE ESTATICA».

   Estaba medido y era cierto: cinco `transition` en 1.500 lineas de CSS y cero
   `@keyframes`. Lo unico que se movia era la demostracion del heroe.

   Tres condiciones, y ninguna se negocia:

     1. `prefers-reduced-motion: reduce` quita lo que se DESPLAZA y lo que da
        vueltas, y conserva los fundidos. Hasta el 11 de septiembre de 2026
        aqui ponia «lo apaga TODO», y el bloque «MOVIMIENTO REDUCIDO» anulaba
        cualquier animacion y transicion de la pagina. Ese dia se supo que el
        dueño revisa la landing en un Windows con las animaciones apagadas
        —`MinAnimate = 0`, que el navegador traduce a esa preferencia— y que
        lo que llevaba dias viendo era la version sin nada de movimiento. La
        preferencia significa «no me marees», no «no me enseñes nada»: los
        fundidos de opacidad (0,3 s), la demostracion —que es el contenido— y
        las respuestas al puntero se quedan; los desplazamientos, los bucles,
        el parallax y los recorridos que corren solos, no. Ver
        `landing/LEEME.md`, §5.
     2. NADA se mueve mientras se lee. Las entradas ocurren al ASOMAR el
        elemento por el borde de abajo y terminan en 0,7 s; cuando el texto
        esta a la altura de los ojos ya lleva rato quieto. No hay nada que se
        mueva en bucle donde haya que leer: lo unico perpetuo es la aurora del
        heroe, que es una luz de fondo sin una palabra encima, las fotos del
        heroe (la imagen, no su pie) y el halo del boton principal.
     3. Sin librerias. Un `IntersectionObserver`, transiciones de CSS, y para
        lo que el CSS no puede medir —abrir una pregunta, el parallax— la
        API de animaciones del navegador desde `landing.js`.

   Y la regla que hace que esto sea seguro: el estado de partida —invisible y
   desplazado— vive DETRAS de `.anima-on`, que solo pone el script. Sin
   JavaScript no hay clase, no hay estado de partida y la pagina se ve entera.
   Escribirlo al reves —ocultar por defecto y mostrar con JS— es como una
   pagina de venta se queda en blanco para quien lleva el script bloqueado. */

/* La luz del heroe respira. Catorce segundos de ida y catorce de vuelta: es
   mas lento que la respiracion de quien mira, que es justo lo que hace que se
   perciba como ambiente y no como algo que pasa. */
@keyframes of-respirar {
  from { opacity: .72; transform: scale(1); }
  to   { opacity: .96; transform: scale(1.05); }
}
.aurora { animation: of-respirar 14s ease-in-out infinite alternate; }

/* LAS FOTOS DEL HEROE, FLOTANDO. Seis pixeles y catorce segundos: se nota que
   la pagina esta viva y no se nota que algo se mueve. Desfasadas entre si, o
   las cuatro suben y bajan como un bloque y eso si se ve. */
@keyframes of-flotar {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
/* SOLO LA IMAGEN, NUNCA EL `li`. Cada foto del heroe lleva su pie de texto
   debajo, y animando el `li` se movia tambien el pie. La valla del movimiento
   lo cazo, y tenia razon: mover texto mientras alguien lo lee, con los ojos
   cansados, es exactamente lo contrario de lo que vende esta pagina. */
.vidas--heroe img { animation: of-flotar 9s ease-in-out infinite alternate; }
.vidas--heroe li:nth-child(2) img { animation-duration: 11s; animation-delay: -2s; }
.vidas--heroe li:nth-child(3) img { animation-duration: 10s; animation-delay: -4s; }
.vidas--heroe li:nth-child(4) img { animation-duration: 12s; animation-delay: -1s; }

/* EL BOTON PRINCIPAL, RESPIRANDO. Un halo lento, sin cambiar de tamaño: un
   boton que crece y encoge se lee como un aviso, no como una invitacion. */
@keyframes of-halo {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--of-teal) 34%, transparent); }
  to   { box-shadow: 0 0 0 14px color-mix(in srgb, var(--of-teal) 0%, transparent); }
}
.boton--principal.boton--grande { animation: of-halo 3.4s ease-out infinite; }

/* ── Las entradas al asomar ───────────────────────────────────────────────── */

.anima-on [data-anima] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.anima-on [data-anima].visto { opacity: 1; transform: none; }

/* Escalonado: las piezas de una rejilla no entran a la vez, entran en cadena.
   El retraso se lista hasta nueve porque nueve es la rejilla mas larga que hay
   —«Que te llevas»— y CSS no sabe multiplicar por el indice de `nth-child`.
   Si algun dia hubiera una decima, entraria sin retraso: tarde, no rota. */
.anima-on [data-anima-hijos] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.anima-on [data-anima-hijos].visto > * { opacity: 1; transform: none; }
.anima-on [data-anima-hijos].visto > :nth-child(1) { transition-delay: 0ms; }
.anima-on [data-anima-hijos].visto > :nth-child(2) { transition-delay: 70ms; }
.anima-on [data-anima-hijos].visto > :nth-child(3) { transition-delay: 140ms; }
.anima-on [data-anima-hijos].visto > :nth-child(4) { transition-delay: 210ms; }
.anima-on [data-anima-hijos].visto > :nth-child(5) { transition-delay: 280ms; }
.anima-on [data-anima-hijos].visto > :nth-child(6) { transition-delay: 350ms; }
.anima-on [data-anima-hijos].visto > :nth-child(7) { transition-delay: 420ms; }
.anima-on [data-anima-hijos].visto > :nth-child(8) { transition-delay: 490ms; }
.anima-on [data-anima-hijos].visto > :nth-child(9) { transition-delay: 560ms; }

/* EL HEROE ENTRA AL CARGAR, en cascada de 80 ms: antetitulo, titular,
   entradilla, remate, botones y nota. No espera a asomar —ya esta a la
   vista— asi que `landing.js` lo marca `.visto` en el primer fotograma. Las
   fotos entran desfasadas y con el zoom lento de abajo. Es la misma mecanica
   que el resto de entradas; solo cambia el ritmo, que aqui es mas vivo porque
   es lo primero que se ve. */
.anima-on [data-anima-carga].visto > :nth-child(1) { transition-delay: 0ms; }
.anima-on [data-anima-carga].visto > :nth-child(2) { transition-delay: 80ms; }
.anima-on [data-anima-carga].visto > :nth-child(3) { transition-delay: 160ms; }
.anima-on [data-anima-carga].visto > :nth-child(4) { transition-delay: 240ms; }
.anima-on [data-anima-carga].visto > :nth-child(5) { transition-delay: 320ms; }
.anima-on [data-anima-carga].visto > :nth-child(6) { transition-delay: 400ms; }

/* El zoom lento de las fotos. Entran un 5 % mas grandes y se asientan en un
   segundo y medio: el encuadre se abre despacio en vez de aparecer clavado.
   Va sobre el `img` con la propiedad `scale` —y NO con `transform`— porque
   las fotos del heroe ya llevan `transform` en `of-flotar`, y una animacion
   pisa cualquier `transform` declarado: el zoom de entrada del heroe no se
   veia nunca, y se supo midiendo, no leyendo (auditoria del 11 de septiembre
   de 2026). `scale` y `transform` son propiedades distintas y se suman. */
.anima-on [data-anima-hijos] img,
.anima-on [data-anima] img {
  scale: 1.05;
  transition: scale 1.5s cubic-bezier(.22, .61, .36, 1);
}
.anima-on [data-anima-hijos].visto img,
.anima-on [data-anima].visto img { scale: 1; }

/* LA MARCA DE SECCION CRECE de 0 a sus 4rem cuando la seccion asoma. Es la
   misma marca de siempre —`.seccion + .seccion::before`— y la clase `.visto`
   la pone `landing.js` sobre la seccion. Sin JavaScript esta entera. */
.anima-on .seccion + .seccion::before {
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.anima-on .seccion + .seccion.visto::before { transform: scaleX(1); }

/* EL PANEL DE PRECIO: el importe se asienta desde un 96 % y los nueve checks
   de «Que entra» se dibujan en cascada. El importe no cuenta —es el dato que
   la gente compara, y una cifra que cambia delante de los ojos se lee como
   un precio que cambia—: solo se asienta. */
.anima-on .precio-caja .importe {
  transform: scale(.96);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.anima-on .precio-caja.visto .importe { transform: none; }
.anima-on .precio-caja .incluye li::before {
  transform: rotate(42deg) scale(0);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.anima-on .precio-caja.visto .incluye li::before { transform: rotate(42deg) scale(1); }
.anima-on .precio-caja.visto .incluye li:nth-child(1)::before { transition-delay: .35s; }
.anima-on .precio-caja.visto .incluye li:nth-child(2)::before { transition-delay: .45s; }
.anima-on .precio-caja.visto .incluye li:nth-child(3)::before { transition-delay: .55s; }
.anima-on .precio-caja.visto .incluye li:nth-child(4)::before { transition-delay: .65s; }
.anima-on .precio-caja.visto .incluye li:nth-child(5)::before { transition-delay: .75s; }
.anima-on .precio-caja.visto .incluye li:nth-child(6)::before { transition-delay: .85s; }
.anima-on .precio-caja.visto .incluye li:nth-child(7)::before { transition-delay: .95s; }
.anima-on .precio-caja.visto .incluye li:nth-child(8)::before { transition-delay: 1.05s; }
.anima-on .precio-caja.visto .incluye li:nth-child(9)::before { transition-delay: 1.15s; }

/* LOS TRAZOS SE DIBUJAN. `pathLength="1"` en cada camino hace que un
   `stroke-dasharray: 1` sea «el trazo entero» sea cual sea su longitud real,
   y el desplazamiento del guion va de 1 (nada dibujado) a 0 (todo). Los tres
   entran en cadena, y el punto que los recorre lo arranca `landing.js` al
   mismo tiempo. */
.anima-on .trazos .trazo-camino {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(.22, .61, .36, 1);
}
.anima-on .trazos.visto .trazo-camino { stroke-dashoffset: 0; }
.anima-on .trazos.visto .trazo:nth-child(2) .trazo-camino { transition-delay: .25s; }
.anima-on .trazos.visto .trazo:nth-child(3) .trazo-camino { transition-delay: .5s; }

/* EL DESTELLO DEL PUNTO al cambiar de sentido: el halo exterior se expande y
   se apaga una vez. Va sobre el circulo interior del grupo y no sobre `#punto`,
   que lleva su posicion en un `transform` de atributo que una animacion CSS
   pisaria. `transform-box: fill-box` para que escale desde su propio centro. */
@keyframes of-destello {
  from { opacity: .9; transform: scale(.7); }
  to   { opacity: .08; transform: scale(2.4); }
}
.punto-guia.destello > circle:first-child {
  transform-box: fill-box;
  transform-origin: center;
  animation: of-destello .6s ease-out 1;
}

/* ────────────────────────────────────────────── 17 bis · MOVIMIENTO REDUCIDO
   Politica del 11 de septiembre de 2026 (D-LAND-11, opcion A): con
   `prefers-reduced-motion: reduce` se quitan los desplazamientos, los bucles,
   el parallax y los recorridos que corren solos; SE CONSERVAN los fundidos,
   solo de opacidad y en 0,3 s, y la demostracion arranca en marcha con su
   boton de pausa a la vista (eso lo decide `landing.js`).

   Antes aqui habia un `* { animation-duration: .01ms !important }` que
   apagaba la pagina entera, y `landing.js` ni siquiera ponia `.anima-on`. Era
   lo que veia el dueño en su maquina, y por eso la landing le parecia
   «totalmente estatica» con todo el movimiento ya hecho. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Los tres bucles, fuera. */
  .aurora, .vidas--heroe img, .boton--principal.boton--grande { animation: none; }
  /* Las entradas se quedan en un fundido: sin desplazamiento, sin zoom, sin
     escalonado que alargue la espera. */
  .anima-on [data-anima],
  .anima-on [data-anima-hijos] > * { transform: none; transition: opacity .3s ease; }
  /* `:nth-child(n)` y no `*`: los retrasos del escalonado se declaran con
     `:nth-child(k)` (0,4,0) y un `> *` aqui (0,3,0) perderia contra ellos sin
     dar ningun error: la cascada de 560 ms seguiria puesta bajo la preferencia
     que pide justo que no haya espera. Con la pseudoclase empatan y decide el
     orden, que es este. */
  .anima-on [data-anima-hijos].visto > :nth-child(n) { transition-delay: 0ms; }
  .anima-on [data-anima-hijos] img,
  .anima-on [data-anima] img { scale: 1; transition: none; }
  /* Lo que crece, dibuja o se desplaza, ya en su estado final. */
  .anima-on .seccion + .seccion::before { transform: none; transition: none; }
  .anima-on .precio-caja .importe { transform: none; transition: none; }
  .anima-on .precio-caja .incluye li::before { transform: rotate(42deg) scale(1); transition: none; }
  .anima-on .trazos .trazo-camino { stroke-dashoffset: 0; transition: none; }
  .anima-on .mov-dosis::before { transform: scaleX(1); transition: none; }
  .anima-on .especialistas:not(.visto) .parpadeos i:nth-child(n+7) { opacity: .18; }
  .anima-on .dia::before { animation: none; transform: none; }
  .anima-on .dia .hora { animation: none; color: var(--of-teal); }
  .punto-guia.destello > circle:first-child { animation: none; }
  .anima-on .halo::after { content: none; }
  .boton:hover { transform: none; }
  .wasap:hover { transform: none; }
  .tarjeta:hover, .dice:hover, .publicos li:hover,
  .mov:hover, .trazo:hover, .pregunta:hover { transform: none; }
  .boton--secundario:hover::after { translate: 0; }
  .pregunta > summary::after { transition: none; }
}

/* ───────────────────────────────────────────────────── 18 · IMPRESION */

@media print {
  .barra, .escena-pie, .boton, .wasap { display: none; }
  body { background: #fff; color: #000; }
}

/* ═══════════════════════════════════════════════════════ LAS PREGUNTAS ════
   Aqui vivian `.paradas` —las tres tarjetas del filtro con su franja roja—
   y `.parada-nota`. Se fueron el 11 de septiembre de 2026 con la seccion
   «Antes de venderte nada» (D-LAND-1, opcion B): CSS que no viste nadie es
   CSS que el siguiente da por vivo. Las preguntas tienen ahora seccion
   propia, despues del precio.
──────────────────────────────────────────────────────────────────────────── */

.preguntas { display: flex; flex-direction: column; gap: .6rem; max-width: 52rem; }

.pregunta {
  background: var(--of-papel);
  border: 1px solid var(--of-linea);
  border-radius: var(--of-r);
}

.pregunta > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* 44 px: se pulsa con el pulgar. Declarado y no dejado al relleno, por lo
     mismo que en la aplicación — apretar el diseño encoge la zona sin que se
     vea en ninguna captura. */
  min-height: 44px;
  padding: .95rem 1.3rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--of-r);
  font-weight: 600;
  font-size: 1.01rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta > summary:hover { color: var(--of-teal); }
.pregunta > summary:focus-visible { outline: 2px solid var(--of-teal); outline-offset: -2px; }

/* La flecha se dibuja aquí y NO en el HTML, y no es una preferencia de estilo.
   El extractor de textos se lleva el innerHTML entero de cada `<summary>`: con
   un `<svg>` dentro, el icono viajaría repetido diez veces por las tablas de
   traducción, y retocarlo dejaría las diez huérfanas de golpe. Dos bordes
   girados 45° son el mismo chevron sin nada que traducir. */
.pregunta > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2.2px solid var(--of-teal);
  border-bottom: 2.2px solid var(--of-teal);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .18s ease;
}
.pregunta[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

/* La respuesta va dentro de `.pregunta-cuerpo` y no suelta bajo el `<details>`:
   es la caja cuya altura anima `landing.js` al abrir y cerrar. Un `<details>`
   solo, sin envoltorio, salta de golpe —el contenido pasa de no existir a
   existir— y no hay nada que medir para animar. `overflow: clip` para que el
   texto no se vea mientras la caja crece. */
.pregunta-cuerpo { overflow: clip; }
.pregunta-cuerpo p {
  max-width: 68ch;
  margin: 0;
  padding: 0 1.3rem 1.25rem;
  color: var(--of-tinta-2);
  font-size: .99rem;
  line-height: 1.7;
  text-wrap: pretty;
}
.pregunta-cuerpo p + p { padding-top: 0; margin-top: -.35rem; }

/* Acceso al precio desde el inicio, también sin navegación de escritorio. */
.heroe-precio { display: inline-flex; align-items: center; min-height: 44px; margin-top: .25rem; text-decoration: underline; text-underline-offset: .2em; }