/* ============================================================
   WRD — gate.css  ·  El portón y la cuenta de las 40 noches
   ============================================================
   Construido ENCIMA de css/tienda.css («Noche y Día»): tokens --t-*
   y primitivas. Nada de colores sueltos.

   El portón es la Noche entera: chocolate de borde a borde con sus
   chispitas, y una sola hoja de papel encima — tinta gruesa, sombra
   dura naranja, el kanji de la llave en una ficha mango. Cuando se
   cierran las 40 noches (lockout) la hoja pasa a crema y su sombra a
   rojo: la misma puerta, con el cartel de "cerrado".

   CUÁNDO aparece el portón lo decide js/gate-ui.js (vitrina abierta:
   se levanta al tocar "Pedir" o con WRDGate.pedirCuenta(); cerrada o
   fase privada: tapa desde el arranque). El copy no se toca.

   Qué vive acá:
     0. La barra superior (.top) y el pie (.pie) de las dos páginas
     1. El portón (#gate) — overlay fijo
     2. La hoja (.gate-card) y su kanji
     3. Título, subtítulo y formulario
     4. Alternar registro/login, "Seguir mirando" y "Sos #0187."
     5. Fase privada (.gate-lockout)
     6. La cuenta en fichas (#countdown)
   ============================================================ */


/* ============================================================
   0 · BARRA SUPERIOR  ·  .top (chocolate, pegada arriba)
   La comparten index y premium: por eso vive acá, junto a la cuenta.
   ============================================================ */

.tienda .top {
  min-height: 62px;
  padding-block: 7px;
  background: var(--t-noche);
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tienda .top-brand {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--t-font-chicle);
  font-size: 28px;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--t-blanco-choco);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 2px 2px 0 var(--t-naranja);
  text-decoration: none;
}

.tienda .top-brand:hover { color: var(--t-mango); }


/* Premium: "← Volver" y la pastilla PREMIUM pegada a la marca. */
.volver-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 14px;
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--t-choco);
  background: var(--t-papel);
  border: 2px solid var(--t-noche);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--t-naranja);
}

.volver-link:hover { color: var(--t-choco); background: var(--t-crema); }

.tienda .top-premium-tag {
  display: inline-block;
  margin-inline-start: 4px;
  padding: 2px 8px 3px;
  font-family: var(--t-font-chicle);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
  color: var(--t-choco);
  background: var(--t-mango);
  border: 2px solid var(--t-noche);
  border-radius: var(--t-r-1);
  transform: rotate(-4deg);
}


/* ============================================================
   0b · PIE  ·  la noche de vuelta, con el logo y los datos
   Lo comparten index y premium.
   ============================================================ */

.tienda .pie {
  margin-top: 64px;
  padding: 0 0 34px;
  text-align: center;
  color: var(--t-blanco-choco);
  background: var(--t-noche);
  border-top: 0;
}

.pie-envase {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 1076px;
  margin: 0 auto;
  padding: 30px 16px 0;
}

.pie-logo { width: 160px; height: auto; }

.tienda .pie p {
  margin: 0;
  font-size: 15px;
  color: var(--t-blanco-choco-2);
}

.tienda .pie strong {
  font-family: var(--t-font-chicle);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--t-blanco-choco);
}

.pie-datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.pie-datos .t-chip { border-color: var(--t-noche); font-size: 15px; }

.tienda .pie-sub { font-size: 14px; color: var(--t-blanco-choco-2); }


/* ============================================================
   1 · EL PORTÓN  ·  #gate
   overflow-y auto: con el teclado abierto la hoja puede pasarse del
   alto visible en celulares chicos.
   ============================================================ */

#gate.gate {
  position: fixed;
  inset: 0;
  z-index: calc(var(--wrd-z-intro) - 10);
  display: grid;
  place-items: center;
  padding: 28px 16px;
  overflow-y: auto;
  background:
    var(--t-chispitas) 0 0 / 160px 160px,
    radial-gradient(120% 70% at 50% 0%, var(--t-noche-2) 0%, rgb(58 36 24 / 0) 60%),
    var(--t-noche);
}


/* ============================================================
   2 · LA HOJA  ·  .gate-card
   ============================================================ */

.gate-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 44px 20px 18px;
  text-align: center;
  color: var(--t-choco);
  background: var(--t-papel);
  border: 3px solid var(--t-blanco-choco);
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--t-naranja);
  animation: wrd-gate-hoja 420ms var(--t-rebote) both;
}

@keyframes wrd-gate-hoja {
  from { opacity: 0; transform: translateY(24px) rotate(-2deg) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* El kanji de la puerta (鍵) en una ficha mango colgada del borde de
   arriba, torcida como un sello. */
.gate-kanji {
  position: absolute;
  top: -30px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  font-family: var(--wrd-font-kanji);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--t-noche);
  background: var(--t-mango);
  border: var(--t-borde);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--t-choco);
  transform: rotate(-6deg);
}

.gate-titulo {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: 25px;
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--t-choco);
  text-wrap: balance;
}

.gate-sub {
  margin-block-start: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--t-choco-2);
  text-wrap: balance;
}


/* ============================================================
   3 · EL FORMULARIO  ·  .gate-form / .gate-error
   Campos y botón ya vienen del puente de tienda.css (papel, tinta
   gruesa, 16px, 52px de alto). Acá, el ritmo dentro de la hoja.
   ============================================================ */

.gate-form {
  margin-block-start: 18px;
}

.gate-form label {
  margin-block: 14px 6px;
}

.gate-form label:first-of-type {
  margin-block-start: 0;
}

.gate-form .btn-enviar {
  min-height: 58px;
  margin-block-start: 20px;
  font-size: 21px;
}

.gate-error {
  margin-block-start: 8px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--t-rojo-boton);
  border: var(--t-borde-fino);
  border-radius: 12px;
  animation: wrd-gate-error-entra 260ms var(--t-rebote) both;
}

@keyframes wrd-gate-error-entra {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}


/* ============================================================
   4 · ALTERNAR Y REVELAR
   ============================================================ */

/* "Ya tengo cuenta" / "¿Alguien te trajo?": se lee como un link
   subrayado de tinta, pero tiene 48px de alto para el dedo. */
.gate-alterna {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-block-start: 8px;
  padding: 8px;
  font-family: var(--t-font-display);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: var(--t-choco);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--t-naranja);
  background: none;
  border: none;
  cursor: pointer;
}

.gate-alterna:hover { color: var(--t-naranja-texto); }

/* "Seguir mirando": la salida a la vitrina, un escalón más callada. */
.gate-volver {
  margin-block-start: 2px;
  font-size: 15px;
  color: var(--t-choco-3);
  text-decoration-color: var(--t-crema-2);
}

/* "Sos #0187.": el número del socio, estampado en grande. */
.gate-id-revelado {
  --giro: -4deg;
  display: inline-block;
  margin: 6px 0 0;
  padding: 10px 22px 12px;
  font-family: var(--t-font-display);
  font-size: 44px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--t-choco);
  background: var(--t-mango);
  border: var(--t-borde);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--t-naranja);
  transform: rotate(-4deg);
  animation: t-estampa 620ms var(--t-rebote) 120ms both;
}


/* ============================================================
   5 · FASE PRIVADA  ·  .gate-lockout
   ============================================================ */

.gate-card.gate-lockout {
  background: var(--t-crema);
  box-shadow: 7px 7px 0 var(--t-rojo);
}

.gate-card.gate-lockout .gate-kanji {
  color: #fff;
  background: var(--t-rojo-boton);
}


/* ============================================================
   6 · LA CUENTA EN FICHAS  ·  #countdown
   Franja de chocolate bajo la barra: a la izquierda el rótulo (y
   "N adentro" cuando el número ya no humilla), a la derecha las
   fichas días · horas · min · seg (las mueve gate-ui.js cada
   segundo). data-tramo sube la urgencia: el color de la sombra de
   las fichas pasa de mango a naranja y, el último día, a rojo.
   ============================================================ */

#countdown.countdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 62px;
  padding: 4px 16px 12px;
  font-family: var(--t-font-display);
  color: var(--t-blanco-choco);
  background: var(--t-noche);
  border-bottom: 2px dashed var(--t-noche-3);
}

@media (min-width: 56.25em) {
  #countdown.countdown {
    justify-content: center;
    gap: 22px;
    padding-inline: max(24px, (100% - 1076px) / 2);
  }
}

#countdown.countdown:empty { visibility: hidden; }

.cd-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cd-rotulo {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.12;
  color: var(--t-blanco-choco);
  text-wrap: balance;
}

.countdown--cerrada .cd-rotulo { font-size: 17px; }

.countdown-adentro {
  font-family: var(--t-font-cuerpo);
  font-size: 13px;
  font-weight: 800;
  color: var(--t-mango);
}

.countdown-adentro::before { content: '● '; color: var(--t-verde); }

.cd-fichas {
  display: flex;
  flex: none;
  gap: 6px;
}

.cd-ficha {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 46px;
  min-height: 44px;
  padding: 3px 4px 2px;
  color: var(--t-choco);
  background: var(--t-papel);
  border: 2px solid var(--t-noche);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--t-mango);
}

.cd-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cd-unidad {
  font-family: var(--t-font-cuerpo);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-choco-2);
}

#countdown[data-tramo='presion'] .cd-ficha { box-shadow: 3px 3px 0 var(--t-naranja); }
#countdown[data-tramo='final'] .cd-ficha { box-shadow: 3px 3px 0 var(--t-rojo); }
#countdown[data-tramo='final'] .cd-num { color: var(--t-rojo-boton); }
#countdown[data-tramo='final'] .cd-rotulo { color: var(--t-mango); }

@media (min-width: 56.25em) {
  .cd-rotulo { font-size: 19px; }
  .cd-ficha { min-width: 60px; min-height: 54px; }
  .cd-num { font-size: 28px; }
}

/* A 320px las cuatro fichas no caben al lado del rótulo: se apilan. */
@media (max-width: 22em) {
  #countdown.countdown { flex-direction: column; align-items: stretch; text-align: center; }
  .cd-fichas { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gate-card,
  .gate-error,
  .gate-id-revelado { animation: none !important; }
}