/* Belmont Concept B. One spacing system; local Bootstrap 5.3.8 grid infrastructure. */
:root {
  --indigo:#2c3064; --indigo-dark:#171a3d; --green:#2c654f; --red:#b52f31;
  --paper:#fcfbfd; --paper-2:#f3f1f5; --ink:#17191b; --muted:#565861;
  --line:#d6d5db; --line-light:#ffffff59; --on-dark:#fff;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --s12:48px; --s16:64px; --s24:96px;
  --content:1200px; --gutter:48px; --section:96px; --header:88px;
  --h2:clamp(2.25rem,4vw,3.75rem); --h3:clamp(1.75rem,2.7vw,2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:var(--header);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure,p,h1,h2,h3,h4{margin:0}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.025em;line-height:1.12}
h2{font-size:var(--h2);text-wrap:balance}h3{font-size:var(--h3)}
p{max-width:65ch}em{font-weight:400}
::selection{background:var(--indigo);color:#fff}
:focus-visible{outline:3px solid var(--red);outline-offset:5px}
.vida :focus-visible,.mobile-menu :focus-visible{outline-color:#fff}
.wrap{width:100%;max-width:calc(var(--content) + var(--gutter)*2);padding-inline:var(--gutter);margin-inline:auto}
.band{padding-block:var(--section)}
.band--paper2{background:var(--paper-2)}
.band--ink{background:var(--paper-2)}
.kicker,.pillar__n{display:flex;align-items:center;gap:var(--s3);font:12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:var(--s6)}
.kicker::before{content:"";display:block;flex:0 0 var(--s6);height:1px;background:var(--red)}
.lede{font-size:18px;line-height:1.6;max-width:46ch}
.muted{color:var(--muted)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s16);align-items:end;margin-bottom:var(--s12)}
.sec-head>p{color:var(--muted)}
.cta{display:inline-flex;justify-content:center;align-items:center;gap:var(--s3);min-height:48px;padding:var(--s4) var(--s6);border:1px solid var(--red);background:var(--red);color:#fff;font:600 12px/1.4 var(--sans);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.cta:hover{background:#922528;color:#fff;border-color:#922528}
.cta--onDark--ghost{background:transparent;border-color:#ffffffa6}
.cta--onDark--ghost:hover{background:#ffffff1f;border-color:#fff}
.cta:disabled{opacity:.65;cursor:not-allowed}
.ulink{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:6px}
.ulink:hover{color:var(--red)}
.skip{position:fixed;top:var(--s4);left:var(--s4);z-index:200;padding:var(--s4);background:var(--indigo);color:#fff;transform:translateY(-180%)}
.skip:focus{transform:none}
/* Header has a solid, shared surface with the opaque crest artwork. */
.site-top{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.topbar{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:var(--s6)}
.brand{display:inline-flex;align-items:center;gap:var(--s3);flex-shrink:0}
.brand__badge{display:grid;place-items:center;width:56px;height:56px;background:#fff;padding:var(--s1)}
.brand__badge img{width:48px;height:48px;object-fit:contain}
.brand__name{font:600 22px/1.1 var(--serif)}
.brand__name small{display:block;font:10px/1.5 var(--mono);letter-spacing:.17em;text-transform:uppercase;margin-top:var(--s1)}
.nav-links{display:flex;gap:var(--s6);align-items:center}
.nav-links a{display:flex;align-items:center;min-height:44px;font-size:13px;text-underline-offset:7px}
.nav-links a:hover,.nav-links a.is-active{text-decoration:underline;text-decoration-color:var(--red)}
.nav-cta{display:flex;gap:var(--s4);align-items:center}
.nav-cta>.cta{padding-inline:var(--s4);font-size:11px}
.menu-btn{display:none;align-items:center;justify-content:center;gap:var(--s3);min-height:44px;padding:var(--s3) var(--s4);background:none;border:1px solid var(--line);font:12px var(--mono);cursor:pointer}
.menu-btn .bar{width:16px;height:8px;border-block:1px solid currentColor}
.mobile-menu[hidden]{display:none}
.mobile-menu{position:fixed;inset:0;z-index:150;background:var(--indigo);color:#fff;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s24) var(--gutter) var(--s8);overflow-y:auto}
.mobile-menu>a{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);min-height:56px;padding-block:var(--s3);border-bottom:1px solid var(--line-light);font:12px var(--mono)}
.mobile-menu .n{font:clamp(1.4rem,6vw,2.25rem) var(--serif)}
.mobile-menu .mm-close{display:flex;position:absolute;top:var(--s6);right:var(--gutter);color:#fff;border-color:var(--line-light)}
.mobile-menu .mm-cta{justify-content:center;margin-top:var(--s6);font:600 12px var(--sans)}
/* Hero: no floating markers; local scrim consistently protects all text. */
.hero{position:relative;isolation:isolate;min-height:min(800px,calc(100svh - var(--header)));display:flex;align-items:center;background:var(--indigo-dark);color:#fff}
.hero__img,.hero__scrim{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero__img{object-fit:cover;object-position:65% center}
.hero__scrim{background:linear-gradient(90deg,rgba(14,18,40,.96) 0%,rgba(14,18,40,.87) 35%,rgba(14,18,40,.40) 65%,rgba(14,18,40,.12) 100%)}
.hero__inner{width:100%;max-width:calc(var(--content) + var(--gutter)*2);margin-inline:auto;padding:var(--s16) var(--gutter)}
.hero__kicker{white-space:nowrap;max-width:none;color:#fff;display:inline-flex;background:var(--indigo-dark);padding:var(--s2) var(--s3);margin-bottom:var(--s8);font-size:11px;letter-spacing:.1em}
.hero__kicker::before{background:#fff;flex-basis:var(--s4)}
.hero__title{font-size:clamp(3.5rem,6.7vw,6rem);line-height:1.02;letter-spacing:-.035em;color:#fff}
.hero__lede{font-size:18px;line-height:1.6;max-width:34ch;margin-top:var(--s8);color:#fff}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s8)}
/* Always-visible education grid, with equal weight for each supported level. */
.levels{border-top:1px solid var(--line)}
.level{padding:var(--s8);border-bottom:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.level:nth-child(odd){border-right:1px solid var(--line)}

.level__num{font:12px/1.5 var(--mono);color:var(--red)}
.level h3{font-size:2rem}
.level__grades{font-weight:600;color:var(--indigo)}
.level>p:not(.level__grades){color:var(--muted);max-width:39ch}
.level__go{margin-top:auto;font-size:14px}
/* Repeating image/text relationship on a shared two-column grid. */
.pilares{display:grid;gap:var(--s16)}
.pillar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s16);align-items:center}
.pillar:nth-child(even) .pillar__media{order:2}
.pillar__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pillar__n{margin-bottom:var(--s4);color:var(--red)}
.pillar h3{margin-bottom:var(--s6)}
.pillar__body{color:var(--muted)}
/* Cultural panorama retains its original ratio, with deliberate mobile panning. */
.culture{background:#e9eee8;padding-top:var(--section);color:#234c3c}
.culture__intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 var(--s16);align-items:end;padding-bottom:var(--s12)}
.culture__intro .kicker{grid-column:1/-1;color:var(--green)}
.culture__intro>p:last-child{font-size:18px;line-height:1.6}
.panorama{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:var(--green) #dbe5db;scrollbar-width:auto}
.panorama img{width:100%;max-width:none;height:auto}
.panorama:focus-visible{outline-offset:-5px}
.panorama-hint{display:none}
/* Green photo essay: featured landscape, three equal supporting frames, closing landscape. */
.vida{background:var(--green);color:#fff}
.vida .sec-head>p,.vida .kicker{color:#fff}
.vida .kicker::before{background:#fff}
.vida-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s12) var(--s6)}
.vcell{min-width:0;margin:0}
.vcell img{width:100%;aspect-ratio:4/3;object-fit:cover}
.v-a,.v-e{grid-column:1/-1}
.v-a img,.v-e img{aspect-ratio:16/9}
.v-b img{object-position:60% center}
.v-cap{padding-top:var(--s4);font-size:14px;line-height:1.65;color:#fff}
.v-cap b{display:block;margin-bottom:var(--s2);font:12px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.vida-statement{border-top:1px solid var(--line-light);padding-top:var(--s8);margin-top:var(--s12);font:clamp(2rem,3vw,3rem)/1.2 var(--serif);max-width:none}
/* Archive is a photographic moment, not an unverified institutional chronology. */
.raices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s16);align-items:center}
.duo img{width:100%;height:auto}
.archive-caption{margin-top:var(--s4);font:12px/1.6 var(--mono);color:var(--muted)}
.raices .lede{margin-top:var(--s6);color:var(--muted)}
.raices .ulink{margin-top:var(--s6)}
/* Admissions uses Bootstrap columns, then a balanced local demo / location spread. */
.steps-wrap{margin-bottom:var(--s12)}
.steps.row{--bs-gutter-x:0}
.step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s4);padding:var(--s6);border-top:1px solid var(--line)}
.step:nth-child(1){background:#eaf0ec}.step:nth-child(2){background:#f8eeee}.step:nth-child(3){background:#eeedf5}
.step__n{font:14px/1.7 var(--mono);color:var(--red)}
.step h3{font-size:23px;margin-bottom:var(--s4)}
.step p{font-size:15px;color:var(--muted)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s16);align-items:start}
.form-demo{padding:var(--s8);border:1px solid var(--line);background:#fff}
.form-note{font:12px/1.6 var(--mono);color:var(--red);margin-bottom:var(--s8)}
.field{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
.field label{font-size:14px;font-weight:500}
.field select,.field input,.field textarea{min-width:0;width:100%;min-height:48px;padding:var(--s3);border:1px solid #8b8c92;border-radius:0;background:#fff;color:var(--ink);font-size:16px}
.field textarea{resize:vertical;min-height:140px}
#demoForm .cta{width:100%}
.form-demo>p:last-child{font-size:13px;color:var(--muted);margin-top:var(--s4)}
.form-msg{display:none;padding:var(--s6);margin-top:var(--s6);border-left:3px solid var(--green);background:#e9eee8;color:var(--ink)}
.form-msg.is-shown{display:block}
.loc{display:grid;gap:var(--s8)}
.loc__place{padding-block:var(--s8);border-block:1px solid var(--line)}
.loc__place h3{color:var(--indigo)}
.loc__place>p:last-child{margin-top:var(--s3)}
.loc>div>h3+p{margin-top:var(--s4)}
.loc .ulink{margin-top:var(--s6)}
.faq{margin-top:var(--s16);padding-top:var(--s12);border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);margin-top:var(--s8)}
.faq h4{font:600 17px/1.5 var(--sans);margin-bottom:var(--s4)}
.faq p:not(.kicker){font-size:15px;color:var(--muted)}
.foot{border-top:1px solid var(--line);padding-block:var(--s16) var(--s8);background:var(--paper);color:var(--indigo)}
.foot__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--s8);align-items:start}
.foot nav{display:flex;flex-direction:column;align-items:flex-start}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.foot nav a:hover{text-decoration:underline}
.foot__end{grid-column:1/-1;border-top:1px solid var(--line);padding-top:var(--s6);font:11px/1.6 var(--mono)}
/* Shared, restrained level identities extend into the native dialogs. */
.tone-kinder{--level-tint:#eaf0ec;--level-accent:var(--green)}
.tone-primaria{--level-tint:#f8eeee;--level-accent:var(--red)}
.tone-secundaria{--level-tint:#eeedf5;--level-accent:var(--indigo)}
.tone-preparatoria{--level-tint:var(--paper);--level-accent:var(--indigo)}
.level{background:var(--level-tint)}
.level__num,.level-dialog .kicker{color:var(--level-accent)}
.level h3{color:var(--level-accent)}
.level-dialog{width:min(880px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:var(--s12);border:1px solid var(--line);border-top:5px solid var(--level-accent);background:var(--level-tint);color:var(--ink);overscroll-behavior:contain}
.level-dialog::backdrop{background:rgba(14,18,40,.7)}
.level-dialog__bar{position:sticky;top:0;z-index:1;background:var(--level-tint);box-shadow:0 -48px 0 var(--level-tint);padding-block:var(--s2);display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-bottom:var(--s6)}
.level-dialog__bar .kicker{margin:0;font-size:11px;letter-spacing:.08em;gap:8px}
.level-dialog__bar form{margin:0;flex-shrink:0}
.dialog-close{white-space:nowrap;min-height:44px;padding:var(--s2) var(--s4);border:1px solid var(--level-accent);background:var(--level-tint);color:var(--level-accent);cursor:pointer}
.dialog-close:hover{background:#fff}
.level-dialog h2{color:var(--level-accent);margin-bottom:var(--s4)}
.level-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s8);margin:var(--s8) 0}
.level-facts>div{border-top:1px solid var(--line);padding-top:var(--s4)}
.level-facts dt{font-size:15px;font-weight:600;margin-bottom:var(--s3)}
.pending{font:11px/1.7 var(--mono);letter-spacing:.03em;overflow-wrap:anywhere;color:var(--indigo);max-width:none}
.level-facts dd{margin:0}
/* Architectural placeholders: one lead spread and two supporting views. */
.facilities{background:#fff}
.facilities-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s8) var(--s12);align-items:start}
.facility--lead{grid-row:span 2;position:sticky;top:calc(var(--header) + 24px)}
.photo-pending{aspect-ratio:16/9;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s4);padding:var(--s8);background:#eeedf5;border:1px solid #d8d7e2;color:var(--indigo)}
.photo-pending::before{content:"";position:absolute;inset:12px;border:1px solid #2c30642b;pointer-events:none}
.facility--lead .photo-pending{aspect-ratio:4/3;background:#eaf0ec}
.facility:nth-child(3) .photo-pending{background:#f8eeee}
.photo-pending strong{font:500 clamp(1.5rem,2.6vw,2.5rem)/1.15 var(--serif);max-width:16ch}
.photo-pending__format{font:10px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.facility figcaption{padding-top:var(--s4)}
.facility h3{font-size:23px;margin-bottom:var(--s3)}
.spaces-inventory{margin-top:var(--s12);border-block:1px solid var(--line)}
.spaces-inventory summary{cursor:pointer;padding-block:var(--s6);font:500 23px/1.4 var(--serif)}
.spaces-inventory summary span{display:inline-block;margin-left:var(--s4);font:12px/1.6 var(--mono);color:var(--muted)}
.spaces-inventory dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);padding-bottom:var(--s6);margin:0}
.spaces-inventory dt{font-weight:500;margin-bottom:var(--s2)}
.spaces-inventory dd{margin:0}
.promotion{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--s8);border-block:1px solid var(--line);padding:var(--s8) 0;margin-bottom:var(--s12)}
.promotion .kicker{margin-bottom:var(--s4)}
.promotion h3{font-size:28px;max-width:23ch}
.promotion[hidden]{display:none}
.promotion__question{font-weight:600;margin-bottom:var(--s3)}
.promotion__conditions{font-size:13px;color:var(--muted);margin-top:var(--s4)}
address{font-style:normal;margin:var(--s4) 0 0}
.school-map{display:block;width:100%;height:auto;aspect-ratio:4/3;min-height:280px;border:1px solid var(--line);background:var(--paper-2)}
.loc{gap:var(--s4)}
.loc .ulink{margin-top:0;justify-self:start}
.foot address{margin:0;font-size:14px;line-height:1.8}
.foot__brand .brand__badge{border:0;box-shadow:none;background:transparent;width:72px;height:72px;padding:8px}
.foot__brand .brand__badge img{width:100%;height:100%}
.foot .brand__name{font-size:26px}
/* Motion enhances visible content; no section depends on a reveal to be readable. */
.nav-links a,.foot nav a{transition:color .18s ease}
.nav-links a:hover,.foot nav a:hover{color:var(--red)}
.ulink span[aria-hidden]{transition:transform .2s ease}
.ulink:hover span[aria-hidden]{transform:translateX(3px)}
.pillar__media{overflow:hidden}
.pillar__media img{transition:transform .45s ease}
@media(hover:hover){.pillar__media:hover img{transform:scale(1.025)}}
@media(prefers-reduced-motion:no-preference){.kicker.is-seen::before{animation:line-in .55s ease both}@keyframes line-in{from{transform:scaleX(.25);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}}
@media(max-width:767px){
 .level-dialog{padding:var(--s6)}
 .level-facts,.facilities-grid,.promotion{grid-template-columns:1fr}
 .facility--lead{position:static;grid-row:auto}
 .spaces-inventory dl{grid-template-columns:1fr}
 .spaces-inventory summary span{display:block;margin:var(--s2) 0 0}
 .photo-pending{padding:var(--s6);gap:var(--s3)}
 .photo-pending strong{font-size:24px}
 .photo-pending .pending{font-size:10px}
 .school-map{min-height:300px}
 .foot__grid{grid-template-columns:1fr}
 .foot .brand__badge{width:64px;height:64px}
}
@media(max-width:1199px){
 :root{--gutter:32px;--section:80px}
 .nav-links{gap:var(--s4)}.nav-links a{font-size:12px}.nav-cta>.cta{display:none}
 .sec-head,.pillar,.culture__intro,.raices,.contact{gap:var(--s8)}
}
@media(min-width:768px) and (max-width:991px){.photo-pending{padding:20px;gap:8px}.photo-pending strong{font-size:21px}.photo-pending .pending{font-size:10px}}
@media(max-width:991px){
 :root{--header:80px}
 .nav-links{display:none}.menu-btn{display:flex}
 .hero__title{font-size:clamp(3.5rem,8vw,5.5rem)}
 .sec-head{grid-template-columns:1fr;gap:var(--s6)}
 .step{padding:var(--s6)}.steps-wrap{margin-bottom:var(--s8)}
 .faq-grid{grid-template-columns:1fr;gap:var(--s6)}
 .foot__grid{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}
}
@media(max-width:767px){
 :root{--gutter:24px;--section:64px;--header:76px;--h2:clamp(2.1rem,8vw,2.75rem)}
 .brand__badge{width:44px;height:44px}.brand__badge img{width:36px;height:36px}.brand__name{font-size:20px}.brand__name small{font-size:8px}
 .topbar{gap:var(--s3)}.menu-btn{padding-inline:var(--s3)}
 .hero{min-height:calc(100svh - var(--header))}.hero__inner{padding-block:var(--s12)}
 .hero__title{font-size:clamp(3.35rem,14vw,4.5rem)}
 .hero__scrim{background:linear-gradient(90deg,rgba(14,18,40,.92),rgba(14,18,40,.68))}
 .hero__img{object-position:60% center}.hero__kicker{font-size:10px;letter-spacing:.06em;margin-bottom:var(--s6)}
 .hero__lede{font-size:16px;margin-top:var(--s6)}.hero__actions{margin-top:var(--s6);gap:var(--s3)}
 .hero__actions .cta{padding-inline:var(--s4);font-size:11px}
 .sec-head{margin-bottom:var(--s8)}.lede{font-size:17px}
 .level,.level:nth-child(odd),.level:nth-child(even){padding:var(--s8) var(--s6);border-right:0}
 .pillar,.raices,.contact,.culture__intro{grid-template-columns:1fr;gap:var(--s8)}
 .pilares{gap:var(--s12)}.pillar:nth-child(even) .pillar__media{order:0}
 .pillar__media img{aspect-ratio:4/3}.pillar h3{margin-bottom:var(--s4)}
 .culture__intro{gap:0;padding-bottom:var(--s8)}.culture__intro>p:last-child{margin-top:var(--s6);font-size:16px}
 .panorama img{width:auto;height:360px;min-width:0}
 .panorama-hint{display:block;max-width:none;padding:0 var(--gutter) var(--s4);font:11px/1.6 var(--mono)}
 .vida-grid{grid-template-columns:1fr;gap:var(--s8)}.v-a,.v-e{grid-column:auto}
 .vcell img{aspect-ratio:4/3}.v-a img,.v-e img{aspect-ratio:16/10}.v-cap b{font-size:11px}
 .vida-statement{font-size:2rem;margin-top:var(--s8)}
 .form-demo{padding:var(--s6)}.faq{margin-top:var(--s12);padding-top:var(--s8)}
 .foot__grid{gap:var(--s6)}.foot .brand__badge{width:64px;height:64px}
}

/* Google Maps: indicador de foco discreto */

.school-map:focus {
    outline: none;
}

.school-map:focus-visible {
    outline: 2px solid #2C3064;
    outline-offset: 2px;
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}