:root{
  --fondo:#EDEAE4; --hoja:#FDFCFA; --tinta:#1A1817; --tinta-2:#5C5651; --tinta-3:#8C857D;
  --linea:#DAD5CC; --linea-2:#BFB8AE; --rojo:#B3271E; --rojo-s:#B3271E14;
  --ok:#2E7D5B; --ok-s:#2E7D5B14; --duda:#A8700E; --duda-s:#A8700E16;
  --sobre-rojo:#FDFCFA;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --fondo:#100F0E; --hoja:#1B1917; --tinta:#F0EBE3; --tinta-2:#A69E94; --tinta-3:#786F66;
    --linea:#332E29; --linea-2:#4A423B; --rojo:#E4685A; --rojo-s:#E4685A18;
    --ok:#4FB183; --ok-s:#4FB18318; --duda:#D4A22F; --duda-s:#D4A22F18;
    --sobre-rojo:#15120F;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--tinta);font-family:'Archivo',system-ui,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));}
main{max-width:640px;margin:0 auto}
h1,h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:1.1;margin:0}
h1{font-size:clamp(34px,8vw,46px)}
h1 em,h2 em{color:var(--rojo)}
h2{font-size:clamp(26px,6vw,34px)}
p{margin:0 0 12px}
.cargando{color:var(--tinta-3);text-align:center;padding-top:30vh}
.rotulo{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);display:block;margin-bottom:6px}
.suave{color:var(--tinta-2)}
.chico{font-size:13px;color:var(--tinta-3)}
.hoja{background:var(--hoja);border:1px solid var(--linea);border-radius:14px;padding:22px 18px}
.pila{display:flex;flex-direction:column;gap:14px}
.barra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;min-height:40px}
.barra .titulo{font-family:'Instrument Serif',Georgia,serif;font-size:22px}

/* botones */
button,.boton{font:inherit;font-weight:600;border-radius:10px;border:1px solid var(--linea-2);
  background:var(--hoja);color:var(--tinta);padding:12px 16px;cursor:pointer;min-height:46px}
button.primario{background:var(--rojo);border-color:var(--rojo);color:var(--sobre-rojo)}
button.fantasma{background:transparent;border-color:transparent;color:var(--tinta-2);padding:10px 8px}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
.acciones{display:flex;gap:10px;flex-wrap:wrap}
.acciones .crece{flex:1}

/* formularios */
label.campo{display:block;font-weight:600;margin-bottom:6px}
input[type=text],input[type=email],input[type=number],textarea{
  font:inherit;width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--linea-2);
  background:var(--fondo);color:var(--tinta)}
textarea{min-height:140px;resize:vertical;line-height:1.5}
.fila{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.fila input{flex:1}
.fila .quitar{min-height:44px;padding:0 12px}
.prefijo{color:var(--tinta-3);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font-weight:500}
.chips button[aria-pressed=true]{background:var(--rojo);border-color:var(--rojo);color:var(--sobre-rojo)}

/* lista de modulos */
.etapa{margin-top:22px}
.etapa h3{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;color:var(--tinta-2)}
.etapa h3 span{font-weight:400;text-transform:none;letter-spacing:0;color:var(--tinta-3)}
.modulo{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;width:100%;
  text-align:left;background:var(--hoja);border:1px solid var(--linea);border-radius:12px;padding:12px 14px;margin-bottom:8px;font-weight:400}
.modulo .num{font-weight:700;color:var(--rojo);font-variant-numeric:tabular-nums}
.modulo .nom{font-weight:600}
.modulo .sub{display:block;font-size:13px;color:var(--tinta-3)}
.estado{font-size:12px;font-weight:600;padding:4px 9px;border-radius:99px;white-space:nowrap;background:var(--fondo);color:var(--tinta-3)}
.estado.va{background:var(--duda-s);color:var(--duda)}
.estado.listo{background:var(--ok-s);color:var(--ok)}

/* pregunta */
.progreso{height:4px;background:var(--linea);border-radius:4px;overflow:hidden;margin-bottom:18px}
.progreso div{height:100%;background:var(--rojo);transition:width .25s}
.pregunta{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(25px,6vw,32px);line-height:1.15;margin:4px 0 8px}
.ayuda{color:var(--tinta-2);font-style:italic;margin-bottom:16px}
.pendiente-aviso{background:var(--duda-s);color:var(--duda);border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:12px}
.guardado{font-size:13px;color:var(--tinta-3);min-height:20px}
.aviso{border-left:3px solid var(--rojo);background:var(--rojo-s);padding:12px 14px;border-radius:0 10px 10px 0;color:var(--tinta-2)}
.aviso.verde{border-left-color:var(--ok);background:var(--ok-s)}
.aviso strong{color:var(--tinta)}
code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:var(--fondo);padding:1px 5px;border-radius:5px}

/* resumen */
.resp{border-top:1px solid var(--linea);padding:12px 0}
.resp:first-child{border-top:0;padding-top:0}
.resp .q{font-size:13px;color:var(--tinta-3);margin-bottom:3px}
.resp .v{white-space:pre-wrap}
.resp .v.falta{color:var(--duda);font-style:italic}
.resp ul{margin:0;padding-left:20px}
.grupo{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo);margin:16px 0 4px}
.aviso.duda{border-left-color:var(--duda);background:var(--duda-s)}
table.numeros{width:100%;border-collapse:collapse;font-size:15px}
table.numeros td{padding:7px 0;border-bottom:1px solid var(--linea);vertical-align:top}
table.numeros td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
table.numeros tr.sec td{border-bottom:0;padding-top:16px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo);text-align:left}
.ejemplos{border:1px dashed var(--linea-2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.ejemplos .rotulo{margin:0;color:var(--tinta-3)}
.ejemplo{display:flex;flex-direction:column;gap:2px;font-size:14.5px;color:var(--tinta-2)}
.ejemplo .giro{font-size:12px;font-weight:700;color:var(--tinta)}
.canal{flex:1;display:flex;flex-direction:column;gap:6px;border:1px solid var(--linea);border-radius:10px;padding:8px}
.canal-nums{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.canal-nums input{min-width:0}
.canal-num{display:flex;flex-direction:column;gap:2px;min-width:0}
.canal-num span{font-size:11.5px;color:var(--tinta-3);font-weight:600}
.embudo{display:flex;flex-direction:column;gap:10px}
.embudo-paso{display:flex;flex-direction:column;gap:3px}
.embudo-barra{height:10px;border-radius:5px;background:var(--rojo);opacity:.55}
.embudo-barra.cuello{opacity:1;background:var(--duda)}
.embudo-txt{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}