/* ==== Contenedores y secciones ==== */

.container {
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Secciones visuales (niveles, bento, trayectoria): más aire en escritorio
   grande en vez de quedarse siempre en 1280px. */
.container--wide {
  max-width: var(--container-wide);
}

/* Texto largo (legal, editorial, FAQ) — nunca usar en secciones visuales. */
.container--reading {
  max-width: var(--container-reading);
}

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

.section--tight {
  padding-block: var(--space-xl);
}

.section--surface {
  background-color: var(--color-background-alt);
}

.section--deep {
  background-color: var(--color-primary-deep);
  color: var(--color-white);
}

.section--deep h2,
.section--deep h3 {
  color: var(--color-white);
}

.section--deep p {
  color: rgba(255, 255, 255, 0.78);
}

.section--overflow-hidden {
  overflow: hidden;
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

/* ==== Header ==== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border-soft);
  transition:
    box-shadow var(--transition-base),
    background-color var(--transition-base),
    padding var(--transition-base);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-md);
  transition: height var(--transition-base);
}

.site-header.is-scrolled .site-header__inner {
  height: var(--header-height-scrolled);
}

.site-header__brand {
  flex-shrink: 0;
}

/* ==== Logo ==== */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  line-height: 1.1;
}

.logo__mark {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  transition: width var(--transition-base), height var(--transition-base);
}

/* En el footer (fondo oscuro) el logotipo real se apoya en un disco claro
   para conservar contraste, sin modificar el archivo original. */
.logo--light .logo__mark {
  background-color: var(--color-white);
  border-radius: 50%;
  padding: 4px;
  box-sizing: border-box;
}

.site-header.is-scrolled .logo__mark {
  width: 38px;
  height: 38px;
}

.logo__name {
  display: block;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  color: var(--color-primary-deep);
}

.logo--light .logo__name {
  color: var(--color-white);
}

.logo--light .logo__place {
  color: rgba(255, 255, 255, 0.6);
}

.logo__place {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ==== Navegación principal ==== */

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.menu-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary-deep);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: nowrap;
}

.primary-nav__item {
  position: relative;
}

.primary-nav__link {
  display: inline-block;
  padding: var(--space-2xs) 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.primary-nav__link:hover,
.primary-nav__link[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent-dark);
}

.primary-nav__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2xs);
  z-index: var(--z-header);
}

.primary-nav__item:hover .primary-nav__submenu,
.primary-nav__item:focus-within .primary-nav__submenu {
  display: block;
}

.primary-nav__submenu li a {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.primary-nav__submenu li a:hover {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.primary-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1, 31, 77, 0.45);
  z-index: var(--z-mobile-menu);
}

.menu-backdrop[hidden] {
  display: none;
}

/* El punto de quiebre se fijó en 1340px tras medir el desbordamiento real
   del header: con 6 enlaces + submenú + 2 botones + logotipo, el contenido
   necesita ~1215-1265px incluso después de ajustar los espacios; el
   breakpoint anterior (960px) dejaba el header saturado entre 961-1279px. */
@media (max-width: 1339px) {
  .menu-toggle {
    display: flex;
  }

  .primary-nav {
    /* display:none en reposo (además de la traslación fuera de pantalla):
       un elemento position:fixed sigue contribuyendo al ancho de scroll del
       documento aunque esté trasladado fuera de la vista, lo que provocaba
       scroll horizontal en toda la página. navigation.js alterna este
       "display" alrededor de la transición para conservar la animación de
       deslizamiento (ver CL-WEB 0.1.3). */
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(340px, 86vw);
    background-color: var(--color-white);
    z-index: calc(var(--z-mobile-menu) + 1);
    padding: calc(var(--header-height) + var(--space-md)) var(--space-md) var(--space-md);
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-base);
  }

  .primary-nav.is-open {
    transform: translateX(0);
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav__item {
    border-bottom: 1px solid var(--color-border);
  }

  .primary-nav__link {
    padding: var(--space-sm) 0;
  }

  .primary-nav__submenu {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding-left: var(--space-sm);
  }

  .primary-nav__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-md);
  }
}

@media (min-width: 1340px) {
  .menu-backdrop {
    display: none !important;
  }
}

/* ==== Footer ==== */

.site-footer {
  background-color: var(--color-primary-deep);
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  overflow: hidden;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(2, 1fr);
  padding-block: var(--space-2xl) var(--space-lg);
  position: relative;
  z-index: 1;
}

.site-footer__tagline {
  margin-top: var(--space-sm);
  color: rgba(255, 255, 255, 0.75);
  max-width: 32ch;
}

.site-footer__levels {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__heading {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-footer__col a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer__col a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.site-footer__campus-text {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-sm);
}

.site-footer .btn--outline {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}

.site-footer .btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.site-footer__social {
  padding-block: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1;
}

.site-footer__social ul {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.site-footer__social a {
  color: rgba(255, 255, 255, 0.75);
  text-transform: capitalize;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1;
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__legal {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.site-footer__legal a {
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__legal a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

@media (min-width: 720px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}