/* ===== Reset & base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;min-height:100vh;
  font-family:var(--font-htt,"Inter",Arial,sans-serif);
  overflow-x:hidden; color:#fff;
  /* Fondo global: 4C009E → 8000CF hasta 80% → negro */
  background: linear-gradient(180deg, #4C009E 0%, #8000CF 80%, #000 80%, #000 100%);
}
img{max-width:100%;height:auto;display:block}

/* ===== Solo mobile: bloquear desktop/tablet ===== */
@media (min-width:768px){
  body::before{
    content:"Disponible solo en dispositivos móviles";
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    text-align:center; font-weight:800; font-size:24px;
    background:#000; color:#fff;
  }
  main, footer, header{ filter:blur(2px); pointer-events:none; user-select:none; }
}

/* ===== Contenedor ===== */
.tickets-container{ width:100%; max-width:1100px; margin:0 auto; }

/* ===== Utilidad FULL-BLEED ===== */
.full-bleed{ position:relative; }
.full-bleed::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:0; transform:translateX(-50%);
  width:100vw; height:100%;
  pointer-events:none; backface-visibility:hidden;
}

/* ===== Intro / Título ===== */
.intro-hero{ padding:18px 0 18px; }
.intro-hero::before{
  background:
    radial-gradient(40% 26% at 50% 18%, rgba(255,0,255,0.30) 0%, rgba(255,0,255,0) 100%) no-repeat,
    linear-gradient(180deg, #8000CF 0%, #5A00B5 60%, #3B008A 100%);
}
.intro-inner{
  max-width:1100px; margin:0 auto; padding:0 16px;
  display:flex; justify-content:center; align-items:center;
}
.intro-title{
  width:min(540px, 88vw);
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.25));
  animation:introPop .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes introPop{
  from{opacity:0; transform:translateY(-10px) scale(.98)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

/* ===== Opciones ===== */
.options{ padding:26px 0 34px; }
.options::before{
  background:
    radial-gradient(52% 36% at 50% 30%, rgba(255,0,255,0.30) 0%, rgba(255,0,255,0) 72%) no-repeat,
    linear-gradient(180deg, rgba(128,0,207,0) 0%, rgba(128,0,207,0) 100%);
}
.options-inner{
  max-width:1100px; margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:1fr; row-gap:16px;
}

/* ===== Tarjetas (botones) con iconos superpuestos ===== */
.card{
  position:relative;
  display:block; width:100%; max-width:640px; margin:0 auto;
  /* ¡Importante!: permitir que el icono se salga SIN recortarse */
  overflow:visible;
  transform:translateY(18px) scale(.98);
  opacity:0; will-change:transform, opacity;
  transition:transform .45s ease, opacity .45s ease, filter .2s ease;
  animation: pulseOnce 1.4s ease-in-out both; /* preparado */
  animation-play-state: paused;
}

/* Primer <img> dentro de la tarjeta = imagen base del botón */
.card > img:first-child{
  position:relative; z-index:1;           /* base debajo del ripple e icono */
  width:100%; height:auto; display:block;
  border-radius:18px;                      /* redondeado solo al botón */
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

/* Ícono decorativo a la derecha: ocupa el alto completo, superpuesto arriba */
.card-icon{
  position:absolute; right:6px; top:0; bottom:0; margin:auto 0;
  height:100%; width:auto; object-fit:contain;
  max-width:38%;
  z-index:3;                               /* por encima del botón y del ripple */
  pointer-events:none; user-select:none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  opacity:0; transform:translateX(12px) scale(.96);
}
@media (max-width:360px){
  .card-icon{ right:4px; max-width:42%; }
}

/* entrada de la tarjeta + activar animaciones del icono */
.card.show{
  transform:translateY(0) scale(1);
  opacity:1;
  animation-play-state: running;
}
.card.show .card-icon{
  animation: iconIn .45s ease-out .05s both, iconPulse 2.2s ease-in-out .6s infinite;
}

/* Efecto press + ripple */
.card.pressed{ transform:translateY(2px) scale(.985); filter:brightness(.98); }
.card .ripple{
  position:absolute; z-index:2;            /* debajo del icono, encima del botón */
  border-radius:50%;
  transform:scale(0); opacity:.35; pointer-events:none;
  background:#fff;
  animation:ripple .25s ease-out forwards;
  mix-blend-mode: overlay;
}
@keyframes ripple{ to{ transform:scale(1); opacity:0; } }

/* Stagger (delays sincronizados con el pulse) */
.d0{ transition-delay:.05s; animation-delay:.05s; }
.d1{ transition-delay:.15s; animation-delay:.15s; }
.d2{ transition-delay:.25s; animation-delay:.25s; }
.d3{ transition-delay:.35s; animation-delay:.35s; }

/* Pulse sutil una vez (tarjeta) */
@keyframes pulseOnce{
  0%{ transform:translateY(18px) scale(.98); opacity:0 }
  25%{ transform:translateY(0) scale(1.02); opacity:1 }
  55%{ transform:translateY(0) scale(0.995) }
  100%{ transform:translateY(0) scale(1) }
}

/* Icono: entrada + pulse continuo */
@keyframes iconIn{
  from{ opacity:0; transform:translateX(12px) scale(.96) }
  to  { opacity:1; transform:translateX(0)    scale(1) }
}
@keyframes iconPulse{
  0%,100%{ transform:translateX(0) scale(1) }
  50%    { transform:translateX(0) scale(1.045) }
}

/* ===== Degradado inferior antes del footer ===== */
.bottom-fade{ height:56px; }
.bottom-fade::before{
  content:""; position:absolute; z-index:-1;
  left:50%; transform:translateX(-50%);
  width:100vw; height:100%;
  background: linear-gradient(180deg, rgba(128,0,207,1) 0%, rgba(0,0,0,1) 100%);
}

/* ===== Modal ===== */
.has-modal body, .has-modal main{ overflow:hidden; }
.has-modal header, .has-modal footer, .has-modal main{ filter:blur(6px); }

.modal{ position:fixed; inset:0; z-index:100000; display:none; }
.modal[aria-hidden="false"]{ display:block; }

.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.modal-content{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-52%);
  width:min(560px, 92vw);
  background:#0c0713;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  padding:18px 16px 16px;
  border:1px solid rgba(255,255,255,.12);
}

.modal-close{
  position:absolute; right:10px; top:6px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff;
  border:0; font-size:22px; cursor:pointer;
}

.modal-title{
  font-weight:900; text-align:center; margin:6px 0 10px;
  text-transform:uppercase; letter-spacing:.5px; font-size:20px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.modal-title .modal-title-icon{ opacity:.9 }

/* ------ Form modal ------ */
.modal-form{ display:grid; gap:12px; margin-top:8px; }

.field{ width:100%; }
.hint{ display:block; margin-top:6px; font-size:12px; color:#cbb9ff; opacity:.85 }

.modal-input{
  width:100%; padding:12px 14px; font-size:18px; color:#fff;
  background:#1a1024; border:1px solid rgba(255,255,255,.15);
  border-radius:12px; outline:none; transition:border-color .2s, box-shadow .2s;
}
.modal-input:focus{ border-color:#b36aff; box-shadow:0 0 0 3px rgba(179,106,255,.25); }

/* Toggle DNI / CE */
.doc-toggle{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  background:#120a1b; padding:6px; border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
}
.doc-tab{
  appearance:none; border:0; border-radius:10px; padding:10px 12px;
  color:#e9dfff; background:transparent; font-weight:800; letter-spacing:.2px;
  text-transform:uppercase; cursor:pointer; transition:background .2s, color .2s;
}
.doc-tab.active{
  background:linear-gradient(180deg, #2a1544, #1b0f2a);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Grid utilitaria para nombres/apellidos */
.grid{ display:grid; gap:8px; }
.grid-2{ grid-template-columns:1fr 1fr; }
@media (max-width:420px){ .grid-2{ grid-template-columns:1fr; } }

/* Botón dorado */
.modal-btn{
  width:100%; padding:12px 14px; font-weight:900; font-size:18px;
  color:#2a105e; border:0; border-radius:999px; cursor:not-allowed;
  background:linear-gradient(90deg, #FFC24B, #FFE5A0, #FFE5A0, #FFCA56);
  filter:saturate(1.05);
  transition:transform .08s ease, filter .2s ease, opacity .2s ease;
}
.modal-btn:not([disabled]){ cursor:pointer; }
.modal-btn:disabled{ opacity:.55; }
.modal-btn:not([disabled]):active{ transform:translateY(1px) scale(.995); }

/* Accesibilidad: oculto visual pero disponible lectores */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .intro-title{ animation:none }
  .card{ transition:none; transform:none !important; opacity:1 !important; animation:none !important; }
  .card-icon{ animation:none !important; }
}