/*
  Lalitos Club — estilos compartidos por el pase del cliente y el panel de Lalitos.
  Dirección "Pase de festival" en los colores de la marca: la pantalla es la pulsera morada,
  el pase es papel de boleto blanco con muescas y perforación, y cada sello perfora un hoyo
  que deja ver el morado. Verde para la acción principal y para el premio (el hoyo 10).
  Archivo (eje de ancho: expandida para la marca, condensada para nombres y títulos) y
  Big Shoulders Display para números y folios.
*/
:root {
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Big Shoulders Display", "Archivo", system-ui, sans-serif;

  --campo: #4a1d6e;  --campo-hondo: #36134f;  --campo-noche: #1d0b2e;
  --lila: #ddd0f2;                                   /* texto secundario sobre morado */
  --tinta: #2b1240;  --tinta-2: #574866;            /* dos tintas sobre papel blanco */
  --papel: #ffffff;  --papel-2: #f4eff9;
  --linea: #e7dff0;  --linea-fuerte: #c9bcd8;
  --verde: #187a41;  --verde-hondo: #11622f;  --verde-claro: #e2f3e8;
  --rojo: #c4242a;   --rojo-claro: #ffedea;

  /* nombres heredados que todavía usan algunos estilos en línea */
  --hue: var(--campo); --hue-deep: var(--tinta); --hue-ink: var(--tinta); --hue-press: var(--campo-hondo);
  --hue-50: var(--papel-2); --hue-100: #ebe2f5; --hue-200: var(--linea-fuerte);
  --text: var(--tinta); --muted: var(--tinta-2); --faint: var(--tinta-2);
  --surface: var(--papel); --raised: var(--papel-2); --active: #ebe2f5; --ground: var(--campo);
  --border: var(--linea); --rule: var(--linea); --control: var(--linea-fuerte);
  --thread: var(--verde); --thread-ink: var(--verde-hondo); --thread-50: var(--verde-claro);
  --negative: var(--rojo); --negative-50: var(--rojo-claro); --cream: var(--papel);

  --r-pase: 20px;  --r-hoja: 26px;  --r-control: 14px;  --r-input: 12px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease: var(--ease-out);
  /* fibra de pulsera Tyvek, apenas visible sobre el morado */
  --fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1'%3E%3Cpath d='M-2 9c10-4 18 3 28-1s16-5 24-1'/%3E%3Cpath d='M-2 31c8 3 15-5 24-2s17 6 28 1'/%3E%3Cpath d='M14-2c-3 12 5 18 1 30s3 16 0 22'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--lila) var(--campo-hondo); }
body {
  margin: 0; min-height: 100dvh; background: var(--campo) var(--fibra); color: #fff;
  font: 500 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  caret-color: var(--verde);
}
::selection { background: var(--verde); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--campo-hondo); }
::-webkit-scrollbar-thumb { background: var(--lila); border-radius: 999px; border: 2px solid var(--campo-hondo); }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
a { color: #fff; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pase :focus-visible, .tarjeton :focus-visible, .hoja :focus-visible, .boleto :focus-visible { outline-color: var(--verde); }
.num { font-variant-numeric: tabular-nums; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.columna { max-width: 480px; margin: 0 auto; padding: 0 16px; }

/* ---------- Banda de la pulsera: logo, marca y folio ---------- */
.portada { padding: calc(14px + env(safe-area-inset-top)) 0 4px; }
.marca { display: flex; align-items: center; gap: 12px; margin: 6px 2px 18px; }
.marca img { width: 54px; height: 54px; border-radius: 50%; flex: none; outline: 2px dashed rgba(255, 255, 255, .45); outline-offset: 3px; }
.marca__txt { flex: 1; min-width: 0; }
.titulo-marca, .marca .titulo-marca { font: 900 21px/1.05 var(--font); font-stretch: 125%; text-transform: uppercase; color: #fff; letter-spacing: .01em; margin: 0; }
.titulo-marca--grande { font-size: 40px; font-stretch: 70%; line-height: .95; letter-spacing: 0; }
.marca p { font: 600 13px/1.35 var(--font); color: var(--lila); margin-top: 3px; }
.marca .folio { flex: none; margin: 0; font: 900 27px/1 var(--font-num); color: #fff; letter-spacing: .02em; }

/* ---------- Botones y controles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border-radius: var(--r-control); border: 2px solid transparent;
  font: 800 15px/1.1 var(--font); text-decoration: none; text-align: center; touch-action: manipulation;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn--primario { background: var(--verde); color: #fff; }
.btn--morado { background: var(--campo); color: #fff; }
.btn--secundario { background: var(--papel); color: var(--tinta); border-color: var(--tinta); }
.btn--claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn--peligro { background: var(--papel); color: var(--rojo); border-color: #e3a9a5; }
.btn--ancho { width: 100%; min-height: 60px; font-size: 17px; font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em; }
.btn--chico { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--primario:hover { background: var(--verde-hondo); }
  .btn--morado:hover { background: var(--campo-hondo); }
  .btn--secundario:hover { background: var(--papel-2); }
  .btn--claro:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
}
.btn-texto {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  border: 0; background: none; color: #fff; font: 700 15px/1.2 var(--font);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5);
}
.btn-texto svg { width: 18px; height: 18px; }
.pase .btn-texto, .tarjeton .btn-texto, .hoja .btn-texto, .boleto .btn-texto { color: var(--verde); text-decoration-color: rgba(24, 122, 65, .45); }
.btn-texto--peligro, .hoja .btn-texto--peligro { color: var(--rojo); text-decoration-color: rgba(196, 36, 42, .4); }
@media (hover: hover) and (pointer: fine) { .btn-texto:hover { text-decoration-color: currentColor; } }
.icono-boton { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: #fff; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.icono-boton:active { transform: scale(.94); }
.icono-boton svg { width: 22px; height: 22px; }
.tarjeton .icono-boton, .hoja .icono-boton { color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) {
  .icono-boton:hover { background: rgba(255, 255, 255, .12); }
  .tarjeton .icono-boton:hover { background: var(--papel-2); color: var(--tinta); }
}
.pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; flex: none; border-radius: 999px; font: 800 12px/1 var(--font); white-space: nowrap; }
.pill--hue { background: var(--campo); color: #fff; }
.pill--hilo { background: var(--verde); color: #fff; }
.pill--aviso { background: var(--papel); color: var(--campo); box-shadow: inset 0 0 0 2px var(--campo); }

/* ---------- Bloques y listas ---------- */
.bloque { margin-top: 36px; }
.bloque__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.bloque__titulo { font: 900 30px/.95 var(--font); font-stretch: 70%; text-transform: uppercase; color: #fff; }
.tarjeton .bloque__titulo, .hoja .bloque__titulo { color: var(--tinta); font-size: 24px; }
.bloque__meta { font: 700 13px/1.3 var(--font); color: var(--lila); white-space: nowrap; }
.tarjeton { background: var(--papel); color: var(--tinta); border-radius: 18px; }
.lista { list-style: none; margin: 0; padding: 0 16px; }
.lista > li { border-top: 1px solid var(--linea); }
.lista > li:first-child { border-top: 0; }
.renglon { display: flex; align-items: center; gap: 12px; padding: 14px 0; min-height: 64px; }
.renglon--compacto { min-height: 48px; padding: 10px 0; }
.renglon__txt { flex: 1; min-width: 0; }
.renglon__titulo { display: flex; align-items: center; gap: 8px; font: 700 16px/1.3 var(--font); color: var(--tinta); }
.renglon__titulo > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renglon__sub { font: 500 14px/1.45 var(--font); color: var(--tinta-2); margin-top: 2px; }
.renglon__dato { flex: none; text-align: right; font: 700 16px/1.35 var(--font); color: var(--tinta); font-variant-numeric: tabular-nums; }
.renglon__dato small { display: block; font: 500 12px/1.4 var(--font); color: var(--tinta-2); }
.vacio { padding: 20px 16px; font: 500 15px/1.5 var(--font); color: var(--tinta-2); text-align: center; }
.pie { margin-top: 44px; padding: 0 4px; font: 500 13px/1.7 var(--font); color: var(--lila); text-align: center; }
.nota { font: 500 14px/1.5 var(--font); color: var(--lila); }
.tarjeton .nota, .hoja .nota, .pase .nota { color: var(--tinta-2); }
.aviso-bloque { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--papel); color: var(--tinta); border: 2px dashed var(--campo); font: 600 15px/1.5 var(--font); }
.aviso-bloque svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--campo); }
.aviso-bloque--error { background: var(--rojo-claro); color: #831c1e; }
.aviso-bloque .btn-texto { color: var(--campo); text-decoration-color: currentColor; }

/* ---------- El pase: papel de boleto con muescas, perforación y talón ---------- */
.pase { position: relative; overflow: hidden; background: var(--papel); color: var(--tinta); border-radius: var(--r-pase); }
.pase__arriba { padding: 18px 20px 20px; }
.pase__cab { display: flex; justify-content: flex-end; }
.pase__nombre { font: 900 46px/.9 var(--font); font-stretch: 66%; text-transform: uppercase; color: var(--tinta); overflow-wrap: anywhere; }
.pase__cuenta { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pase__num { font: 900 118px/.78 var(--font-num); color: var(--tinta); letter-spacing: -.01em; }
.pase__num span { font-size: 42px; color: var(--tinta-2); letter-spacing: 0; }
.pase__falta { font: 900 20px/1.05 var(--font); font-stretch: 78%; text-transform: uppercase; color: var(--verde); text-align: right; max-width: 155px; }
.pase__listo { font: 900 38px/.95 var(--font); font-stretch: 68%; text-transform: uppercase; color: var(--verde); margin-top: 14px; }
.pase__listo + p { font: 700 16px/1.4 var(--font); margin-top: 6px; }
.pase__corte { position: relative; margin: 0 22px; border-top: 3px dashed var(--linea-fuerte); }
.pase__corte::before, .pase__corte::after { content: ""; position: absolute; top: -16px; width: 30px; height: 30px; border-radius: 50%; background: var(--campo); }
.pase__corte::before { left: -37px; }
.pase__corte::after { right: -37px; }
.pase__talon { padding: 20px 18px 16px; }
.pase__regla { font: 500 14px/1.45 var(--font); color: var(--tinta-2); margin-top: 14px; }
.pase__titulo { font: 900 30px/.95 var(--font); font-stretch: 70%; text-transform: uppercase; color: var(--tinta); }

/* El talón: 10 hoyos; perforado deja ver el morado; el 10 es verde y un poco mayor */
.talon { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px; }
.hoyo { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2.5px solid var(--tinta); background: var(--papel); display: grid; place-items: center; }
.hoyo__num { font: 800 22px/1 var(--font-num); color: var(--tinta); }
.hoyo.perforado { background: var(--campo) var(--fibra); background-attachment: fixed; border-color: var(--campo-hondo); box-shadow: inset 0 3px 5px rgba(13, 3, 22, .45); }
.hoyo--premio { border: 0; background: var(--verde); transform: scale(1.24); z-index: 1; }
.hoyo--premio.perforado { background: var(--campo) var(--fibra); background-attachment: fixed; box-shadow: inset 0 0 0 4px var(--verde), inset 0 4px 8px rgba(13, 3, 22, .5); }
.hoyo__gorra { width: 60%; height: auto; fill: #fff; }
.hoyo.nuevo { animation: perforar 200ms var(--ease-out) calc(var(--i) * 160ms) both; }
.hoyo__chad { position: absolute; inset: -2.5px; border-radius: 50%; background: var(--papel); border: 2.5px solid var(--tinta); pointer-events: none; animation: caer 560ms var(--ease-in-out) calc(var(--i) * 160ms) forwards; }
@keyframes perforar { from { background: var(--papel); box-shadow: none; } }
@keyframes caer { 0% { transform: none; opacity: 1; } 100% { transform: translate(10px, 64px) rotate(80deg) scale(.55); opacity: 0; } }

/* Tira chica para listas y marca de cada compra */
.tira { display: grid; grid-template-columns: repeat(5, 7px); gap: 3px; flex: none; }
.tira i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--tinta); }
.tira i.si { background: var(--campo); border-color: var(--campo); }
.tira i.fin { border-color: var(--verde); }
.tira i.fin.si { background: var(--verde); border-color: var(--verde); }
.hoyo-mini { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--campo); box-shadow: inset 0 2px 4px rgba(13, 3, 22, .45); }
.hoyo-mini--premio { background: var(--campo) var(--fibra); background-attachment: fixed; box-shadow: inset 0 0 0 3px var(--verde), inset 0 2px 4px rgba(13, 3, 22, .45); }
.hoyo-mini--carton { background: var(--papel); border: 2.5px dashed var(--campo); box-shadow: none; }
.hoyo-mini .hoyo__gorra { width: 64%; }

/* ---------- Premio: la pulsera verde ---------- */
.pulsera { position: relative; padding: 20px 76px 20px 20px; border-radius: 16px; background: var(--verde) var(--fibra); color: #fff; overflow: hidden; }
.pulsera::after { content: ""; position: absolute; right: 22px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--verde-hondo); box-shadow: inset 0 0 0 7px var(--verde), inset 0 0 0 9px rgba(255, 255, 255, .55); }
.pulsera::before { content: ""; position: absolute; right: 64px; top: 0; bottom: 0; border-left: 2px dashed rgba(255, 255, 255, .45); }
.pulsera h2 { font: 900 34px/.92 var(--font); font-stretch: 68%; text-transform: uppercase; }
.pulsera p { font: 600 16px/1.45 var(--font); margin-top: 8px; }
.pulsera .pill { margin-top: 12px; background: #fff; color: var(--verde-hondo); }

/* ---------- Promociones: boletos con talón ---------- */
.boletos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.boleto { position: relative; display: flex; background: var(--papel); color: var(--tinta); border-radius: 16px; overflow: hidden; }
.boleto::before, .boleto::after { content: ""; position: absolute; left: 47px; width: 24px; height: 24px; border-radius: 50%; background: var(--campo); }
.boleto::before { top: -12px; }
.boleto::after { bottom: -12px; }
.boleto__talon { width: 60px; flex: none; display: grid; place-items: center; border-right: 3px dashed var(--linea-fuerte); }
.boleto__talon i { width: 20px; height: 20px; border-radius: 50%; background: var(--campo); box-shadow: inset 0 2px 4px rgba(13, 3, 22, .45); }
.boleto__cuerpo { flex: 1; min-width: 0; padding: 16px 18px 16px 18px; }
.boleto__titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 900 21px/1 var(--font); font-stretch: 75%; text-transform: uppercase; color: var(--tinta); }
.boleto__txt { font: 600 15px/1.45 var(--font); color: var(--tinta); margin-top: 6px; }
.boleto__vig { font: 500 13px/1.4 var(--font); color: var(--tinta-2); margin-top: 4px; }
.boletos .vacio { background: var(--papel); border-radius: 16px; }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: 8px; margin-bottom: 18px; }
.campo > label, .campo__et { font: 700 15px/1.3 var(--font); color: var(--tinta); }
.campo__ayuda { font: 500 14px/1.4 var(--font); color: var(--tinta-2); }
.campo__error { font: 700 14px/1.4 var(--font); color: var(--rojo); }
.entrada {
  width: 100%; min-height: 52px; padding: 10px 14px; border-radius: var(--r-input);
  border: 2px solid var(--linea-fuerte); background: var(--papel); color: var(--tinta); font-size: 16px; font-weight: 600;
  transition: border-color 160ms ease;
}
.entrada::placeholder { color: #6a5c7a; }
.entrada:focus { outline: 3px solid var(--verde-claro); outline-offset: 0; border-color: var(--verde); }
.entrada[aria-invalid="true"] { border-color: var(--rojo); }
textarea.entrada { min-height: 96px; resize: vertical; line-height: 1.5; }
select.entrada { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%232b1240' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.dos { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.paso { display: flex; align-items: center; gap: 4px; }
.paso button { width: 48px; height: 48px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta); display: grid; place-items: center; transition: transform 160ms var(--ease-out); }
.paso button:active { transform: scale(.94); }
.paso button:disabled { opacity: .3; cursor: not-allowed; }
.paso button svg { width: 18px; height: 18px; }
.paso output { min-width: 56px; text-align: center; font: 900 34px/1 var(--font-num); color: var(--tinta); }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font: 700 15px/1.3 var(--font); color: var(--tinta); cursor: pointer; }
.interruptor input { appearance: none; width: 48px; height: 30px; border-radius: 999px; background: var(--linea-fuerte); position: relative; flex: none; cursor: pointer; transition: background-color 200ms ease; margin: 0; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 200ms var(--ease-out); box-shadow: 0 1px 3px rgba(13, 3, 22, .25); }
.interruptor input:checked { background: var(--verde); }
.interruptor input:checked::after { transform: translateX(18px); }
.casilla { display: flex; gap: 12px; align-items: flex-start; font: 500 15px/1.45 var(--font); color: var(--tinta); cursor: pointer; min-height: 44px; }
.casilla input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--verde); }
.casilla a, .tarjeton a, .hoja a:not(.btn) { color: var(--verde); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 8px; margin: 0 -16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--linea-fuerte); background: var(--papel); color: var(--tinta); font: 800 14px/1 var(--font); white-space: nowrap; transition: transform 160ms var(--ease-out); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--campo); border-color: var(--campo); color: #fff; }
.chip .num { opacity: .75; margin-left: 2px; }

/* ---------- Hojas (cajón inferior) ---------- */
.capa { position: fixed; inset: 0; z-index: 40; display: none; }
.capa.abierta { display: block; }
.capa__fondo { position: absolute; inset: 0; background: rgba(13, 3, 22, .6); opacity: 0; transition: opacity 200ms ease; }
.capa.visible .capa__fondo { opacity: 1; }
.hoja {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; max-height: 92dvh; margin: 0 auto;
  overflow-y: auto; overscroll-behavior: contain; background: var(--papel); color: var(--tinta);
  border-radius: var(--r-hoja) var(--r-hoja) 0 0; padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 36px rgba(13, 3, 22, .3); /* la hoja flota sobre la pantalla */
  transform: translateY(100%); transition: transform 200ms var(--ease-out);
}
.capa.visible .hoja { transform: none; transition: transform 380ms var(--ease-drawer); }
.hoja__asa { width: 44px; height: 5px; border-radius: 3px; background: var(--linea-fuerte); margin: 4px auto 12px; }
.hoja__cab { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.hoja__cab > div { flex: 1; min-width: 0; }
.hoja__titulo { font: 900 28px/1 var(--font); font-stretch: 72%; text-transform: uppercase; color: var(--tinta); }
.hoja__sub { font: 500 15px/1.45 var(--font); color: var(--tinta-2); margin-top: 6px; }
.cerrar { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--papel-2); display: grid; place-items: center; flex: none; color: var(--tinta); transition: transform 160ms var(--ease-out); }
.cerrar:active { transform: scale(.94); }
.cerrar svg { width: 20px; height: 20px; }
.hoja__acciones { display: grid; gap: 10px; margin-top: 20px; }
.qr { display: grid; justify-items: center; gap: 12px; padding: 20px 16px 18px; text-align: center; background: var(--campo) var(--fibra); border-radius: var(--r-pase); color: #fff; }
.qr svg { border-radius: 14px; border: 8px solid #fff; }
.qr__no { font: 900 36px/1 var(--font-num); letter-spacing: .04em; }
.qr__txt { font: 600 15px/1.5 var(--font); color: var(--lila); max-width: 300px; }
.exito { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 8px 0 4px; }
.exito .talon { width: 100%; max-width: 320px; margin: 6px 0 10px; }
.exito h3 { font: 900 30px/1 var(--font); font-stretch: 70%; text-transform: uppercase; color: var(--tinta); }
.exito p { font: 500 15px/1.5 var(--font); color: var(--tinta-2); max-width: 320px; }
.talon--hoja { padding: 16px; border-radius: 16px; background: var(--papel-2); }

/* ---------- Aviso (toast) y confeti ---------- */
.aviso {
  position: fixed; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60; max-width: 420px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px;
  background: var(--campo-noche); color: #fff; font: 700 15px/1.4 var(--font);
  box-shadow: 0 12px 30px rgba(13, 3, 22, .35); /* aviso flotante */
  opacity: 0; transform: translateY(16px); transition: opacity 180ms ease, transform 180ms var(--ease-out); pointer-events: none;
}
.aviso.ver { opacity: 1; transform: none; transition: opacity 240ms ease, transform 260ms var(--ease-out); }
.aviso svg { width: 20px; height: 20px; flex: none; color: #7fe0a3; }
.aviso--error svg { color: #ffb4ad; }
.confeti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 55; }
.confeti i { position: absolute; left: 50%; top: 30%; width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; animation: confeti var(--t) var(--ease-out) forwards; }
@keyframes confeti {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--g)); }
}
.cargando { display: grid; place-items: center; min-height: 60dvh; color: var(--lila); font: 700 15px var(--font); }

@media (max-width: 360px) {
  .pase__nombre { font-size: 40px; }
  .pase__num { font-size: 100px; }
  .talon { gap: 10px 8px; }
  .titulo-marca--grande { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .hoyo__chad { display: none; }
}