/* Diagnóstico de colegios — WS AgencIA (dark tech, tokens del DESIGN.md de marca) */
:root{
  --abyss:#04080e; --deep-sea:#060d17; --surface:#0b1728; --surface-2:#0e1d33; --surface-3:#122540;
  --ink:#eaf3fb; --ink-soft:#b8c9da; --muted:#7e93ab; --faint:#708aa8;
  --emerald:#34d89e; --turquoise:#2bd0c3; --azure:#2fa8e0; --whatsapp:#25d366;
  --line:rgba(127,163,204,.18); --line-2:rgba(127,163,204,.30);
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-full:999px;
  --container:1180px; --gutter:clamp(1.25rem,4vw,2rem);
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--abyss); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif; font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 600px at 78% -8%, rgba(52,216,158,.10), transparent 60%),
                   radial-gradient(900px 500px at 10% 0%, rgba(47,168,224,.10), transparent 55%);
}
h1,h2,h3{font-family:'Sora',system-ui,sans-serif; margin:0; letter-spacing:-.02em; line-height:1.14}
p{margin:0}
a{color:inherit}
.container{width:min(var(--container),100% - var(--gutter)*2); margin-inline:auto}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--emerald)}

/* header */
.site-header{position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); background:rgba(4,8,14,.82); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; gap:1rem; padding:.85rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:'Sora',sans-serif; font-weight:700; font-size:1.12rem}
.brand img{border-radius:9px}
.brand-ia{background:linear-gradient(90deg,var(--emerald),var(--turquoise)); -webkit-background-clip:text; background-clip:text; color:transparent}
.header-tag{margin-left:auto; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* botones */
.btn{display:inline-flex; align-items:center; gap:.55rem; border:0; cursor:pointer; text-decoration:none; font:inherit; font-weight:600; border-radius:var(--r-full); padding:.95rem 1.7rem; transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:.6rem 1.05rem; font-size:.92rem}
.btn-whatsapp{background:var(--whatsapp); color:#03251a; box-shadow:0 10px 30px rgba(37,211,102,.18)}
.btn-primary{background:linear-gradient(90deg,var(--emerald),var(--turquoise)); color:#04241c; box-shadow:0 10px 30px rgba(43,208,195,.18)}
.btn-ghost{background:rgba(34,211,238,.06); color:var(--ink); border:1px solid var(--line-2)}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.link-btn{background:none; border:0; color:var(--ink-soft); text-decoration:underline; cursor:pointer; font:inherit; padding:.4rem 0}
.link-btn:hover{color:var(--ink)}

/* hero */
.hero{padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(1.6rem,4vw,3.4rem); align-items:start}
.hero-copy h1{font-size:clamp(1.9rem,3.6vw,2.9rem); margin:.7rem 0 1rem}
.lead{color:var(--ink-soft); font-size:1.06rem; max-width:38ch}
.hero-points{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.55rem}
.hero-points li{position:relative; padding-left:1.5rem; color:var(--ink-soft); font-size:.97rem}
.hero-points li::before{content:""; position:absolute; left:0; top:.62rem; width:8px; height:8px; border-radius:50%; background:linear-gradient(90deg,var(--emerald),var(--turquoise))}
.hero-points strong{color:var(--ink)}

/* tarjeta-herramienta */
.tool{background:linear-gradient(180deg,var(--surface),var(--deep-sea)); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(1.25rem,3vw,2rem); box-shadow:0 30px 80px rgba(0,0,0,.45)}
.tool-head{margin-bottom:1rem}
.tool-head-2,.tool-head-3,.tool-head-4{margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--line)}
.tool-step{display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--turquoise); margin-bottom:.45rem}
.tool h2{font-size:1.18rem; font-weight:600}

.drop{border:1.5px dashed var(--line-2); border-radius:var(--r-md); padding:1.9rem 1.25rem; text-align:center; cursor:pointer; background:rgba(11,23,40,.6); transition:border-color .18s,background .18s}
.drop:hover,.drop:focus-visible,.drop.activo{border-color:var(--emerald); background:rgba(52,216,158,.06); outline:none}
.drop-icon{color:var(--turquoise); margin-bottom:.6rem}
.drop-title{font-weight:600}
.drop-sub{color:var(--muted); font-size:.9rem; margin:.3rem 0 .9rem}

.estado{display:flex; align-items:center; gap:.75rem; margin-top:1.1rem; color:var(--ink-soft)}
.spinner{width:18px; height:18px; border:2px solid var(--line-2); border-top-color:var(--emerald); border-radius:50%; animation:girar .8s linear infinite; flex:0 0 auto}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}

.aviso{margin-top:1rem; padding:.85rem 1rem; border-radius:var(--r-sm); background:rgba(47,168,224,.1); border:1px solid rgba(47,168,224,.35); font-size:.95rem; color:var(--ink)}
.aviso.alerta{background:rgba(255,138,110,.1); border-color:rgba(255,138,110,.4)}

/* panel "esto leímos" */
.leido-cuerpo{display:grid; gap:1rem}
.tabla{width:100%; border-collapse:collapse; font-size:.96rem}
.tabla th,.tabla td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line)}
.tabla th{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500}
.tabla td strong{color:var(--emerald); font-weight:600}
.vacio{color:var(--faint)}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{border:1px solid var(--line-2); border-radius:var(--r-full); padding:.3rem .75rem; font-size:.85rem; color:var(--ink-soft)}
.chip.bien{border-color:rgba(52,216,158,.45); color:var(--ink)}
.chip.aviso{border-color:rgba(255,138,110,.45); color:var(--ink)}
.leido-nota{color:var(--muted); font-size:.9rem; margin-top:1rem}

/* formularios */
.campo-grid{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
.campo-ancho{grid-column:1/-1}
.campo-grid label{display:grid; gap:.35rem; font-size:.88rem; color:var(--ink-soft)}
input,select{font:inherit; color:var(--ink); background:rgba(6,13,23,.85); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:.7rem .8rem; width:100%}
input:focus,select:focus{outline:2px solid rgba(43,208,195,.5); outline-offset:1px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
form{margin:0}
form .btn{margin-top:1rem}
.puerta-sub{color:var(--ink-soft); font-size:.96rem; margin-bottom:1rem}
.puerta-nota{color:var(--muted); font-size:.85rem; margin-top:.7rem}

/* diagnóstico */
.diagnostico{margin-top:.5rem}
.diag-bloque{padding:1.1rem 0; border-bottom:1px solid var(--line)}
.diag-bloque:last-of-type{border-bottom:0}
.diag-bloque h3{font-size:1.02rem; margin-bottom:.45rem}
.cifra{font-family:'Sora',sans-serif; font-weight:700; font-size:clamp(1.5rem,3vw,2rem); background:linear-gradient(90deg,var(--emerald),var(--turquoise)); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.02em; display:block; margin:.2rem 0 .35rem}
.diag-bloque p{color:var(--ink-soft); font-size:.97rem}
.supuestos{color:var(--faint); font-size:.82rem; margin-top:.4rem}
.diag-acciones{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem}
.diag-nota{color:var(--muted); font-size:.84rem; margin-top:.85rem}

/* bandas */
.banda{padding:clamp(2.6rem,6vw,5rem) 0; border-top:1px solid var(--line)}
.banda-2{background:linear-gradient(180deg,transparent,rgba(11,23,40,.55))}
.h2{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:1.6rem}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:1.3rem}
.card h3{font-size:1.02rem; margin-bottom:.5rem}
.card p{color:var(--ink-soft); font-size:.95rem}
.pasos{list-style:none; padding:0; margin:0; display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pasos li{display:flex; gap:.9rem; align-items:flex-start}
.pasos span{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:.9rem; color:#04241c; background:linear-gradient(90deg,var(--emerald),var(--turquoise))}
.pasos h3{font-size:1rem; margin-bottom:.25rem}
.pasos p{color:var(--ink-soft); font-size:.94rem}
.privacidad{margin-top:2rem; padding:1rem 1.15rem; border:1px solid var(--line); border-radius:var(--r-md); color:var(--ink-soft); font-size:.92rem; background:rgba(11,23,40,.6)}

/* footer */
.site-footer{border-top:1px solid var(--line); padding:1.6rem 0; background:var(--deep-sea)}
.footer-inner{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; align-items:center; color:var(--muted); font-size:.9rem}
.footer-inner a{color:var(--ink-soft); text-decoration:none}
.footer-inner a:hover{color:var(--ink)}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr}
  .lead{max-width:none}
  .header-tag{display:none}
}
@media (max-width:520px){
  .campo-grid{grid-template-columns:1fr}
  .btn{width:100%; justify-content:center}
  .diag-acciones .btn{width:100%}
}

/* impresión: el diagnóstico se guarda tal cual */
@media print{
  body{background:#fff; color:#111}
  .site-header,.hero-copy,.drop,.estado,.aviso,.puerta,#manual,#leido,.banda,.site-footer,.diag-acciones,.diag-nota,.btn{display:none !important}
  .tool{border:0; box-shadow:none; background:#fff; padding:0}
  .cifra{color:#0a5f4a; -webkit-text-fill-color:#0a5f4a}
  .diag-bloque p,.supuestos{color:#333}
}