/* ==========================================================================
   Instituto Álvarez Condarco — sistema de diseño (ver diseno/DISENO.md)
   ========================================================================== */

:root{
  /* Color */
  --azul-escudo:#13205a;
  --azul-noche:#0b1440;
  --bordo:#8e2b1d;
  --dorado:#c9a54c;
  --dorado-claro:#f3e6c2;
  --crema:#fbf6ec;
  --papel:#ffffff;
  --tinta:#1b1f33;
  --tinta-suave:#5a5e70;
  --linea:#e5dccb;
  --celeste:#2f58a8;
  --sol:#f2b632;

  /* Tipografía */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-sans:"Figtree",system-ui,sans-serif;

  /* Espaciado */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-6:24px;--space-8:32px;--space-12:48px;--space-24:96px;

  /* Radios */
  --radius-sm:8px;--radius-md:16px;--radius-lg:28px;--radius-pill:999px;

  /* Sombra */
  --shadow-card:0 1px 2px rgba(19,32,90,.06),0 10px 30px rgba(19,32,90,.08);

  color-scheme:light;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--crema);color:var(--tinta);font:400 16px/26px var(--font-sans);margin:0}
img{max-width:100%;display:block}
a{color:var(--celeste)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--celeste);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--space-6)}
h1,h2,h3{font-family:var(--font-display);color:var(--azul-escudo);margin:0;text-wrap:balance}
h2{font-size:44px;line-height:50px;font-weight:700;letter-spacing:-.015em}
h3{font-size:24px;line-height:30px;font-weight:600}
.volanta{font:700 13px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--bordo);margin:0 0 var(--space-3)}
.bajada{font-size:19px;line-height:30px;color:var(--tinta-suave);max-width:60ch;margin:var(--space-4) 0 0}
.acento{color:var(--bordo)}
section{padding-block:var(--space-24)}
.sec-head{margin-bottom:var(--space-12)}
.ph{background:var(--dorado-claro);border-bottom:2px dashed var(--dorado);padding:0 4px;border-radius:4px;color:var(--tinta)}

/* ---------- Botones y tags ---------- */
.iac-btn{display:inline-flex;align-items:center;gap:var(--space-2);font:600 15px/20px var(--font-sans);padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.iac-btn--primario{background:var(--azul-escudo);color:var(--papel)}
.iac-btn--primario:hover{background:var(--azul-noche)}
.iac-btn--secundario{background:transparent;color:var(--azul-escudo);border-color:var(--azul-escudo)}
.iac-btn--secundario:hover{background:var(--azul-escudo);color:var(--papel)}
.iac-btn--claro{background:var(--papel);color:var(--azul-escudo)}
.iac-btn--claro:hover{background:var(--dorado-claro)}
.iac-tag{display:inline-flex;font:600 13px/16px var(--font-sans);padding:6px 12px;border-radius:var(--radius-pill)}
.iac-tag--jardin{background:var(--sol);color:var(--tinta)}
.iac-tag--primaria{background:var(--celeste);color:var(--papel)}
.iac-tag--secundaria{background:var(--bordo);color:var(--papel)}

/* ---------- Header ---------- */
.iac-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--papel);border-bottom:1px solid var(--linea)}
.iac-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-3)}
.marca{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--azul-escudo)}
.marca img{height:48px;width:auto}
.marca span{font:700 18px/20px var(--font-display)}
.marca small{display:block;font:600 11px/14px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--bordo)}
.nav{display:flex;align-items:center;gap:var(--space-6)}
.nav a:not(.iac-btn){font:600 15px/20px var(--font-sans);color:var(--tinta);text-decoration:none}
.nav a:not(.iac-btn):hover{color:var(--bordo)}
.nav a:not(.iac-btn)[aria-current="page"]{color:var(--bordo)}
.menu-btn{display:none;background:none;border:2px solid var(--linea);border-radius:var(--radius-sm);padding:8px 12px;font:600 14px var(--font-sans);color:var(--azul-escudo);cursor:pointer}

/* ---------- Hero ---------- */
.hero{padding-block:var(--space-12) var(--space-24)}
.hero .wrap{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-12);align-items:center}
.hero h1{font-size:64px;line-height:66px;font-weight:700;letter-spacing:-.02em}
.hero .acciones{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}
.hero .niveles{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}
.hero-foto{position:relative}
.hero-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)}
.cuartel{position:absolute;left:-28px;bottom:-28px;width:112px;height:112px;border-radius:var(--radius-md);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--dorado);border:3px solid var(--dorado);box-shadow:var(--shadow-card)}
.cuartel i{display:block}
.cuartel i:nth-child(1),.cuartel i:nth-child(4){background:var(--papel)}
.cuartel i:nth-child(2),.cuartel i:nth-child(3){background:var(--azul-escudo)}

/* ---------- Niveles ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.iac-nivel{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s}
.iac-nivel:hover{box-shadow:var(--shadow-card)}
.iac-nivel img{width:100%;aspect-ratio:4/3;object-fit:cover}
.iac-nivel__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.iac-nivel__body p{margin:0;color:var(--tinta-suave);flex:1}
.iac-nivel__body ul{margin:0;padding-left:18px;color:var(--tinta-suave)}
.iac-nivel__link{font-weight:600;text-decoration:none}
.iac-nivel__link:hover{color:var(--bordo)}

/* ---------- Historia ---------- */
.historia{background:var(--papel);border-block:1px solid var(--linea)}
.historia .wrap{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-12);align-items:center}
.historia .foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg)}
.historia .texto p{max-width:62ch}
.hitos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--linea)}
.hitos strong{display:block;font:700 28px/32px var(--font-display);color:var(--azul-escudo)}
.hitos span{color:var(--tinta-suave);font-size:14px;line-height:20px}

/* ---------- Lema ---------- */
.lema{background:var(--azul-escudo);color:var(--papel);padding-block:var(--space-24)}
.lema .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-6)}
.lema .volanta{color:var(--dorado)}
.lema blockquote{margin:0;font:700 48px/54px var(--font-display);letter-spacing:-.015em;max-width:22ch;text-wrap:balance}
.lema .ph{color:var(--tinta)}
.lema p{color:var(--dorado-claro);max-width:56ch;margin:0}
.filete{width:64px;height:3px;background:var(--dorado);border-radius:2px}

/* ---------- Instalaciones / galería ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:var(--space-4)}
.galeria figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-md)}
.galeria figure.ancha{grid-column:span 2}
.galeria figure.alta{grid-row:span 2}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.galeria figure:hover img{transform:scale(1.03)}
.galeria figcaption{position:absolute;left:var(--space-3);bottom:var(--space-3);background:var(--papel);color:var(--azul-escudo);font:600 13px/16px var(--font-sans);padding:6px 12px;border-radius:var(--radius-pill)}

/* ---------- Niveles ampliados (mismo patrón visual que .historia) ---------- */
.nivel-detalle{background:var(--papel);border-block:1px solid var(--linea)}
.nivel-detalle .wrap{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-12);align-items:center}
.nivel-detalle .foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg)}
.nivel-detalle .texto p{max-width:62ch}
.nivel-lista{margin:var(--space-4) 0 0;padding-left:18px;color:var(--tinta-suave);display:flex;flex-direction:column;gap:6px}

/* ---------- Admisiones ---------- */
.admisiones{background:var(--dorado-claro)}
.admisiones .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start}
.pasos{list-style:none;padding:0;margin:var(--space-8) 0 0;display:flex;flex-direction:column;gap:var(--space-6)}
.pasos li{display:grid;grid-template-columns:44px 1fr;gap:var(--space-4)}
.pasos .n{width:44px;height:44px;border-radius:50%;background:var(--azul-escudo);color:var(--papel);display:grid;place-items:center;font:700 18px var(--font-display)}
.pasos h3{font-size:20px;line-height:26px}
.pasos p{margin:4px 0 0;color:var(--tinta-suave)}
.form{background:var(--papel);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-4)}
.form h3{margin-bottom:var(--space-2)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font:600 14px/20px var(--font-sans);color:var(--azul-escudo)}
.campo input,.campo select,.campo textarea{font:400 16px/24px var(--font-sans);color:var(--tinta);background:var(--crema);border:1.5px solid #cfc4ad;border-radius:var(--radius-sm);padding:10px 12px;width:100%}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.form .nota{font-size:13px;line-height:18px;color:var(--tinta-suave);margin:0}
.ok{background:#e6efe0;color:#24401a;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-weight:600}

/* ---------- Información ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.info{border-top:3px solid var(--azul-escudo);padding-top:var(--space-4)}
.info h3{font-size:20px;line-height:26px;margin-bottom:var(--space-3)}
.info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-4)}
.info dt{font-weight:600;color:var(--azul-escudo)}
.info dd{margin:0;color:var(--tinta-suave)}
.info p{margin:0 0 6px;color:var(--tinta-suave)}

.horarios{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-bottom:var(--space-3)}
.horarios th,.horarios td{text-align:left;padding:6px 8px 6px 0;border-bottom:1px solid var(--linea);font-size:15px;line-height:22px}
.horarios thead th{font:700 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bordo)}
.horarios tbody th{font-weight:600;color:var(--azul-escudo)}
.horarios td{color:var(--tinta-suave);white-space:nowrap}
.nota-h{font-size:14px!important;line-height:20px;margin:0 0 6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Footer ---------- */
footer{background:var(--azul-noche);color:#b9bfd6;padding-block:var(--space-12) var(--space-8)}
footer .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-12);align-items:start}
footer img{height:120px;width:auto}
footer h4{font:700 20px/24px var(--font-display);color:var(--papel);margin:0 0 var(--space-2)}
footer a{color:var(--dorado-claro);text-decoration:none}
footer a:hover{text-decoration:underline}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.legal{max-width:1200px;margin:var(--space-8) auto 0;padding:var(--space-6) var(--space-6) 0;border-top:1px solid rgba(201,165,76,.35);font-size:13px}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero .wrap,.historia .wrap,.nivel-detalle .wrap,.admisiones .wrap{grid-template-columns:1fr}
  .grid-3,.info-grid{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .historia .foto img{aspect-ratio:4/3}
  .cuartel{left:auto;right:16px;bottom:-24px;width:88px;height:88px}
}
@media (max-width:720px){
  .wrap{padding-inline:var(--space-4)}
  section,.lema{padding-block:64px}
  .hero{padding-block:var(--space-8) 64px}
  .hero h1{font-size:40px;line-height:44px}
  h2{font-size:32px;line-height:38px}
  .lema blockquote{font-size:32px;line-height:38px}
  .grid-3,.info-grid,.fila{grid-template-columns:1fr}
  .galeria figure.ancha{grid-column:span 2}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--papel);flex-direction:column;align-items:stretch;padding:var(--space-4);border-bottom:1px solid var(--linea);gap:var(--space-4)}
  .nav.abierto{display:flex}
  .iac-header .wrap{position:relative}
  .marca span{font-size:16px}
  footer .wrap{grid-template-columns:1fr;gap:var(--space-6)}
  footer img{height:88px}
  .form{padding:var(--space-6)}
}