/* Colegio Norte — sistema de marca aplicado a la web */
:root{
  --nav:#273476; --noche:#16204A; --hielo:#E9EFF7; --bruma:#F5F8FC;
  --laton:#C99A4E; --latont:#8A6A2E; --graf:#1A1D23; --gris:#6E7787;
  --merid:#2F62D9; --amb:#F4A23C; --terr:#DE6448; --terrt:#B24A32; --miel:#FFD08A; --crema:#FFF6EA; --menta:#7FC8B8;
  --p:'Poppins',system-ui,sans-serif; --l:'Lora',Georgia,serif;
  --sh-1:0 1px 2px rgba(22,32,74,.04),0 4px 14px rgba(22,32,74,.05);
  --sh-2:0 2px 6px rgba(22,32,74,.06),0 14px 34px rgba(22,32,74,.11);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--p);font-weight:400;color:var(--graf);line-height:1.65;background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--p);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.015em;overflow-wrap:break-word}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:20px;margin-top:0}
p{margin:0 0 1em;text-align:justify;text-align-last:left;hyphens:auto;overflow-wrap:break-word}
.hero p,.lead{hyphens:manual}
a{color:var(--nav);text-decoration:none}
img{max-width:100%}
.lead{font-size:clamp(17px,2vw,20px);color:#3A4152;max-width:64ch;font-weight:300}
.small{font-size:14px;color:var(--gris)}

/* Nav */
header.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);border-bottom:3px solid var(--laton);transition:box-shadow .25s,background .25s}
/* El desenfoque va en un pseudoelemento: si estuviera en la cabecera, ésta se
   convertiría en bloque contenedor de los position:fixed y recortaría el cajón. */
header.nav::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(10px);pointer-events:none}
header.nav .row{position:relative}
header.nav.scrolled{box-shadow:0 6px 24px rgba(22,32,74,.09)}
header.nav .row{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
header.nav img.logo{height:40px;width:auto;display:block;transition:height .25s var(--ease)}
header.nav.scrolled img.logo{height:34px}
nav.links{display:flex;gap:28px;align-items:center}
nav.links a{font-size:13.5px;font-weight:500;color:var(--graf);letter-spacing:.01em;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .15s,color .15s;white-space:nowrap}
nav.links a:hover{border-bottom-color:var(--laton)}
nav.links a[aria-current="page"]{border-bottom-color:var(--laton);color:var(--nav)}
nav.links a.cta{background:var(--nav);color:#fff;padding:10px 20px;border-radius:100px;font-weight:500;transition:background .18s,transform .18s var(--ease),box-shadow .18s}
nav.links a.cta:hover{border-bottom-color:transparent;background:var(--noche);transform:translateY(-1px);box-shadow:0 6px 16px rgba(22,32,74,.25)}
nav.links a.cta[aria-current="page"]{border-bottom-color:transparent}

/* Botón hamburguesa + cajón móvil */
.burger{display:none;position:relative;z-index:125;width:46px;height:46px;border:1px solid var(--hielo);background:#fff;border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;padding:0;flex-shrink:0}
.burger span{display:block;width:20px;height:2px;background:var(--nav);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* El cajón vive dentro de un contenedor del tamaño exacto de la ventana: así, al
   estar cerrado y desplazado fuera, queda recortado y no ensancha la página. */
.navdrawer{display:contents}
body.menu-open{overflow:hidden}

@keyframes logoGrow{0%{transform:scale(.35);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
.logo-grow{transform-origin:left center;animation:logoGrow .9s var(--ease) both}
@media (prefers-reduced-motion:reduce){.logo-grow{animation:none}}

/* Hero */
.hero{background:var(--nav);color:#fff;padding:86px 0 96px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
   radial-gradient(58% 70% at 12% 8%,rgba(93,120,205,.30) 0%,transparent 62%),
   radial-gradient(50% 60% at 88% 96%,rgba(201,154,78,.20) 0%,transparent 65%);
   pointer-events:none}
.hero::after{content:"";position:absolute;right:-120px;top:-80px;width:520px;height:520px;background:radial-gradient(circle,rgba(201,154,78,.16) 0%,transparent 70%);pointer-events:none}
.hero .k{font-size:12px;letter-spacing:.26em;color:var(--miel);text-transform:uppercase;margin-bottom:20px;font-weight:500}
.hero h1{font-size:clamp(34px,5vw,58px);margin-bottom:.3em;max-width:16ch}
.hero p{color:#C6D2EC;max-width:56ch;font-size:18.5px;font-weight:300;margin:0 0 34px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;z-index:1}

/* Símbolo del hero — protagonista de la portada */
.hero-symbol{display:flex;justify-content:center;align-items:center;position:relative;perspective:900px}
.hero-symbol::before{content:"";position:absolute;width:min(125%,460px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,208,138,.24) 0%,rgba(201,154,78,.10) 42%,transparent 70%);
  animation:halo 7s ease-in-out infinite;pointer-events:none}
.hero-symbol-inner{display:block;line-height:0;position:relative;transform-style:preserve-3d;
  opacity:0;transform:translateY(22px) scale(.9);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero-symbol.ready .hero-symbol-inner{opacity:1;transform:none}
.hero-symbol img{display:block;width:auto;height:clamp(200px,25vw,340px);
  filter:drop-shadow(0 24px 42px rgba(6,12,38,.5));will-change:transform}
.hero-symbol.float img{animation:floaty 6.5s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.09);opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.btnrow{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:100px;font-weight:500;font-size:14.5px;letter-spacing:.01em;
  transition:transform .18s var(--ease),box-shadow .18s,background .18s,border-color .18s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn.p{background:var(--laton);color:var(--noche);box-shadow:0 4px 14px rgba(201,154,78,.32)}
.btn.p:hover{background:var(--miel);box-shadow:0 10px 26px rgba(201,154,78,.42)}
.btn.p::after{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg)}
.btn.p:hover::after{animation:shine .75s ease-out}
@keyframes shine{to{left:160%}}
.btn.s{border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn.s:hover{border-color:#fff;background:rgba(255,255,255,.08)}

section{padding:78px 0}
section.t{background:var(--bruma)}
section.warm{background:var(--crema)}
section.dark{background:var(--noche);color:#fff}
section.dark h2{color:#fff}
section.dark p{color:#B9C4E0}
.sh{display:flex;gap:16px;align-items:baseline;margin-bottom:34px;flex-wrap:wrap}
.sn{font-size:12px;letter-spacing:.14em;color:var(--latont);font-weight:500;text-transform:uppercase;padding-top:8px;position:relative}
.sn::after{content:"";display:block;width:28px;height:2px;background:var(--laton);margin-top:8px;border-radius:2px}

.rule{border-left:4px solid var(--laton);padding:4px 0 4px 22px;font-size:18px;font-weight:300;color:#3A4152}

.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:#fff;border:1px solid var(--hielo);border-radius:16px;padding:30px;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#DCE6F3}
.card h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--latont);font-weight:500;margin:0 0 10px}
.card p{color:var(--gris);font-size:15px;margin:0}

.linkcard{background:#fff;border:1px solid var(--hielo);border-radius:16px;padding:26px;display:block;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.linkcard:hover{transform:translateY(-4px);border-color:var(--laton);box-shadow:var(--sh-2)}
.linkcard h3{color:var(--nav);margin-bottom:6px}
.linkcard span{font-size:13px;color:var(--gris)}
.linkcard .arrow{color:var(--latont);font-weight:600;display:inline-block;transition:transform .2s var(--ease)}
.linkcard:hover .arrow{transform:translateX(5px)}

/* Marco de foto con zoom suave */
.ph-frame{border-radius:16px;overflow:hidden;display:block;line-height:0;background:var(--bruma)}
.ph-frame img{width:100%;display:block;transition:transform .55s var(--ease)}
.ph-frame:hover img{transform:scale(1.045)}

footer{background:var(--noche);color:#B9C4E0;padding:56px 0 30px}
footer .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
footer img.logo{height:34px;margin-bottom:16px}
footer h5{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin:0 0 14px;font-weight:600}
footer a{color:#B9C4E0;display:block;margin-bottom:9px;font-size:14.5px;transition:color .15s,transform .15s}
footer a:hover{color:#fff}
footer .bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:13px;color:#7E8CB8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:40px;height:40px;border-radius:100px;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;transition:border-color .15s,transform .18s var(--ease)}
.social a:hover{border-color:var(--laton);transform:translateY(-2px)}
.social a svg{width:16px;height:16px;fill:#B9C4E0;transition:fill .15s}
.social a:hover svg{fill:var(--laton)}

/* Cabeceras con ilustración animada a la derecha (El Centro, Servicios, Descargas, Contacto) */
.subhero.art{position:relative;overflow:hidden}
.subhero.art::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 70% at 80% 45%,rgba(255,208,138,.15) 0%,transparent 62%)}
.subhero.art .row2{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center;
  position:relative;z-index:1}
.hero-art{display:flex;justify-content:center;align-items:center}
.hero-art svg{width:215px;height:auto;overflow:visible}
@media(max-width:860px){
  .subhero.art .row2{grid-template-columns:1fr;gap:26px;text-align:center}
  .hero-art{order:-1}
  .hero-art svg{width:155px}
}

/* Cifras que cuentan al entrar en pantalla */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px;
  border-top:1px solid var(--hielo);border-bottom:1px solid var(--hielo);padding:34px 0}
.fig{text-align:center;padding:0 8px}
.fig .n{font-size:clamp(34px,4.4vw,50px);font-weight:600;line-height:1;color:var(--nav);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block}
.fig .n .suf{color:var(--laton)}
.fig .lbl{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);font-weight:500;margin-top:10px}
@media(max-width:820px){.figures{grid-template-columns:repeat(2,1fr);gap:30px 16px}}
@media(max-width:400px){.figures{grid-template-columns:1fr}}

/* Aparición al hacer scroll (la activa assets/site.js sólo si se permite movimiento) */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------------- RESPONSIVE ---------------- */

/* El menú completo no cabe por debajo de ~1060px: pasa a hamburguesa */
@media (max-width:1060px){
  .burger{display:flex}
  .navdrawer{display:block;position:fixed;inset:0;z-index:120;overflow:hidden;
    pointer-events:none;visibility:hidden;transition:visibility 0s .34s}
  body.menu-open .navdrawer{pointer-events:auto;visibility:visible;transition-delay:0s}
  .navdrawer::before{content:"";position:absolute;inset:76px 0 0;background:rgba(22,32,74,.45);
    backdrop-filter:blur(2px);opacity:0;transition:opacity .3s}
  body.menu-open .navdrawer::before{opacity:1}
  nav.links{position:absolute;top:0;right:0;width:min(320px,86vw);height:100%;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:96px 26px 32px;
    box-shadow:-14px 0 40px rgba(22,32,74,.18);overflow-y:auto;
    transform:translateX(100%);transition:transform .34s var(--ease)}
  body.menu-open nav.links{transform:translateX(0)}
  nav.links a{font-size:16px;padding:15px 2px;border-bottom:1px solid var(--hielo);min-height:52px;display:flex;align-items:center}
  nav.links a:hover{border-bottom-color:var(--hielo);color:var(--nav)}
  nav.links a[aria-current="page"]{color:var(--nav);font-weight:600}
  nav.links a.cta{margin-top:20px;justify-content:center;border-bottom:none;padding:15px 20px}
  nav.links a.cta:hover{transform:none}
}

/* Tablet grande */
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  section{padding:64px 0}
}

/* Tablet (768px) — 2 columnas, nunca 1 sola para rejillas de tarjetas */
@media (max-width:860px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;gap:34px;text-align:center}
  .hero h1,.hero p,.hero .lead{margin-left:auto;margin-right:auto}
  .hero p{text-align:center}
  .btnrow{justify-content:center}
  .hero-symbol{order:-1}
  .hero-symbol img{height:clamp(165px,32vw,250px)}
  .hero{padding:60px 0 72px}
  footer .fgrid{grid-template-columns:1fr 1fr}
  footer .fgrid>div:first-child{grid-column:1/-1}
}

/* Móvil */
@media (max-width:620px){
  .wrap{padding:0 20px}
  section{padding:52px 0}
  .g3,.g4,.g2{grid-template-columns:1fr}
  footer .fgrid{grid-template-columns:1fr;gap:28px}
  footer a{padding:4px 0;min-height:32px}
  /* La justificación en columnas estrechas abre "ríos" de espacio: mejor a la izquierda */
  p,.lead,.rule{text-align:left;text-align-last:left;hyphens:manual}
  .card{padding:24px}
  .linkcard{padding:22px}
  .hero{padding:44px 0 58px}
  .hero .k{font-size:11px;letter-spacing:.2em}
  .hero p{font-size:17px}
  .btnrow{gap:10px}
  .btn{padding:14px 24px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .sh{margin-bottom:26px;gap:6px}
  .sn{padding-top:0}
}

/* Huecos para fotos reales — sustituir cuando tengas material propio */
.imgph{border:2px dashed var(--hielo);border-radius:16px;background:var(--bruma);display:flex;align-items:center;justify-content:center;min-height:240px;text-align:center}
.imgph .ph-inner{padding:26px;max-width:38ch}
.imgph .ph-tag{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--latont);font-weight:600;margin-bottom:8px}
.imgph .ph-desc{font-size:13.5px;color:var(--gris);line-height:1.5}
.imgph.warm{border-color:#F1E1C9;background:#fff}
.imgph.warm .ph-tag{color:var(--terrt)}
.imgph.dark{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.imgph.dark .ph-tag{color:var(--laton)}
.imgph.dark .ph-desc{color:#B9C4E0}
.imgph.wide{min-height:280px}
.imgph.small{min-height:150px}

:focus-visible{outline:3px solid var(--laton);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}