:root{
  --logo:url("logo.jpg");
  --ink:#08080B;
  --ink-2:#111117;
  --ink-3:#1B1B23;
  --paper:#FFF7EA;
  --paper-2:#F4E7D3;
  --paper-line:#E0CDB2;
  --on-paper:#1A1A20;
  --on-paper-soft:#6E6960;
  --on-ink:#F6F2E8;
  --on-ink-soft:#A79E8C;
  --oro:#F5C542;
  --oro-claro:#FFE08A;
  --oro-hondo:#C4922A;
  --azul:#1E43C4;
  --rojo:#D6232B;
  --verde:#189D63;
  --display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --pad:clamp(1.1rem,3vw,2rem);
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--on-ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px;border-radius:4px}

.wrap{width:min(1120px,92%);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--on-ink-soft)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* marca: el logo va como fondo para no repetir la imagen */
.logo{
  background-image:var(--logo);background-size:contain;background-repeat:no-repeat;background-position:center;
  mix-blend-mode:screen;flex:none;
}

/* franjas tricolor del logo */
.franjas{display:flex;gap:4px;height:5px;width:74px}
.franjas i{flex:1;border-radius:2px;transform:skewX(-22deg)}
.franjas i:nth-child(1){background:var(--azul)}
.franjas i:nth-child(2){background:var(--rojo)}
.franjas i:nth-child(3){background:var(--oro)}

/* ---------- barra superior ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(8,8,11,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(245,197,66,.18)}
.nav-in{display:flex;align-items:center;gap:1.5rem;padding:.6rem 0}
.marca{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.marca .logo{width:56px;height:56px}
.marca-txt{display:flex;flex-direction:column;line-height:1.1}
.marca-txt b{font-family:var(--display);font-size:1rem;letter-spacing:-.02em}
.marca-txt span{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.nav-links a{white-space:nowrap}
/* el gris es solo para los enlaces de texto; los botones conservan su color */
.nav-links a:not(.btn){color:var(--on-ink-soft);text-decoration:none;font-size:.94rem;font-weight:500}
.nav-links a:not(.btn):hover{color:var(--on-ink)}
.btn{
  border:0;border-radius:999px;cursor:pointer;font-weight:700;font-size:.92rem;
  padding:.72rem 1.5rem;text-decoration:none;display:inline-block;color:#14100A;
  background:linear-gradient(160deg,var(--oro-claro),var(--oro) 45%,var(--oro-hondo));
  transition:transform .15s ease,filter .15s ease;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--on-ink);border:1px solid rgba(245,197,66,.45);font-weight:600}
.btn-ghost:hover{background:rgba(245,197,66,.12)}
.btn-dark{background:var(--on-paper);color:var(--paper);font-weight:600}
.btn-dark:hover{background:#30303c}
.btn-lg{padding:.95rem 2rem;font-size:1rem}

/* ---------- portada ---------- */
.hero{padding:clamp(2.2rem,6vw,4rem) 0 3rem;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{font-size:clamp(2.5rem,6vw,4rem);margin-top:.8rem}
.hero h1 em{font-style:normal;color:var(--oro)}
.hero .bajada{margin-top:1.1rem;color:var(--on-ink-soft);font-size:1.06rem;max-width:46ch}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.sellos{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(245,197,66,.18)}
.sello{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--on-ink-soft);max-width:15rem}
.sello svg{flex:none;margin-top:.15rem}

/* ---------- boleto (tarjeta de papel) ---------- */
.boleto{
  position:relative;background:var(--paper);color:var(--on-paper);border-radius:18px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.85);
}
.boleto::before,.boleto::after{
  content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:var(--ink);
  top:var(--corte,auto);transform:translateY(-50%);
}
.boleto::before{left:-13px}
.boleto::after{right:-13px}
.perf{border-top:2px dashed var(--paper-line)}

.destacado{--corte:calc(100% - 118px)}
.destacado .banda{
  background:linear-gradient(100deg,#14100A,#2A2113 55%,#14100A);color:var(--oro);
  border-radius:18px 18px 0 0;padding:.7rem var(--pad);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:2px solid var(--oro);
}
.destacado .cuerpo{padding:var(--pad);display:grid;gap:1.15rem}
.premio-fila{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between}
.premio-fila h2{font-size:1.75rem}
.premio-fila .precio{font-family:var(--mono);font-size:1.5rem;font-weight:600;white-space:nowrap}
.premio-fila .precio small{display:block;font-family:var(--body);font-size:.72rem;font-weight:400;color:var(--on-paper-soft);letter-spacing:.02em}
.dato{font-size:.9rem;color:var(--on-paper-soft)}
.progreso{display:flex;align-items:center;gap:1rem}
.aro{
  --p:0;flex:none;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--oro-hondo) calc(var(--p)*1%),var(--paper-2) 0);
}
.aro span{width:60px;height:60px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:.95rem}
.cuenta{display:flex;gap:.45rem}
.cuenta div{background:var(--on-paper);color:var(--paper);border-radius:10px;padding:.45rem .6rem;text-align:center;min-width:52px}
.cuenta b{display:block;font-family:var(--mono);font-size:1.15rem;font-weight:600;line-height:1.1;color:var(--oro)}
.cuenta small{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.talon{padding:1rem var(--pad) 1.15rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.talon .serie{font-family:var(--mono);font-size:.72rem;color:var(--on-paper-soft);letter-spacing:.1em}

/* ---------- secciones ---------- */
section{padding:clamp(3rem,7vw,5rem) 0}
.sec-cab{margin-bottom:2.2rem;max-width:60ch}
.sec-cab .franjas{margin-bottom:1rem}
.sec-cab h2{font-size:clamp(1.7rem,4vw,2.5rem);margin-top:.5rem}
.sec-cab p{color:var(--on-ink-soft);margin-top:.7rem}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.paso{background:var(--ink-2);border:1px solid rgba(245,197,66,.16);border-radius:14px;padding:1.5rem}
.paso b{display:block;font-family:var(--display);font-size:1.05rem;margin:.9rem 0 .4rem}
.paso p{color:var(--on-ink-soft);font-size:.92rem}
.paso i{
  font-style:normal;font-family:var(--mono);font-size:.78rem;font-weight:600;color:#14100A;
  background:linear-gradient(160deg,var(--oro-claro),var(--oro-hondo));
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
}

/* catálogo */
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.chip{
  border:1px solid rgba(167,158,140,.35);background:transparent;color:var(--on-ink-soft);
  border-radius:999px;padding:.5rem 1.1rem;font-size:.82rem;cursor:pointer;transition:.15s;
}
.chip:hover{color:var(--on-ink);border-color:var(--on-ink-soft)}
.chip[aria-pressed="true"]{background:var(--oro);color:#14100A;border-color:var(--oro);font-weight:700}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1.3rem;align-items:start}
.rifa{--corte:150px;display:flex;flex-direction:column;transition:transform .18s ease}
.rifa:hover{transform:translateY(-4px)}
.rifa .arte{height:124px;border-radius:18px 18px 0 0;display:grid;place-items:center;position:relative}
.rifa .arte .cat{
  position:absolute;top:.7rem;left:.7rem;background:rgba(0,0,0,.35);color:#fff;border-radius:999px;
  padding:.28rem .7rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
}
.rifa .info{padding:1.1rem 1.15rem .4rem;display:grid;gap:.5rem;flex:1}
.rifa h3{font-size:1.08rem}
.rifa .dato{font-size:.84rem}
.barra{height:6px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--oro-hondo),var(--oro));border-radius:999px}
.rifa .pie{padding:.9rem 1.15rem 1.15rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.rifa .pie .p{font-family:var(--mono);font-weight:600;font-size:1.12rem}
.rifa .pie .p small{display:block;font-family:var(--body);font-size:.68rem;font-weight:400;color:var(--on-paper-soft)}
.rifa .btn{font-size:.82rem;padding:.6rem 1.1rem}

/* compra de boletos */
.selector{background:var(--ink-2);border:1px solid rgba(245,197,66,.18);border-radius:20px;padding:var(--pad);display:grid;gap:1.6rem}
.avance{display:grid;gap:1.1rem;align-content:center}
.avance .pct{display:flex;align-items:baseline;gap:.7rem}
.avance .pct b{
  font-family:var(--display);font-size:clamp(3.4rem,9vw,5.4rem);line-height:.85;
  background:linear-gradient(180deg,#FFF3CE,var(--oro) 45%,var(--oro-hondo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.avance .pct span{font-size:1rem;color:var(--on-ink-soft);max-width:16ch}
.barra-gorda{height:16px;border-radius:999px;background:var(--ink-3);overflow:hidden;border:1px solid rgba(245,197,66,.25)}
.barra-gorda i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--oro-hondo),var(--oro-claro))}
.marcas{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--on-ink-soft);letter-spacing:.06em}
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.4rem}
.datos div{background:var(--ink-3);border-radius:12px;padding:.85rem .9rem}
.datos small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-soft);margin-bottom:.25rem}
.datos b{font-size:1rem;font-weight:600}
/* combos de boletos */
.combos-cab{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.combos-cab h3{font-size:1.15rem}
.min-tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);
  border:1px solid rgba(245,197,66,.45);border-radius:999px;padding:.32rem .85rem;
}
.combos{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1rem;margin-top:1.1rem}
.combo{
  position:relative;background:var(--paper);color:var(--on-paper);border-radius:16px;
  padding:1.3rem 1rem 1.2rem;display:flex;flex-direction:column;align-items:center;gap:.45rem;
  border:2px solid transparent;cursor:pointer;font-family:inherit;text-align:center;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.combo:hover{transform:translateY(-3px)}
.combo[aria-pressed="true"]{border-color:var(--oro);box-shadow:0 0 0 4px rgba(245,197,66,.28)}
.combo .tag{
  border-radius:999px;padding:.35rem .85rem;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.35;margin-bottom:.3rem;
}
.t1{background:var(--azul);color:#fff}
.t2{background:var(--rojo);color:#fff}
.t3{background:var(--on-paper);color:var(--paper)}
.t4{background:linear-gradient(140deg,var(--oro-claro),var(--oro-hondo));color:#14100A}
.t5{background:#14100A;color:var(--oro);border:1px solid var(--oro)}
.combo .qty{font-family:var(--display);font-size:2.3rem;line-height:1}
.combo .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-paper-soft)}
.combo .val{font-family:var(--mono);font-size:1.2rem;font-weight:600;margin-top:.25rem}
.combo .gratis{
  background:var(--verde);color:#fff;border-radius:999px;padding:.34rem .75rem;margin-top:.35rem;
  font-size:.66rem;font-weight:700;letter-spacing:.02em;
}
.combo .unidad{font-size:.7rem;color:var(--on-paper-soft)}

/* confirmación de datos antes de pagar */
.confirmo{
  display:flex;gap:.9rem;align-items:center;margin:1.1rem 0 .9rem;padding:1rem 1.15rem;
  background:var(--ink-2);border:1px solid rgba(167,158,140,.25);border-radius:16px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.confirmo:hover{border-color:rgba(245,197,66,.4)}
.confirmo input{position:absolute;opacity:0;width:1px;height:1px}
.palanca{
  flex:0 0 auto;width:50px;height:28px;border-radius:999px;background:#2A2A34;
  border:1px solid rgba(167,158,140,.3);position:relative;transition:background .2s,border-color .2s;
}
.palanca::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--on-ink);transition:transform .2s,background .2s;
}
.confirmo input:checked + .palanca{background:var(--oro);border-color:var(--oro)}
.confirmo input:checked + .palanca::after{transform:translateX(22px);background:var(--ink)}
.confirmo input:focus-visible + .palanca{outline:3px solid var(--oro);outline-offset:3px}
.confirmo-txt{font-size:.88rem;line-height:1.55;color:var(--on-ink-soft)}
.confirmo-txt b{color:var(--on-ink);font-weight:700}
.confirmo-txt b.empresa{color:var(--oro)}
.confirmo.marcado{border-color:rgba(245,197,66,.45);background:#14141C}
.confirmo.falta{border-color:var(--rojo);animation:tiembla .35s}
@keyframes tiembla{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#cEnviar:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}
@media (max-width:620px){
  .confirmo{padding:.9rem;gap:.75rem}
  .confirmo-txt{font-size:.82rem}
}

/* resumen de la compra */
.resumen{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
  background:var(--ink-3);border:1px solid rgba(245,197,66,.28);border-radius:16px;padding:1.15rem 1.3rem;
}
.resumen .que b{display:block;font-family:var(--display);font-size:1.15rem}
.resumen .que span{font-size:.85rem;color:var(--on-ink-soft)}
.resumen .tot{text-align:right}
.resumen .tot small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-soft)}
.resumen .tot b{font-family:var(--mono);font-size:1.9rem;font-weight:600;color:var(--oro)}
.azar{display:flex;gap:.55rem;align-items:flex-start;font-size:.85rem;color:var(--on-ink-soft);max-width:70ch}
.azar b{color:var(--on-ink)}
.mini{font-size:.8rem;color:var(--on-ink-soft)}

/* verificador */
.verifica{background:var(--ink-2);border:1px solid rgba(245,197,66,.18);border-radius:20px;padding:var(--pad)}
.campo{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.campo input{
  flex:1 1 250px;background:var(--ink);border:1px solid rgba(167,158,140,.35);color:var(--on-ink);
  border-radius:12px;padding:.85rem 1rem;font-family:var(--mono);font-size:.95rem;
}
.campo input::placeholder{color:rgba(167,158,140,.6)}
.campo input:focus{outline:none;border-color:var(--oro)}
.resultado{margin-top:1.1rem;font-size:.94rem;color:var(--on-ink-soft)}
.resultado .ok{color:var(--oro);font-weight:600}
.resultado .no{color:#FF8A6B;font-weight:600}

/* la barra superior es fija: deja aire al saltar a una sección */
html{scroll-padding-top:88px}
.gracias,#verificar,#comprar,#rifas,#como,#ganadores,#preguntas{scroll-margin-top:88px}

/* ---------- cómo se eligen los ganadores ---------- */
.explica{
  background:var(--ink-2); border:1px solid rgba(245,197,66,.22); border-radius:20px;
  padding:var(--pad); display:grid; gap:1rem; justify-items:center;
}
.ex-paso{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; justify-content:center;
  width:100%; max-width:640px; text-align:left;
}
.ex-paso > div:nth-child(2){flex:1; min-width:190px}
.ex-n{
  flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--oro-claro),var(--oro-hondo)); color:#14100A;
  font-family:var(--mono); font-weight:700; font-size:.9rem;
}
.ex-paso b{display:block; font-family:var(--display); font-weight:400; font-size:1.02rem; margin-bottom:.2rem}
.ex-paso p{color:var(--on-ink-soft); font-size:.88rem}

.cifras-fila{display:flex; gap:.4rem; justify-content:center; flex:none}
.cifra{
  width:38px; height:46px; border-radius:10px; display:grid; place-items:center;
  background:var(--ink-3); border:1px solid rgba(167,158,140,.3);
  font-family:var(--mono); font-weight:700; font-size:1.25rem; color:var(--on-ink);
}
.cifras-fila.grande .cifra{width:46px; height:56px; font-size:1.5rem}
.cifra.oro{
  background:linear-gradient(160deg,var(--oro-claro),var(--oro) 45%,var(--oro-hondo));
  border-color:var(--oro); color:#14100A;
}
.cifra.plata{
  background:linear-gradient(160deg,#E8E8EC,#B9BAC2 45%,#8E8F98);
  border-color:#C9CAD1; color:#1A1A20;
}
.ex-flecha{color:var(--oro); display:grid; place-items:center}

.ex-premios{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; width:100%; max-width:640px}
.ex-premio{
  background:var(--ink-3); border:1px solid rgba(167,158,140,.22); border-radius:16px;
  padding:1.1rem; text-align:center;
}
.ex-premio.primero{border-color:rgba(245,197,66,.5)}
.ex-premio.segundo{border-color:rgba(185,186,194,.45)}
.ex-etq{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-ink-soft); margin-bottom:.4rem;
}
.ex-texto{font-size:.9rem; margin-bottom:.8rem}
.ex-texto b{color:var(--oro)}
.ex-premio.segundo .ex-texto b{color:#D6D7DD}
.ex-vuelta{margin-top:.6rem}
.ex-vuelta span{
  display:block; font-size:.72rem; color:var(--on-ink-soft); margin-top:.1rem;
  font-family:var(--mono); letter-spacing:.06em;
}
.ex-nota{
  color:var(--on-ink-soft); font-size:.88rem; text-align:center;
  margin-top:1.1rem; max-width:62ch; margin-inline:auto;
}
@media (max-width:620px){
  .ex-premios{grid-template-columns:1fr}
  .cifra{width:34px; height:42px; font-size:1.1rem}
  .cifras-fila.grande .cifra{width:40px; height:50px; font-size:1.3rem}
}

/* ---------- premio extra: los 2 con más boletos ---------- */
.premio-extra{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(245,197,66,.15),rgba(245,197,66,.04) 60%);
  border:1px solid rgba(245,197,66,.5); border-radius:20px;
  padding:1.6rem var(--pad); margin-bottom:1rem; position:relative; overflow:hidden;
}
.premio-extra::before{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; background:radial-gradient(circle,rgba(245,197,66,.16),transparent 70%);
  pointer-events:none;
}
.pe-medalla{
  flex:none; width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--oro-claro),var(--oro) 45%,var(--oro-hondo));
  box-shadow:0 0 34px -6px rgba(245,197,66,.65);
}
.pe-texto{flex:1; min-width:260px; position:relative}
.pe-etiqueta{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--oro); margin-bottom:.45rem;
}
.premio-extra h2{font-size:clamp(1.15rem,2.6vw,1.6rem); line-height:1.2; margin-bottom:.5rem}
.premio-extra h2 em{font-style:normal; color:var(--oro)}
.pe-detalle{color:var(--on-ink-soft); font-size:.92rem; max-width:62ch}
.pe-detalle b{color:var(--on-ink)}
.pe-boton{flex:none; position:relative}

/* recordatorio junto a los combos */
.pe-mini{
  background:rgba(245,197,66,.1); border:1px solid rgba(245,197,66,.4); border-radius:12px;
  padding:.7rem 1rem; margin-bottom:.9rem; font-size:.87rem; color:var(--on-ink);
}
.pe-mini b{color:var(--oro)}

@media (max-width:700px){
  .premio-extra{gap:1rem; padding:1.3rem}
  .pe-boton{width:100%; text-align:center}
}

/* ---------- aviso de comprobante en revisión ---------- */
/* reloj que gira, para indicar que algo sigue en proceso */
.reloj .min{transform-origin:12px 12px; animation:reloj-gira 1.6s linear infinite}
.reloj .hora{transform-origin:12px 12px; animation:reloj-gira 9.6s linear infinite}
@keyframes reloj-gira{ to{ transform:rotate(360deg) } }

.aviso-pendiente{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(214,35,43,.14),rgba(214,35,43,.04));
  border:1px solid rgba(214,35,43,.5); border-radius:16px;
  padding:1.1rem 1.3rem; margin-bottom:1.4rem;
}
.aviso-pendiente .ap-icono{
  flex:none; width:42px; height:42px; border-radius:50%; color:#FF6B63;
  background:rgba(214,35,43,.16); display:grid; place-items:center;
}
.aviso-pendiente .ap-texto{flex:1; min-width:220px}
.aviso-pendiente .ap-texto b{
  display:block; font-family:var(--display); font-weight:400; font-size:1.02rem;
  color:#FF6B63; margin-bottom:.15rem;
}
.aviso-pendiente .ap-texto span{color:var(--on-ink-soft); font-size:.89rem}
.aviso-pendiente.es-rechazada{
  background:linear-gradient(120deg,rgba(214,35,43,.2),rgba(214,35,43,.05));
  border-color:var(--rojo);
}
.aviso-pendiente.es-rechazada .reloj .min,
.aviso-pendiente.es-rechazada .reloj .hora{animation:none}
.aviso-pendiente .ap-botones{display:flex; gap:.5rem; flex-wrap:wrap; flex:none}
.aviso-pendiente .btn{padding:.62rem 1.2rem; font-size:.88rem}

/* sello de "en revisión" en la pantalla de los números */
.sello-revision{
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(214,35,43,.1); border:1px solid var(--rojo); color:#B81C23;
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; border-radius:999px; padding:.4rem 1rem; margin-bottom:.9rem;
}
.sello-revision .reloj{flex:none}
/* botón secundario sobre fondo claro (tarjeta de gracias) */
.btn-sec-claro{
  background:transparent; color:var(--on-paper); border:1px solid var(--paper-line); font-weight:600;
}
.btn-sec-claro:hover{background:var(--paper-2)}

.ver-tarjeta.terminada{opacity:.82; border-color:rgba(167,158,140,.28)}
.etq-fin{
  display:inline-block; background:rgba(167,158,140,.16); color:var(--on-ink-soft);
  border-radius:999px; padding:.1rem .5rem; font-size:.6rem; letter-spacing:.1em; margin-left:.3rem;
}

/* ---------- contacto por WhatsApp ---------- */
.contacto-wa{
  margin-top:1.2rem; background:var(--ink-2); border:1px solid rgba(37,211,102,.3);
  border-radius:18px; padding:1.3rem var(--pad); display:flex; align-items:center;
  justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
}
.cw-texto b{display:block; font-family:var(--display); font-weight:400; font-size:1.05rem; margin-bottom:.2rem}
.cw-texto span{color:var(--on-ink-soft); font-size:.9rem}
.btn-wa{
  background:#25D366; color:#072613; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-weight:600; letter-spacing:.02em; flex:none;
}
.btn-wa:hover{background:#1FBA58}
.btn-wa svg{flex:none}

/* ---------- resultado del verificador ---------- */
.ver-ok{text-align:center;padding:.5rem 0 .2rem}
.ver-sello{
  width:88px;height:88px;border-radius:50%;margin:0 auto 1.2rem;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#22C77E,var(--verde));
  box-shadow:0 0 0 10px rgba(24,157,99,.14),0 0 42px -6px rgba(24,157,99,.75);
}
.ver-sello.espera{
  background:radial-gradient(circle at 35% 30%,var(--oro-claro),var(--oro-hondo));
  box-shadow:0 0 0 10px rgba(245,197,66,.13),0 0 42px -6px rgba(245,197,66,.6);
}
.ver-sello.rechazado{
  background:radial-gradient(circle at 35% 30%,#FF6B63,var(--rojo));
  box-shadow:0 0 0 10px rgba(214,35,43,.14),0 0 42px -6px rgba(214,35,43,.7);
}
.ver-tarjeta.rechazada{
  border-color:rgba(214,35,43,.45); background:rgba(214,35,43,.06);
}
.ver-tarjeta.rechazada p{color:var(--on-ink-soft); font-size:.93rem; line-height:1.65}
.ver-titulo{
  font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,4.5vw,2.1rem);
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;color:var(--on-ink);margin-bottom:.6rem;
}
.ver-titulo em{font-style:normal;color:var(--oro)}
.ver-sub{color:var(--on-ink-soft);font-size:.96rem;max-width:38ch;margin:0 auto 1.6rem}
.ver-sub b{color:var(--on-ink)}

.ver-tarjeta{
  background:var(--ink-3);border:1px solid rgba(245,197,66,.22);border-radius:18px;
  padding:1.3rem 1.2rem;margin-bottom:1rem;text-align:center;
}
.ver-rifa{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);margin-bottom:1rem;
}
.ver-nums{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  background:rgba(0,0,0,.35);border-radius:14px;padding:1rem .9rem;
}
/* confirmados = verde */
.ver-nums b{
  font-family:var(--mono);font-weight:700;font-size:1rem;letter-spacing:.02em;color:#03301C;
  background:linear-gradient(160deg,#4FE39A,#22C77E 45%,#189D63);
  border:1px solid rgba(24,157,99,.6);border-radius:10px;padding:.45rem .75rem;min-width:78px;
}
/* en revisión = rojo */
.ver-nums.espera b{
  background:rgba(214,35,43,.12);color:#FF6B63;
  border:1px dashed rgba(214,35,43,.65);
}
.ver-datos{margin-top:1.1rem;font-size:.9rem;color:var(--on-ink-soft);line-height:1.9}
.ver-datos b{color:var(--on-ink)}
.ver-datos .fecha{display:block;color:var(--oro);font-family:var(--mono);font-size:.82rem;margin-top:.2rem}
/* aviso de que la página se está revisando sola */
.auto-aviso{
  display:flex; align-items:center; justify-content:center; gap:.5rem; text-align:center;
  margin-top:1rem; font-size:.82rem; color:var(--on-ink-soft);
}
.auto-aviso .punto{
  flex:none; width:8px; height:8px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 0 0 rgba(24,157,99,.6); animation:late 2s ease-out infinite;
}
@keyframes late{
  0%{box-shadow:0 0 0 0 rgba(24,157,99,.55)}
  70%{box-shadow:0 0 0 9px rgba(24,157,99,0)}
  100%{box-shadow:0 0 0 0 rgba(24,157,99,0)}
}

.ver-espera{
  margin-top:1rem;background:rgba(245,197,66,.1);border:1px solid rgba(245,197,66,.35);
  border-radius:12px;padding:.7rem .9rem;font-size:.85rem;color:var(--on-ink);
}

/* ganadores */
.ganadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
.gan{--corte:74px;padding-bottom:1.1rem}
.gan .top{padding:1.1rem 1.15rem 1.2rem;display:flex;gap:.8rem;align-items:center}
.gan .ini{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--on-paper);color:var(--oro);font-family:var(--display);font-size:.95rem}
.gan .top b{display:block;font-weight:600;font-size:.98rem}
.gan .top span{font-size:.8rem;color:var(--on-paper-soft)}
.gan .bot{padding:.9rem 1.15rem 0;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.gan .bot .pr{font-weight:700;font-size:.9rem;color:var(--oro-hondo)}
.gan .bot .fe{font-family:var(--mono);font-size:.72rem;color:var(--on-paper-soft)}

/* preguntas */
.faq{display:grid;gap:.7rem;max-width:70ch}
.faq details{background:var(--ink-2);border:1px solid rgba(245,197,66,.16);border-radius:12px;padding:1rem 1.2rem}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--oro);font-family:var(--mono);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--on-ink-soft);font-size:.93rem;margin-top:.7rem}

/* cierre + pie */
.cierre{
  border-radius:22px;padding:clamp(2rem,5vw,3.2rem);text-align:center;color:#14100A;
  background:linear-gradient(150deg,#FFF0BE,var(--oro) 40%,var(--oro-hondo));
}
.cierre h2{font-size:clamp(1.8rem,4.5vw,2.7rem)}
.cierre p{margin:.9rem auto 1.8rem;max-width:48ch;color:rgba(20,16,10,.78)}
.cierre .franjas{margin:0 auto 1.2rem}
.nota-pago{
  display:flex;gap:.85rem;align-items:flex-start;margin-top:2.5rem;
  background:var(--ink-2);border:1px solid rgba(245,197,66,.35);border-left:5px solid var(--oro);
  border-radius:14px;padding:1.1rem 1.3rem;font-size:.92rem;color:var(--on-ink-soft);
}
.nota-pago b{color:var(--oro);display:block;margin-bottom:.2rem}
.nota-pago.compacta{margin-top:0;background:var(--ink-3);padding:.85rem 1.1rem;font-size:.85rem}
.nota-pago.compacta b{display:inline}
.nota-pago svg{flex:none;margin-top:.2rem}
.info-evento{margin-bottom:1.6rem}
.info-evento .titulo{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--oro);text-align:center;margin-bottom:.9rem;line-height:1.5}
.info-evento .caja{background:var(--ink-2);border:1px solid rgba(245,197,66,.3);border-radius:16px;
  padding:1.3rem 1.4rem;color:var(--on-ink-soft);font-size:.94rem;line-height:1.6}
.info-evento .caja p{margin-bottom:.9rem}
.info-evento .caja p:last-child{margin-bottom:0}
.info-evento .caja b{color:var(--on-ink)}
.clausula{margin-top:.7rem;font-size:.78rem;color:var(--on-ink-soft);font-style:italic}

/* ---------- subir comprobante ---------- */
.subir-comp{background:var(--ink-2);border:1.5px dashed rgba(167,158,140,.4);border-radius:16px;
  padding:1.8rem 1.4rem;text-align:center}
.subir-comp b{display:block;font-size:1.02rem;color:var(--on-ink);margin:.7rem 0 .3rem}
.subir-comp p{color:var(--on-ink-soft);font-size:.88rem;max-width:26rem;margin:0 auto}
.btn-subir{margin-top:1.1rem;border:0;border-radius:999px;cursor:pointer;font-weight:700;font-size:.88rem;
  padding:.68rem 1.4rem;color:#fff;background:var(--azul);display:inline-flex;align-items:center;gap:.5rem}
.btn-subir:hover{filter:brightness(1.1)}
.nombre-archivo{display:block;margin-top:.8rem;font-family:var(--mono);font-size:.8rem;color:var(--verde)}
.subir-comp .terminos{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(167,158,140,.2);font-size:.82rem}
.subir-comp .terminos a{color:var(--oro)}

/* ---------- modal términos ---------- */
.modal-fondo{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;
  padding:1.2rem;z-index:100}
.modal-caja{background:var(--paper);color:var(--on-paper);border-radius:18px;padding:1.8rem;max-width:560px;
  max-height:80vh;overflow:auto}
.modal-caja h3{font-family:var(--display);font-weight:400;font-size:1.25rem;margin-bottom:1rem}
.modal-caja p{color:var(--on-paper-soft);font-size:.9rem;line-height:1.6;margin-bottom:.8rem}
.modal-caja .btn{margin-top:1rem}
footer{border-top:1px solid rgba(245,197,66,.16);padding:2.5rem 0 3.5rem;margin-top:3rem;color:var(--on-ink-soft);font-size:.86rem}
.pie-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}
.pie-marca{display:flex;align-items:center;gap:.9rem}
.pie-marca .logo{width:64px;height:64px}
.pie-marca b{display:block;font-family:var(--display);font-size:.95rem;color:var(--on-ink)}
.pie-in a{color:var(--on-ink-soft);text-decoration:none;margin-left:1.3rem}
.pie-in a:hover{color:var(--oro)}
/* enlace a Instagram */
.pie-in .ig{
  display:inline-flex;align-items:center;gap:.55rem;margin-left:0;
  color:var(--on-ink);font-weight:600;font-size:.95rem;
  border:1px solid rgba(245,197,66,.45);border-radius:999px;padding:.5rem 1.15rem;
  transition:background .15s ease,transform .15s ease;
}
.pie-in .ig:hover{background:rgba(245,197,66,.12);color:var(--on-ink);transform:translateY(-1px)}
.pie-in .ig svg{flex:none}
.demo-tag{
  display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px dashed rgba(167,158,140,.5);border-radius:999px;padding:.3rem .8rem;color:var(--on-ink-soft);margin-top:1.4rem;
}

/* ---------- el logo como protagonista ---------- */
/* halo dorado detrás del logo: hace que el emblema brille sobre el fondo negro */
.halo{
  position:relative;display:grid;place-items:center;border-radius:50%;flex:none;
  background:radial-gradient(circle,rgba(245,197,66,.30) 0%,rgba(245,197,66,.13) 46%,rgba(245,197,66,0) 72%);
}
.halo .logo{width:100%;height:100%}
.halo-sm{width:64px;height:64px}
.halo-pie{width:78px;height:78px}
.halo-hero{width:clamp(112px,15vw,156px);height:clamp(112px,15vw,156px)}

/* medallón grande en la portada */
.hero-marca{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}
.hero-marca .franjas{width:96px}

/* sello del logo en la banda del boleto destacado */
.banda-marca{display:flex;align-items:center;gap:.55rem}
.banda-marca .logo{width:28px;height:28px}

/* pantallas medianas: el menú se aprieta un poco para que los 4 enlaces
   quepan en una sola línea sin partirse. */
@media (max-width:1120px) and (min-width:901px){
  .nav-in{gap:1rem}
  .nav-links{gap:1.05rem}
  .nav-links a{font-size:.86rem}
  .nav-links .btn{padding-left:.9rem;padding-right:.9rem}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:2rem}
  .selector{grid-template-columns:1fr}
  .carrito{position:static}
  .pasos{grid-template-columns:1fr}
  .nav-links a:not(.btn){display:none}
  .marca-txt{display:none}
  .nav-in{gap:.8rem}
  .nav-links{gap:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- botón "otra cantidad" y su caja ---------- */
.combo.otra{
  background:linear-gradient(160deg,#14100A,#1B1B23);
  border:2px dashed rgba(245,197,66,.55); color:var(--on-ink); justify-content:center;
}
.combo.otra:hover{border-color:var(--oro)}
.combo.otra[aria-pressed="true"]{border-style:solid;border-color:var(--oro);box-shadow:0 0 0 4px rgba(245,197,66,.28)}
.tag.t-otra{background:transparent;color:var(--oro);border:1px solid var(--oro)}
.combo .qty-otra{font-size:2rem;line-height:1}
.combo.otra .lbl{color:var(--oro)}
.combo .val-otra{font-family:var(--mono);font-size:.78rem;color:var(--on-ink-soft);margin-top:.25rem}

.otra-caja{
  margin-top:1rem; padding:1.1rem 1.2rem; border-radius:14px;
  background:var(--ink-2); border:1px solid rgba(245,197,66,.4);
}
.oc-fila{display:flex; gap:1.2rem; align-items:flex-end; flex-wrap:wrap}
.oc-campo{flex:0 0 auto}
.oc-campo label{
  display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--on-ink-soft); margin-bottom:.4rem;
}
/* selector de cantidad:  [ − ]  30  [ + ] */
.oc-stepper{display:flex; align-items:stretch; gap:.55rem}
.oc-stepper input{
  width:120px; height:58px; background:var(--ink); border:1px solid rgba(245,197,66,.45); color:#fff;
  border-radius:14px; padding:0 .5rem; font-family:var(--display); font-size:1.7rem; text-align:center;
  -moz-appearance:textfield; appearance:textfield;
}
.oc-stepper input::-webkit-outer-spin-button,
.oc-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.oc-stepper input:focus{outline:none; border-color:var(--oro); box-shadow:0 0 0 3px rgba(245,197,66,.25)}
.oc-btn{
  flex:none; width:58px; height:58px; border-radius:14px; cursor:pointer;
  display:grid; place-items:center; padding:0;
  font-family:var(--body); font-size:2rem; font-weight:800; line-height:1; color:#14100A;
  background:linear-gradient(150deg,var(--oro-claro),var(--oro) 45%,var(--oro-hondo));
  border:0; box-shadow:0 8px 20px -10px rgba(245,197,66,.9), inset 0 0 0 1px rgba(255,247,234,.55);
  touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, filter .12s ease, opacity .2s ease;
}
.oc-btn:hover{filter:brightness(1.07)}
.oc-btn:active{transform:scale(.92)}
.oc-btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
.oc-btn:disabled{
  cursor:not-allowed; color:var(--on-ink-soft); filter:none; transform:none;
  background:var(--ink); box-shadow:inset 0 0 0 1px rgba(167,158,140,.3);
}
.oc-resumen{flex:1 1 220px; font-size:1rem; color:var(--on-ink); padding-bottom:.55rem}
.oc-resumen b{font-family:var(--display); font-size:1.25rem; font-weight:400}
.oc-resumen.mal{color:#E0574B}
.oc-gratis{
  display:inline-block; background:var(--verde); color:#fff; border-radius:999px;
  padding:.28rem .7rem; font-size:.75rem; font-weight:700; margin-left:.3rem;
}
@media (max-width:620px){
  .oc-campo{width:100%}
  .oc-stepper input{flex:1; width:auto; min-width:0}
  .oc-resumen{padding-bottom:0}
}

/* ---------- PayPal y USDT como métodos de pago ---------- */
.mp-nombre{
  font-family:var(--display); font-size:.92rem; letter-spacing:-.01em; line-height:1;
  display:block; text-align:center;
}
.mp-nombre.grande{font-size:1.15rem; text-align:left}
.mp-paypal{color:#0070BA}
.mp-usdt{color:#0d8f6f}
.cuenta-digital .cb-encabezado{align-items:center}
.cb-numero.cb-largo{font-size:.95rem; word-break:break-all; line-height:1.5}
.cb-numero.cb-dir{font-size:.85rem; letter-spacing:.01em}
.mp-abrir{
  display:inline-block; margin-top:.7rem; font-size:.85rem; font-weight:700;
  color:#0070BA; text-decoration:underline;
}
.mp-nota{margin-top:.7rem; font-size:.82rem; color:var(--on-paper-soft)}
.mp-alerta{
  margin-top:.8rem; padding:.7rem .85rem; border-radius:10px; font-size:.84rem; line-height:1.45;
  background:rgba(214,35,43,.1); border:1px solid rgba(214,35,43,.45); color:#A81820;
}
.mp-alerta b{color:#8E1219}
.monto-grande small{
  display:block; margin-top:.35rem; font-family:var(--mono); font-size:.74rem;
  font-weight:400; color:var(--on-ink-soft); letter-spacing:.02em;
}

/* ---------- código QR de pago ---------- */
.qr-caja{
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--paper-line);
}
.qr-marco{
  flex:none; background:#fff; border-radius:12px; padding:8px;
  border:1px solid var(--paper-line); line-height:0;
}
.qr-marco svg{display:block; border-radius:4px}
.qr-txt{display:flex; flex-direction:column; gap:.25rem; min-width:160px; flex:1}
.qr-txt b{font-family:var(--display); font-size:1rem; color:var(--on-paper)}
.qr-txt span{font-size:.84rem; color:var(--on-paper-soft); line-height:1.45}
@media (max-width:520px){
  .qr-caja{justify-content:center; text-align:center}
  .qr-txt{text-align:center}
}

/* ---------- número premiado (premio al instante) ---------- */
.misnums b.premiado, .ver-nums b.premiado{
  background:linear-gradient(140deg,#FFF3C4,var(--oro) 45%,var(--oro-hondo));
  color:#14100A; box-shadow:0 0 0 2px var(--oro-claro), 0 0 22px -2px rgba(245,197,66,.9);
  position:relative; animation:brilla 1.8s ease-in-out infinite;
}
@keyframes brilla{
  0%,100%{ box-shadow:0 0 0 2px var(--oro-claro), 0 0 14px -2px rgba(245,197,66,.7) }
  50%    { box-shadow:0 0 0 2px #FFF3C4,        0 0 30px 2px rgba(245,197,66,1) }
}

.gano-caja{
  position:relative; overflow:hidden; margin:1.2rem auto 0; max-width:32rem;
  background:linear-gradient(150deg,#1B1408,#2A2113 55%,#1B1408);
  border:2px solid var(--oro); border-radius:18px; padding:1.4rem 1.2rem; text-align:center;
  box-shadow:0 0 40px -10px rgba(245,197,66,.55);
}
.gano-brillo{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,243,196,.22) 50%,transparent 65%);
  transform:translateX(-100%); animation:pasa-brillo 3.2s ease-in-out infinite;
}
@keyframes pasa-brillo{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }
.gano-etq{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro); margin-bottom:.5rem;
}
.gano-caja h4{
  font-family:var(--display); font-weight:400; font-size:1.5rem; line-height:1.1;
  color:var(--on-ink); margin:0 0 .8rem;
}
.gano-nums{display:flex; gap:.45rem; justify-content:center; flex-wrap:wrap; margin-bottom:.8rem}
.gano-nums span{
  font-family:var(--mono); font-weight:700; font-size:1.15rem; color:#14100A;
  background:linear-gradient(140deg,#FFF3C4,var(--oro) 45%,var(--oro-hondo));
  border-radius:10px; padding:.4rem .7rem;
}
.gano-monto{font-size:1.05rem; color:var(--on-ink-soft); margin-bottom:.4rem}
.gano-monto b{font-family:var(--mono); font-size:1.5rem; color:var(--oro)}
.gano-txt{font-size:.88rem; color:var(--on-ink-soft); margin-bottom:1rem; max-width:34ch; margin-inline:auto}
.gano-caja .btn-wa{display:inline-flex; align-items:center; gap:.5rem}

/* franja pública con los números premiados de la rifa */
.premiados-franja{
  margin-top:1rem; padding:1rem 1.1rem; border-radius:14px;
  background:var(--ink-2); border:1px dashed rgba(245,197,66,.5);
}
.premiados-franja .pf-tit{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--oro); margin-bottom:.5rem;
}
.premiados-franja .pf-nums{display:flex; gap:.4rem; flex-wrap:wrap}
.premiados-franja .pf-nums span{
  font-family:var(--mono); font-weight:700; font-size:.95rem; color:var(--oro);
  background:rgba(245,197,66,.12); border:1px solid rgba(245,197,66,.4);
  border-radius:9px; padding:.3rem .6rem;
}
.premiados-franja .pf-pie{font-size:.84rem; color:var(--on-ink-soft); margin-top:.6rem}
@media (prefers-reduced-motion: reduce){
  .misnums b.premiado, .ver-nums b.premiado{animation:none}
  .gano-brillo{animation:none}
}

/* ---------- sección de números premiados (página principal) ---------- */
#premiados{padding-top:0}
.pm-caja{
  position:relative; overflow:hidden; border-radius:22px; padding:clamp(1.5rem,4vw,2.4rem);
  background:linear-gradient(155deg,#1A1408 0%,#221A0C 40%,#12100C 100%);
  border:1px solid rgba(245,197,66,.45);
  box-shadow:0 26px 70px -30px rgba(245,197,66,.5);
  text-align:center;
}
.pm-luz{
  position:absolute; top:-40%; left:50%; width:120%; height:120%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, rgba(245,197,66,.18), transparent 60%);
  pointer-events:none;
}
.pm-cab{position:relative}
.pm-etq{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oro); margin-bottom:.7rem;
}
.pm-caja h2{font-size:clamp(1.6rem,4.2vw,2.4rem); line-height:1.05}
.pm-caja h2 em{font-style:normal; color:var(--oro)}
.pm-bajada{margin:.8rem auto 0; color:var(--on-ink-soft); max-width:48ch; font-size:.98rem}

.pm-marcador{
  display:inline-flex; align-items:baseline; gap:.45rem; margin-top:1.1rem;
  background:rgba(245,197,66,.1); border:1px solid rgba(245,197,66,.4);
  border-radius:999px; padding:.45rem 1.1rem;
}
.pm-marcador b{font-family:var(--mono); font-size:1.15rem; color:var(--oro)}
.pm-marcador b.pocos{color:#FF9A6B}
.pm-marcador span{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-soft)}

.pm-rejilla{
  position:relative; display:grid; gap:.8rem; margin-top:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
}
.pm-num{
  position:relative; overflow:hidden; border-radius:14px; padding:1rem .6rem .8rem;
  background:linear-gradient(150deg,#FFF3C4,var(--oro) 45%,var(--oro-hondo));
  border:2px solid var(--oro-claro); color:#14100A;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  box-shadow:0 10px 26px -12px rgba(245,197,66,.8);
}
.pm-num b{font-family:var(--mono); font-size:1.6rem; font-weight:700; letter-spacing:.06em; line-height:1}
.pm-monto{
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.04em;
  background:#14100A; color:var(--oro); border-radius:999px; padding:.22rem .6rem;
}
.pm-brillo{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-100%); animation:pm-pasa 3.4s ease-in-out infinite;
}
@keyframes pm-pasa{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* ya salió: apagado, en gris */
.pm-num.tomado{
  background:linear-gradient(150deg,#3A3A42,#2A2A31 60%,#23232A);
  border-color:rgba(167,158,140,.3); color:var(--on-ink-soft);
  box-shadow:none; filter:saturate(.2);
}
.pm-num.tomado b{color:#8B8B95; text-decoration:line-through; text-decoration-thickness:2px}
.pm-num.tomado .pm-monto{background:#1A1A20; color:#8B8B95}
.pm-monto.pm-ya{
  background:#1A1A20; color:#8B8B95; letter-spacing:.1em; text-transform:uppercase; font-size:.6rem;
}

.pm-pie{margin-top:1.4rem; font-size:.88rem; color:var(--on-ink-soft)}
.pm-pie.agotado{color:#E0574B}
.pm-boton{margin-top:1.3rem}

@media (max-width:520px){
  .pm-rejilla{grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:.6rem}
  .pm-num{padding:.8rem .4rem .65rem}
  .pm-num b{font-size:1.25rem}
  .pm-monto{font-size:.64rem}
  .pm-boton{width:100%; text-align:center}
}
@media (prefers-reduced-motion: reduce){ .pm-brillo{animation:none} }

/* en la franja de la zona de compra, los tomados también en gris */
.premiados-franja .pf-nums span.tomado{
  color:#8B8B95; background:rgba(167,158,140,.08); border-color:rgba(167,158,140,.25);
  text-decoration:line-through;
}

/* ---------- botón flotante de soporte ---------- */
.soporte{
  position:fixed; z-index:70; text-decoration:none;
  right:clamp(.9rem,3vw,1.6rem);
  bottom:calc(clamp(.9rem,3vw,1.6rem) + env(safe-area-inset-bottom,0px));
  display:block;
  transition:opacity .3s ease, transform .3s ease;
}
.soporte.escondido{opacity:0; transform:translateY(18px) scale(.85); pointer-events:none}

.soporte-circulo{
  position:relative; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; color:#14100A;
  background:linear-gradient(150deg,var(--oro-claro),var(--oro) 45%,var(--oro-hondo));
  box-shadow:0 12px 30px -8px rgba(245,197,66,.8), inset 0 0 0 1px rgba(255,247,234,.55);
  transition:transform .2s ease, box-shadow .2s ease;
}
.soporte:hover .soporte-circulo{transform:scale(1.07); box-shadow:0 16px 38px -8px rgba(245,197,66,.95), inset 0 0 0 1px rgba(255,247,234,.8)}
.soporte:active .soporte-circulo{transform:scale(.96)}
.soporte-circulo svg{position:relative; z-index:1}

/* aro que late, para que se note sin molestar */
.soporte-circulo::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--oro); animation:sop-late 2.8s ease-out infinite;
}
@keyframes sop-late{
  0%{transform:scale(1); opacity:.65}
  70%,100%{transform:scale(1.55); opacity:0}
}

.soporte-punto{
  position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:var(--rojo); border:2.5px solid var(--paper); z-index:2;
  animation:sop-punto 2.4s ease-in-out infinite;
}
@keyframes sop-punto{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

.soporte-txt{
  position:absolute; right:72px; top:50%;
  transform:translateY(-50%) translateX(10px); opacity:0; pointer-events:none;
  background:#14100A; color:var(--oro); border:1px solid rgba(245,197,66,.45);
  border-radius:999px; padding:.58rem 1.05rem; white-space:nowrap;
  font-size:.86rem; font-weight:700; line-height:1;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.9);
  transition:opacity .28s ease, transform .28s ease;
}
.soporte:hover .soporte-txt,
.soporte:focus-visible .soporte-txt,
.soporte.abierto .soporte-txt{ opacity:1; transform:translateY(-50%) translateX(0) }

@media (max-width:520px){
  .soporte-circulo{width:54px; height:54px}
  .soporte-circulo svg{width:27px; height:27px}
  .soporte-txt{right:64px; font-size:.8rem; padding:.5rem .9rem}
}
@media (prefers-reduced-motion: reduce){
  .soporte-circulo::after, .soporte-punto{animation:none}
}

/* ---------- cartelito de compras recientes (abajo a la izquierda) ---------- */
.compra-aviso{
  position:fixed; z-index:69;
  left:clamp(.9rem,3vw,1.6rem);
  bottom:calc(clamp(.9rem,3vw,1.6rem) + env(safe-area-inset-bottom,0px));
  max-width:330px;
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem 2.1rem .7rem .75rem;
  background:linear-gradient(160deg,#17130B,#0E0C09);
  border:1px solid rgba(245,197,66,.4); border-radius:16px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
  color:var(--on-ink); font-size:.86rem; line-height:1.3;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.compra-aviso.visible{opacity:1; transform:none; pointer-events:auto}
.compra-aviso .ca-icono{
  flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-size:1.25rem; background:rgba(245,197,66,.12); border:1px solid rgba(245,197,66,.3);
}
.compra-aviso .ca-txt{display:flex; flex-direction:column; min-width:0}
.compra-aviso b{color:#fff; font-weight:800}
.compra-aviso #caQue{color:var(--oro-claro)}
.compra-aviso small{font-size:.74rem; color:var(--on-ink-soft); margin-top:.15rem}
.compra-aviso .ca-ok{font-style:normal; color:#3FD68F}
.compra-aviso .ca-cerrar{
  position:absolute; top:.3rem; right:.35rem; width:26px; height:26px; border-radius:50%;
  border:0; background:transparent; color:var(--on-ink-soft); font-size:1.15rem; line-height:1; cursor:pointer;
}
.compra-aviso .ca-cerrar:hover{color:#fff; background:rgba(255,255,255,.08)}

/* en el celular deja libre el botón de WhatsApp de la derecha */
@media (max-width:520px){
  .compra-aviso{max-width:calc(100% - 100px); font-size:.8rem; padding:.6rem 1.9rem .6rem .6rem; gap:.55rem}
  .compra-aviso .ca-icono{width:34px; height:34px; font-size:1.05rem}
}
@media (prefers-reduced-motion: reduce){
  .compra-aviso{transition:opacity .2s ease; transform:none}
}

/* logo grande dentro de la tarjeta del método de pago.
   Lleva el selector completo porque .cb-encabezado img lo achicaba a 22px. */
.cb-encabezado img.cb-logo-mp{
  width:auto; height:58px; object-fit:contain; border-radius:0; display:block;
}
/* los logos que son una moneda redonda van más chicos y al lado del nombre */
.cb-encabezado img.cb-logo-redondo{ height:38px }

/* ============================================================
   VERSIÓN COMPACTA — menos aire, más contenido por pantalla.
   Para volver al diseño original, borra desde aquí hasta el
   final del archivo.
   ============================================================ */
:root{--pad:clamp(.85rem,2vw,1.3rem)}

/* anclas: la barra superior ahora es más baja */
html{scroll-padding-top:70px}
.gracias,#verificar,#comprar,#rifas,#como,#ganadores,#preguntas{scroll-margin-top:70px}

/* barra superior */
.nav-in{padding:.4rem 0;gap:1rem}
.halo-sm{width:50px;height:50px}
.marca{gap:.6rem}

/* portada */
.hero{padding:clamp(.8rem,2.5vw,1.4rem) 0 1rem;gap:clamp(1.2rem,3vw,2.2rem)}
.hero h1{font-size:clamp(1.9rem,4.4vw,2.8rem);margin-top:.5rem}
.hero .bajada{margin-top:.6rem;font-size:1rem}
.hero-cta{margin-top:1rem;gap:.6rem}
.btn-lg{padding:.72rem 1.5rem;font-size:.94rem}
.sellos{margin-top:1.1rem;padding-top:.8rem;gap:1rem}
.hero-marca{margin-bottom:.8rem;gap:.55rem}
.halo-hero{width:clamp(80px,10vw,108px);height:clamp(80px,10vw,108px)}

/* boleto destacado */
.destacado{--corte:calc(100% - 106px)}
.destacado .banda{padding:.5rem 1.15rem}
.destacado .cuerpo{padding:1rem 1.15rem;gap:.75rem}
.premio-fila h2{font-size:1.4rem}
.premio-fila .precio{font-size:1.25rem}
.aro{width:62px;height:62px}
.aro span{width:46px;height:46px;font-size:.82rem}
.progreso{gap:.8rem}
.talon{padding:.7rem 1.15rem .8rem}
.cuenta div{padding:.35rem .5rem;min-width:46px}
.cuenta b{font-size:1rem}

/* premio extra */
.premio-extra{padding:1rem 1.2rem;margin-bottom:.75rem;gap:1rem}
.pe-medalla{width:50px;height:50px}
.pe-etiqueta{margin-bottom:.25rem}
.premio-extra h2{font-size:clamp(1.02rem,2.2vw,1.28rem);margin-bottom:.3rem}
.pe-detalle{font-size:.88rem}

/* secciones */
section{padding:clamp(1.4rem,3.4vw,2.3rem) 0}
.sec-cab{margin-bottom:1.1rem}
.sec-cab .franjas{margin-bottom:.55rem}
.sec-cab h2{font-size:clamp(1.35rem,3vw,1.85rem)}
.sec-cab p{margin-top:.4rem}

/* pasos */
.pasos{gap:.8rem}
.paso{padding:1rem}
.paso b{margin:.55rem 0 .25rem;font-size:1rem}
.paso p{font-size:.88rem}

/* cómo se eligen los ganadores */
.explica{padding:1.05rem 1.15rem;gap:.6rem}
.ex-paso{gap:.9rem}
.ex-paso b{font-size:.95rem}
.ex-premios{gap:.75rem}
.ex-premio{padding:.8rem}
.ex-texto{margin-bottom:.5rem}
.ex-vuelta{margin-top:.4rem}
.ex-nota{margin-top:.6rem;font-size:.85rem}
.cifra{width:32px;height:40px;font-size:1.05rem;border-radius:8px}
.cifras-fila.grande .cifra{width:38px;height:46px;font-size:1.2rem}

/* catálogo */
.rejilla{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:.9rem}
.rifa{--corte:122px}
.rifa .arte{height:96px}
.rifa .info{padding:.85rem .95rem .3rem;gap:.35rem}
.rifa h3{font-size:1rem}
.rifa .pie{padding:.6rem .95rem .85rem}
.rifa .pie .p{font-size:1rem}
.rifa .btn{font-size:.78rem;padding:.5rem .95rem}

/* compra */
.selector{padding:1.05rem 1.15rem;gap:1rem}
.avance{gap:.75rem}
.avance .pct b{font-size:clamp(2.1rem,6vw,3.1rem)}
.barra-gorda{height:12px}
.datos{gap:.5rem}
.datos div{padding:.6rem .75rem}
.combos{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:.8rem;margin-top:.8rem}
.combo{padding:.85rem .8rem .8rem;gap:.3rem}
.combo .qty{font-size:1.7rem}
.combo .qty-otra{font-size:1.5rem}
.combo .val{font-size:1.02rem;margin-top:.15rem}
.combo .gratis{padding:.28rem .65rem;margin-top:.25rem}
.otra-caja{margin-top:.7rem;padding:.85rem .95rem}
.oc-stepper input{font-size:1.55rem}
.confirmo{margin:.8rem 0 .6rem;padding:.8rem 1rem}
.resumen{padding:.85rem 1rem;gap:.9rem}
.resumen .tot b{font-size:1.5rem}
.nota-pago{margin-top:1.4rem;padding:.9rem 1.1rem}
.nota-pago.compacta{padding:.7rem .95rem}
.subir-comp{padding:1.1rem}
.subir-comp b{margin:.5rem 0 .2rem}
.btn-subir{margin-top:.7rem;padding:.55rem 1.2rem;font-size:.85rem}
.nombre-archivo{margin-top:.5rem}
.subir-comp .terminos{margin-top:.8rem;padding-top:.7rem}
.info-evento{margin-bottom:.9rem}
.info-evento .titulo{margin-bottom:.5rem}
.info-evento .caja{padding:.95rem 1.1rem}
.pe-mini{padding:.55rem .85rem;margin-bottom:.6rem}
.aviso-pendiente{padding:.8rem 1rem;margin-bottom:1rem}

/* verificador */
.verifica{padding:1.05rem 1.15rem}
.campo{margin-top:.7rem}
.campo input{padding:.62rem .9rem}
.resultado{margin-top:.7rem}
.contacto-wa{margin-top:.8rem;padding:.95rem 1.15rem}
.ver-titulo{font-size:clamp(1.3rem,3.5vw,1.7rem);margin-bottom:.45rem}
.ver-sub{margin:0 auto 1rem}
.ver-sello{width:70px;height:70px;margin:0 auto .8rem}
.ver-tarjeta{padding:.9rem 1rem;margin-bottom:.7rem}
.ver-rifa{margin-bottom:.7rem}
.ver-nums{padding:.8rem .7rem}
.ver-datos{margin-top:.8rem}
.sello-revision{margin-bottom:.6rem}
.gano-caja{margin:.9rem auto 0;padding:1.05rem .95rem}
.gano-nums{margin-bottom:.6rem}
.gano-txt{margin-bottom:.7rem}
.premiados-franja{margin-top:.7rem;padding:.8rem .9rem}
/* el cartel del premio va de primero en la tarjeta de gracias: se le da aire abajo */
.gracias #gPremiado:not(:empty){margin-bottom:1rem}

/* ganadores */
.ganadores{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:.8rem}
.gan{--corte:66px;padding-bottom:.8rem}
.gan .top{padding:.85rem .95rem .9rem}
.gan .bot{padding:.6rem .95rem .1rem}

/* preguntas */
.faq{gap:.5rem}
.faq details{padding:.7rem 1rem}
.faq p{margin-top:.45rem}

/* números premiados */
.pm-caja{padding:clamp(1.05rem,3vw,1.6rem)}
.pm-etq{margin-bottom:.45rem}
.pm-caja h2{font-size:clamp(1.3rem,3.2vw,1.85rem)}
.pm-bajada{margin:.5rem auto 0;font-size:.92rem}
.pm-marcador{margin-top:.7rem}
.pm-rejilla{margin-top:1.1rem;gap:.65rem;grid-template-columns:repeat(auto-fit,minmax(106px,1fr))}
.pm-num{padding:.7rem .5rem .55rem;gap:.25rem}
.pm-num b{font-size:1.25rem}
.pm-pie{margin-top:.9rem}
.pm-boton{margin-top:.9rem}

/* modal de términos */
.modal-caja{padding:1.2rem}

/* pie de página */
footer{padding:1.4rem 0 1.8rem;margin-top:1.4rem}
.halo-pie{width:58px;height:58px}

/* pantallas chicas: la versión compacta también se aplica ahí */
@media (max-width:700px){
  .premio-extra{padding:.85rem 1rem;gap:.8rem}
}
@media (max-width:620px){
  .confirmo{padding:.7rem .85rem;gap:.65rem}
  .ex-premios{grid-template-columns:1fr}
  .cifra{width:28px;height:36px;font-size:.95rem}
  .cifras-fila.grande .cifra{width:34px;height:42px;font-size:1.1rem}
  .oc-campo{width:100%}
}
@media (max-width:520px){
  .pm-rejilla{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:.5rem}
  .pm-num{padding:.6rem .35rem .5rem}
  .pm-num b{font-size:1.1rem}
}

/* ============================================================
   MENÚ DE ARRIBA EN CELULAR
   Los dos botones (Comprar / Verificar) tienen que caber junto al
   logo sin cortarse. En pantallas muy angostas se acorta el texto:
   "Comprar boletos" -> "Comprar", "Verificar boleto" -> "Verificar".
   ============================================================ */
@media (max-width:900px){
  .nav-links .btn{padding:.55rem 1rem;font-size:.84rem}
}
@media (max-width:520px){
  .nav-in{gap:.6rem}
  .nav-links{gap:.5rem}
  .halo-sm{width:44px;height:44px}
  .nav-links .btn{padding:.5rem .85rem;font-size:.8rem}
}
@media (max-width:420px){
  .nav-links .nav-largo{display:none}
}

/* algunos brillos decorativos se salían unos píxeles por el lado en
   celulares angostos y la página se movía de lado */
main{overflow-x:clip}

/* banco sin logo: su nombre en letras dentro del cuadrito */
.mp-banco{color:var(--on-paper);font-size:.62rem;padding:0 .25rem;word-break:normal;overflow-wrap:normal;line-height:1.05}