/* ============================================================
   Escuela Especial de Lenguaje y Jardín Amankay
   Sistema de diseño · styles.css
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marca */
  --ink:        #12325C;
  --ink-700:    #1C4680;
  --ink-500:    #4A6285;
  --ink-400:    #6E82A0;
  --sky-50:     #F4FAFE;
  --sky-100:    #E3F1FB;
  --sky-200:    #C6E3F6;
  --sky-300:    #94CDEE;
  --sky-500:    #35A2DE;
  --sky-600:    #1B85C4;
  --red:        #E23A2E;
  --green:      #46A93F;
  --violet:     #7E2E8E;
  --gold:       #F3B505;

  --cream:      #FFFCF7;
  --paper:      #FFFFFF;
  --line:       #E7EEF6;
  --line-soft:  #F0F5FA;

  /* Tipografía */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(.82rem, .79rem + .14vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.15rem, 1.08rem + .35vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.26rem + .68vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.2vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-5:  clamp(2.5rem, 1.75rem + 3.2vw, 4.05rem);

  /* Espaciado y forma */
  --gutter: clamp(1.15rem, .7rem + 2vw, 2.5rem);
  --wrap: 1240px;
  --wrap-narrow: 880px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 30px;
  --r-xl: 44px;

  --shadow-xs: 0 1px 2px rgba(18,50,92,.06), 0 2px 6px rgba(18,50,92,.05);
  --shadow-sm: 0 2px 6px rgba(18,50,92,.05), 0 10px 24px -12px rgba(18,50,92,.18);
  --shadow-md: 0 4px 12px rgba(18,50,92,.06), 0 22px 44px -20px rgba(18,50,92,.30);
  --shadow-lg: 0 8px 20px rgba(18,50,92,.07), 0 40px 70px -30px rgba(18,50,92,.38);

  --ease: cubic-bezier(.22,.72,.24,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--step-0);
  line-height:1.7;
  color:var(--ink-500);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
  font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 40;
}
h1{ font-size:var(--step-5); }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ margin:0 0 1.1em; }
a{ color:var(--sky-600); text-decoration:none; }
img,svg{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
strong{ color:var(--ink-700); font-weight:700; }

::selection{ background:var(--sky-200); color:var(--ink); }
:focus-visible{ outline:3px solid var(--sky-500); outline-offset:3px; border-radius:6px; }

/* ---------- 3. Utilidades ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:clamp(4rem,3rem + 6vw,8.5rem); position:relative; }
.section--tight{ padding-block:clamp(3rem,2.4rem + 3vw,5.5rem); }
.section--sky{ background:linear-gradient(180deg,var(--sky-50),#fff 65%); }
.section--paper{ background:var(--paper); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:50%; translate:-50% -140%; z-index:200;
  background:var(--ink); color:#fff; padding:.7rem 1.3rem; border-radius:0 0 12px 12px;
  transition:translate .2s var(--ease);
}
.skip-link:focus{ translate:-50% 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--step--1); font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sky-600); margin-bottom:1rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--sky-300),var(--sky-600));
}
.lead{ font-size:var(--step-1); color:var(--ink-500); line-height:1.65; }
.section-head{ max-width:66ch; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }

.text-grad{
  background:linear-gradient(96deg,var(--sky-600) 0%,var(--violet) 48%,var(--red) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 4. Botones ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:999px; border:1.5px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-sans); font-weight:800; font-size:.98rem; letter-spacing:.01em;
  cursor:pointer; text-align:center; line-height:1.2;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), color .28s var(--ease);
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(-1px); }
.btn svg{ width:19px; height:19px; flex:none; }
.btn--primary{ --btn-bg:linear-gradient(135deg,var(--sky-600),var(--ink-700)); }
.btn--wa{ --btn-bg:linear-gradient(135deg,#39c165,#1faa50); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--ink);
  border-color:var(--sky-200); box-shadow:none;
}
.btn--ghost:hover{ border-color:var(--sky-300); background:var(--sky-50); }
.btn--light{ --btn-bg:#fff; --btn-fg:var(--ink); }
.btn--sm{ padding:.68rem 1.2rem; font-size:.88rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---------- 5. Encabezado ---------- */
.topbar{ background:var(--ink); color:#C9DDF3; font-size:.83rem; }
.topbar__in{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; align-items:center; justify-content:center;
  padding-block:.55rem; text-align:center;
}
.topbar a{ color:#fff; font-weight:700; }
.topbar a:hover{ color:var(--sky-300); }
.topbar span{ display:inline-flex; align-items:center; gap:.45rem; }
.topbar svg{ width:15px; height:15px; opacity:.75; }
@media (max-width:700px){ .topbar__in .topbar__hide{ display:none; } }

.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.header.is-stuck{ box-shadow:0 10px 30px -18px rgba(18,50,92,.4); border-color:var(--line); background:rgba(255,255,255,.94); }
.header__in{ display:flex; align-items:center; gap:1.5rem; padding-block:.7rem; }
.brand{ display:flex; align-items:center; gap:.75rem; margin-right:auto; }
.brand img{ height:clamp(44px,3.4vw,58px); width:auto; }
.brand__txt{ display:none; line-height:1.15; }
@media (min-width:1120px){ .brand__txt{ display:block; } }
.brand__txt b{
  display:block; font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.02rem;
}
.brand__txt span{ font-size:.76rem; color:var(--ink-400); letter-spacing:.08em; text-transform:uppercase; font-weight:700; }

.nav{ display:none; }
@media (min-width:1000px){ .nav{ display:flex; align-items:center; gap:.15rem; } }
.nav a{
  position:relative; padding:.55rem .85rem; border-radius:999px;
  color:var(--ink); font-weight:700; font-size:.94rem;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:50%; bottom:.28rem; translate:-50% 0;
  width:0; height:3px; border-radius:3px; background:var(--sky-500);
  transition:width .3s var(--ease);
}
.nav a:hover{ background:var(--sky-50); }
.nav a.is-active{ color:var(--sky-600); }
.nav a.is-active::after{ width:18px; }
.header__cta{ display:none; }
@media (min-width:1000px){ .header__cta{ display:inline-flex; } }

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:0 12px; border:1px solid var(--line); border-radius:14px;
  background:#fff; cursor:pointer; margin-left:auto;
}
@media (min-width:1000px){ .burger{ display:none; } }
.burger span{ display:block; height:2px; border-radius:2px; background:var(--ink); transition:.3s var(--ease); }
.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); }

.drawer{
  position:fixed; inset:0; z-index:110; background:rgba(18,50,92,.35);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.drawer.is-open{ opacity:1; pointer-events:auto; }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(400px,88vw);
  background:#fff; padding:1.6rem 1.5rem 2.5rem; overflow-y:auto;
  transform:translateX(100%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; gap:.2rem;
}
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.drawer__head img{ height:52px; width:auto; flex:none; }
.drawer__close{
  flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer;
}
.drawer__link{
  display:flex; align-items:center; justify-content:space-between;
  padding:.95rem .3rem; border-bottom:1px solid var(--line-soft);
  color:var(--ink); font-weight:800; font-size:1.05rem;
}
.drawer__link span{ color:var(--sky-300); }
.drawer .btn{ margin-top:1.4rem; }

/* ---------- 6. Hero ---------- */
.hero{ position:relative; padding-block:clamp(3rem,2rem + 5vw,6.5rem) clamp(4.5rem,3rem + 7vw,9rem); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(70% 60% at 12% 8%, #EAF5FD 0%, rgba(234,245,253,0) 60%),
    radial-gradient(55% 55% at 90% 20%, #FDF3E4 0%, rgba(253,243,228,0) 62%),
    linear-gradient(180deg,#F8FBFE 0%, var(--cream) 78%);
}
.hero__clouds{ position:absolute; inset:auto 0 -1px 0; z-index:0; width:100%; height:auto; pointer-events:none; }
.hero__grid{ display:grid; gap:clamp(2.5rem,2rem + 3vw,4.5rem); align-items:center; position:relative; z-index:1; }
@media (min-width:960px){ .hero__grid{ grid-template-columns:1.03fr .97fr; } }

.hero__badge{
  display:inline-flex; align-items:center; gap:.6rem; padding:.42rem .95rem .42rem .5rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow-xs); font-size:.85rem; font-weight:700; color:var(--ink-500);
  margin-bottom:1.5rem;
}
.hero__badge b{ color:var(--ink); }
.hero__badge i{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),#ffd75e); font-style:normal; font-size:.85rem;
}
.hero h1{ margin-bottom:1.1rem; }
.hero h1 em{ font-style:normal; display:block; }
.hero__lead{ font-size:var(--step-1); max-width:38ch; margin-bottom:1.9rem; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.4rem; margin-top:2.6rem;
  padding-top:1.8rem; border-top:1px solid var(--line);
}
.hero__meta div b{
  display:block; font-family:var(--font-display); font-size:1.85rem; color:var(--ink); line-height:1;
}
.hero__meta div span{ font-size:.85rem; color:var(--ink-400); font-weight:700; letter-spacing:.04em; }

.hero__media{ position:relative; }
.hero__frame{
  position:relative; border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 90px; overflow:hidden;
  box-shadow:var(--shadow-lg); background:var(--sky-100); aspect-ratio:4/4.5;
  transform:rotate(-1.2deg);
}
.hero__frame img{ width:100%; height:100%; object-fit:cover; }
.hero__blob{ position:absolute; z-index:-1; border-radius:50%; filter:blur(10px); opacity:.6; }
.hero__blob--a{ width:190px; height:190px; background:var(--sky-200); top:-45px; right:-35px; }
.hero__blob--b{ width:150px; height:150px; background:#FDE9C9; bottom:-30px; left:-40px; }
.hero__card{
  position:absolute; left:clamp(-12px,-1vw,0px); bottom:clamp(18px,3vw,42px);
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8); border-radius:22px; padding:.95rem 1.25rem;
  box-shadow:var(--shadow-md); display:flex; align-items:center; gap:.85rem; max-width:min(300px,74%);
}
.hero__card i{
  display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:14px;
  background:linear-gradient(135deg,var(--sky-100),var(--sky-200)); font-style:normal; font-size:1.35rem;
}
.hero__card b{ display:block; font-size:.95rem; color:var(--ink); line-height:1.25; }
.hero__card span{ font-size:.8rem; color:var(--ink-400); }

/* ---------- 7. Cinta de datos ---------- */
.ribbon{ background:var(--ink); color:#DCEAF8; position:relative; z-index:2; }
.ribbon__in{ display:grid; gap:1px; background:rgba(255,255,255,.12); grid-template-columns:repeat(2,1fr); }
@media (min-width:880px){ .ribbon__in{ grid-template-columns:repeat(4,1fr); } }
.ribbon__item{ background:var(--ink); padding:1.5rem 1.3rem; display:flex; gap:.9rem; align-items:flex-start; }
.ribbon__item svg{ width:24px; height:24px; flex:none; color:var(--sky-300); margin-top:2px; }
.ribbon__item b{ display:block; color:#fff; font-size:.98rem; font-weight:800; }
.ribbon__item span{ font-size:.85rem; color:#A9C4E1; line-height:1.5; }

/* ---------- 8. Tarjetas ---------- */
.grid{ display:grid; gap:clamp(1.1rem,.8rem + 1vw,1.8rem); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,1.2rem + .8vw,2.2rem);
  box-shadow:var(--shadow-xs);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--sky-200); }
.card__ico{
  display:grid; place-items:center; width:56px; height:56px; border-radius:18px; margin-bottom:1.1rem;
  background:linear-gradient(135deg,var(--sky-100),var(--sky-200)); color:var(--sky-600);
}
.card__ico svg{ width:27px; height:27px; }
.card h3{ font-size:var(--step-1); margin-bottom:.55rem; }
.card p{ margin:0; font-size:.97rem; }

/* Niveles */
.level{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-xs);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.level:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.level__top{ padding:1.7rem 1.7rem 1.4rem; color:#fff; position:relative; overflow:hidden; }
.level__top::after{
  content:""; position:absolute; width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.13); right:-50px; top:-60px;
}
.level--a .level__top{ background:linear-gradient(135deg,#35A2DE,#1B6FA8); }
.level--b .level__top{ background:linear-gradient(135deg,#46A93F,#2C7D33); }
.level--c .level__top{ background:linear-gradient(135deg,#7E2E8E,#4E2170); }
.level__top small{ text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:.73rem; opacity:.85; position:relative; }
.level__top h3{ color:#fff; margin:.35rem 0 .1rem; font-size:var(--step-2); position:relative; }
.level__top p{ margin:0; color:rgba(255,255,255,.9); font-size:.93rem; position:relative; }
.level__body{ padding:1.5rem 1.7rem 1.9rem; flex:1; }
.level__body li{ display:flex; gap:.65rem; padding:.5rem 0; font-size:.95rem; border-bottom:1px dashed var(--line-soft); }
.level__body li:last-child{ border-bottom:0; }
.level__body li svg{ width:19px; height:19px; flex:none; color:var(--green); margin-top:4px; }

/* ---------- 9. Bloque partido ---------- */
.split{ display:grid; gap:clamp(2.2rem,1.5rem + 3vw,4.5rem); align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--flip > *:first-child{ order:2; }
}

.collage{ position:relative; }
.collage__main{
  border-radius:var(--r-xl) 90px var(--r-xl) var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:4/3.1; background:var(--sky-100);
}
.collage__main img{ width:100%; height:100%; object-fit:cover; }
.collage__sub{
  position:absolute; right:-6px; bottom:-42px; width:44%; aspect-ratio:1/1;
  border-radius:28px; overflow:hidden; border:7px solid #fff; box-shadow:var(--shadow-md);
  background:var(--sky-100);
}
.collage__sub img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:899px){ .collage{ margin-bottom:3.4rem; } }

.checklist li{ display:flex; gap:.85rem; align-items:flex-start; padding:.62rem 0; font-size:1rem; }
.checklist li svg{
  width:24px; height:24px; flex:none; margin-top:3px; color:#fff; padding:5px; border-radius:50%;
  background:linear-gradient(135deg,var(--green),#2F8A34);
}

/* ---------- 10. Misión / Visión ---------- */
.panels{ display:grid; gap:clamp(1.2rem,1rem + 1vw,2rem); }
@media (min-width:880px){ .panels{ grid-template-columns:1fr 1fr; } }
.panel{
  position:relative; border-radius:var(--r-lg); padding:clamp(1.9rem,1.4rem + 1.6vw,3rem);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.panel--mision{ background:linear-gradient(150deg,#123A6B,#0C2748); color:#D6E5F5; }
.panel--vision{ background:linear-gradient(150deg,#FFFFFF,#EFF7FD); border:1px solid var(--line); }
.panel h3{ font-size:var(--step-3); margin-bottom:1rem; position:relative; }
.panel--mision h3{ color:#fff; }
.panel p{ position:relative; }
.panel p:last-child{ margin-bottom:0; }
.panel__mark{
  position:absolute; right:-8px; top:-40px; font-family:var(--font-display);
  font-size:11rem; line-height:1; opacity:.1; user-select:none;
}
.panel--mision .panel__mark{ color:#fff; }
.panel--vision .panel__mark{ color:var(--sky-500); }
.panel__tag{
  display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; padding:.3rem .8rem; border-radius:999px; margin-bottom:1rem; position:relative;
}
.panel--mision .panel__tag{ background:rgba(255,255,255,.14); color:#BFDCF6; }
.panel--vision .panel__tag{ background:var(--sky-100); color:var(--sky-600); }

/* ---------- 11. Compromisos ---------- */
.commit{ counter-reset:c; display:grid; gap:1.1rem; }
@media (min-width:760px){ .commit{ grid-template-columns:1fr 1fr; } }
.commit li{
  counter-increment:c; position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:1.5rem 1.6rem 1.5rem 4.6rem; box-shadow:var(--shadow-xs);
  font-size:.97rem; transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.commit li:hover{ border-color:var(--sky-200); transform:translateY(-3px); }
.commit li::before{
  content:counter(c,decimal-leading-zero);
  position:absolute; left:1.4rem; top:1.35rem;
  font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:var(--sky-300);
}
.commit li b{ display:block; color:var(--ink); font-family:var(--font-display); font-size:1.08rem; margin-bottom:.25rem; }

/* ---------- 12. Estadísticas ---------- */
.stats{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media (min-width:640px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:#fff; padding:1.9rem 1.5rem; text-align:center; }
.stat b{
  display:block; font-family:var(--font-display); font-size:clamp(2.1rem,1.6rem + 1.6vw,3rem);
  color:var(--ink); line-height:1; margin-bottom:.35rem;
}
.stat span{ font-size:.9rem; color:var(--ink-400); font-weight:700; }

/* ---------- 13. Galería ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:2rem 0 2.4rem; }
.filter{
  padding:.55rem 1.15rem; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; color:var(--ink-500); font-family:var(--font-sans); font-weight:800; font-size:.88rem;
  cursor:pointer; transition:.25s var(--ease);
}
.filter:hover{ border-color:var(--sky-300); color:var(--ink); }
.filter.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));
  gap:clamp(.7rem,.5rem + .6vw,1.1rem); grid-auto-rows:175px;
}
@media (max-width:620px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:135px; }
}
.gal{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r-md);
  background:var(--sky-100); box-shadow:var(--shadow-xs); grid-row:span 1;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gal--tall{ grid-row:span 2; }
.gal:hover{ box-shadow:var(--shadow-md); }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gal:hover img{ transform:scale(1.07); }
.gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.4rem .95rem .85rem;
  background:linear-gradient(180deg,rgba(12,39,72,0),rgba(12,39,72,.85));
  color:#fff; font-size:.86rem; font-weight:700;
  opacity:0; translate:0 8px; transition:.35s var(--ease); pointer-events:none;
}
.gal:hover figcaption, .gal:focus-within figcaption{ opacity:1; translate:0; }
.gal.is-hidden{ display:none; }
.gal button{
  position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; cursor:zoom-in; padding:0;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  background:rgba(9,26,48,.94); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); padding:clamp(1rem,4vw,3.5rem);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox figure{ margin:0; max-width:100%; }
.lightbox img{
  max-width:min(1100px,100%); max-height:78vh; width:auto; border-radius:16px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8); object-fit:contain; margin-inline:auto;
}
.lightbox__cap{ color:#CDE0F2; text-align:center; margin-top:1rem; font-size:.95rem; }
.lightbox__btn{
  position:absolute; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1); color:#fff; font-size:1.5rem; cursor:pointer; display:grid; place-items:center;
  transition:.25s var(--ease); backdrop-filter:blur(6px); line-height:1;
}
.lightbox__btn:hover{ background:rgba(255,255,255,.22); }
.lightbox__btn--close{ top:clamp(.8rem,3vw,1.6rem); right:clamp(.8rem,3vw,1.6rem); }
.lightbox__btn--prev{ left:clamp(.5rem,2vw,1.6rem); top:50%; translate:0 -50%; }
.lightbox__btn--next{ right:clamp(.5rem,2vw,1.6rem); top:50%; translate:0 -50%; }

/* ---------- 14. PEI ---------- */
.pei{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(135deg,#12325C 0%,#1B5C93 55%,#2A87C4 100%);
  color:#D7E7F7; padding:clamp(2.2rem,1.6rem + 3vw,4.2rem);
  display:grid; gap:2.2rem; align-items:center; box-shadow:var(--shadow-lg);
}
@media (min-width:900px){ .pei{ grid-template-columns:1.2fr .8fr; } }
.pei::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%);
  right:-140px; bottom:-220px;
}
.pei > *{ position:relative; }
.pei h2{ color:#fff; }
.pei p{ max-width:56ch; }
.pei__doc{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-lg); padding:1.7rem; backdrop-filter:blur(8px);
}
.pei__doc li{
  display:flex; gap:.6rem; padding:.5rem 0; font-size:.92rem; color:#CFE2F4;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.pei__doc li:last-child{ border:0; }
.pei__doc b{ color:#fff; }
.pei__doc svg{ width:18px; height:18px; flex:none; margin-top:5px; color:#9FD3F5; }

/* ---------- 15. Admisión ---------- */
.steps{ display:grid; gap:clamp(1.4rem,1rem + 1vw,1.9rem); counter-reset:s; }
@media (min-width:700px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{
  counter-increment:s; position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:2.6rem 1.5rem 1.7rem; box-shadow:var(--shadow-xs);
}
.step::before{
  content:counter(s); position:absolute; top:-22px; left:1.5rem;
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--sky-500),var(--ink-700)); color:#fff;
  font-family:var(--font-display); font-size:1.25rem; box-shadow:var(--shadow-sm);
}
.step h4{ margin-bottom:.4rem; }
.step p{ margin:0; font-size:.94rem; }

/* ---------- 16. FAQ ---------- */
.faq{ display:grid; gap:.8rem; }
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:.3rem 1.4rem; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq details[open]{ border-color:var(--sky-200); box-shadow:var(--shadow-sm); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.15rem 2.6rem 1.15rem 0; position:relative;
  font-weight:800; color:var(--ink); font-size:1.02rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:0; top:50%; translate:0 -50%;
  width:30px; height:30px; border-radius:50%; background:var(--sky-50); color:var(--sky-600);
  display:grid; place-items:center; font-size:1.25rem; font-weight:700; transition:.3s var(--ease);
}
.faq details[open] summary::after{ content:"\2212"; background:var(--sky-500); color:#fff; }
.faq__a{ padding:0 0 1.3rem; font-size:.97rem; }
.faq__a p:last-child{ margin:0; }

/* ---------- 17. Contacto ---------- */
.contact{ display:grid; gap:clamp(1.5rem,1.2rem + 2vw,3rem); }
@media (min-width:940px){ .contact{ grid-template-columns:.95fr 1.05fr; } }
.info li{ display:flex; gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--line); }
.info li:last-child{ border-bottom:0; }
.info i{
  display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:15px;
  background:var(--sky-50); color:var(--sky-600); font-style:normal;
}
.info i svg{ width:22px; height:22px; }
.info b{ display:block; color:var(--ink); font-size:.86rem; text-transform:uppercase; letter-spacing:.1em; }
.info a, .info p{ color:var(--ink-500); margin:0; font-size:1.02rem; }
.info a:hover{ color:var(--sky-600); }

.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,1.2rem + 1.4vw,2.4rem); box-shadow:var(--shadow-sm);
}
.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-size:.85rem; font-weight:800; color:var(--ink); margin-bottom:.4rem; }
.field input, .field select, .field textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:14px;
  font-family:inherit; font-size:.97rem; color:var(--ink); background:var(--sky-50);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--sky-300); background:#fff;
}
.field-row{ display:grid; gap:1.05rem; }
@media (min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } }
.form small{ display:block; color:var(--ink-400); font-size:.82rem; margin-top:.9rem; line-height:1.5; }

.map{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-xs); margin-top:1.6rem; background:var(--sky-50);
}
.map iframe{ width:100%; height:290px; border:0; display:block; }

/* ---------- 18. Pie ---------- */
.footer{ background:var(--ink); color:#A9C4E1; padding-top:clamp(3rem,2.4rem + 2vw,4.5rem); }
.footer__grid{ display:grid; gap:2.4rem; }
@media (min-width:860px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; } }
.footer h4{ color:#fff; font-size:1.02rem; margin-bottom:1rem; font-family:var(--font-sans); font-weight:800; }
.footer a{ color:#A9C4E1; }
.footer a:hover{ color:#fff; }
.footer li{ padding:.32rem 0; font-size:.94rem; }
.footer__brand img{ height:78px; width:auto; background:#fff; border-radius:16px; padding:.5rem .7rem; margin-bottom:1.1rem; }
.footer__brand p{ font-size:.93rem; max-width:34ch; }
.footer__social{ display:flex; gap:.6rem; margin-top:1rem; }
.footer__social a{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.09); color:#fff; transition:.25s var(--ease);
}
.footer__social a:hover{ background:var(--sky-500); transform:translateY(-3px); }
.footer__social svg{ width:19px; height:19px; }
.footer__legal{
  margin-top:2.8rem; padding-block:1.5rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.84rem; color:#89A6C6;
}

/* ---------- 19. Flotantes ---------- */
.fab{
  position:fixed; right:clamp(1rem,2vw,1.6rem); bottom:clamp(1rem,2vw,1.6rem); z-index:90;
  display:flex; flex-direction:column; gap:.7rem; align-items:center;
}
.fab a, .fab button{
  position:relative; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  border:0; cursor:pointer; box-shadow:var(--shadow-md); transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.fab a{ background:linear-gradient(135deg,#39c165,#1faa50); color:#fff; }
.fab a svg{ width:29px; height:29px; }
.fab a::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:rgba(57,193,101,.45); animation:pulse 2.8s var(--ease) infinite; z-index:-1;
}
.fab a:hover, .fab button:hover{ transform:scale(1.08); }
.to-top{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  opacity:0; pointer-events:none;
}
.to-top.is-visible{ opacity:1; pointer-events:auto; }
.to-top svg{ width:20px; height:20px; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.6 } 70%{ transform:scale(1.75); opacity:0 } 100%{ opacity:0 } }

/* ---------- 20. Animaciones ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.09s; }
[data-reveal][data-delay="2"]{ transition-delay:.18s; }
[data-reveal][data-delay="3"]{ transition-delay:.27s; }
[data-reveal][data-delay="4"]{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .fab a::after{ animation:none; }
  .gal:hover img{ transform:none; }
}

/* ---------- 21. Impresión ---------- */
@media print{
  .header,.topbar,.fab,.drawer,.filters,.form,.map,.hero__clouds{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:1.2rem; }
}