/* ==========================================================
   MENÚ MÓVIL — GTA VI  (Astra · header con menú desplegable)
   Pantalla completa, fixed, estilo "menú de pausa" de videojuego.

   Pégalo en: Apariencia → Personalizar → CSS adicional.
   El CSS abre y cierra el panel por sí solo (lee el estado del botón
   de Astra con :has). El JS es una mejora: añade las descripciones, la
   tarjeta de cuenta regresiva y el origen exacto del revelado.
   ========================================================== */

:root {
  --gm-night-1: #0b0417;
  --gm-night-2: #1a0b30;
  --gm-surface: #150827;
  --gm-magenta: #ff2f9e;
  --gm-orange: #ff7a3d;
  --gm-violet: #7a3dff;
  --gm-text-hi: #f6efff;
  --gm-text-lo: #b8a7d9;
  --gm-line: rgba(246, 239, 255, 0.14);

  --gm-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --gm-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gm-ease: cubic-bezier(0.7, 0, 0.2, 1);
  --gm-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gm-shift: 26px; /* cuánto se desplaza el texto cuando aparece el cursor */
}

/* ----------------------------------------------------------
   0. Bloqueo del scroll del fondo mientras el menú está abierto
   ---------------------------------------------------------- */
html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]),
html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) body {
  overflow: hidden !important;
}

/* ----------------------------------------------------------
   1. Barra superior: logo + botón (hamburguesa / X)
   ---------------------------------------------------------- */
body.ast-header-break-point #ast-mobile-header .menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Con el menú abierto: la barra deja ver el fondo y queda por encima */
html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) #masthead {
  z-index: 100000 !important;
}

html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) #ast-mobile-header .ast-main-header-wrap {
  position: relative;
  z-index: 100002;
}

html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) #ast-mobile-header .ast-main-header-wrap,
html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) #ast-mobile-header .main-header-bar,
html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) #ast-mobile-header .ast-primary-header-bar {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* El botón X con halo neón */
html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) #ast-mobile-header .menu-toggle {
  color: var(--gm-text-hi) !important;
  background: rgba(255, 47, 158, 0.12) !important;
  border-color: rgba(255, 47, 158, 0.6) !important;
  box-shadow: 0 0 16px rgba(255, 47, 158, 0.4);
}

body.ast-header-break-point #ast-mobile-header .menu-toggle:focus-visible {
  outline: 2px solid var(--gm-magenta);
  outline-offset: 3px;
}

/* Si algún ancestro tiene transform/filter, el "fixed" se queda
   atrapado dentro del header. Lo anulamos mientras el menú está abierto. */
html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) #masthead,
html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) #ast-mobile-header,
html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) .ast-mobile-header-wrap {
  transform: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  contain: none !important;
  will-change: auto !important;
}

/* ----------------------------------------------------------
   2. El panel: fixed, pantalla completa, revelado circular
      que nace en el botón del menú.
   ---------------------------------------------------------- */
body.ast-header-break-point #ast-mobile-header .ast-mobile-header-content {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 100001 !important;

  display: flex !important;
  flex-direction: column;
  box-sizing: border-box !important; /* el relleno no debe sumarse al 100% */
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  /* --gm-top lo calcula el JS (debajo de la barra); 96px es el respaldo */
  padding: var(--gm-top, 96px) 28px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  background:
    repeating-linear-gradient(0deg, rgba(246, 239, 255, 0.02) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 85% 45% at 100% 0%, rgba(255, 47, 158, 0.30), transparent 62%),
    radial-gradient(ellipse 80% 40% at 0% 62%, rgba(122, 61, 255, 0.24), transparent 62%),
    radial-gradient(ellipse 100% 42% at 50% 105%, rgba(255, 122, 61, 0.30), transparent 66%),
    linear-gradient(180deg, var(--gm-night-2) 0%, var(--gm-night-1) 72%) !important;

  font-family: var(--gm-body);
  -webkit-font-smoothing: antialiased;

  /* cerrado */
  visibility: hidden;
  pointer-events: none;
  clip-path: circle(0px at var(--gm-x, calc(100% - 40px)) var(--gm-y, 40px));
  transition: clip-path 0.55s var(--gm-ease), visibility 0s linear 0.55s;
}

html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) body.ast-header-break-point #ast-mobile-header .ast-mobile-header-content {
  visibility: visible;
  pointer-events: auto;
  clip-path: circle(160vmax at var(--gm-x, calc(100% - 40px)) var(--gm-y, 40px));
  transition: clip-path 0.8s var(--gm-ease), visibility 0s;
}

/* Con el JS activo, el panel no se desplaza: lo hace un área interna que
   empieza justo debajo de la barra, para que el contenido nunca pase por
   detrás del logo ni del botón X. */
body.ast-header-break-point #ast-mobile-header .ast-mobile-header-content.gm-enhanced {
  overflow: hidden !important;
}

#ast-mobile-header .gm-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
}

/* Quita los fondos, bordes y rellenos que Astra pone en cada envoltorio */
body.ast-header-break-point #ast-mobile-header .ast-builder-menu-mobile,
body.ast-header-break-point #ast-mobile-header .ast-main-header-bar-alignment,
body.ast-header-break-point #ast-mobile-header .main-header-bar-navigation,
body.ast-header-break-point #ast-mobile-header .site-navigation,
body.ast-header-break-point #ast-mobile-header .main-navigation {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  float: none !important;
}

/* Astra anima la altura del menú con estilos en línea: la neutralizamos */
body.ast-header-break-point #ast-mobile-header .main-header-bar-navigation {
  display: block !important;
}

body.ast-header-break-point #ast-mobile-header .ast-builder-menu-mobile {
  flex: 0 0 auto;
}

/* ----------------------------------------------------------
   3. Lista de enlaces
   ---------------------------------------------------------- */
body.ast-header-break-point #ast-mobile-header .main-header-menu {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none;
}

body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gm-line) !important;
  background: transparent !important;

  /* cerrado: oculto y un poco abajo */
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* abierto: entran uno tras otro */
html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease calc(0.3s + var(--i, 0) * 0.06s),
    transform 0.65s var(--gm-ease-out) calc(0.3s + var(--i, 0) * 0.06s);
}

body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item:nth-child(1) { --i: 0; }
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item:nth-child(2) { --i: 1; }
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item:nth-child(3) { --i: 2; }
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item:nth-child(4) { --i: 3; }
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item:nth-child(5) { --i: 4; }
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item:nth-child(6) { --i: 5; }
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item:nth-child(7) { --i: 6; }
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item:nth-child(8) { --i: 7; }

body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link {
  position: relative;
  display: block !important;
  width: auto !important;
  padding: 11px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  font-family: var(--gm-display) !important;
  font-weight: 800;
  font-synthesis: none; /* Anton solo tiene un peso: que no lo "engorde" el navegador */
  font-size: 36px !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em;
  color: var(--gm-text-hi) !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Texto (lo crea el JS) */
#ast-mobile-header .gm-label {
  position: relative;
  display: inline-block;
  padding: 0.08em 0 0.04em;
  line-height: 1;
  transition: transform 0.3s var(--gm-ease-out);
}

#ast-mobile-header .gm-desc {
  display: block;
  margin-top: 2px;
  font-family: var(--gm-body);
  font-weight: 500;
  font-synthesis: none;
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--gm-text-lo);
  transition: transform 0.3s var(--gm-ease-out);
}

/* El cursor de selección (triángulo neón) */
#ast-mobile-header .gm-label::before {
  content: "";
  position: absolute;
  left: calc(var(--gm-shift) * -1);
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -0.17em;
  border-style: solid;
  border-width: 0.17em 0 0.17em 0.28em;
  border-color: transparent transparent transparent var(--gm-magenta);
  filter: drop-shadow(0 0 6px rgba(255, 47, 158, 0.9));
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Estado seleccionado: página actual, tocado o enfocado con teclado */
body.ast-header-break-point #ast-mobile-header .main-header-menu > .current-menu-item > .menu-link .gm-label,
body.ast-header-break-point #ast-mobile-header .main-header-menu > .current_page_item > .menu-link .gm-label,
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link:active .gm-label,
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link:focus-visible .gm-label {
  transform: translateX(var(--gm-shift));
  background: linear-gradient(100deg, var(--gm-magenta) 5%, var(--gm-orange) 60%, var(--gm-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 47, 158, 0.35));
}

body.ast-header-break-point #ast-mobile-header .main-header-menu > .current-menu-item > .menu-link .gm-label::before,
body.ast-header-break-point #ast-mobile-header .main-header-menu > .current_page_item > .menu-link .gm-label::before,
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link:active .gm-label::before,
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link:focus-visible .gm-label::before {
  opacity: 1;
}

body.ast-header-break-point #ast-mobile-header .main-header-menu > .current-menu-item > .menu-link .gm-desc,
body.ast-header-break-point #ast-mobile-header .main-header-menu > .current_page_item > .menu-link .gm-desc,
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link:active .gm-desc,
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link:focus-visible .gm-desc {
  transform: translateX(var(--gm-shift));
}

body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link:focus-visible {
  outline: none;
}

/* Solo en dispositivos con ratón: lo mismo al pasar el cursor */
@media (hover: hover) {
  body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link:hover .gm-label {
    transform: translateX(var(--gm-shift));
    background: linear-gradient(100deg, var(--gm-magenta) 5%, var(--gm-orange) 60%, var(--gm-violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 16px rgba(255, 47, 158, 0.35));
  }

  body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link:hover .gm-label::before {
    opacity: 1;
  }

  body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link:hover .gm-desc {
    transform: translateX(var(--gm-shift));
  }
}

/* ----------------------------------------------------------
   4. Pie del menú (lo crea el JS): cuenta regresiva + login
   ---------------------------------------------------------- */
#ast-mobile-header .gm-footer {
  display: grid;
  gap: 12px;
  margin-top: 25px;
  flex-shrink: 0;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

html:has(#ast-mobile-header .menu-toggle[aria-expanded="true"]) #ast-mobile-header .gm-footer {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease calc(0.3s + var(--i, 6) * 0.06s),
    transform 0.65s var(--gm-ease-out) calc(0.3s + var(--i, 6) * 0.06s);
}

#ast-mobile-header .gm-launch {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(21, 8, 39, 0.72);
  border: 1px solid rgba(255, 47, 158, 0.4);
  box-shadow: 0 0 30px rgba(255, 47, 158, 0.12);
}

#ast-mobile-header .gm-launch__num {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 52px;
}

#ast-mobile-header .gm-launch__num b {
  font-family: var(--gm-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 40px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, var(--gm-magenta), var(--gm-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

#ast-mobile-header .gm-launch__num span {
  margin-top: 5px;
  font-family: var(--gm-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--gm-text-lo);
}

#ast-mobile-header .gm-launch__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--gm-body);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--gm-text-lo);
}

#ast-mobile-header .gm-launch__text strong {
  font-weight: 700;
  font-size: 15px;
  color: var(--gm-text-hi);
}

#ast-mobile-header .gm-launch.is-live .gm-launch__num {
  display: none;
}

#ast-mobile-header .gm-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: 8px;
  font-family: var(--gm-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: var(--gm-text-hi);
  background: transparent;
  border: 1px solid rgba(246, 239, 255, 0.25);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

#ast-mobile-header .gm-login:active {
  border-color: var(--gm-magenta);
  background: rgba(255, 47, 158, 0.1);
}

#ast-mobile-header .gm-launch:focus-visible,
#ast-mobile-header .gm-login:focus-visible {
  outline: 2px solid var(--gm-magenta);
  outline-offset: 3px;
}

@media (hover: hover) {
  #ast-mobile-header .gm-login:hover {
    border-color: var(--gm-magenta);
    background: rgba(255, 47, 158, 0.1);
  }
}

/* ----------------------------------------------------------
   5. Pantallas bajitas (teléfonos pequeños o en horizontal)
   ---------------------------------------------------------- */
/* Un poco más compacto */
@media (max-height: 800px) {
  body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link {
    padding: 9px 0 !important;
    font-size: 36px !important;
  }

  #ast-mobile-header .gm-footer { margin-top: 25px; }
}

/* Muy bajitas: se oculta la línea descriptiva */
@media (max-height: 700px) {
  body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link {
    font-size: 36px !important;
  }

  #ast-mobile-header .gm-desc { display: none; }

  #ast-mobile-header .gm-footer { margin-top: 25px; }
}

/* ----------------------------------------------------------
   6. Movimiento reducido: sin animaciones
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.ast-header-break-point #ast-mobile-header .ast-mobile-header-content,
  body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item,
  #ast-mobile-header .gm-footer,
  #ast-mobile-header .gm-label,
  #ast-mobile-header .gm-desc {
    transition: none !important;
  }
}