/* Escena ilustrada de la portada (web y carta) y tamaños de las ilustraciones de bebida.
   Los objetos se apoyan sobre el zócalo de azulejo, que hace de barra. Todo por detrás del texto. */

.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-star { position: absolute; top: 30px; right: 238px; width: 30px; height: 30px; opacity: 0.85; transform: rotate(-12deg); }

/* El escenario ocupa la franja derecha, del techo al zócalo (72px). Todo se alinea dentro de él. */
.scene-stage { position: absolute; top: 0; bottom: 72px; right: 0; width: 230px; }
/* resplandor cálido general alrededor de los focos */
.scene-stage::before {
  content: ''; position: absolute; left: -30px; right: -30px; top: -40px; height: 200px;
  background: radial-gradient(closest-side, rgba(255, 205, 130, 0.38), rgba(255, 205, 130, 0) 80%);
}
.scene-truss {
  position: absolute; top: 0; left: 30px; right: 30px; height: 14px;
  border: 3px solid var(--negro); border-top: 0; border-radius: 0 0 4px 4px;
}
.scene-spot { position: absolute; top: 9px; width: 46px; height: auto; transform-origin: 50% 0; }
.scene-spot--a { left: 22%; translate: -50% 0; rotate: -16deg; }
.scene-spot--b { left: 78%; translate: -50% 0; rotate: 16deg; }

/* Haces de luz: trapecios suaves que convergen sobre Spoti */
.scene-beams { position: absolute; top: 58px; left: 0; right: 0; bottom: 0; filter: blur(3px); }
.scene-beam {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 222, 160, 0.85), rgba(255, 212, 145, 0.4) 60%, rgba(255, 212, 145, 0.22));
  mix-blend-mode: multiply;
}
.scene-beam--a { clip-path: polygon(24% 0, 37% 0, 84% 100%, 20% 100%); }
.scene-beam--b { clip-path: polygon(63% 0, 76% 0, 80% 100%, 16% 100%); }
/* charco de luz sobre la repisa */
.scene-pool {
  position: absolute; left: 4%; right: 4%; bottom: -19px; height: 24px;
  background: radial-gradient(closest-side, rgba(255, 220, 160, 0.6), rgba(255, 220, 160, 0));
}

/* Repisa: los primeros 14px del zócalo son la superficie donde se apoya todo, con su remate de latón */
.scene::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 58px; height: 14px;
  background: linear-gradient(180deg, #3a3835, #1b1a19);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 0 #b8924a, 0 5px 6px rgba(0, 0, 0, 0.45);
}

/* Todos los objetos se apoyan a media repisa (7px dentro del zócalo) */
.scene-side { position: absolute; left: 18px; bottom: 65px; display: flex; align-items: flex-end; gap: 12px; }
.scene-drinks { position: absolute; left: 0; right: 0; bottom: -7px; display: flex; justify-content: center; align-items: flex-end; }
.scene-item { position: relative; display: block; }
/* sombra de contacto sobre la repisa */
.scene-item::after {
  content: ''; position: absolute; left: 2%; right: 2%; bottom: -5px; height: 10px; z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.scene-item--spoti::after { left: 16%; right: 10%; }

/* Borde blanco de pegatina, igual para Spoti y las copas */
.scene-spoti, .scene-drink {
  display: block; overflow: visible;
  filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff);
}
.scene-spoti { position: relative; height: 150px; width: auto; aspect-ratio: 417 / 640; }
.scene-drink { width: auto; }
.scene-drink--cubata { height: 90px; aspect-ratio: 120 / 166; }
.scene-drink--gin { height: 86px; aspect-ratio: 130 / 166; }

/* Hueco reservado sobre el zócalo para que la escena nunca pise los botones ni el texto. */
:root { --scene-room: 150px; }
@media (min-width: 900px) { :root { --scene-room: 64px; } }

/* El texto siempre por encima de la escena. */
.hero > .wrap, .stage > .stage__inner { position: relative; z-index: 1; }

@media (max-width: 380px) {
  .scene-star { display: none; }
}
@media (min-width: 700px) {
  .scene-stage { right: calc(10% - 40px); width: 320px; }
  .scene-star { right: calc(10% + 300px); top: 46px; width: 44px; height: 44px; }
  .scene-truss { left: 50px; right: 50px; height: 18px; }
  .scene-spot { width: 60px; }
  .scene-beams { top: 74px; }
  .scene-spoti { height: 196px; }
  .scene-drink--cubata { height: 100px; }
  .scene-drink--gin { height: 95px; }
  .scene-side { left: auto; right: calc(10% + 300px); }
}

/* ---------- ilustraciones de bebida ---------- */
.drink { display: block; overflow: visible; }
.drink--thumb { width: 48px; height: 48px; }
.drink--card { width: 92px; height: 92px; }
.drink--hero { width: 150px; height: 150px; }
.drink--title { width: 58px; height: 58px; }

@media (prefers-reduced-motion: no-preference) {
  /* la luz de la lámpara respira muy despacio: ambiente, no espectáculo */
  .scene-beams { animation: lamp-breathe 6s ease-in-out infinite alternate; }
  @keyframes lamp-breathe { from { opacity: 0.85; } to { opacity: 1; } }
}

/* ---------- promoción de la tarjeta de puntos ---------- */
.promo { max-width: 720px; margin: 0 auto; padding: 22px 20px; }
.promo__box { position: relative; overflow: hidden; padding: 20px; border-radius: var(--r-lg); background: #0f0f0f; color: #fff; box-shadow: 0 18px 36px -20px rgba(15, 15, 15, 0.7); }
.promo__box::before { content: ''; position: absolute; right: -39px; top: -70px; width: 240px; height: 240px; background: radial-gradient(closest-side, rgba(255, 205, 130, 0.34), transparent); }
/* Spoti enseñando su tarjeta en el móvil: es el gesto real de esta sección */
.promo__art { position: absolute; right: 28px; top: 10px; width: 106px; height: 140px; }
.promo__spoti { display: block; width: 100%; height: 100%; object-fit: contain; }
.promo__plus { position: absolute; right: -15px; top: -2px; width: 26px; height: 26px; }
.promo__plus img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55)); }
@media (prefers-reduced-motion: no-preference) {
  .promo__plus { animation: promo-plus 2.8s var(--ease-out) infinite; }
  @keyframes promo-plus { 0%, 15% { opacity: 0; transform: translateY(14px) scale(0.8); } 35%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
}
.promo__eyebrow, .promo__title, .promo__lead, .promo__earn, .promo__actions { position: relative; }
.promo__eyebrow { margin: 0; padding-right: 124px; font: 700 0.75rem/1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquesa); }
.promo__title { margin: 8px 0 0; padding-right: 116px; font: 800 1.875rem/1 var(--font-display); text-transform: uppercase; color: #fff; }
.promo__title::before { content: none; }
.promo__lead { margin: 12px 0 0; padding-right: 120px; color: #e7dfd4; }
.promo__earn { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.promo__earn li { padding: 5px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.12); font-weight: 600; font-size: 0.9375rem; }
.promo__earn b { color: var(--rosa); font: 700 1.05rem/1 var(--font-data); }
.promo__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.promo__btn { min-height: 48px; padding-inline: 8px; justify-content: center; white-space: nowrap; background: var(--rosa); color: #0f0f0f; font-weight: 700; text-decoration: none; }
.promo__btn--ghost { background: var(--turquesa); color: #0f0f0f; }
.promo__btn--wide { grid-column: 1 / 3; }
@media (max-width: 374px) {
  .promo__art { right: 20px; width: 96px; height: 127px; }
  .promo__eyebrow, .promo__lead { padding-right: 104px; }
  .promo__title { padding-right: 100px; font-size: 7.6vw; }
  .promo__btn { font-size: 0.9375rem; }
}
@media (min-width: 480px) { .promo__title { font-size: 2.125rem; } }
.promo__hero { background: var(--rosa); color: #0f0f0f; font-weight: 700; text-decoration: none; }

/* ---------- ventana modal de la tarjeta de puntos ---------- */
html.card-open { overflow: hidden; }
.card-modal {
  position: fixed; inset: auto 0 0; width: 100%; max-width: none; height: auto; max-height: 92dvh; margin: 0; padding: 0; border: 0; overflow: hidden;
  border-radius: 22px 22px 0 0; background: var(--velvet-900); color: var(--ink);
}
.card-modal[open] { display: flex; flex-direction: column; }
.card-modal::backdrop { background: rgba(15, 15, 15, 0.62); }
.card-modal__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.card-modal .tc { padding-top: 20px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.card-modal .tc-head h1 { padding-right: 44px; }
.card-modal__wait { margin: 0; padding: 60px 0; text-align: center; color: var(--ink-3); }
.card-modal__close {
  position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: #0f0f0f; cursor: pointer; box-shadow: 0 2px 10px rgba(15, 15, 15, 0.28);
}
.card-modal__close svg { width: 20px; height: 20px; }
@media (min-width: 600px) {
  .card-modal { inset: 0; width: min(92vw, 480px); height: fit-content; max-height: 88dvh; margin: auto; border-radius: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .card-modal[open] { animation: card-modal-in 260ms var(--ease-out); }
  .card-modal[open]::backdrop { animation: card-modal-fade 260ms ease-out; }
  @keyframes card-modal-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes card-modal-fade { from { opacity: 0; } to { opacity: 1; } }
}