/* sorteo.css — Página pública de Sorteo/Giveaway.
 * Usa los mismos tokens de marca que el resto del sitio (--n, --n2, --o,
 * inyectados por brand.js desde data/brand.json) para que la página no
 * desentone visualmente en ningún cliente. Un solo foco por pantalla
 * (imagen del premio + contador) — nada de animaciones que compitan con
 * la acción principal: registrarse.
 */

body { margin: 0; background: #f7f8fc; }
.sorteo-page { background: #f7f8fc; min-height: 100vh; }

.sorteo-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: #fff; border-bottom: 1px solid #e6e8f0;
}
.sorteo-topbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--n, #1B2A5E); font-weight: 800; }
.sorteo-topbar__brand img { height: 32px; width: auto; display: block; }
.sorteo-topbar__home { color: var(--n, #1B2A5E); text-decoration: none; font-weight: 600; font-size: 0.92em; }
.sorteo-topbar__home:hover { text-decoration: underline; }

/* ── Countdown — 3 variantes de posición ─────────────────────────── */
.sorteo-countdown {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; font-weight: 700; color: #fff; letter-spacing: 0.02em;
  flex-wrap: wrap;
}
.sorteo-countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.sorteo-countdown__value { font-size: 1.5em; line-height: 1; font-variant-numeric: tabular-nums; }
.sorteo-countdown__label { font-size: 0.62em; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; margin-top: 2px; }
.sorteo-countdown__sep { font-size: 1.3em; opacity: 0.6; align-self: flex-start; margin-top: 2px; }

.sorteo-countdown--top { width: 100%; }
.sorteo-countdown--bottom { width: 100%; position: sticky; bottom: 0; z-index: 20; box-shadow: 0 -4px 16px rgba(0,0,0,0.15); }
.sorteo-countdown--floating-tl,
.sorteo-countdown--floating-tr {
  position: fixed; top: 84px; z-index: 20; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 10px 18px;
}
.sorteo-countdown--floating-tl { left: 16px; }
.sorteo-countdown--floating-tr { right: 16px; }
@media (max-width: 640px) {
  .sorteo-countdown--floating-tl,
  .sorteo-countdown--floating-tr { left: 12px; right: 12px; top: 68px; }
  .sorteo-countdown__unit { min-width: 44px; }
  .sorteo-countdown__value { font-size: 1.2em; }
}

.sorteo-countdown--closed { background: #6b7280 !important; }

/* ── Hero: imagen del premio ──────────────────────────────────────── */
.sorteo-hero {
  position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; color: #fff; text-align: center;
  padding: 48px 24px;
}
.sorteo-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,29,69,0.35) 0%, rgba(15,29,69,0.75) 100%);
}
.sorteo-hero__inner { position: relative; z-index: 1; max-width: 640px; }
.sorteo-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78em; font-weight: 700; opacity: 0.9; margin: 0 0 8px; }
.sorteo-hero__title { font-size: clamp(28px, 5vw, 44px); font-weight: 900; margin: 0 0 18px; line-height: 1.1; text-wrap: balance; }
.sorteo-hero__cta {
  display: inline-block; background: var(--o, #F03031); color: #fff; font-weight: 700;
  padding: 14px 32px; border-radius: 999px; border: none; cursor: pointer; font-size: 1em;
  text-decoration: none; transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 20px rgba(240,48,49,0.4);
}
.sorteo-hero__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(240,48,49,0.5); }

/* ── Formulario ───────────────────────────────────────────────────── */
.sorteo-form-section { max-width: 560px; margin: -40px auto 48px; padding: 0 20px; position: relative; z-index: 2; }
.sorteo-form-card { background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(15,29,69,0.14); padding: 32px 28px; }
.sorteo-form-card h2 { margin: 0 0 6px; font-size: 1.3em; color: var(--n, #1B2A5E); }
.sorteo-form-card__subtitle { color: #64748b; font-size: 0.9em; margin: 0 0 22px; }

.sorteo-field { margin-bottom: 16px; }
.sorteo-field label { display: block; font-weight: 600; font-size: 0.85em; margin-bottom: 6px; color: #1e293b; }
.sorteo-field input[type=text],
.sorteo-field input[type=email] {
  width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid #d6dceb;
  font-size: 0.95em; font-family: inherit; box-sizing: border-box;
}
.sorteo-field input:focus { outline: none; border-color: var(--n, #1B2A5E); box-shadow: 0 0 0 3px rgba(27,42,94,0.12); }
.sorteo-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sorteo-field-row > .sorteo-field { flex: 1; min-width: 160px; }

.sorteo-tyc { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0; font-size: 0.84em; color: #475569; }
.sorteo-tyc input { margin-top: 3px; }
.sorteo-tyc a { color: var(--n, #1B2A5E); font-weight: 600; }

.sorteo-submit {
  width: 100%; background: var(--n, #1B2A5E); color: #fff; font-weight: 700; font-size: 1em;
  padding: 13px; border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s, opacity 0.15s;
}
.sorteo-submit:hover { background: var(--n2, #0f1d45); }
.sorteo-submit:disabled { opacity: 0.6; cursor: default; }

.sorteo-status { margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 0.88em; font-weight: 600; display: none; }
.sorteo-status.is-success { display: block; background: #dcfce7; color: #15803d; }
.sorteo-status.is-error { display: block; background: #fef2f2; color: #b91c1c; }
.sorteo-status.is-info { display: block; background: #fef9c3; color: #854d0e; }

.sorteo-closed-card {
  max-width: 480px; margin: 60px auto; text-align: center; padding: 40px 24px;
  background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(15,29,69,0.1);
}
.sorteo-closed-card h2 { color: var(--n, #1B2A5E); margin: 0 0 8px; }
.sorteo-closed-card p { color: #64748b; margin: 0; }

/* Sin feature activo — la página entera queda oculta, sin flash de contenido. */
.no-feat-sorteo .sorteo-page { display: none; }