:root {
  --stf-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --stf-color-bg: #24346c;
  --stf-color-accent-shape: #bf9439;
  --stf-color-heading: #ffce65;
  --stf-color-text: #ffffff;
  --stf-color-text-muted: #d9d9d9;
  --stf-max-width: 75rem;
  --stf-gap: clamp(2rem, 5vw, 3.4375rem);
  --stf-accent-top: 5.375rem;
  --stf-accent-height: 5.3125rem;
}

html {
  height: 100%;
}

/* Sticky footer: cuando el contenido real de la página (entre header y
   footer) no llena el viewport, el footer debe quedar igualmente pegado
   abajo. Al integrar de verdad, el wrapper del contenido de la página
   necesita "flex: 1 0 auto" (ver .demo-spacer más abajo, que lo hace solo
   para esta vista de componentes). */
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Con el menú mobile abierto se bloquea el scroll de la página de fondo;
   .site-header__nav es position:fixed con su propio overflow-y:auto, así
   que sigue pudiendo desplazarse internamente si hay muchos grupos abiertos. */
body.site-header-lock-scroll {
  overflow: hidden;
}

.st-footer,
.st-footer * {
  box-sizing: border-box;
}

.st-footer {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--stf-color-bg);
  color: var(--stf-color-text);
  font-family: var(--stf-font);
  font-size: 1rem;
  line-height: 1.4;
}

/* Rellena el hueco entre el borde real del viewport y el borde izquierdo
   del container centrado (cuando el viewport supera --stf-max-width), para
   que el dorado siga arrancando desde left:0 real y no quede enmarcado
   dentro de los 1200px. Sin clip-path: es un relleno liso, el recorte en
   diagonal lo pone .st-footer__accent, que arranca justo donde este acaba. */
.st-footer__accent-bleed {
  position: absolute;
  z-index: -1;
  top: var(--stf-accent-top);
  left: 0;
  width: max(0px, calc(50% - (var(--stf-max-width) / 2)));
  height: var(--stf-accent-height);
  background: var(--stf-color-accent-shape);
}

.st-footer__accent {
  position: absolute;
  z-index: -1;
  top: var(--stf-accent-top);
  left: 0;
  width: min(35.95%, 19rem);
  height: var(--stf-accent-height);
  background: var(--stf-color-accent-shape);
  clip-path: polygon(0 0, 84% 0, 100% 100%, 0 100%);
}

.st-footer a {
  color: inherit;
  text-decoration: none;
}

.st-footer a:hover,
.st-footer a:focus-visible {
  text-decoration: underline;
}

.st-footer__container {
  position: relative;
  z-index: 0;
  max-width: var(--stf-max-width);
  margin: 0 auto;
  padding: 6rem 0 0 0;
}

/* --- Fila principal: marca + 4 columnas de navegación --- */

.st-footer__main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stf-gap);
  padding-bottom: 6.0625rem;
}

.st-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 2.375rem;
  flex: 1 1 16rem;
  min-width: 16rem;
}

.st-footer__logo {
  display: inline-block;
  width: 14.3125rem;
}

.st-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.st-footer__offices {
  display: flex;
  flex-direction: row;
  gap: 1.125rem;
}

.st-footer__office {
  display: flex;
  flex-direction: column;
  font-style: normal;
  color: var(--stf-color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.st-footer__office-title {
  color: #d9d9d9;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.05rem;
  margin-bottom: 0.125rem;
}

.st-footer__office-line {
  color: #d9d9d9;
}

.st-footer__office a.st-footer__office-line:hover,
.st-footer__office a.st-footer__office-line:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.st-footer__office-phone {
  text-decoration: none;
}

.st-footer__social {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stf-color-text);
}

.st-footer__social a:hover,
.st-footer__social a:focus-visible {
  color: var(--stf-color-heading);
  text-decoration: none;
}

.st-footer__social svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.st-footer__nav-group {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  gap: 2.1875rem;
}

.st-footer__nav {
  flex: 1 1 10.875rem;
  min-width: 9rem;
}

.st-footer__nav h3 {
  margin: 0 0 1rem;
}

.st-footer__nav-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--stf-color-heading);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: default;
}

.st-footer__nav-icon {
  display: none;
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.5rem;
  color: var(--stf-color-heading);
  transition: transform 0.2s ease;
}

.st-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-footer__nav-list a {
  color: var(--stf-color-text);
  font-size: 1rem;
  line-height: 1.2rem;
}

.st-footer__nav-list a:hover,
.st-footer__nav-list a:focus-visible {
  color: var(--stf-color-heading);
  text-decoration: none;
}

/* --- Barra inferior: legal + créditos --- */

.st-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.71875rem 0;
}

.st-footer__legal,
.st-footer__credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-footer__legal a {
  color: #ffffff;
  font-size: 0.8125rem;
}

.st-footer__credits a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  font-size: 0.75rem;
}

.st-footer__bottom a:hover,
.st-footer__bottom a:focus-visible {
  text-decoration: none;
}

.st-footer__credits img {
  display: block;
  width: auto;
  height: auto;
}

@media (max-width: 77.5em) {
  .st-footer__container {
    padding-left: 2.25rem;
    padding-right: 2.3125rem;
  }
}

/* --- Responsive: tablet (1100px) y mobile, acordeón colapsable --- */

@media (max-width: 68.75em) {
  .st-footer__container {
    padding: 4.375rem 2.3125rem 0 2.25rem;
  }

  .st-footer {
    --stf-accent-top: 3.375rem;
    --stf-accent-height: 5.6875rem;
  }

  .st-footer__accent {
    width: 91.95%;
    clip-path: polygon(0 0, 84% 0, 97% 100%, 0 100%);
  }

  .st-footer__main {
    flex-direction: column;
    gap: 2rem 0;
    padding-bottom: 0;
  }

  .st-footer__nav-group {
    flex-direction: column;
    gap: 2rem 0;
  }

  .st-footer__nav {
    flex: none;
    width: 100%;
  }

  .st-footer__nav h3 {
    margin-bottom: 0;
  }

  .st-footer.is-collapsible .st-footer__nav-toggle {
    cursor: pointer;
    justify-content: space-between;
  }

  .st-footer.is-collapsible .st-footer__nav-icon {
    display: block;
  }

  .st-footer.is-collapsible .st-footer__nav-list {
    display: none;
    margin-top: 1rem;
  }

  .st-footer.is-collapsible .st-footer__nav.is-open .st-footer__nav-list {
    display: flex;
  }

  .st-footer.is-collapsible .st-footer__nav.is-open .st-footer__nav-icon {
    transform: rotate(180deg);
  }

  .st-footer__bottom {
    flex-direction: column;
    align-items: center;
    padding-top: 0.375rem;
    padding-bottom: 1rem;
  }

  .st-footer__credits {
    align-items: center;
  }
}

/* Tablet real (768-1100px): tope de 637px para que el polígono no crezca
   más que eso; en mobile (≤767px) se mantiene el 91.95% sin tope. */
@media (min-width: 48em) and (max-width: 68.75em) {
  .st-footer__accent {
    width: min(91.95%, 39.8125rem);
  }
}

/* --- Mobile 767px: valores tomados de /Documentacion/footer-responsive-okarion --- */

@media (max-width: 47.9375em) {
  .st-footer__main {
    gap: 2.375rem 0;
  }

  .st-footer__offices {
    flex-direction: column;
    gap: 1.25rem;
  }

  .st-footer__office {
    gap: 0.25rem;
  }

  .st-footer__office-title {
    margin-bottom: 0;
  }

  .st-footer__social {
    gap: 1.9375rem;
  }

  .st-footer__social svg {
    width: 1.375rem;
    height: 1.375rem;
  }

  .st-footer__nav-list {
    gap: 1.375rem;
  }

  .st-footer__legal {
    gap: 0.9375rem;
  }

  .st-footer__bottom {
    align-items: center;
  }

  .st-footer__credits {
    flex-direction: column;
    align-items: center;
    gap: 0.59375rem;
  }
}

/* ==========================================================================
   SITE HEADER — namespace .site-header, aislado del footer (.st-footer).
   Reusa tokens compartidos (--stf-font, --stf-color-bg, --stf-color-heading,
   --stf-color-text, --stf-max-width) y añade solo lo propio bajo --sh-*.
   ========================================================================== */

:root {
  --sh-color-dark: #161f3f;
  --sh-color-divider: #3b52a4;
  --sh-breakpoint: 68.75em; /* 1100px, mismo breakpoint tablet del proyecto */
}

.site-header,
.site-header * {
  box-sizing: border-box;
}

.site-header {
  position: relative;
  font-family: var(--stf-font);
  font-size: 1rem;
  line-height: 1.2;
}

/* En escritorio el header flota sobre el contenido de la página (banners,
   heroes...) en vez de empujarlo: sale del flujo con absolute en vez de
   sticky. El wrapper de la página necesita que ese primer bloque no tenga
   padding-top propio para quedar detrás del header. */
@media (min-width: 68.75em) {
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
  }

  .site-header__main {
    position: static;
  }
}

.site-header a {
  color: inherit;
  text-decoration: none;
}

/* --- Topbar --- */

.site-header__topbar {
  background: var(--stf-color-bg);
}

.site-header__topbar-inner {
  max-width: var(--stf-max-width);
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header__tagline {
  margin: 0;
  color: var(--stf-color-text);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

.site-header__tagline span {
  color: var(--stf-color-heading);
}

.site-header__quicklinks ul {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__quicklinks a {
  display: inline-block;
  padding: 0.625rem 1rem;
  color: var(--stf-color-text);
  font-size: 1rem;
  white-space: nowrap;
}

.site-header__quicklinks a:hover,
.site-header__quicklinks a:focus-visible {
  text-decoration: none;
  color: #ffffff;
  background: var(--sh-color-divider);
}

/* --- Barra principal --- */

.site-header__main {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--stf-color-bg);
  transition: box-shadow 0.2s ease;
}

@media (min-width: 68.75em) {
  .site-header__main {
    background: var(--sh-color-dark);
  }
}

.site-header.is-scrolled .site-header__main {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

/* Mismo patrón bleed + forma fija que en el footer: un relleno liso hasta
   left:0 del viewport, y la forma con corte diagonal a ancho fijo (no se
   desplaza con el contenido) encima. */
.site-header__accent-bleed {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: max(0px, calc(50% - (var(--stf-max-width) / 2)));
  height: 5.3125rem;
  background: var(--stf-color-accent-shape);
}

.site-header__main-inner {
  position: relative;
  z-index: 0;
  max-width: var(--stf-max-width);
  margin: 0 auto;
  padding: 1.125rem 0 1.1875rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

@media (max-width: 77.5em) {
  .site-header__main-inner {
    padding-left: 1.375rem;
    padding-right: 2.375rem;
  }
}

.site-header__accent {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 73.93%;
  height: 4.6875rem;
  background: var(--stf-color-accent-shape);
  clip-path: polygon(0 0, 84% 0, 100% 100%, 0 100%);
}

/* Ancho/alto de escritorio a partir del breakpoint: la forma decorativa
   debe cubrir hasta detrás del logo (calculado desde el Figma de
   escritorio, 37.82375rem sobre un container de 75rem) sin invadir el nav
   ni desajustar la altura de 85px de .site-header__main-inner. Por debajo
   del breakpoint se mantienen los valores propios del responsive. */
@media (min-width: 68.75em) {
  .site-header__accent {
    width: 21%;
    height: 5.3125rem;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
  }
}

.site-header__logo {
  flex-shrink: 0;
  display: inline-block;
  width: 9.75rem;
  height: 2.625rem;
}

@media (min-width: 68.75em) {
  .site-header__logo {
    width: 11.25rem;
    height: 3rem;
  }
}

.site-header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--stf-color-text);
}

.site-header__burger-bars {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3125rem;
}

.site-header__burger-close {
  display: none;
  width: 1.1875rem;
  height: 1.1875rem;
}

.site-header.is-nav-open .site-header__burger-bars {
  display: none;
}

.site-header.is-nav-open .site-header__burger-close {
  display: block;
}

.site-header__burger-bars > span {
  display: block;
  width: 1.875rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: var(--stf-color-text);
  transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.6875rem;
  flex: 1;
}

.site-header__nav-body {
  display: contents;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

@media (min-width: 68.75em) {
  .site-header__nav-list {
    column-gap: 2.375rem;
  }
}

.site-header__nav-item .site-header__nav-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--stf-color-text);
  font-size: 1rem;
}

.site-header__nav-item a.site-header__nav-link {
  color: inherit;
  font: inherit;
}

.site-header__nav-item a.site-header__nav-link:hover,
.site-header__nav-item a.site-header__nav-link:focus-visible {
  text-decoration: none;
  color: var(--stf-color-heading);
}

/* Superficie táctil ampliada vía padding + margin negativo: el botón crece
   sin desplazar el chevron visual ni separarlo del texto. */
.site-header__nav-chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.625rem;
  margin: -0.625rem;
  cursor: pointer;
  color: inherit;
}

@media (min-width: 68.75em) {
  .site-header__nav-chevron-btn {
    padding-left: 0;
    padding-right: 0;
  }
}

.site-header__nav-chevron {
  width: 0.3125rem;
  height: 0.4375rem;
  color: var(--stf-color-heading);
  transition: transform 0.2s ease;
}


.site-header__cta {
  flex-shrink: 0;
  background: #ffffff;
  color: #000000;
  border: 0.0625rem solid transparent;
  border-radius: 2.8125rem;
  padding: 0.5rem 1.375rem;
  font-size: 1rem;
  white-space: nowrap;
}

.site-header__mobile-quicklinks {
  display: none;
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
  text-decoration: none;
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

/* --- Paneles desplegables (submenús + mega menú) --- */

.site-header__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 15;
  background: var(--sh-color-dark);
  border-radius: 0 0 0.375rem 0.375rem;
}

.site-header__panel[hidden] {
  display: none;
}

.site-header__panel-inner {
  max-width: var(--stf-max-width);
  margin: 0 auto;
  padding: 2.375rem 1.875rem;
}

.site-header__panel-inner--simple {
  padding: 1.25rem 1.875rem;
}

.site-header__panel-inner--simple p {
  color: var(--stf-color-text);
  font-size: 0.9375rem;
}

.site-header__mega-columns {
  display: flex;
  gap: 2.8125rem;
  margin-bottom: 5.25rem;
}

/* Paneles compactos (todos menos Programas): sin mega-footer, se ajustan
   al contenido y quedan alineados con el nav-link que los activa (la
   posición left exacta la calcula el JS contra el trigger). */
.site-header__panel--compact {
  left: 0;
  right: auto;
  width: max-content;
  max-width: 20rem;
}

.site-header__panel--compact .site-header__panel-inner {
  max-width: none;
  margin: 0;
  padding: 1.25rem 1.5rem;
}

.site-header__panel--compact .site-header__mega-columns {
  gap: 2rem;
  margin-bottom: 0;
}

.site-header__mega-col {
  flex: 1 1 21.875rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-header__mega-col > .site-header__mega-heading {
  color: var(--stf-color-heading);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.site-header__mega-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-header__mega-group .site-header__mega-heading {
  color: var(--stf-color-heading);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* El chevron del submenú solo despliega/colapsa en mobile; en escritorio
   las columnas están siempre visibles y el botón no pinta nada. */
.site-header__mega-heading .site-header__nav-chevron-btn {
  display: none;
}

.site-header__mega-group + .site-header__mega-group {
  margin-top: 0.5625rem;
}

.site-header__mega-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__mega-col a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--stf-color-text);
  font-size: 0.875rem;
}

.site-header__mega-col a:hover,
.site-header__mega-col a:focus-visible {
  text-decoration: none;
  color: var(--stf-color-heading);
}

.site-header__mega-col a::before {
  content: "";
  flex-shrink: 0;
  width: 0.25rem;
  height: 0.4375rem;
  background: currentColor;
  clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%, 65% 50%);
}

.site-header__mega-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 1.375rem;
  border-top: 0.0625rem solid var(--sh-color-divider);
}

.site-header__mega-footer a.site-header__mega-cta {
  color: #ffffff;
  font-size: 1rem;
  border: 0.0625rem solid #ffffff;
  border-radius: 2.8125rem;
  padding: 0.875rem 1.5rem;
}

.site-header__mega-footer a.site-header__mega-cta:hover,
.site-header__mega-footer a.site-header__mega-cta:focus-visible {
  text-decoration: none;
  background: #ffffff;
  color: #000000;
}

/* --- Responsive: mismo breakpoint tablet (1100px) del proyecto --- */

@media (max-width: 68.75em) {
  .site-header__topbar {
    display: none;
  }

  .site-header__burger {
    display: flex;
  }

  .site-header__main-inner {
    padding: 1rem 2.25rem 1.0625rem;
    gap: 1rem;
  }

  .site-header__nav {
    position: fixed;
    top: var(--sh-mobile-nav-top, 4.5rem);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sh-color-dark);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 1.875rem 0;
    overflow-y: auto;
    display: flex;
    visibility: hidden;
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .site-header.is-nav-open .site-header__nav {
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition: transform 0.3s ease;
  }

  .site-header__nav-chevron-btn[aria-expanded="true"] .site-header__nav-chevron {
    transform: rotate(180deg);
  }

  .site-header__nav-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .site-header__nav-list {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 0;
  }

  .site-header__nav-item {
    border-bottom: 0.0625rem solid var(--sh-color-divider);
  }

  .site-header__nav-item .site-header__nav-row {
    width: 100%;
    justify-content: flex-start;
    padding: 1.625rem 0;
  }

  .site-header__nav-item:first-child .site-header__nav-row {
    padding-top: 0;
  }

  .site-header__cta {
    margin-top: 1.5rem;
    text-align: center;
    justify-content: center;
  }

  /* Los enlaces del topbar (Agenda/Casos/Campus/Encuentra tu programa) no
     tienen topbar propio en mobile (va oculto, igual que en producción),
     así que se repiten al final del drawer, como en el export. */
  .site-header__mobile-quicklinks {
    display: block;
    background: var(--stf-color-bg);
    margin-top: 2.3125rem;
    padding: 2.3125rem 1.25rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.15);
  }

  .site-header__mobile-quicklinks ul {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-header__mobile-quicklinks a {
    color: var(--stf-color-text);
    font-size: 1rem;
  }

  .site-header__mobile-quicklinks a:hover,
  .site-header__mobile-quicklinks a:focus-visible {
    text-decoration: none;
    color: var(--stf-color-heading);
  }

  .site-header__panel {
    position: static;
    border-radius: 0;
  }

  .site-header__panel--compact {
    width: auto;
    max-width: none;
  }

  .site-header__panel-inner {
    padding: 0;
  }

  .site-header__panel-inner--simple {
    padding: 0 0 1.5rem;
  }

  .site-header__panel--compact .site-header__panel-inner {
    padding: 0;
  }

  .site-header__mega-columns {
    flex-direction: column;
    gap: 1.75rem;
    margin-bottom: 1.75rem;
  }

  .site-header__mega-col {
    flex: none;
  }

  .site-header__mega-col ul {
    gap: 1rem;
  }

  .site-header__mega-col > ul:only-child {
    padding-bottom: 1rem;
  }

  .site-header__mega-col > .site-header__mega-heading {
    font-weight: 400;
  }

  .site-header__mega-group .site-header__mega-heading {
    font-weight: 400;
  }

  /* Acordeón anidado: dentro de un submenú con varios grupos (Programas,
     San Telmo), cada grupo se abre/cierra por separado. El chevron (mismo
     svg pequeño que el del nav principal) es quien despliega, pegado al
     texto y con superficie de touch ampliada vía padding + margin negativo. */
  .site-header__mega-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.875rem;
  }

  .site-header__mega-heading .site-header__nav-chevron-btn {
    display: inline-flex;
  }

  .site-header__mega-heading .site-header__nav-chevron-btn[aria-expanded="true"] .site-header__nav-chevron {
    transform: rotate(180deg);
  }

  .site-header__mega-col ul.is-collapsed,
  .site-header__mega-group ul.is-collapsed {
    display: none;
  }

  .site-header__mega-footer {
    display: none;
  }
}

/* ==========================================================================
   DEMO SPACER — solo para esta vista de componentes (header + footer
   sueltos), NO forma parte del entregable de header/footer en sí.
   ========================================================================== */

.demo-spacer {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 19rem;
  padding: 1.5rem;
  text-align: center;
  background: #eef0f4;
  color: #6b7280;
  font-family: var(--stf-font);
  font-size: 0.875rem;
}

/* Solo para esta vista de componentes: simula el padding-top que la página
   real necesitará en su primer bloque para no quedar tapada por el header
   absolute de escritorio (topbar + main = 7.75rem). */
@media (min-width: 68.75em) {
  .demo-spacer p {
    padding-top: 7.75rem;
  }
}