/* SUPER SORTEO — dirección «Casino» con máquina de lotería, en azul y blanco (30/09).
   El impacto vive arriba: una cabecera azul marino con reflector sobre el
   premio, lamparitas y letras de cartel. Todo lo demás es blanco y limpio.
   Los nombres de los tokens (--bordo, --oro, --verde) quedaron de la paleta
   anterior: hoy son azul rey, celeste y azul. El rojo es sólo para errores.
   Letra: San Francisco Pro en Apple; en el resto, Inter (la más parecida). */
:root {
  --noche: #06163a;
  --bordo: #0b3a8c;
  --bordo-claro: #1553b8;
  --oro: #4db2ff;
  --oro-hondo: #1a8cff;
  --oro-sombra: #0a4c99;
  --azul: #1a73e0;
  --rojo: #d90f33;
  --rojo-hondo: #a8001c;
  --verde: #2b8cff;
  --verde-borde: #1a6fe0;
  --verde-tinta: #062a5e;
  --verde-texto: #1260c9;
  --bloqueado: #13203a;
  --ocupado: #e7ecf3;
  --ocupado-borde: #d3dbe7;
  --ocupado-texto: #95a2b5;
  --fondo: #ffffff;
  --papel: #f3f6fb;
  --texto: #0f1a2b;
  --suave: #5b6a80;
  --borde: rgba(15,26,43,.12);
  --radio: 18px;
  --cartel: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --sans: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", system-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, #dcefff 0%, #4db2ff 45%, #1a8cff 100%);
  --sombra: 0 1px 2px rgba(15,26,43,.06), 0 10px 28px rgba(15,26,43,.08);
  /* Guilloché: las líneas finas de los billetes de lotería, en dorado muy suave. */
  --guilloche:
    repeating-radial-gradient(circle at 0 100%, rgba(26,140,255,0) 0 9px, rgba(26,140,255,.16) 9px 10px),
    repeating-radial-gradient(circle at 100% 100%, rgba(21,83,184,0) 0 9px, rgba(21,83,184,.08) 9px 10px);
  /* 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);
  --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");
  /* Cuántas cifras tiene el número: la letra de las bolillas se achica para
     seguir entrando en el disco blanco. */
  --ajuste-cifras: 1;
  color-scheme: light;
}
/* Lo fija quien lleve `data-cifras`: el <body> con el número más alto del
   sorteo de ahora (lo pone grilla.js), y cada tarjeta de la vitrina con el
   suyo, porque cada sorteo anterior tuvo su cantidad de números. */
[data-cifras] { --ajuste-cifras: 1; }
[data-cifras="4"] { --ajuste-cifras: .84; }
[data-cifras="5"] { --ajuste-cifras: .70; }

* { 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; -webkit-font-smoothing: antialiased; }
.num, .grilla button, .reloj, .contador b, .chips span, .cuenta b { font-variant-numeric: tabular-nums; }
a { color: #1553b8; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--azul); 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; }

.marca {
  margin: 0 auto; font: 900 clamp(34px, 9vw, 54px)/.95 var(--cartel); letter-spacing: -0.02em; text-transform: uppercase;
  color: #fff; text-shadow: 0 3px 0 var(--bordo), 0 0 28px rgba(77,178,255,.6);
}
.datos-rapidos { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin: 10px auto 0; padding: 0; list-style: none; color: #d6e2f3; font-size: 15px; }
.datos-rapidos b { color: var(--oro); font-weight: 700; }

/* Participantes: la rayita dorada que se llena, con rayas que corren como un tubo de luz. */
.vendidos { max-width: 420px; margin-top: 18px; padding: 12px 14px 10px; border-radius: 16px; background: rgba(0,0,0,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(77,178,255,.25); }
.vendidos p { margin: 0; font-size: 15px; font-weight: 600; color: #e7eef8; }
.vendidos p b { color: var(--oro); font-weight: 800; font-size: 18px; }
.vendidos-barra { position: relative; height: 12px; margin: 9px 0 7px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.1); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.vendidos-barra i {
  display: block; height: 100%; border-radius: inherit;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 8px, rgba(255,255,255,0) 8px 16px), var(--lamina);
  background-size: 34px 100%, auto;
  box-shadow: 0 0 14px rgba(77,178,255,.6);
  transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease-out);
  animation: tubo 1.2s linear infinite;
}
@keyframes tubo { to { background-position: 34px 0, 0 0; } }
.vendidos p.vendidos-numeros { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; color: #b9c9e0; }
.vendidos p.vendidos-numeros b { font-size: 13px; color: #fff; }
#vendidos-porcentaje { color: var(--oro); font-weight: 800; }

/* ── Grilla ─────────────────────────────────────────── */
.titulo-grilla { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 6px 0 8px; }
.titulo-grilla h2 { margin: 0; font: 800 clamp(24px, 6vw, 30px)/1.05 var(--cartel); }
.titulo-grilla span { font-size: 14px; color: var(--suave); white-space: nowrap; }
.titulo-grilla b { color: var(--texto); }
/* Queda pegado arriba mientras se recorre la grilla: buscar o elegir al azar sin volver a subir. */
.buscador {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; margin: 0 -16px 10px; padding: 10px 16px 12px;
  background: linear-gradient(180deg, #fff 82%, rgba(255,255,255,0));
}
.buscador input { flex: 1; min-width: 0; min-height: 48px; font: 700 18px var(--sans); font-variant-numeric: tabular-nums; }
.buscador input::placeholder { font: 500 16px var(--sans); }
.buscador .boton { min-height: 48px; padding: 0 20px; }
/* Elegí por mí: botón verde de la suerte con un trébol de cuatro hojas que gira mientras busca. */
.boton.azar {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap;
  color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 50%), linear-gradient(180deg, #3d97ff, #1770dc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 #0b4fa3, 0 8px 18px rgba(23,112,220,.35);
}
.trebol-boton { width: 26px; height: 26px; flex: none; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.trebol-boton g { transform-origin: 100px 100px; }
.boton.azar.buscando .trebol-boton { animation: trebol-gira 700ms linear infinite; }
@keyframes trebol-gira { to { transform: rotate(360deg); } }
.boton.azar:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #0b4fa3, 0 4px 10px rgba(23,112,220,.3); }
.boton.azar:disabled { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .boton.azar:hover:not(:disabled) { filter: brightness(1.06); } }
.buscar svg { display: none; width: 22px; height: 22px; }
/* Celular: todo en una fila; «Buscar» pasa a ser una lupa (el teclado también busca con «Ir»). */
@media (max-width: 600px) {
  .buscador input { flex-basis: 0; padding-inline: 12px; }
  .buscador .boton.buscar { width: 48px; padding: 0; display: grid; place-items: center; }
  .buscar svg { display: block; }
  .buscar span { display: none; }
  .buscador .azar { padding: 0 14px; font-size: 15px; gap: 6px; }
  .buscador .azar .trebol-boton { width: 22px; height: 22px; }
}

.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px 7px; padding-bottom: 150px; /* lugar para la barra de abajo */ }
/* Con vitrina, el lugar de la barra lo guarda ella, al final de todo. */
body.con-vitrina .grilla { padding-bottom: 26px; }
/* Bolilla: esfera de color con el disco blanco del número y un brillo arriba a la izquierda. */
.grilla button {
  --bola-claro: #d6e9ff; --bola: var(--verde); --bola-hondo: #0f5fc0;
  position: relative; aspect-ratio: 1; width: 100%; max-width: 64px; justify-self: center; padding: 0; border: 0; border-radius: 50%;
  font: 800 calc(15px * var(--ajuste-cifras))/1 var(--sans); letter-spacing: -0.01em; color: var(--texto);
  background:
    radial-gradient(circle closest-side at 34% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%) 0 0 / 60% 60% no-repeat,
    radial-gradient(circle closest-side, #fff 0 60%, rgba(0,0,0,.08) 61%, rgba(255,255,255,0) 64%),
    radial-gradient(circle at 36% 30%, var(--bola-claro), var(--bola) 45%, var(--bola-hondo) 100%);
  box-shadow: inset -3px -5px 8px rgba(0,0,0,.22), 0 3px 6px rgba(15,26,43,.18);
  /* Se toca decenas de veces: respuesta rápida y sutil. */
  transition: transform 140ms var(--ease-out), box-shadow 160ms ease;
}
.grilla button:active:not(:disabled) { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) {
  .grilla button:hover:not(:disabled) { transform: translateY(-2px) scale(1.05); box-shadow: inset -3px -5px 8px rgba(0,0,0,.22), 0 7px 12px rgba(15,26,43,.22); }
}
.grilla button.elegido {
  --bola-claro: #eaf5ff; --bola: var(--oro); --bola-hondo: #1777d6;
  box-shadow: inset -3px -5px 8px rgba(0,0,0,.18), 0 0 0 3px rgba(77,178,255,.45), 0 6px 14px rgba(26,140,255,.45);
}
/* Tilde en un círculo oscuro, arriba a la derecha de la bolilla elegida */
.grilla button.elegido::before, .grilla button.elegido::after { content: ""; position: absolute; top: -2px; right: -2px; width: 19px; height: 19px; border-radius: 50%; }
.grilla button.elegido::before { background: var(--noche); box-shadow: 0 0 0 2px #fff; }
.grilla button.elegido::after { background: var(--oro); -webkit-mask: var(--tilde) center / 13px no-repeat; mask: var(--tilde) center / 13px no-repeat; }
/* Ocupada: bolilla gris clara y chata, sin brillo. Bloqueada nomás. */
.grilla button.ocupado {
  color: var(--ocupado-texto); background: radial-gradient(circle closest-side, #f3f6fb 0 60%, rgba(255,255,255,0) 61%), var(--ocupado);
  box-shadow: inset 0 0 0 1px var(--ocupado-borde);
}
/* Cuando alguien la toma en vivo, se apaga de verde a gris: muestra que cambió. */
.grilla button.recien { animation: apagarse 600ms ease-out; }
@keyframes apagarse { from { opacity: .4; transform: scale(.9); } }
/* Bolilla encontrada con el buscador: un pulso para ubicarla. */
.grilla button.encontrado { animation: encontrado 900ms var(--ease-out); }
@keyframes encontrado { from { box-shadow: 0 0 0 0 rgba(26,140,255,.6); } to { box-shadow: 0 0 0 14px rgba(26,140,255,0); } }

/* Ruleta de «Elegí por mí»: los libres titilan en dorado y el elegido cae con un pulso dorado. */
.grilla button.girando { --bola-claro: #eaf5ff; --bola: var(--oro); --bola-hondo: #1777d6; transition: none; }
.grilla button.suerte { animation: suerte 1000ms var(--ease-out); }
@keyframes suerte {
  0% { transform: scale(1.18); box-shadow: 0 0 0 0 rgba(77,178,255,.9); }
  100% { transform: none; box-shadow: 0 0 0 18px rgba(77,178,255,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(6,22,58,.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: 800 20px/1.2 var(--cartel); letter-spacing: -0.01em; }
.barra .resumen small { color: #b9c9e0; font-size: 13px; display: flex; align-items: center; gap: 5px; margin-top: 5px; overflow: hidden; white-space: nowrap; }
/* Bolilla chica: el disco blanco tiene que dar para las cifras del número más
   alto, así que el aro dorado es más fino que el de la grilla. */
.bolita { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 800 calc(11px * var(--ajuste-cifras))/1 var(--sans); letter-spacing: -0.02em; color: var(--texto); background: radial-gradient(circle closest-side, #fff 0 77%, rgba(0,0,0,.07) 78%, rgba(255,255,255,0) 81%), radial-gradient(circle at 36% 30%, #eaf5ff, var(--oro) 45%, #1777d6); box-shadow: inset -1px -2px 4px rgba(0,0,0,.18); }

/* ── Vitrina de ganadores ────────────────────────────
   Cierra la página con la misma banda oscura de la cabecera, pero la luz viene
   de abajo. Las tarjetas van en una pista que se arrastra con el dedo: el
   scroll-snap lo hace el navegador, el JS sólo pone flechas, puntos y el pase
   solo. Sin foto, la tarjeta muestra la bolilla grande sobre el guilloché. */
.vitrina {
  margin-top: 30px; padding: 22px 0 calc(150px + env(safe-area-inset-bottom));
  color: #fff; text-align: center;
  background: radial-gradient(ellipse 95% 75% at 50% 100%, var(--bordo-claro) 0%, var(--bordo) 42%, var(--noche) 88%);
}
.vitrina h2 {
  margin: 0 16px; font: 900 clamp(23px, 6.2vw, 34px)/1.05 var(--cartel);
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--oro);
  text-shadow: 0 2px 0 var(--oro-sombra), 0 0 24px rgba(77,178,255,.35);
}
.vitrina-bajada { margin: 7px 16px 16px; font-size: 14px; font-weight: 600; color: #d6e2f3; }

/* La pista: una fila que se corre. La barra de scroll no se muestra, se arrastra. */
.vitrina-caja { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.vitrina-pista {
  display: flex; gap: 14px; padding: 6px 0 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.vitrina-pista::-webkit-scrollbar { display: none; }

.ganador {
  scroll-snap-align: start; flex: 0 0 min(78%, 280px); text-align: left;
  border-radius: var(--radio); overflow: hidden; background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(77,178,255,.3), 0 14px 30px rgba(0,0,0,.4);
}
.ganador-foto { position: relative; aspect-ratio: 1; background: #0a2456; }
.ganador-foto img, .ganador-foto video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* La bolilla del número ganador, como un sello en la esquina de la foto. */
.ganador-foto .bolita {
  position: absolute; top: 10px; right: 10px; width: 46px; height: 46px;
  font-size: calc(16px * var(--ajuste-cifras));
  box-shadow: inset -1px -2px 4px rgba(0,0,0,.18), 0 0 0 3px rgba(6,22,58,.55), 0 4px 10px rgba(0,0,0,.45);
}
/* Sin foto: la bolilla pasa a ser el dibujo, sobre las líneas del billete. */
.ganador-foto.sin-foto { display: grid; place-items: center; background-image: var(--guilloche); }
.ganador-foto.sin-foto .bolita {
  position: static; width: 96px; height: 96px; font-size: calc(34px * var(--ajuste-cifras));
  box-shadow: inset -2px -4px 10px rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.45);
}
.ganador-datos { display: flex; flex-direction: column; padding: 13px 14px 15px; }
.ganador-datos b { font: 800 17px/1.25 var(--cartel); letter-spacing: -0.01em; }
.ganador-premio { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--oro); }
/* Cuando el premio es el título (ganador sin nombre), toma su tamaño. */
.ganador-datos b.ganador-premio { margin-top: 0; font: 800 17px/1.25 var(--cartel); letter-spacing: -0.01em; }
.ganador-datos time { margin-top: 5px; font-size: 12.5px; color: #b9c9e0; }
.ganador-datos time::first-letter { text-transform: uppercase; }

/* Flechas: montadas sobre los bordes de la pista, para no comerle ancho. */
.vitrina-flecha {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; color: #072257; background: var(--lamina);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 14px rgba(0,0,0,.45);
  transition: transform 120ms var(--ease-out), filter 160ms ease;
}
.vitrina-flecha[data-hacia="-1"] { left: 6px; }
.vitrina-flecha[data-hacia="1"] { right: 6px; }
.vitrina-flecha svg { width: 22px; height: 22px; }
.vitrina-flecha:active { transform: translateY(-50%) scale(.92); }
@media (hover: hover) and (pointer: fine) { .vitrina-flecha:hover { filter: brightness(1.07); } }

/* Puntos: chicos a la vista, pero con 26px de área para el dedo. */
.vitrina-puntos { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.vitrina-punto { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; }
.vitrina-punto::before {
  content: ""; width: 9px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.34);
  transition: width 220ms var(--ease-out), background-color 220ms ease;
}
.vitrina-punto[aria-current]::before { width: 22px; background: var(--oro); box-shadow: 0 0 10px rgba(77,178,255,.6); }

@media (min-width: 1024px) {
  .ganador { flex-basis: 262px; }
  .vitrina-flecha { width: 46px; height: 46px; }
  .vitrina-flecha[data-hacia="-1"] { left: -8px; }
  .vitrina-flecha[data-hacia="1"] { right: -8px; }
}

/* ── Botones ────────────────────────────────────────── */
.boton {
  border: 0; border-radius: 12px; padding: 12px 22px; min-height: 48px;
  font: 800 17px/1 var(--sans);
  color: #072257; background: var(--lamina);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 14px rgba(26,140,255,.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: 15px; }

/* ── Hoja del formulario ────────────────────────────── */
.velo { position: fixed; inset: 0; background: rgba(6,22,58,.55); z-index: 20; opacity: 0; pointer-events: none; transition: opacity 250ms ease-out; }
.velo.abierto { opacity: 1; pointer-events: auto; }
/* Va en el medio de la pantalla, en celular y en computadora. Si no entra a lo
   alto (pantalla baja o teclado abierto), se achica y se desliza adentro: los
   botones de abajo nunca quedan fuera de vista. */
.hoja {
  position: fixed; left: 50%; top: 50%; z-index: 21; background: #fff;
  width: min(560px, calc(100% - 28px));
  max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 24px; box-shadow: 0 24px 60px rgba(6,22,58,.35);
  padding: 22px 18px;
  transform: translate(-50%, -50%) scale(.96); opacity: 0; visibility: hidden;
  transition: transform 280ms var(--ease-drawer), opacity 200ms ease-out, visibility 0s linear 280ms;
}
.hoja.abierta { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; transition-delay: 0s; }
.hoja h2 { margin: 0 0 4px; font: 800 30px/1 var(--cartel); letter-spacing: -0.02em; }
.hoja .elegidos { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0 4px; }
.hoja .elegidos b { margin-left: 6px; font-size: 15px; }
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=date], 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: #728096; }
input:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(26,140,255,.2); background: #fff; }
.ayuda { font-size: 13px; color: var(--suave); margin: 6px 0 0; }
/* Los botones quedan pegados al pie de la ventana: si el formulario no entra
   a lo alto y hay que deslizar, «Reservar» sigue estando a la vista. */
.hoja .acciones {
  display: flex; gap: 10px; position: sticky; bottom: -22px; z-index: 1;
  margin: 20px 0 -22px; padding: 12px 0 22px; background: #fff;
  box-shadow: 0 -12px 16px -12px rgba(6,22,58,.18);
}
.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; width: max-content; max-width: calc(100% - 32px);
  box-shadow: 0 12px 30px rgba(6,22,58,.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 { position: relative; }
.barra-marca::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 8px; background: radial-gradient(circle, #dcefff 2px, rgba(77,178,255,.3) 3px, transparent 3.6px) 50% 50% / 14px 8px repeat-x; opacity: .8; }
/* El nombre del sorteo puede ser largo: se achica antes que partirse en dos
   renglones, y «Tu compra» nunca se corta. */
.barra-marca .marca { font-size: clamp(19px, 5.2vw, 26px); text-shadow: 0 2px 0 var(--oro-sombra); }
.barra-marca small { color: #b9c9e0; font-size: 13px; white-space: nowrap; }

/* ── Boleto: tarjeta con troquel ─────────────────────
   Dos medias lunas a los costados y una línea punteada, como el talón de un
   billete de lotería. Las medias lunas son del color del fondo de la página;
   la tarjeta recorta lo que sobresale. */
.boleto { position: relative; overflow: hidden; }

/* ── Compra ─────────────────────────────────────────── */
.tarjeta.boleto-compra { padding: 0; }
.boleto-cara { padding: 18px 18px 20px; background: var(--guilloche), #f8fbff; }
.boleto-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.boleto-cab h2 { margin: 0; }
.serie { font: 700 12px/1 var(--sans); letter-spacing: .08em; color: var(--suave); font-variant-numeric: tabular-nums; }
.boleto-compra .chips { justify-content: flex-start; gap: 8px; }
.boleto-compra .chips span { width: 54px; height: 54px; font-size: calc(16px * var(--ajuste-cifras)); }
.boleto-talon { position: relative; padding: 6px 18px 10px; border-top: 2px dashed rgba(15,26,43,.16); }
.boleto-talon::before, .boleto-talon::after {
  content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--fondo); box-shadow: inset 0 0 0 1px var(--borde);
}
.boleto-talon::before { left: -13px; }
.boleto-talon::after { right: -13px; }

.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: 800 24px/1.1 var(--cartel); letter-spacing: -0.02em; 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; }
/* El CBU es largo: se parte en dos renglones si hace falta, pero el botón
   «Copiar» se queda al lado y no se cae abajo. */
.fila b { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  flex: 1 1 auto; min-width: 0; text-align: right; font-weight: 700; }
.fila b > span { word-break: break-all; }
.fila b .copiar { margin-left: 0; flex: none; }
#cbu { font-size: 13px; letter-spacing: -.01em; }   /* 22 cifras: así entran en un renglón */
.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(--azul); } }

.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: 800 32px/1 var(--cartel); letter-spacing: -0.02em; }
.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 { color: #fff; background: radial-gradient(ellipse 80% 100% at 50% 0%, #0a2456, var(--noche) 70%); border: 3px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 3px var(--oro-hondo), 0 0 0 5px var(--oro-sombra), 0 18px 36px rgba(6,22,58,.3); }
.estado.reservada p, .estado.reservada .estado-titulo { color: #b9c9e0; }
.estado.revision { border-color: var(--oro); background: #f2f8ff; }
.estado.revision h1 { color: var(--oro-sombra); }
.estado.pagada { border-color: #93c5fd; background: #eff6ff; }
.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(77,178,255,.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 {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font: 800 calc(14px * var(--ajuste-cifras))/1 var(--sans); color: var(--texto);
  background: radial-gradient(circle closest-side, #fff 0 60%, rgba(255,255,255,0) 63%), radial-gradient(circle at 36% 30%, #eaf5ff, var(--oro) 45%, #1777d6);
  box-shadow: inset -2px -4px 6px rgba(0,0,0,.18), 0 2px 5px rgba(15,26,43,.18);
}
.subir { position: relative; display: block; border: 2px dashed #c5d3e6; 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(--azul); } }
.subir:focus-within { outline: 3px solid var(--azul); outline-offset: 3px; }
.subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* El archivo elegido y el botón que lo manda: elegirlo no manda nada. */
.comprobante-elegido { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--verde-texto); }
.comprobante-elegido::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--verde-texto); -webkit-mask: var(--tilde) center / contain no-repeat; mask: var(--tilde) center / contain no-repeat; }
#confirmar-pago { margin-top: 12px; }
.progreso { height: 6px; background: #e5edf7; border-radius: 99px; overflow: hidden; margin-top: 12px; }
.progreso i { display: block; height: 100%; width: 100%; background: var(--azul); 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: 800 30px/1 var(--cartel); letter-spacing: -0.02em; 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: #b9c9e0; }
@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(--azul); }
.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, #e5edf7 9px 10px); display: grid; place-items: center; font-size: 11px; color: var(--suave); text-align: center; }
.pedido h3 { margin: 0; font: 800 24px/1.05 var(--cartel); letter-spacing: -0.02em; }
.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 { width: 38px; height: 38px; font-size: calc(12px * var(--ajuste-cifras)); }
.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 { max-width: 52px; font-size: calc(13px * var(--ajuste-cifras)); }
.grilla.panel button.reservado { --bola-claro: #ffe0b0; --bola: #ff9f1c; --bola-hondo: #c46a00; }
.grilla.panel button.revision { --bola-claro: #eaf5ff; --bola: var(--oro); --bola-hondo: #1777d6; }
.grilla.panel button.pagado { --bola-claro: #5b6a80; --bola: #2c3a52; --bola-hondo: var(--bloqueado); }
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(6,22,58,.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(43,140,255,.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: #dcefff; width: 6px; height: 6px; }
.festejo h2 { margin: 4px 0 6px; font: 800 48px/.95 var(--cartel); letter-spacing: -0.02em; color: var(--oro); text-shadow: 0 3px 0 var(--oro-sombra), 0 0 24px rgba(77,178,255,.45); }
.festejo p { margin: 0 0 14px; color: #d6e2f3; }
.festejo .chips { justify-content: center; margin-bottom: 20px; }

/* ── Celular ────────────────────────────────────────── */
@media (max-width: 600px) {
  .datos-rapidos { font-size: 14px; }
  .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) {
  .vendidos-barra i { animation: none; transition: none; }
  .boton.azar.buscando .trebol-boton { animation: none; }
  .grilla button.suerte { animation: aparecer 200ms ease; }
  .grilla button, .boton, .copiar { transition: background-color 160ms ease, color 160ms ease; }
  .grilla button:active:not(:disabled), .boton:active:not(:disabled), .grilla button:hover:not(:disabled) { transform: none; }
  .barra { transform: none; transition: opacity 200ms ease; }
  .hoja { transition: none; }
  #aviso { transition: none; }
  .vitrina-punto::before { transition: none; }
  .vitrina-flecha { transition: none; }
}
@keyframes aparecer { from { opacity: 0; } }

/* ── Tamaños de pantalla ────────────────────────────────
   Celular: 6 bolillas por fila (la grilla de 600 no se hace eterna).
   Computadora: la página usa el ancho; la cuenta queda centrada y angosta. */
@media (max-width: 600px) {
  .grilla { grid-template-columns: repeat(6, 1fr); gap: 7px 6px; }
  .grilla button { font-size: calc(13px * var(--ajuste-cifras)); }
  .grilla button.elegido::before, .grilla button.elegido::after { width: 17px; height: 17px; top: -3px; right: -3px; }
  .grilla button.elegido::after { -webkit-mask-size: 11px; mask-size: 11px; }
  .titulo-grilla { flex-wrap: wrap; row-gap: 2px; }
}
@media (max-width: 359px) {
  .grilla { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1024px) {
  .envoltura { max-width: 1120px; }
  .titulo-grilla { margin-top: 12px; }
  .buscador input { flex: 0 1 420px; }
  .buscador .azar { margin-left: auto; }
  .grilla { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px 8px; }
  .barra .envoltura { max-width: 1120px; }
}
/* Compra: una columna en celular; en computadora el boleto a la izquierda y el pago a la derecha. */
.compra { max-width: 560px; }
@media (min-width: 900px) {
  .compra { max-width: 1000px; }
  .compra-columnas:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
  .compra-col > .estado:first-child, .compra-col > .tarjeta:first-child { margin-top: 18px; }
  .compra-col .estado { margin-top: 18px; }
}

/* ── Lo que sólo existe en las páginas de verdad ─────── */

/* Si la grilla no se pudo cargar, el mensaje ocupa todo el ancho y no una celda. */
.error-grilla { grid-column: 1 / -1; text-align: center; color: var(--suave); padding: 40px 16px; margin: 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); }
.lista-equipo li { flex-wrap: wrap; }
.foto-premio-vista { display: block; max-width: 100%; max-height: 200px; object-fit: contain; margin: 0 auto 12px; border-radius: 12px; }
.equipo-dato { display: block; color: var(--suave); font-size: 12.5px; overflow-wrap: anywhere; }
.equipo-botones { display: flex; gap: 8px; flex-wrap: wrap; }
/* La contraseña nueva se escribe en el mismo renglón, abajo, a lo ancho. */
.equipo-clave { flex-basis: 100%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.equipo-clave input { flex: 1; min-width: 160px; margin: 0; }

/* 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); }

/* ── Tu base de gente (/gente/) ──────────────────────
   Una ficha por persona, no una tabla: así se lee igual en el celular. */
.contadores.tres { grid-template-columns: repeat(3, 1fr); }
.contadores.tres .contador:last-child { grid-column: auto; }
.contadores.tres .contador b { font-size: clamp(22px, 7vw, 30px); }

.filtros { display: grid; gap: 12px; }
.filtros input[type=search] { margin: 0; }
.interruptor { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.interruptor input { width: 20px; height: 20px; margin: 0; accent-color: var(--azul); }

.orden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.orden > span { font-size: 13px; font-weight: 700; color: var(--suave); margin-right: 2px; }
.orden button { background: #fff; border: 1px solid var(--borde); border-radius: 99px; padding: 6px 13px; font: 600 13.5px var(--sans); color: var(--suave); }
.orden button[aria-pressed=true] { background: var(--noche); border-color: var(--noche); color: var(--oro); font-weight: 700; }

.lista-gente { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ficha-persona { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 13px 15px; box-shadow: var(--sombra); }
.ficha-quien { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ficha-quien b { font: 700 17px/1.25 var(--sans); }
.marquita { flex: none; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.marquita.pago { color: var(--verde-tinta); background: rgba(43,140,255,.16); }
.marquita.debe { color: var(--suave); background: var(--papel); }
.marquita.tiene-cuenta { color: #0b3f85; background: rgba(77,178,255,.22); }
.ficha-datos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; font-size: 14px; font-variant-numeric: tabular-nums; }
.ficha-datos a { color: var(--texto); text-decoration-color: var(--borde); text-underline-offset: 3px; word-break: break-all; }
.ficha-datos .sin-dato { color: var(--ocupado-texto); }
.ficha-pie { margin-top: 6px; font-size: 12.5px; color: var(--suave); }

/* ── Cuentas de compradores ─────────────────────────────────────────── */
/* En la hoja: los campos van en un fieldset sin marco (se deshabilita entero con sesión). */
.sin-marco { border: 0; padding: 0; margin: 0; min-width: 0; }
.con-cuenta { margin: 12px 0; line-height: 1.5; }
.casilla { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 14px 0 4px; }
.casilla input { width: 18px; height: 18px; margin: 0; }
.mis-compras { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mis-compras li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.05); }

/* ── Packs de stickers (29/09) ──────────────────────────────────────── */
.hoja .elegidos .pack-elegido { padding: 6px 12px; border-radius: 999px; background: var(--papel); font-weight: 700; }

/* La compra de un pack: el pack y, cuando está pagada, el botón de los stickers. */
.boleto-pack { margin: 4px 0 0; font: 800 22px/1.2 var(--cartel); }
.boleto-pack small { display: block; margin-top: 4px; font: 600 14px/1.3 var(--sans); color: var(--suave); }
.bajar-stickers { display: block; text-align: center; text-decoration: none; margin-top: 14px; }

/* Las bases: texto largo, con los saltos de línea que puso el organizador. */
.bases h1 { margin: 0 0 12px; font: 800 26px/1.1 var(--cartel); }
.bases-texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }

/* Panel: la solapa Packs. */
.pack-panel { display: grid; gap: 4px; }
.pack-panel .dos-campos { margin-top: 0; }
.pack-panel .fila-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pack-panel .estado-pack { font-size: 13px; color: var(--suave); }
.pack-panel.inactivo { opacity: .65; }

/* ── Ruleta de premios ──────────────────────────────── */
/* El cartel de entrada: la rueda a la izquierda sobre papel con guilloché, el
   texto a la derecha. En el celular, uno arriba del otro. */
.ruleta {
  width: min(960px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 28px; overflow: auto; overscroll-behavior: contain;
  color: var(--texto); background: #fff; box-shadow: 0 30px 80px rgba(6,22,58,.45);
}
.ruleta[open] { display: grid; grid-template-columns: 1fr; animation: ruleta-entra 320ms var(--ease-drawer); }
.ruleta::backdrop { background: rgba(6,22,58,.62); animation: ruleta-velo 250ms ease-out; }
@keyframes ruleta-entra { from { opacity: 0; transform: scale(.95); } }
@keyframes ruleta-velo { from { opacity: 0; } }
.ruleta-cerrar {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  color: var(--texto); background: rgba(15,26,43,.07);
}
.ruleta-cerrar svg { width: 20px; height: 20px; }
.ruleta-lado {
  display: grid; justify-items: center; align-content: center; gap: 10px;
  padding: 26px 18px 18px; background: var(--guilloche), var(--papel);
}
.ruleta-marca { margin: 0; font: 800 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bordo-claro); }
.rueda { width: min(260px, 70vw); aspect-ratio: 224 / 230; filter: drop-shadow(0 14px 22px rgba(6,22,58,.25)); }
.rueda svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rueda-disco { transition: transform 5.2s cubic-bezier(.12, .72, .12, 1); }
.rueda-grande { font: 900 17px/1 var(--cartel); letter-spacing: -0.02em; }
.rueda-chico { font: 800 5.6px/1 var(--sans); letter-spacing: .06em; }
.rueda-centro { font: 900 11.5px/1 var(--cartel); fill: var(--bordo); letter-spacing: -0.01em; }
.rueda-luces circle { fill: #dcefff; }
.rueda-luces circle.par { fill: var(--oro); }
.ruleta:not([data-girando]) .rueda-luces circle { animation: lampara 1.4s steps(1) infinite; }
.ruleta:not([data-girando]) .rueda-luces circle.par { animation-delay: .7s; }
@keyframes lampara { 50% { fill: #1553b8; } }
.rueda-gira path.ganadora { stroke: #d90f33; stroke-width: 3; }
.ruleta-texto { position: relative; display: grid; align-content: center; padding: 22px 20px 24px; }
.ruleta-bajada { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--verde-texto); }
.ruleta h2 { margin: 0 0 10px; font: 800 clamp(32px, 8vw, 46px)/1 var(--cartel); letter-spacing: -0.03em; text-wrap: balance; }
.ruleta h2 em { font-style: normal; color: var(--azul); }
.ruleta-parrafo { margin: 0 0 18px; color: var(--suave); font-size: 16px; }
.ruleta-boton { min-height: 56px; font-size: 17px; }
.ruleta-error { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--rojo-hondo); }
.ruleta-error:empty { display: none; }
.ruleta-ayuda { text-align: center; margin-top: 12px; }
@media (min-width: 760px) {
  .ruleta[open] { grid-template-columns: 1fr 1fr; }
  .ruleta-lado { padding: 36px 24px; }
  .rueda { width: min(360px, 100%); }
  .ruleta-texto { padding: 48px 40px; }
}
/* «¡GANASTE!»: la rueda se va y queda una tarjeta angosta, centrada, con
   borde verde. El verde es el de «pagado»: acá también es buena noticia. */
.ruleta[data-fase=ganaste] {
  width: min(600px, calc(100% - 32px)); border: 2px solid var(--verde);
  box-shadow: 0 0 0 6px rgba(43,140,255,.14), 0 30px 80px rgba(6,22,58,.45);
}
.ruleta[open][data-fase=ganaste] { grid-template-columns: 1fr; }
.ruleta[data-fase=ganaste] .ruleta-lado { display: none; }
.ruleta[data-fase=ganaste] .ruleta-texto { padding: 36px 24px 22px; text-align: center; }
.ruleta-ganaste { display: grid; justify-items: center; animation: ganaste-entra 380ms var(--ease-out); }
@keyframes ganaste-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.ganaste-copa {
  position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 16px;
  border-radius: 20px; color: var(--verde-tinta);
  background: linear-gradient(180deg, #d6e9ff 0%, #8fc3ff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px rgba(43,140,255,.35);
}
.ganaste-copa svg { width: 38px; height: 38px; }
.ganaste-copa .ganaste-brillo { position: absolute; top: -10px; right: -12px; width: 26px; height: 26px; color: var(--verde-texto); }
.ruleta .ruleta-ganaste h2 { margin: 0 0 12px; font: 900 clamp(38px, 10vw, 52px)/1 var(--cartel); letter-spacing: -0.03em; }
.ganaste-reloj {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 5px 10px;
  border-radius: 8px; font-size: 15px; color: var(--verde-tinta); background: #e6f1ff;
  font-variant-numeric: tabular-nums;
}
.ganaste-reloj svg { width: 16px; height: 16px; }
.ganaste-premio { margin: 0 0 10px; font: 800 clamp(28px, 7.5vw, 38px)/1.1 var(--cartel); letter-spacing: -0.02em; color: var(--verde-texto); text-wrap: balance; }
.ruleta-ganaste .ruleta-parrafo { max-width: 42ch; }
.ganaste-boton { background: var(--texto); color: #fff; border-color: var(--texto); }
.ganaste-letra { max-width: 52ch; margin: 14px 0 0; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .ruleta[open], .ruleta::backdrop { animation: none; }
  .rueda-disco { transition: none; }
  .ruleta .rueda-luces circle { animation: none; }
  .ruleta-ganaste { animation: none; }
}

/* El premio, arriba de los packs mientras dura. */
.premio-ruleta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 14px;
  padding: 12px 14px; border-radius: 12px; font-size: 15px;
  color: var(--verde-tinta); background: #eaf3ff; border: 1.5px solid #9cc5ff;
}
.premio-ruleta[hidden] { display: none; }
.premio-ruleta svg { flex: none; width: 22px; height: 22px; }
.premio-ruleta-reloj { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.premio-en-hoja { flex-basis: 100%; margin-top: 4px; font-weight: 700; color: var(--verde-texto); }
/* En cada pack, lo que le hace el premio: el precio nuevo o las chances de más. */
.pack-premio { display: block; margin-top: 3px; font-size: 13px; font-weight: 800; color: var(--verde-texto); }

/* La oferta única (30/09; abajo de «Participar» desde el 01/10): una tarjeta
   roja para tildar, con su reloj. Entra bajando (.entra) y en los últimos 30
   segundos el reloj late (.apurada). */
.oferta { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px;
  color: #fff; background: var(--rojo); border-radius: 14px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(168,0,28,.2), 0 10px 24px rgba(217,15,51,.25);
  transition: box-shadow 160ms var(--ease-out); }
.oferta[hidden] { display: none; }
.oferta.entra { animation: oferta-entra 420ms var(--ease-out); }
@keyframes oferta-entra { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.oferta input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #fff; cursor: pointer; }
.oferta:has(input:checked) { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rojo), 0 10px 24px rgba(217,15,51,.3); }
.oferta:has(input:focus-visible) { outline: 3px solid var(--noche); outline-offset: 3px; }
.oferta-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.oferta-linea { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; }
.oferta-titulo { font: 800 clamp(16px, 4.2vw, 18px)/1.25 var(--cartel); letter-spacing: -0.01em; }
.oferta-sello { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; }
.oferta-sello i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: oferta-punto 1.4s ease-in-out infinite; }
@keyframes oferta-punto { 50% { opacity: .35; } }
.oferta-reloj { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); }
.oferta-reloj b { display: inline-block; margin-left: 2px; font: 800 17px/1 var(--cartel);
  font-variant-numeric: tabular-nums; color: #fff; }
.oferta.apurada .oferta-reloj b { animation: oferta-late 1s ease-in-out infinite; }
@keyframes oferta-late { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .oferta, .oferta.entra, .oferta-sello i, .oferta.apurada .oferta-reloj b { animation: none; transition: none; }
}
/* En la hoja, la casilla para sumarla: roja, como el cartel. */
.oferta-marca { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px;
  border: 1.5px solid #f3a3b1; border-radius: 12px; background: #fff1f3; color: var(--rojo-hondo);
  font-size: 14.5px; font-weight: 700; cursor: pointer; }
.oferta-marca[hidden] { display: none; }
.oferta-marca input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--rojo); }
/* La barra de abajo (30/09): el pack recomendado, siempre a la vista. Blanca,
   con la foto del premio chiquita, el precio, lo que se ahorra y un botón oscuro.
   Guarda su lugar al final de la página (body.con-barra-pack) para no tapar el pie. */
:root { --alto-barra: 76px; }
body.con-barra-pack { padding-bottom: var(--alto-barra); }
.barra-pack { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: #fff;
  border-top: 1px solid var(--borde); box-shadow: 0 -8px 24px rgba(15,26,43,.08);
  padding-bottom: env(safe-area-inset-bottom); }
.barra-pack[hidden] { display: none; }
.barra-pack-caja { display: flex; align-items: center; gap: 12px; max-width: 800px; margin: 0 auto;
  min-height: var(--alto-barra); padding: 10px 16px; }
.barra-pack-foto { flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden;
  border-radius: 12px; color: #fff; background: linear-gradient(160deg, var(--bordo-claro), var(--noche)); }
.barra-pack-foto img { width: 100%; height: 100%; object-fit: cover; }
.barra-pack-foto svg { width: 36px; height: auto; }
.barra-pack-texto { flex: 1; min-width: 0; margin: 0; }
.barra-pack-texto b { display: block; font: 800 17px/1.2 var(--cartel); letter-spacing: -0.01em; color: var(--texto); }
.barra-pack-texto small { display: block; margin-top: 2px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-pack-texto s { color: var(--suave); }
.barra-pack-texto em { font-style: normal; font-weight: 700; color: var(--verde-texto); }
.barra-pack-boton { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 12px; font: 800 16px/1 var(--sans); color: #fff; background: var(--noche); cursor: pointer;
  transition: transform 160ms var(--ease-out); }
.barra-pack-boton svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.barra-pack-boton:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .barra-pack-boton:hover svg { transform: translateX(3px); } }
@media (max-width: 400px) {
  .barra-pack-caja { gap: 10px; padding: 10px 12px; }
  .barra-pack-foto { width: 42px; height: 42px; }
  .barra-pack-texto b { font-size: 15.5px; }
  .barra-pack-texto small { font-size: 12.5px; }
  .barra-pack-boton { padding: 0 16px; font-size: 15px; }
}

/* WhatsApp flotante, a la derecha, arriba de la barra. */
.wa-flotante { position: fixed; right: 16px; bottom: 16px; z-index: 16; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%; color: #fff; background: #25d366;
  box-shadow: 0 6px 18px rgba(0,0,0,.22); transition: transform 180ms var(--ease-out); }
body.con-barra-pack .wa-flotante { bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + 14px); }
.wa-flotante svg { width: 30px; height: 30px; }
.wa-flotante:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .wa-flotante:hover { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .barra-pack-boton, .barra-pack-boton svg, .wa-flotante { transition: none; } }

/* Los carteles de «se sumó» (02/10), abajo a la izquierda, arriba de la barra.
   En el celular dejan lugar al WhatsApp de la derecha. Entran subiendo y se
   van bajando; con movimiento reducido, sólo aparecen. */
.se-sumo { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 16;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(340px, calc(100vw - 32px - 56px - 12px));
  padding: 12px 10px 12px 12px; border: 1px solid var(--borde); border-radius: 14px; background: #fff; color: var(--texto);
  box-shadow: 0 10px 30px rgba(15,26,43,.16); opacity: 0; transform: translateY(12px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
body.con-barra-pack .se-sumo { bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + 14px); }
.se-sumo[hidden] { display: none; }
.se-sumo.visible { opacity: 1; transform: none; }
.se-sumo-icono { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: #fff; background: var(--azul); }
.se-sumo-icono svg { width: 20px; height: 20px; }
.se-sumo-texto { margin: 0; font-size: 14px; line-height: 1.35; }
.se-sumo-texto small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--suave); }
.se-sumo-cerrar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; align-self: flex-start;
  padding: 0; border: 0; border-radius: 8px; background: none; color: var(--suave); cursor: pointer; }
.se-sumo-cerrar svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .se-sumo-cerrar:hover { background: var(--papel); color: var(--texto); } }
@media (prefers-reduced-motion: reduce) { .se-sumo { transform: none; transition: opacity 120ms linear; } }

/* ── Portada (30/09): ficha de producto, en azul y blanco ──────────
   Fondo gris muy claro y todo en tarjetas blancas. Arriba, la foto del premio
   a la izquierda y la ficha a la derecha: el pack marcado con su precio, la
   lista de packs para elegir, la cuenta regresiva y un solo botón oscuro.
   En el celular, una columna. */
body.portada { background: var(--papel); }
.tope { background: var(--noche); }
.tope-caja { display: flex; align-items: center; gap: 12px;
  max-width: 1080px; margin: 0 auto; padding: 8px 16px; }
.logo { flex: none; display: flex; align-items: center; gap: 8px; border-radius: 6px; text-decoration: none; }
.logo img { display: block; width: auto; height: 40px; }
.logo-texto { font: 900 17px/1 var(--cartel); letter-spacing: 0.04em; color: #fff; white-space: nowrap; }
.logo-texto b { font-weight: 900; color: #e7c379; }
@media (min-width: 900px) { .logo img { height: 46px; } .logo-texto { font-size: 19px; } }
.tope .marca { flex: 1; min-width: 0; margin: 0; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18);
  font: 800 16px/1.2 var(--cartel); letter-spacing: -0.01em; color: #fff; text-transform: none; text-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuenta-enlace { flex: none; padding: 8px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cuenta-enlace:hover { background: rgba(255,255,255,.1); } }
@media (max-width: 380px) { .logo img { height: 34px; } .logo-texto { font-size: 15px; } .tope .marca { font-size: 14px; } }

.portada-caja { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.producto { display: grid; gap: 18px; padding-top: 18px; scroll-margin-top: 12px;
  grid-template-areas: "foto" "avance" "ficha"; }
.producto > .galeria { grid-area: foto; }
.producto > .avance-caja { grid-area: avance; }
.producto > .ficha { grid-area: ficha; }
.galeria {
  display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px;
  color: #fff; background: radial-gradient(ellipse 90% 80% at 50% 10%, var(--bordo-claro) 0%, var(--bordo) 50%, var(--noche) 100%);
  box-shadow: var(--sombra);
}
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria .moto { width: 62%; max-width: 360px; }

.ficha { min-width: 0; }
.etiqueta { display: inline-block; margin: 0 0 10px; padding: 5px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--verde-tinta); background: #e3efff; }
.premio { margin: 0; font: 800 clamp(28px, 6.5vw, 40px)/1.08 var(--cartel); letter-spacing: -0.025em; text-wrap: balance; }
.venta-aviso { width: max-content; margin: 10px 0 0; padding: 5px 12px; border-radius: 99px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rojo-hondo); background: #fff3f5; box-shadow: inset 0 0 0 1px rgba(217,15,51,.35); }
.ficha-bajada { margin: 8px 0 16px; color: var(--suave); font-size: 15px; }
.elegido-chances { margin: 0; font-size: 16px; font-weight: 800; color: var(--verde-texto); }
.elegido-chances:empty, .elegido-precio:has(b:empty) { display: none; }
.elegido-precio { margin: 2px 0 0; display: flex; align-items: baseline; gap: 10px; }
.elegido-precio b { font: 900 clamp(38px, 9vw, 48px)/1 var(--cartel); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.elegido-precio s { font-size: 18px; font-weight: 600; color: var(--suave); }
.ficha-incluye { margin: 6px 0 14px; font-size: 14px; color: var(--suave); }
.ahorro-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px;
  border-radius: 12px; font-size: 14px; color: var(--texto); background: #eef5ff; border: 1.5px solid #b9d6ff; }
.ahorro-aviso svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--azul); }
.ahorro-aviso b { color: var(--verde-texto); }
.agotado-aviso { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff3f5; color: var(--rojo-hondo); font-weight: 700; }

/* La lista de packs: filas para marcar una. */
.elegir-pack { margin: 0; padding: 0; border: 0; min-width: 0; }
.elegir-pack legend { margin-bottom: 10px; padding: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--suave); }
.packs { display: grid; gap: 10px; }
.pack {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  margin: 0; padding: 14px 14px 14px 12px; border: 1.5px solid var(--borde); border-radius: 12px; background: #fff; cursor: pointer;
  font-size: inherit; font-weight: inherit;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
/* El radio de verdad queda para el teclado y el lector; lo que se ve es la marca:
   un círculo vacío, y el elegido lleno de azul con su tilde. */
.pack input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.pack-marca { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #9aabc2; background: #fff;
  transition: background-color 160ms ease, border-color 160ms ease; }
.pack:has(input:checked) { border: 2px solid var(--azul); padding: 13.5px 13.5px 13.5px 11.5px; background: #e8f2ff;
  box-shadow: 0 0 0 4px rgba(26,140,255,.14); }
.pack:has(input:checked) .pack-marca { position: relative; border-color: var(--azul); background: var(--azul); }
.pack:has(input:checked) .pack-marca::after { content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: var(--tilde) center / 14px no-repeat; mask: var(--tilde) center / 14px no-repeat; }
.pack:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pack:not(.agotado):hover { border-color: #8fc3ff; } }
.pack.agotado { cursor: not-allowed; opacity: .6; }
.pack-info { min-width: 0; }
.pack-chances { display: block; font-size: 16px; font-weight: 800; }
.pack-nombre, .pack-detalle { display: block; margin-top: 1px; font-size: 12.5px; color: var(--suave); }
.pack-nombre { font-weight: 700; color: var(--texto); }
.pack-precios { display: grid; justify-items: end; gap: 4px; text-align: right; }
.pack-linea { display: flex; align-items: baseline; gap: 6px; }
.pack-linea s { font-size: 12.5px; color: var(--suave); }
.pack-precio { font: 800 18px/1.1 var(--cartel); font-variant-numeric: tabular-nums; }
.pack-off, .pack-agotado { padding: 2px 7px; border-radius: 5px; font: 800 11px/1.3 var(--sans); font-style: normal; }
.pack-off { color: var(--verde-tinta); background: #dcebff; }
.pack-agotado { color: var(--rojo-hondo); background: #fff3f5; }
.pack-sello { position: absolute; top: -11px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px;
  border-radius: 999px; font: 800 10.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--texto); }
.pack-sello svg { width: 12px; height: 12px; color: var(--oro); }
.pack.recomendado { margin-top: 8px; }
.ver-todos { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; min-height: 46px;
  border: 1.5px dashed #8fc3ff; border-radius: 12px; font-size: 14px; font-weight: 800; color: var(--verde-texto); background: #f2f8ff; }
.ver-todos::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.ver-todos[aria-expanded=true]::after { transform: translateY(2px) rotate(-135deg); }

/* La cuenta regresiva: tarjeta blanca, cifras grandes, los segundos en azul. */
.cuenta { margin: 16px 0 12px; padding: 14px 12px 12px; text-align: center; border: 1.5px solid var(--borde); border-radius: 14px; background: #fff; }
.cuenta-titulo { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--suave); }
.cuenta-titulo svg { width: 17px; height: 17px; color: var(--azul); }
.cuenta-cajas { display: flex; justify-content: center; gap: 4px; }
.cuenta-cajas div { position: relative; min-width: 62px; }
.cuenta-cajas div + div::before { content: ":"; position: absolute; left: -6px; top: 2px; font: 800 26px/1 var(--cartel); color: var(--suave); }
.cuenta-cajas b { display: flex; justify-content: center; font: 800 32px/1.1 var(--cartel); font-variant-numeric: tabular-nums; }
.cuenta-cajas i { display: block; font-style: normal; }
.cuenta-cajas .segundos b { color: var(--azul); }
.cuenta-cajas span { display: block; font-size: 12px; color: var(--suave); }

.boton.participar { width: 100%; min-height: 56px; margin-top: 4px; font-size: 18px;
  color: #fff; background: var(--texto); box-shadow: 0 8px 20px rgba(15,26,43,.25); }
.boton.participar:disabled { opacity: .5; }
.legales { margin: 10px 0 0; font-size: 13px; line-height: 1.6; text-align: center; color: var(--suave); }
.legales b { color: var(--azul); }
.legales a { color: inherit; text-underline-offset: 3px; }
.pago-aviso { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--suave); }
.pago-aviso svg { width: 16px; height: 16px; }
.ventajas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ventajas li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px;
  font-size: 13px; font-weight: 600; background: #fff; }
.ventajas svg { flex: none; width: 18px; height: 18px; color: var(--azul); }

/* Tarjetas blancas del resto de la página. */
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); }
.fecha-sorteo { max-width: 480px; margin: 34px auto 0; padding: 18px 20px; text-align: center; }
.fecha-sorteo h2 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; font: 800 20px/1.2 var(--cartel); }
.fecha-sorteo h2 svg { width: 20px; height: 20px; color: var(--azul); }
.cuenta-fecha { margin: 0; color: var(--suave); font-size: 15px; font-weight: 600; }
.cuenta-fecha::first-letter { text-transform: uppercase; }

.seccion { padding: 44px 0 6px; scroll-margin-top: 12px; text-align: center; }
.titulo-seccion { margin: 0; font: 800 clamp(26px, 6vw, 34px)/1.05 var(--cartel); letter-spacing: -0.02em; text-wrap: balance; }
.ayuda-seccion { margin: 8px 0 20px; color: var(--suave); font-size: 15px; text-wrap: pretty; }
.pasos { list-style: none; counter-reset: paso; margin: 0 auto; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); max-width: 900px; text-align: center; }
/* Las cuatro tarjetas en azul, con el número en blanco. Entran de a una al llegar
   a la vista (js/portada.js les pone .animar y .vista) y se levantan al pasar el mouse. */
.pasos li { position: relative; counter-increment: paso; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 24px 16px 20px;
  color: #fff; background: linear-gradient(160deg, var(--bordo-claro) 0%, var(--bordo) 100%); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11,58,140,.2), 0 12px 28px rgba(11,58,140,.22); overflow: hidden;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.pasos li::after { content: ""; position: absolute; inset: -40% -30% auto auto; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(77,178,255,.35), rgba(77,178,255,0) 70%); pointer-events: none; }
.pasos li::before { content: counter(paso); position: absolute; top: 10px; left: 10px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; font: 800 12px/1 var(--sans); color: var(--bordo); background: #fff; }
.pasos i { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; color: #fff;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.pasos i svg { width: 26px; height: 26px; }
.pasos b { font-size: 16px; }
.pasos span { color: rgba(255,255,255,.8); font-size: 14px; }
.pasos.animar li { opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), box-shadow 260ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms); }
.pasos.animar.vista li { opacity: 1; transform: none; }
.pasos.animar.vista i { animation: paso-icono 3.2s ease-in-out calc(600ms + var(--i, 0) * 400ms) infinite; }
@keyframes paso-icono { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-4px) rotate(-6deg); } 90% { transform: translateY(0) rotate(4deg); } }
@media (hover: hover) and (pointer: fine) {
  .pasos li:hover, .pasos.animar.vista li:hover { transform: translateY(-4px); transition-delay: 0ms;
    box-shadow: 0 2px 4px rgba(11,58,140,.2), 0 18px 36px rgba(11,58,140,.3); }
}
@media (prefers-reduced-motion: reduce) {
  .pasos.animar li { opacity: 1; transform: none; transition: none; }
  .pasos.animar.vista i { animation: none; }
}

.faq { max-width: 640px; margin: 18px auto 0; text-align: left; background: #fff; border: 1px solid var(--borde);
  border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--borde); }
.faq summary { cursor: pointer; padding: 15px 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border: solid var(--suave); border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { margin: 0; padding: 0 18px 16px; color: var(--suave); }
.faq-mas { margin: 14px 0 0; font-size: 14px; color: var(--suave); }
.faq-mas a { color: var(--azul); font-weight: 700; }

.canal { max-width: 640px; margin: 44px auto 10px; padding: 26px 20px; text-align: center; border-radius: 16px;
  background: #eaf3ff; border: 1.5px solid #b9d6ff; }
.canal h2 { margin: 0; font: 800 clamp(20px, 5vw, 26px)/1.15 var(--cartel); text-wrap: balance; }
.canal p { margin: 8px 0 16px; color: var(--suave); }
.canal .boton { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; background: var(--azul);
  box-shadow: 0 6px 16px rgba(26,115,224,.3); }
.canal .boton svg { width: 18px; height: 18px; }

.pie { margin-top: 44px; padding: 32px 0 44px; background: #fff; border-top: 1px solid var(--borde); }
.pie-caja { max-width: 1080px; margin: 0 auto; padding: 0 16px; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pie-marca { margin: 0; font: 900 18px/1.2 var(--cartel); color: var(--bordo); }
.pie nav { display: grid; gap: 8px; align-content: start; }
.pie h2 { margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.pie a { color: var(--texto); font-size: 14px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { color: var(--azul); } }

/* La vitrina, clara como el resto. */
.portada .vitrina { margin-top: 44px; padding: 0 0 8px; color: var(--texto); background: none; }
.portada .vitrina h2 { margin: 0 16px; font: 800 clamp(26px, 6vw, 34px)/1.05 var(--cartel); letter-spacing: -0.02em; text-transform: none; color: var(--texto); text-shadow: none; }
.portada .vitrina-bajada { color: var(--suave); }
.portada .ganador { background: #fff; box-shadow: 0 0 0 1px var(--borde), var(--sombra); }
.portada .ganador-premio { color: var(--verde-texto); }
.portada .ganador-datos time { color: var(--suave); }
.portada .vitrina-punto::before { background: #c5d3e6; }
.portada .vitrina-punto[aria-current]::before { background: var(--azul); box-shadow: none; }

/* Debajo de la foto (01/10): la cuenta regresiva, la barra de chances
   vendidas y la grilla de números, azul los libres y gris los asignados. */
.avance-caja { display: grid; gap: 12px; }
.avance-caja:not(:has(> :not([hidden]))) { display: none; }
.avance-caja .cuenta { margin: 0; }
.avance { padding: 14px 16px; border: 1.5px solid var(--borde); border-radius: 14px; background: #fff; }
.avance-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px;
  font-size: 14px; font-weight: 700; color: var(--suave); }
.avance-cabeza b { font: 800 22px/1 var(--cartel); color: var(--azul); font-variant-numeric: tabular-nums; }
.avance-barra { height: 14px; overflow: hidden; border-radius: 999px; background: var(--ocupado); }
.avance-barra i { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--oro-hondo), var(--azul));
  transform: scaleX(var(--avance, 0)); transform-origin: left; transition: transform 1.1s cubic-bezier(0.23, 1, 0.32, 1); }

@media (min-width: 900px) {
  .producto { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: start; padding-top: 28px; }
  .producto { grid-template-areas: "foto ficha" "avance ficha"; grid-template-rows: auto 1fr; row-gap: 18px; }
  .galeria { aspect-ratio: 1; }
}
@media (max-width: 380px) {
  .ventajas { grid-template-columns: 1fr; }
  .cuenta-cajas div { min-width: 54px; }
  .cuenta-cajas b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .pack, .faq summary::after, .avance-barra i { transition: none; }
}

/* La lista de sorteos abiertos (035): con varios, / la muestra sola. */
.otros-sorteos { margin: 16px 0 24px; }
.otros-aviso { font-weight: 700; margin: 0 0 8px; }
.otros-sorteos h2 { font-family: var(--cartel); margin: 0 0 12px; }
.otros-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.otros-lista a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radio);
  background: var(--fondo); border: 1px solid var(--borde); box-shadow: var(--sombra); text-decoration: none; color: var(--texto); }
.otros-lista img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; flex: none; }
.otros-lista b { display: block; }
.otros-lista span { color: var(--suave); }
body[data-vista=lista] main > :not(.otros-sorteos),
body[data-vista=lista] main ~ main { display: none; }

/* La preventa (038): no tiene premio, fecha ni números todavía. */
body[data-tipo=preventa] [data-solo-sorteo] { display: none !important; }