/* ═══ Pantalla de apertura / mantenimiento (R-46, D-16) ════════════════
   La monta js/apertura.js (estado desde /api/site/apertura.php, editable en
   ControlPanel → Apertura). Se carga en TODAS las páginas, después de
   base.css. La franja de las páginas de rescate es un aviso de notices.css.

   Cuenta regresiva gigante de la maqueta aprobada (maquetas/r30/d-mix/,
   inicio): el componente .countdown de base.css §9, en naranja porque es
   "lo que esperás". Mobile-first: lo de afuera de los @media es el celular.

   <div class="apertura-gate" role="dialog" aria-modal="true" …>
     <div class="container apertura-gate__content">
       eyebrow · lead (.countdown__label) · .countdown · ready · h1 (marca) ·
       target · actions · note · social
     </div>
   </div> */

/* ══ 1. El sitio de atrás no existe mientras está la pantalla ═══════════
   apertura.js pone data-apertura-locked en <html>. Con display: none el
   sitio no se ve, no se tabula y no lo lee un lector de pantalla: por eso
   el aria-modal de la pantalla es verdad. Las franjas de aviso también se
   van (antes las tapaba la pantalla); los <dialog> del ControlPanel (aviso
   "overlay") van a la capa superior y quedan arriba, como corresponde.
   Los personajes a los costados y las brasas (base.css) van fuera de
   .page-wrapper: se esconden aparte para que la pantalla se vea igual en
   cualquier URL (el inicio no los tiene). Sin tamaño, embers.js frena. */
[data-apertura-locked] .page-wrapper,
[data-apertura-locked] .site-notice,
[data-apertura-locked] .side-art,
[data-apertura-locked] .embers { display: none; }
/* Sin barra inferior no hace falta su lugar al final de la página */
[data-apertura-locked] body { padding-bottom: 0; }

/* ══ 2. Pantalla ════════════════════════════════════════════════════════ */
.apertura-gate {
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: var(--space-2xl);
  color: var(--color-text);
}
/* Contenedor sin interacción propia: recibe el foco solo para que el
   teclado y el lector arranquen acá (apertura.js), no es un control. Los
   links de adentro tienen su anillo de foco de siempre. */
.apertura-gate:focus { outline: 0; }

.apertura-gate__content { max-width: var(--page-narrow-width); }

.apertura-gate__eyebrow {
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

/* "El servidor abre en" / "Próximamente": sin cuenta regresiva es el
   mensaje principal y crece */
.apertura-gate__lead--soon {
  color: var(--color-attention);
  font-family: var(--font-display);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

/* Cada unidad (número + letra) es un bloque: si no entra, baja entera */
.apertura-gate__countdown-part {
  display: inline-flex;
  align-items: baseline;
}

.apertura-gate__ready {
  color: var(--color-success);
  font-family: var(--font-display);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

/* La marca, en dorado como en la maqueta */
.apertura-gate__title {
  margin-top: var(--space-lg);
  color: var(--color-valuable);
  font-family: var(--font-display);
  font-size: var(--font-size-heading-xl);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-none);
  overflow-wrap: anywhere;
}

/* Hora del objetivo traducida a la zona del visitante */
.apertura-gate__target {
  display: grid;
  margin-top: var(--space-xs);
  color: var(--color-text);
}
/* "viernes, 4 de septiembre" → solo la primera letra en mayúscula
   (text-transform: capitalize dejaba "Viernes, 4 De Septiembre") */
.apertura-gate__target-date::first-letter { text-transform: uppercase; }
.apertura-gate__target-date { display: block; }
.apertura-gate__target-zone {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Uno o dos botones: en el celular reparten el ancho (con uno solo, entero).
   Padding más corto que el del botón común para que "Descargar el juego"
   entre en media pantalla de 390 px, como en la maqueta. */
.apertura-gate__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}
.apertura-gate__actions .button {
  padding-inline: var(--space-xs);
  white-space: normal;
}

.apertura-gate__note {
  margin-top: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}

.apertura-gate__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.apertura-gate__social .text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
}

@media (min-width: 700px) {
  .apertura-gate__actions {
    display: flex;
    flex-wrap: wrap;
  }
  .apertura-gate__actions .button { padding-inline: var(--space-lg); }
}