/* Gimnasio Santamaría de la Sabana — sistema visual v4 (modelo: cloaked.com; paleta TRIBU 2026)
   Islas redondeadas sobre marfil, bloques azul profundo, tarjetas flotantes sobre fotos, píldoras, carruseles. */
:root{
  --navy:#061A33; --navy-2:#1C4C80; --navy-soft:#0B2647; --gold:#C9A24B; --gold-deep:#7A5E24; --gold-soft:#F3E7C8;
  --ivory:#FFF9EE; --paper:#FFFDF8; --cream-2:#F4ECDB; --sky:#A8C5DA; --sky-soft:#E7EFF5; --ink:#101B2B; --ink-2:#4A5361; --muted:#7A8290;
  --line:rgba(6,26,51,.12); --line-dark:rgba(255,249,238,.12); --white:#fff;
  --font-display:"Domine",Georgia,"Times New Roman",serif; --font-body:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r-card:32px; --r-md:24px; --r-sm:16px; --r-pill:999px;
  --shadow:0 12px 40px rgba(6,26,51,.14); --shadow-sm:0 6px 18px rgba(6,26,51,.10);
  --ease:cubic-bezier(.2,.7,.2,1); --wrap:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--font-body);font-size:1.05rem;line-height:1.55;font-weight:400}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:var(--navy-2)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy);line-height:1.12;letter-spacing:-.012em;margin:0 0 .6em;font-weight:500;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.6rem)}
h3{font-size:1.2rem;font-weight:600;line-height:1.3}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
.lead{font-size:1.15rem;line-height:1.5;color:var(--ink-2);max-width:62ch}
.sub{font-size:1.15rem;font-weight:600;color:var(--ink);max-width:56ch;margin:0 0 .75rem}
.small{font-size:.92rem}
.muted{color:var(--muted)}
.center{text-align:center}
.center .lead,.center .sub{margin-inline:auto}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.eyebrow{font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 1rem;display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--gold);flex:none}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark .lead,.on-dark .sub,.on-dark p,.on-dark a{color:var(--ivory)}
.on-dark .lead,.on-dark .muted{color:rgba(255,249,238,.78)}
.on-dark .eyebrow{color:var(--gold)}
.accent{color:var(--gold);font-style:normal}
.link{font-weight:600;color:var(--navy-2);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px}
.link:hover{color:var(--navy)}
.on-dark .link{color:var(--ivory);border-color:var(--gold)}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:var(--ivory);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- botones (píldoras) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:var(--r-pill);font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold);color:var(--navy)}
.btn-primary:hover{background:#D4B05C;box-shadow:0 8px 20px rgba(201,162,75,.35)}
.btn-dark{background:var(--navy);color:var(--ivory)}
.btn-dark:hover{background:var(--navy-2)}
.btn-light{background:var(--ivory);color:var(--navy)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy)}
.on-dark .btn-ghost{color:var(--ivory);border-color:var(--line-dark)}
.on-dark .btn-primary,.on-dark a.btn-primary{color:var(--navy)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-sm{padding:.6rem 1.1rem;font-size:.92rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.25rem}
.arrow-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.arrow-btn svg{width:18px;height:18px}
.arrow-btn:hover{background:var(--gold);border-color:var(--gold)}
.arrow-btn[disabled]{opacity:.35;cursor:default}
.on-dark .arrow-btn{background:transparent;color:var(--ivory);border-color:var(--line-dark)}

/* ---------- barra superior + header */
.topbar{background:var(--navy);color:rgba(255,249,238,.85);font-size:.86rem;text-align:center;padding:.1rem 1rem}
.topbar a{color:var(--gold);font-weight:600;text-decoration:none;display:inline-block;padding:.35rem 0}
.topbar a:hover{text-decoration:underline}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,249,238,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .wrap{max-width:var(--wrap);margin:0 auto;padding:.7rem 16px;display:flex;align-items:center;gap:1rem}
.brand img{height:44px;width:auto}
.nav{display:none;align-items:center;margin-left:auto;margin-right:auto;gap:.15rem}
.nav a{padding:.55rem .8rem;border-radius:var(--r-pill);font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;transition:background .2s}
.nav a:hover,.nav a[aria-current="page"]{background:var(--cream-2)}
.has-sub{position:relative}
.has-sub .sub{display:none;position:absolute;top:100%;left:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:.5rem;min-width:200px;box-shadow:var(--shadow-sm);flex-direction:column}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.has-sub .sub a{display:block;padding:.55rem .8rem;border-radius:10px}
.header-actions{display:none;gap:.5rem;margin-left:auto}
.menu-btn{margin-left:auto;background:transparent;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:.55rem .9rem;font:inherit;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
.menu-btn .bars{width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;display:inline-block}
.mobile-nav{display:none;flex-direction:column;gap:.25rem;padding:.75rem 16px 1.25rem;background:var(--paper);border-bottom:1px solid var(--line)}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:.7rem .5rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-nav a.sub-item{padding-left:1.5rem;font-weight:400}
.mobile-nav .btn{margin-top:.75rem;border-bottom:0}
@media(min-width:1040px){.nav{display:flex}.header-actions{display:flex}.menu-btn,.mobile-nav{display:none!important}}

/* ---------- página en islas */
/* el aire entre bloques debe guardar relación con el de adentro (72-86px): con 16px las tarjetas se tocaban */
.page{max-width:none;margin:0;padding:16px 16px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,2.8vw,3rem)}
.island{width:100%;max-width:calc(var(--wrap) - 32px);margin-inline:auto;border-radius:var(--r-card);padding:clamp(2.5rem,6vw,5.5rem) clamp(1.25rem,5vw,5rem);position:relative;overflow:hidden}
.island-cream{background:var(--paper);border:1px solid var(--line)}
.island-white{background:var(--white);border:1px solid var(--line)}
.island-navy{background:var(--navy);color:var(--ivory)}
.island-sky{background:linear-gradient(170deg,var(--sky-soft) 0%,#F3F7FA 60%,var(--paper) 100%);border:1px solid rgba(28,76,128,.14)}
/* banda abierta: ancho completo sin marco de tarjeta */
.band{padding-block:clamp(2.5rem,5vw,4.5rem);padding-inline:clamp(1.25rem,5vw,5rem)}
.band-wide{max-width:2200px;width:100%;margin-inline:auto;padding-inline:max(clamp(1.25rem,5vw,5rem), calc((100% - 1680px) / 2))}
.acards{display:grid;gap:1.25rem;grid-template-columns:1fr;align-items:start}
.acard{display:flex;flex-direction:column;gap:.45rem}
.acard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);margin-bottom:.35rem}
.acard h3{margin:0;font-size:1.12rem;line-height:1.3}
.acard p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.5}
@media(min-width:620px){.acards{grid-template-columns:1fr 1fr;gap:2.25rem 1.5rem}
  /* la quinta tarjeta ocupa la fila entera, con la foto al lado del texto */
  .acards>:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,34%) 1fr;grid-template-rows:auto auto;column-gap:1.5rem;row-gap:.45rem;align-content:center}
  .acards>:last-child img{grid-column:1;grid-row:1/3;align-self:center;margin-bottom:0}
  .acards>:last-child h3{grid-column:2;grid-row:1;align-self:end}
  .acards>:last-child p{grid-column:2;grid-row:2;align-self:start}}
@media(min-width:1280px){.acards{grid-template-columns:repeat(5,1fr);gap:2.25rem 1.5rem}
  .acards>:last-child{grid-column:auto;display:flex;flex-direction:column;gap:.45rem}
  .acards>:last-child img,.acards>:last-child h3,.acards>:last-child p{grid-column:auto;grid-row:auto;align-self:auto}
  .acards>:last-child img{margin-bottom:.35rem}}
.island-snug{padding-block:clamp(1.75rem,3vw,2.75rem)}
.island-snug .section-head{margin-bottom:clamp(1.25rem,2.4vw,2rem)}
.island-wide{max-width:2200px;padding-inline:max(clamp(1.25rem,5vw,5rem), calc((100% - 1680px) / 2))}
.island-sky .accent{color:var(--gold-deep)}
.island-plain{padding-inline:0;background:transparent}
.island-tight{padding-block:clamp(1.5rem,3vw,2.5rem)}
.section-head{max-width:820px;margin-bottom:clamp(1.5rem,4vw,3rem)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head .lead{margin-top:.5rem}
.narrow{max-width:760px}
.narrow.center{margin-inline:auto}
.split{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:3.5rem}}
.grid{display:grid;gap:1.25rem}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
@media(min-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- hero */
.hero{display:grid;gap:2rem;align-items:center}
.hero-copy .micro,.stage-copy .micro{font-size:.92rem;color:var(--ink-2);margin:.9rem 0 0;max-width:46ch}
.hero-copy .facts,.stage-copy .facts{margin:1.5rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.hero-copy .facts li,.stage-copy .facts li{font-size:.86rem;font-weight:600;color:var(--navy);background:var(--cream-2);border-radius:var(--r-pill);padding:.4rem .8rem}
.media{position:relative;border-radius:var(--r-md);overflow:visible}
.media>img{width:100%;border-radius:var(--r-md);object-fit:cover;aspect-ratio:4/5}
.media.wide>img{aspect-ratio:16/11}
.media.square>img{aspect-ratio:1/1}
.media.pano>img{aspect-ratio:16/10}
/* el hero interior va a ancho completo: la columna de texto necesita tope de medida */
.page-hero h1{max-width:16ch}
.page-hero .lead{max-width:52ch}
@media(min-width:900px){.hero{grid-template-columns:1.05fr .95fr;gap:3.5rem}}

/* tarjetas flotantes sobre fotos */
.float{position:absolute;background:var(--paper);color:var(--ink);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:.85rem 1rem;display:flex;align-items:center;gap:.75rem;font-size:.92rem;line-height:1.25;min-width:180px;max-width:min(260px,80%);will-change:transform;transition:transform .35s var(--ease)}
.float strong{display:block;font-size:1rem;color:var(--navy)}
.float span{color:var(--ink-2)}
.float .ico{flex:none;width:36px;height:36px;border-radius:50%;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center}
.float .ico svg{width:18px;height:18px}
.float.dark{background:var(--navy);color:var(--ivory)}
.float.dark strong{color:var(--ivory)}
.float.dark span{color:rgba(255,249,238,.75)}
.float.dark .ico{background:rgba(201,162,75,.18);color:var(--gold)}
.float.tl{top:6%;left:-6%}.float.tr{top:8%;right:-6%}.float.bl{bottom:8%;left:-6%}.float.br{bottom:8%;right:-6%}
@media(max-width:899px){.media{display:grid;gap:.6rem}.media .float{position:static;max-width:none;transform:none!important;box-shadow:var(--shadow-sm)}.cta-final .media{position:static}}
.roster{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:88px;flex:none}
.roster i{width:14px;height:14px;border-radius:50%;background:var(--sky);display:block}
.roster i:nth-child(3n){background:var(--navy-2)}
.roster i:nth-child(4n){background:var(--gold)}

/* ---------- tarjetas oscuras con gráfico (sección problema) */
.dcards{display:grid;gap:.75rem;margin-top:2rem;grid-template-columns:1fr}
@media(min-width:400px){.dcards{grid-template-columns:1fr 1fr}}
@media(min-width:640px){.dcards{gap:1rem}}
@media(min-width:1040px){.dcards{grid-template-columns:repeat(4,1fr)}}
.dcard{background:var(--white);border:1px solid rgba(28,76,128,.16);border-radius:var(--r-md);padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;transition:box-shadow .25s,transform .25s var(--ease)}
.dcard:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.dcard .art{--band:clamp(104px,11vw,150px);--gsize:calc(var(--band) * .7);height:var(--band);border-radius:var(--r-sm);background:linear-gradient(158deg,rgba(168,197,218,.3) 0%,rgba(168,197,218,.10) 55%,rgba(201,162,75,.10) 100%);display:grid;place-items:center;overflow:hidden;margin-bottom:.35rem}
.dcard .art svg{height:var(--gsize);width:var(--gsize);color:var(--navy-2);overflow:visible}
.dcard .art svg .ink{color:var(--gold-deep);stroke:var(--gold-deep)}
.dcard .art svg .slot{fill:rgba(201,162,75,.16);stroke:none}
.dcard h3{margin:0;font-size:1.1rem;line-height:1.3}
.dcard .detail{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.5}
.dcard .detail .link{border-bottom-width:1px}
/* cierre de la sección: una sola columna, a medida de lectura */
.closer{max-width:760px}
.closer h3{font-size:1.5rem;margin-bottom:.5rem}
@media(max-width:639px){
  .dcard{padding:.8rem .85rem 1rem}
  .dcard h3{font-size:1rem;line-height:1.25}
  .dcard .art{--band:96px;--gsize:calc(var(--band) * .8);margin-bottom:.2rem}
  .dcard .detail{font-size:.9rem;line-height:1.45}
}

/* ---------- columnas de rasgos (icono + título + texto) */
.features{display:grid;gap:1.5rem 2rem;margin-top:1.5rem}
@media(min-width:640px){.features{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.features.cols-4{grid-template-columns:repeat(4,1fr)}.features.cols-3{grid-template-columns:repeat(3,1fr)}}
.feature .ico{width:40px;height:40px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;margin-bottom:.8rem}
.feature .ico svg{width:20px;height:20px}
.feature h3{font-size:1.08rem;margin:0 0 .3rem}
.feature p{margin:0;color:var(--ink-2);font-size:.98rem}
.on-dark .feature .ico{background:rgba(201,162,75,.16);color:var(--gold)}
.on-dark .feature p{color:rgba(255,249,238,.78)}
.features.big{gap:1.75rem 2.5rem}
.features.big .draw{display:block;width:clamp(64px,5vw,84px);height:clamp(64px,5vw,84px);color:var(--navy-2);margin-bottom:.8rem}
.features.big .draw svg{width:100%;height:100%;overflow:visible}
.features.big .draw svg .ink{color:var(--gold-deep);stroke:var(--gold-deep)}
.features.big h3{font-size:1.18rem;margin-bottom:.45rem}
.features.big p{font-size:1rem;line-height:1.55}
/* dos fotos con su pie, sin tarjetas encima */
/* cierre y fotos en la misma fila: la sección cabe en una pantalla */
.fe-bottom{display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(1.25rem,2.4vw,2rem)}
@media(min-width:1000px){.fe-bottom{grid-template-columns:minmax(290px,.85fr) 1.15fr;align-items:center}}
@media(max-width:999px){.fe-bottom .duo{order:-1}}
.fe-bottom .closer{max-width:none}
.fe-bottom .closer h3{font-size:clamp(1.3rem,2vw,1.6rem)}
.duo{display:grid;gap:1rem;margin-top:0}
@media(min-width:760px){.duo{grid-template-columns:1fr 1fr}}
.duo figure{margin:0}
.duo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md)}
.duo figcaption{font-size:.86rem;color:var(--muted);margin-top:.55rem}

/* ---------- baldosas con foto y tarjetas flotantes */
.tiles{display:grid;gap:1rem;margin-top:2rem}
@media(min-width:900px){.tiles{grid-template-columns:1.4fr 1fr}}
.tile{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:340px;background:var(--navy)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,26,51,0) 40%,rgba(6,26,51,.55) 100%);pointer-events:none}
.tile .float{z-index:2}
.tile .float.tl{left:4%;top:6%}.tile .float.tr{right:4%;top:6%}.tile .float.bl{left:4%;bottom:14%}.tile .float.br{right:4%;bottom:14%}
.tile .stack{position:absolute;right:6%;top:50%;transform:translateY(-50%);display:grid;gap:.6rem;z-index:2;width:min(280px,82%)}
.tile .stack .float{position:static;max-width:none}
.tile .stack .float:nth-child(2){transform:translateX(-14px)}
.tile .stack .float:nth-child(3){transform:translateX(10px)}
.tile .cap{position:absolute;left:1.25rem;bottom:1.1rem;z-index:2;color:var(--ivory);font-size:.9rem}
.tile .cap strong{display:block;font-family:var(--font-display);font-size:1.15rem;font-weight:600}

/* ---------- fases de inmersión en inglés: grados, enfoque y las materias que se ven en el idioma */
.phases{display:grid;gap:1.25rem}
@media(min-width:880px){.phases{grid-template-columns:repeat(3,1fr)}}
.phase{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.55rem}
.phase .grades{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.phase h3{margin:0;font-size:1.18rem;color:var(--navy)}
.phase p{margin:0;color:var(--ink-2);font-size:.97rem}
.phase .subjects{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.9rem}
.phase .subjects span{background:var(--cream-2);color:var(--navy);border-radius:var(--r-pill);padding:.25rem .7rem;font-size:.82rem;white-space:nowrap}

/* aliados de un programa (Pearson, iM-PROVE en bilingüe): tarjeta con el logo arriba y para qué sirve al estudiante */
.partners{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:760px){.partners{grid-template-columns:repeat(2,1fr)}}
.partner{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.55rem}
.partner .logo{height:48px;display:flex;align-items:center;margin-bottom:.6rem}
.partner .logo img{height:auto;flex:none}
.partner h3{margin:0}
.partner p{margin:0;color:var(--ink-2);max-width:60ch}
.partner .logo.circles{gap:.75rem;height:auto}
.partner .logo.circles img{width:88px;height:88px;border-radius:50%;background:var(--white);border:1px solid var(--line);padding:4px;object-fit:contain}
.partner .link{align-self:flex-start;margin-top:.35rem}
/* aliado al pie de una tarjeta (Racing en Deporte) y franja de aliados de una página (fe) */
.ally-chip{display:flex;align-items:center;gap:.75rem;margin-top:1rem;font-size:.9rem;line-height:1.35;color:var(--ink-2)}
.ally-chip img{width:56px;height:56px;flex:none;border-radius:50%;background:var(--white);border:1px solid var(--line);padding:3px;object-fit:contain}
.ally-chip strong{color:var(--navy);white-space:nowrap}
.ally-strip{margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:clamp(1.25rem,2vw,1.75rem);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.ally-strip .lbl{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ally-strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1rem 1.75rem}
.ally-strip li{display:flex;align-items:center;gap:.75rem;font-weight:600;color:var(--navy);font-size:.95rem}
.ally-strip img{width:76px;height:76px;flex:none;border-radius:50%;background:var(--white);border:1px solid var(--line);padding:4px;object-fit:contain}

/* ---------- escalera por grados: la progresión es real, por eso va ordenada */
.ladder{display:grid}
@media(min-width:800px){.ladder{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem)}}
.ladder>div{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--line)}
.ladder .g{font-weight:600;color:var(--gold-deep);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:9ch}
.ladder p{margin:0;color:var(--ink-2)}
.on-dark .ladder>div{border-bottom-color:rgba(255,249,238,.2)}
.on-dark .ladder .g{color:var(--gold)}
.on-dark .ladder p{color:rgba(255,249,238,.82)}

/* ---------- videos del colegio: cargan solo al pulsar play */
.videos{display:grid;gap:1.5rem}
@media(min-width:760px){.videos{grid-template-columns:repeat(3,1fr)}}
.videos figure{margin:0}
/* height:auto es obligatorio: el atributo height del HTML anularía el aspect-ratio */
.videos video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md);background:var(--navy);display:block}
.videos figcaption{font-size:.88rem;color:var(--ink-2);margin-top:.6rem}

/* ---------- fila de logos / aliados */
/* doce aliados en filas de 3, 4 o 6: siempre completas */
.logos{display:grid;grid-template-columns:repeat(3,76px);justify-content:center;align-items:center;gap:1.5rem 2.5rem}
@media(min-width:520px){.logos{grid-template-columns:repeat(4,76px)}}
@media(min-width:760px){.logos{grid-template-columns:repeat(6,76px)}}
.logos img{width:76px;height:76px;object-fit:contain;border-radius:50%;background:var(--white);border:1px solid var(--line);padding:6px;filter:grayscale(.2)}
.logos .lbl{grid-column:1/-1;text-align:center;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
/* en escritorio los logos crecen; en móvil y tablet se quedan en 76 px */
@media(min-width:1024px){.logos{grid-template-columns:repeat(6,120px);gap:2rem 3rem}.logos img{width:120px;height:120px;padding:9px}.logos .lbl{font-size:.85rem;margin-bottom:.5rem}}
@media(min-width:1280px){.logos{grid-template-columns:repeat(6,140px);gap:2.25rem 3.5rem}.logos img{width:140px;height:140px;padding:10px}}

/* ---------- carruseles */
.carousel{position:relative}
.carousel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.carousel-head .section-head{margin-bottom:0}
.carousel-nav{display:flex;gap:.5rem;flex:none}
.track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 12px;margin:-4px -4px 0;scrollbar-width:none;cursor:grab}
.track::-webkit-scrollbar{display:none}
.track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.slide{flex:0 0 min(300px,78vw);scroll-snap-align:start}
.slide-wide{flex:0 0 100%;scroll-snap-align:start}
@media(min-width:900px){.slide-wide{flex:0 0 calc((100% - 1rem) / 2)}}
.pcard{display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:inherit;height:100%}
.pcard img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:20px;margin-bottom:.4rem}
.pcard h3{margin:0;font-size:1.1rem}
.pcard p{margin:0;color:var(--ink-2);font-size:.96rem}
.on-dark .pcard p{color:rgba(255,249,238,.78)}
.spot{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:var(--navy)}
.spot img{width:100%;height:100%;object-fit:cover}
.spot .cap{position:absolute;left:1.25rem;right:1.25rem;bottom:1.25rem;color:var(--ivory);z-index:2;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.spot.clipped .cap{opacity:0;transform:translateY(8px)}
.spot.clipped::after{opacity:.45}
@media(prefers-reduced-motion:reduce){.spot .cap{transition:none}}
.spot .cap strong{display:block;font-family:var(--font-display);font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:600;margin-bottom:.2rem}
.spot .cap span{font-size:.95rem;color:rgba(255,249,238,.85)}
.spot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,26,51,0) 45%,rgba(6,26,51,.7) 100%)}
.dots{display:flex;justify-content:center;gap:0;margin-top:.5rem}
/* el punto se ve de 8 px, pero se toca en un área de 24 px */
.dots button{box-sizing:content-box;width:8px;height:8px;border-radius:50%;border:0;background:var(--line);padding:8px;background-clip:content-box;cursor:pointer}
.dots button[aria-current="true"]{background:var(--gold);width:22px;border-radius:4px}

/* ---------- avatares alrededor de un titular */
.avatars-hero{position:relative;text-align:center;padding:clamp(1rem,4vw,3rem) 0;max-width:1320px;margin-inline:auto}
.avatars-hero h2{max-width:20ch;margin-inline:auto}
.avatars-hero .avatar{position:absolute;width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--paper);box-shadow:var(--shadow-sm);display:none}
.avatars-hero .avatar:nth-child(odd){width:54px;height:54px}
@media(min-width:1180px){.avatars-hero .avatar{display:block}
.avatars-hero .a1{left:6%;top:12%}.avatars-hero .a2{left:14%;top:58%}.avatars-hero .a3{left:22%;top:2%}.avatars-hero .a4{right:6%;top:18%}.avatars-hero .a5{right:15%;top:64%}.avatars-hero .a6{right:23%;top:4%}.avatars-hero .a7{left:4%;bottom:6%}}
.avatar-row{display:flex;justify-content:center;gap:.3rem;margin-bottom:1rem}
.avatar-row img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--paper);margin-left:-8px}
@media(min-width:1180px){.avatar-row{display:none}}


/* ---------- testimonios */
.tcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.75rem;display:flex;flex-direction:column;gap:.8rem}
.tcard .kicker{font-family:var(--font-display);font-weight:600;color:var(--navy-2);font-size:1.05rem}
.tcard blockquote{margin:0;font-size:1.05rem;line-height:1.5;flex:1}
.tcard figcaption{display:flex;align-items:center;gap:.7rem}
.tcard figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.tcard figcaption strong{display:block;color:var(--navy)}
.tcard figcaption span{font-size:.88rem;color:var(--muted)}
.testi .slide{flex-basis:min(420px,86vw)}
/* en escritorio ya se ven casi las 4 tarjetas: deja de ser carrusel, pasa a cuadrícula fija */
@media(min-width:900px){
  .testi .dots{display:none}
  .testi .track{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;overflow:visible;cursor:auto}
}

/* ---------- cierre con formulario */
.cta-final{display:grid;gap:1.25rem;align-items:stretch;max-width:1240px;margin-inline:auto}
@media(min-width:1000px){.cta-final{grid-template-columns:1.15fr .85fr;gap:1.75rem}}
.cta-card{background:var(--cream-2);border-radius:var(--r-md);padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-direction:column;justify-content:center}
/* una sola tarjeta: el formulario no repite marco dentro del bloque crema */
.cta-card .form-card{background:none;border:0;padding:0}
.cta-card .sedes{margin:.5rem 0 1.5rem}
.sedes{font-family:var(--font-display);font-weight:600;color:var(--gold-deep);letter-spacing:.01em;margin:0}
.on-dark .sedes{color:var(--gold)}

/* franja de disponibilidad bajo el titular */
.open-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem .9rem;margin-top:1.25rem}
.open-badge{background:var(--gold);color:var(--navy);font-weight:700;font-size:.9rem;letter-spacing:.01em;border-radius:var(--r-pill);padding:.4rem 1rem}

/* la foto se estira para igualar exactamente la altura del formulario */
.cta-photo{position:relative;margin:0;min-height:340px;border-radius:var(--r-md);overflow:hidden;background:var(--navy)}
.cta-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.cta-photo .float{max-width:min(250px,80%)}
.cta-photo .float.tl{left:5%;top:5%}
.cta-photo .float.br{right:5%;bottom:5%}

/* los tres pasos, a lo ancho, debajo del formulario */
.cta-steps{max-width:1240px;margin:clamp(1.5rem,3vw,2.25rem) auto 0;border-top:1px solid var(--line);padding-top:clamp(1.5rem,3vw,2rem)}
.cta-steps .lbl{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem}
.cta-steps .enroll-steps li{background:var(--white)}
.cta-side-link{margin:1rem 0 0}

/* ---------- formularios */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem}
.form-grid{display:grid;gap:.9rem}
@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-size:.9rem;font-weight:600;color:var(--navy)}
input,select,textarea{width:100%;font:inherit;padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink)}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--navy-2);outline:none;box-shadow:0 0 0 3px rgba(28,76,128,.15)}
.consent{display:flex;gap:.6rem;font-size:.85rem;color:var(--ink-2);align-items:flex-start}
.consent input{width:20px;height:20px;flex:none;margin-top:.1rem;accent-color:var(--navy)}
.form-ok{display:none;margin-top:.8rem;padding:.8rem 1rem;border-radius:12px;background:var(--gold-soft);color:var(--navy);font-weight:600;font-size:.95rem}
.form-ok.show{display:block}

/* ---------- páginas interiores */
.page-hero{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.page-hero{grid-template-columns:1.1fr .9fr;gap:3.5rem}}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:1rem}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--navy)}
.on-dark .breadcrumb,.on-dark .breadcrumb a{color:rgba(255,249,238,.7)}
.byline{color:var(--muted);font-size:.95rem}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.card h3{margin:0}
.card p{margin:0;color:var(--ink-2)}
.card .ico{width:40px;height:40px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;margin-bottom:.4rem}
.card .ico svg{width:20px;height:20px}
.level-card{padding:0;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s var(--ease),box-shadow .25s}
.level-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.level-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.level-card .body{padding:1.25rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.4rem}
.level-card .body .link{align-self:flex-start;margin-top:.5rem}
.evidence{display:grid;gap:2.25rem 3rem}
@media(min-width:760px){.evidence{grid-template-columns:1fr 1fr}}
/* sin filete de acento arriba: la jerarquía la hacen la tipografía y el aire */
.evidence>div{padding-top:1.1rem;border-top:1px solid var(--line)}
.evidence h3{font-size:1.12rem;margin:0 0 .4rem;color:var(--navy)}
.evidence p{margin:0;color:var(--ink-2)}
.on-dark .evidence>div{border-top-color:rgba(255,249,238,.22)}
.on-dark .evidence h3{color:var(--ivory)}
.on-dark .evidence p{color:rgba(255,249,238,.82)}
.objection{display:flex;flex-direction:column;gap:.8rem}
.objection h3{font-size:1.15rem;margin:0;color:var(--navy-2)}
.quote{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem;display:flex;flex-direction:column;gap:1rem;position:relative;flex:1}
.quote::before{content:"“";position:absolute;top:.3rem;right:1.1rem;font-family:var(--font-display);font-size:3.5rem;line-height:1;color:var(--gold);opacity:.6}
.quote blockquote{margin:0;font-size:1.02rem;line-height:1.55}
.quote figcaption{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.quote figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.quote figcaption strong{display:block;color:var(--navy)}
.quote figcaption span{font-size:.88rem;color:var(--muted)}
.list-star{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.list-star li{padding-left:1.6rem;position:relative}
.list-star li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;background:var(--gold);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.tags{list-style:none;padding:0;margin:1.25rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.tags li{font-size:.9rem;font-weight:600;color:var(--navy);background:var(--gold-soft);border-radius:var(--r-pill);padding:.4rem .9rem}
.on-dark .tags li{background:rgba(201,162,75,.16);color:var(--gold)}
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.mosaic img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:var(--r-sm)}
.mosaic figure{margin:0}
.mosaic figcaption{font-size:.78rem;color:var(--muted);margin-top:.3rem}
.photo-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem .75rem}
@media(min-width:760px){.photo-strip{grid-template-columns:repeat(4,1fr)}}
.photo-strip figure{margin:0}
.photo-strip img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:var(--r-sm)}
.photo-strip figcaption{font-size:.78rem;color:var(--muted);margin-top:.45rem}
.feature-list{display:grid;gap:1.25rem}
.feature-list .feature{display:flex;gap:1rem;align-items:flex-start}
.feature-list .feature .ico{margin:0;flex:none}
.staff-grid{display:grid;gap:2.25rem 1.25rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.staff-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.staff-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1280px){.staff-grid{grid-template-columns:repeat(5,1fr)}}
.staff-card{margin:0}
.staff-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-md);display:block}
/* mientras no hay foto del colegio: la inicial ocupa el mismo lugar y la cuadrícula no se descuadra */
.staff-initial{width:100%;aspect-ratio:1/1;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--cream-2);color:var(--gold-deep);font-family:var(--font-display,inherit);font-size:2rem;letter-spacing:.06em;line-height:1}
.staff-card figcaption{margin-top:.75rem}
.staff-card strong{display:block;color:var(--navy);font-size:.98rem;line-height:1.25}
.staff-card .role{display:block;color:var(--gold-deep);font-size:.82rem;font-weight:600;margin:.3rem 0 .45rem}
.staff-card p{margin:0;color:var(--ink-2);font-size:.86rem;line-height:1.4}
/* Camilo y Tatiana no son docentes: panel horizontal bajo la cuadrícula, para que nadie quede solo en la última fila */
.staff-wide{display:grid;grid-template-columns:minmax(0,180px) 1fr;gap:1.75rem;align-items:center;margin-top:2.25rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:1.25rem}
.staff-wide figcaption{margin-top:0;max-width:62ch}
.staff-wide strong{font-size:1.1rem}
.staff-wide p{font-size:.95rem;line-height:1.5}
/* cita de la fundadora: comilla grande en oro, sin filete lateral (el filete de un solo lado se lee como plantilla de IA) */
.teen{font-family:var(--font-display);font-size:1.08rem;line-height:1.6;color:var(--navy);margin:0;position:relative;padding-top:1.9rem}
.teen::before{content:"“";position:absolute;left:-.05em;top:-.2rem;font-size:3.6rem;line-height:1;color:var(--gold)}
.allies{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem 2rem;margin-top:1rem}
.allies img{width:72px;height:72px;object-fit:contain;border-radius:50%;background:var(--white);border:1px solid var(--line);padding:6px}
.steps{display:grid;gap:1rem;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(5,1fr)}}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.25rem;counter-increment:s}
.step::before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:700;font-size:.9rem;margin-bottom:.7rem}
.step h3{font-size:1.05rem;margin:0 0 .3rem}
.step p{margin:0;color:var(--ink-2);font-size:.95rem}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.checks li{padding-left:1.7rem;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23C9A24B'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' stroke='%23061A33' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.faq details{border-top:1px solid var(--line);padding:.9rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:1rem;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq p{margin:.6rem 0 0;color:var(--ink-2)}
.contact-grid{display:grid;gap:1.5rem}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
.map{width:100%;aspect-ratio:16/10;border:0;border-radius:var(--r-sm)}
.contact-item{display:flex;gap:.9rem;align-items:flex-start}
.contact-item .ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center}
.contact-item .ico svg{width:20px;height:20px}
.contact-item strong{display:block;color:var(--navy)}
.contact-item a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);display:inline-block;padding:.3rem 0 .15rem}
.post-list{display:grid;gap:1rem}
@media(min-width:760px){.post-list{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.post-list{grid-template-columns:repeat(3,1fr)}}
.post{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.5rem;transition:transform .25s var(--ease),box-shadow .25s}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post.featured{background:var(--navy);color:var(--ivory)}
.post.featured h3,.post.featured .date{color:var(--ivory)}
.post .kicker{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
.post.featured .kicker{color:var(--gold)}
.post h3{margin:0;font-size:1.15rem}
.post p{margin:0;color:var(--ink-2);font-size:.96rem;flex:1}
.post.featured p{color:rgba(255,249,238,.8)}
.post .date{font-size:.85rem;color:var(--muted);margin-top:.5rem}
.article{max-width:680px;margin-inline:auto;font-size:1.1rem;line-height:1.65}
.article h2{font-size:1.55rem;margin-top:2rem}
.article blockquote{margin:1.75rem 0;padding:1.25rem 1.5rem;background:var(--cream-2);border-radius:var(--r-sm);color:var(--ink-2);font-style:italic}
.article img{border-radius:var(--r-sm)}
.article ul,.article ol{padding-left:1.4rem}
.guide-signal{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 0;border-top:1px solid var(--line)}
.guide-signal .n{flex:none;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);font-family:var(--font-display);font-weight:600;display:grid;place-items:center}
.guide-signal h3{margin:0 0 .3rem;font-size:1.15rem}
.guide-signal p{margin:0;color:var(--ink-2)}
.note{background:var(--gold-soft);border-radius:var(--r-sm);padding:1.5rem}
.divider{height:1px;background:var(--line);margin:2rem 0}
.ico-inline{width:18px;height:18px;vertical-align:-3px}

/* ---------- footer */
.site-footer{margin-top:16px;padding:0}
/* el cierre oscuro pegado al pie (mismo color) necesita más aire que el resto de las juntas */
/* el cierre es el límite más importante de la página: debe ser el mayor salto, no el menor */
.page>section:last-child{margin-top:clamp(1rem,2vw,2rem);margin-bottom:clamp(2.5rem,5vw,4.5rem)}
/* si además comparte el color del pie, no hay costura de color que ayude: más aire todavía */
.page>.island-navy:last-child{margin-bottom:clamp(3.5rem,7vw,6rem)}
.site-footer .inner{--pad:max(clamp(1.25rem,5vw,5rem), calc((100% - 1680px) / 2));
  max-width:none;margin:0;background:var(--navy);color:rgba(255,249,238,.8);border-radius:0;
  padding-block:clamp(2.5rem,5vw,4.5rem) 2rem;padding-inline:var(--pad)}
.foot-top{margin-bottom:clamp(2rem,4vw,3rem)}
.foot-logo{width:min(260px,70%);height:auto;display:block}
.foot-cols{display:grid;gap:2rem;grid-template-columns:1fr 1fr}
.foot-cols>div{min-width:0}
.foot-cols a{overflow-wrap:anywhere}
@media(min-width:900px){.foot-cols{grid-template-columns:repeat(4,1fr)}}
.foot-cols h4{font-family:var(--font-body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.foot-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.foot-cols a{color:rgba(255,249,238,.85);text-decoration:none;font-size:.95rem}
.foot-cols a:hover{color:var(--gold)}
.social{display:flex;gap:.5rem;margin-top:1rem}
.social a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-dark);display:grid;place-items:center;color:var(--ivory)}
.social svg{width:18px;height:18px}
.legal{border-top:1px solid var(--line-dark);margin-top:2.5rem;padding-top:1.25rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.82rem;color:rgba(255,249,238,.55)}

/* ---------- movimiento: aparición al hacer scroll y paralaje con el cursor */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal-stagger.in>*{opacity:1;transform:none}
.js .reveal-stagger.in>*:nth-child(2){transition-delay:.08s}.js .reveal-stagger.in>*:nth-child(3){transition-delay:.16s}.js .reveal-stagger.in>*:nth-child(4){transition-delay:.24s}.js .reveal-stagger.in>*:nth-child(5){transition-delay:.32s}.js .reveal-stagger.in>*:nth-child(6){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.js .reveal,.js .reveal-stagger>*{opacity:1;transform:none;transition:none}.float{transition:none}.btn:hover,.level-card:hover,.post:hover{transform:none}}

/* ---------- hero: la foto se amplía con el scroll y da paso a un fondo azul con elementos gráficos */
.scrolly{padding:0;overflow:visible;max-width:2200px;--p:0;--x:0;--copy:1;--fade:0;--c1:0;--c2:0;--c3:0;--c4:0;--s1:0;--s2:0;--s3:0}
.js .scrolly.pinned{height:430vh}
.stage{position:relative;min-height:560px;display:flex;align-items:center;
  --pad:clamp(1.25rem,5vw,5rem);--copyw:min(46vw,620px);--cgap:clamp(1.5rem,3vw,3.5rem);
  --rl:calc(var(--pad) + var(--copyw) + var(--cgap));--rw:calc(100% - var(--pad) * 2 - var(--copyw) - var(--cgap));
  padding:clamp(2rem,5vw,4rem) var(--pad)}
.js .scrolly.pinned .stage{position:sticky;top:74px;height:calc(100vh - 90px);min-height:560px;max-height:960px}
.stage-copy{position:relative;z-index:3;width:100%;max-width:var(--copyw);opacity:var(--copy);transform:translateX(calc(-28px * (1 - var(--copy))))}
.stage-copy.off{pointer-events:none;visibility:hidden}
.stage-media{position:absolute;z-index:2;left:calc(var(--rl) * (1 - var(--x)));top:calc(7% * (1 - var(--x)));
  width:calc(var(--rw) + (100% - var(--rw)) * var(--x));height:calc(86% + 14% * var(--x));
  border-radius:calc(24px + 8px * var(--x));overflow:hidden;background:var(--navy);box-shadow:var(--shadow)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + .16 * var(--x)));transform-origin:58% 45%;opacity:calc(1 - var(--fade))}

/* fondo azul degradado */
.scene{position:absolute;inset:0;opacity:var(--fade);
  background:
    radial-gradient(130% 100% at 78% 6%, rgba(28,76,128,.9) 0%, rgba(28,76,128,0) 60%),
    radial-gradient(80% 65% at 16% 96%, rgba(201,162,75,.10) 0%, rgba(201,162,75,0) 60%),
    radial-gradient(60% 55% at 50% 52%, rgba(168,197,218,.08) 0%, rgba(168,197,218,0) 72%),
    linear-gradient(168deg,#0E2F55 0%,#0A2340 45%,#061A33 100%)}
.grain{position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* escenas: cada frase tiene su propia composición y su propio movimiento, ligados al scroll.
   Una máscara radial despeja la zona del texto para que nada compita con la lectura. */
.sc{position:absolute;inset:0;pointer-events:none;color:var(--gold);
  -webkit-mask-image:radial-gradient(ellipse 44% 30% at 50% 50%,transparent 0 58%,#000 100%);mask-image:radial-gradient(ellipse 44% 30% at 50% 50%,transparent 0 58%,#000 100%)}
.sc>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sc-1{opacity:var(--c1)}.sc-2{opacity:var(--c2)}.sc-3{opacity:var(--c3)}
/* 1 · un río de símbolos de las materias cruza la tarjeta; un gran reloj marca las horas */
.sc-1 .clockface{position:absolute;inset:auto;right:-4%;top:50%;width:min(64vh,560px);height:min(64vh,560px);transform:translateY(-50%);opacity:.3;stroke-width:1.1}
.sc-1 .clockface .hand{transform:rotate(calc(var(--s1) * 320deg));transform-origin:100px 100px;transform-box:view-box;stroke-width:1.8}
.sym{position:absolute;left:var(--x);top:var(--y);font-family:var(--font-display);font-weight:500;font-size:var(--fs);line-height:1;color:var(--gold);white-space:nowrap;
  opacity:calc(.26 + .4 * var(--z));transform:translateX(calc((.5 - var(--s1)) * 95vw * var(--z))) rotate(var(--r))}
.sym.sky{color:var(--sky)}
.sym i{display:block;font-style:normal;animation:bob 8s ease-in-out infinite;animation-delay:var(--d)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* 2 · el trazo se dibuja con el scroll: la balanza encuentra su equilibrio, el camino se bifurca, la cruz aparece */
.sc-2{--k1:clamp(0, calc(var(--s2) / .26), 1);--k2:clamp(0, calc((var(--s2) - .15) / .27), 1);--k3:clamp(0, calc((var(--s2) - .34) / .26), 1);--k4:clamp(0, calc((var(--s2) - .55) / .25), 1)}
.sc-2 .balance .sway{transform:rotate(calc(-9deg + 9deg * var(--k1)));transform-box:view-box}
.sc-2 .balance{opacity:.75}
.sc-2 .fork path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k2))}
.sc-2 .fork circle{opacity:var(--k2)}
.sc-2 .fork .tick{stroke-width:2.2;stroke-dashoffset:calc(1 - clamp(0, calc((var(--k2) - .5) / .5), 1))}
.sc-2 .cross path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k3));stroke-width:2.6}
.sc-2 .glow{fill:var(--gold);stroke:none;opacity:calc(.04 + .06 * var(--k4));transform:scale(calc(.82 + .18 * var(--k4)));transform-origin:600px 138px;transform-box:view-box}
/* 3 · tres líneas paralelas suben en la misma dirección desde la casa y el colegio */
.sc-3 .lines path{stroke-dasharray:1;stroke-width:1.4;opacity:.75}
.sc-3 .lines path:nth-child(1){stroke-dashoffset:calc(1 - clamp(0, calc(var(--s3) / .62), 1))}
.sc-3 .lines path:nth-child(2){stroke-dashoffset:calc(1 - clamp(0, calc((var(--s3) - .08) / .62), 1))}
.sc-3 .lines path:nth-child(3){stroke-dashoffset:calc(1 - clamp(0, calc((var(--s3) - .16) / .62), 1))}
.sc-3 .heads path{opacity:clamp(0, calc((var(--s3) - .74) / .18), 1);animation:nudge 2.4s ease-in-out infinite}
.sc-3 .heads path:nth-child(2){animation-delay:.4s}.sc-3 .heads path:nth-child(3){animation-delay:.8s}
@keyframes nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-3.5px)}}
.sc-3 .house,.sc-3 .school{opacity:clamp(0, calc(var(--s3) / .3), 1);stroke-width:1.5}

.stage-media .float{opacity:calc(1 - var(--x) * 2);z-index:3}
.stage-media .float.tl{left:5%;top:6%}.stage-media .float.br{right:5%;bottom:6%}
.caps{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:clamp(1.25rem,5vw,4rem);text-align:center;pointer-events:none}
.stage .cap{grid-area:1/1;max-width:820px;color:var(--ivory);opacity:0}
.stage .cap h2,.stage .cap p{color:var(--ivory)}
.stage .cap h2{font-size:clamp(1.7rem,4vw,3.2rem);margin-bottom:.5rem}
.stage .cap p{font-size:clamp(1rem,1.6vw,1.3rem);color:rgba(255,249,238,.88);max-width:52ch;margin-inline:auto}
.stage .cap .pills{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem}
.stage .cap .pills li{background:rgba(255,249,238,.13);border:1px solid rgba(255,249,238,.28);backdrop-filter:blur(6px);color:var(--ivory);border-radius:var(--r-pill);padding:.45rem 1rem;font-size:.95rem;font-weight:600;will-change:opacity,transform}
.stage .cap-1{opacity:var(--c1);transform:translateY(calc(18px * (1 - var(--c1))))}
.stage .cap-2{opacity:var(--c2);transform:translateY(calc(18px * (1 - var(--c2))))}
.stage .cap-3{opacity:var(--c3);transform:translateY(calc(18px * (1 - var(--c3))))}
.stage .cap-4{opacity:var(--c4);transform:translateY(calc(18px * (1 - var(--c4))))}
.stage .cap-4{max-width:none;text-align:center}
.stage .cap-4>div{max-width:820px;margin-inline:auto}
.stage .cap-4.on{pointer-events:auto}
.stage .cap-4 .btn-row{justify-content:center}
/* las píldoras entran una a una; sin JS se muestran todas */
.stage .cap-3 .pills li:nth-child(1){opacity:var(--pl1,1);transform:translateY(calc(12px * (1 - var(--pl1,1))))}
.stage .cap-3 .pills li:nth-child(2){opacity:var(--pl2,1);transform:translateY(calc(12px * (1 - var(--pl2,1))))}
.stage .cap-3 .pills li:nth-child(3){opacity:var(--pl3,1);transform:translateY(calc(12px * (1 - var(--pl3,1))))}
.stage .cap-3 .pills li:nth-child(4){opacity:var(--pl4,1);transform:translateY(calc(12px * (1 - var(--pl4,1))))}
.stage .cap-3 .pills li:nth-child(5){opacity:var(--pl5,1);transform:translateY(calc(12px * (1 - var(--pl5,1))))}
.scroll-hint{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:5;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:calc(1 - var(--x) * 3);display:flex;align-items:center;gap:.4rem}
.scroll-hint::after{content:"";width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);animation:hint 1.6s infinite}
@keyframes hint{0%,100%{transform:translateY(-2px) rotate(45deg)}50%{transform:translateY(3px) rotate(45deg)}}
.stage-copy .facts{margin-top:1.25rem}

@media(max-width:899px){
  .media{display:grid;gap:.6rem}
  .media .float{position:static;max-width:none;transform:none!important;box-shadow:var(--shadow-sm)}
  .cta-final .media{position:static}
  .stage{align-items:flex-start;padding-top:1.25rem;padding-bottom:1.25rem}
  .scroll-hint{bottom:.35rem;font-size:.72rem}
  .stage-copy{max-width:100%}
  .stage-copy .micro,.stage-copy .facts,.stage-copy .btn-ghost{display:none}
  .stage-copy .eyebrow{font-size:.7rem;margin-bottom:.6rem}
  .stage-copy h1{font-size:clamp(1.55rem,6.4vw,2rem)}
  .stage-copy .sub{font-size:.98rem;line-height:1.4}
  .stage-copy .btn-row{margin-top:.9rem}
  /* la tarjeta conserva margen por los cuatro lados también al expandirse */
  .stage-media{left:calc(4% * (1 - var(--x)) + 16px * var(--x));top:calc(var(--mtop, 45%) * (1 - var(--x)) + 16px * var(--x));
    width:calc(92% * (1 - var(--x)) + (100% - 32px) * var(--x));
    height:calc(var(--mh, 48%) + (100% - 32px - var(--mh, 48%)) * var(--x))}
  .stage-media .float{display:none}
  .cap h2{font-size:clamp(1.35rem,5.6vw,1.9rem)}
  .cap p{font-size:.98rem}
  .cap .pills{gap:.45rem;margin-top:1.1rem}
  .cap .pills li{font-size:.9rem;padding:.45rem .9rem}
  .sc{-webkit-mask-image:radial-gradient(ellipse 62% 26% at 50% 50%,transparent 0 58%,#000 100%);mask-image:radial-gradient(ellipse 62% 26% at 50% 50%,transparent 0 58%,#000 100%)}
  .sc-1 .clockface{width:80vw;height:80vw;right:-34%}
  .sym{font-size:calc(var(--fs) * .74)}
}
@media(prefers-reduced-motion:reduce){
  .js .scrolly.pinned{height:auto}
  .js .scrolly.pinned .stage{position:relative;top:auto;height:auto}
  .scroll-hint::after,.sym i,.sc-3 .heads path{animation:none}
}

/* ---------- atención cercana: copy antes de la foto en móvil, foto a la izquierda en escritorio */
@media(min-width:900px){.split-photo-left{grid-template-columns:1fr 1.05fr}.split-photo-left .sp-copy{order:2}}
.closer-inline{border-top:1px solid var(--line);padding-top:1.25rem}
.closer-inline h3{font-size:1.25rem;margin:0 0 .3rem}
.closer-inline p{margin:0 0 1rem;color:var(--ink-2)}

/* ---------- cita ancha bajo una sección */
.quote-band{margin:clamp(2rem,4vw,3rem) 0 0;padding:clamp(1.5rem,3vw,2.25rem);background:var(--cream-2);border-radius:var(--r-md);display:grid;gap:1.1rem;position:relative}
.quote-band::before{content:"“";font-family:var(--font-display);font-size:4.2rem;line-height:.55;height:1.6rem;color:var(--gold);display:block}
.quote-band blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.5;color:var(--navy);max-width:62ch}
.quote-band figcaption{display:flex;align-items:center;gap:.8rem}
.quote-band figcaption img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.quote-band figcaption strong{display:block;color:var(--navy)}
.quote-band figcaption span{font-size:.88rem;color:var(--muted)}
.on-dark .quote-band{background:rgba(255,255,255,.06)}
.on-dark .quote-band blockquote,.on-dark .quote-band figcaption strong{color:var(--ivory)}

/* ---------- titular secundario */
.h2-sm{font-size:clamp(1.35rem,2.6vw,1.75rem)}

/* ---------- pie del carrusel de carácter */
.track-foot{margin-top:1.5rem}
.track-foot .lbl{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin:0}
.track-foot .tags{margin-top:.75rem}
.on-dark .tags li{color:var(--navy);background:var(--gold)}

/* ---------- matrículas abiertas */
.enroll{display:grid;gap:clamp(1.25rem,3vw,2rem);background:var(--cream-2);border-radius:var(--r-md);padding:clamp(1.5rem,4vw,2.75rem)}
.enroll.strip{background:none;border-radius:0;padding-inline:0}
.enroll-copy{display:grid;gap:.3rem}
@media(min-width:760px){.enroll-copy{grid-template-columns:1fr auto;align-items:end;column-gap:2rem}.enroll-copy .eyebrow{grid-column:1}.enroll-copy h2{grid-column:1}.enroll-copy p:not(.enroll-link){grid-column:1}.enroll-link{grid-column:2;grid-row:2/4;align-self:end;margin:0!important;white-space:nowrap}}
.enroll-copy h2{margin:.2rem 0 .3rem}
.enroll-copy p{margin:0;color:var(--ink-2)}
.enroll-link{margin-top:.9rem!important}
.enroll-steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media(min-width:760px){.enroll-steps{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.enroll-steps li{display:grid;grid-template-columns:auto 1fr;gap:.35rem .8rem;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.15rem 1.35rem}
.enroll-steps li>div{grid-column:1/-1}
.enroll-steps li>span{flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold);font-family:var(--font-display);font-weight:600;display:grid;place-items:center;font-size:.95rem}
.enroll-steps strong{display:block;color:var(--navy);margin-bottom:.2rem}
.enroll-steps small{font-size:.9rem;line-height:1.45;color:var(--ink-2);display:block}

.split-photo-left .float{max-width:min(300px,92%);min-width:210px}
.split-photo-left .float.br{right:-4%;bottom:6%}

/* puntos del carrusel sobre fondo oscuro */
.on-dark .dots button{background:rgba(255,249,238,.28)}
.on-dark .dots button[aria-current="true"]{background:var(--gold)}

/* ---------- ritmo: secciones a sangre, sin tarjeta ---------- */
.island-bleed{
  --pad:max(clamp(1.25rem,5vw,5rem), calc((100% - 1680px) / 2));
  max-width:none;width:auto;margin-inline:-16px;border-radius:0;min-width:0;
  padding-inline:var(--pad)
}
/* el carrusel se sale por el borde derecho: se ve que hay más */
.island-bleed .track{margin-inline-end:calc(-1 * var(--pad));padding-inline-end:var(--pad)}
.island-bleed .dots,.island-bleed .track-foot{max-width:1680px;margin-inline:auto}
.island-bleed .dots{margin-top:1rem}

/* ---------- franja abierta (sin tarjeta dentro de tarjeta) ---------- */
.strip{border-block:1px solid var(--line);padding-block:clamp(1.75rem,4vw,2.75rem)}

/* cabecera del carrusel a sangre: titular a la izquierda, entrada a la derecha */
@media(min-width:1000px){
  .island-bleed .carousel-head{align-items:end;gap:clamp(2rem,4vw,4rem)}
  .island-bleed .carousel-head .section-head{max-width:none;flex:1;display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:end}
  .island-bleed .carousel-head .section-head .eyebrow{grid-column:1;grid-row:1}
  .island-bleed .carousel-head .section-head h2{grid-column:1;grid-row:2;margin-bottom:0}
  .island-bleed .carousel-head .section-head .lead{grid-column:2;grid-row:2;margin-top:0;max-width:52ch}
}

/* ---------- Quiénes somos: "Por qué existimos" a sangre, en dos columnas */
.why{display:grid;gap:1.5rem;max-width:1680px;margin-inline:auto}
@media(min-width:1000px){.why{grid-template-columns:.95fr 1.05fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}}
.why-head h2{margin:0}
.why-body .lead+.lead{margin-top:1rem}

/* cierre corto, centrado */
.closer-center{max-width:660px;margin-inline:auto;text-align:center}
.closer-center .lead{margin:.6rem auto 1.5rem}

/* ---------- cierre: layout simple (sin foto), texto y botón juntos, nunca un botón solo ---------- */
.cierre-simple{display:flex;flex-direction:column;gap:1.5rem;max-width:640px}
.cierre-simple .btn-row{margin-top:.25rem}

/* ---------- cierre con foto: banner tipo hero, personaje a la derecha, degradado azul sin corte visible ---------- */
.cierre-photo{position:relative;overflow:hidden;padding:0;min-height:clamp(420px,44vw,540px);display:flex;align-items:center;isolation:isolate}
.cierre-photo-media{position:absolute;inset:0;z-index:0}
.cierre-photo-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,78% 24%);display:block}
.cierre-photo-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--navy) 0%, var(--navy) 38%,
    rgba(6,26,51,.94) 45%,
    rgba(6,26,51,.7) 52%,
    rgba(6,26,51,.38) 60%,
    rgba(6,26,51,.12) 68%,
    rgba(6,26,51,0) 76%);
}
/* --cpad replica el eje de texto de .island-wide / .band-wide; el max-width lo suma para no estrechar
   la columna, y se queda corto a propósito para que el texto nunca invada el degradado (sólido al 38%) */
.cierre-photo-content{--cpad:max(clamp(1.5rem,5vw,5rem), calc((100% - 1680px) / 2));
  position:relative;z-index:1;max-width:calc(min(460px,34%) + var(--cpad));
  padding:clamp(2.25rem,5vw,3.5rem) clamp(1.5rem,5vw,5rem) clamp(2.25rem,5vw,3.5rem) var(--cpad);
  display:flex;flex-direction:column;gap:1.1rem}
.cierre-photo-content .btn-row{margin-top:.15rem}
@media(max-width:640px){
  /* en móvil no cabe el reparto lado a lado: la foto va arriba, completa, y el texto debajo sobre azul sólido */
  .cierre-photo{display:flex;flex-direction:column;min-height:0;padding:0}
  .cierre-photo-media{position:relative;inset:auto;order:-1;aspect-ratio:var(--mratio,3/4);overflow:hidden}
  .cierre-photo-media img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
  .cierre-photo-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(6,26,51,0) 78%, var(--navy) 100%);
  }
  .cierre-photo-content{max-width:none;padding:1.75rem 1.5rem 2.25rem}
}

/* ======================================================================
   Auditoría 2026-09-22: componentes para igualar las páginas pendientes
   con las ya aprobadas (inicio, quiénes somos, equipo, finlandesa, bilingüe).
   ====================================================================== */

/* cierre sin foto: mismo encuadre que el cierre con foto, con el símbolo del logo dibujado en oro */
.cierre-art .cierre-photo-media{background:
    radial-gradient(90% 120% at 80% 30%, rgba(28,76,128,.85) 0%, rgba(28,76,128,0) 62%),
    radial-gradient(50% 60% at 88% 90%, rgba(201,162,75,.10) 0%, rgba(201,162,75,0) 70%),
    linear-gradient(168deg,#0E2F55 0%,#0A2340 45%,#061A33 100%)}
.cierre-art .cierre-photo-media::after{display:none}
.cierre-art .mark{position:absolute;top:50%;right:max(8%, calc((100% - 1680px) / 2 + 6%));height:72%;width:auto;transform:translateY(-50%);
  fill:none;stroke:var(--gold);stroke-width:7;overflow:visible}
.cierre-art .mark .star{fill:var(--gold);stroke:none}
.js .cierre-art .mark .tri,.js .cierre-art .mark .arc{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .1s}
.js .cierre-art .mark .arc{transition-delay:.35s}
.js .cierre-art .mark .star{opacity:0;transform:scale(.85);transform-box:fill-box;transform-origin:center;transition:opacity .7s var(--ease) .6s,transform .7s var(--ease) .6s}
.js .cierre-art.in .mark .tri,.js .cierre-art.in .mark .arc{stroke-dashoffset:0}
.js .cierre-art.in .mark .star{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .cierre-art .mark *{transition:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important}}
@media(max-width:640px){
  .cierre-art .cierre-photo-media{aspect-ratio:auto;height:230px;align-self:stretch;width:100%}
  .cierre-art .cierre-photo-media::after{display:block;background:linear-gradient(180deg,rgba(6,26,51,0) 45%,var(--navy) 100%)}
  .cierre-art .mark{right:50%;transform:translate(50%,-50%);height:78%}
}

/* preguntas de las familias: tarjeta con icono, la pregunta como titular y la respuesta debajo */
.qcards{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:700px){.qcards{grid-template-columns:1fr 1fr;gap:1.25rem}}
@media(min-width:1100px){.qcards{grid-template-columns:repeat(3,1fr)}}
.qcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.35rem,2.2vw,1.85rem);display:flex;flex-direction:column;gap:.55rem}
.qcard .ico{width:44px;height:44px;border-radius:14px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;margin-bottom:.35rem}
.qcard .ico svg{width:22px;height:22px}
.qcard h3{margin:0;font-size:1.12rem;line-height:1.3;color:var(--navy)}
.qcard p{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.55}
.qcard .link{align-self:flex-start;margin-top:.35rem}

/* camino en pasos numerados con línea que los une (Emprendedores del Mes) */
.path{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;counter-reset:p}
@media(min-width:820px){.path{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.path li{position:relative;counter-increment:p;padding-top:3.4rem}
.path li::before{content:counter(p);position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--navy);
  font-family:var(--font-display);font-weight:600;font-size:1.1rem;display:grid;place-items:center;z-index:1}
@media(min-width:820px){.path li::after{content:"";position:absolute;top:22px;left:52px;right:-1.1rem;height:2px;background:rgba(201,162,75,.45)}
  .path li:last-child::after{display:none}}
.path h3{margin:0 0 .35rem;font-size:1.15rem}
.path p{margin:0;color:var(--ink-2)}
.on-dark .path p{color:rgba(255,249,238,.8)}

/* la fe por etapas: tres columnas con la sede y lo que se vive en cada una */
.stages{display:grid;gap:1.25rem}
@media(min-width:900px){.stages{grid-template-columns:repeat(3,1fr)}}
.stage-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.9rem}
.stage-card .where{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin:0}
.stage-card h3{margin:0;font-size:1.3rem}
.stage-card .checks{gap:.55rem}
.stage-card .checks li{color:var(--ink-2);font-size:.98rem}

/* personas con foto y trayectoria (formación en la fe) */
.people{display:grid;gap:1.5rem}
@media(min-width:900px){.people{grid-template-columns:1fr 1fr;gap:2rem}}
.person{display:grid;grid-template-columns:minmax(96px,132px) 1fr;gap:1.25rem;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.25rem,2.2vw,1.75rem)}
.person img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm)}
.person h3{margin:0;font-size:1.2rem}
.person .role{display:block;color:var(--gold-deep);font-weight:600;font-size:.9rem;margin:.25rem 0 .7rem}
.person p{margin:0;color:var(--ink-2);font-size:.98rem}
@media(max-width:520px){.person{grid-template-columns:1fr}.person img{max-width:140px}}

/* dos citas de familias lado a lado */
.quote-duo{display:grid;gap:1.25rem}
@media(min-width:900px){.quote-duo{grid-template-columns:1fr 1fr}}
.quote-duo .quote blockquote{font-family:var(--font-display);font-size:1.08rem;color:var(--navy);line-height:1.55}

/* sedes en tarjetas, sin repetir fotos de instalaciones */
.sede-cards{display:grid;gap:1.25rem}
@media(min-width:800px){.sede-cards{grid-template-columns:1fr 1fr}}
.sede-cards .card{padding:clamp(1.5rem,2.4vw,2rem);gap:.6rem}
.sede-cards .card .link{align-self:flex-start;margin-top:.5rem}

/* galería de sede con tres fotos */
.photo-strip.three{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.photo-strip.three{grid-template-columns:repeat(3,1fr)}}
.photo-strip.three img{aspect-ratio:4/3}

/* agenda y contacto: el formulario arriba, junto al texto */
.visit-hero{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
@media(min-width:980px){.visit-hero{grid-template-columns:1fr 1fr}}
.visit-hero .feature-list{margin-top:1.75rem}
.visit-hero .feature h3{font-size:1.05rem;margin:0 0 .2rem}
.visit-hero .feature p{font-size:.97rem}
.visit-hero .form-card{background:var(--cream-2);border:0;padding:clamp(1.35rem,3vw,2.25rem)}
.visit-hero .contact-list{display:grid;gap:1.1rem;margin-top:1.75rem}
.visit-hero .sedes{margin-top:1.75rem}

/* bloque de sede en la página de etapa: mapa y datos */
.sede-row{display:grid;gap:1.5rem;align-items:center}
@media(min-width:900px){.sede-row{grid-template-columns:1.1fr .9fr;gap:3rem}}

/* ---------- ajustes de la auditoría visual (2026-09-22) ---------- */
.nw{white-space:nowrap}
/* títulos de portada interior: en móvil no deben pasar de cuatro líneas */
@media(max-width:640px){.page-hero h1{font-size:clamp(1.8rem,7.6vw,2.15rem)}}
/* pie: en móvil el contacto ocupa las dos columnas para que el correo no se parta */
@media(max-width:899px){.foot-cols>div:last-child{grid-column:1/-1}.foot-cols a{overflow-wrap:normal}}
/* equipo en móvil: una columna, foto a la izquierda y texto legible */
@media(max-width:639px){
  .staff-grid{grid-template-columns:1fr;gap:1.1rem}
  .staff-card{display:grid;grid-template-columns:104px 1fr;gap:1rem;align-items:start}
  .staff-card figcaption{margin-top:0}
  .staff-card p{font-size:.95rem;line-height:1.45}
  .staff-card.staff-wide{margin-top:1.1rem;background:none;border:0;border-radius:0;padding:0;gap:1rem;align-items:start}
}
/* videos: carátula limpia con un botón propio; los controles del navegador aparecen al reproducir */
.videos .vwrap{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--navy)}
.videos .vplay{display:none}
.js .videos .vplay{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(6,26,51,0) 55%,rgba(6,26,51,.45) 100%)}
.videos .vplay span{width:68px;height:68px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .2s var(--ease)}
.videos .vplay:hover span{transform:scale(1.06)}
.videos .vplay svg{width:26px;height:26px;margin-left:4px}
.js .videos .vwrap.playing .vplay{display:none}
/* acercamiento por foto en el cierre (escritorio): saca del cuadro lo que asoma en los bordes */
@media(min-width:641px){.cierre-photo-media img{transform:scale(var(--zoom,1));transform-origin:30% 10%}}

/* ---------- blog (2026-09-24): tarjetas con imagen, cabecera del artículo, resumen, autor y relacionados ---------- */
.post.has-img{padding:0;overflow:hidden}
.post.has-img>img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.post .post-body{display:flex;flex-direction:column;gap:.5rem;flex:1}
.post.has-img .post-body{padding:1.25rem 1.5rem 1.5rem}
.post .post-body p{flex:1}
.post-list.two{grid-template-columns:1fr}
@media(min-width:760px){.post-list.two{grid-template-columns:1fr 1fr}}
.art-head h1{font-size:clamp(1.85rem,3.6vw,3rem);max-width:none}
.art-head .lead{margin:1rem auto 0;max-width:60ch}
.art-head .byline{margin-top:1.25rem}
.art-hero{margin:0 auto clamp(2rem,4vw,3rem);max-width:1000px}
.art-hero img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-md);display:block}
.tldr{background:var(--cream-2);border-radius:var(--r-md);padding:1.35rem 1.6rem;margin:0 0 2rem}
.tldr .lbl,.author-box .lbl{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 .6rem}
.tldr ul{margin:0;padding-left:1.2rem;display:grid;gap:.45rem;font-size:1rem;line-height:1.5}
.article h3{font-size:1.15rem;margin:1.6rem 0 .4rem}
.faq-art h3:first-child{margin-top:.5rem}
.faq-art p{margin:0 0 .6rem}
.author-box{background:var(--sky-soft);border-radius:var(--r-md);padding:1.35rem 1.6rem;margin-top:2.5rem;font-size:1rem;line-height:1.55}
.author-box p:last-child{margin:0}
.art-fig{margin:2rem auto;max-width:340px;text-align:center}
.art-fig img{margin:0 auto;border-radius:var(--r-sm)}
.art-fig figcaption{font-size:.85rem;color:var(--muted);margin-top:.6rem;font-style:normal}
.art-fig.wide{max-width:none;margin:2.2rem 0}
.art-fig.wide img{width:100%;border-radius:var(--r-md)}
.art-fig.wide figcaption{text-align:left}
.author-box p.small{margin:.7rem 0 0}
/* tabla dentro de un artículo (guía para elegir colegio) */
.art-table-wrap{margin:1.4rem 0 1.6rem;max-width:100%}
.art-table{width:100%;border-collapse:collapse;font-size:.95rem;table-layout:fixed}
.art-table th,.art-table td{border:1px solid var(--line,#e6dfd0);padding:.6rem .7rem;text-align:left;vertical-align:top}
.art-table th{background:var(--cream-2);font-weight:700;color:var(--navy)}
.art-table th:first-child,.art-table td:first-child{width:46%}
.art-table td:not(:first-child){height:2.4rem}
@media(max-width:520px){.art-table{font-size:.8rem}.art-table th,.art-table td{padding:.45rem .4rem}.art-table th:first-child,.art-table td:first-child{width:40%}}
.art-head .btn-row{justify-content:center}
/* regla: nunca una palabra sola en la última línea (ver sin_viudas en build.py) */
p,li,figcaption,blockquote,dd,dt{text-wrap:pretty}
.lead,.byline,.art-head .lead,.section-head p{text-wrap:balance}