/* ==========================================================================
   layout.css — Estructura común a todas las páginas:
   encabezado, navegación, secciones, cabecera de página interna y pie.

   BREAKPOINTS (excepción técnica documentada)
   Las custom properties no se pueden usar dentro de @media, así que los
   breakpoints son los únicos tamaños literales permitidos fuera de tokens.css.
   Solo existen tres, siempre con max-width (diseño de escritorio a móvil):

     1200px  → el menú principal pasa a botón hamburguesa
                (debe coincidir con MENU_ESCRITORIO en assets/js/menu.js)
      900px  → tabletas: rejillas de 3–4 columnas pasan a 1–2
      640px  → móviles: todo a una columna

   No añadir valores nuevos: reutilizar uno de estos tres.
   ========================================================================== */

/* ---------- Encabezado ---------- */
/* Componente marcado: header. header.js pone .is-compacto al hacer scroll:
   el fondo sólido se desvanece y deja uno translúcido con blur, aparece la
   sombra, el logo se reduce y la descripción se oculta. La ALTURA no cambia. */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  padding-top: var(--safe-top);
  background: var(--fondo-encabezado-compacto);
  -webkit-backdrop-filter: blur(var(--blur-encabezado));
  backdrop-filter: blur(var(--blur-encabezado));
  color: var(--c-blanco);
}
/* Capa sólida (estado inicial) y sombra (estado compacto): se animan por opacidad */
.encabezado::before,
.encabezado::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity var(--dur-media) var(--ease-cambio);
}
.encabezado::before { background: var(--fondo-encabezado); }
.encabezado::after { box-shadow: var(--sombra-encabezado); opacity: 0; }
.encabezado.is-compacto::before { opacity: 0; }
.encabezado.is-compacto::after { opacity: 1; }
/* Sin backdrop-filter el fondo translúcido sería poco legible: se queda sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .encabezado.is-compacto::before { opacity: 1; }
}

.encabezado__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.marca { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tactil); text-decoration: none; }
.marca__logo {
  width: var(--logo); height: var(--logo); flex: none;
  transform-origin: left center;
  transition: transform var(--dur-media) var(--ease-cambio);
}
.marca__texto { display: flex; flex-direction: column; line-height: var(--leading-ajustado); }
.marca__nombre { font-family: var(--f-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: var(--tracking-amplio); }
.marca__desc {
  font-size: var(--text-xs); color: var(--c-texto-inverso-suave); max-width: var(--medida-marca);
  transition: opacity var(--dur-media) var(--ease-cambio);
}
.is-compacto .marca__logo { transform: scale(var(--escala-logo-compacto)); }
.is-compacto .marca__desc { opacity: 0; }

/* ---------- Navegación ---------- */
.nav__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.nav__enlace {
  --indicador-oculto: scaleX(0);
  position: relative;
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radio-sm);
  font-size: var(--text-md);
  text-decoration: none;
  color: var(--c-texto-inverso-claro);
  transition:
    background-color var(--dur-media) var(--ease-cambio),
    color var(--dur-media) var(--ease-cambio);
}
/* Hover: fondo tenue + subrayado que crece desde el centro.
   Activa: fondo más marcado y subrayado fijo en agua (sin negrita: cambiaría el
   ancho del enlace y movería el menú al cambiar de página),
   para que "dónde estoy" nunca se confunda con "dónde apunto". */
.nav__enlace:hover { background: var(--superficie-inversa); color: var(--c-blanco); }
.nav__enlace[aria-current="page"] { background: var(--superficie-inversa-activa); color: var(--c-blanco); }
.nav__enlace:active { transform: scale(var(--escala-pulsado)); }
/* Indicador de página activa: barra que crece con transform al cargar la página.
   Al pasar el ratón por otro enlace aparece desde el centro a media opacidad. */
.nav__enlace::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: 0;
  height: var(--borde-medio);
  border-radius: var(--radio-pill);
  background: var(--c-agua);
  transform: var(--indicador-oculto);
  transition: transform var(--dur-media) var(--ease-cambio), opacity var(--dur-media) var(--ease-cambio);
}
.nav__enlace:hover::after { transform: none; opacity: .6; }
.nav__enlace[aria-current="page"]::after {
  transform: none;
  opacity: 1;
  animation: indicador-entrar var(--dur-lenta) var(--ease-entrada) both;
}
@keyframes indicador-entrar { from { transform: var(--indicador-oculto); } }

/* Botón hamburguesa: tres líneas que se transforman en X según aria-expanded */
.boton-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tactil); height: var(--tactil);
  padding: 0;
  border: 0;
  border-radius: var(--radio-sm);
  background: none;
  color: var(--c-blanco);
  cursor: pointer;
}
.boton-menu:hover { background: var(--superficie-inversa-hover); }
.boton-menu__icono { position: relative; width: var(--icono-md); height: var(--icono-md); }
.boton-menu__linea {
  position: absolute;
  left: var(--space-1); right: var(--space-1);
  top: calc(50% - var(--borde-medio) / 2);
  height: var(--borde-medio);
  border-radius: var(--radio-pill);
  background: currentColor;
  transition: transform var(--dur-media) var(--ease-cambio), opacity var(--dur-rapida) var(--ease-cambio);
}
.boton-menu__linea:nth-child(1) { transform: translateY(calc(var(--space-2) * -1)); }
.boton-menu__linea:nth-child(3) { transform: translateY(var(--space-2)); }
.boton-menu[aria-expanded="true"] .boton-menu__linea:nth-child(1) { transform: rotate(45deg); }
.boton-menu[aria-expanded="true"] .boton-menu__linea:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded="true"] .boton-menu__linea:nth-child(3) { transform: rotate(-45deg); }

@media (max-width: 1200px) {
  /* Sin JS, sin-js.css (cargado con <noscript>) despliega el menú en línea. */
  .boton-menu { display: inline-flex; }
  /* Panel desplegable: entra y sale con opacity + transform; visibility lo saca
     del orden de tabulación cuando está cerrado. */
  .nav {
    position: fixed;
    inset: calc(var(--header-h) + var(--safe-top)) 0 auto 0;
    max-height: calc(var(--alto-viewport) - var(--header-h) - var(--safe-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-abismo);
    box-shadow: var(--sombra-encabezado);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--space-3) * -1));
    transition:
      opacity var(--dur-media) var(--ease-salida),
      transform var(--dur-media) var(--ease-salida),
      visibility var(--dur-casi-cero) linear var(--dur-media);
  }
  .nav.is-abierto {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* visibility cambia al instante (sin transición) para que los enlaces
       sean enfocables en cuanto se abre: menu.js mueve el foco al primero */
    transition:
      opacity var(--dur-media) var(--ease-entrada),
      transform var(--dur-media) var(--ease-entrada);
  }
  .nav__lista { flex-direction: column; padding: var(--space-2) var(--pad-x) var(--space-5); }
  .nav__enlace {
    --indicador-oculto: scaleY(0);
    padding: var(--space-4) var(--space-2);
    font-size: var(--text-base);
    border-radius: 0;
    border-bottom: var(--hairline) solid var(--divisor-inverso);
  }
  .nav__enlace::after { left: 0; right: auto; top: var(--space-3); bottom: var(--space-3); width: var(--borde-grueso); height: auto; }
  .nav__enlace[aria-current="page"] { padding-left: var(--space-4); }
}
@media (max-width: 640px) { .marca__desc { display: none; } }

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--pad-seccion); }
.seccion--bruma { background: var(--c-bruma); }
.seccion--oscura { background: var(--c-abismo); color: var(--c-texto-inverso); }
.seccion--oscura :is(h1, h2, h3, h4) { color: var(--c-blanco); }
/* Sección que continúa visualmente la cabecera de página (sin espacio superior extra) */
.seccion--pegada { padding-top: var(--space-4); }

.seccion__cabecera { margin-bottom: var(--espacio-cabecera); }
.seccion__antetitulo { display: block; margin-bottom: var(--space-2); font-weight: 600; color: var(--c-laguna); }
.seccion--oscura .seccion__antetitulo { color: var(--c-agua); }
.seccion__intro { font-size: var(--text-lead); color: var(--c-texto-suave); }
.seccion--oscura .seccion__intro { color: var(--c-texto-inverso-suave); }
.seccion__pie { margin-top: var(--space-6); }

/* ---------- Cabecera de páginas internas ---------- */
.cabecera-pagina {
  position: relative;
  padding-block: var(--pad-cabecera-arriba) var(--pad-cabecera-abajo);
  background: var(--c-abismo);
  color: var(--c-texto-inverso);
  overflow: hidden;
}
.cabecera-pagina h1 { color: var(--c-blanco); max-width: var(--medida-titulo); }
.cabecera-pagina p { color: var(--c-texto-inverso-suave); font-size: var(--text-lead); margin: 0; }
/* La ola de transición (componente .ola) toma el color de la sección siguiente */
.cabecera-pagina--bruma .ola { color: var(--c-bruma); }

.migas { margin-bottom: var(--space-4); font-size: var(--text-sm); }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.migas li + li::before { content: "/"; margin-right: var(--space-2); opacity: .5; }
.migas a { color: var(--c-texto-inverso-suave); text-decoration: none; }
.migas a:hover { color: var(--c-blanco); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--c-agua); }
@media (max-width: 640px) {
  .migas ol { align-items: center; }
  .migas a { display: inline-flex; align-items: center; min-height: var(--tactil); }
}

/* ---------- Pie de página ---------- */
.pie { background: var(--c-abismo-900); color: var(--c-texto-inverso-tenue); font-size: var(--text-sm); }
.pie__principal {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-7) var(--space-6);
}
.pie__marca p { margin-top: var(--space-4); }
.pie__marca .marca__nombre { color: var(--c-blanco); }
.pie__titulo { font-family: var(--f-display); color: var(--c-blanco); font-size: var(--text-base); margin-bottom: var(--space-3); }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--c-blanco); text-decoration: underline; }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  /* Abajo deja sitio a los botones flotantes (WhatsApp + volver arriba) para que no tapen el pie */
  padding-block: var(--space-4) calc(var(--space-4) + var(--reserva-flotantes) + var(--safe-bottom));
  border-top: var(--hairline) solid var(--divisor-inverso);
}
.pie__legal p { margin: 0; }
/* Aviso legal, privacidad, cookies y créditos */
.pie__legales { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (max-width: 900px) {
  .pie__principal { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pie__principal { grid-template-columns: 1fr; }
  /* Áreas táctiles de 44px: el enlace crece y la lista compensa quitando el gap */
  .pie__lista { gap: 0; }
  .pie__legales { row-gap: 0; }
  .pie__lista a, .pie__legal a { display: inline-flex; align-items: center; min-height: var(--tactil); }
}