/* ============================================================
   AVANTY — Sistema de diseño
   Layout general — Fase 1, Archivo 4
   Depende de variables.css, reset.css y components.css.
   No incluye estilos de página (hero, problemas, etc.) — eso
   vive en pages.css, a partir de la Fase 2.
   ============================================================ */

/* ------------------------------------------------------------
   VARIABLES PROPIAS DE ESTE ARCHIVO
   La altura del header solo se conoce al definir el header en sí,
   así que se agrega aquí en vez de en variables.css — es válido
   declarar más variables en :root desde cualquier archivo CSS,
   se suman a las que ya existen sin pisarlas.
   ------------------------------------------------------------ */
:root {
  --header-height: 84px;
  --header-height-scrolled: 68px;
}

/* Compensa el header fijo al saltar a un ancla dentro de la página */
html {
  scroll-padding-top: var(--header-height);
}

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

/* ------------------------------------------------------------
   SECCIONES DE PÁGINA
   ------------------------------------------------------------ */
.section {
  padding-block: var(--space-9);
}

.section--sm {
  padding-block: var(--space-7);
}

.section--lg {
  padding-block: var(--space-10);
}

.section--oscuro {
  background-color: var(--color-fondo-oscuro);
  color: var(--color-texto-sobre-oscuro);
}

.section--oscuro-alterno {
  background-color: var(--color-fondo-oscuro-alterno);
  color: var(--color-texto-sobre-oscuro);
}

.section--claro-secundario {
  background-color: var(--color-fondo-claro-secundario);
}

.section__header {
  max-width: 680px;
  margin-bottom: var(--space-8);
}

.section__header--centrado {
  margin-inline: auto;
  text-align: center;
}

/* ------------------------------------------------------------
   SISTEMA DE GRILLA
   El colapso a 1 columna en móvil se define en responsive.css.
   ------------------------------------------------------------ */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ------------------------------------------------------------
   HEADER
   Fondo sólido desde el inicio (no transparente): así se ve bien
   sin importar qué contenido tenga cada página debajo. Si más
   adelante se quiere un header transparente solo sobre el hero de
   index.php, se agrega como excepción puntual en pages.css, sin
   tocar esto.
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  background-color: var(--color-fondo-oscuro);
  border-bottom: 1px solid var(--color-borde-sobre-oscuro);
  transition: height var(--transition-base) var(--easing-standard),
              box-shadow var(--transition-base) var(--easing-standard);
}

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

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 36px;
  width: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   NAVEGACIÓN DE ESCRITORIO
   Se muestra u oculta según el ancho en responsive.css.
   ------------------------------------------------------------ */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
}

.site-nav__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-texto-sobre-oscuro-secundario);
  text-decoration: none;
  padding-block: var(--space-2);
  transition: color var(--transition-base) var(--easing-standard);
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--color-texto-sobre-oscuro);
}

.site-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background-color: var(--color-acento);
}

/* ------------------------------------------------------------
   MENÚ MÓVIL — sección 9, "menú móvil accesible"
   navigation.js agrega/quita is-open y cambia aria-expanded.
   ------------------------------------------------------------ */
.mobile-menu-toggle {
  display: none; /* responsive.css decide en qué ancho se muestra */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
}

.mobile-menu-toggle span {
  display: block;
  height: 2px;
  background-color: var(--color-texto-sobre-oscuro);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base) var(--easing-standard),
              opacity var(--transition-base) var(--easing-standard);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  background-color: var(--color-fondo-oscuro);
  border-top: 1px solid var(--color-borde-sobre-oscuro);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base) var(--easing-standard),
              transform var(--transition-base) var(--easing-standard),
              visibility 0s linear var(--transition-base);
}

.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-base) var(--easing-standard),
              transform var(--transition-base) var(--easing-standard),
              visibility 0s linear 0s;
}

.mobile-menu__list {
  list-style: none;
  padding: var(--space-5) var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-menu__link {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-texto-sobre-oscuro);
  text-decoration: none;
  border-bottom: 1px solid var(--color-borde-sobre-oscuro);
}

/* ------------------------------------------------------------
   ENVOLTORIO DEL CONTENIDO PRINCIPAL
   Compensa la altura del header fijo para que no tape el
   contenido al cargar la página.
   ------------------------------------------------------------ */
.main-content {
  padding-top: var(--header-height);
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background-color: var(--color-fondo-oscuro-alterno);
  color: var(--color-texto-sobre-oscuro);
  padding-block: var(--space-9) var(--space-6);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}

.site-footer__brand img {
  height: 40px;
  width: auto;
  margin-bottom: var(--space-4);
}

.site-footer__tagline {
  color: var(--color-texto-sobre-oscuro-secundario);
  font-size: var(--text-sm);
  max-width: 32ch;
}

.site-footer__heading {
  font-family: var(--font-family-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-acento);
  margin-bottom: var(--space-4);
}

.site-footer__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__list a {
  color: var(--color-texto-sobre-oscuro-secundario);
  text-decoration: none;
  font-size: var(--text-sm);
}

.site-footer__list a:hover {
  color: var(--color-texto-sobre-oscuro);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-borde-sobre-oscuro);
  border-radius: var(--radius-full);
  color: var(--color-texto-sobre-oscuro);
  transition: background-color var(--transition-base) var(--easing-standard),
              border-color var(--transition-base) var(--easing-standard);
}

.site-footer__social a:hover {
  background-color: var(--color-interactivo);
  border-color: var(--color-interactivo);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-borde-sobre-oscuro);
  font-size: var(--text-xs);
  color: var(--color-texto-sobre-oscuro-secundario);
}