/* ed-test: hoja de sección del sistema editorial (ver DESIGN.md)
   TEST («Análisis de tu piel») y su RESULTADO. Solo aspecto: no toca la lógica de app.js.
   Se enlaza tras editorial.css, pero test-d.css se carga al final del <body>: por eso todo va con
   «html body #app …» (el id gana a los selectores antiguos sin necesidad de !important).
   !important solo donde hay que ganar a la regla global de radios o a un estilo en línea.
   Idea: el usuario responde a Hugo, no configura una app. Reglas de 1 px, serif para lo que se lee
   en grande, mono para el dato, cobalto solo como marca de lo elegido. */

html body:not(#_){--t-card:transparent;--t-on-acc:var(--d-bg);--t-err:var(--d-warn);--t-borde:var(--d-ink-3)}

/* ───────── Columna común ───────── */
html body #app .t-col,
html body #app .t-col.t-ancho,
html body #app .t-col.t-ancho-test,
html body #app .container,
html body #app .container.res-cuerpo,
html body #app .res-hero .container{max-width:calc(var(--a-amplio) + 2 * var(--gutter));padding-inline:var(--gutter);margin-inline:auto}
html body.modo-test #app{min-height:72vh}

/* ───────── Botones del test: tinta, rectos ───────── */
html body #app .t-btn,
html body #app .compra-btn{min-height:52px;border:1px solid var(--d-ink);background:var(--d-ink);color:var(--d-bg);font-family:var(--ed-sans);font-weight:600;font-size:var(--t-small);letter-spacing:0;border-radius:2px!important;transition:background-color .18s,border-color .18s,transform .12s ease-out}
html body #app .t-btn:active,
html body #app .t-btn[aria-busy="true"]{background:var(--d-acc);border-color:var(--d-acc)}
html body #app .t-link{min-height:48px;padding:0 2px;border-radius:0!important;font-weight:600;font-size:var(--t-small);color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-acc);text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .18s}
html body #app .t-link.gris{color:var(--d-ink-2);text-decoration-color:var(--d-line)}
html body #app .t-link svg{width:16px;height:16px}
@media (hover:hover){
  html body #app .t-btn:hover,
  html body #app .compra-btn:hover{background:var(--d-acc);border-color:var(--d-acc);color:var(--d-bg)}
  html body #app .t-link:hover{color:var(--d-acc);text-decoration-color:var(--d-acc)}
}

/* ═════════ PORTADA DEL TEST ═════════ */
html body #app .t-inicio{padding-block:var(--sp-lg) 0}
html body #app .t-ceja{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2);margin:0 0 var(--sp-md)}
html body #app .t-inicio h1{font-size:var(--t-h1);line-height:.98;max-width:13ch;color:var(--d-ink)}
html body #app .t-inicio .t-lede{margin-top:var(--sp-md);font-size:var(--t-lead);line-height:1.42;color:var(--d-ink-2);max-width:36ch}
html body #app .t-viene{margin-top:var(--sp-md);padding:12px 0 0;background:none;border-top:1px solid var(--d-line);font-size:var(--t-cap);line-height:1.5;color:var(--d-ink-2);max-width:52ch}

/* los cuatro datos: lista numerada con reglas, sin iconos */
html body #app .t-confia{margin-top:var(--sp-lg);border-top:1px solid var(--ed-regla);counter-reset:dato}
html body #app .t-confia li{counter-increment:dato;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:0;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--d-line);font-size:var(--t-body);line-height:1.45;color:var(--d-ink-2)}
html body #app .t-confia li::before{content:counter(dato,decimal-leading-zero);font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;color:var(--d-ink-3)}
html body #app .t-confia svg{display:none}
html body #app .t-confia b{color:var(--d-ink)}

html body #app .t-firma{gap:14px;margin-top:var(--sp-md);align-items:center}
html body #app .t-firma img{width:56px;height:56px;border-radius:0!important;filter:grayscale(.15)}
html body #app .t-firma p{font-size:var(--t-cap);line-height:1.4;color:var(--d-ink-2)}
html body #app .t-firma p b{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-lead);letter-spacing:-.01em;color:var(--d-ink)}
html body #app .t-arranque{margin-top:var(--sp-md);gap:4px;justify-items:start}
html body #app .t-arranque .t-btn{min-height:56px;font-size:var(--t-small)}

/* «Así se ve tu resultado»: una página de cuaderno, no una tarjeta */
html body #app .t-ejemplo{display:block;margin-top:var(--sp-sec);background:none;border:0;border-top:1px solid var(--ed-regla);padding:14px 0 0}
html body #app .te-tit{display:block;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);line-height:1.1;letter-spacing:-.02em;color:var(--d-ink)}
html body #app .te-tit span{display:block;margin-top:8px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-3)}
html body #app .te-paso{display:grid;grid-template-columns:minmax(6.5rem,3fr) minmax(0,9fr);column-gap:16px;align-items:baseline;margin-top:var(--sp-sm);padding-top:14px;border-top:1px solid var(--d-line)}
html body #app .te-paso>*{grid-column:2}
html body #app .te-paso>.te-h{grid-column:1;grid-row:1 / span 3;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-3)}
html body #app .te-chips{display:block;margin:0;font-size:var(--t-body);line-height:1.5;color:var(--d-ink)}
html body #app .te-chips span{padding:0;border:0;background:none;font-size:inherit;font-weight:500;color:inherit}
html body #app .te-chips span+span::before{content:" · ";color:var(--d-ink-3)}
html body #app .te-fila{display:block;margin:0}
html body #app .te-fila b{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);line-height:1.1;letter-spacing:-.02em;color:var(--d-ink)}
html body #app .te-p{margin-top:6px;font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2)}
html body #app .te-rut{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md);margin:0}
html body #app .te-rut b{font-family:var(--ed-sans);font-size:var(--t-small);font-weight:600;color:var(--d-ink)}
html body #app .te-rut ol{list-style:none;margin:8px 0 0;padding:0;counter-reset:te;font-size:var(--t-small);line-height:1.4;color:var(--d-ink-2)}
html body #app .te-rut li{counter-increment:te;display:grid;grid-template-columns:1.5rem 1fr;padding:6px 0;border-top:1px solid var(--d-line)}
html body #app .te-rut li::before{content:counter(te);font-family:var(--ed-mono);font-size:var(--t-meta);color:var(--d-ink-3);padding-top:.15em}

/* los tres mensajes: texto con regla, a dos columnas desiguales; nunca tres tarjetas */
html body #app .t-promesas{display:block;margin:var(--sp-sec) 0 0;border-top:1px solid var(--ed-regla)}
html body #app .t-promesas li{padding:var(--sp-md) 0;border-bottom:1px solid var(--d-line)}
html body #app .t-promesas :is(h2,h3){font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);line-height:1.08;letter-spacing:-.02em;color:var(--d-ink);text-wrap:balance}
html body #app .t-promesas p{margin-top:10px;font-size:var(--t-body);line-height:1.55;color:var(--d-ink-2);max-width:58ch}
html body #app #ordenIntro{margin-top:var(--sp-sec)!important}

@media (min-width:1024px){
  html body #app .t-intro-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-lg) clamp(40px,6vw,104px);align-items:start}
  html body #app .t-ejemplo{margin-top:calc(var(--t-meta) * 1.6 + var(--sp-md))}
  html body #app .t-promesas li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,88px);align-items:baseline}
  html body #app .t-promesas p{margin-top:0}
}

/* «Cómo elijo los productos»: una tabla de pesos, sin barras gruesas ni bloque oscuro */
html body #app .orden{background:none;padding:0;max-width:880px}
html body #app .orden h2{font-size:var(--t-h3);line-height:1.08}
html body #app .peso{margin-top:0;padding:14px 0;border-top:1px solid var(--d-line)}
html body #app .orden .peso:first-of-type{border-top-color:var(--ed-regla);margin-top:var(--sp-sm)}
html body #app .peso-h{font-weight:600;font-size:var(--t-body);color:var(--d-ink);align-items:baseline}
html body #app .peso-h span{font-family:var(--ed-mono);font-weight:500;font-size:var(--t-meta);color:var(--d-acc)}
html body #app .peso-bar{height:2px;margin-top:9px;background:var(--d-line)}
html body #app .peso-bar i{background:var(--d-ink)}
html body #app .peso p{font-size:var(--t-cap);line-height:1.5;color:var(--d-ink-2);max-width:70ch}
html body #app .cero{margin-top:0;background:none;color:var(--d-ink);padding:var(--sp-sm) 0 0;border-top:1px solid var(--ed-regla)}
html body #app .cero h3{font-family:var(--ed-sans);font-size:var(--t-body);color:var(--d-ink)}
html body #app .cero h3 b{font-family:var(--ed-mono);font-weight:500;color:var(--d-acc)}
html body #app .cero p{color:var(--d-ink-2);font-size:var(--t-small);line-height:1.55;max-width:70ch}

/* ═════════ PREGUNTAS ═════════ */
/* progreso: una sola línea fina de tinta */
html body #app .q-top{background:var(--d-bg);padding-block:0 12px}
html body #app .t-tramos{gap:0}
html body #app .t-tramos i,
html body #app .q-top .t-tramos i{height:2px;background:var(--d-line)}
html body #app .t-tramos i b{background:var(--d-ink)}
html body #app .t-prog-txt{margin-top:12px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-3)}
html body #app .t-prog-txt b{font-weight:500;color:var(--d-ink)}

html body #app .pregunta{padding-block:var(--sp-lg) var(--sp-xl)}
html body #app .pregunta :is(h1,h2){font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.025em;color:var(--d-ink);max-width:22ch;text-wrap:balance}
html body #app .q-nota{display:block;margin-top:var(--sp-sm);padding:10px 0 0;border:0;border-top:1px solid var(--d-line);font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2);max-width:56ch}
html body #app .q-nota svg{display:none}
html body #app .q-nota b{font-weight:600;color:var(--d-ink)}
html body #app .q-pista{margin-top:14px;font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2);max-width:56ch}
html body #app .q-nota+.q-pista{margin-top:8px}

/* respuestas: rectángulos sobrios de 1 px. Elegida = borde de tinta + marca cobalto */
html body #app fieldset.opts{margin-top:var(--sp-md);gap:8px}
html body #app .opt{min-height:56px;padding:14px 16px;gap:14px;border:1px solid var(--d-line);background:transparent;font-family:var(--ed-sans);font-size:var(--t-body);font-weight:500;line-height:1.3;color:var(--d-ink);transition:border-color .16s ease,background-color .16s ease}
html body #app .opt .t-op small{margin-top:3px;font-size:var(--t-cap);font-weight:400;line-height:1.4;color:var(--d-ink-2)}
html body #app .opt .marca{flex:0 0 22px;width:22px;height:22px;border:1.5px solid var(--d-ink-3);background:transparent;transition:background-color .16s ease,border-color .16s ease}
html body #app .opt:not(.multi) .marca{border-radius:50%!important}
html body #app .opt.multi .marca{border-radius:2px!important}
html body #app .opt .marca svg{color:var(--d-bg)}
html body #app .opt.on{border-color:var(--d-ink);background:var(--ed-papel);color:var(--d-ink)}
html body #app .opt.on .marca{border-color:var(--d-acc);background:var(--d-acc)}
html body #app .opt:active{background:var(--ed-papel-2)}
html body #app .opt:focus-within{border-color:var(--d-ink);outline:2px solid var(--d-acc);outline-offset:2px}
@media (hover:hover){html body #app .opt:not(.on):hover{border-color:var(--d-ink-3)}}
html body #app .opt .tono,
html body #app .tp-tono{border-radius:50%!important;border:1px solid var(--d-line)}
html body #app .t-dib .zona{fill:var(--d-acc);fill-opacity:.28}
html body #app .t-dib .rojo{stroke:var(--d-warn)}
html body #app .t-err{margin-top:10px;font-size:var(--t-small);font-weight:600;color:var(--d-warn)}
html body #app .q-acciones{margin-top:var(--sp-md)}
html body #app .q-acciones .t-btn{min-width:168px}

/* ───────── Lo que voy viendo: nota al margen ───────── */
html body #app .tp-caja{background:none;border:0;border-top:1px solid var(--ed-regla);padding:12px 0 0}
html body #app .tp-caja+.tp-caja{margin-top:var(--sp-md)}
html body #app .tp-tit{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink)}
html body #app .tp-sub{margin-top:var(--sp-md);font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-3)}
html body #app .tp-vacio{margin-top:10px;font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2)}
html body #app .tp-l{margin-top:8px;gap:0}
html body #app .tp-it,
html body #app .tp-l .tp-it:first-child{padding:10px 0;gap:12px;align-items:baseline;background:none;border:0;border-top:1px solid var(--d-line);font-family:var(--ed-serif);font-size:var(--t-lead);font-weight:400;line-height:1.18;letter-spacing:-.012em;color:var(--d-ink)}
html body #app .tp-it small{margin-top:4px;font-family:var(--ed-sans);font-size:var(--t-cap);font-weight:400;letter-spacing:0;line-height:1.35;color:var(--d-ink-2)}
html body #app .tp-it small mark{background:none;padding:0;margin:0;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-acc)}
html body #app .tp-n{flex:0 0 1.4rem;height:auto;display:block;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;color:var(--d-acc)}
html body #app .tp-n.ico{color:var(--d-ink-3)}
html body #app .tp-n .ic{width:15px;height:15px;transform:translateY(2px)}
html body #app .tp-flash{background:var(--d-acc-soft)}
html body #app .tp-evita{margin-top:8px;font-size:var(--t-small);line-height:1.5;color:var(--d-ink)}
html body #app .tp-msj,
html body #app .tp-noafina,
html body #app .tp-motivo{margin-top:16px;padding:10px 0 0;background:none;border:0;border-top:1px solid var(--d-line);font-size:var(--t-cap);line-height:1.5;color:var(--d-ink-2)}
html body #app .tp-motivo b{font-weight:600;color:var(--d-ink)}
html body #app .tp-noafina .ic{display:none}
html body #app .tp-nota,
html body #app .tp-vivo .tp-nota{margin-top:14px;font-family:var(--ed-mono);font-size:var(--t-meta);line-height:1.5;letter-spacing:.02em;color:var(--d-ink-3)}
/* lo ya respondido: una lista de enlaces, no píldoras */
html body #app .tp-resp{margin-top:10px;gap:0 18px}
html body #app .tp-r{min-height:34px;padding:4px 0;border:0;background:none;font-family:var(--ed-sans);font-size:var(--t-cap);font-weight:500;color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-line);text-decoration-thickness:1px;text-underline-offset:.3em}
@media (hover:hover){html body #app .tp-r:hover{color:var(--d-acc);text-decoration-color:var(--d-acc)}}
html body #app .tp-ayuda{justify-items:start;text-align:left;padding:12px 0 0}
html body #app .tp-ayuda-dib{width:120px;height:136px;place-items:start}
html body #app .tp-ayuda-txt{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-lead);line-height:1.2;color:var(--d-ink)}

/* móvil: la franja es una línea entre reglas; al abrirse empuja la pregunta */
html body #app .t-tira{margin-top:10px;min-height:48px;padding:6px 0;gap:10px;border:0;border-block:1px solid var(--d-line);background:none;font-family:var(--ed-sans);font-size:var(--t-cap);color:var(--d-ink)}
html body #app .t-tira[aria-expanded="true"]{border-bottom-color:transparent}
html body #app .tt-chips{gap:8px;align-items:baseline}
html body #app .tt-chip{padding:0;background:none;border:0;font-weight:600;color:var(--d-ink)}
html body #app .tt-chip.mas{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;color:var(--d-ink-3)}
html body #app .tt-n{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-acc)}
html body #app .tt-fl{color:var(--d-ink)}
html body #app .t-tira-mas{margin-top:0;padding:4px 0 var(--sp-sm);border:0;border-bottom:1px solid var(--ed-regla);background:none}
@media (hover:hover){html body #app .t-tira:hover{border-color:var(--d-ink)}}

@media (min-width:1024px){
  html body #app .t-grid{grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:var(--sp-lg) clamp(48px,7vw,120px)}
  html body #app .pregunta{max-width:800px}
  html body #app .t-panel{top:64px;max-height:calc(100vh - 64px);padding-top:var(--sp-lg)}
  html body #app .opt{min-height:60px}
}

/* ───────── Email ───────── */
html body #app .t-email form{max-width:600px}
html body #app .t-email label.t-l{margin-top:var(--sp-md);font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body #app .t-email label.t-l i{color:var(--d-ink-3)}
html body #app .t-email input.t-campo{margin-top:2px;min-height:52px;padding:0;border:0;border-bottom:1px solid var(--d-ink);border-radius:0!important;background:transparent;font-family:var(--ed-sans);font-size:var(--t-body);color:var(--d-ink)}
html body #app .t-email input.t-campo:focus{outline:0;border-bottom:2px solid var(--d-acc)}
html body #app .t-email input.t-campo:focus-visible{outline:0;border-bottom:2px solid var(--d-acc)}
html body #app .t-email input.t-campo[aria-invalid="true"]{border-bottom-color:var(--d-warn)}
html body #app .t-casilla{gap:14px;margin-top:var(--sp-md);min-height:48px;font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2)}
html body #app .t-email label.t-l+input+.t-err+label.t-l{margin-top:var(--sp-md)}
html body #app form .t-casilla:first-of-type{margin-top:var(--sp-md)}
html body #app .t-casilla .marca{flex:0 0 22px;width:22px;height:22px;margin-top:2px;border:1.5px solid var(--d-ink-3);border-radius:2px!important;background:transparent}
html body #app .t-casilla .marca::after{border-color:var(--d-bg)}
html body #app .t-casilla input:checked+.marca{background:var(--d-acc);border-color:var(--d-acc)}
html body #app .t-casilla a{color:var(--d-ink);font-weight:600;text-decoration-color:var(--d-acc)}

/* ───────── Analizando ───────── */
html body #app .t-analiza{padding-block:var(--sp-2xl) var(--sp-lg)}
html body #app .t-analiza h2{font-family:var(--ed-serif);font-size:var(--t-h2);line-height:1.04}
html body #app .t-pasos{margin-top:var(--sp-md);gap:0;max-width:520px;border-top:1px solid var(--ed-regla)}
html body #app .t-pasos li{padding:14px 0;border-bottom:1px solid var(--d-line);font-size:var(--t-body)}
html body #app .t-pasos .m{flex:0 0 22px;width:22px;height:22px;border-width:1.5px;border-radius:50%!important;color:var(--d-bg)}

/* ═════════ RESULTADO ═════════ */
/* cabecera: papel y serif, no un bloque oscuro */
html body #app .res-hero{background:none;color:var(--d-ink);padding-block:var(--sp-lg) 0;overflow:visible}
html body #app .res-hero .label{display:block;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body #app .res-hero h1{margin-top:var(--sp-sm);font-size:var(--t-h1);line-height:.98;max-width:16ch;color:var(--d-ink)}
html body #app .res-perfil{margin-top:var(--sp-lg);gap:0;max-width:820px;border-top:1px solid var(--ed-regla)}
html body #app .res-perfil>div{display:grid;grid-template-columns:minmax(6.5rem,3fr) minmax(0,9fr);column-gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--d-line)}
html body #app .res-perfil dt{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-3)}
html body #app .res-perfil dd{margin:0}
html body #app .res-perfil .chips-perfil{display:block;margin:0;font-size:var(--t-body);line-height:1.45;color:var(--d-ink)}
html body #app .chip-perfil.fijo{display:inline;padding:0;border:0;background:none;font-size:inherit;font-weight:500;color:inherit}
html body #app .chip-perfil.fijo .ic{display:none}
html body #app .chip-perfil.fijo+.chip-perfil.fijo::before{content:" · ";color:var(--d-ink-3)}
html body #app .res-hero .btn-editar{margin-top:var(--sp-md);min-height:48px;padding:0;border:0;border-radius:0!important;background:none;opacity:1;font-family:var(--ed-sans);font-size:var(--t-small);font-weight:600;color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-acc);text-decoration-thickness:1px;text-underline-offset:.3em}
html body #app .res-hero .btn-editar .ic{color:var(--d-ink-3)}
@media (hover:hover){html body #app .res-hero .btn-editar:hover{background:none;color:var(--d-acc)}}
html body #app #cambiar{max-width:820px;margin-top:0;padding:14px 0 4px;border-top:1px solid var(--d-line)}
html body #app .pista-editar{margin-top:0;font-size:var(--t-small);color:var(--d-ink-2)}
html body #app #cambiar .chips-perfil{gap:8px;margin-top:14px}
html body #app #cambiar .chip-perfil{min-height:44px;padding:8px 14px;border:1px solid var(--d-line);border-radius:2px!important;background:transparent;font-family:var(--ed-sans);font-size:var(--t-small);font-weight:500;color:var(--d-ink);opacity:1;transition:border-color .16s,color .16s}
html body #app #cambiar .chip-perfil .ic{color:var(--d-ink-3)}
@media (hover:hover){
  html body #app #cambiar .chip-perfil:not([disabled]):hover{background:transparent;border-color:var(--d-ink);color:var(--d-ink)}
  html body #app #cambiar .chip-perfil:not([disabled]):hover .ic{color:var(--d-acc)}
}
html body #app .enviado{margin-top:14px;font-family:var(--ed-mono);font-size:var(--t-meta);letter-spacing:.02em;color:var(--d-ink-2)}
html body #app .enviado .ic{color:var(--d-acc)}

html body #app .cuerpo{padding-block:var(--sp-xl) 0}
html body #app .res-cuerpo>.stack{gap:var(--sp-xl)}

/* avisos: nota con regla; el color de aviso solo en el rótulo */
html body #app .aviso-top,
html body #app .aviso-top.urgente{display:block;max-width:820px;padding:14px 0 0;background:none;border:0;border-top:1px solid var(--ed-regla);color:var(--d-ink)}
html body #app .aviso-top.urgente{border-top:2px solid var(--d-warn)}
html body #app .aviso-top .ic{display:none}
html body #app .aviso-top p{font-size:var(--t-body);line-height:1.55;color:var(--d-ink-2);max-width:66ch}
html body #app .aviso-top p:first-child{color:var(--d-ink)}
html body #app .aviso-top p:first-child b{display:block;margin-bottom:4px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-warn)}
html body #app .aviso{padding:14px 0 0;background:none;border:0;border-top:1px solid var(--ed-regla)}
html body #app .aviso h3{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);line-height:1.1;letter-spacing:-.02em;margin-bottom:12px}
html body #app .aviso p{font-size:var(--t-body);line-height:1.6;color:var(--d-ink-2);max-width:66ch}
html body #app .plegable .aviso{border-top-color:var(--d-line);padding-top:12px}
html body #app .plegable .aviso p{font-size:var(--t-small)}

/* bloques numerados */
html body #app .res-grid{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-xl)}
html body #app .res-grid .res-izq,
html body #app .res-grid .res-der{display:contents}
html body #app .bloque{padding-top:16px;border-top:1px solid var(--ed-regla);min-width:0}
html body #app .bloque-h{display:block;margin:0 0 var(--sp-md);font-size:var(--t-h3);line-height:1.06;max-width:18ch}
html body #app .bloque-n{display:block;margin-bottom:12px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;color:var(--d-acc)}
html body #app .bloque>p{max-width:64ch}
html body #app .perfil-orden,
html body #app .no-nota,
html body #app .sem-intro,
html body #app .op-nota,
html body #app .alt-aviso{font-size:var(--t-small);line-height:1.55;color:var(--d-ink-2);max-width:64ch}
html body #app .sem-intro{font-size:var(--t-body);margin-bottom:6px}
html body #app .rut-min{font-size:var(--t-body);color:var(--d-ink)}
@media (min-width:1024px){
  /* 4 + 8: el título queda al margen, el contenido en la columna ancha */
  html body #app .bloque{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,4vw,64px);align-items:start}
  html body #app .bloque>*{grid-column:2;min-width:0}
  html body #app .bloque>.bloque-h{grid-column:1;grid-row:1 / span 12;margin-bottom:0;padding-right:8px}
  html body #app .bloque>:nth-child(2){margin-top:4px}
  html body #app .res-cuerpo>.stack>details,
  html body #app .res-cuerpo>.stack>.pie,
  html body #app .res-cuerpo>.stack>div:last-child{max-width:none;margin-left:calc((100% - clamp(32px,4vw,64px)) / 3 + clamp(32px,4vw,64px))}
}

/* prioridades */
html body #app .perfil{gap:0;counter-reset:prio}
html body #app .perfil li{grid-template-columns:2.6rem minmax(0,1fr);gap:0;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--d-line)}
html body #app .perfil li:first-child{padding-top:0}
html body #app .perfil-n{width:auto;height:auto;display:block;background:none;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;color:var(--d-acc)}
html body #app .perfil-n::before{content:"0"}
html body #app .perfil b{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-lead);line-height:1.12;letter-spacing:-.018em;color:var(--d-ink)}
html body #app .perfil-1{display:block;margin:6px 0 0;padding:0;background:none;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-acc)}
html body #app .perfil p{margin-top:6px;font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2)}

/* opciones: ingredientes como texto con jerarquía, no tarjetas */
html body #app .ops{gap:0 clamp(28px,4vw,56px);margin-top:var(--sp-md)}
html body #app .op{padding:var(--sp-sm) 0 var(--sp-md);gap:4px;background:none;border:0;border-top:1px solid var(--d-line);color:var(--d-ink)}
html body #app .op-prioridad{border-top:1px solid var(--ed-regla)}
html body #app .op-cab{gap:12px;align-items:baseline}
html body #app .op-n{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;color:var(--d-ink-3)}
html body #app .op-papel,
html body #app .op-prioridad .op-papel,
html body #app .op-siguiente .op-papel{padding:0;border:0;background:none;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body #app .op-prioridad .op-papel{color:var(--d-acc)}
html body #app .op h3{margin-top:8px;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);line-height:1.04;letter-spacing:-.022em}
html body #app .op-prioridad h3{font-size:var(--t-h2)}
html body #app .op-l{margin-top:14px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-3)}
html body #app .op p:not(.op-l):not(.op-cab):not(.op-obj){font-size:var(--t-body);line-height:1.5;color:var(--d-ink-2);max-width:60ch}
html body #app .op-obj{display:block;font-size:var(--t-body);line-height:1.5;color:var(--d-ink)}
html body #app .op-obj span,
html body #app .rp-fun span{padding:0;border:0;background:none;font-size:inherit;font-weight:500;color:inherit}
html body #app .op-obj span+span::before,
html body #app .rp-fun span+span::before{content:" · ";color:var(--d-ink-3)}
html body #app .op-ficha{margin-top:10px;min-height:44px;font-size:var(--t-small);font-weight:600;color:var(--d-ink);text-decoration-color:var(--d-acc);text-decoration-thickness:1px}
@media (hover:hover){html body #app .op-ficha:hover{color:var(--d-acc)}}
html body #app .op-matriz{margin-top:8px;border-top:1px solid var(--ed-regla);border-bottom:1px solid var(--ed-regla)}
html body #app .op-matriz thead th,
html body #app .sem thead th{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--d-ink-3)}
html body #app .op-matriz tbody th{font-weight:600}
html body #app .op-matriz tbody th small{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--d-ink-3)}
html body #app .op-matriz td.si{color:var(--d-acc)}

/* mi prioridad: la frase grande del resultado (aquí vive el único rotulador) */
html body #app .prio-g{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.025em;max-width:16ch;text-wrap:balance}
html body #app .prio-luego,
html body #app .sem-esc{margin-top:var(--sp-md);padding:14px 0 0;background:none;border-top:1px solid var(--d-line);color:var(--d-ink)}
html body #app .prio-luego h3,
html body #app .sem-esc h3{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body #app .prio-luego ul{list-style:none;padding:0;margin-top:6px;gap:0;font-size:var(--t-body);line-height:1.5;color:var(--d-ink-2)}
html body #app .prio-luego li{padding:10px 0;border-bottom:1px solid var(--d-line);max-width:64ch}
html body #app .prio-luego li b{color:var(--d-ink)}
html body #app .sem-esc p{font-size:var(--t-body);line-height:1.55;color:var(--d-ink-2);max-width:64ch}

/* rutina: dos listas con regla */
html body #app .momentos{gap:var(--sp-md) clamp(28px,4vw,56px);margin-bottom:var(--sp-md)}
html body #app .momento-c{padding:12px 0 0;background:none;border-top:1px solid var(--ed-regla)}
html body #app .momento-c h3{margin-bottom:4px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink)}
html body #app .momento-c h3 .ic{width:15px;height:15px;color:var(--d-ink-3)}
html body #app .pasos2{gap:0}
html body #app .pasos2 li{grid-template-columns:2.2rem minmax(0,1fr);column-gap:0;padding:13px 0;border-bottom:1px solid var(--d-line)}
html body #app .pasos2 li::before{content:counter(paso,decimal-leading-zero);font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;color:var(--d-ink-3);padding-top:.1em}
html body #app .pasos2 .paso-nom{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;color:var(--d-ink-3)}
html body #app .pasos2 .paso-nom small{font-weight:500;color:var(--d-acc)}
html body #app .pasos2 .paso-nom small.luego{color:var(--d-ink-3)}
html body #app .pasos2 .paso-prod{margin-top:3px;font-size:var(--t-body);font-weight:600;line-height:1.3;color:var(--d-ink)}
html body #app .pasos2 .paso-ing{font-size:var(--t-cap);line-height:1.45;color:var(--d-ink-2)}
html body #app .plegable{padding:14px 0 0;background:none;border-top:1px solid var(--d-line)}
html body #app .plegable>summary{min-height:44px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:var(--t-small);color:var(--d-ink);border-radius:0!important;list-style:none}
html body #app .plegable>summary::-webkit-details-marker{display:none}
html body #app .plegable>summary::before{content:"+";font-family:var(--ed-mono);font-weight:400;color:var(--d-acc);width:1ch}
html body #app .plegable[open]>summary::before{content:"−"}

/* la semana: tabla sobria */
html body #app .sem-caja{margin-top:16px;border-top:1px solid var(--ed-regla);border-bottom:1px solid var(--ed-regla)}
html body #app .sem tbody th{font-weight:500;color:var(--d-ink)}
html body #app .sem tr.trat th{font-weight:600;color:var(--d-ink)}
html body #app .sem td i{width:5px;height:5px;border-radius:50%!important;background:var(--d-ink-3)}
html body #app .sem tr.trat td.si,
html body #app .sem tr.trat:not(.diario) td.si{background:none}
html body #app .sem tr.trat td.si i{width:13px;height:13px;background:var(--d-acc)}
html body #app .sem-am{margin-top:14px;font-size:var(--t-body);color:var(--d-ink-2)}
html body #app .sem-am b{color:var(--d-ink)}
html body #app .sem-am .ic{display:none}

/* listas de razones e ingredientes */
html body #app .tenido{gap:0;border-top:1px solid var(--d-line)}
html body #app .tenido li{gap:12px;padding:12px 0;border-bottom:1px solid var(--d-line);font-size:var(--t-body);line-height:1.5;max-width:none}
html body #app .tenido .ic{color:var(--d-acc);margin-top:.35em}
html body #app .lista-ing{gap:0}
html body #app .ing-fila{padding:14px 0;border-bottom:1px solid var(--d-line)}
html body #app .lista-ing .ing-fila:first-child{padding-top:0}
html body #app .ing-cab{gap:6px 14px}
html body #app .ing-cab b{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-lead);line-height:1.15;letter-spacing:-.015em;color:var(--d-ink)}
html body #app .ing-cab .op-ficha{margin-top:0;min-height:32px;font-size:var(--t-cap)}
html body #app .ing-fila p{margin-top:6px;font-size:var(--t-body);line-height:1.55;color:var(--d-ink-2);max-width:64ch}
html body #app .ing-fila.no .ing-cab b{font-family:var(--ed-sans);font-weight:600;font-size:var(--t-body);letter-spacing:0;line-height:1.35;text-decoration-color:var(--d-ink-3);text-decoration-thickness:1px}
html body #app .ing-dosis{padding:0;background:none;font-family:var(--ed-mono);font-size:var(--t-meta);color:var(--d-acc)}

/* productos: aquí sí hay tarjeta, pero plana */
html body #app .nota-afil{display:block;margin:0 0 var(--sp-md);padding:12px 0 0;background:none;border-top:1px solid var(--d-line);font-size:var(--t-small);line-height:1.55;color:var(--d-ink-2);max-width:66ch}
html body #app .nota-afil .ic{display:none}
html body #app .nota-afil b{color:var(--d-ink)}
html body #app .total{margin-bottom:var(--sp-md);font-size:var(--t-body);color:var(--d-ink-2)}
html body #app .total b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--d-ink)}
html body #app .bloque-prod .stack-sm{gap:16px}
html body #app .rp{padding:var(--sp-sm);background:transparent;border:1px solid var(--d-line)}
html body #app .rp-top{grid-template-columns:104px minmax(0,1fr);gap:var(--sp-sm);align-items:start}
html body #app .foto{width:104px;height:104px;background:#fff;border:1px solid var(--d-line)}
html body #app .foto.sin{background:var(--ed-papel-2);color:var(--d-ink-2);font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3)}
html body #app .foto.mini{width:64px;height:64px;font-size:var(--t-small)}
html body #app .rp-paso{display:block;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;color:var(--d-ink-3)}
html body #app .rp-reco{display:block;margin:4px 0 0;padding:0;background:none;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-acc)}
html body #app .rp-marca{margin-top:10px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink)}
html body #app .rp h3{margin-top:3px;font-family:var(--ed-sans);font-size:var(--t-body);font-weight:600;line-height:1.25;letter-spacing:-.005em;color:var(--d-ink)}
html body #app .alt-precio{margin-top:4px;font-size:var(--t-cap);font-weight:400;line-height:1.45;color:var(--d-ink-2)}
html body #app .rp-lleva{margin-top:6px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:400;letter-spacing:0;color:var(--d-ink-2)}
html body #app .rp-porque{margin-top:16px;padding-top:14px;border-top:1px solid var(--d-line);font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2)}
html body #app .rp-porque b{font-weight:600;color:var(--d-ink)}
html body #app .rp-fun{display:block;margin-top:4px;font-family:var(--ed-mono);font-size:var(--t-meta);letter-spacing:.05em;text-transform:uppercase;line-height:1.6;color:var(--d-ink-3)}
html body #app .compra{margin-top:16px}
html body #app .compra-mas{margin-top:8px;font-size:var(--t-cap);color:var(--d-ink-2)}
html body #app .compra-link{min-height:44px;padding:0 6px;font-weight:600;color:var(--d-ink);text-decoration-color:var(--d-acc)}
@media (hover:hover){html body #app .compra-link:hover{color:var(--d-acc);text-decoration-thickness:1px}}
html body #app .sin-tienda{font-family:var(--ed-mono);font-size:var(--t-meta);color:var(--d-ink-3)}
html body #app .alts{margin-top:14px;padding-top:4px;border-top:1px solid var(--d-line)}
html body #app .alts>summary{min-height:44px;display:flex;align-items:center;gap:8px;font-size:var(--t-small);font-weight:600;color:var(--d-ink);border-radius:0!important;list-style:none}
html body #app .alts>summary::-webkit-details-marker{display:none}
html body #app .alts>summary::before{content:"+";font-family:var(--ed-mono);font-weight:400;color:var(--d-acc);width:1ch}
html body #app .alts[open]>summary::before{content:"−"}
html body #app .alt{padding:14px 0 4px;border-top:1px solid var(--d-line);gap:14px}
html body #app .alt-nom{font-weight:600;font-size:var(--t-small);color:var(--d-ink)}
html body #app .alt .rp-marca{margin-top:0}
/* «Esto no lo tengo todavía»: nota con regla, rótulo en color de aviso */
html body #app .rp.hueco-rp{background:transparent;border:1px solid var(--d-line);border-top:1px solid var(--d-warn)}
html body #app .rp-hueco{margin-top:10px;font-size:var(--t-body);line-height:1.55;color:var(--d-ink-2)}
html body #app .rp-hueco b{margin-bottom:6px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-warn)}
html body #app .rp-para{font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2)}
@media (min-width:1200px){
  html body #app .res-der .stack-sm:has(> .rp){display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
}
@media (max-width:420px){
  html body #app .rp-top{grid-template-columns:84px minmax(0,1fr);gap:14px}
  html body #app .foto:not(.mini){width:84px;height:84px}
}

html body #app .pie{font-size:var(--t-cap);line-height:1.55;color:var(--d-ink-2);max-width:66ch}
html body #app .t-peque-otra{margin-top:4px}

/* ───────── Móvil ───────── */
@media (max-width:1023px){
  html body #app .t-inicio h1{max-width:11ch}
  html body #app .t-arranque{justify-items:stretch}
  html body #app .t-arranque .t-link{justify-content:flex-start}
  html body #app .pregunta :is(h1,h2){max-width:none}
}
@media (max-width:640px){
  html body #app .te-paso,
  html body #app .res-perfil>div{grid-template-columns:1fr;row-gap:6px}
  html body #app .te-paso>*,
  html body #app .te-paso>.te-h{grid-column:1;grid-row:auto}
  html body #app .q-acciones .t-btn{min-width:140px}
  html body #app .bloque-h{max-width:none;font-size:var(--t-h3)}
}

@media (prefers-reduced-motion:reduce){
  html body #app .opt,html body #app .opt .marca,html body #app .t-btn,html body #app .t-link{transition:none}
}

/* Coherencia con el resto de la web: misma mancheta y mismo pie que las demás páginas (test-d.css se carga después) */
html body .hbp-top .logo b,html body .t-cromo .t-logo{font-family:var(--ed-serif)!important;font-weight:500!important;font-size:1.32rem!important;letter-spacing:-.02em!important}
html body .hbp-foot .about b{font-family:var(--ed-serif)!important;font-weight:500!important;font-size:1.5rem!important}
@media (max-width:640px){html body .hbp-top .logo b,html body .t-cromo .t-logo{font-size:1.18rem!important}}

/* ───────── Fase 3 · escala única ─────────
   Tablas del resultado: heredaban 14,7 y 16 px de resultado.css; pasan a la escala.
   Título de pregunta en móvil: un escalón menos (--t-h2-2) para que la pregunta más larga no pase de 3 líneas. */
html body #app :is(.op-matriz,.sem) :is(th,td){font-size:var(--t-small)}
html body #app :is(.op-matriz,.sem) thead th,
html body #app .op-matriz tbody th small{font-size:var(--t-meta)}
html body #app .muted{font-size:var(--t-small)}
@media (max-width:640px){html body #app .pregunta :is(h1,h2){font-size:var(--t-h2-2);text-wrap:pretty}}