/* Paleta y tipografía alineadas con la app de pago (Centinela Escolar / Radar de Deserción)
   — ver radar-desercion/reference/CLAUDE-stack-notes.md. Medidor semicircular y estructura
   de secciones conservados del prototipo (referencia/indice-riesgo-docente.html).
   No agregar animaciones de entrada por sección ni tarjetas genéricas. */
:root{
  --ink:#1c1a22; --ink-soft:#5c5768; --paper:#faf6ee; --surface:#ffffff; --surface-sunken:#f1ebdd;
  --line:#e2d9c4; --wine:#7c2836; --wine-soft:#f6e4e3; --wine-strong:#5c1a25;
  --brass:#96702a; --brass-soft:#f6ecd5; --brass-strong:#6e5216; --focus:#3a3550;
  --hero-muted:#cbc2ad; --on-dark:#fff8f6;
  /* Niveles de riesgo: colores de datos, no de marca — se mantienen distintos de wine/brass
     para que el semáforo bajo/moderado/alto/crítico sea legible de un vistazo. */
  --low:#2e7a57; --mid:#6e5216; --high:#8c3e19; --crit:#5c1a25;
  --display:'Fraunces',ui-serif,Georgia,serif;
  --body:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --dur:150ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
img,svg{max-width:100%}
a{color:var(--wine)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.25rem}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0}

/* Hero */
.hero{background:var(--ink);color:var(--paper);padding:3.5rem 0 3rem;border-bottom:6px solid var(--brass)}
.hero .brand{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.01em;color:var(--brass);margin:0 0 .5rem}
.by-line{font-family:var(--body);font-size:.82rem;color:var(--hero-muted);margin:0 0 2rem}
.by-line a{color:var(--brass-soft);text-decoration:underline;transition:color var(--dur) ease}
.by-line a:hover{color:var(--brass)}
.hero h1{font-size:clamp(2rem,6vw,3.1rem);font-weight:600;max-width:18ch;color:var(--paper)}
.hero p{max-width:60ch;margin:1.25rem 0 0;color:var(--hero-muted)}
.hero .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;margin:2rem 0 2.25rem;padding:0;list-style:none}
.hero .facts li{border-left:3px solid var(--brass);padding-left:.85rem;font-size:.95rem;color:var(--line)}

.btn{display:inline-block;font:700 1rem var(--display);border:0;border-radius:2px;padding:.95rem 1.5rem;cursor:pointer;text-decoration:none;
  transition:background var(--dur) ease,color var(--dur) ease,box-shadow var(--dur) ease,transform var(--dur) ease}
.btn-signal{background:var(--brass-strong);color:var(--on-dark)}
.btn-signal:hover{background:var(--brass);color:var(--ink);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.btn-ink{background:var(--wine);color:var(--on-dark)}
.btn-ink:hover{background:var(--wine-strong);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--wine);color:var(--wine)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.small{font-size:.875rem;color:var(--ink-soft)}
.hero .small{color:var(--hero-muted);margin-top:.9rem}

/* Why section */
.why{padding:3rem 0 1rem}
.why h2{font-size:1.6rem;margin-bottom:1rem}
.chain{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0;padding:0;list-style:none;counter-reset:c}
.chain li{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:.55rem .8rem;font-size:.95rem;position:relative}
.chain li:not(:last-child)::after{content:"";position:absolute;right:-.45rem;top:50%;width:.4rem;height:2px;background:var(--ink-soft)}
.chain li:last-child{background:var(--crit);color:var(--on-dark);border-color:var(--crit);font-weight:600}

/* Qué mide (SEO/GEO: contenido estático rico antes del quiz) */
.metric-overview{padding:1rem 0 3rem}
.metric-overview h2{font-size:1.5rem;margin-bottom:.75rem}
.metric-overview>.wrap>p{color:var(--ink-soft);max-width:60ch;margin:0 0 1.5rem}
.areas-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.areas-list li{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:.75rem .9rem}
.areas-list .area-name{font-weight:700;font-size:.98rem}
.areas-list .weight{font:700 .85rem var(--display);color:var(--brass-strong)}
.areas-list .area-desc{grid-column:1/-1;color:var(--ink-soft);font-size:.9rem}

/* FAQ */
.faq{padding:1rem 0 3.5rem}
.faq h2{font-size:1.5rem;margin-bottom:1.25rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:.9rem 1.1rem;margin-bottom:.6rem}
.faq details[open]{border-color:var(--wine)}
.faq summary{font-weight:700;cursor:pointer;list-style:none;position:relative;padding-right:1.5rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:0;font:700 1.1rem var(--display);color:var(--wine)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.65rem 0 0;color:var(--ink-soft);font-size:.92rem;max-width:64ch}

/* Quiz */
#quiz{padding:2rem 0 4rem}
.progress{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem;margin:0 0 .6rem;padding:0;list-style:none}
.progress li{height:6px;border-radius:3px;background:var(--line)}
.progress li.done{background:var(--wine)}
.progress li.now{background:var(--brass)}
.step-label{font-size:.9rem;color:var(--ink-soft);margin:0 0 1.5rem}
.block h2{font-size:1.75rem}
.block .intro{color:var(--ink-soft);margin:.5rem 0 1.75rem;max-width:60ch}
fieldset{border:0;margin:0 0 2rem;padding:0}
legend{font-weight:600;font-size:1.05rem;margin-bottom:.35rem;padding:0}
.help{font-size:.9rem;color:var(--ink-soft);margin:0 0 .75rem}
.opts{display:grid;gap:.45rem}
.opt{display:flex;align-items:flex-start;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:.7rem .85rem;cursor:pointer;
  transition:border-color var(--dur) ease,box-shadow var(--dur) ease}
.opt:hover{border-color:var(--wine)}
.opt input{margin:.3rem 0 0;accent-color:var(--wine);width:1.05rem;height:1.05rem;flex:none}
.opt:has(input:checked){border-color:var(--wine);box-shadow:inset 3px 0 0 var(--wine)}
.nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.err{color:var(--crit);font-weight:600;min-height:1.5em;margin:.25rem 0 0}

/* Results */
#results{padding:2rem 0 4rem}
.verdict{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2rem 1.5rem;text-align:center}
.gauge{width:min(100%,20rem);display:block;margin:0 auto}
.gauge .track{stroke:var(--line)}
.gauge .arc{transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1)}
.score-num{font:700 3.4rem/1 var(--display);margin-top:-4.2rem}
.score-of{font-size:.9rem;color:var(--ink-soft)}
.level{display:inline-block;margin:1rem 0 .5rem;padding:.3rem .8rem;border-radius:2px;color:var(--on-dark);font:700 1rem var(--display)}
.verdict p{max-width:52ch;margin:.5rem auto 0}
.blind{margin-top:1rem;font-size:.95rem;background:var(--brass-soft);color:var(--brass-strong);border-radius:4px;padding:.7rem .9rem;text-align:left}

.gate{margin-top:2rem;background:var(--ink);color:var(--paper);border-radius:6px;padding:1.75rem 1.5rem}
.gate h2{font-size:1.45rem;color:var(--paper)}
.gate p{color:var(--hero-muted);margin:.5rem 0 1.25rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.grid .full{grid-column:1/-1}
label.f{display:block;font-size:.9rem;font-weight:600;margin-bottom:.3rem;color:var(--paper)}
input.t,select.t{width:100%;font:inherit;padding:.65rem .75rem;border-radius:2px;border:1px solid var(--ink-soft);background:var(--surface);color:var(--ink);
  transition:border-color var(--dur) ease}
input.t:hover,select.t:hover{border-color:var(--brass)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--line)}
.consent input{margin-top:.3rem;accent-color:var(--brass)}
.consent a{color:var(--brass-soft);text-decoration:underline}
.consent a:hover{color:var(--brass)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gate .err{color:#ffb4a8}

.report{margin-top:2.5rem}
.report h2{font-size:1.6rem;margin-bottom:1.25rem}
.dim{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1.1rem 1.2rem;margin-bottom:.9rem}
.dim-head{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.dim-head h3{font-size:1.1rem}
.dim-head span{font:700 1.05rem var(--display);white-space:nowrap}
.bar{height:10px;border-radius:5px;background:var(--line);margin:.6rem 0 .8rem;overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px}
.dim ul{margin:0;padding-left:1.15rem}
.dim li{margin-bottom:.35rem}
.dim .ok{color:var(--low);margin:0;font-size:.95rem}

.link-panel{margin:2.5rem 0;border-left:6px solid var(--crit);background:var(--surface);padding:1.4rem 1.4rem 1.2rem;border-radius:0 4px 4px 0}
.link-panel h2{font-size:1.45rem;margin-bottom:.75rem}
.link-panel p{margin:.6rem 0}

.cta{background:var(--surface);border:2px solid var(--ink);border-radius:6px;padding:1.6rem 1.5rem}
.cta h2{font-size:1.4rem}
.cta p{margin:.6rem 0 1.2rem}
.cta .row{display:flex;gap:.75rem;flex-wrap:wrap}

footer{border-top:1px solid var(--line);padding:1.5rem 0 2.5rem;font-size:.85rem;color:var(--ink-soft)}
footer a{color:var(--wine)}
footer .by-line-footer{margin-top:.4rem}
[hidden]{display:none!important}

@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .hero{padding-top:2.5rem}
  .score-num{margin-top:-3.4rem;font-size:2.8rem}
}
@media (prefers-reduced-motion:reduce){
  .gauge .arc{transition:none}
  .btn,.opt,.by-line a,input.t,select.t,.consent a{transition:none}
  html{scroll-behavior:auto}
}
@media print{
  .hero,.why,.metric-overview,#quiz,.gate,.cta .row,.faq,.no-print,footer{display:none!important}
  body{background:#fff;font-size:11pt}
  .verdict,.dim,.link-panel,.cta{break-inside:avoid;border-color:#999}
  .report[hidden]{display:block!important}
}