/* SUPER SORTEO — dirección «Casino».
   El impacto vive arriba: una cabecera negra y bordó con reflector sobre el
   premio, lamparitas y letras de cartel. Todo lo demás es blanco y limpio.
   Números: verde = libre, dorado = elegido, oscuro con candado = ocupado. */
:root {
  --noche: #12040a;
  --bordo: #4a0a1f;
  --bordo-claro: #6d0f2c;
  --oro: #ffc933;
  --oro-hondo: #e0a000;
  --oro-sombra: #8a5a00;
  --rojo: #d90f33;
  --rojo-hondo: #a8001c;
  --verde: #1fcf74;
  --verde-borde: #12a95b;
  --verde-tinta: #053d20;
  --verde-texto: #0f7a43;
  --bloqueado: #1d1720;
  --fondo: #ffffff;
  --papel: #f7f5f6;
  --texto: #16121a;
  --suave: #6b6272;
  --borde: rgba(22,18,26,.12);
  --radio: 18px;
  --cartel: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --sans: "Hanken Grotesk", system-ui, "Segoe UI", sans-serif;
  /* Vidrio: luz en la mitad de arriba. */
  --reflejo: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 48%, rgba(255,255,255,0) 52%);
  --lamina: linear-gradient(180deg, #fff1b8 0%, #ffc933 45%, #e0a000 100%);
  --sombra: 0 1px 2px rgba(22,18,26,.06), 0 10px 28px rgba(22,18,26,.08);
  /* Curvas de la skill animate. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --candado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E");
  --tilde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.8 1.8 6 6L21 8.3l-1.8-1.8z'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--texto); font: 16px/1.55 var(--sans); background: var(--fondo); min-height: 100vh; }
.num, .grilla button, .reloj, .contador b, .chips span, .cuenta b { font-variant-numeric: tabular-nums; }
a { color: #9b0c35; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.envoltura { max-width: 780px; margin: 0 auto; padding: 0 16px; }
.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; }
[hidden] { display: none !important; }

/* ── Cabecera de casino ─────────────────────────────── */
.hero {
  color: #fff; text-align: center; padding: 20px 16px 44px;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--bordo-claro) 0%, var(--bordo) 38%, var(--noche) 82%);
}
.hero > * { max-width: 760px; margin-left: auto; margin-right: auto; }
/* Lamparitas: puntos de luz. Titilan despacio; con movimiento reducido quedan fijas. */
.luces {
  height: 8px; margin-bottom: 14px;
  background: radial-gradient(circle, #fff3b8 2.2px, rgba(255,201,51,.35) 3.2px, transparent 4px) 0 50% / 14px 8px repeat-x;
  filter: drop-shadow(0 0 4px var(--oro));
  animation: lamparitas 2.4s steps(2) infinite;
}
.luces.abajo { margin-top: 16px; margin-bottom: 0; animation-delay: -1.2s; }
@keyframes lamparitas { 50% { opacity: .55; } }
.marca {
  margin: 0; font: 900 clamp(44px, 12vw, 76px)/.9 var(--cartel); letter-spacing: .01em; text-transform: uppercase;
  color: var(--oro); text-shadow: 0 3px 0 var(--oro-sombra), 0 0 28px rgba(255,201,51,.45);
}
.venta-abierta { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #86efac; }
.venta-abierta::before { content: "● "; }
/* Reflector sobre el premio */
.spot {
  height: clamp(170px, 34vw, 240px); margin-top: 6px; display: grid; place-items: end center; padding: 0 clamp(50px, 18vw, 180px) 8px;
  background: conic-gradient(from 180deg at 50% -20%, transparent 160deg, rgba(255,240,200,.16) 172deg, rgba(255,240,200,.26) 180deg, rgba(255,240,200,.16) 188deg, transparent 200deg);
}
.spot img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0,0,0,.6)); }
.moto { width: 100%; max-width: 300px; }
.piso { width: min(260px, 60%); height: 18px; margin-top: -10px; margin-bottom: 10px; border-radius: 50%; background: radial-gradient(rgba(255,201,51,.45), transparent 70%); }
.premio { margin: 0; font: 900 clamp(38px, 10vw, 60px)/.95 var(--cartel); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.datos-rapidos { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin: 10px auto 0; padding: 0; list-style: none; color: #e9d9df; font-size: 15px; }
.datos-rapidos b { color: var(--oro); font-weight: 700; }

/* ── Cuenta regresiva: el rectángulo rojo ───────────── */
.cuenta {
  position: relative; margin: -26px 0 18px; text-align: center; color: #fff; border-radius: 18px; padding: 12px 14px 12px;
  background: var(--reflejo), linear-gradient(180deg, var(--rojo), var(--rojo-hondo));
  box-shadow: 0 12px 28px rgba(217,15,51,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.cuenta-titulo { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.cuenta-cajas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 440px; margin: 0 auto; }
.cuenta-cajas div { background: rgba(0,0,0,.25); border-radius: 12px; padding: 6px 0 4px; }
.cuenta-cajas b { display: block; font: 900 clamp(30px, 8vw, 40px)/1 var(--cartel); }
.cuenta-cajas span { font-size: 12px; opacity: .92; }
.cuenta-fecha { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; }
.cuenta-fecha::first-letter { text-transform: uppercase; }

/* ── Grilla ─────────────────────────────────────────── */
.titulo-grilla { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 6px 0 8px; }
.titulo-grilla h2 { margin: 0; font: 900 clamp(26px, 6vw, 32px)/1 var(--cartel); text-transform: uppercase; letter-spacing: .01em; }
.titulo-grilla span { font-size: 14px; color: var(--suave); white-space: nowrap; }
.titulo-grilla b { color: var(--texto); }
.leyenda { display: flex; gap: 16px; font-size: 13px; color: var(--suave); margin: 0 0 12px; flex-wrap: wrap; }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 15px; height: 15px; border-radius: 4px; display: inline-block; background: var(--verde); }
.leyenda i.el { background: var(--oro); }
.leyenda i.oc { background: var(--bloqueado); }
.buscador { display: flex; gap: 8px; margin: 0 0 14px; }
.buscador input { flex: 1; min-width: 0; min-height: 48px; font: 800 19px var(--cartel); letter-spacing: .02em; }
.buscador input::placeholder { font: 500 16px var(--sans); letter-spacing: 0; }
.buscador .boton { min-height: 48px; padding: 0 20px; }

.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 7px; padding-bottom: 150px; }
.grilla button {
  position: relative; height: 50px; border-radius: 12px;
  font: 800 20px/1 var(--cartel); letter-spacing: .02em;
  color: var(--verde-tinta);
  background: var(--reflejo), var(--verde);
  border: 1px solid var(--verde-borde);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(18,169,91,.22);
  /* Se toca decenas de veces: respuesta rápida y sutil. */
  transition: transform 120ms var(--ease-out), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.grilla button:active:not(:disabled) { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .grilla button:hover:not(:disabled):not(.elegido) { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 3px rgba(31,207,116,.3); }
}
.grilla button.elegido {
  color: #3a2700; background: var(--reflejo), var(--oro); border-color: var(--oro-hondo);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 3px rgba(255,201,51,.35), 0 6px 14px rgba(224,168,0,.4);
}
.grilla button.elegido::after, .grilla button.ocupado::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 11px; height: 11px;
}
.grilla button.elegido::after { background: #3a2700; -webkit-mask: var(--tilde) center / contain no-repeat; mask: var(--tilde) center / contain no-repeat; }
.grilla button.ocupado {
  color: rgba(255,255,255,.5); background: var(--bloqueado); border-color: var(--bloqueado);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4);
}
.grilla button.ocupado::after { background: rgba(255,255,255,.55); -webkit-mask: var(--candado) center / contain no-repeat; mask: var(--candado) center / contain no-repeat; }
/* Cuando alguien lo toma en vivo, el candado entra suave: muestra que cambió. */
.grilla button.recien::after { animation: candado 240ms var(--ease-out); }
@keyframes candado { from { opacity: 0; transform: translateY(-3px) scale(.9); } }
/* Número encontrado con el buscador: un pulso para ubicarlo. */
.grilla button.encontrado { animation: encontrado 900ms var(--ease-out); }
@keyframes encontrado { from { box-shadow: 0 0 0 0 rgba(217,15,51,.6); } to { box-shadow: 0 0 0 14px rgba(217,15,51,0); } }

/* ── Barra de abajo: sube con el primer número ──────── */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; color: #fff;
  background: var(--noche); border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px rgba(18,4,10,.3);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(100%); opacity: 0; pointer-events: none;
  transition: transform 280ms var(--ease-drawer), opacity 200ms ease-out;
}
.barra.visible { transform: none; opacity: 1; pointer-events: auto; }
.barra .envoltura { display: flex; align-items: center; gap: 14px; padding: 0; }
.barra .resumen { flex: 1; min-width: 0; }
.barra .resumen b { display: block; font: 900 21px/1.15 var(--cartel); text-transform: uppercase; letter-spacing: .02em; }
.barra .resumen small { color: #cdbfc5; font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Botones ────────────────────────────────────────── */
.boton {
  border: 0; border-radius: 12px; padding: 12px 22px; min-height: 48px;
  font: 900 18px/1 var(--cartel); text-transform: uppercase; letter-spacing: .04em;
  color: #3a2700; background: var(--lamina);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 14px rgba(224,160,0,.35);
  transition: transform 120ms var(--ease-out), opacity 160ms ease;
}
.boton:active:not(:disabled) { transform: scale(.97); }
.boton:disabled { opacity: .45; box-shadow: none; }
.boton.secundario { color: var(--texto); background: #fff; border: 1.5px solid var(--borde); box-shadow: none; }
.boton.ok { color: var(--verde-tinta); background: var(--reflejo), var(--verde); border: 1px solid var(--verde-borde); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.boton.mal { color: var(--rojo-hondo); background: #fff; border: 1.5px solid rgba(217,15,51,.45); box-shadow: none; }
.boton.ancho { width: 100%; }
.boton.chico { padding: 10px 16px; min-height: 44px; font-size: 16px; }

/* ── Hoja del formulario ────────────────────────────── */
.velo { position: fixed; inset: 0; background: rgba(18,4,10,.55); z-index: 20; opacity: 0; pointer-events: none; transition: opacity 250ms ease-out; }
.velo.abierto { opacity: 1; pointer-events: auto; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; background: #fff;
  border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(18,4,10,.25);
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform 320ms var(--ease-drawer);
  max-width: 560px; margin: 0 auto;
}
.hoja.abierta { transform: none; }
.hoja h2 { margin: 0 0 4px; font: 900 30px/1 var(--cartel); text-transform: uppercase; }
.hoja .elegidos { color: var(--suave); margin: 0 0 12px; font-size: 14px; word-break: break-word; }
label { display: block; font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=search], input[type=datetime-local], input[type=file], textarea {
  width: 100%; font: inherit; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--borde); background: var(--papel); color: var(--texto);
}
input::placeholder, textarea::placeholder { color: #7d7482; }
input:focus, textarea:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(217,15,51,.15); background: #fff; }
.ayuda { font-size: 13px; color: var(--suave); margin: 6px 0 0; }
.hoja .acciones { display: flex; gap: 10px; margin-top: 20px; }
.hoja .acciones .boton { flex: 1; }

/* ── Aviso ──────────────────────────────────────────── */
#aviso {
  position: fixed; top: 16px; left: 50%; transform: translate(-50%, calc(-100% - 24px));
  background: var(--noche); color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 15px; font-weight: 600; z-index: 50; max-width: calc(100% - 32px);
  box-shadow: 0 12px 30px rgba(18,4,10,.35); transition: transform 250ms var(--ease-out);
}
#aviso.visible { transform: translate(-50%, 0); }

/* ── Cabecera chica (compra y panel) ────────────────── */
.barra-marca {
  color: #fff; padding: 12px 16px;
  background: radial-gradient(ellipse 80% 140% at 50% 0%, var(--bordo-claro), var(--bordo) 45%, var(--noche) 90%);
}
.barra-marca .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; }
.barra-marca .marca { font-size: 30px; text-shadow: 0 2px 0 var(--oro-sombra); }
.barra-marca small { color: #cdbfc5; font-size: 13px; }

/* ── Compra ─────────────────────────────────────────── */
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; margin: 0 0 14px; box-shadow: var(--sombra); }
.tarjeta h2 { font: 900 24px/1.1 var(--cartel); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 10px; }
.fila { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borde); }
.fila:first-of-type { border-top: 0; }
.fila span { color: var(--suave); font-size: 14px; }
.fila b { text-align: right; word-break: break-all; font-weight: 700; }
.copiar { border: 1.5px solid var(--borde); background: #fff; color: var(--texto); border-radius: 10px; padding: 0 12px; min-height: 40px; font-size: 13px; font-weight: 700; margin-left: 8px; transition: transform 120ms var(--ease-out), border-color 160ms ease; }
.copiar:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .copiar:hover { border-color: var(--rojo); } }

.estado { border-radius: var(--radio); padding: 22px 18px; margin: 18px 0 14px; text-align: center; border: 1px solid var(--borde); background: #fff; box-shadow: var(--sombra); }
.estado h1 { margin: 0 0 6px; font: 900 32px/1 var(--cartel); text-transform: uppercase; letter-spacing: .01em; }
.estado p { margin: 0; color: var(--suave); }
.estado .estado-titulo { font: 600 15px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--suave); margin: 0; }
.estado.reservada { background: var(--noche); border-color: var(--noche); color: #fff; }
.estado.reservada p, .estado.reservada .estado-titulo { color: #cdbfc5; }
.estado.revision { border-color: var(--oro); background: #fffaf0; }
.estado.revision h1 { color: var(--oro-sombra); }
.estado.pagada { border-color: #86efac; background: #f0fdf5; }
.estado.pagada h1 { color: var(--verde-texto); }
.estado.rechazada, .estado.vencida { border-color: rgba(217,15,51,.4); background: #fff5f6; }
.estado.rechazada h1, .estado.vencida h1 { color: var(--rojo-hondo); }
.reloj { font: 900 84px/1 var(--cartel); margin: 8px 0 8px; color: var(--oro); text-shadow: 0 3px 0 var(--oro-sombra), 0 0 24px rgba(255,201,51,.35); }
.reloj.apurado { color: #ff6b80; text-shadow: 0 0 20px rgba(217,15,51,.6); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chips span {
  min-width: 48px; height: 38px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center;
  font: 800 19px/1 var(--cartel); letter-spacing: .02em; color: #3a2700;
  background: var(--reflejo), var(--oro); border: 1px solid var(--oro-hondo);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.subir { position: relative; display: block; border: 2px dashed #d9cfd4; background: var(--papel); border-radius: var(--radio); padding: 22px; text-align: center; cursor: pointer; transition: border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .subir:hover { border-color: var(--rojo); } }
.subir:focus-within { outline: 3px solid var(--rojo); outline-offset: 3px; }
.subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.progreso { height: 6px; background: #eee6ea; border-radius: 99px; overflow: hidden; margin-top: 12px; }
.progreso i { display: block; height: 100%; width: 100%; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }

/* ── Panel ──────────────────────────────────────────── */
.panel-cab { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 12px; gap: 12px; }
.panel-cab h1 { font: 900 30px/1 var(--cartel); text-transform: uppercase; margin: 0; }
.panel-cab small { color: var(--suave); display: block; font-size: 13px; }
.contadores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.contador { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 10px 12px; box-shadow: var(--sombra); }
.contador b { display: block; font: 900 30px/1.05 var(--cartel); }
.contador span { font-size: 12.5px; color: var(--suave); }
.contador.destacado { background: var(--noche); border-color: var(--noche); }
.contador.destacado b { color: var(--oro); }
.contador.destacado span { color: #cdbfc5; }
@media (max-width: 560px) {
  .contadores { grid-template-columns: repeat(2, 1fr); }
  .contador:last-child { grid-column: span 2; }
}
.solapas { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px; border-bottom: 1px solid var(--borde); }
.solapas button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px; color: var(--suave); white-space: nowrap; font-weight: 700; transition: color 160ms ease, border-color 160ms ease; }
.solapas button[aria-selected=true] { color: var(--texto); border-bottom-color: var(--rojo); }
.pedido { display: grid; grid-template-columns: 76px 1fr; gap: 16px; }
.miniatura { width: 76px; height: 96px; border-radius: 10px; border: 1px solid var(--borde); background: repeating-linear-gradient(0deg, #fff 0 9px, #eee6ea 9px 10px); display: grid; place-items: center; font-size: 11px; color: var(--suave); text-align: center; }
.pedido h3 { margin: 0; font: 900 24px/1.05 var(--cartel); text-transform: uppercase; }
.pedido .meta { color: var(--suave); font-size: 13px; margin: 3px 0 10px; }
.pedido .chips, #resultado .chips { justify-content: flex-start; }
.pedido .chips span, #resultado .chips span { min-width: 42px; height: 32px; font-size: 16px; }
.pedido .acciones { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rechazo { margin-top: 12px; }
.rechazo textarea { min-height: 70px; resize: vertical; }
.rechazo .acciones { margin-top: 8px; display: flex; gap: 8px; }
.vacio { text-align: center; color: var(--suave); padding: 40px 16px; }
.grilla.panel { padding-bottom: 20px; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.grilla.panel button { height: 40px; font-size: 17px; }
.grilla.panel button.reservado { background: var(--reflejo), #ff9f1c; border-color: #e07b00; color: #3d1f00; }
.grilla.panel button.revision { background: var(--reflejo), var(--oro); border-color: var(--oro-hondo); color: #3a2700; }
.grilla.panel button.pagado { background: var(--bloqueado); border-color: var(--bloqueado); color: rgba(255,255,255,.6); box-shadow: none; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--borde); }
th { color: var(--suave); font-weight: 700; font-size: 13px; }

/* ── Trébol de la suerte: se confirma el pago ────────── */
.festejo { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(18,4,10,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.festejo-tarjeta {
  position: relative; width: min(360px, 100%); text-align: center; padding: 26px 22px 22px; color: #fff;
  border-radius: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.45);
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--bordo-claro), var(--bordo) 40%, var(--noche) 85%);
}
.trebol { width: 150px; height: 150px; display: block; margin: 0 auto 6px; overflow: visible; filter: drop-shadow(0 0 18px rgba(31,207,116,.35)); }
.trebol .hoja-trebol { transform-box: view-box; transform-origin: 100px 100px; }
.chispas { position: absolute; left: 50%; top: 101px; width: 0; height: 0; pointer-events: none; }
.chispas i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); opacity: 0; box-shadow: 0 0 8px var(--oro); }
.chispas i:nth-child(3n) { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.chispas i:nth-child(3n+1) { background: #fff3b8; width: 6px; height: 6px; }
.festejo h2 { margin: 4px 0 6px; font: 900 48px/.95 var(--cartel); text-transform: uppercase; color: var(--oro); text-shadow: 0 3px 0 var(--oro-sombra), 0 0 24px rgba(255,201,51,.45); }
.festejo p { margin: 0 0 14px; color: #e9d9df; }
.festejo .chips { justify-content: center; margin-bottom: 20px; }

/* ── Celular ────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero { padding: 14px 12px 40px; }
  .luces { margin-bottom: 10px; }
  .spot { height: 150px; }
  .datos-rapidos { font-size: 14px; }
  .cuenta { margin-top: -24px; padding: 10px 10px; }
  .cuenta-cajas { gap: 6px; }
  .cuenta-cajas b { font-size: 30px; }
  .reloj { font-size: 72px; }
}

/* Movimiento reducido: menos y más suave, no cero. Se quita el desplazamiento, queda el fundido. */
@media (prefers-reduced-motion: reduce) {
  .luces { animation: none; }
  .grilla button, .boton, .copiar { transition: background-color 160ms ease, color 160ms ease; }
  .grilla button:active:not(:disabled), .boton:active:not(:disabled) { transform: none; }
  .grilla button.recien::after { animation: aparecer 200ms ease; }
  .barra { transform: none; transition: opacity 200ms ease; }
  .hoja { transition: none; }
  #aviso { transition: none; }
}
@keyframes aparecer { from { opacity: 0; } }

/* Estado de la subida del comprobante (página de la compra). */
#subir-estado:empty { display: none; }
#subir-estado.mal { color: var(--rojo-hondo); font-weight: 700; }

/* Lista del equipo (panel). */
.lista-equipo { list-style: none; margin: 0; padding: 0; }
.lista-equipo li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lista-equipo li:last-child { border-bottom: 0; }
.lista-equipo .baja { color: var(--suave); }

/* Nombre y apellido lado a lado; en celulares muy angostos, uno abajo del otro. */
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 340px) { .dos-campos { grid-template-columns: 1fr; } }
.aviso-datos { font-size: 12.5px; margin-top: 10px; }
.aviso-datos a { color: inherit; }

/* Campo que la base marcó como mal. */
input[aria-invalid=true] { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(217,15,51,.15); }