@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@200;300;400;500;600;700&display=swap');

/* ============================================================
   Header MIL976 — logo centrado + hamburguesa líquida + overlay
   Extraído del tema WordPress MIL976 (solo la parte del menú).
   ============================================================ */

/* Tokens de la línea gráfica Mil 976 */
:root {
  --mil976-bg-start: #a8edf2;
  --mil976-bg-end: #57c8d9;
  --mil976-title: #0b3842;
  --mil976-text: #174d59;
  --mil976-accent: #227686;
  --mil976-accent-strong: #0d4a55;

  --mil976-radius: 28px;
  --mil976-radius-sm: 14px;
  --mil976-header-h: 76px;
  /* Tipografía del aplicativo: Antonio (Bold en títulos, Light en textos). */
  --mil976-font: "Antonio", "Arial Narrow", Arial, sans-serif;
  --mil976-weight-title: 700;
  --mil976-weight-body: 300;

  --mil976-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Bloquea el scroll del fondo mientras el menú está abierto */
body.mil976-nav-open {
  overflow: hidden;
}

/* Enlace de accesibilidad "saltar al contenido" */
.mil976-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: var(--mil976-radius-sm);
  background: #fff;
  color: var(--mil976-accent-strong);
  font-weight: 800;
  font-family: var(--mil976-font);
}

.mil976-skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ============================================================
   Header + marca
   ============================================================ */
/* Cabecera fija y transparente: solo el logo y el botón, flotando encima de todo */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  pointer-events: none;
  font-family: var(--mil976-font);
}

/* Al hacer scroll aparece una barra de vidrio y el logo se encoge, para que
   el contenido pase por debajo de una superficie definida (el logo deja de
   quedar "encima" de los elementos). */
.site-header__inner,
.site-brand__logo img {
  transition:
    min-height .38s var(--mil976-ease),
    height .38s var(--mil976-ease),
    background .38s var(--mil976-ease),
    box-shadow .38s var(--mil976-ease),
    border-color .38s var(--mil976-ease);
}

.site-header.is-scrolled .site-header__inner {
  min-height: 60px;
  background: rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(6, 68, 82, .14) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .5) !important;
}

.site-header.is-scrolled .site-brand__logo img {
  height: 58px;
}

/* Solo el logo y el botón son clicables; el resto de la barra deja pasar el cursor */
.site-header .site-brand,
.site-header .nav-toggle {
  pointer-events: auto;
}

/* Cero fondos en toda la cabecera: solo el logo y el botón, sin ninguna barra. */
.site-header,
.site-header__inner,
.site-header__slot,
.site-brand,
.site-brand__link,
.site-brand__logo,
.nav-toggle {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: var(--mil976-header-h);
  width: 100%;
  padding: 12px clamp(16px, 4vw, 34px);
  /* Respeta muescas / bordes seguros en móviles. */
  padding-right: max(clamp(16px, 4vw, 34px), env(safe-area-inset-right));
  padding-left: max(clamp(16px, 4vw, 34px), env(safe-area-inset-left));
}

.site-header__slot {
  display: flex;
  align-items: center;
}

.site-header__slot--end {
  justify-content: flex-end;
}

.site-header__slot--center {
  justify-content: center;
  text-align: center;
}

.site-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* Baja un poco el logo para que no quede pegado al borde superior. */
  margin-top: 16px;
  color: var(--mil976-title);
  font-weight: 900;
  letter-spacing: .04em;
}

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

.site-brand__logo img {
  height: 120px;
  width: auto;
  max-width: 70vw;
  object-fit: contain;
}

.site-brand__name {
  font-size: 22px;
  line-height: 1;
}

.site-brand__tagline {
  display: block;
  margin-top: 2px;
  color: var(--mil976-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ============================================================
   Hamburguesa minimalista: botón de vidrio + morfeo a X
   ============================================================ */
.nav-toggle {
  --toggle-ease: cubic-bezier(.65, -.15, .3, 1.35);
  position: relative;
  z-index: 220;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Disco de vidrio (glassmorphism): misma "gota" que las redes sociales. */
.nav-toggle__box {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  /* Vidrio abombado tipo gota: luz arriba-izq, sombra sutil abajo. */
  background: radial-gradient(
    120% 120% at 30% 22%,
    rgba(255, 255, 255, .6),
    rgba(255, 255, 255, .16) 46%,
    rgba(255, 255, 255, .06) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -6px 12px rgba(16, 80, 94, .1),
    0 8px 20px rgba(16, 80, 94, .16);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--toggle-ease), background .3s ease, box-shadow .3s ease;
}

/* Reflejo especular: el mismo brillo de gota de las redes. */
.nav-toggle__box::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8px;
  left: 10px;
  width: 20px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  transform: rotate(-18deg);
  pointer-events: none;
}

.nav-toggle:hover .nav-toggle__box,
.nav-toggle:focus-visible .nav-toggle__box {
  transform: scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -6px 12px rgba(16, 80, 94, .12),
    0 14px 28px rgba(16, 80, 94, .24);
}

body.mil976-nav-open .nav-toggle__box {
  background: rgba(255, 255, 255, .5);
}

/* Dos líneas nítidas y perfectamente centradas (minimalista y organizado). */
.nav-toggle__bar {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2.5px;
  border-radius: 999px;
  /* Mismo teal oscuro que los íconos de las redes. */
  background: var(--mil976-accent-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .45s var(--toggle-ease), opacity .25s ease;
}

.nav-toggle__bar--1 { transform: translate(-50%, -50%) translateY(-5px); }
.nav-toggle__bar--2 { transform: translate(-50%, -50%) translateY(5px); }

/* Al abrir: las dos líneas se juntan en el centro y giran formando la X. */
body.mil976-nav-open .nav-toggle__bar--1 {
  transform: translate(-50%, -50%) rotate(45deg);
}

body.mil976-nav-open .nav-toggle__bar--2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ============================================================
   Overlay de navegación
   ============================================================ */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(80px, 10vh, 120px) clamp(24px, 5vw, 48px);
  overflow: hidden;
  perspective: 1400px;
  font-family: var(--mil976-font);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .38), transparent 55%),
    linear-gradient(180deg, rgba(168, 237, 242, .30), rgba(87, 200, 217, .42));
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Revelado suave: escala + desvanecido (fluido y sin depender de la posición
     exacta del botón). */
  transform: scale(1.04);
  transition:
    opacity .45s var(--mil976-ease),
    transform .55s var(--mil976-ease),
    visibility 0s linear .55s;
}

body.mil976-nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition:
    opacity .4s ease,
    transform .55s var(--mil976-ease),
    visibility 0s;
}

/* Resplandor suave que respira detrás del menú */
.nav-overlay::before {
  content: "";
  position: absolute;
  width: 82vmax;
  height: 82vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .4), transparent 62%);
  opacity: 0;
  pointer-events: none;
}

body.mil976-nav-open .nav-overlay::before {
  animation: mil976GlowBreathe 9s ease-in-out infinite;
}

/* Panel del menú: tagline arriba + dos columnas (menú | dónde comprar) */
.nav-overlay__panel {
  position: relative;
  z-index: 2;
  width: min(1080px, 100%);
  max-height: 100%;
  /* Padding para que las sombras de los logos no se recorten con el overflow. */
  padding: 8px 10px 34px;
  overflow: auto;
  text-align: center;
}

/* Contenedor de las dos columnas, alineadas a la misma altura. */
.nav-overlay__cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}

/* Divisor sutil, centrado exactamente entre las dos columnas. */
.nav-overlay__cols::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(255, 255, 255, .45);
  pointer-events: none;
}

/* Entrada escalonada de cada columna. */
.nav-overlay__col {
  opacity: 0;
  transform: translateY(26px);
  transition: transform .65s var(--mil976-ease), opacity .5s ease;
}

body.mil976-nav-open .nav-overlay__col {
  opacity: 1;
  transform: none;
}

body.mil976-nav-open .nav-overlay__col--menu { transition-delay: .12s; }
body.mil976-nav-open .nav-overlay__col--shop { transition-delay: .22s; }

/* --- Menú: bloque centrado, ítems alineados a la izquierda entre sí --- */
.nav-menu {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.nav-menu li {
  margin: clamp(10px, 1.8vw, 22px) 0;
}

.nav-menu li:first-child { margin-top: 0; }
.nav-menu li:last-child { margin-bottom: 0; }

.nav-menu a {
  display: inline-block;
  padding: 4px 2px;
  color: var(--mil976-title);
  font-size: clamp(28px, 4.4vw, 54px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  transition: color .3s ease, text-shadow .3s ease;
}

/* Hover: el texto pasa a blanco con un leve resplandor, sin cajas ni líneas. */
.nav-menu a:hover,
.nav-menu a:focus-visible,
.nav-menu .is-current > a {
  color: #fff;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .4),
    0 2px 16px rgba(9, 74, 88, .28);
}

/* --- Dónde comprar (columna derecha) --- */
.nav-overlay__shop-title {
  margin: 0 0 clamp(24px, 3vw, 38px);
  color: var(--mil976-accent);
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Logos redondos en dos columnas (desktop) */
.nav-overlay__stores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
  justify-items: center;
  max-width: 300px;
  margin-inline: auto;
}

.store-chip {
  display: grid;
  place-items: center;
  width: clamp(88px, 12vw, 116px);
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 10px 24px rgba(16, 80, 94, .16);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  text-decoration: none;
  transition: transform .25s var(--mil976-ease), box-shadow .25s ease;
}

.store-chip:hover,
.store-chip:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 16px 32px rgba(16, 80, 94, .24);
}

.store-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Redes dentro del menú (se muestran solo en móvil). */
.nav-overlay__social {
  display: none;
  margin: 30px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .4);
}

.nav-overlay__social-title {
  margin: 0 0 16px;
  color: var(--mil976-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.nav-overlay__social .header-social {
  justify-content: center;
  gap: 14px;
}

/* En una sola columna (móvil): las columnas se apilan y el divisor pasa arriba.
   Todo el menú escala con la ALTURA disponible (vh/dvh) para que quepa completo
   en cualquier dispositivo, sin scroll. */
@media (max-width: 720px) {
  .nav-overlay {
    /* Altura real del viewport (descuenta la barra del navegador móvil). */
    height: 100vh;
    height: 100dvh;
    /* Reserva arriba el alto real del logo del header y deja el resto abajo;
       con place-items:center el menú queda centrado en ESE espacio libre
       (entre el logo y el borde inferior), no respecto a toda la pantalla. */
    padding: calc(env(safe-area-inset-top) + 104px) 20px
             calc(env(safe-area-inset-bottom) + 16px);
    place-items: center;
    /* Nada de scroll: el contenido se dimensiona para caber. */
    overflow: hidden;
  }

  .nav-overlay__panel {
    max-height: 100%;
    overflow: visible;
    padding: 0;
  }

  .nav-overlay__cols {
    grid-template-columns: 1fr;
    gap: clamp(10px, 1.8vh, 20px);
  }

  /* La línea central solo tiene sentido con dos columnas: se oculta. */
  .nav-overlay__cols::before {
    display: none;
  }

  .nav-overlay__col--shop {
    padding-top: clamp(10px, 1.8vh, 18px);
    border-top: 1px solid rgba(255, 255, 255, .4);
  }

  /* Menú centrado y compacto; fuente y espaciado ligados a la altura. */
  .nav-menu { display: block; text-align: center; }
  .nav-menu li { margin: clamp(3px, 1vh, 12px) 0; }
  .nav-menu a {
    font-size: clamp(17px, 3.2vh, 30px);
    line-height: 1.05;
    letter-spacing: -.01em;
  }

  /* Las redes salen del header (donde se amontonan) y entran al menú. */
  .site-header .header-social { display: none; }
  .nav-overlay__social {
    display: block;
    margin-top: clamp(10px, 1.8vh, 20px);
    padding-top: clamp(8px, 1.6vh, 16px);
  }
  .nav-overlay__social-title { margin-bottom: clamp(6px, 1.2vh, 14px); }

  /* "Dónde comprar" en 3 columnas (2 filas); logos ligados a la altura. */
  .nav-overlay__shop-title {
    margin-bottom: clamp(8px, 1.4vh, 16px);
    font-size: clamp(12px, 1.6vh, 16px);
  }
  .nav-overlay__stores {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.5vh, 16px);
    max-width: 300px;
  }
  .store-chip { width: clamp(46px, 8vh, 78px); }
}

/* ============================================================
   Footer fijo — copyright glass
   ============================================================ */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 140;
  display: flex;
  justify-content: center;
  padding: 16px 20px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
  font-family: var(--mil976-font);
}

.site-footer__copy {
  margin: 0;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 10px 24px rgba(16, 80, 94, .16);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
  color: var(--mil976-accent-strong);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  pointer-events: auto;
}

/* ============================================================
   Botón "Volver atrás" — liquid glass con destello de borde
   Comparte el lenguaje de vidrio del copyright. El destello sigue
   al cursor: se ilumina el borde más cercano al puntero (--bx/--by).
   ============================================================ */
.nav-back {
  --bx: 50%;
  --by: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 10px 24px rgba(16, 80, 94, .16);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
  color: var(--mil976-accent-strong);
  font-family: var(--mil976-font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  pointer-events: auto;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .4s var(--mil976-ease),
    background .4s var(--mil976-ease),
    box-shadow .4s var(--mil976-ease);
}

.nav-back__icon {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform .4s var(--mil976-ease);
}

.nav-back__label { line-height: 1; }

/* Destello de borde: anillo (solo el borde) iluminado por un
   degradado radial anclado al puntero. Como el radial está enmascarado
   al borde, el brillo aparece en el tramo del borde más cercano al cursor. */
.nav-back::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.4px;
  background: radial-gradient(
    72px 72px at var(--bx) var(--by),
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, .55) 32%,
    rgba(255, 255, 255, 0) 66%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--mil976-ease);
  pointer-events: none;
}

.nav-back:hover,
.nav-back:focus-visible {
  transform: translateX(-3px);
  background: rgba(255, 255, 255, .38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 14px 30px rgba(16, 80, 94, .22);
}

.nav-back:hover .nav-back__icon,
.nav-back:focus-visible .nav-back__icon {
  transform: translateX(-2px);
}

.nav-back:hover::before,
.nav-back:focus-visible::before {
  opacity: 1;
}

.nav-back:active {
  transform: translateX(-3px) scale(.97);
}

/* Convivencia a la izquierda: Volver + redes con separación. */
.site-header__slot--start { gap: 10px; }

/* ============================================================
   Redes sociales — gotas de vidrio liquid glass
   ============================================================ */
.header-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.social-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  /* Vidrio abombado tipo gota: luz arriba-izq, sombra sutil abajo. */
  background: radial-gradient(
    120% 120% at 30% 22%,
    rgba(255, 255, 255, .6),
    rgba(255, 255, 255, .16) 46%,
    rgba(255, 255, 255, .06) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -6px 12px rgba(16, 80, 94, .1),
    0 8px 20px rgba(16, 80, 94, .16);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
  color: var(--mil976-accent-strong);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .4s var(--mil976-ease),
    box-shadow .4s var(--mil976-ease),
    color .35s var(--mil976-ease);
}

.social-dot svg {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  transition: transform .4s var(--mil976-ease);
}

/* Reflejo especular: el brillo de gota. */
.social-dot::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 6px;
  left: 8px;
  width: 16px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  transform: rotate(-18deg);
  pointer-events: none;
}

.social-dot:hover,
.social-dot:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -6px 12px rgba(16, 80, 94, .12),
    0 14px 26px rgba(16, 80, 94, .24);
}

.social-dot:hover svg,
.social-dot:focus-visible svg { transform: scale(1.08); }

/* Toque de color de marca al pasar el cursor. */
.social-dot--ig:hover, .social-dot--ig:focus-visible { color: #E1306C; }
.social-dot--yt:hover, .social-dot--yt:focus-visible { color: #FF0000; }
.social-dot--sp:hover, .social-dot--sp:focus-visible { color: #1DB954; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
  .site-header__inner {
    min-height: 64px;
    padding: 8px 14px;
  }

  .site-brand { margin-top: 10px; }
  .site-brand__logo img { height: 84px; }
  .nav-toggle { width: 46px; height: 46px; }
  .nav-toggle__box { width: 46px; height: 46px; }
  .site-footer__copy { font-size: 12px; padding: 8px 16px; }

  /* Disco circular que combina con la hamburguesa (46px). */
  .nav-back {
    gap: 0;
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }
  .nav-back__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .nav-back__icon { width: 19px; height: 19px; }

  /* Gotas más compactas para que quepan junto al logo. */
  .site-header__slot--start { gap: 7px; }
  .header-social { gap: 7px; }
  .social-dot { width: 36px; height: 36px; }
  .social-dot svg { width: 16px; height: 16px; }
  .social-dot::before { top: 5px; left: 7px; width: 13px; height: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-back,
  .nav-back__icon,
  .nav-back::before,
  .social-dot,
  .social-dot svg {
    transition-duration: .01ms !important;
  }
  .nav-back:hover,
  .nav-back:focus-visible,
  .social-dot:hover,
  .social-dot:focus-visible { transform: none; }
}

/* ============================================================
   Animaciones del menú
   ============================================================ */
@keyframes mil976GlowBreathe {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50%      { opacity: .9; transform: scale(1.08); }
}

/* ============================================================
   Movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  .nav-overlay__panel > *,
  .nav-toggle__bar,
  .store-chip {
    transition-duration: .01ms !important;
  }

  .nav-overlay::before {
    animation: none !important;
  }

  .nav-overlay__panel > * {
    transform: none !important;
  }
}

/* ============================================================
   Footer completo (todas las internas; el home usa el pill fijo)
   ============================================================ */
.site-footer-full {
  position: relative;
  margin-top: clamp(24px, 4vw, 56px);
  background: linear-gradient(180deg, #2a2b21 0%, #212219 100%);
  color: rgba(255, 255, 255, .78);
  font-family: var(--mil976-font);
  font-weight: var(--mil976-weight-body);
}

.footer-inner {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding: clamp(44px, 6vw, 76px) clamp(20px, 5vw, 48px) clamp(22px, 3vw, 32px);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.footer-logo {
  height: 62px;
  width: auto;
  display: block;
  margin-bottom: 16px;
  /* El logo es negro: lo pasamos a blanco para el footer oscuro. */
  filter: brightness(0) invert(1);
}

.footer-tagline {
  margin: 0 0 22px;
  max-width: 32ch;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  line-height: 1.55;
}

.footer-social { gap: 10px; }

/* Íconos blancos sobre vidrio translúcido para que se vean en el footer oscuro. */
.footer-social .social-dot {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.footer-social .social-dot::before { opacity: .4; }

.footer-social .social-dot:hover,
.footer-social .social-dot:focus-visible {
  background: rgba(255, 255, 255, .18);
}

.footer-col__title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-links a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  font-size: 15px;
  transition: color .25s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible { color: #fff; }

.footer-legal-notice {
  margin: clamp(34px, 5vw, 56px) 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
  color: rgba(255, 255, 255, .66);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .01em;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.footer-copy {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}

.footer-bottom__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.footer-bottom__links a {
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  font-size: 13px;
  transition: color .25s ease;
}

.footer-bottom__links a:hover,
.footer-bottom__links a:focus-visible { color: #fff; }

@media (max-width: 860px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
  }
  .footer-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}