/* =============================================================================
   RIFAS SMW · home.css V2 · INICIO «EL CASINO SIN VENTANAS»
   Solo la Home (ES y EN). Los arquetipos viven en base.css; aqui va el
   layout de la entrada al casino: hero nocturno, fila jackpot, cartas
   estelares 4:5, sala de boletos tras la cortina, divisor ruleta, podio,
   mesa espejo y CTA marquesina. Compositor-only. Todo vw con techo px.
   ========================================================================== */

/* ---------- 1 · HERO · LA ENTRADA ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: clip;
  padding: calc(var(--nav-h) + clamp(2rem, 4vh, 3.5rem)) 0 clamp(3rem, 6vh, 5rem);
  text-align: center;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-media picture,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
/* Escena final por CSS: funde la foto nocturna al sustrato #070304 */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 3, 4, 0.72) 0%, rgba(7, 3, 4, 0.25) 26%, rgba(7, 3, 4, 0.14) 48%, rgba(7, 3, 4, 0.62) 78%, var(--ink) 99%),
    radial-gradient(ellipse 72% 58% at 50% 46%, rgba(7, 3, 4, 0.52), transparent 68%),
    radial-gradient(ellipse 130% 90% at 50% 50%, transparent 55%, rgba(7, 3, 4, 0.78) 100%);
}
.hero .amb-spot { z-index: 2; }
.hero .spot-a { left: 10%; }
.hero .spot-b { right: 8%; }
.hero .dust-mote { z-index: 2; }
.hero-content {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
}

.hero-neon-row { margin-bottom: clamp(1.2rem, 2.6vh, 2rem); }
.hero .neon-sign { font-size: clamp(0.95rem, 0.72rem + 1.1vw, 1.6rem); }

.hero-title {
  font-size: clamp(2.05rem, 0.55rem + 6.6vw, 6.4rem);
  line-height: 1.04;
  text-wrap: balance;
}
.ht-line { display: block; }
.hl { display: inline-block; }
.hl-gold { color: var(--gold); font-size: 1.24em; line-height: 1; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hl-gold, .hl-gold .ht-l {
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* Letra a letra (home.js separa; sin JS o con reduced-motion queda plano) */
.ht-w { display: inline-block; white-space: nowrap; }
.ht-l { display: inline-block; will-change: transform; }
html.js .hero-title.ht-split .ht-l {
  opacity: 0.001;
  transform: translateY(0.55em);
}
html.js .hero.hero-go .hero-title.ht-split .ht-l {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.62s var(--ease-out);
  transition-delay: calc(var(--l, 0) * 26ms);
}

.hero-sub {
  margin: clamp(1.2rem, 2.6vh, 2rem) auto clamp(1.8rem, 3.6vh, 2.8rem);
  max-width: 52ch;
  color: var(--cream-muted);
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.15rem);
}

.hero-cta { display: flex; justify-content: center; }
.btn-xl {
  padding: 1.12em 2.5em;
  font-size: clamp(0.88rem, 0.82rem + 0.3vw, 1.02rem);
}
.hero-phone {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  margin-top: clamp(1.3rem, 2.4vh, 1.9rem);
  padding: 0.5em 1.2em;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(7, 3, 4, 0.55);
  transition: transform var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.hero-phone:hover { transform: translateY(-2px); }
.phone-tag {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-muted);
}
.phone-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  letter-spacing: 0.06em;
  color: var(--gold-2);
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 0.8rem;
  margin-top: clamp(1.4rem, 2.6vh, 2rem);
}

/* ---------- 2 · FILA JACKPOT ---------- */
.jackpot-strip { padding-block: clamp(3.6rem, 2.6rem + 4.5vw, 7rem); }
.jackpot-strip .eyebrow { margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
@media (max-width: 700px) {
  .jackpot-strip .jackpot-row { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .jackpot-strip .jackpot { font-size: clamp(1.9rem, 9vw, 2.6rem); }
}

/* ---------- 3 · LAS DOS CARTAS ESTELARES ---------- */
.stellar-head { margin-bottom: clamp(2.4rem, 4vw, 4rem); }
.stellar-head p { max-width: 58ch; }
.stellar .draw-pair {
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  width: min(1080px, 100%);
  margin-inline: auto;
}
.stellar .draw-card-media { aspect-ratio: 4 / 5; }
/* CTA anclado al pie: las dos cartas cierran a la misma altura */
.stellar .draw-card-body {
  flex: 1;
  grid-template-rows: auto auto auto 1fr auto;
}
.stellar .draw-card-body h3 { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem); }
.dc-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.dc-chips .chip-urgent, .dc-chips .chip-gold {
  font-size: 0.66rem;
  padding: 0.42em 0.95em;
}

/* ---------- 4 · SALA DE BOLETOS (tras la cortina) ---------- */
.steps-room { position: relative; }
.steps-head { margin-bottom: clamp(2.2rem, 3.5vw, 3.6rem); }
.steps-head p { max-width: 52ch; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(1.2rem, 2vw, 1.8rem);
}
.step-no {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.7rem + 1.6vw, 3.2rem);
  line-height: 1;
  margin-bottom: 0.55rem;
  color: var(--gold);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .step-no {
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.steps-grid h3 { font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.25rem); margin-bottom: 0.5rem; }
.steps-cta { margin-top: clamp(2.2rem, 3.5vw, 3.2rem); }

/* ---------- 5 · DIVISOR RULETA ---------- */
.wheel-divider {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
.wheel-divider .wheel-bg { min-height: min(74vw, 660px); }
.wheel-divider .wheel-svg { opacity: 0.4; }
.wheel-copy h2 { font-size: clamp(1.5rem, 1rem + 2.4vw, 2.9rem); }
.wheel-copy p {
  margin: 1rem auto 0;
  max-width: 46ch;
  color: var(--cream-muted);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem);
}
/* Placa de sombra tras la frase: legible sobre la rueda girando */
.wheel-copy::before {
  content: '';
  position: absolute;
  inset: -18% -8%;
  z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(7, 3, 4, 0.88), transparent 72%);
  pointer-events: none;
}

/* ---------- 6 · TEASER GANADORES · PODIO ---------- */
.podium-teaser { padding-bottom: clamp(3rem, 5vw, 5.5rem); }
.podium-teaser > .container p { max-width: 54ch; }
.podium-stage {
  position: relative;
  width: min(1050px, 94vw);
  margin: clamp(1.6rem, 3vw, 2.6rem) auto 0;
}
.podium-stage img { width: 100%; height: auto; }
.podium-plaque {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  padding: 0.78em 1.7em;
  background: linear-gradient(180deg, #3B2A12 0%, #241708 55%, #1A1005 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(252, 216, 89, 0.35),
    inset 0 0 22px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
/* Doble filo de placa grabada */
.podium-plaque::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(217, 150, 25, 0.35);
  border-radius: 5px;
  pointer-events: none;
}
.podium-plaque span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.78rem, 0.66rem + 0.65vw, 1.2rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-2);
}
html.js .podium-plaque[data-reveal] { transform: translate(-50%, 26px); }
html.js .podium-plaque[data-reveal].is-in { transform: translate(-50%, 0); }
.podium-cta { margin-top: clamp(1.8rem, 3vw, 2.6rem); }

/* ---------- 7 · MESA ESPEJO + CTA MARQUESINA FINAL ---------- */
/* Arquetipo invertido (ley espejo en clave casino): la luz de la mesa entra
   desde ABAJO y el riel se acentua; editorial, jamas un banner. */
.table-flip {
  background:
    radial-gradient(ellipse 110% 80% at 50% 108%, rgba(217, 150, 25, 0.13), transparent 55%),
    linear-gradient(0deg, #1D1009 0%, #0D0607 78%);
}
.table-flip::before { border-color: rgba(217, 150, 25, 0.28); }
.mesa-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.8rem, 3.5vw, 4rem);
  align-items: center;
}
.mesa-media {
  position: relative;
  transform: rotate(-1.4deg);
}
.mesa-media img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
  /* filtro ESTATICO (jamas animado): apaga el dia de la foto */
  filter: brightness(0.82) saturate(0.6);
}
/* La noche del casino sobre la foto diurna: multiply crushed a azul-noche +
   vineta, sin ventanas en la sala (overlay estatico, cero animacion) */
.mesa-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    linear-gradient(180deg, rgba(16, 18, 44, 0.92) 0%, rgba(42, 34, 40, 0.5) 46%, rgba(30, 20, 14, 0.55) 100%),
    radial-gradient(ellipse 120% 95% at 50% 55%, transparent 48%, rgba(7, 3, 4, 0.85) 100%);
}
/* Marco de vitrina detras de la foto */
.mesa-media::before {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  transform: rotate(1.8deg);
  pointer-events: none;
}
.mesa-copy p { color: var(--cream-muted); }
.mesa-list { margin: 1.4rem 0 1.8rem; display: grid; gap: 0.75rem; }
.mesa-list li {
  position: relative;
  padding-left: 1.7em;
  font-size: 0.98rem;
  color: var(--cream);
}
/* Mini ficha dentada como vineta */
.mesa-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(252, 216, 89, 0.9), rgba(217, 150, 25, 0.55) 60%, rgba(140, 94, 15, 0.9));
  box-shadow: 0 0 0 2px rgba(217, 150, 25, 0.25);
}

.final-cta { padding-top: clamp(2rem, 3vw, 3.5rem); }
.final-cta .eyebrow { display: block; margin-bottom: 0.4rem; }
.mq-final {
  --mq-pad: clamp(30px, 4vw, 48px);
  width: min(780px, 100%);
  margin-top: 1.6rem;
}
.final-inner {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(0.6rem, 1.5vw, 1.4rem) clamp(0.2rem, 1vw, 1rem);
}
.final-inner h2 { font-size: clamp(1.8rem, 1.2rem + 2.8vw, 3.4rem); }
.final-inner p { color: var(--cream-muted); max-width: 44ch; }
.final-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

/* ---------- 8 · RESPONSIVE ---------- */
@media (max-width: 900px) {
  .mesa-grid { grid-template-columns: 1fr; }
  .mesa-media { transform: rotate(-1deg); width: min(560px, 100%); margin-inline: auto; }
  .mesa-copy { text-align: left; }
}
@media (max-width: 700px) {
  .hero { padding-top: calc(var(--nav-h) + 1.2rem); }
  .hero-sub { max-width: 34ch; }
  .hero .spot-b { display: none; }   /* presupuesto en pantallas chicas */
  .stellar .draw-pair { width: min(520px, 100%); }
  .steps-grid { width: min(440px, 100%); margin-inline: auto; }
  .podium-plaque { bottom: 6%; }
  .final-buttons .btn { width: 100%; }
  .mq-final { --mq-pad: clamp(24px, 7vw, 30px); }
}
@media (max-width: 390px) {
  .hero-chips { gap: 0.5rem; }
  .chip-urgent, .chip-gold { font-size: 0.62rem; }
}