/* backend/marketing/static/marketing/css/correccion-de-tests.css */
/* ---------------------------------------------------------------------------
   Corrección de Tests — hoja propia de una sola página, como las de
   Documentación PIE, Planificaciones y Pruebas: solo sirve para esta URL y
   repinta componentes compartidos con el café del producto.

   Lo que trae:
     .story / .stg-*   la historia del porqué, con cuatro escenas dibujadas
     .vg / .shot       las cinco animaciones de ingreso, cada una terminada en
                       la captura del informe en Word que sale de ese test
     .picker / .page   el menú de los once informes

   Sin JavaScript la página queda completa (ver marketing/base.html): el informe
   de cada animación se muestra debajo del ingreso, y la superposición animada
   —la tarjeta que se cambia sola por la captura— va detrás de `.js`, que pone
   _anim.html solo si hay IntersectionObserver y nadie pidió menos movimiento.

   Cambios contra la propuesta (corregir_test_propuesta 4.html):
   · En el teléfono no se quita el velo de la portada: blanco sobre #b76629 da
     4,24:1 y la bajada no alcanza AA.
   · El bloque de "menos movimiento" de las capturas se reemplazó por el de
     `.js`, que cubre ese caso y además el de sin JavaScript.
   · Fuera el icono dibujado de Documentación PIE: el índice del sistema sale de
     _sistema.html, que usa los iconos del registro, y ese sí existe.
   · Se podaron las reglas que la página no usa (el kit de documento de
     Documentación PIE y un bloque de "lo que te llevas" que no está).
--------------------------------------------------------------------------- */

/* ===== NUEVO · Corrección de Tests ===== */
/* El banner: en escritorio la ilustración va a la izquierda y el texto a la derecha,
   sobre el campo café liso. El campo ocupa el 78% superior de la imagen, así que el
   bloque de texto tiene que caber ahí: de ahí el padding de abajo en vw, que es la
   única unidad que sigue a la altura de una banda con aspect-ratio. */
@media (min-width:768px){
  /* `min-height` y no `aspect-ratio`: con la proporción fija, la banda tiene una
     altura definida y el texto que no cabe se recorta contra el `overflow:hidden`.
     Con el mínimo, la banda mide lo mismo cuando el texto cabe —que es casi
     siempre— y crece cuando no. 35.92vw es 7681/2759 escrito como altura.
     Si crece, `cover` se come la franja blanca de abajo: se pierde el avión, no
     se pierde una línea de texto. */
  .hero{aspect-ratio:auto;min-height:35.92vw}
  .hero__media img{object-position:left top}
  .hero__body{padding-bottom:clamp(2rem,7.9vw,9rem)}
}
/* Entre 768 y 1150 el campo café es bajo y el titular de esta página es de dos
   líneas: con el cuerpo de tipo normal, la nota de abajo se sale del color y cae
   sobre el blanco, donde no se lee. Acá el bloque se aprieta para caber dentro
   del campo. */
@media (min-width:768px) and (max-width:1150px){
  .hero__text{width:min(60%,34rem)}
  .hero h1{font-size:clamp(1.3rem,2.45vw,1.95rem);margin-bottom:.3em}
  .hero__lede{font-size:clamp(.84rem,1.18vw,1rem);line-height:1.45;margin-bottom:.75rem}
  .hero .btn{font-size:.95rem;padding:.62em 1.5em}
  .hero__note{font-size:.78rem;margin-top:.55rem}
}
/* Y por debajo de 900 se aprieta un punto más. No es estética: el velo termina
   en 28,1vw —donde empieza la franja blanca de la imagen— y la nota tiene que
   quedar por encima de esa línea o se lee a 3,4:1 sobre el café pelado. */
@media (min-width:768px) and (max-width:900px){
  .hero__lede{margin-bottom:.55rem}
  .hero .btn{font-size:.9rem;padding:.55em 1.4em}
  .hero__note{font-size:.74rem;margin-top:.4rem}
}
/* En vertical el campo café queda arriba y el escritorio abajo. La imagen va pegada
   al pie y el texto se apila sobre su mitad de color; el escritorio empieza al 80,5%
   del ancho contado desde abajo, así que el bloque de texto tiene que terminar antes
   de eso. El 84% deja ese margen y un poco de aire.
   OJO: la versión vertical va recortada por arriba. El original trae una franja
   blanca de 74 px sobre el campo café y, con la imagen pegada al pie, esa franja
   cae justo encima del titular y lo parte en dos. */
@media (max-width:767px){
  .hero{aspect-ratio:auto;background:#b76629}
  .hero__media{inset:auto 0 0 0;height:auto}
  .hero__media img{height:auto;object-fit:contain;object-position:center bottom}
  .hero__body{padding-bottom:84%}
}
/* Por debajo de 384 px el site.css desapila el banner: el texto primero y la
   ilustración después, recortada a su parte útil. Hay que devolverle el padding
   normal al bloque de texto —si no, se queda con el 84% y abre un campo café
   vacío del alto de la pantalla— y darle al recorte la proporción de la mitad
   inferior de ESTA imagen, que no es la misma que la de Documentación PIE. */
@media (max-width:383px){
  .hero__body{padding-bottom:1.5rem}
  .hero__media{aspect-ratio:1000/802}
  /* Y hay que devolverle el `cover`: el `contain` con altura automática de arriba
     deja la imagen entera dentro de un recorte que solo mide la mitad, y lo que se
     ve es el campo café vacío en vez del escritorio. */
  .hero__media img{height:100%;object-fit:cover;object-position:center bottom}
}
/* El velo del hero solo tiene que oscurecer el campo de color. La imagen termina
   en una franja blanca —por donde sale el avión de papel— y el degradado la
   ensuciaba de gris. La máscara lo corta en el 72% y lo apaga antes del 80%, que
   es donde empieza el blanco. Sin soporte de `mask` el velo se comporta como
   antes: se ve más gris, pero nada deja de leerse. */
@supports (mask-image: linear-gradient(#000, #000)) {
  .hero--light .hero__body::before{
    -webkit-mask-image: linear-gradient(to bottom, #000 0 28.1vw, transparent 29.6vw);
    mask-image: linear-gradient(to bottom, #000 0 28.1vw, transparent 29.6vw);
  }
}
@media (max-width:767px){
  .hero--light .hero__body::before{-webkit-mask-image:none;mask-image:none}
}

/* La pastilla de sección va en el ink y no en el café base. OJO: la propuesta
   se dibujó sobre una copia vieja de site.css donde `.eyebrow` ya era pastilla
   (inline-block, padding, radio). En el site.css de hoy es un bloque sin
   relleno, y con solo el fondo salía una barra café de lado a lado; por eso la
   forma de pastilla va acá completa. El café con el ink de
   marca encima da 2,54:1 —no se lee— y con blanco encima, 4,24:1, que tampoco
   alcanza para un texto de 0,78rem. Blanco sobre #a1541a da 5,53:1. */
.eyebrow{display:inline-block;margin-bottom:.9rem;padding:.35em 1em;border-radius:var(--radius-pill);background:var(--accent-ink);color:#fff}

/* Dos herencias del site.css que con el café no llegan a 4,5:1 y con el azul de
   Documentación PIE tampoco —vienen de antes y se arreglan acá—:
   · el botón de la cabecera toma su color de `.site-nav a` (0,2,0) y no de
     `.btn--solid` (0,1,0), así que sale en --light: 4,24:1 sobre el ink café.
   · el párrafo del cierre va en --light sobre el ink: 4,24:1. */
.site-nav .btn--solid{color:#fff}
.cta p{color:rgba(255,255,255,.93)}

.section__head p{max-width:46rem}
.slam--cafe{background:var(--brown);color:#fff}

/* --- el porqué: la historia con el scroll ---------------------------------- */
/* Mismo esqueleto que Documentación PIE —marco fijo a la izquierda, pasos a la
   derecha, un solo data-beat mandando— pero el marco no lleva fotos: lleva cuatro
   escenas dibujadas, porque lo que hay que mostrar son números en una tabla y eso
   no existe como fotografía. */
.historia{overflow:visible}
.historia__head{margin-bottom:1rem}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:start}
.story__stage{position:sticky;top:5.4rem;height:calc(100vh - 6.4rem);max-height:760px;display:flex;align-items:center}
.story__frame{position:relative;width:100%;aspect-ratio:4/5;max-height:100%;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--sombra-alta);background:#43301f;isolation:isolate}
.stg{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:flex;flex-direction:column;justify-content:center;padding:clamp(1rem,3vw,2rem)}
[data-beat="0"] [data-k="mesa"],[data-beat="1"] [data-k="baremos"],[data-beat="2"] [data-k="pila"],[data-beat="3"] [data-k="pila"],[data-beat="4"] [data-k="informe"]{opacity:1}
@keyframes kbs{0%{transform:scale(1.01)}100%{transform:scale(1.08)}}
.stg__in{animation:kbs 12s ease-out forwards;transform-origin:center}

/* escena 1 · la mesa de noche */
.stg--mesa{background:radial-gradient(120% 85% at 22% 12%,#7a5433 0%,#4a331f 55%,#2f2113 100%)}
.mesa__hoja{position:relative;background:#fdfaf4;border-radius:10px;padding:1.1rem 1.2rem;box-shadow:0 26px 50px rgba(0,0,0,.45);transform:rotate(-1.6deg);font-size:clamp(.62rem,1.25vw,.8rem);color:#2d2a26}
.mesa__hd{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #d8c6ae;padding-bottom:.4rem;margin-bottom:.5rem}
.mesa__hd b{font-size:1.15em;letter-spacing:-.01em}
.mesa__hd small{font-size:.82em;color:#9b8570}
.mesa__fila{display:grid;grid-template-columns:1fr 2.4rem;gap:.5rem;align-items:center;padding:.3rem 0;border-bottom:1px dotted #ddd0bb}
.mesa__fila b{font-weight:400}
.mesa__n{justify-self:end;min-width:1.9rem;text-align:center;border:1.5px solid #c9a882;border-radius:5px;background:#fffaf0;font-weight:700;padding:.05rem 0;font-family:"Ubuntu",monospace}
.mesa__n.manu{font-style:italic;color:#20408a;border-style:dashed}
.mesa__reloj{position:absolute;right:1rem;top:1rem;z-index:3;background:rgba(20,14,8,.72);border:1px solid rgba(255,255,255,.16);color:#ffd9a8;font-weight:700;font-size:clamp(.75rem,1.6vw,1rem);letter-spacing:.06em;padding:.35rem .75rem;border-radius:var(--radius-pill);backdrop-filter:blur(4px)}
/* La taza va a la derecha: abajo a la izquierda es donde aterrizan los rótulos. */
.mesa__taza{position:absolute;right:1rem;bottom:1rem;width:clamp(3rem,9vw,5rem);opacity:.95;z-index:3}
@keyframes vapor{0%{opacity:0;transform:translateY(0) scaleX(1)}35%{opacity:.55}100%{opacity:0;transform:translateY(-18px) scaleX(1.5)}}
.mesa__taza .vap{animation:vapor 3.4s ease-in-out infinite}
.mesa__taza .vap:nth-child(2){animation-delay:1.1s}
.mesa__taza .vap:nth-child(3){animation-delay:2.2s}

/* escena 2 · la tabla de baremos */
.stg--baremos{background:linear-gradient(160deg,#5a3d24 0%,#33230f 100%)}
.bar__wrap{position:relative;background:#fffdf8;border-radius:12px;padding:.9rem;box-shadow:0 24px 46px rgba(0,0,0,.42);overflow:hidden}
.bar__hd{font-size:clamp(.56rem,1.1vw,.7rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9b622f;margin-bottom:.5rem}
.bar__grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);font-size:clamp(.52rem,1.05vw,.68rem);color:#4b4540}
.bar__grid>span{padding:.26rem .3rem;text-align:center;border-bottom:1px solid #f0e7d8}
.bar__grid>span:nth-child(6n+1){text-align:left;font-weight:500;color:#2d2a26}
.bar__grid .th{font-weight:700;color:#8a5a28;border-bottom:2px solid #d9b78e;font-size:.92em}
.bar__lupa{position:absolute;left:.9rem;right:.9rem;height:1.65em;border-radius:6px;background:rgba(248,181,0,.28);box-shadow:0 0 0 2px rgba(183,102,41,.5);transition:transform .55s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:2}
.bar__hit{position:absolute;border-radius:5px;background:#b76629;color:#fff;font-weight:700;font-size:clamp(.52rem,1.05vw,.68rem);padding:.1rem .45rem;opacity:0;transform:scale(.5);transition:all .35s cubic-bezier(.34,1.6,.64,1);z-index:3}
.bar__hit.on{opacity:1;transform:none}
.bar__nota{margin-top:.7rem;text-align:center;color:#f3dcc2;font-size:clamp(.6rem,1.2vw,.8rem);opacity:0;transition:opacity .5s .4s}
[data-beat="1"] .bar__nota{opacity:1}

/* escena 3 · la pila de informes */
.stg--pila{background:linear-gradient(180deg,#6b4728 0%,#32210f 100%);padding:0}
.pila__mazo{position:absolute;inset:0;display:grid;place-items:center}
.pila__hoja{position:absolute;width:52%;aspect-ratio:1/1.32;background:#fbf7f0;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.pila__hoja::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:6px 6px 0 0;background:var(--pc,#b76629)}

/* escena 4 · el informe terminado */
.stg--informe{background:linear-gradient(165deg,#8d6035 0%,#4a3018 100%)}
.inf{background:#fff;border-radius:12px;padding:1rem 1.1rem;box-shadow:0 26px 52px rgba(0,0,0,.4);font-size:clamp(.6rem,1.2vw,.78rem);color:#374151}
.inf__hd{border-bottom:2px solid #e7d9c4;padding-bottom:.45rem;margin-bottom:.6rem}
.inf__hd b{display:block;font-size:1.22em;color:var(--ink);letter-spacing:-.01em}
.inf__hd small{color:#8a7a66}
.inf__cit{display:flex;align-items:baseline;gap:.6rem;margin:.2rem 0 .6rem}
.inf__cit i{font-style:normal;font-size:2.5em;font-weight:700;line-height:1;color:#a1541a;letter-spacing:-.03em}
.inf__cit span{font-size:.92em;color:#6b7280;line-height:1.2}
.inf__perfil{width:100%;height:clamp(74px,13vw,116px);display:block;margin:.2rem 0 .5rem}
.inf__txt{background:#fbf7f0;border-left:4px solid #b76629;border-radius:0 8px 8px 0;padding:.45rem .6rem;line-height:1.4;min-height:4.6em;color:#4b4540}
.inf__txt::after{content:"|";animation:parpadeo 1s infinite;color:#b0a89c}
.inf__txt.done::after{content:""}
.inf__word{display:inline-flex;align-items:center;gap:.45rem;background:#2b579a;color:#fff;font-weight:700;font-size:.95em;padding:.4rem .8rem;border-radius:var(--radius-pill);margin-top:.6rem;opacity:0;transition:opacity .4s}
[data-beat="4"] .inf__word{opacity:1;animation:latir 1.4s ease-in-out infinite}

/* los rótulos y el contador, igual que en Documentación PIE */
.story__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,20,10,.6),rgba(30,20,10,0) 46%);pointer-events:none;transition:opacity .6s;z-index:2}
[data-beat="2"] .story__shade,[data-beat="3"] .story__shade{opacity:0}
.story__slams{position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;z-index:5}
.story__slam{position:absolute;opacity:0;transform:translateY(18px) scale(.92);transition:opacity .35s ease,transform .55s cubic-bezier(.2,1.4,.4,1);font-size:clamp(1.15rem,2.1vw,1.7rem);text-transform:none;letter-spacing:-.01em;pointer-events:none;max-width:100%}
.story__slam--sol{background:#f8b500;color:var(--dark);font-size:clamp(1.5rem,2.8vw,2.3rem)}
.story__slam--chico{font-size:clamp(1rem,1.6vw,1.3rem)}
.story__slam--grande{font-size:clamp(1.7rem,3vw,2.5rem)}
[data-beat="0"] [data-s="0"],[data-beat="0"] [data-s="0b"],[data-beat="4"] [data-s="4"],[data-beat="4"] [data-s="4b"]{position:static;opacity:1;transform:none}
[data-beat="0"] [data-s="0b"]{transition-delay:.55s}
[data-beat="4"] [data-s="4"]{transition-delay:.3s}
[data-beat="4"] [data-s="4b"]{transition-delay:.75s}
.story__count{position:absolute;left:1.1rem;top:1rem;z-index:5;display:flex;align-items:baseline;gap:.7rem;opacity:0;transform:scale(.6);transform-origin:left top;transition:opacity .25s,transform .5s cubic-bezier(.34,1.6,.64,1);pointer-events:none}
[data-beat="1"] .story__count,[data-beat="2"] .story__count,[data-beat="3"] .story__count{opacity:1;transform:none}
.story__count b{font-size:clamp(3.4rem,7vw,5.8rem);font-weight:700;line-height:.9;color:#fff;letter-spacing:-.04em;text-shadow:0 6px 26px rgba(0,0,0,.5);transition:transform .2s}
.story__count b.bump{transform:scale(1.14)}
.story__count span{font-size:clamp(.82rem,1.3vw,1.05rem);font-weight:700;color:#fff;background:var(--redpie);padding:.35rem 1rem;border-radius:var(--radius-pill);box-shadow:0 12px 30px rgba(231,74,87,.45);transition:background .4s;max-width:9.5rem;line-height:1.2;text-align:center}
.story__count span.dark{background:var(--dark)}
.story__files{position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(to top,rgba(38,26,14,.97) 0%,rgba(38,26,14,.92) 68%,rgba(38,26,14,0) 100%);padding:3rem 1.1rem 1rem;color:#fff;opacity:0;transition:opacity .7s;overflow:hidden;z-index:3;display:flex;flex-direction:column}
[data-beat="2"] .story__files,[data-beat="3"] .story__files{opacity:1}
.story__fh{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:700;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.2);margin-bottom:.4rem;gap:.5rem}
.story__fh span:last-child{font-weight:500;color:rgba(255,255,255,.7);white-space:nowrap}
.story__fw{overflow:hidden;flex:1;min-height:0}
.story__fb{transition:transform .25s linear}
.story__fr{display:grid;grid-template-columns:20px 1fr auto;gap:.6rem;align-items:center;padding:.22rem 0;font-size:.74rem;opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .35s;white-space:nowrap}
.story__fr.on{opacity:1;transform:none}
.story__fr span{overflow:hidden;text-overflow:ellipsis}
.story__fr i{width:14px;height:17px;border-radius:3px;background:#fff;position:relative;display:block}
.story__fr i::after{content:"";position:absolute;left:3px;right:3px;top:4px;height:2px;background:#c7cdd4;box-shadow:0 4px 0 #c7cdd4,0 8px 0 #c7cdd4}
.story__fr em{font-style:normal;color:rgba(255,255,255,.55);font-size:.66rem}
.story__steps{padding-top:2rem}
.story__step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.3rem;padding:1rem 0}
.story__step:first-child{min-height:58vh}
.story__step:last-child{min-height:70vh}
.story__k{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--redpie);margin-bottom:.3rem}
.story__step[data-step="3"] .story__k,.story__step[data-step="4"] .story__k{color:var(--accent-ink)}
.story__step h3{font-size:clamp(1.65rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 .5rem}
.story__step p{font-size:1.12rem;line-height:1.55;color:var(--ink-soft);margin:0;max-width:30rem}
.story__step .btn{margin-top:1.2rem}
.js .story__step{opacity:.28;transition:opacity .45s}.js .story__step.on{opacity:1}

/* --- lo que hace: cuatro animaciones ---------------------------------------- */
.feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.feat--flip .feat__text{order:2}
.feat__text h3{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.15;margin:.5rem 0 .6rem;letter-spacing:-.01em}
.feat__text p{color:var(--ink-soft);margin:0 0 .8rem;font-size:1.02rem;line-height:1.55}
.feat__where{display:block;font-size:.85rem;color:var(--ink-soft);opacity:.85;border-left:3px solid var(--rule);padding-left:.7rem}
.ptag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .75rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--pc,#e7f0ff) 18%,#fff);color:var(--pi,#1d4ed8);border:1px solid color-mix(in srgb,var(--pc,#e7f0ff) 45%,#fff)}
.vg{position:relative;background:#fff;border:1px solid var(--rule);border-top:8px solid var(--vc,var(--brown));border-radius:var(--radius-xl);box-shadow:var(--sombra-alta);overflow:hidden;min-height:400px}
/* El alto lo pone la animación de ingreso: todo lo que aparece después ya ocupa
   su sitio en opacidad cero, y la captura del informe se monta encima. */
.vg__bar{display:flex;flex-wrap:wrap;gap:.4rem;padding:.9rem 1.1rem 0}
.vg__bar span{background:var(--vc,var(--brown));color:#fff;font-size:.78rem;font-weight:700;padding:.3rem .7rem;border-radius:8px}
/* El cursor se mueve rápido a propósito: las animaciones van a ritmo de producto,
   no de demo lenta, y un cursor de medio segundo se queda atrás de los campos. */
.vg__cur{position:absolute;left:0;top:0;width:22px;height:22px;opacity:0;z-index:6;transition:opacity .25s,transform .28s cubic-bezier(.4,0,.2,1);pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.vg__cur.on{opacity:1}

/* --- kit compacto de corrección (estilo del producto real) ------------------ */
/* Las paletas de acá son las del software —bootstrap-vue— y no las de marketing.
   Si se pintan en café el componente deja de parecerse al producto. */
.dk{font-family:var(--font);color:#212529}
.dk-tab.on{background:#fff;color:#495057;border-color:#dee2e6}
.dk-body{padding:.9rem 1.1rem 1rem;position:relative}
.dk-inst{font-size:.78rem;color:#6b7280;margin:0 0 .5rem}
.dk-ta.typing::after{content:"|";animation:parpadeo 1s infinite;color:var(--ink-soft)}
@keyframes parpadeo{50%{opacity:.1}}
.dk-done.on{opacity:1;transform:none}
.dk-word.on{opacity:1;animation:latir 1.4s ease-in-out infinite}
@keyframes latir{50%{transform:scale(1.04)}}

/* --- el informe de verdad, dentro del panel ---------------------------------- */
/* Cada tarjeta termina igual: la animación de ingreso se apaga y aparece la
   captura del informe en Word que sale de ese test. Es el mismo gesto en las
   cinco, y es lo que cierra el argumento: no es una maqueta, es el documento.
   El marco tiene scroll propio para que se pueda bajar por el informe sin
   mover la página. */
.js .vg{min-height:30rem}
/* El cruce va escalonado: primero se va el ingreso y 200 ms después entra el
   informe. Sin ese desfase los dos se ven a media opacidad al mismo tiempo y la
   tarjeta se ensucia. Los retardos van en el estado que llega, no en el base,
   para que la vuelta al inicio del bucle sea igual de limpia. */
.vg__entry{transition:opacity .3s ease .2s,transform .35s ease .2s}
.vg.listo .vg__entry{opacity:0;transform:translateY(-10px);pointer-events:none;transition-delay:0s}
.shot{display:flex;flex-direction:column;gap:.55rem;padding:1rem;background:#fff;border-top:1px solid var(--rule)}
.js .shot{position:absolute;inset:0;padding:.9rem 1rem 1rem;border-top:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s ease,transform .35s ease,visibility .3s;z-index:3}
.vg.listo .shot{opacity:1;visibility:visible;transform:none;transition-delay:.2s}
.shot__lab{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.shot__lab b{font-size:.88rem;color:#12805a}
.shot__lab span{font-size:.72rem;color:#6b7280}
.shot__tabs{display:flex;gap:.3rem}
.shot__tabs button{border:1px solid #d9dde1;background:#fff;color:#495057;font:inherit;font-size:.7rem;font-weight:700;padding:.22rem .6rem;border-radius:var(--radius-pill);cursor:pointer;transition:all .25s}
.shot__tabs button.on{background:#fbf1e7;border-color:#b76629;color:#8a4a1a;box-shadow:0 0 0 1px #b76629}
.shot__frame{flex:1;min-height:0;overflow:auto;border:1px solid #e3e6ea;border-radius:14px;background:#f1f3f4;box-shadow:0 8px 18px rgba(57,62,70,.08);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c99566 #f1f3f4}
.shot__frame img{display:block;width:100%;height:auto}
.shot__frame{max-height:30rem}.js .shot__frame{max-height:none}
.shot__frame img.off{display:none}

/* 01 · TEPROSIF: la emisión que se escribe y los procesos que aparecen */
.em-hd{display:grid;grid-template-columns:1.6rem 1fr 1fr 5.6rem;gap:.6rem;align-items:center;font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7280;border-bottom:2px solid #dee2e6;padding-bottom:.3rem;margin-bottom:.2rem}
.em{display:grid;grid-template-columns:1.6rem 1fr 1fr 5.6rem;gap:.6rem;align-items:center;padding:.42rem 0;border-bottom:1px solid #f1f3f5;font-size:.86rem;transition:background .3s}
.em.lit{background:#fff8e8;box-shadow:inset 3px 0 0 #f8b500}
.em>i{font-style:normal;font-size:.7rem;color:#adb5bd;font-weight:700;text-align:center}
.em>b{font-weight:700;color:#212529}
.em__say{font-family:"Ubuntu",monospace;color:#0b6b70;background:#effbfb;border:1px solid #c5e9e9;border-radius:6px;padding:.12rem .45rem;min-height:1.5rem;display:flex;align-items:center}
.em__say.typing::after{content:"|";animation:parpadeo 1s infinite}
.em__cod{display:flex;gap:.25rem;justify-content:flex-end;flex-wrap:wrap}
.em__cod span{font-size:.66rem;font-weight:700;padding:.1rem .4rem;border-radius:5px;background:#eef1f5;color:#495057;opacity:0;transform:scale(.6);transition:all .35s cubic-bezier(.34,1.5,.64,1)}
.em__cod span.on{opacity:1;transform:none}
.em__cod span.e{background:#fdeceb;color:#c53b32}
.em__cod span.s{background:#fff3d6;color:#8a5a08}
.em__cod span.a{background:#e8f0fe;color:#1d4ed8}
.psf{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;margin-top:.8rem;padding-top:.7rem;border-top:2px solid #dee2e6;opacity:0;transform:translateY(10px);transition:all .5s}
.psf.on{opacity:1;transform:none}
.psf__tot{text-align:center;padding-right:.9rem;border-right:1px solid #e9ecef}
.psf__tot b{display:block;font-size:2.4rem;font-weight:700;line-height:1;letter-spacing:-.03em;color:#b76629}
.psf__tot span{font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7280}
.psf__tipos{display:grid;gap:.3rem}
.psf__t{display:flex;align-items:center;gap:.6rem;border-radius:8px;padding:.3rem .6rem;font-size:.78rem;border:1px solid}
.psf__t b{font-size:1.05rem;min-width:1.8rem}
.psf__t small{display:block;font-size:.7rem;opacity:.85}
.psf__t.neg{background:#fff0ec;color:#ae4445;border-color:#efc6be}
.psf__t.pos{background:#e7f5ed;color:#216f53;border-color:#b5daca}

/* 02 · IDTEL: los cuatro microdominios contra su corte */
.md-hd,.md{display:grid;grid-template-columns:1fr 3.1rem 2.8rem 5.4rem;gap:.45rem;align-items:center;font-size:.8rem;padding:.38rem 0;border-bottom:1px solid #f1f3f5}
.md-hd{font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7280;border-bottom:2px solid #dee2e6}
.md-hd span:nth-child(2),.md-hd span:nth-child(3){text-align:center}
.md>b{min-width:2.2rem;min-height:1.5rem;display:grid;place-items:center;border:1.5px solid #ced4da;border-radius:6px;background:#fff;font-size:.9rem;color:#212529;transition:all .3s}
.md.lit>b{border-color:#f8b500;background:#fffaf0}
.md>em{font-style:normal;text-align:center;color:#6b7280;font-size:.74rem}
.md>u{text-decoration:none;font-size:.64rem;font-weight:700;text-align:right;opacity:0;transform:scale(.7);transition:all .35s cubic-bezier(.34,1.5,.64,1)}
.md>u.on{opacity:1;transform:none}
.md>u.bajo{color:#c53b32}.md>u.sobre{color:#12805a}
.md--tot{border-bottom:0;border-top:2px solid #bb8800;margin-top:.2rem;padding-top:.5rem;font-weight:700}
.md--tot>span{color:#8a5a08}
.mix3{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-top:.8rem;padding-top:.7rem;border-top:1px solid #e9ecef;font-size:.74rem}
.mix3 .lab{font-weight:700;color:#495057}
.mix3 span:not(.lab){padding:.2rem .55rem;border-radius:var(--radius-pill);background:#e7f5ed;color:#216f53;font-weight:600;opacity:0;transform:scale(.7);transition:all .4s cubic-bezier(.34,1.5,.64,1)}
.mix3 span.on{opacity:1;transform:none}

/* 03 · WISC-V y WAIS-IV: la grilla de subpruebas del producto */
.tog{display:inline-flex;border:1px solid #d1d5db;border-radius:8px;overflow:hidden;margin:0 .4rem .5rem 0}
.tog i{font-style:normal;font-size:.72rem;font-weight:700;padding:.28rem .7rem;color:#6b7280;background:#fff;transition:all .3s}
/* El relleno lleva el ink y no el café base: blanco sobre #b76629 da 4,24:1 y
   estas etiquetas son texto chico, no titular. Sobre #a1541a, 5,53:1. */
.tog i.on{background:#a1541a;color:#fff}
.subs{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.sub{display:flex;align-items:center;gap:.4rem;border:1px solid #e9ecef;border-radius:7px;padding:.24rem .3rem .24rem .45rem;font-size:.74rem;color:#495057;transition:all .3s}
.sub>i{font-style:normal;flex:none;width:1.05rem;height:1.05rem;display:grid;place-items:center;border-radius:50%;background:#f1f3f5;color:#8a5a08;font-size:.58rem;font-weight:700}
.sub>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub>b{min-width:1.9rem;min-height:1.3rem;display:grid;place-items:center;border:1.5px solid #ced4da;border-radius:5px;background:#fff;font-size:.8rem;color:#8a4a1a;transition:all .3s}
.sub.lit{border-color:#b76629;background:#fbf1e7}
.sub.lit>b{border-color:#b76629;background:#fff}
.corregir{margin-top:.7rem;display:inline-flex;align-items:center;gap:.5rem;background:#a1541a;color:#fff;font-weight:700;font-size:.82rem;padding:.5rem .9rem;border-radius:9px;box-shadow:0 8px 18px rgba(183,102,41,.3);transition:transform .15s,box-shadow .15s}
.corregir.press{transform:scale(.95);box-shadow:0 3px 8px rgba(183,102,41,.3)}

/* 04 · ICAP: actividades que se marcan y el logro por escala */
.esc{margin-top:.8rem;padding-top:.7rem;border-top:2px solid #dee2e6;display:grid;gap:.4rem}
.esc__r{display:grid;grid-template-columns:1fr 2.6rem;gap:.5rem;align-items:center;font-size:.76rem;color:#495057}
.esc__r span{line-height:1.2}
.esc__r b{text-align:right;font-size:.82rem;color:#8a4a1a}
.esc__bar{grid-column:1/-1;height:7px;border-radius:4px;background:#eef1f5;overflow:hidden;margin-top:-.15rem}
.esc__bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--bc,#b76629);transition:width .75s cubic-bezier(.22,.9,.3,1)}

/* 05 · Perfil Sensorial 2: los ítems tal como vienen en el test */
.it{display:grid;grid-template-columns:1.5rem 1fr;gap:.5rem .55rem;align-items:start;padding:.42rem 0;border-bottom:1px solid #f1f3f5;font-size:.8rem;color:#374151;line-height:1.3}
.it>em{font-style:normal;font-size:.64rem;font-weight:700;color:#adb5bd;text-align:center;padding-top:.1rem}
.sc5{grid-column:2;display:flex;gap:.22rem;margin-top:.1rem}
.sc5 b{width:1.4rem;height:1.4rem;display:grid;place-items:center;border:1px solid #e0e3e6;border-radius:6px;background:#fff;font-size:.68rem;font-weight:700;color:#6b7280;transition:all .28s}
.sc5 b.sel{background:#a1541a;border-color:#a1541a;color:#fff;transform:scale(1.1)}
.it__esc{font-size:.62rem;color:#6b7280;margin-bottom:.45rem}

/* --- todos los test: el menú del producto + el mazo de informes -------------- */
.picker{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(1.5rem,3vw,3rem);align-items:center;--pw:250px;--po:24px}
.picker__menu{background:#fff;border:1px solid var(--rule);border-radius:var(--radius-xl);box-shadow:var(--sombra-alta);padding:.6rem}
.picker__hd{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding:.55rem .8rem;border-bottom:1px solid var(--rule);margin-bottom:.35rem;font-weight:700;font-size:1rem;color:var(--ink)}
.picker__hd small{font-weight:600;color:var(--ink-soft);font-size:.74rem}
.picker__it{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem;align-items:center;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:.88rem;font-weight:600;line-height:1.25;color:var(--ink);padding:.4rem .7rem;border-radius:10px;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.picker__it i{width:.8rem;height:1rem;border-radius:2px;background:#fff;border:2px solid var(--c,#b76629);border-top-width:3px;box-sizing:border-box;transition:border-color .25s}
.picker__it em{font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:#f3ece4;color:#7a5a3a;padding:.1rem .4rem;border-radius:5px;white-space:nowrap}
.picker__it u{text-decoration:none;color:#9ca3af;font-weight:700;font-size:1.1rem;line-height:1;transition:transform .25s,color .25s}
.picker__it.on{background:#fbf1e7;box-shadow:inset 0 0 0 1px #b76629;color:#6d3f11}
.picker__it.on i{border-color:#b76629}.picker__it.on u{color:#b76629;transform:translateX(3px)}
.picker__it.on em{background:#f0dcc6;color:#7a4a18}
.picker__it:focus-visible{outline:2px solid var(--brown);outline-offset:1px}
.picker__stage{display:flex;justify-content:center}
.deck{position:relative;width:calc(var(--pw) + 10*var(--po));height:calc(var(--pw)*1.32 + 56px)}
.page{position:absolute;left:calc(var(--i)*var(--po));top:calc(44px - var(--i)*2px);width:var(--pw);height:calc(var(--pw)*1.32);box-sizing:border-box;background:#fff;border:1px solid #e3e6ea;border-radius:12px;box-shadow:0 8px 18px rgba(57,62,70,.10);padding:.85rem .9rem;z-index:var(--i);transition:transform .5s cubic-bezier(.22,.9,.3,1),box-shadow .5s;font-size:.66rem;color:#374151;overflow:hidden;cursor:pointer}
.page.on{transform:translateY(-26px) scale(1.05);z-index:40;box-shadow:0 30px 56px rgba(57,62,70,.3)}
.page::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:var(--c,#b76629)}
.page__top{display:flex;justify-content:space-between;font-size:.56rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin-top:.15rem}
.page h4{margin:.7rem 0 .15rem;font-size:.82rem;line-height:1.15;text-transform:uppercase;color:var(--ink);letter-spacing:-.01em}
.page__sub{font-size:.62rem;color:#6b7280}
.page__meta{font-size:.6rem;color:#374151;margin:.45rem 0 .2rem;padding:.25rem .4rem;background:#f8f9fa;border-radius:4px}
.page__ln{height:6px;border-radius:3px;background:#eceff3;margin-top:.5rem}.page__ln.f{background:#f3d8bd}
.page__foot{position:absolute;left:.9rem;right:.9rem;bottom:.8rem;display:flex;justify-content:space-between;align-items:center}
.page__foot .ok{font-size:.6rem;font-weight:700;color:#12805a;background:#e4f6ee;padding:.15rem .45rem;border-radius:99px}
.page__foot .wd{width:1.3rem;height:1.3rem;border-radius:5px;background:#2b579a;color:#fff;font-weight:700;font-size:.7rem;display:grid;place-items:center}

/* --- el login: los dos ámbares heredados ----------------------------------- */
/* En la página azul no se notan —el ámbar sigue siendo el primary de la marca—
   pero junto al café chocan. Y el cuadrado del logotipo venía con el ink encima,
   que sobre café da 2,54:1: no se lee. */
.login__u{color:#fff;box-shadow:0 10px 24px rgba(161,84,26,.35)}
.login__badge{background:#f8ece2;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent-ink)}

/* --- el pie del login: la línea que cierra el trato ------------------------- */
/* Va bajo la pastilla de Google, en el ink del producto, para que la última cosa
   que se lee antes de entrar no sea una condición sino el motivo. */
.login__cierre{display:block;margin-top:.9rem;padding-top:.75rem;border-top:1px dashed var(--rule);font-size:.92rem;line-height:1.45;color:var(--ink)}
.login__cierre b{color:var(--accent-ink)}

@media (max-width:1100px){.picker{--pw:210px;--po:20px}}
@media (max-width:900px){
  .story{display:block}
  .story__stage{position:sticky;top:4.4rem;height:40vh;max-height:400px;min-height:250px;z-index:2;background:#fdf0dd;padding-bottom:.6rem;box-sizing:border-box}
  .cta-fija{transition:transform .35s ease}
  body.hist-on .cta-fija{transform:translateY(130%)}
  .story__frame{height:100%;aspect-ratio:auto;max-height:none}
  .story__steps{padding-top:1.5rem}
  .story__step,.story__step:first-child,.story__step:last-child{min-height:0;padding:1.6rem 0 3rem}
  .story__step p{max-width:none}
  .story__fh span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .story__step h3{font-size:clamp(1.5rem,6vw,2.1rem)}
  .story__step p{font-size:1.02rem}
  .story__count b{font-size:3rem}
  .feat,.feat--flip{grid-template-columns:1fr}
  .feat--flip .feat__text{order:0}
  .vg{min-height:0}
  .subs{grid-template-columns:1fr}
  .picker{grid-template-columns:1fr;--pw:190px;--po:13px}
  .picker__stage{order:-1}
}
@media (max-width:559px){
  .page__top span:last-child{display:none}
  .em,.em-hd{grid-template-columns:1.2rem 1fr 1fr;gap:.4rem}
  .em__cod{grid-column:2/-1;justify-content:flex-start;margin-top:.15rem}
  .md-hd,.md{grid-template-columns:1fr 2.3rem 2rem;gap:.35rem}
  .md>u{grid-column:1/-1;text-align:left}
  .subs{grid-template-columns:1fr}
}


/* Menos movimiento: sin el acercamiento lento de las escenas, el vapor de la taza
   ni el latido del botón de Word. Las cinco animaciones de producto ya lo
   respetan en su script (`quieto`) y, sin la clase `js`, el informe se ve
   debajo del ingreso. */
@media (prefers-reduced-motion:reduce){.stg__in,.mesa__taza .vap,.inf__word{animation:none!important}}