/* ==========================================================================
   layout.css — contenedores, header, footer, rejillas y armazón de páginas
   ========================================================================== */

/* --- Contenedores ------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.contenedor--ancho { max-width: 1480px; }
.contenedor--estrecho { max-width: var(--ancho-estrecho); }

.seccion {
  padding-block: var(--e-9);
}

.seccion--compacta { padding-block: var(--e-7); }
.seccion--papel { background: var(--papel-2); }
.seccion--blanca { background: var(--blanco); }
.seccion--oscura {
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.78);
}
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4 { color: #fff; }

/* Textos pensados para fondo claro que caen dentro de una sección oscura.
   Sin esto, `.paso__num` (rojo al 22 %) quedaba en 1,13:1 y `.paso p`
   (`--gris-1`, un gris para papel) en 2,7:1: por debajo del 3:1 y el 4,5:1
   que pide WCAG AA. El número sigue siendo secundario respecto al título,
   solo que ahora se lee. */
.seccion--oscura .paso__num {
  /* `--rojo` no sirve aquí: sobre `--tinta` no pasa de 2,81:1 ni siquiera a
     opacidad total, así que el tono claro no es un capricho sino la única
     opción dentro de la familia de marca. A 0,9 da 3,51:1 y sigue muy por
     debajo del 15,9:1 del título, que es lo que mantiene la jerarquía. */
  color: var(--rojo-claro);
  opacity: 0.9;
}

.seccion--oscura .paso p { color: rgba(255, 255, 255, 0.72); }

/* --- Encabezado de sección ---------------------------------------------- */
.sec-cabeza {
  max-width: 720px;
  margin-bottom: var(--e-7);
}

.sec-cabeza--centro {
  margin-inline: auto;
  text-align: center;
}

.sec-cabeza .eyebrow { display: block; margin-bottom: var(--e-3); }
.sec-cabeza h2 + p { margin-top: var(--e-4); }

/* --- Header --------------------------------------------------------------
   El hueco de la cabecera se reserva ANTES de que exista.
   `iniciarPagina()` la inyecta por JS para no repetir el mismo marcado en diez
   páginas; sin esta reserva, al aparecer empujaría todo el contenido hacia
   abajo de golpe. Ese empujón, combinado con los revelados que suben, es lo
   que se percibe como «baja y vuelve a subir».
   ------------------------------------------------------------------------- */
[data-cabecera] {
  display: block;
  height: calc(var(--alto-header) + 1px);
}

.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-media) var(--ease-salida),
    box-shadow var(--dur-media) var(--ease-salida);
}

.header.is-fija {
  border-bottom-color: var(--linea);
  box-shadow: 0 1px 20px rgba(26, 36, 32, 0.05);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  height: var(--alto-header);
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--e-5);
}

/* Marca */
.marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-shrink: 0;
}

/* Logotipo horizontal. Es una imagen, no un SVG en línea, así que no hereda
   `color`: para el pie hay una variante con la tinta gris en blanco. El ancho
   va en automático para no deformar la proporción original (2,706 : 1). */
.marca__logo {
  height: 52px;
  width: auto;
  flex-shrink: 0;
}

/* Nombre del sitio, separado del logotipo por una divisoria: el logotipo
   identifica a la empresa y esto identifica a este sitio concreto. */
.marca__sub {
  display: block;
  padding-left: var(--e-3);
  border-left: 1px solid var(--linea);
  /* 9 px en gris-2 daban 3,17:1 de contraste, por debajo del mínimo de 4,5:1
     de WCAG AA, y aparecía así en todas las páginas. Con gris-1 sube a 5,81:1.
     Un punto más de tamaño tampoco sobra: proyectado, 9 px no se lee. */
  font-size: 0.625rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gris-1);
  max-width: 7.5em;
  line-height: 1.35;
}

/* Navegación */
.nav {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  margin-left: auto;
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--texto-tenue);
  white-space: nowrap;
  transition: color var(--dur-rapida) var(--ease-salida);
}

.nav__link svg {
  width: 17px;
  height: 17px;
  opacity: 0.65;
  transition: opacity var(--dur-rapida) var(--ease-salida);
}

.nav__link:hover { color: var(--tinta); }
.nav__link:hover svg { opacity: 1; }

.nav__link[aria-current='page'] {
  color: var(--rojo);
}

.nav__link[aria-current='page'] svg { opacity: 1; }

/* Píldora deslizante detrás del enlace activo (animada con GSAP) */
.nav__pildora {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--rojo-tinte);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

.nav__lista {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-1);
  isolation: isolate;
}

.header__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-shrink: 0;
}

/* Menú móvil */
.hamburguesa {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  color: var(--tinta);
}

.hamburguesa svg { width: 22px; height: 22px; }

.nav-movil {
  position: fixed;
  inset: var(--alto-header) 0 0 0;
  background: var(--blanco);
  z-index: 890;
  padding: var(--e-6) var(--e-5);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
}

.nav-movil.is-abierto { visibility: visible; }

.nav-movil__lista {
  display: grid;
  gap: var(--e-1);
  max-width: 520px;
  margin-inline: auto;
}

.nav-movil__link {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4);
  border-radius: var(--r-md);
  font-size: var(--t-lg);
  font-weight: var(--peso-bold);
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--linea-sutil);
}

.nav-movil__link svg { width: 22px; height: 22px; color: var(--rojo); }
.nav-movil__link[aria-current='page'] { color: var(--rojo); }

/* --- Footer ------------------------------------------------------------- */
.footer {
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.62);
  padding-block: var(--e-8) var(--e-5);
  position: relative;
  overflow: hidden;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--e-7);
  padding-bottom: var(--e-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__marca .marca__sub {
  color: rgba(255, 255, 255, 0.5);
  border-left-color: rgba(255, 255, 255, 0.2);
}

.footer__desc {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  line-height: 1.66;
  max-width: 34ch;
}

.footer__titulo {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: var(--e-4);
}

.footer__lista { display: grid; gap: var(--e-2); }

.footer__lista a {
  font-size: var(--t-sm);
  transition: color var(--dur-rapida) var(--ease-salida);
}

.footer__lista a:hover { color: #fff; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-top: var(--e-5);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.42);
}

.footer__lema {
  font-size: var(--t-lg);
  font-weight: var(--peso-bold);
  letter-spacing: -0.025em;
  color: #fff;
  text-align: center;
  padding-block: var(--e-6) var(--e-7);
}

.footer__lema em {
  font-style: normal;
  color: var(--rojo-claro);
}

/* --- Rejillas ----------------------------------------------------------- */
.grid { display: grid; gap: var(--e-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* Con una o dos tarjetas, una rejilla de cuatro columnas deja el contenido
   flotando en una esquina y la página parece incompleta. En ese caso se pasa a
   dos columnas para que las tarjetas ocupen un ancho deliberado. */
.grid.es-escaso { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .grid.es-escaso { grid-template-columns: 1fr; }
}

/* --- Cabecera de página interna ----------------------------------------- */
.pagina-cabeza {
  padding-block: var(--e-8) var(--e-6);
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.pagina-cabeza__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-6);
  flex-wrap: wrap;
}

.pagina-cabeza h1 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
}

.pagina-cabeza p {
  margin-top: var(--e-4);
  max-width: 62ch;
}

/* --- Migas -------------------------------------------------------------- */
.migas {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--gris-2);
  margin-bottom: var(--e-4);
}

.migas a { transition: color var(--dur-rapida); }
.migas a:hover { color: var(--rojo); }
.migas svg { width: 12px; height: 12px; opacity: 0.6; }

/* --- Transición entre páginas -------------------------------------------
   Un follaje que cruza en diagonal, de la esquina inferior izquierda a la
   superior derecha, seguido de un velo que acaba cubriendo la pantalla: es el
   velo el que hace invisible el cambio de documento.

   Al llegar a la página nueva NO hay velo que retirar, solo unas hojas sueltas.
   Así, si el JavaScript fallara, nunca podría quedarse la pantalla tapada.
   ------------------------------------------------------------------------- */
.transicion {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

/* Mientras no hay transición en curso el contenedor no intercepta nada ni
   fuerza una capa de composición. */
.transicion:not(.es-activa) .transicion__velo { visibility: hidden; }

/* El velo es CLARO a propósito. La página que llega también lo es, así que un
   velo oscuro produciría un parpadeo oscuro→claro en cada navegación. En papel
   la transición se lee como un barrido de luz y el cambio de documento pasa
   desapercibido. El borde de avance lleva un degradado verde muy tenue para
   que el barrido se perciba como movimiento y no como un corte. */
.transicion__velo {
  position: absolute;
  inset: -6%;
  display: block;
  /* Todos los tonos son OPACOS. Con transparencia se vería el contenido a
     través del velo y el cambio de documento dejaría de estar tapado, que es
     justo lo único que el velo tiene que garantizar. El degradado solo tiñe el
     borde de avance para que el barrido se lea como movimiento. */
  background:
    linear-gradient(
      to top right,
      #cfe4c6 0%,
      #e8f2e2 10%,
      var(--papel) 26%,
      var(--papel) 100%
    );
  transform: translate(-105%, 105%);
  will-change: transform;
}

.transicion__hoja {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

.transicion__hoja svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(31, 74, 46, 0.22));
}

/* Capa de llegada: las hojas cruzan por encima del contenido sin taparlo. */
.transicion--suelta { z-index: 940; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1120px) {
  .nav { display: none; }
  .hamburguesa { display: flex; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--e-6); }
}

@media (max-width: 860px) {
  :root { --alto-header: 64px; }
  .marca__logo { height: 42px; }
  .seccion { padding-block: var(--e-7); }
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  .grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .contenedor { padding-inline: var(--e-4); }
  .header__inner { padding-inline: var(--e-4); }
  .pagina-cabeza { padding-block: var(--e-6) var(--e-5); }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .marca__sub { display: none; }
}