/* ===================================================================
   ESADEN ACADÉMICA — Design system & shared styles
   =================================================================== */

/* Esphimere — official brand typeface per "Manual de Marca ACADÉMICA 2021"
   (Grama Studio), self-hosted from the licensed dafont.com files
   (dafont.com/es/esphimere.font — "100% free", see assets/fonts/esphimere-LICENSE.txt).
   Paths are relative to this file (assets/css/style.css), so they resolve
   correctly whether the site is served from the domain root or a subfolder. */
@font-face {
  font-family: 'Esphimere';
  src: url('../fonts/esphimere-regular.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Esphimere';
  src: url('../fonts/esphimere-regular-italic.woff2') format('woff2');
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Esphimere';
  src: url('../fonts/esphimere-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Esphimere';
  src: url('../fonts/esphimere-bold.woff2') format('woff2');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colors — official codes from ESADEN ACADÉMICA: Azul #004C98 /
     Dorado #E2A900. Every other shade below is derived from these two
     (color-mix), never invented. */
  --brand-azul: #004C98;
  --brand-dorado: #E2A900;

  --navy-950: color-mix(in oklch, var(--brand-azul) 64%, black);
  --navy-900: color-mix(in oklch, var(--brand-azul) 76%, black);
  --navy-800: color-mix(in oklch, var(--brand-azul) 88%, black);
  --navy-700: color-mix(in oklch, var(--brand-azul) 96%, black);
  --navy-100: color-mix(in oklch, var(--brand-azul) 9%, white);

  --gold-600: color-mix(in oklch, var(--brand-dorado) 82%, black);
  --gold-500: var(--brand-dorado);
  --gold-100: color-mix(in oklch, var(--brand-dorado) 14%, white);

  --cream: oklch(97.5% 0.011 85);
  --paper: oklch(100% 0 0);
  --ink: oklch(19% 0.02 260);
  --slate: oklch(46% 0.02 260);
  --slate-light: oklch(68% 0.015 260);
  --line: oklch(89% 0.01 260);

  --ok-green: oklch(58% 0.13 150);
  --warn-amber: oklch(70% 0.15 75);

  --font-display: 'Esphimere', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: 'Esphimere', -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px oklch(20% 0.02 260 / 0.06), 0 1px 3px oklch(20% 0.02 260 / 0.08);
  --shadow-md: 0 4px 12px oklch(20% 0.02 260 / 0.08), 0 2px 4px oklch(20% 0.02 260 / 0.06);
  --shadow-lg: 0 16px 40px oklch(20% 0.02 260 / 0.14), 0 4px 12px oklch(20% 0.02 260 / 0.08);

  --container: 1200px;
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img { max-width: 100%; display: block; }
a { color: var(--navy-800); text-decoration: none; }
a:hover { color: var(--gold-600); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy-950); line-height: 1.15; margin: 0 0 0.5em; font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .container { padding-inline: 20px; } }

section { padding: 88px 0; }
@media (max-width: 780px) { section { padding: 56px 0; } }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-600);
  margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--gold-500); display: inline-block; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.section-head p { color: var(--slate); font-size: 1.08rem; }

.bg-navy { background: var(--navy-950); color: var(--navy-100); }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--paper); }
.bg-navy .eyebrow { color: var(--gold-500); }
.bg-navy p { color: oklch(80% 0.02 258); }
.bg-paper { background: var(--paper); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap; min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--gold-500); color: var(--navy-950); }
.btn-primary:hover { background: var(--gold-600); color: var(--navy-950); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--paper); border-color: oklch(100% 0 0 / 0.4); }
.btn-outline:hover { background: oklch(100% 0 0 / 0.1); color: var(--paper); border-color: oklch(100% 0 0 / 0.7); }
.btn-navy { background: var(--navy-950); color: var(--paper); }
.btn-navy:hover { background: var(--navy-800); color: var(--paper); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--navy-900); border-color: var(--line); }
.btn-ghost:hover { background: var(--navy-100); color: var(--navy-900); }
.btn-sm { padding: 10px 20px; font-size: 0.88rem; min-height: 40px; }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Top bar (bienvenida + teléfono) ---------- */
.top-bar { background: var(--navy-950); color: oklch(88% 0.02 258); font-size: 0.82rem; }
.top-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 38px; }
.top-bar-welcome { font-weight: 500; letter-spacing: .01em; }
.top-bar-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--paper); font-weight: 600; white-space: nowrap; }
.top-bar-phone:hover { color: var(--gold-500); }
.top-bar-phone svg { width: 15px; height: 15px; }
@media (max-width: 660px) { .top-bar-welcome { display: none; } .top-bar-inner { justify-content: flex-end; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: oklch(100% 0 0 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: 42px; width: auto; display: block; }

.main-nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.main-nav > ul { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-weight: 500; font-size: 0.94rem; color: var(--navy-900);
}
.nav-link:hover, .nav-link.is-active { color: var(--gold-600); background: var(--navy-100); }
.nav-item.has-menu:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-chevron { width: 13px; height: 13px; transition: transform .15s ease; }
.nav-item.has-menu:hover .nav-chevron { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 250px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden; transition: all .18s ease;
}
.dropdown a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.92rem; color: var(--ink); }
.dropdown a:hover { background: var(--navy-100); color: var(--navy-950); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-aula {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px;
  background: var(--navy-950); color: var(--paper); font-weight: 600; font-size: 0.88rem; border: 1px solid var(--navy-950);
}
.btn-aula:hover { background: var(--navy-800); color: var(--paper); }
.btn-aula svg { width: 16px; height: 16px; }

.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; }
.menu-toggle svg { width: 26px; height: 26px; color: var(--navy-950); }

@media (max-width: 1080px) {
  .main-nav { display: none; }
  .header-actions .btn-sm.header-quote { display: none; }
  .menu-toggle { display: flex; }
}
@media (max-width: 480px) {
  /* Avoids page-wide horizontal overflow on narrow phones — the mobile
     drawer (.mobile-nav-cta) already has its own "Aula Virtual" link. */
  .header-actions .btn-aula { display: none; }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200; background: var(--paper);
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  padding: 20px 20px 40px;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.mobile-nav-close { width: 44px; height: 44px; border: none; background: var(--navy-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mobile-nav-close svg { width: 22px; height: 22px; }
.mobile-accordion { border-bottom: 1px solid var(--line); }
.mobile-accordion summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 4px; font-weight: 600; font-size: 1.02rem; color: var(--navy-950); cursor: pointer;
}
.mobile-accordion summary::-webkit-details-marker { display: none; }
.mobile-accordion summary svg { width: 18px; height: 18px; transition: transform .15s ease; color: var(--slate); }
.mobile-accordion[open] summary svg { transform: rotate(180deg); }
.mobile-accordion ul { padding-bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.mobile-accordion a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--slate); font-size: 0.96rem; }
.mobile-accordion a:hover { background: var(--navy-100); color: var(--navy-950); }
.mobile-nav > a.nav-link { padding: 16px 4px; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
.mobile-nav-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

/* ---------- Hero ---------- */
.hero {
  /* Overrides the generic `section { padding: 88px 0 }` below — that's what
     was leaving a gap above and below the full-bleed slide photo. The hero's
     own spacing is fully handled by its children (.hero-slider's calc()
     height, .hero-slide > .container's padding-block, .hero-nav's own
     padding-bottom), so the section itself must sit flush at 0. */
  padding: 0;
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, oklch(45% 0.09 75 / 0.35), transparent 60%),
    linear-gradient(150deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color: var(--paper);
}
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, black, transparent 85%);
}
/* Fills the screen edge-to-edge right below the sticky header — no gap
   above/below on load. 100dvh (where supported) accounts for mobile
   browsers' address bar so it doesn't overshoot into a scrollbar there. */
.hero-slider { position: relative; min-height: calc(100vh - var(--header-h)); }
@supports (height: 100dvh) {
  .hero-slider { min-height: calc(100dvh - var(--header-h)); }
}
/* Every slide is kept in the DOM, stacked via position:absolute, and
   crossfades on opacity — this (rather than a display:none/block swap) is
   what lets outgoing and incoming photos actually overlap in transition
   instead of hard-cutting. .hero-slider's own min-height (above) replaces
   the height each slide used to contribute individually. */
.hero-slide {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.hero-slide.is-active {
  /* Stays position:absolute (not relative) — switching would break the
     inset:0 fill above, collapsing this slide down to its own content
     height instead of the full slider height (that's exactly what happened
     here before this fix: a visible gap under a short-content slide). */
  opacity: 1; visibility: visible; pointer-events: auto; z-index: 1;
  transition: opacity 0.9s ease;
}
/* The site-wide .container caps at 1200px and self-centers (margin-inline:
   auto) — fine for regular sections, but here it was leaving a wide empty
   gutter before the text on large screens, making it read as centered
   instead of pinned to the left edge over the photo. Let it use the full
   slide width instead, with its own responsive left/right breathing room. */
/* padding-block lives here (not on .hero-slide) so it only ever reserves
   breathing room for the text — the photo sibling (.hero-slide-media,
   position:absolute inset:0 on .hero-slide) is completely unaffected and
   always covers the slide's full box, edge to edge. */
.hero-slide > .container { max-width: none; margin-inline: 0; min-width: 0; padding-inline: clamp(24px, 6vw, 96px); padding-block: 104px 48px; }

/* Full-bleed slide photo (or the abstract illustration fallback) with a
   navy filter overlay so the light hero text stays readable over any image.
   A slow Ken Burns zoom-out (108% -> 100%) plays once per activation. */
.hero-slide-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide-media img, .hero-slide-media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide.is-active .hero-slide-media img,
.hero-slide.is-active .hero-slide-media svg { animation: hero-kenburns 8s ease-out forwards; }
@keyframes hero-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-slide-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, oklch(20% 0.05 258 / 0.95) 0%, oklch(24% 0.06 258 / 0.9) 38%, oklch(28% 0.07 258 / 0.68) 64%, oklch(30% 0.07 258 / 0.4) 100%),
    radial-gradient(ellipse 900px 500px at 85% -10%, oklch(45% 0.09 75 / 0.3), transparent 60%);
}

.hero-content { position: relative; z-index: 1; max-width: 640px; }
/* Staggered entrance for the direct children of .hero-content: badge(1),
   title-mask(2), subtitle-mask(3), actions(4), trust row(5). The title and
   subtitle wrappers (2 and 3) are excluded below — those two get the
   accordion reveal instead (see .hero-accordion further down); this generic
   fade/rise only drives the badge and the buttons/stats that come after. */
.hero-content > * { opacity: 0; transform: translateY(14px); }
.hero-slide.is-active .hero-content > * { animation: hero-content-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-slide.is-active .hero-content > *:nth-child(1) { animation-delay: 0.15s; }
.hero-slide.is-active .hero-content > *:nth-child(4) { animation-delay: 2.55s; }
.hero-slide.is-active .hero-content > *:nth-child(5) { animation-delay: 2.68s; }
@keyframes hero-content-in { to { opacity: 1; transform: translateY(0); } }

/* Accordion reveal for the headline + description: each is wrapped in an
   overflow-hidden "mask" (.hero-accordion); the text itself (.hero-accordion-
   text) is what actually moves, sliding up from below the mask into place.
   Only `transform` animates — no max-height/layout property — so this stays
   smooth (compositor-only) even on low-end phones. The mask itself never
   moves and isn't part of the fade/rise stagger above (it's opaque and
   static; only its contents are hidden by the overflow clip until revealed). */
.hero-content > .hero-accordion { opacity: 1; transform: none; animation: none; overflow: hidden; }
.hero-accordion-text { display: block; transform: translateY(115%); transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1); }
/* Waits out the slide's own 0.9s photo crossfade (see .hero-slide transition)
   before unfolding, so the headline lands right as the new photo settles —
   never competing with it for attention. transition-delay (not
   animation-delay) is what makes that "wait, then move" timing possible here. */
.hero-slide.is-active .hero-accordion-text { transform: translateY(0); transition-delay: 0.9s; }
.hero-slide.is-active .hero-accordion--sub .hero-accordion-text { transition-delay: 1.15s; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px;
  background: oklch(100% 0 0 / 0.08); border: 1px solid oklch(100% 0 0 / 0.16);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gold-500); margin-bottom: 22px;
}
.hero h1 { font-size: clamp(2rem, 3.6vw, 3.15rem); color: var(--paper); }
.hero .hero-sub { font-size: 1.1rem; color: oklch(85% 0.02 258); max-width: 46ch; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 28px; margin-top: 32px; flex-wrap: wrap; }
.hero-trust div { display: flex; flex-direction: column; }
.hero-trust strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--paper); }
.hero-trust span { font-size: 0.82rem; color: oklch(78% 0.02 258); }

/* ---------- Hero slider controls ---------- */
/* Floats over the photo near its bottom edge instead of sitting in normal
   flow below it — position:absolute takes it out of the flow entirely, so
   it no longer adds its own strip of height (and the .hero background
   showing through as an unwanted solid band) below the full-bleed slide. */
.hero-nav { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 20px; }
.hero-arrow {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: oklch(100% 0 0 / 0.08); border: 1px solid oklch(100% 0 0 / 0.18); color: var(--paper);
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.hero-arrow:hover { background: oklch(100% 0 0 / 0.18); border-color: oklch(100% 0 0 / 0.3); }
.hero-arrow svg { width: 18px; height: 18px; }
.hero-dots { display: flex; align-items: center; gap: 9px; }
.hero-dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: oklch(100% 0 0 / 0.28); cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.hero-dot:hover { background: oklch(100% 0 0 / 0.5); }
.hero-dot.is-active { background: var(--gold-500); transform: scale(1.3); }
.hero-arrow:focus-visible, .hero-dot:focus-visible, .hero-slider:focus-visible {
  outline: 2px solid var(--gold-500); outline-offset: 2px;
}

@media (max-width: 900px) {
  .hero-slide > .container { padding-block: 100px 40px; }
  .hero-content { max-width: 100%; }
}

/* Respects the OS-level "reduce motion" setting: no Ken Burns zoom, no
   staggered entrance, no crossfade — slides just cut instantly. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 0.2s linear, visibility 0s linear 0.2s; }
  .hero-slide.is-active { transition: opacity 0.2s linear; }
  .hero-slide.is-active .hero-slide-media img,
  .hero-slide.is-active .hero-slide-media svg { animation: none; transform: scale(1); }
  .hero-content > * { opacity: 1; transform: none; }
  .hero-slide.is-active .hero-content > * { animation: none; }
  .hero-accordion-text, .hero-slide.is-active .hero-accordion-text { transform: none; transition: none; }
}

/* ---------- Partner/ally logos (below the hero) ---------- */
.partners { padding: 40px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.partners-row { display: flex; align-items: center; gap: 48px; }
.partners-heading {
  flex-shrink: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; line-height: 1.2; color: var(--navy-950);
}
.partners-heading span { color: var(--gold-600); }
.partners-track-wrap {
  flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.partners-track {
  display: flex; align-items: center; gap: 64px; width: max-content;
  animation: partners-scroll 32s linear infinite;
}
.partners-track-wrap:hover .partners-track { animation-play-state: paused; }
.partner-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 44px; }
.partner-logo img {
  height: 100%; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(1); opacity: 0.55; transition: filter 0.2s, opacity 0.2s;
}
.partner-logo:hover img { filter: none; opacity: 1; }
.partner-logo-fallback { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--slate); white-space: nowrap; }
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}
@media (max-width: 640px) {
  .partners-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .partners-track-wrap { width: 100%; }
}

/* ---------- Icon badge ---------- */
.icon-badge {
  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--navy-100); color: var(--navy-800); flex-shrink: 0;
}
.icon-badge svg { width: 24px; height: 24px; }
.icon-badge.lg { width: 64px; height: 64px; border-radius: 16px; }
.icon-badge.lg svg { width: 30px; height: 30px; }
.icon-badge.gold { background: var(--gold-100); color: var(--gold-600); }

/* ---------- Two-column presentation ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media {
  position: relative; aspect-ratio: 6/7; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(145deg, var(--navy-100), var(--paper));
  border: 1px solid var(--line);
}
.split-media svg, .split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-media .media-tag {
  position: absolute; top: 20px; left: 20px; background: var(--paper); padding: 8px 14px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; color: var(--navy-900); box-shadow: var(--shadow-sm);
}
.split-body h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.split-body ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 26px 0 30px; }
.split-body ul li { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 0.96rem; }
.split-body ul li svg { width: 18px; height: 18px; color: var(--gold-600); flex-shrink: 0; }
@media (max-width: 860px) {
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-body ul { grid-template-columns: 1fr; }
}

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 18px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 40px;
}
.filter-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.filter-field label { font-size: 0.76rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; }
.filter-field select, .filter-field input {
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream);
  color: var(--ink); font-size: 0.92rem;
}
.filter-field select:focus, .filter-field input:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.filter-bar .btn { align-self: flex-end; }

/* ---------- Cards: program ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .card-grid { grid-template-columns: 1fr; } }

.program-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column;
}
.program-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.program-media {
  aspect-ratio: 16/10; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
}
.program-media svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }
.program-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.program-category {
  position: absolute; top: 14px; left: 14px; background: var(--gold-500); color: var(--navy-950);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.program-status {
  position: absolute; top: 14px; right: 14px; background: oklch(100% 0 0 / 0.92); color: var(--navy-900);
  font-size: 0.72rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; display: flex; align-items: center; gap: 5px;
}
.program-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-green); }
.program-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.program-body h3 { font-size: 1.18rem; margin-bottom: 8px; }
.program-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: var(--slate); margin-bottom: 14px; }
.program-meta span { display: flex; align-items: center; gap: 5px; }
.program-meta svg { width: 15px; height: 15px; color: var(--slate-light); }
.program-body p.desc { color: var(--slate); font-size: 0.93rem; flex: 1; }
.program-actions { display: flex; gap: 10px; margin-top: 16px; }
.program-actions .btn { flex: 1; }

/* ---------- Area / service tiles ---------- */
.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 980px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .area-grid { grid-template-columns: 1fr; } }
.area-tile {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px 24px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.area-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-500); }
.area-tile h3 { font-size: 1.02rem; margin: 16px 0 8px; }
.area-tile p { font-size: 0.88rem; color: var(--slate); margin: 0; }

/* ---------- Stats ---------- */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 780px) { .stats-bar { grid-template-columns: repeat(2, 1fr); } }
.stat-item { text-align: center; padding: 8px; }
.stat-item strong { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--gold-500); }
.stat-item span { font-size: 0.9rem; color: oklch(80% 0.02 258); }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .testi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 660px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.testi-stars { display: flex; gap: 3px; margin-bottom: 14px; color: var(--gold-500); }
.testi-stars svg { width: 16px; height: 16px; }
.testi-card p.quote { font-size: 0.98rem; color: var(--ink); font-style: italic; }
.testi-person { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testi-avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy-100); color: var(--navy-800);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700;
}
.testi-person strong { display: block; font-size: 0.92rem; color: var(--navy-950); }
.testi-person span { font-size: 0.8rem; color: var(--slate); }

/* ---------- Teacher cards ---------- */
.teacher-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.teacher-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.teacher-photo { aspect-ratio: 4/5; background: linear-gradient(160deg, var(--navy-100), oklch(97% 0.01 258)); position: relative; overflow: hidden; }
.teacher-photo svg, .teacher-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.teacher-body { padding: 18px 20px 22px; }
.teacher-body h3 { font-size: 1.05rem; margin-bottom: 2px; }
.teacher-body .role { font-size: 0.85rem; color: var(--gold-600); font-weight: 600; margin-bottom: 10px; }
.teacher-body p.bio { font-size: 0.88rem; color: var(--slate); }
.teacher-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--navy-100); color: var(--navy-800); }

/* ---------- Event cards ---------- */
.event-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 780px) { .event-grid { grid-template-columns: 1fr; } }

.event-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.event-media {
  aspect-ratio: 21/9; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
}
.event-media img, .event-media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-media svg { opacity: 0.85; }
.event-date {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  width: 68px; height: 68px; border-radius: var(--radius-md); background: var(--navy-950); color: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
}
.event-date strong { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
.event-date span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-500); }
.event-body { padding: 22px; }
.event-body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.event-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.85rem; color: var(--slate); margin-bottom: 10px; }
.event-meta span { display: inline-flex; align-items: center; gap: 5px; }
.event-meta svg { width: 15px; height: 15px; }
@media (max-width: 560px) { .event-media { aspect-ratio: 16/10; } .event-date { width: 58px; height: 58px; top: 12px; left: 12px; } }

/* ---------- Blog cards ---------- */
.blog-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-media { aspect-ratio: 16/10; position: relative; overflow: hidden; background: linear-gradient(150deg, var(--gold-100), var(--navy-100)); }
.blog-media svg, .blog-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-cat { position: absolute; top: 14px; left: 14px; background: var(--navy-950); color: var(--paper); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 5px 12px; border-radius: 999px; }
.blog-body { padding: 20px 22px 24px; }
.blog-meta { font-size: 0.8rem; color: var(--slate); margin-bottom: 8px; }
.blog-body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.blog-body p { font-size: 0.9rem; color: var(--slate); }
.blog-readmore { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; color: var(--navy-900); margin-top: 8px; }
.blog-readmore svg { width: 15px; height: 15px; transition: transform .15s ease; }
.blog-card:hover .blog-readmore svg { transform: translateX(3px); }

/* ---------- CTA banner ---------- */
.cta-banner {
  border-radius: var(--radius-lg); padding: 56px; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 700px 300px at 50% 0%, oklch(45% 0.09 75 / 0.4), transparent 70%), var(--navy-950);
  color: var(--paper);
}
.cta-banner h2 { color: var(--paper); font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 22ch; margin-inline: auto; }
.cta-banner p { color: oklch(82% 0.02 258); max-width: 50ch; margin-inline: auto 30px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--slate); padding: 20px 0; flex-wrap: wrap; }
.breadcrumbs a { color: var(--slate); }
.breadcrumbs a:hover { color: var(--gold-600); }
.breadcrumbs svg { width: 13px; height: 13px; color: var(--slate-light); }
.breadcrumbs .current { color: var(--navy-950); font-weight: 600; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(150deg, var(--navy-950), var(--navy-800));
  color: var(--paper); padding: 56px 0 64px; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; opacity: 0.4;
  background-image: linear-gradient(oklch(100% 0 0 / 0.04) 1px, transparent 1px), linear-gradient(90deg, oklch(100% 0 0 / 0.04) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(180deg, black, transparent 90%);
}
.page-hero h1 { color: var(--paper); font-size: clamp(1.9rem, 3.6vw, 2.8rem); position: relative; max-width: 22ch; }
.page-hero p.lead { color: oklch(84% 0.02 258); font-size: 1.08rem; max-width: 56ch; position: relative; }
.page-hero .breadcrumbs { position: relative; padding-top: 0; margin-bottom: 14px; }
.page-hero .breadcrumbs a, .page-hero .breadcrumbs svg { color: oklch(78% 0.02 258); }
.page-hero .breadcrumbs .current { color: var(--gold-500); }

/* ---------- Value / mission cards (institución) ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 980px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } }
.value-card { text-align: center; padding: 30px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
.value-card .icon-badge { margin-inline: auto; margin-bottom: 16px; }
.value-card h3 { font-size: 1rem; }
.value-card p { font-size: 0.87rem; color: var(--slate); margin: 0; }

.pillar-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .pillar-row { grid-template-columns: 1fr; } }
.pillar-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; }
.pillar-card .icon-badge { margin-bottom: 18px; }

/* ---------- FAQ / accordion ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 20px 4px; font-weight: 600; color: var(--navy-950); cursor: pointer; font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 20px; height: 20px; color: var(--gold-600); flex-shrink: 0; transition: transform .15s ease; }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item p { padding: 0 4px 20px; color: var(--slate); font-size: 0.94rem; }

/* ---------- Program detail layout ---------- */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 960px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-media { aspect-ratio: 21/9; border-radius: var(--radius-lg); overflow: hidden; position: relative; background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); margin-bottom: 32px; }
.detail-media svg, .detail-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-section { margin-bottom: 40px; }
.detail-section h2 { font-size: 1.4rem; }
.check-list li { display: flex; gap: 10px; margin-bottom: 10px; font-size: 0.96rem; }
.check-list svg { width: 19px; height: 19px; color: var(--ok-green); flex-shrink: 0; margin-top: 2px; }
.module-list { counter-reset: mod; }
.module-list li {
  counter-increment: mod; display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.module-list li::before {
  content: counter(mod, decimal-leading-zero); font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-600);
  flex-shrink: 0; width: 36px;
}
.module-list li strong { display: block; color: var(--navy-950); font-size: 0.98rem; }
.module-list li span { font-size: 0.86rem; color: var(--slate); }

.sidebar-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); position: sticky; top: calc(var(--header-h) + 24px); }
.sidebar-card .price { font-family: var(--font-display); font-size: 1.8rem; color: var(--navy-950); margin-bottom: 4px; }
.sidebar-card .price span { font-size: 0.85rem; color: var(--slate); font-family: var(--font-body); font-weight: 400; }
.sidebar-list { margin: 20px 0; display: flex; flex-direction: column; gap: 14px; }
.sidebar-list li { display: flex; justify-content: space-between; font-size: 0.9rem; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sidebar-list li strong { color: var(--navy-950); font-weight: 600; text-align: right; }
.sidebar-list li span:first-child { color: var(--slate); }
.sidebar-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.86rem; font-weight: 600; color: var(--navy-900); }
.form-field label .req { color: var(--gold-600); }
.form-field input, .form-field select, .form-field textarea {
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; border-color: var(--gold-500); }
.form-field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 0.8rem; color: var(--slate-light); margin-top: 4px; }
.form-success {
  display: none; align-items: center; gap: 14px; padding: 20px; border-radius: var(--radius-md);
  background: oklch(94% 0.05 150); border: 1px solid oklch(80% 0.09 150); color: oklch(30% 0.08 150); margin-top: 20px;
}
.form-success.is-visible { display: flex; }
.form-success svg { width: 26px; height: 26px; flex-shrink: 0; }

/* ---------- Contact info list ---------- */
.contact-info-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.contact-row { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-row:last-child { border-bottom: none; }
.contact-row strong { display: block; font-size: 0.95rem; color: var(--navy-950); margin-bottom: 2px; }
.contact-row span, .contact-row a { font-size: 0.9rem; color: var(--slate); display: block; }
.map-embed { aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); margin-top: 24px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
.video-embed { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; margin: 28px 0; }
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.post-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.post-gallery a { display: block; aspect-ratio: 4/3; border-radius: var(--radius-md, 10px); overflow: hidden; }
.post-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.post-gallery a:hover img { transform: scale(1.05); }
@media (max-width: 660px) { .post-gallery { grid-template-columns: repeat(2, 1fr); } }
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-btn {
  width: 42px; height: 42px; border-radius: 50%; background: var(--navy-100); color: var(--navy-800);
  display: flex; align-items: center; justify-content: center;
}
.social-btn:hover { background: var(--gold-500); color: var(--navy-950); }
.social-btn svg { width: 19px; height: 19px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: oklch(78% 0.02 258); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid oklch(100% 0 0 / 0.1); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--paper); font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 18px; }
.footer-grid p { font-size: 0.9rem; color: oklch(72% 0.02 258); }
.footer-grid ul { display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { font-size: 0.9rem; color: oklch(75% 0.02 258); }
.footer-grid a:hover { color: var(--gold-500); }
.footer-brand { display: flex; align-items: center; margin-bottom: 16px; }
.footer-logo { height: 56px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; color: oklch(60% 0.02 258); }
.footer-bottom a { color: oklch(60% 0.02 258); }
.footer-bottom a:hover { color: var(--gold-500); }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  width: 60px; height: 60px; border-radius: 50%; background: oklch(64% 0.16 152);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
  transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; color: var(--paper); }
.whatsapp-float .ping { position: absolute; inset: 0; border-radius: 50%; background: oklch(64% 0.16 152); animation: ping 2.2s cubic-bezier(0,0,0.2,1) infinite; z-index: -1; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Back-to-top floating button ---------- */
.back-to-top {
  position: fixed; right: 26px; bottom: 92px; z-index: 150;
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy-950); color: var(--paper);
  border: none; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background .15s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold-500); color: var(--navy-950); }
.back-to-top svg { width: 20px; height: 20px; }
@media print { .back-to-top { display: none; } }

/* ---------- Countdown (events always; programs only within 15 days of start) ---------- */
.event-countdown { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.event-countdown-unit {
  background: var(--navy-950); color: var(--paper); border-radius: var(--radius-sm);
  padding: 7px 9px; min-width: 48px; text-align: center;
}
.event-countdown-unit strong { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1; }
.event-countdown-unit span { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: .04em; color: oklch(80% 0.02 258); margin-top: 3px; }
.event-countdown-ended { font-size: 0.85rem; color: var(--slate); font-style: italic; }
.program-countdown-label {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--gold-600); margin: 2px 0 0;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Misc utility ---------- */
/* Visually hidden but still readable by screen readers (e.g. the hero's
   aria-live slide announcer) — the standard accessible-hiding pattern. */
.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;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.badge-soft { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--navy-100); color: var(--navy-800); font-size: 0.78rem; font-weight: 600; }
.divider { height: 1px; background: var(--line); margin: 64px 0; }
.placeholder-note { font-size: 0.78rem; color: var(--slate-light); font-style: italic; }

@media print { .site-header, .whatsapp-float, .site-footer { display: none; } }