/* ============================================================
   BELMONT AMERICAN SCHOOL — Home v0.1 (ALPHA)
   Editorial institutional system. Mobile-first.
   Paleta (de la referencia): índigo #2C3064 · rojo #C23837 ·
   verde #2C654F · blanco #FCFBFD · negro #1B1E27.
   Tipografía: Fraunces (display) + Manrope (texto/UI).
   ============================================================ */

/* 1 · TOKENS ----------------------------------------------------*/
:root{
  --indigo:#2C3064;          /* marca / títulos en fondo claro */
  --indigo-deep:#20264F;     /* bandas hero & cierre (índigo más profundo, misma familia) */
  --red:#C23837;             /* acción principal / acentos */
  --red-deep:#A8282C;
  --green:#2C654F;           /* acento secundario / banda cierre */
  --green-deep:#1E4A3B;
  --paper:#FCFBFD;           /* fondo de página (off-white cálido) */
  --paper-2:#FFFFFF;         /* tarjetas */
  --paper-soft:#F3F1F4;     /* bandas suaves alt */
  --ink:#1B1E27;            /* texto principal */
  --ink-2:#52565F;          /* texto secundario */
  --footer:#0D0F16;         /* footer (casi negro) */
  --line:rgba(27,30,39,.13);
  --line-strong:rgba(27,30,39,.28);
  --shadow:0 12px 40px rgba(20,22,50,.14);
  --shadow-sm:0 4px 14px rgba(20,22,50,.10);

  --font-display:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --container:1240px;
  --pad:clamp(1.15rem,5.2vw,4.5rem);   /* sangría lateral */
  --section-y:clamp(4rem,7vw,6.75rem);  /* ritmo vertical */
  --radius:4px;
  --maxread:64ch;
}

/* 2 · RESET / BASE ---------------------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--paper);line-height:1.65;
  font-size:clamp(1rem,.97rem + .2vw,1.0625rem);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.04;margin:0;color:var(--indigo);font-optical-sizing:auto}
p,figure{margin:0}
[hidden]{display:none!important}
section[id],main[id]{scroll-margin-top:88px}
ul{margin:0;padding:0;list-style:none}

/* a11y: foco visible, saltar al contenido */
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.skip{
  position:absolute;left:var(--pad);top:-96px;z-index:1200;
  background:var(--red);color:#fff;padding:.7rem 1.1rem;font-weight:700;
  border-radius:var(--radius);transition:top .18s ease;font-size:.9rem;
}
.skip:focus{top:.7rem}
.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}

/* 3 · LAYOUT / UTILITIES --------------------------------------*/
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.6rem,4.5vw,4rem)}
.band{color:#fff}
.band--indigo{background:var(--indigo-deep)}
.band--green{background:var(--green-deep)}
.band--soft{background:var(--paper-soft)}

/* eyebrow: mayúsculas espaciadas con reglón */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-body);font-weight:700;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin:0 0 1rem;
}
.eyebrow::before{content:"";width:2.4rem;height:2px;background:currentColor;flex:none}
.eyebrow--indigo{color:var(--indigo)}
.band .eyebrow{color:#fff}
.band .eyebrow--red{color:#F0B4BA}
.band .eyebrow::before{background:currentColor}

.lead{font-size:clamp(1.06rem,1rem + .5vw,1.32rem);color:var(--ink-2);line-height:1.62;max-width:var(--maxread);font-weight:400}
.band .lead{color:rgba(255,255,255,.86)}

/* 4 · BOTONES -------------------------------------------------*/
.btn{
  --bg:var(--red);--fg:#fff;--bd:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.75rem 1.4rem;
  font-family:var(--font-body);font-weight:700;font-size:.94rem;
  letter-spacing:.01em;border-radius:var(--radius);
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  cursor:pointer;text-align:center;line-height:1.1;transition:transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{--bg:var(--red);--bd:var(--red-deep)}
.btn--primary:hover{--bg:var(--red-deep)}
.btn--white{--bg:#fff;--fg:var(--green-deep);--bd:#fff}
.btn--white:hover{--bg:#F3F8F5}
.btn--ghost{--bg:transparent;--fg:currentColor;--bd:currentColor;opacity:.96}
.btn--ghost:hover{--bg:rgba(255,255,255,.08)}
.band .btn--ghost{--bd:rgba(255,255,255,.55)}
.btn--block{width:100%}
.btn__arrow{display:inline-block;transition:transform .18s ease}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* 5 · NAV -----------------------------------------------------*/
.nav{position:sticky;top:0;z-index:1000;background:rgba(252,251,253,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .2s ease}
.nav.is-scrolled{box-shadow:var(--shadow-sm)}
.nav__inner{display:flex;align-items:center;gap:1rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand__mark{height:46px;width:auto}
.brand__word{display:flex;flex-direction:column;line-height:1;font-family:var(--font-display);font-weight:600;color:var(--indigo)}
.brand__word b{font-size:1.24rem;letter-spacing:.06em;font-family:var(--font-display);font-weight:700}
.brand__word span{font-family:var(--font-body);font-size:.6rem;font-weight:700;letter-spacing:.34em;color:var(--ink-2);margin-top:.18rem;text-transform:uppercase}
.nav__links{display:none;align-items:center;gap:1.6rem;margin-left:auto}
.nav__links a{font-size:.92rem;font-weight:600;color:var(--ink);position:relative;padding:.3rem 0}
.nav__links a:hover{color:var(--red)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--red);transition:right .25s ease}
.nav__links a:hover::after{right:0}
.nav__cta{display:none;margin-left:auto}
.nav__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-left:auto;border:1px solid var(--line-strong);background:var(--paper-2);border-radius:var(--radius);cursor:pointer}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:"";display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:.2s}
.nav__toggle span::before{position:absolute;top:-6px}.nav__toggle span::after{position:absolute;top:6px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* menú móvil deslizante */
.mobile-menu{position:fixed;inset:72px 0 auto 0;z-index:999;background:var(--paper-2);border-bottom:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(-125%);transition:transform .3s ease;padding:1.2rem var(--pad) 1.6rem;visibility:hidden;max-height:calc(100dvh - 72px);overflow-y:auto}
.mobile-menu.is-open{transform:translateY(0);visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column;gap:.2rem}
.mobile-menu a{padding:.85rem .2rem;font-weight:600;font-size:1.05rem;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:1rem}

@media (min-width:1200px){
  .nav__cta{display:inline-flex}
  .nav__links{display:flex}
  .nav__toggle{display:none}
  .nav .btn--primary{margin-left:0}
}

/* 6 · HERO ----------------------------------------------------*/
.hero{padding-block:0;background:var(--indigo-deep);color:#fff;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr;gap:2.4rem;padding-block:clamp(2.6rem,5vw,4rem) clamp(3.2rem,5vw,4.4rem)}
.hero__eyebrow{color:#F0B4BA}
.hero h1{color:#fff;font-size:clamp(2.7rem,7.5vw,4.7rem);letter-spacing:-.01em;margin:0 0 1.2rem;max-width:14ch}
.hero__support{color:rgba(255,255,255,.9);font-size:clamp(1.08rem,1rem + .6vw,1.34rem);max-width:30ch;line-height:1.5;margin-bottom:1.9rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.hero__micro{margin-top:1.5rem;color:rgba(255,255,255,.7);font-size:.9rem;max-width:34ch}
.hero__media{position:relative}
/* tratamiento "marco editorial": reglón rojo superior + bisel claro interior + leve desplazamiento */
.frame{position:relative;background:#fff;padding:10px;border-radius:2px;box-shadow:var(--shadow)}
.frame::before{content:"";position:absolute;left:-14px;right:22px;top:-14px;height:10px;background:var(--red);z-index:2}
.frame::after{content:"";position:absolute;right:-14px;bottom:14px;left:30px;height:2px;background:var(--red)}
.frame img{width:100%;border-radius:1px}
/* descriptivo de "concepto visual" tipo mockup */
.hero__tag{position:absolute;left:12px;bottom:-26px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);background:rgba(0,0,0,.18);padding:.35rem .6rem;border-radius:2px}

@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(2rem,3.5vw,3.4rem)}
  .hero__media{min-width:0}
  .hero__media .frame::before{left:-20px}
}

/* 7 · SECCIÓN NIVELES -----------------------------------------*/
.head{max-width:44ch}
.head h2{font-size:clamp(2rem,4.6vw,3.3rem);letter-spacing:-.01em;margin-bottom:.7rem}
.head p{color:var(--ink-2);font-size:clamp(1.02rem,1rem + .3vw,1.16rem);max-width:52ch;margin-top:.2rem}
.stack{margin-top:0}

/* tarjeta de nivel (profundidad variable, no idéntica) */
.levels{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:2.2rem}
.level{background:var(--paper-2);padding:1.7rem 1.5rem;transition:background .15s ease;position:relative}
.level__index,.level .num{font-family:var(--font-display);font-size:2rem;font-weight:600;color:var(--indigo);line-height:1;display:block;margin-bottom:.5rem}
.level__rule{height:3px;width:2.6rem;margin:.2rem 0 1rem;border-radius:2px}
.level:nth-child(1) .level__rule{background:var(--red)}
.level:nth-child(2) .level__rule{background:var(--green)}
.level:nth-child(3) .level__rule{background:var(--indigo)}
.level:nth-child(4) .level__rule{background:var(--red)}
.level h3{font-size:1.5rem;margin-bottom:.35rem}
.level__meta{color:var(--ink-2);font-size:.96rem;line-height:1.5;margin-bottom:1rem}
.level__cta{font-family:var(--font-body);font-weight:700;color:var(--red);font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem;background:none;border:none;padding:0;cursor:pointer}
.level__cta:hover{color:var(--red-deep)}
.note{font-size:.82rem;color:var(--ink-2);margin-top:1.2rem;font-style:italic}

@media (min-width:760px){
  .levels{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .levels{grid-template-columns:repeat(4,1fr)}
}

/* Navigation remains available when JavaScript is unavailable. */
.no-js .nav__toggle{display:none}
.no-js .mobile-menu{position:static;transform:none;visibility:visible;max-height:none}
@media(min-width:1200px){.no-js .mobile-menu{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}