/* Piel del escáner — fuente única de las tres pantallas.
   La inlinea render_diagnostico.py al generar el informe (tiene que ser
   autocontenido) y la enlazan entrada.html y espera.html. Un solo archivo
   para que las pantallas hermanas no se desincronicen en lo que los tokens
   no nombran: ancho del contenedor, altura de la barra, radio de la tarjeta.

   Regla dura: --gold NUNCA como texto sobre --paper (contraste 1.14). Solo
   sobre --night, como relleno plano, o como subrayado translúcido. */
:root{
  --gold:#F4EC05; --ink:#16161A; --ink-soft:#5C5C63; --ink-line:rgba(22,22,26,.14);
  --night:#0A0A0D; --paper:#F7F5F0; --white:#fff;
  --w-muted:rgba(255,255,255,.74); --w-line:rgba(255,255,255,.13);
  --body:'Onest',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.9,.3,1);
  --ok:#1F7A5C; --warn:#8A5300; --fail:#B3261E;
  --ok-n:#3FBF93; --warn-n:#E0A73A; --fail-n:#F0685E;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;
     line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:30px 24px 90px}
.mono{font-family:var(--mono);font-size:.84em}
/* z-index: la cabecera va por encima del fondo del hero; sobre la foto, el
   eyebrow gris quedaba al límite de lo legible. */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
     flex-wrap:wrap;margin-bottom:20px;position:relative;z-index:2}
.marca{font-weight:800;font-size:15px;letter-spacing:-.02em;color:var(--ink);
       text-decoration:none;display:inline-flex;align-items:baseline}
a.marca:hover{opacity:.72}

/* Volver. Una sola salida por pantalla, en texto, sin caja: la navegación de una
   herramienta de un paso no necesita un menú — necesita no dejarte encerrado. */
.volver{margin-right:auto;font-size:13px;font-weight:600;color:var(--ink-soft);
        text-decoration:none;padding:3px 0;border-bottom:1px solid transparent;
        transition:color .18s var(--ease),border-color .18s var(--ease)}
.volver:hover{color:var(--ink);border-bottom-color:var(--ink-line)}
@media (max-width:520px){ .volver{margin-right:0;order:3;width:100%} }
.marca i{font-style:normal;background:var(--gold);color:var(--night);padding:1px 6px;
         border-radius:3px;margin-right:7px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
         color:var(--ink-soft)}

/* ── 1 · La tarjeta ─────────────────────────────────────── */
.card{background:var(--night);color:var(--white);border-radius:16px;padding:30px 32px 26px;
      position:relative;overflow:hidden}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold)}
.c-dom{font-family:var(--mono);font-size:13px;color:var(--w-muted);display:flex;
       justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:22px}
/* Veredicto primero, número después: el número solo era una nota de un profesor
   que el gerente no conoce. */
.c-fila{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start}
.c-frase{font-size:clamp(25px,5.2vw,36px);font-weight:800;letter-spacing:-.035em;
         line-height:1.1;color:var(--white)}
.c-frase.mal{color:var(--fail-n)} .c-frase.medio{color:var(--warn-n)}
.c-frase.bien{color:var(--ok-n)}
.c-sub{font-size:15px;color:var(--w-muted);margin-top:7px;font-weight:500}
.c-num{display:flex;align-items:baseline;gap:4px}
.c-big{font-size:clamp(42px,9vw,60px);font-weight:800;letter-spacing:-.05em;line-height:.9}
.c-big.mal{color:var(--fail-n)} .c-big.medio{color:var(--warn-n)} .c-big.bien{color:var(--ok-n)}
.c-den{font-size:19px;font-weight:600;color:var(--w-muted)}
.c-cmp{margin-top:18px;padding-top:16px;border-top:1px solid var(--w-line);
       font-size:14.5px;line-height:1.6;color:var(--w-muted)}
.c-cmp b{color:var(--white);font-weight:700}
.c-cmp em{display:block;font-style:normal;font-family:var(--mono);font-size:12px;
          color:var(--gold);margin-top:6px;letter-spacing:.01em}
/* Lo primero que arreglaría: una revisión técnica siempre dice cuál te deja fuera. */
.c-pri{margin-top:16px;border-left:3px solid var(--gold);padding:2px 0 2px 15px}
.c-pri span{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;
            text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.c-pri b{display:block;font-size:16px;font-weight:700;color:var(--white);line-height:1.35}
.c-pri b i{font-style:normal;color:var(--fail-n);font-weight:800;margin-right:9px}
.c-pri em{font-style:normal;font-size:13px;color:var(--w-muted)}
.c-areas{margin-top:26px;padding-top:22px;border-top:1px solid var(--w-line);display:grid;gap:11px}
.ca{display:grid;grid-template-columns:18px 1fr 74px 46px;gap:11px;align-items:center;
    font-size:14px}
.ca-n{font-family:var(--mono);font-size:11px;color:var(--w-muted)}
.ca-t{font-weight:600;color:rgba(255,255,255,.92)}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.13);overflow:hidden;
     position:relative}
/* Un 0 con la pista vacía se lee «no medido». La marca mínima dice «medimos, y da cero».
   Va como `min-width` del relleno y NO como pseudo-elemento de la pista: así hereda el
   color del puntaje. Antes era roja siempre — o sea, un área que no pudimos medir salía
   marcada en rojo, que es justo lo contrario de lo que prometemos («pendiente, no
   reprobado»), y un área de 100 mostraba un punto rojo mientras corría la animación. */
.bar i{position:relative;z-index:1;display:block;height:100%;width:0;min-width:4px;
       border-radius:3px;transition:width 1.1s var(--ease) .3s}
/* No medida: pista rayada y sin relleno. No es cero, es que no lo vimos. */
.bar.sin{background:repeating-linear-gradient(90deg,rgba(255,255,255,.20) 0 3px,
         transparent 3px 7px)}
.bar i.nd{min-width:0;background:none}
.nota-media{margin-top:12px;font-size:12px;color:var(--w-muted);font-style:normal}
.bar i.mal{background:var(--fail-n)} .bar i.medio{background:var(--warn-n)}
.bar i.bien{background:var(--ok-n)}
.ca-p{font-size:13px;font-weight:700;text-align:right;color:var(--w-muted)}
.ca-p.mal{color:var(--fail-n)} .ca-p.medio{color:var(--warn-n)} .ca-p.bien{color:var(--ok-n)}

/* ── 2 · El ejemplo canónico ────────────────────────────── */
/* El bloque que enseña lleva la foto de la libreta: es la metáfora, literal.
   Va al 22% sobre el papel — legible primero, atmósfera después. */
.eli5{margin-top:32px;background:var(--white);border:1px solid var(--ink-line);
      border-radius:14px;padding:26px 28px;position:relative;overflow:hidden;isolation:isolate}
.eli5::before{content:'';position:absolute;inset:0;z-index:-1;
  background:url("img/foto-libreta.jpg") right center/cover no-repeat;opacity:.14;
  -webkit-mask-image:linear-gradient(to left,#000 0%,transparent 62%);
  mask-image:linear-gradient(to left,#000 0%,transparent 62%)}
.eli5 .k{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
         color:var(--ink-soft);margin-bottom:11px}
.eli5 p{font-size:16.5px;line-height:1.68;max-width:60ch}
.eli5 p+p{margin-top:11px}
.eli5 p>b{font-weight:700;
  background:linear-gradient(180deg,transparent 48%,rgba(244,236,5,.5) 48%,
             rgba(244,236,5,.5) 90%,transparent 90%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.eli5 .tres{margin-top:17px;padding-top:16px;border-top:1px solid var(--ink-line);font-size:15px}
.eli5 .tres>p{font-weight:700;margin-bottom:10px;font-size:15px}
.eli5 .tres>div{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:baseline;
                margin-bottom:8px;line-height:1.55}
.eli5 .tres>div:last-child{margin-bottom:0}
.eli5 .tres em{font-style:normal;font-weight:800;color:var(--ink);font-family:var(--mono);
               font-size:12px}
.eli5 .tres strong{font-weight:700}

/* ── 3 · Las cinco preguntas — tarjeta que abre un modal ─── */
section{margin-top:40px}
h2{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
   color:var(--ink-soft);margin-bottom:16px}
.q{width:100%;text-align:left;font-family:var(--body);color:var(--ink);cursor:pointer;
   background:var(--white);border:1px solid var(--ink-line);border-radius:14px;
   margin-bottom:11px;display:grid;grid-template-columns:auto 1fr auto 20px;gap:16px;
   align-items:center;padding:17px 22px;
   transition:transform .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease);
   animation:sube .5s var(--ease) backwards}
.q:nth-of-type(1){animation-delay:.05s} .q:nth-of-type(2){animation-delay:.11s}
.q:nth-of-type(3){animation-delay:.17s} .q:nth-of-type(4){animation-delay:.23s}
.q:nth-of-type(5){animation-delay:.29s}
@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q:hover{transform:translateY(-2px);border-color:rgba(22,22,26,.28);
         box-shadow:0 10px 30px -12px rgba(22,22,26,.22)}
.q:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.q:active{transform:translateY(0)}
.q-ico{width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--night)}
.q-t{font-size:18.5px;font-weight:800;letter-spacing:-.024em;line-height:1.25}
.q-t em{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:500;
        color:var(--ink-soft);margin-right:9px}
.q-t i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;
       font-weight:400;color:var(--ink-soft);margin-top:3px;letter-spacing:0}
.q-ir{font-size:17px;color:var(--ink-soft);transition:transform .32s var(--ease)}
.q:hover .q-ir{transform:translateX(4px);color:var(--ink)}

/* anillo de puntaje */
.ring{width:46px;height:46px;flex-shrink:0}
.ring .rt{fill:none;stroke:var(--ink-line);stroke-width:4}
.ring .rf{fill:none;stroke-width:4;stroke-linecap:round;transform:rotate(-90deg);
          transform-origin:50% 50%;transition:stroke-dashoffset 1.1s var(--ease) .25s}
.ring .rf.mal{stroke:var(--fail)} .ring .rf.medio{stroke:var(--warn)}
.ring .rf.bien{stroke:var(--ok)}
/* Sin mono: su cero rebanado se lee como un número tachado cuando es la cifra
   protagonista. El mono se queda para identificadores, que es donde ayuda. */
.ring .rn{font-family:var(--body);font-size:13.5px;font-weight:800;text-anchor:middle}
.ring .rn.mal{fill:var(--fail)} .ring .rn.medio{fill:var(--warn)}
.ring .rn.bien{fill:var(--ok)} .ring .rn.nd{fill:var(--ink-soft)}

/* ── El modal ────────────────────────────────────────────── */
/* <dialog> nativo: foco atrapado, Escape y fondo inerte sin una línea de librería.
   El blur va en ::backdrop, que es lo que lo hace ver caro sin costar nada. */
/* margin:auto explícito — el reset `*{margin:0}` de arriba mata el margen automático
   con el que el navegador centra un <dialog> abierto con showModal(), y el panel
   queda pegado arriba a la izquierda. */
.modal{border:0;padding:0;margin:auto;max-width:640px;width:calc(100% - 32px);max-height:86vh;
       border-radius:18px;background:var(--white);color:var(--ink);overflow:auto;
       box-shadow:0 40px 90px -20px rgba(10,10,13,.5),0 0 0 1px rgba(22,22,26,.09)}
.modal::backdrop{background:rgba(10,10,13,.5);
                 -webkit-backdrop-filter:blur(14px) saturate(.85);
                 backdrop-filter:blur(14px) saturate(.85)}
.modal[open]{animation:entra .38s var(--ease)}
.modal[open]::backdrop{animation:aparece .38s var(--ease)}
@keyframes entra{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.m-x{position:sticky;top:14px;float:right;margin:14px 14px 0 0;z-index:2;
     width:34px;height:34px;border-radius:50%;border:1px solid var(--ink-line);
     background:var(--white);color:var(--ink-soft);font-size:20px;line-height:1;cursor:pointer;
     font-family:var(--body);transition:background .2s var(--ease),color .2s var(--ease)}
.m-x:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.m-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
        padding:26px 30px 22px;border-bottom:1px solid var(--ink-line)}
.m-head .q-ico{width:62px;height:62px;border-radius:14px}
.m-n{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
     color:var(--ink-soft);margin-bottom:5px}
.m-tit h3{font-size:24px;font-weight:800;letter-spacing:-.032em;line-height:1.15}
.m-tit i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;
         color:var(--ink-soft);margin-top:5px}
.m-p{text-align:right;line-height:1}
.m-p span{font-size:34px;font-weight:800;letter-spacing:-.04em}
.m-p span.mal{color:var(--fail)} .m-p span.medio{color:var(--warn)} .m-p span.bien{color:var(--ok)}
.m-p small{display:block;font-size:11px;color:var(--ink-soft);margin-top:4px}
.m-body{padding:4px 30px 30px}
.q-f{margin-top:18px;font-size:16px;line-height:1.62;max-width:58ch}
.q-c{margin-top:17px;display:grid;gap:11px}
.chk{display:grid;grid-template-columns:19px 1fr;gap:10px;font-size:14.5px;line-height:1.5}
.chk b{font-weight:800;font-size:14px}
.chk.ok b{color:var(--ok)} .chk.mal b{color:var(--fail)} .chk.posible b{color:var(--warn)}
.chk.mal>span,.chk.posible>span{font-weight:600}
.chk em{display:block;font-style:normal;font-weight:400;font-size:13.5px;
        color:var(--ink-soft);margin-top:3px;line-height:1.55;max-width:56ch}

/* lo que no se entrega gratis */
.cerrado{margin-top:17px;border:1px dashed var(--ink-line);border-radius:11px;
         padding:14px 17px;background:rgba(22,22,26,.022)}
.cerrado b{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px}
.cerrado span{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
/* Informe contratado (--completo): la lista entera en vez del anzuelo. */
.abierto{margin-top:17px;border:1px solid var(--ink-line);border-radius:11px;
         padding:15px 17px;background:rgba(22,22,26,.022)}
.abierto b{display:block;font-size:14.5px;font-weight:700;margin-bottom:10px}
.abierto ul{list-style:none;display:grid;gap:5px}
.abierto li{font-family:var(--mono);font-size:12.5px;color:var(--ink);
            background:rgba(22,22,26,.045);padding:6px 10px;border-radius:6px}

/* ── 4 · Llamado a la acción ────────────────────────────── */
.cta-box{margin-top:38px;border:2px solid var(--night);border-radius:15px;padding:28px 30px;
         background:var(--white)}
.cta-box h3{font-size:21px;font-weight:800;letter-spacing:-.025em;margin-bottom:9px}
.cta-box p{font-size:15.5px;color:var(--ink-soft);line-height:1.63;max-width:58ch}
.cta-box p b{color:var(--ink);font-weight:600}
.lista{margin:16px 0 4px;display:grid;gap:7px}
/* > directo: el <span> interior también calzaba y partía el texto palabra por
   palabra. Mismo error que .tres — cuando la fila es <span><em>·</em><span>…, el
   selector tiene que nombrar solo el contenedor. */
.lista>span{display:grid;grid-template-columns:19px 1fr;gap:9px;font-size:15px;
            align-items:baseline;line-height:1.55}
.lista em{font-style:normal;color:var(--ok);font-weight:800}
.cta{display:inline-block;margin-top:16px;background:var(--gold);color:var(--night);
     font-weight:800;font-size:15.5px;padding:14px 28px;border-radius:9px;text-decoration:none;
     border:2px solid var(--night);transition:transform .18s var(--ease)}
.cta:hover{transform:translateY(-2px)}
.nota{margin-top:32px;font-size:12.5px;color:var(--ink-soft);line-height:1.65;
      border-top:1px solid var(--ink-line);padding-top:17px;max-width:70ch}
.nota b{color:var(--ink)}

.rec{margin-top:16px;background:var(--white);border:1px solid var(--ink-line);
            border-radius:14px;padding:22px 26px}
.rec .k{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
                  color:var(--ink-soft);margin-bottom:10px}
.proc{margin-top:10px;font-size:12.5px;color:var(--ink-soft);font-family:var(--mono)}
.rec ul{list-style:none;display:grid;gap:6px}
.rec li{display:grid;grid-template-columns:16px 130px 1fr;gap:10px;align-items:baseline;
        font-size:14px}
.rec li b{color:var(--ok);font-weight:800}
.rec li span{font-weight:600}
.rec li code{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
@media (max-width:560px){.rec li{grid-template-columns:16px 1fr}.rec li code{grid-column:2}}
@media (max-width:560px){
  .wrap{padding:20px 15px 70px}.card{padding:24px 22px}
  .ca{grid-template-columns:16px 1fr 46px;}.ca .bar{display:none}
  .q{padding:19px 18px}}
@media print{
  body{background:#fff}
  .cta,.q-ir,.m-x,.q{display:none}
  /* El modal no existe en papel: se abre y se apila como una sección más. */
  .modal{display:block!important;position:static;max-width:none;width:auto;max-height:none;
         box-shadow:none;border:1px solid #ddd;margin:14px 0;break-inside:avoid}
  .modal::backdrop{display:none}
}

/* ── Entrada y espera ────────────────────────────────────────────────────── */
.hero{text-align:left;max-width:60ch;margin:44px 0 30px;position:relative;z-index:1}
/* La vitrina, vista desde la vereda: es la metáfora del producto antes de leer
   una palabra. Sangra por la derecha y se apaga hacia el texto. */
.hero-fondo{position:absolute;inset:-64px -24px auto auto;width:min(56vw,520px);
  height:min(56vw,520px);z-index:-1;border-radius:0 0 0 120px;overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0,#000 30%,transparent 72%);
  mask-image:radial-gradient(120% 100% at 100% 0,#000 30%,transparent 72%)}
.hero-fondo img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;opacity:.34;
  filter:grayscale(.35) contrast(1.05)}
body{position:relative;overflow-x:hidden}
@media (max-width:640px){.hero-fondo{display:none}}
.hero h1{font-size:clamp(30px,6.2vw,44px);font-weight:800;letter-spacing:-.04em;
         line-height:1.08;margin-bottom:16px}
/* box-decoration-break: sin esto, el subrayado de una frase que parte de línea se
   estira hasta el borde del contenedor en la última línea. */
/* La banda se define por PARADAS dentro de la caja de línea, no por una altura
   suelta posicionada al 88%: así se apoyaba en los descendentes y leía como
   subrayado grueso, no como marcador. 46%→88% cubre la altura de x. */
.hero h1 u{text-decoration:none;
  background:linear-gradient(180deg,transparent 46%,rgba(244,236,5,.6) 46%,
             rgba(244,236,5,.6) 88%,transparent 88%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero p{font-size:17px;line-height:1.65;color:var(--ink-soft)}
.hero p b{color:var(--ink);font-weight:600}
.form{background:var(--white);border:2px solid var(--night);border-radius:15px;
      padding:24px 26px;margin-bottom:14px}
.campo{display:grid;gap:6px;margin-bottom:14px}
.campo label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
             color:var(--ink-soft)}
.campo input,.campo select{font-family:var(--body);font-size:17px;padding:13px 15px;
    border:1px solid var(--ink-line);border-radius:9px;background:var(--paper);color:var(--ink);
    width:100%;transition:border-color .16s var(--ease)}
.campo input{font-family:var(--mono);font-size:15.5px}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--ink);
    box-shadow:0 0 0 3px rgba(244,236,5,.4)}
.campo .ayuda{font-size:12.5px;color:var(--ink-soft)}
.enviar{width:100%;background:var(--gold);color:var(--night);font-family:var(--body);
        font-weight:800;font-size:16.5px;padding:15px;border-radius:9px;border:2px solid var(--night);
        cursor:pointer;transition:transform .18s var(--ease)}
.enviar:hover{transform:translateY(-2px)}
.bajo{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft);
      margin-top:13px;justify-content:center}
.bajo span{display:flex;align-items:center;gap:6px}
.bajo b{color:var(--ok);font-weight:800}
.que{margin-top:34px;display:grid;gap:11px}
.que-i{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;
       background:var(--white);border:1px solid var(--ink-line);border-radius:12px;
       padding:17px 20px}
.que-i em{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:700;
          background:var(--night);color:var(--gold);width:30px;height:30px;border-radius:50%;
          display:grid;place-items:center}
.que-i b{display:block;font-size:15.5px;font-weight:700;margin-bottom:2px}
.que-i span{font-size:14px;color:var(--ink-soft);line-height:1.55}

/* espera */
.esp{background:var(--night);color:var(--white);border-radius:16px;padding:34px 32px;
     position:relative;overflow:hidden;margin-top:34px}
.esp::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold)}
.esp-dom{font-family:var(--mono);font-size:13.5px;color:var(--w-muted);margin-bottom:8px}
.esp-t{font-size:25px;font-weight:800;letter-spacing:-.03em;margin-bottom:22px}
.esp-t i{font-style:normal;color:var(--gold)}
.pista{height:5px;border-radius:3px;background:rgba(255,255,255,.13);overflow:hidden;
       margin-bottom:22px}
/* La barra ya no corre sola contra un reloj inventado: la mueve el paso real.
   Una barra que llega al 88 % y se queda ahí mientras el trabajo sigue es la que
   enseña al visitante a no creerle a ninguna barra. */
.pista i{display:block;height:100%;width:6%;background:var(--gold);border-radius:3px;
         transition:width .5s var(--ease),background .3s linear}
/* Los pasos ya no van con retardos inventados: el estado lo manda el servidor y
   cada línea cambia cuando la medición de verdad llega a ese punto. Un `data-e`
   por línea — espera · yendo · hecho. */
.pasos-e{display:grid;gap:11px;list-style:none;margin:0;padding:0;
         counter-reset:none}
.pe{display:grid;grid-template-columns:19px 1fr;gap:12px;align-items:baseline;
    font-size:14.5px;transition:opacity .4s var(--ease)}
.pe[data-e="espera"]{opacity:.34}
.pe[data-e="yendo"]{opacity:1}
.pe[data-e="hecho"]{opacity:.82}
.pe span{color:rgba(255,255,255,.92);display:block}
.pe em{display:block;font-style:normal;font-family:var(--mono);font-size:12px;
       color:var(--w-muted);margin-top:3px}

/* La marca de cada estado. El punto que late es lo único animado: dice «esto está
   pasando ahora», que es exactamente lo que el que espera quiere saber. */
.pe b{width:15px;height:15px;border-radius:50%;display:block;position:relative;
      align-self:center;transform:translateY(1px)}
.pe[data-e="espera"] b{border:1.5px solid rgba(255,255,255,.3)}
.pe[data-e="yendo"] b{border:1.5px solid var(--gold);
      box-shadow:0 0 0 0 rgba(244,236,5,.55);animation:late 1.25s ease-out infinite}
.pe[data-e="yendo"] b::after{content:'';position:absolute;inset:3.5px;border-radius:50%;
      background:var(--gold)}
.pe[data-e="hecho"] b{border:1.5px solid var(--ok-n)}
.pe[data-e="hecho"] b::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
      border:solid var(--ok-n);border-width:0 1.7px 1.7px 0;transform:rotate(42deg)}
@keyframes late{to{box-shadow:0 0 0 9px rgba(244,236,5,0)}}
@media (prefers-reduced-motion:reduce){
  .pe[data-e="yendo"] b{animation:none}
  .pista i{animation:none;width:60%}
}
.esp-err{margin-top:18px;padding:14px 16px;border-radius:10px;font-size:14.5px;
         line-height:1.55;background:rgba(179,38,30,.16);color:#FFC9C4;
         border:1px solid rgba(255,120,110,.3)}
.campo .ayuda.mal{color:var(--fail);font-weight:600}
.sabias{margin-top:26px;background:var(--white);border:1px solid var(--ink-line);
        border-radius:14px;padding:22px 26px}
.sabias .k{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
           color:var(--ink-soft);margin-bottom:9px}
.sabias p{font-size:16px;line-height:1.65;max-width:60ch}
.sabias p b{font-weight:700;
  background:linear-gradient(180deg,transparent 48%,rgba(244,236,5,.5) 48%,
             rgba(244,236,5,.5) 90%,transparent 90%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ── Contexto del censo, dentro del área ─────────────────────────────────── */
.ctx{margin-top:14px;background:rgba(244,236,5,.13);border-left:3px solid var(--gold);
     border-radius:0 8px 8px 0;padding:13px 16px;font-size:14.5px;line-height:1.6;
     color:var(--ink);max-width:64ch}
.ctx b{font-weight:800}
.ctx .proc{display:block;margin-top:7px;font-family:var(--mono);font-size:11.5px;
           color:var(--ink-soft)}

/* ── Puerta de entrada al resto de la organización ───────────────────────── */
.puerta{margin-top:16px;border-radius:16px;padding:32px 30px;background:var(--night);
        color:var(--white);position:relative;overflow:hidden;isolation:isolate}
/* Cambia de registro: ya no es tu sitio, es tu organización. Por eso la sala de
   reuniones y no la vitrina. Al 26% sobre negro — se intuye, no se mira. */
.puerta::after{content:'';position:absolute;inset:0;z-index:-1;
  background:url("img/foto-oficina.jpg") center/cover no-repeat;opacity:.17;
  -webkit-mask-image:linear-gradient(to bottom left,#000 0%,transparent 58%);
  mask-image:linear-gradient(to bottom left,#000 0%,transparent 58%)}
.puerta::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold)}
.puerta .k{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
           color:var(--gold);margin-bottom:10px}
.puerta h3{font-size:clamp(21px,4.4vw,27px);font-weight:800;letter-spacing:-.032em;
           line-height:1.16;margin-bottom:13px;max-width:22ch}
.puerta p{font-size:15.5px;line-height:1.65;color:var(--w-muted);max-width:60ch}
.puerta p b{color:var(--white);font-weight:600}
.oa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:11px;
         margin:22px 0}
.oa{background:rgba(255,255,255,.055);border:1px solid var(--w-line);border-radius:11px;
    padding:15px 17px}
.oa b{display:block;font-size:15px;font-weight:700;color:var(--white);margin-bottom:4px}
.oa span{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.82)}
.oa-cierre{margin-bottom:20px}
.puerta .cta{margin-top:0}
.cta-nota{display:block;margin-top:11px;font-size:12.5px;color:var(--w-muted)}
@media (max-width:560px){
  .q>summary{grid-template-columns:auto 1fr auto;gap:12px;padding:15px 16px}
  .q>summary .q-mas{display:none}
  .q-ico{width:42px;height:42px}
  .q-body{padding:2px 16px 18px}
  .puerta{padding:26px 20px}}

/* ── Captura de correo ───────────────────────────────────────────────────── */
/* Va en cuatro lugares con el mismo contrato. La nota de qué viaja NO es opcional:
   es el punto exacto donde el competidor mintió, y donde más caro nos sale. */
.correo{margin-top:22px;padding-top:20px;border-top:1px solid var(--w-line)}
.co-txt b{display:block;font-size:16.5px;font-weight:700;color:var(--white);
          letter-spacing:-.02em;margin-bottom:4px}
.co-txt span{font-size:14px;color:var(--w-muted);line-height:1.55}
.co-form{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.co-form input{flex:1 1 210px;font-family:var(--mono);font-size:15px;padding:13px 15px;
  border-radius:9px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  color:var(--white);transition:border-color .18s var(--ease),background .18s var(--ease)}
.co-form input::placeholder{color:rgba(255,255,255,.38)}
.co-form input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.11)}
.co-form button{font-family:var(--body);font-weight:800;font-size:15px;padding:13px 24px;
  border-radius:9px;border:0;background:var(--gold);color:var(--night);cursor:pointer;
  transition:transform .18s var(--ease)}
.co-form button:hover{transform:translateY(-2px)}
.co-nota{margin-top:11px;font-size:12.5px;line-height:1.6;color:var(--w-muted);max-width:56ch}
.co-nota b{color:rgba(255,255,255,.86);font-weight:600}
.co-ok,.co-mal{margin-top:12px;font-size:14.5px;font-weight:600}
.co-ok{color:var(--ok-n)} .co-mal{color:var(--warn-n)}
.co-mal a{color:var(--gold)}
/* Sobre papel (modal y cierre) los mismos tokens, invertidos. */
.modal .correo,.cta-box .correo{border-top-color:var(--ink-line)}
.modal .co-txt b,.cta-box .co-txt b{color:var(--ink)}
.modal .co-txt span,.cta-box .co-txt span,
.modal .co-nota,.cta-box .co-nota{color:var(--ink-soft)}
.modal .co-nota b,.cta-box .co-nota b{color:var(--ink)}
.modal .co-form input,.cta-box .co-form input{background:var(--paper);color:var(--ink);
  border-color:var(--ink-line)}
.modal .co-form input::placeholder,.cta-box .co-form input::placeholder{color:var(--ink-soft)}
.modal .co-form input:focus,.cta-box .co-form input:focus{border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(244,236,5,.4)}
.modal .co-form button,.cta-box .co-form button{border:2px solid var(--night)}
.modal .co-ok,.cta-box .co-ok{color:var(--ok)}
.modal .co-mal,.cta-box .co-mal{color:var(--warn)}
.modal .co-mal a,.cta-box .co-mal a{color:var(--ink)}

/* ── Metodología, abajo ──────────────────────────────────────────────────── */
.abajo{margin-top:44px;padding-top:6px;border-top:1px solid var(--ink-line)}
.abajo .eli5,.abajo .rec{margin-top:14px}
@media print{.correo{display:none}}

/* --- Recorrer las cinco preguntas sin volver a la lista ------------------- */
.m-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;
       padding:14px 30px 22px;border-top:1px solid var(--line)}
.m-nav span{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.m-nav button{font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--ink);
       background:transparent;border:1px solid var(--line);border-radius:999px;
       padding:8px 15px;cursor:pointer;transition:background .16s,border-color .16s}
.m-nav button:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

/* La fila que ya abriste se apaga un punto y gana una marca. No se tacha: el
   dato sigue siendo verdad, solo deja de pedir atención. */
.q[data-visto]{border-color:rgba(22,22,26,.10);background:rgba(22,22,26,.018)}
.q[data-visto] .q-t{opacity:.72}
/* La marca va en la columna de texto (1fr), no en la de la flecha: esa columna
   mide 20px fijos y cualquier contenido extra se sale de la tarjeta. */
.q[data-visto] .q-t i::after{content:" · visto";color:var(--muted)}

/* --- La segunda intención, como casilla y no como segundo botón --------------
   Dos botones del mismo peso obligan a elegir antes de entender, y el que duda no
   aprieta ninguno. La casilla deja que el default —el informe— sea un clic.
   Sigue la convención del bloque: el default es la variante oscura (tarjeta y
   puerta) y `.modal` / `.cta-box` la aclaran, igual que `.co-nota`. */
.co-deep{display:flex;gap:10px;align-items:flex-start;margin-top:13px;cursor:pointer;
         font-size:13.5px;line-height:1.55;color:var(--w-muted);max-width:56ch}
.co-deep input{width:17px;height:17px;flex-shrink:0;margin-top:1px;
               accent-color:var(--gold);cursor:pointer}
.co-deep b{color:var(--white);font-weight:700}
.modal .co-deep,.cta-box .co-deep{color:var(--ink-soft)}
.modal .co-deep b,.cta-box .co-deep b{color:var(--ink)}
.modal .co-deep input,.cta-box .co-deep input{accent-color:var(--ink)}

/* --- Compartir ---------------------------------------------------------------
   Va en la tarjeta, al lado del correo: son las dos salidas del veredicto —
   mandármelo a mí, o pasárselo a alguien. En secundario, porque el correo es el
   que nos deja algo. */
.comparte{display:flex;align-items:center;gap:13px;margin-top:20px;flex-wrap:wrap}
.comparte button{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:600;color:var(--white);
  background:rgba(255,255,255,.07);border:1px solid var(--w-line);border-radius:999px;
  padding:9px 18px;transition:background .18s var(--ease),border-color .18s var(--ease)}
.comparte button:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.comparte button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.comparte button svg{flex-shrink:0}
.comparte em{font-style:normal;font-size:13px;color:var(--gold);font-weight:600}