/* Leveragency · Web v2 · Diagnóstico (quiz 7 pasos)
   Todo scopeado bajo .sec-diagnostico. Solo tokens. */

/* La barra inferior mobile lleva a esta misma página: sobra acá. */
body:has(.sec-diagnostico) .barra{display:none}
@media (max-width:900px){body:has(.sec-diagnostico){padding-bottom:0}}

.sec-diagnostico{padding-top:clamp(36px,6vw,72px);padding-bottom:clamp(72px,9vw,120px)}

/* ---------- encabezado ---------- */
.sec-diagnostico .dg-head{margin-bottom:clamp(24px,3.4vw,36px)}
.sec-diagnostico .dg-t{font-size:var(--fs-h2);max-width:19ch;margin-bottom:0;outline:0}
.sec-diagnostico.is-listo .dg-t{font-size:clamp(38px,5.8vw,66px);max-width:15ch}
.sec-diagnostico.is-listo .dg-head{margin-bottom:clamp(38px,5vw,58px)}
/* en el resultado todo comparte una sola columna: la barra ámbar y las reglas de los h3 alinean */
.sec-diagnostico.is-listo .dg-prog{max-width:540px}
.sec-diagnostico .dg-prog{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,3vw,30px)}
.sec-diagnostico .dg-prog-riel{flex:1 1 auto;height:3px;background:var(--linea);border-radius:2px;overflow:hidden}
.sec-diagnostico .dg-prog-fill{height:100%;width:12%;background:var(--ambar);border-radius:2px;transition:width .5s var(--ease)}
.sec-diagnostico .dg-prog-n{flex:none;color:var(--gris);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.sec-diagnostico .dg-prog-fill{transition:none}}

/* aviso sin JS: se esconde apenas app.js marca html.js */
html.js .sec-diagnostico .dg-nojs{display:none}
.sec-diagnostico .dg-nojs{margin-top:20px;display:block;max-width:56ch}
.sec-diagnostico .dg-nojs::before{display:inline-block;margin:0 8px 2px 0;vertical-align:middle}

/* [hidden] gana siempre: varios bloques de acá tienen display propio */
.sec-diagnostico [hidden]{display:none!important}

/* ---------- tarjeta ---------- */
.sec-diagnostico .dg-card{padding:clamp(22px,3.2vw,38px);border-radius:var(--r-3);min-height:clamp(380px,50vh,432px);display:flex;flex-direction:column}
.sec-diagnostico .dg-paso{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.sec-diagnostico .dg-q{font-size:var(--fs-h3);margin:0 0 8px;outline:0}
.sec-diagnostico .dg-micro{color:var(--gris);font-size:var(--fs-small);margin:0 0 clamp(18px,2.4vw,24px);max-width:52ch}

/* ---------- opciones ---------- */
.sec-diagnostico .dg-ops{display:grid;gap:10px;align-content:start}
@media (min-width:700px){.sec-diagnostico .dg-ops--2{grid-template-columns:1fr 1fr}}
.sec-diagnostico .chip.dg-op{width:100%;min-height:52px;padding:12px 16px;gap:12px;border-radius:var(--r-2);justify-content:flex-start;text-align:left;line-height:1.28;font-size:16px}
.sec-diagnostico .chip.dg-op>span{display:block;min-width:0}
.sec-diagnostico .chip.dg-op em{display:block;font-style:normal;font-family:var(--fm);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);margin-top:4px}
.sec-diagnostico .chip.dg-op[aria-pressed="true"] em{color:var(--papel-bajo)}
.sec-diagnostico .chip.dg-op svg{width:21px;height:21px;flex:none;opacity:.55;transition:opacity .2s}
.sec-diagnostico .chip.dg-op[aria-pressed="true"] svg,.sec-diagnostico .chip.dg-op:hover svg{opacity:1}

.sec-diagnostico .dg-hint{margin:14px 0 0;font-family:var(--fm);font-size:var(--fs-mono);letter-spacing:.04em;color:var(--gris)}

/* ---------- pie de la tarjeta ---------- */
.sec-diagnostico .dg-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:clamp(20px,2.8vw,26px)}
.sec-diagnostico .dg-paso:not(.dg-cargando) .dg-nav{border-top:var(--borde)}
/* en el paso 1 no hay Atrás: sin fila vacía con regla */
.sec-diagnostico .dg-paso[data-paso="1"] .dg-nav{display:none}
.sec-diagnostico .dg-atras{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 2px;font-family:var(--fm);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);transition:color .2s}
.sec-diagnostico .dg-atras::before{content:"";width:16px;height:1.5px;background:currentColor;flex:none}
.sec-diagnostico .dg-atras:hover{color:var(--tinta)}
.sec-diagnostico .btn[disabled]{opacity:.35;pointer-events:none}

/* ---------- P7 ---------- */
.sec-diagnostico .dg-paso[data-paso="7"] .field{margin-bottom:14px}
.sec-diagnostico .dg-err{margin:-8px 0 14px;color:var(--rojo);font-size:var(--fs-small);line-height:1.4}
.sec-diagnostico .input.is-bad{border-color:var(--rojo)}
.sec-diagnostico .dg-enviar{width:100%;margin-top:10px}
.sec-diagnostico .dg-legal{margin:14px 0 0;color:var(--gris);line-height:1.5;font-size:11.5px}
.sec-diagnostico .dg-legal a{color:var(--gris);text-decoration-color:var(--linea-fuerte)}
.sec-diagnostico .dg-legal a:hover{color:var(--tinta)}
@media (min-width:620px){.sec-diagnostico .dg-enviar{width:auto;min-width:320px;align-self:flex-start}}

/* ---------- cargando ---------- */
.sec-diagnostico .dg-cargando{justify-content:center}
.sec-diagnostico .dg-load{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:16px}
.sec-diagnostico .dg-l{display:flex;align-items:center;gap:14px;font-family:var(--fm);font-size:13px;letter-spacing:.03em;color:var(--linea-fuerte);transition:color .3s}
.sec-diagnostico .dg-mark{width:16px;height:16px;flex:none;position:relative;display:block}
.sec-diagnostico .dg-l.is-wait .dg-mark::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--linea-fuerte)}
.sec-diagnostico .dg-l.is-run{color:var(--tinta-cuerpo)}
.sec-diagnostico .dg-l.is-run .dg-mark::before{content:"";position:absolute;inset:0;border:1.5px solid var(--linea);border-top-color:var(--ambar);border-radius:50%;animation:dg-spin .72s linear infinite}
.sec-diagnostico .dg-l.is-done{color:var(--tinta)}
.sec-diagnostico .dg-l.is-done .dg-mark::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:6px;border-left:1.5px solid var(--verde);border-bottom:1.5px solid var(--verde);transform:rotate(-45deg)}
@keyframes dg-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sec-diagnostico .dg-l.is-run .dg-mark::before{animation:none;border-color:var(--ambar)}}

/* ---------- resultado ---------- */
.sec-diagnostico .dg-res{margin-top:0}
.sec-diagnostico .dg-res-t{font-family:var(--fd);font-variation-settings:'SOFT' 0,'WONK' 0;font-weight:600;color:var(--tinta);letter-spacing:-.02em;line-height:1.04;font-size:clamp(36px,5.6vw,64px);margin:0 0 clamp(24px,3.4vw,34px);outline:0}
.sec-diagnostico .diag{max-width:540px}
.sec-diagnostico .diag h3{font-size:clamp(19px,1.8vw,23px);margin:0 0 14px;padding-top:18px;border-top:2px solid var(--tinta)}
.sec-diagnostico .diag h3+*{margin-top:0}
.sec-diagnostico .diag>*+h3{margin-top:clamp(32px,3.8vw,44px)}
.sec-diagnostico .diag h4{margin:22px 0 8px}
.sec-diagnostico .diag p{margin:0 0 .95em}
.sec-diagnostico .diag ul,.sec-diagnostico .diag ol{margin:0 0 .95em;padding-left:0;list-style:none}
.sec-diagnostico .diag li{position:relative;padding-left:26px;margin-bottom:9px}
.sec-diagnostico .diag li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:1.5px;background:var(--linea-fuerte)}
.sec-diagnostico .diag .disclaimer{margin-top:16px}

.sec-diagnostico .dg-res-cta{margin-top:clamp(30px,4vw,40px);display:grid;gap:18px;justify-items:start}
.sec-diagnostico .dg-res-cta .btn{width:100%;justify-content:center}
@media (min-width:620px){.sec-diagnostico .dg-res-cta .btn{width:auto;min-width:320px}}
.sec-diagnostico .dg-link{font-family:var(--fm);font-size:var(--fs-mono);letter-spacing:.05em;color:var(--gris);text-decoration:underline;text-decoration-color:var(--linea-fuerte);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.sec-diagnostico .dg-link:hover{color:var(--tinta)}
.sec-diagnostico .dg-rehacer{margin-top:clamp(26px,3.4vw,34px);min-height:44px;font-family:var(--fm);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);display:inline-flex;align-items:center;gap:9px}
.sec-diagnostico .dg-rehacer::before{content:"";width:16px;height:1.5px;background:currentColor;flex:none}
.sec-diagnostico .dg-rehacer:hover{color:var(--tinta)}

/* ---------- bloque de escape ---------- */
.sec-diagnostico .dg-aside{margin-top:clamp(34px,4.6vw,52px);max-width:540px;display:grid;gap:12px;justify-items:start}
.sec-diagnostico .dg-aside-t{font-size:clamp(19px,1.8vw,22px);margin:0}
.sec-diagnostico .dg-aside p{max-width:52ch;margin:0}