/* ===== ATLAS · Menú móvil full-screen =====
   En móvil ocultamos la lista nativa de HFE: quedaba aplastada dentro del header
   y su contenido se derramaba, ensanchando toda la página (scroll horizontal).
   La hamburguesa de HFE se conserva y actúa como disparador de este overlay. */
@media (max-width: 767px) {
  #atlas-header .hfe-nav-menu__layout-horizontal { display: none !important; }
}

.atlas-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 25, .85);
  /* Desenfoque del fondo: mantiene el 85% pero deja el contenido de detrás
     ilegible, para que el menú se lea limpio. */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.atlas-menu.is-open { opacity: 1; visibility: visible; }

body.atlas-menu-open { overflow: hidden; }

/* Con el menú abierto ocultamos el header (logo, botón y hamburguesa):
   el overlay ya trae su propio logo y su botón de cerrar. */
body.atlas-menu-open #masthead {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Cerrar */
.atlas-menu__close {
  position: absolute;
  top: 18px; right: 16px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, .8) !important;
  transition: color .25s ease;
}
.atlas-menu__close:hover { color: #fff !important; }

/* Logo centrado */
.atlas-menu__logo { margin: 0 0 46px; line-height: 0; }
.atlas-menu__logo img { display: block; width: 180px; height: auto; }

/* Enlaces centrados debajo */
.atlas-menu__list { list-style: none; margin: 0; padding: 0; text-align: center; width: 100%; }
.atlas-menu__list li { margin: 0 0 28px; }
.atlas-menu__list li:last-child { margin-bottom: 0; }
.atlas-menu__list a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.5px;
  transition: color .25s ease;
}
.atlas-menu__list a:hover,
.atlas-menu__list a.is-current { color: #669BC9; }

/* Entrada escalonada y elegante */
.atlas-menu__logo,
.atlas-menu__list li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.atlas-menu.is-open .atlas-menu__logo,
.atlas-menu.is-open .atlas-menu__list li { opacity: 1; transform: none; }
.atlas-menu.is-open .atlas-menu__logo             { transition-delay: .06s; }
.atlas-menu.is-open .atlas-menu__list li:nth-child(1) { transition-delay: .13s; }
.atlas-menu.is-open .atlas-menu__list li:nth-child(2) { transition-delay: .19s; }
.atlas-menu.is-open .atlas-menu__list li:nth-child(3) { transition-delay: .25s; }
.atlas-menu.is-open .atlas-menu__list li:nth-child(4) { transition-delay: .31s; }
.atlas-menu.is-open .atlas-menu__list li:nth-child(5) { transition-delay: .37s; }
.atlas-menu.is-open .atlas-menu__list li:nth-child(6) { transition-delay: .43s; }

/* Pantallas muy bajas: compactar */
@media (max-height: 620px) {
  .atlas-menu__logo { margin-bottom: 30px; }
  .atlas-menu__logo img { width: 150px; }
  .atlas-menu__list li { margin-bottom: 20px; }
  .atlas-menu__list a { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-menu, .atlas-menu__logo, .atlas-menu__list li { transition-duration: .01s !important; }
  .atlas-menu__logo, .atlas-menu__list li { transform: none; }
}
