/* La Gran Rifa — estilos */
:root {
  --bg: #04050c;
  --bg2: #0a0e22;
  --panel: rgba(18, 24, 56, .55);
  --panel-solido: #0e1330;
  --borde: rgba(140, 170, 255, .14);
  --texto: #eef1ff;
  --suave: #9ba5d0;
  --azul: #2f6bff;
  --cian: #3ee6ff;
  --violeta: #8b5cff;
  --oro: #ffd257;
  --oro2: #ff9d1c;
  --verde: #2ee59d;
  --rojo: #ff4d6d;
  --rosa: #ff6ad5;
  --radio: 22px;
  --fuente-titulo: "Russo One", "Arial Black", sans-serif;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fuente);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
.envoltura { width: min(1180px, 100% - 32px); margin-inline: auto; position: relative; z-index: 2; }

/* ───────── Fondo vivo ───────── */
.fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fondo .mancha { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; animation: flotar 18s ease-in-out infinite alternate; }
.fondo .m1 { width: 620px; height: 620px; background: #1b3dff; top: -200px; left: -160px; }
.fondo .m2 { width: 520px; height: 520px; background: #7a2bff; top: 30%; right: -200px; animation-delay: -6s; }
.fondo .m3 { width: 460px; height: 460px; background: #00b3ff; bottom: -220px; left: 30%; opacity: .35; animation-delay: -12s; }
@keyframes flotar { to { transform: translate(80px, 60px) scale(1.15); } }
.fondo .grilla {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%;
  background-image:
    linear-gradient(rgba(62, 230, 255, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 230, 255, .22) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(500px) rotateX(62deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: avanzar 3.5s linear infinite;
  opacity: .5;
}
@keyframes avanzar { to { background-position: 0 64px, 0 0; } }
#particulas { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.ruido { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ───────── Barra superior ───────── */
.barra { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); background: rgba(4, 5, 12, .55); border-bottom: 1px solid var(--borde); }
.barra .envoltura { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--fuente-titulo); letter-spacing: .5px; font-size: 1.05rem; }
.logo .simbolos { display: grid; grid-template-columns: repeat(2, 12px); gap: 3px; }
.logo .simbolos i { width: 12px; height: 12px; display: block; }
.s-tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #2ee59d; }
.s-cir { border-radius: 50%; background: #ff4d6d; }
.s-x { background: #3ea0ff; clip-path: polygon(20% 0,50% 30%,80% 0,100% 20%,70% 50%,100% 80%,80% 100%,50% 70%,20% 100%,0 80%,30% 50%,0 20%); }
.s-cua { background: #ff6ad5; border-radius: 2px; }
.barra nav { display: flex; align-items: center; gap: 6px; }
.barra nav a.link { color: var(--suave); font-size: .9rem; padding: 8px 12px; border-radius: 10px; transition: .2s; }
.barra nav a.link:hover { color: var(--texto); background: rgba(255,255,255,.06); }
.btn-tiktok { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-weight: 700; font-size: .88rem;
  background: #000; border: 1px solid rgba(255,255,255,.15); box-shadow: -2px -2px 0 #25f4ee inset, 2px 2px 0 #fe2c55 inset; transition: transform .2s; }
.btn-tiktok:hover { transform: translateY(-2px); }
.btn-tiktok svg { width: 16px; height: 16px; }

/* ───────── Botones ───────── */
.btn-mega {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 34px; border-radius: 18px; border: 0; cursor: pointer;
  font-family: var(--fuente-titulo); font-size: 1.15rem; letter-spacing: .5px; text-transform: uppercase; color: #1b1000;
  background: linear-gradient(135deg, #fff2a8 0%, var(--oro) 30%, var(--oro2) 100%);
  box-shadow: 0 10px 40px -8px rgba(255, 170, 30, .7), 0 0 0 1px rgba(255,255,255,.4) inset;
  transition: transform .2s, box-shadow .2s; overflow: hidden; isolation: isolate;
}
.btn-mega::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  transform: translateX(-120%); animation: brillo 3.2s ease-in-out infinite; }
@keyframes brillo { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn-mega:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 50px -8px rgba(255, 170, 30, .85), 0 0 0 1px rgba(255,255,255,.5) inset; }
.btn-mega:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn-fantasma { display: inline-flex; align-items: center; gap: 10px; padding: 17px 26px; border-radius: 18px; font-weight: 700;
  border: 1px solid var(--borde); background: rgba(255,255,255,.04); transition: .2s; }
.btn-fantasma svg { width: 18px; height: 18px; }
.btn-fantasma:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }

/* ───────── Hero ───────── */
.hero { padding: 64px 0 40px; }
.hero .envoltura { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.pildora { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: rgba(255, 77, 109, .12); border: 1px solid rgba(255, 77, 109, .35); color: #ffc2cd; }
.pildora .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0 rgba(255,77,109,.7); animation: latido 1.6s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(255,77,109,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0); } }
.hero h1 { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: .98; margin: 22px 0 18px; letter-spacing: -.5px; text-transform: uppercase; }
.hero h1 .ps { background: linear-gradient(90deg, #6aa8ff, var(--cian), #b48cff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(62, 160, 255, .55)); }
.hero h1 .precio { display: inline-block; background: linear-gradient(180deg, #fff6c4, var(--oro) 45%, var(--oro2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 190, 40, .55)); }
.hero .sub { font-size: 1.15rem; color: var(--suave); max-width: 540px; }
.hero .sub b { color: var(--texto); }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 34px; }
.contadores { display: flex; gap: 12px; flex-wrap: wrap; }
.contador { padding: 14px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--borde); min-width: 130px; backdrop-filter: blur(10px); }
.contador .valor { font-family: var(--fuente-titulo); font-size: 1.7rem; line-height: 1.1; }
.contador .etiqueta { font-size: .78rem; color: var(--suave); text-transform: uppercase; letter-spacing: 1px; }
.contador.oro .valor { color: var(--oro); }
.contador.cian .valor { color: var(--cian); }

.escenario { position: relative; aspect-ratio: 1; max-width: 560px; margin-inline: auto; width: 100%; }
.escenario .aro { position: absolute; inset: 6%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(62,230,255,.9), transparent 30%, rgba(139,92,255,.9), transparent 60%, rgba(255,210,87,.9), transparent 90%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: girar 9s linear infinite; }
.escenario .aro.a2 { inset: 14%; animation-duration: 14s; animation-direction: reverse; opacity: .6; }
@keyframes girar { to { transform: rotate(360deg); } }
.escenario .halo { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(47,107,255,.55), rgba(139,92,255,.2) 50%, transparent 70%); filter: blur(10px); animation: respirar 4s ease-in-out infinite; }
@keyframes respirar { 50% { transform: scale(1.08); opacity: .8; } }
.escenario .consola { position: absolute; left: 8%; right: 8%; top: 46%; animation: levitar 6s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.escenario .mando { position: absolute; width: 58%; filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(62,160,255,.25)); }
.escenario .mando.m1 { left: 2%; top: 14%; transform: rotate(-14deg); animation: levitar 5s ease-in-out infinite; }
.escenario .mando.m2 { right: 0; top: 22%; width: 50%; transform: rotate(12deg); animation: levitar2 5.6s ease-in-out infinite; }
@keyframes levitar { 50% { translate: 0 -14px; } }
@keyframes levitar2 { 50% { translate: 0 12px; } }
.ticket-flotante { position: absolute; right: 2%; bottom: 8%; width: 46%; transform: rotate(-8deg); animation: levitar 4.5s ease-in-out infinite;
  filter: drop-shadow(0 18px 30px rgba(255, 160, 20, .35)); }
.chip-premio { position: absolute; left: 0; bottom: 14%; padding: 10px 14px; border-radius: 14px; background: rgba(10, 14, 34, .85); border: 1px solid var(--borde);
  font-size: .82rem; backdrop-filter: blur(8px); animation: levitar2 6s ease-in-out infinite; }
.chip-premio b { display: block; font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--verde); font-weight: 400; }

/* ───────── Cinta ───────── */
.cinta { position: relative; z-index: 2; margin: 30px 0; transform: rotate(-1.5deg); background: linear-gradient(90deg, var(--oro2), var(--oro), #fff2a8, var(--oro), var(--oro2)); color: #1b1000;
  overflow: hidden; box-shadow: 0 10px 40px -10px rgba(255,170,30,.6); }
.cinta .pista { display: flex; width: max-content; animation: cinta 28s linear infinite; }
.cinta span { font-family: var(--fuente-titulo); text-transform: uppercase; padding: 14px 22px; white-space: nowrap; font-size: 1.05rem; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ───────── Secciones ───────── */
section { position: relative; z-index: 2; }
.seccion { padding: 90px 0; }
.encabezado { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.encabezado .ante { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--cian); margin-bottom: 12px; }
.encabezado h2 { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.05; text-transform: uppercase; }
.encabezado p { color: var(--suave); margin-top: 14px; font-size: 1.08rem; }
.dorado { background: linear-gradient(180deg, #fff6c4, var(--oro) 45%, var(--oro2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ───────── Premios ───────── */
.premios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.premio-mayor { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 24px; padding: 40px;
  border-radius: 30px; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 100% 0%, rgba(62,160,255,.35), transparent 50%), linear-gradient(135deg, #0d1a4d, #12093a 60%, #0a0e22);
  border: 1px solid rgba(110, 160, 255, .35); }
.premio-mayor::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; z-index: -1;
  background: conic-gradient(from var(--ang, 0deg), var(--cian), var(--violeta), var(--oro), var(--cian));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor; animation: borde-gira 6s linear infinite; }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes borde-gira { to { --ang: 360deg; } }
.medalla { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase;
  background: linear-gradient(135deg, var(--oro), var(--oro2)); color: #1b1000; }
.premio-mayor h3 { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; margin: 18px 0 14px; text-transform: uppercase; }
.premio-mayor ul { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.premio-mayor li { display: flex; gap: 12px; align-items: center; font-size: 1.05rem; }
.premio-mayor li i { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(62,230,255,.15); color: var(--cian); font-style: normal; font-weight: 800; }
.premio-mayor .arte { position: relative; }
.premio-mayor .arte svg { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }

.premio { position: relative; padding: 28px 22px 24px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--borde); overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s; backdrop-filter: blur(10px); }
.premio:hover { transform: translateY(-6px); border-color: rgba(255, 210, 87, .5); box-shadow: 0 20px 50px -20px rgba(255, 190, 40, .5); }
.premio .lugar { font-family: var(--fuente-titulo); font-size: 4.5rem; line-height: .8; position: absolute; right: 14px; top: 14px; color: rgba(255,255,255,.06); }
.premio .etiqueta { font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--suave); font-weight: 700; }
.premio .monto { font-family: var(--fuente-titulo); font-size: 2.3rem; margin: 10px 0 6px; line-height: 1; }
.premio .detalle { color: var(--suave); font-size: .9rem; }
.premio .billetes { height: 6px; border-radius: 999px; margin-top: 18px; background: rgba(255,255,255,.06); overflow: hidden; }
.premio .billetes span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--verde), var(--oro)); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 26px; }
.galeria img { border-radius: 18px; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--borde); }

/* ───────── Lo peor que puede pasar ───────── */
.balanza { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; }
.platillo { padding: 36px 30px; border-radius: 28px; border: 1px solid var(--borde); position: relative; overflow: hidden; }
.platillo.peor { background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); }
.platillo.mejor { background: radial-gradient(100% 120% at 100% 0%, rgba(255,210,87,.25), transparent 60%), linear-gradient(160deg, rgba(47,107,255,.25), rgba(139,92,255,.12)); border-color: rgba(255,210,87,.35); }
.platillo .tag { font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; color: var(--suave); }
.platillo .cifra { font-family: var(--fuente-titulo); font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; margin: 14px 0; }
.platillo.peor .cifra { color: #c8cee8; }
.platillo p { color: var(--suave); }
.platillo p b { color: var(--texto); }
.vs { align-self: center; font-family: var(--fuente-titulo); font-size: 1.6rem; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--azul), var(--violeta)); box-shadow: 0 0 40px rgba(110, 90, 255, .6); }
.frase-grande { text-align: center; margin-top: 42px; font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--suave); }
.frase-grande b { color: var(--texto); }

/* ───────── Compra ───────── */
.compra { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: start; }
.tarjeta { padding: 32px; border-radius: 28px; background: rgba(12, 16, 40, .78); border: 1px solid var(--borde); backdrop-filter: blur(14px); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.tarjeta h3 { font-family: var(--fuente-titulo); font-weight: 400; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 4px; }
.tarjeta .ayuda { color: var(--suave); font-size: .92rem; }
.paso-titulo { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; font-weight: 800; }
.paso-titulo .n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-family: var(--fuente-titulo); font-weight: 400;
  background: linear-gradient(135deg, var(--azul), var(--violeta)); font-size: .95rem; }
.paquetes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.paquete { position: relative; padding: 16px 10px 14px; border-radius: 16px; border: 1.5px solid var(--borde); background: rgba(255,255,255,.03); cursor: pointer; text-align: center; transition: .2s; }
.paquete:hover { border-color: rgba(62,230,255,.5); transform: translateY(-2px); }
.paquete.activo { border-color: var(--cian); background: rgba(62,230,255,.1); box-shadow: 0 0 0 4px rgba(62,230,255,.12), 0 10px 30px -10px rgba(62,230,255,.5); }
.paquete .c { font-family: var(--fuente-titulo); font-size: 1.7rem; line-height: 1; }
.paquete .u { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--suave); }
.paquete .p { font-weight: 800; margin-top: 6px; color: var(--oro); font-size: .95rem; }
.paquete .cinta-mini { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .65rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg, var(--rosa), var(--violeta)); }
.paso-a-paso { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--borde); }
.paso-a-paso button { width: 50px; height: 50px; border-radius: 14px; border: 1px solid var(--borde); background: rgba(255,255,255,.05); font-size: 1.5rem; cursor: pointer; transition: .15s; }
.paso-a-paso button:hover { background: rgba(255,255,255,.12); }
.paso-a-paso button:active { transform: scale(.93); }
.paso-a-paso input { width: 100%; text-align: center; background: none; border: 0; font-family: var(--fuente-titulo); font-size: 2rem; outline: none; -moz-appearance: textfield; }
.paso-a-paso input::-webkit-outer-spin-button, .paso-a-paso input::-webkit-inner-spin-button { -webkit-appearance: none; }
.chances { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(46,229,157,.12), rgba(62,230,255,.06)); border: 1px solid rgba(46,229,157,.3); font-size: .95rem; }
.chances b { color: var(--verde); }
.campos { display: grid; gap: 12px; }
.campo label { display: block; font-size: .82rem; font-weight: 700; color: var(--suave); margin-bottom: 6px; }
.campo input { width: 100%; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--borde); background: rgba(0,0,0,.3); outline: none; transition: .2s; font-size: 1rem; }
.campo input:focus { border-color: var(--cian); box-shadow: 0 0 0 4px rgba(62,230,255,.14); }
.campo .prefijo { display: flex; align-items: center; border-radius: 14px; border: 1px solid var(--borde); background: rgba(0,0,0,.3); transition: .2s; }
.campo .prefijo:focus-within { border-color: var(--cian); box-shadow: 0 0 0 4px rgba(62,230,255,.14); }
.campo .prefijo span { padding-left: 16px; color: var(--suave); font-weight: 700; }
.campo .prefijo input { border: 0; background: none; box-shadow: none; }
.acepto { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: .9rem; color: var(--suave); cursor: pointer; }
.acepto input { width: 20px; height: 20px; accent-color: var(--cian); margin-top: 2px; flex: none; }
.acepto a { color: var(--cian); text-decoration: underline; }
.total { display: flex; align-items: flex-end; justify-content: space-between; margin: 24px 0 16px; padding-top: 20px; border-top: 1px dashed rgba(255,255,255,.15); }
.total .t { color: var(--suave); font-size: .9rem; }
.total .monto { font-family: var(--fuente-titulo); font-size: 2.4rem; line-height: 1; }
.tarjeta .btn-mega { width: 100%; }
.error { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.4); color: #ffd0d8; font-size: .92rem; }
.error.visible { display: block; }
.metodos { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.metodos span { font-size: .75rem; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--borde); color: var(--suave); }
.metodos .mp { background: #009ee3; color: #fff; border-color: transparent; }
.seguro { text-align: center; font-size: .8rem; color: var(--suave); margin-top: 10px; }
.cerrado { text-align: center; padding: 30px; }
.cerrado h3 { margin-bottom: 10px; }

/* Ticket vista previa */
.lado-ticket { position: sticky; top: 96px; display: grid; gap: 18px; }
.ticket { position: relative; border-radius: 22px; padding: 26px 26px 22px; color: #1b1000; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, #fff8d6, transparent 60%), linear-gradient(135deg, #ffe17a, #ffbf2f 55%, #ff9d1c);
  box-shadow: 0 30px 60px -20px rgba(255,160,20,.55), 0 0 0 1px rgba(255,255,255,.5) inset;
  mask: radial-gradient(circle 14px at 0 64%, transparent 98%, #000) , radial-gradient(circle 14px at 100% 64%, transparent 98%, #000);
  mask-composite: intersect; -webkit-mask-composite: source-in;
  -webkit-mask: radial-gradient(circle 14px at 0 64%, transparent 98%, #000), radial-gradient(circle 14px at 100% 64%, transparent 98%, #000); }
.ticket::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-100%); animation: brillo 4s ease-in-out infinite; }
.ticket .t-cab { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; opacity: .75; }
.ticket .t-titulo { font-family: var(--fuente-titulo); font-size: 1.7rem; line-height: 1.05; margin: 12px 0 4px; text-transform: uppercase; }
.ticket .t-nombre { font-weight: 800; min-height: 1.5em; }
.ticket .t-corte { border-top: 2px dashed rgba(60,30,0,.35); margin: 18px -26px 14px; }
.ticket .t-pie { display: flex; justify-content: space-between; align-items: flex-end; }
.ticket .t-pie small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; opacity: .7; }
.ticket .t-pie b { font-family: var(--fuente-titulo); font-weight: 400; font-size: 1.6rem; }
.ticket .codigo-barras { height: 34px; width: 110px; background: repeating-linear-gradient(90deg, #1b1000 0 2px, transparent 2px 4px, #1b1000 4px 5px, transparent 5px 8px, #1b1000 8px 11px, transparent 11px 12px); opacity: .8; }
.mini-lista { padding: 22px; border-radius: 22px; background: var(--panel); border: 1px solid var(--borde); display: grid; gap: 12px; font-size: .92rem; }
.mini-lista div { display: flex; gap: 12px; align-items: flex-start; }
.mini-lista i { flex: none; font-style: normal; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(46,229,157,.15); color: var(--verde); font-weight: 900; font-size: .8rem; }

/* ───────── Pasos ───────── */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: paso; }
.paso { padding: 28px 22px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--borde); position: relative; backdrop-filter: blur(10px); }
.paso .icono { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(47,107,255,.35), rgba(139,92,255,.25)); border: 1px solid rgba(110,140,255,.35); }
.paso h4 { font-size: 1.1rem; margin-bottom: 6px; }
.paso p { color: var(--suave); font-size: .93rem; }
.paso::before { counter-increment: paso; content: "0" counter(paso); position: absolute; top: 20px; right: 20px; font-family: var(--fuente-titulo); color: rgba(255,255,255,.12); font-size: 1.4rem; }

/* ───────── Envío + sorteo ───────── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bloque { padding: 34px; border-radius: 28px; background: var(--panel); border: 1px solid var(--borde); backdrop-filter: blur(10px); }
.bloque h3 { font-family: var(--fuente-titulo); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; margin: 10px 0; }
.bloque p { color: var(--suave); }
.couriers { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.couriers span { padding: 10px 16px; border-radius: 12px; font-weight: 800; font-size: .9rem; }
.couriers .bx { background: #1f3cff; }
.couriers .st { background: #ff6b00; }
.couriers .tr { background: rgba(46,229,157,.15); color: var(--verde); border: 1px solid rgba(46,229,157,.3); }
.cuenta-regresiva { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.cuenta-regresiva div { text-align: center; padding: 14px 6px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid var(--borde); }
.cuenta-regresiva b { display: block; font-family: var(--fuente-titulo); font-weight: 400; font-size: 2rem; line-height: 1; }
.cuenta-regresiva small { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--suave); }
.bloque.tiktok { background: radial-gradient(100% 100% at 100% 0%, rgba(254,44,85,.25), transparent 55%), radial-gradient(100% 100% at 0% 100%, rgba(37,244,238,.18), transparent 55%), var(--panel); }

/* ───────── Buscar ───────── */
.buscador { display: flex; gap: 10px; max-width: 620px; margin: 0 auto; }
.buscador input { flex: 1; padding: 17px 18px; border-radius: 16px; border: 1px solid var(--borde); background: rgba(0,0,0,.35); outline: none; font-size: 1rem; min-width: 0; }
.buscador input:focus { border-color: var(--cian); }
.buscador button { padding: 0 24px; border-radius: 16px; border: 0; font-weight: 800; cursor: pointer; background: linear-gradient(135deg, var(--azul), var(--violeta)); }

/* ───────── FAQ ───────── */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border-radius: 18px; background: var(--panel); border: 1px solid var(--borde); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 700; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--cian); transition: transform .25s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--suave); }

/* ───────── CTA final + pie ───────── */
.final { text-align: center; padding: 100px 0 110px; }
.final h2 { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1; text-transform: uppercase; margin-bottom: 18px; }
.final p { color: var(--suave); font-size: 1.15rem; margin-bottom: 32px; }
footer { position: relative; z-index: 2; border-top: 1px solid var(--borde); padding: 34px 0 110px; color: var(--suave); font-size: .88rem; }
footer .envoltura { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
footer a { text-decoration: underline; }

/* Botón fijo en celular */
.fijo-movil { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; }
.fijo-movil .btn-mega { width: 100%; padding: 16px; font-size: 1rem; }

/* Toast de compra reciente */
.toast { position: fixed; left: 20px; bottom: 20px; z-index: 70; display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px;
  background: rgba(10,14,34,.92); border: 1px solid var(--borde); backdrop-filter: blur(12px); font-size: .88rem; max-width: 320px;
  transform: translateY(40px); opacity: 0; visibility: hidden; transition: transform .5s cubic-bezier(.2,.9,.3,1.3), opacity .3s, visibility .3s; }
.toast.visible { transform: none; opacity: 1; visibility: visible; }
.toast .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--oro), var(--oro2)); color: #1b1000; font-weight: 900; flex: none; }

/* Aparición al hacer scroll */
.aparecer { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.aparecer.visto { opacity: 1; transform: none; }

/* ───────── Páginas internas ───────── */
.pagina { padding: 60px 0 90px; min-height: 70vh; }
.pagina .tarjeta { max-width: 760px; margin: 0 auto; }
.numeros-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.numero-ticket { font-family: var(--fuente-titulo); font-size: 1.3rem; padding: 10px 16px; border-radius: 12px; color: #1b1000;
  background: linear-gradient(135deg, #ffe17a, #ffbf2f 55%, #ff9d1c); box-shadow: 0 8px 20px -8px rgba(255,160,20,.6); animation: pop .5s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes pop { from { transform: scale(.3) rotate(-10deg); opacity: 0; } }
.estado-ok { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(46,229,157,.15); color: var(--verde); font-weight: 800; font-size: .85rem; }
.estado-pend { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,210,87,.15); color: var(--oro); font-weight: 800; font-size: .85rem; }
.estado-mal { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,77,109,.15); color: var(--rojo); font-weight: 800; font-size: .85rem; }
.gracias-titulo { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; text-transform: uppercase; margin: 16px 0 10px; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--borde); }
.tabla th { color: var(--suave); font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; }
.tabla-scroll { overflow-x: auto; }
.texto-bases h3 { margin: 22px 0 8px; font-size: 1.1rem; }
.texto-bases p, .texto-bases li { color: var(--suave); }
.texto-bases ol { padding-left: 20px; display: grid; gap: 6px; }
.spinner { width: 18px; height: 18px; border: 3px solid rgba(0,0,0,.25); border-top-color: #1b1000; border-radius: 50%; animation: girar .7s linear infinite; }

/* ───────── Catálogo de rifas ───────── */
.volver { display: inline-block; color: var(--suave); font-size: .9rem; font-weight: 700; margin-bottom: 14px; }
.volver:hover { color: var(--texto); }
.hero h1.largo { font-size: clamp(2.2rem, 5.2vw, 4.2rem); }
.cifra-larga { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; }

.grilla-rifas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.rifa-card { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: var(--panel); border: 1px solid var(--borde);
  backdrop-filter: blur(12px); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.rifa-card:hover { transform: translateY(-8px); border-color: rgba(62,230,255,.5); box-shadow: 0 30px 60px -25px rgba(62,160,255,.55); }
.rc-visual { position: relative; aspect-ratio: 16/11; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(70% 80% at 50% 45%, rgba(47,107,255,.45), transparent 70%), linear-gradient(160deg, #101a4a, #12093a); }
.rc-visual .foto-premio { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .6s; }
.rifa-card:hover .rc-visual .foto-premio { transform: scale(1.06); }
.rc-visual .arte-ps4 { width: 82%; }
.rc-visual .orbe-emoji { width: 52%; }
.rc-precio { position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; border-radius: 14px; font-family: var(--fuente-titulo); font-size: 1.3rem; color: #1b1000; line-height: 1;
  background: linear-gradient(135deg, #fff2a8, var(--oro) 40%, var(--oro2)); box-shadow: 0 10px 25px -8px rgba(255,170,30,.7); }
.rc-precio small { display: block; font-family: var(--fuente); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; opacity: .7; margin-top: 3px; }
.rc-estado { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; font-size: .75rem; font-weight: 800; background: rgba(4,5,12,.75); border: 1px solid var(--borde); backdrop-filter: blur(6px); }
.rc-estado.vivo { display: inline-flex; align-items: center; gap: 6px; color: #ffc2cd; }
.rc-estado.vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); animation: latido 1.6s infinite; }
.rc-cuerpo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.rc-cuerpo h3 { font-family: var(--fuente-titulo); font-weight: 400; font-size: 1.4rem; line-height: 1.1; text-transform: uppercase; }
.rc-cuerpo p { color: var(--suave); font-size: .93rem; margin: 6px 0 16px; flex: 1; }
.rc-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .82rem; color: var(--suave); padding-top: 14px; border-top: 1px solid var(--borde); }
.rc-ir { font-weight: 800; color: var(--cian); white-space: nowrap; }
.estado-sorteada, .estado-cerrada { opacity: .85; }

.arte-ps4 { position: relative; padding-top: 30%; }
.arte-ps4 > svg { width: 100%; }
.arte-ps4 .m-izq { position: absolute; left: -4%; top: -6%; width: 56%; transform: rotate(-10deg); }
.arte-ps4 .m-der { position: absolute; right: -2%; top: 0; width: 50%; transform: rotate(9deg); }
.foto-premio { width: 100%; border-radius: 22px; object-fit: cover; aspect-ratio: 4/3; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.orbe-emoji { aspect-ratio: 1; width: 70%; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.25), rgba(62,160,255,.25) 40%, rgba(139,92,255,.15) 70%);
  border: 1px solid rgba(140,170,255,.3); box-shadow: 0 0 60px rgba(62,160,255,.35) inset, 0 0 80px rgba(62,160,255,.25); animation: levitar 5s ease-in-out infinite; }
.orbe-emoji span { font-size: clamp(3rem, 11vw, 8rem); line-height: 1; filter: drop-shadow(0 14px 20px rgba(0,0,0,.5)); }
.premio-mayor .arte .foto-premio { aspect-ratio: 4/3; }

.marco-foto { position: absolute; inset: 16% 6% 14%; display: grid; place-items: center; animation: levitar 6s ease-in-out infinite; }
.marco-foto .foto-premio { height: 100%; border: 2px solid rgba(255,255,255,.18); box-shadow: 0 0 0 6px rgba(62,160,255,.12), 0 40px 70px -20px rgba(0,0,0,.8), 0 0 60px rgba(62,160,255,.35); }
.marco-foto .orbe-emoji { width: 78%; }
.marco-foto .orbe-emoji span { font-size: clamp(5rem, 12vw, 10rem); }

.destacada-escenario { display: grid; place-items: center; }
.destacada-card { position: relative; z-index: 2; width: 78%; padding: 18px 18px 20px; border-radius: 28px; text-align: left;
  background: linear-gradient(160deg, rgba(20,28,70,.92), rgba(18,9,58,.92)); border: 1px solid rgba(140,170,255,.3);
  box-shadow: 0 40px 80px -25px rgba(0,0,0,.8), 0 0 60px rgba(62,160,255,.25); transform: rotate(-3deg); transition: transform .4s; animation: levitar 6s ease-in-out infinite; }
.destacada-card:hover { transform: rotate(0) scale(1.02); }
.destacada-card .medalla { position: absolute; top: -14px; left: 18px; z-index: 3; }
.dc-visual { border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; display: grid; place-items: center; margin-bottom: 14px;
  background: radial-gradient(70% 80% at 50% 45%, rgba(47,107,255,.45), transparent 70%), #0b1033; }
.dc-visual .foto-premio { height: 100%; border-radius: 0; box-shadow: none; }
.dc-visual .arte-ps4 { width: 86%; }
.dc-titulo { font-family: var(--fuente-titulo); font-size: 1.5rem; text-transform: uppercase; line-height: 1.05; }
.dc-sub { color: var(--suave); font-size: .9rem; margin-top: 4px; }
.dc-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-weight: 800; color: var(--cian); }
.dc-pie .dorado { font-family: var(--fuente-titulo); font-size: 1.6rem; font-weight: 400; }
.destacada-escenario .ticket-flotante { width: 40%; right: -2%; bottom: 2%; z-index: 3; }

.ganadores-lista { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.ganador-fila { display: grid; grid-template-columns: 50px 1fr auto; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--borde); }
.gf-emoji { font-size: 1.8rem; }
.gf-titulo { font-weight: 800; }
.gf-ganador { color: var(--oro); font-weight: 700; font-size: .9rem; }

/* ───────── Responsive ───────── */
@media (max-width: 980px) {
  .hero .envoltura, .compra, .premio-mayor, .duo { grid-template-columns: 1fr; }
  .hero { padding-top: 34px; }
  .escenario { max-width: 440px; order: -1; margin-bottom: -20px; }
  .premios { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .lado-ticket { position: static; }
  .premio-mayor { padding: 28px; }
  .premio-mayor .arte { order: -1; max-width: 420px; margin: 0 auto; }
  .hero-sitio .escenario { order: 0; margin: 10px auto 0; }
  .destacada-escenario .ticket-flotante { display: none; }
  .ganador-fila { grid-template-columns: 44px 1fr; }
  .gf-ganador { grid-column: 2; }
}
@media (max-width: 640px) {
  .barra nav a.link { display: none; }
  .logo { font-size: .88rem; }
  .btn-tiktok { padding: 8px 10px; font-size: .8rem; }
  .seccion { padding: 64px 0; }
  .balanza { grid-template-columns: 1fr; }
  .vs { justify-self: center; width: 56px; height: 56px; font-size: 1.2rem; }
  .pasos { grid-template-columns: 1fr; }
  .premios { gap: 12px; }
  .premio { padding: 22px 16px 18px; }
  .premio .monto { font-size: 1.7rem; }
  .tarjeta { padding: 22px 18px; border-radius: 22px; }
  .bloque { padding: 24px 20px; }
  .fijo-movil { display: block; }
  .fijo-movil.oculto { display: none; }
  .ctas .btn-mega, .ctas .btn-fantasma { width: 100%; }
  .toast { left: 12px; right: 12px; bottom: 84px; max-width: none; }
  .buscador { flex-direction: column; }
  .buscador button { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aparecer { opacity: 1; transform: none; }
}

/* ───────── Internacional + alternativa en efectivo ───────── */
.sub-usd { margin-top: 10px; color: var(--suave); font-size: .98rem; }
.sub-usd b { color: var(--verde); }
.alternativa { margin-top: 18px; padding: 14px 16px; border-radius: 14px; font-weight: 700; font-size: .98rem;
  background: linear-gradient(90deg, rgba(46,229,157,.16), rgba(255,210,87,.1)); border: 1px solid rgba(46,229,157,.4); color: #d6ffef; }
.campo select.select-pais { width: 100%; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--borde); background: rgba(0,0,0,.3); outline: none; font-size: 1rem; color: var(--texto); }
.campo select.select-pais:focus { border-color: var(--cian); box-shadow: 0 0 0 4px rgba(62,230,255,.14); }
.campo select.select-pais option { background: #0e1330; }