:root {
    --text: #15112e;
    --text-dim: #5c5678;
    --text-mute: #9692ad;
    --surface: #ffffff;
    --surface-2: #f3f1fa;
    --stroke: rgba(24, 16, 70, 0.08);
    --ink: #15112e;
    --green: #1faa53;
    --max: 480px;
    --shadow: 0 34px 70px -40px rgba(40, 24, 110, 0.5);
}

html[data-theme="dark"] {
    --text: #f4f0ff;
    --text-dim: #c9c2de;
    --text-mute: #9b93b5;
    --surface: #221c36;
    --surface-2: #2c2548;
    --stroke: rgba(255, 255, 255, 0.1);
    --ink: #f4f0ff;
    --shadow: 0 34px 70px -36px rgba(0, 0, 0, 0.8);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    min-height: 100vh;
    color: var(--text);
    font-family: Onest, Inter, system-ui, sans-serif;
    background:
        radial-gradient(900px 520px at 88% -8%, rgba(124, 77, 255, 0.2), transparent 62%),
        radial-gradient(760px 460px at -6% 4%, rgba(255, 79, 154, 0.14), transparent 60%),
        radial-gradient(700px 420px at 50% -12%, rgba(255, 197, 49, 0.13), transparent 60%),
        linear-gradient(#f5f4fb, #efeef7);
    background-attachment: fixed;
}
html[data-theme="dark"] body {
    background:
        radial-gradient(900px 520px at 88% -8%, rgba(124, 77, 255, 0.28), transparent 62%),
        radial-gradient(760px 460px at -6% 4%, rgba(255, 79, 154, 0.16), transparent 60%),
        linear-gradient(#141022, #0e0b18);
}
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.app-shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 0 8px 48px; }

.topbar {
    display: flex; align-items: center; justify-content: flex-start;
    width: min(1240px, calc(100% - 40px)); margin: 16px auto 6px;
    padding: 10px 12px 10px 18px; position: sticky; top: 12px; z-index: 30; gap: 36px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    box-shadow: 0 10px 28px -20px rgba(70, 40, 140, 0.45);
    backdrop-filter: blur(14px);
}
.nav-desk {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 32px; min-width: 0;
}
.nav-desk a { padding: 8px 0; white-space: nowrap; }
.nav-desk a {
    text-decoration: none; font-weight: 600; font-size: 15px; color: #6d4aff;
}
.nav-desk a.on { font-weight: 700; }
.btn-auth {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    background: #6d4aff; color: #fff; font-weight: 700; font-size: 14px;
    padding: 10px 16px; border-radius: 12px; white-space: nowrap;
}
.btn-auth .ti { font-size: 18px; line-height: 1; }
.menu-burger {
    display: none; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--surface);
    border: 1px solid var(--stroke); flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer;
}
.menu-burger span { display: block; width: 16px; height: 2px; background: var(--text); border-radius: 2px; }
.nav-overlay { position: fixed; inset: 0; background: rgba(20, 16, 40, .45); z-index: 60; }
.nav-drawer {
    position: fixed; top: 0; left: 0; width: min(300px, 86vw); height: 100vh; z-index: 70;
    background: var(--surface); padding: 18px; box-shadow: 8px 0 30px rgba(0,0,0,.15); overflow: auto;
}
.nav-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.nav-drawer-close { border: 0; background: var(--surface-2); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; }
.nav-drawer nav { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer a { text-decoration: none; font-weight: 700; padding: 12px 10px; border-radius: 12px; }
.nav-drawer a:hover { background: var(--surface-2); }
.flash { background: #e9f9ef; color: #0e7a38; border-radius: 14px; padding: 10px 14px; font-weight: 700; }
.sorteos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.hero.sec-head { text-align: center; }
html[data-theme="dark"] .topbar {
    background: rgba(22, 18, 38, 0.88);
    border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .nav-desk a { color: #c4b5fd; }
.brand-mark { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.brand-logo { width: 32px; height: 32px; color: #6d4aff; display: grid; }
.brand-logo svg { width: 32px; height: 32px; fill: currentColor; }
.brand-name { font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: #241b4a; }
html[data-theme="dark"] .brand-name { color: #f4f0ff; }
.top-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
.theme-toggle {
    width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent;
    cursor: pointer; color: #6d4aff;
    display: grid; place-items: center;
}
.theme-toggle svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
html[data-theme="dark"] .theme-toggle { color: #f4f0ff; }
.theme-toggle:hover { background: rgba(109, 74, 255, 0.1); }
.nav-drawer-close { display: grid; place-items: center; font-size: 16px; }
.h1 .fa, .eyebrow .fa, .chip .fa, .btn .fa, .sc-promo-chip .fa, .sct-eyebrow .fa,
.vivo-cinta .fa, .back-link .fa, .ps-fecha .fa, .fcol p .fa, .sc-toggle .fa {
    margin-right: 0.35em;
}
.h1 .fa { font-size: 0.62em; vertical-align: 0.12em; }
.sc-toggle .fa-chevron-down, .sc-toggle .fa-chevron-up { margin-left: 0.25em; margin-right: 0; }

.eyebrow { margin: 0 0 6px; color: #5b2bff; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.h1 { margin: 0; font-size: 52px; font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; }
.grad {
    background: linear-gradient(100deg, #5b2bff, #b14dff 45%, #ff4f9a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hint, .legal p { color: var(--text-dim); line-height: 1.5; }
.spacer { height: 28px; }
.spacer-sm { height: 14px; }
.spacer-lg { height: 10px; }
.hero { padding-top: 8px; }

.sorteo, .card, .news-card, .gan-item, .wslide, .footer-action {
    background: var(--surface); border-radius: 32px; box-shadow: var(--shadow);
}
.sorteo { margin-bottom: 18px; overflow: hidden; }
.sc-body { padding: 8px 8px 14px; }
.sc-head, .sc-body-2 { padding: 12px 10px 0; }
.sc-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.sc-title { margin: 4px 0 0; font-size: 28px; line-height: 1.05; letter-spacing: -0.04em; }
.sc-price {
    min-width: 108px; padding: 10px 12px 8px; border-radius: 22px; text-align: center; color: #2a1700;
    background: linear-gradient(160deg, #ffe07a, #ffb63a 55%, #ff8f1f);
    box-shadow: 0 16px 30px -14px rgba(255, 150, 20, 0.85), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.sc-price-row { display: flex; align-items: flex-start; justify-content: center; gap: 2px; }
.sc-price .cur { font-weight: 800; margin-top: 6px; }
.sc-price .num { font-size: 34px; font-weight: 800; line-height: 0.9; }
.sc-price .lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }

.pv { margin: 12px 4px 0; }
.pv-slide { display: none; }
.pv-slide.is-on, .pv-slide.is-mini { display: block; }
.pv-slide {
    --pv-rgb: 124, 92, 255;
    --pv-rgb-claro: 214, 196, 255;
    position: relative; overflow: hidden; border-radius: 28px; color: #fff;
    background:
        radial-gradient(85% 50% at 50% 104%, rgba(var(--pv-rgb), 0.5), transparent 68%),
        radial-gradient(60% 40% at 12% 0%, rgba(255, 79, 154, 0.22), transparent 70%),
        radial-gradient(70% 45% at 92% 8%, rgba(var(--pv-rgb), 0.2), transparent 70%),
        linear-gradient(180deg, #2c1e8c, #1a1260 46%, #0d0932);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.pv-stage { position: relative; aspect-ratio: 4 / 3; min-height: 230px; overflow: hidden; }
.pv-spot {
    position: absolute; top: -4%; left: 15%; width: 70%; height: 86%; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1) 55%, transparent);
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    filter: blur(9px); opacity: 0.55; animation: pvFoco 2.6s ease-in-out infinite;
}
@keyframes pvFoco { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.72; } }
.pv-rayos {
    position: absolute; z-index: 0; pointer-events: none; left: -30%; width: 160%; top: 50%; margin-top: -80%;
    aspect-ratio: 1; opacity: 0.32;
    background: repeating-conic-gradient(from 0deg, rgba(var(--pv-rgb-claro), 0.9) 0deg 6deg, transparent 6deg 18deg);
    mask-image: radial-gradient(closest-side, #000 6%, rgba(0,0,0,0.4) 36%, transparent 68%);
    animation: pvRayos 26s linear infinite;
}
@keyframes pvRayos { to { transform: rotate(360deg); } }
.pv-beam {
    position: absolute; z-index: 0; pointer-events: none; top: -8%; width: 34%; height: 120%;
    transform-origin: 50% 0; filter: blur(7px); mix-blend-mode: screen; opacity: 0.7;
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}
.pv-beam.b1 { left: 2%; background: linear-gradient(180deg, rgba(255,79,154,0.75), transparent 85%); animation: pvBeam1 4.6s ease-in-out infinite; }
.pv-beam.b2 { right: 2%; background: linear-gradient(180deg, rgba(var(--pv-rgb), 0.85), transparent 85%); animation: pvBeam2 5.4s ease-in-out infinite; }
@keyframes pvBeam1 { 0%, 100% { transform: rotate(-34deg); } 50% { transform: rotate(-4deg); } }
@keyframes pvBeam2 { 0%, 100% { transform: rotate(34deg); } 50% { transform: rotate(6deg); } }
.pv-shard {
    position: absolute; z-index: 0; pointer-events: none; height: 7%; width: 52%; border-radius: 999px;
    filter: blur(5px); opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--pv-rgb-claro), 0.85) 35%, rgba(255,255,255,0.75) 50%, rgba(255,79,154,0.55) 70%, transparent);
    animation: pvShard 7s ease-in-out infinite;
}
.pv-shard.s1 { left: -12%; top: 16%; transform: rotate(-22deg); }
.pv-shard.s2 { right: -14%; top: 30%; width: 44%; height: 5%; animation-delay: 2.2s; transform: rotate(18deg); }
.pv-shard.s3 { left: -6%; top: 58%; width: 36%; height: 4%; animation-delay: 4.1s; transform: rotate(12deg); }
.pv-shard.s4 { right: -8%; top: 8%; width: 30%; height: 4%; animation-delay: 5.4s; transform: rotate(-30deg); }
@keyframes pvShard { 0%, 100% { opacity: 0; } 40%, 60% { opacity: 0.85; } }
.pv-orb {
    position: absolute; z-index: 1; pointer-events: none; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, rgba(255,79,154,0.95) 45%, transparent 72%);
    animation: pvOrb 6s ease-in-out infinite;
}
.pv-orb.o1 { left: 9%; top: 62%; }
.pv-orb.o2 { right: 11%; top: 44%; width: 20px; height: 20px; animation-delay: 1.5s; background: radial-gradient(circle at 35% 30%, #fff, rgba(var(--pv-rgb), 0.95) 45%, transparent 72%); }
.pv-orb.o3 { left: 24%; top: 14%; width: 9px; height: 9px; animation-delay: 3s; }
@keyframes pvOrb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.pv-sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pv-sparks i {
    position: absolute; width: 9px; height: 9px; opacity: 0; animation: pvChispa 3.2s ease-in-out infinite;
    background: radial-gradient(circle, #fff 0 18%, rgb(var(--pv-rgb-claro)) 30%, transparent 62%);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
@keyframes pvChispa { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(0.4) rotate(45deg); } }
.pv-confeti { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.pv-confeti i {
    position: absolute; top: -8%; border-radius: 2px; opacity: 0.95;
    animation-name: pvConfeti; animation-timing-function: linear; animation-iteration-count: infinite;
}
.pv-confeti i:nth-child(3n) { border-radius: 50%; }
@keyframes pvConfeti {
    0% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
    25% { transform: translate3d(14px, 80px, 0) rotate(calc(var(--r, 0deg) + 160deg)); }
    50% { transform: translate3d(-12px, 160px, 0) rotate(calc(var(--r, 0deg) + 320deg)); }
    75% { transform: translate3d(10px, 240px, 0) rotate(calc(var(--r, 0deg) + 480deg)); }
    100% { transform: translate3d(-6px, 340px, 0) rotate(calc(var(--r, 0deg) + 640deg)); }
}
.pv-podio { position: absolute; left: 9%; width: 82%; bottom: 6%; height: 21%; z-index: 1; pointer-events: none; }
.pv-podio::before {
    content: ""; position: absolute; top: 24%; right: 0; bottom: 0; left: 0; border-radius: 50%;
    background: linear-gradient(180deg, #d8d2ff, #8b7ee6 38%, #4a3bb0);
    box-shadow: 0 18px 40px -6px rgba(0,0,0,0.55), 0 0 60px rgba(var(--pv-rgb), 0.45);
}
.pv-podio::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 24%; left: 0; border-radius: 50%;
    background:
        linear-gradient(115deg, transparent 30%, rgba(160,150,230,0.35) 33%, transparent 37%, transparent 58%, rgba(160,150,230,0.28) 60%, transparent 64%),
        radial-gradient(ellipse at 50% 30%, #fff, #f1eeff 42%, #c3baff);
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.75), 0 -2px 22px rgba(255,255,255,0.35);
}
.pv-podio > i { position: absolute; top: -16%; right: -9%; bottom: 0; left: -9%; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); border-top-color: transparent; }
.pv-podio em { position: absolute; top: 6%; right: 4%; bottom: 10%; left: 4%; border-radius: 50%; border: 2px solid rgba(var(--pv-rgb-claro), 0.9); opacity: 0; animation: pvOnda 2.8s ease-out infinite; }
.pv-podio em.o2 { animation-delay: 1.4s; }
@keyframes pvOnda { 0% { transform: scale(0.82); opacity: 0.85; } 100% { transform: scale(1.34); opacity: 0; } }
.pv-media { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12%; pointer-events: none; }
.pv-media.is-flot img {
    width: auto; height: auto; max-width: 80%; max-height: 66%; object-fit: contain;
    filter: drop-shadow(0 16px 12px rgba(8,4,40,0.55));
    animation: pvFlota 4.2s ease-in-out infinite;
}
@keyframes pvFlota { 0%, 100% { transform: translateY(0) rotate(-0.6deg) scale(1); } 50% { transform: translateY(-10px) rotate(0.6deg) scale(1.025); } }
.pv-media.is-emoji { align-items: center; font-size: 84px; }
.pv-ribbon {
    position: absolute; top: 14px; left: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 7px;
    overflow: hidden; padding: 8px 14px 8px 11px; border-radius: 999px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(10px);
}
.pv-shine {
    position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
    transform: translateX(-120%); animation: pvBrillo 3.6s ease-in-out infinite;
}
@keyframes pvBrillo { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.pv-qty {
    position: absolute; z-index: 5; top: 14px; right: 14px; width: 64px; height: 64px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.4);
}
.pv-qty b { font-size: 22px; }
.pv-cap { position: relative; z-index: 5; padding: 0 16px 16px; text-align: center; }
.pv-name { margin: 0; font-weight: 650; font-size: clamp(22px, 5vw, 30px); letter-spacing: -0.035em; text-shadow: 0 2px 18px rgba(8,4,40,0.6); }
.pv-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.pv-dots button { width: 8px; height: 8px; border: 0; border-radius: 99px; background: #d9d4ea; padding: 0; }
.pv-dots button.on { width: 22px; background: #ff961f; }
.is-mini .pv-stage { aspect-ratio: auto; min-height: 0; height: 112px; }
.is-mini .pv-media.is-flot img { max-height: 78%; max-width: 86%; animation-duration: 3.4s; }
.is-mini .pv-name { font-size: 13px; }
.is-mini .pv-cap { padding: 0 8px 10px; }
.is-mini .pv-ribbon, .is-mini .pv-orb.o3, .is-mini .pv-shard { display: none; }
.is-mini .pv-qty { width: 36px; height: 36px; top: 8px; right: 8px; }
.is-mini .pv-qty b { font-size: 13px; }
.is-mini .pv-podio { height: 28%; bottom: 4%; }
@media (prefers-reduced-motion: reduce) {
    .pv-spot, .pv-rayos, .pv-beam, .pv-shard, .pv-orb, .pv-sparks i, .pv-confeti i, .pv-podio em, .pv-media img, .pv-shine { animation: none; }
}

.sc-mas { margin: 12px 4px 0; padding: 12px 0; border-radius: 26px; background: var(--surface-2); overflow: hidden; }
.sc-mas-head { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0 14px 10px; }
.sc-mas-head span { color: var(--text-mute); font-size: 12px; }
.sc-mas-view { overflow: hidden; }
.sc-mas-row { display: flex; gap: 10px; width: max-content; animation: marquee 18s linear infinite; }
.sc-mas-it { width: 150px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.sc-timer { margin-top: 6px; }
.sct-eyebrow {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #8d879e; font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; margin-bottom: 14px;
}
.sct-eyebrow .ti {
    font-size: 16px; line-height: 1; color: #4d6cff; flex: none;
}
.sct-cells { display: flex; justify-content: center; gap: 10px; }
.sct-cell {
    flex: 1 1 0; max-width: 76px; background: #1c1733; color: #fff;
    border-radius: 22px; text-align: center; padding: 14px 0 11px;
    box-shadow: 0 10px 22px rgba(28, 23, 51, 0.16);
}
html[data-theme="dark"] .sct-cell { background: #2a2448; box-shadow: none; }
.sct-cell b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.sct-cell span {
    display: block; margin-top: 6px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55);
}
.ps-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ps-box {
    background: #1c1733; color: #fff; border-radius: 22px; text-align: center; padding: 14px 0 11px;
}
html[data-theme="dark"] .ps-box { background: #2a2448; }
.ps-box b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.ps-box span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.55); }
.sc-promo-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin: 16px auto 0; width: fit-content; max-width: 100%;
    background: linear-gradient(180deg, #ff9b32, #ff7a12); color: #fff;
    font-weight: 800; font-size: 15px; border-radius: 999px; padding: 11px 18px;
    box-shadow: 0 10px 20px rgba(255, 122, 18, 0.28);
}
.sc-body-2 { text-align: center; }
.sc-toggle, .sc-btn, .btn {
    width: 100%; border: 0; cursor: pointer; font-weight: 800; text-decoration: none;
}
.sc-toggle {
    margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #f3f1f8; color: #2c2642; border-radius: 999px; padding: 16px 18px; font-size: 15px;
}
html[data-theme="dark"] .sc-toggle { background: #241f3d; color: #f4f0ff; }
.sc-btn, .btn {
    margin-top: 10px; position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 56px; border-radius: 999px; color: #2a1700;
    background: linear-gradient(90deg, #ffe07a, #ffb01a 40%, #ff7a1a);
}
.sc-btn-arr {
    position: absolute; right: 8px; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; background: var(--ink); color: #fff;
}
.premios-wrap { margin-top: 8px; }
.prize-row { display: flex; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--stroke); }
.prize-row em { margin-left: auto; font-style: normal; color: var(--text-mute); }

.vivo { max-width: 860px; margin: 0 auto; }
.vivo-head { text-align: center; margin-bottom: 8px; }
.vivo-head .h1 { font-size: 40px; }
.vivo-dot {
    display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%;
    background: #ff3b5c; box-shadow: 0 0 0 5px rgba(255, 59, 92, 0.16); vertical-align: 0.12em;
}
.vivo-head p { color: var(--text-dim); }
.vivo-head p strong { color: var(--text); }
.vivo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 18px; }
.vivo-card {
    position: relative; display: flex; align-items: center; gap: 14px; min-height: 108px; padding: 20px 18px;
    border-radius: 22px; text-decoration: none; color: #fff;
}
.vivo-card.fb, .vivo-card.wa { grid-column: 1 / -1; }
.vivo-card.fb { background: linear-gradient(90deg, #3b82ff, #1d4ed8); overflow: visible; }
.vivo-card.kick {
    background: #0c0c10; border: 1.5px solid #3dff6a;
    box-shadow: 0 0 22px rgba(61, 255, 106, 0.16);
}
.vivo-card.tiktok {
    background: #0c0c10; border: 1.5px solid #ff3d7a;
    box-shadow: 0 0 22px rgba(255, 61, 122, 0.2);
}
.vivo-card.wa { background: linear-gradient(90deg, #22c55e, #12924a); }
.vivo-badge {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 8px 16px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    background: linear-gradient(90deg, #ffb01a, #ff7a00);
    box-shadow: 0 8px 18px rgba(255, 138, 0, 0.35);
}
.vivo-logo { height: 56px; width: auto; flex: none; display: block; }
.vivo-card.kick .vivo-logo { height: 42px; }
.vivo-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vivo-txt small {
    font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; opacity: 0.82;
}
.vivo-txt strong { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.vivo-txt em { font-style: normal; font-size: 14px; opacity: 0.9; }
.vivo-card.kick .vivo-txt strong,
.vivo-card.tiktok .vivo-txt strong { font-size: 16px; font-weight: 700; }
.vivo-card.kick .vivo-txt strong { color: #53fc18; }
.vivo-go {
    margin-left: auto; width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: grid; place-items: center; background: rgba(255,255,255,.16);
}
.vivo-card.kick .vivo-go { background: #16331f; color: #53fc18; }

.pago-head { text-align: center; margin-bottom: 22px; }
.pago-bento { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: stretch; }
.pago-col {
    background: var(--surface); border-radius: 36px; padding: 22px; box-shadow: var(--shadow);
}
.pago-col .hint { margin: 0 0 16px; font-size: 14.5px; }
.pago-col.noticias-col { background: var(--surface-2); box-shadow: none; }
.card { background: var(--surface); border-radius: 28px; padding: 16px; box-shadow: var(--shadow); }
.pay-card {
    position: relative; overflow: hidden; border-radius: 32px; padding: 24px; color: #fff;
    transition: background .2s ease;
}
.pay-card.is-yape { background: #ac01ff; }
.pay-card.is-plin { background: #2cc5b4; }
.pay-card::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
    border-radius: 50%; background: rgba(255,255,255,.14); pointer-events: none;
}
.pay-card > * { position: relative; z-index: 1; }
.pay-card .pay-switch { display: flex; gap: 6px; margin: 0 0 16px; }
.pay-card .pay-switch button {
    flex: 1; min-height: 44px; padding: 9px 12px; border-radius: 11px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.16); color: #fff;
    font-weight: 800; font-size: 14px;
}
.pay-card.is-yape .pay-switch button.on { background: #fff; color: #ac01ff; }
.pay-card.is-plin .pay-switch button.on { background: #fff; color: #2cc5b4; }
.pay-kicker { margin: 0; color: #fff; opacity: .85; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.pay-num { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 0.04em; }
.pay-card .pay-num { margin: 6px 0 2px; text-align: left; color: #fff; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.qrwrap {
    width: 180px; height: 180px; margin: 12px auto; border-radius: 18px; padding: 10px;
    background: #fff; display: grid; place-items: center; overflow: hidden;
}
.qrwrap img { width: 100%; height: 100%; object-fit: contain; }
.pay-name { margin: 0; font-size: 14px; font-weight: 600; opacity: .94; }
.pay-card .qrwrap {
    width: 176px; height: auto; min-height: 120px; margin: 16px auto 4px; border-radius: 24px; padding: 12px;
    background: #fff; display: grid; place-items: center; overflow: hidden; filter: none;
    box-shadow: 0 10px 24px -12px rgba(0,0,0,.3);
}
.pay-card .qrwrap img { width: 100%; height: auto; display: block; border-radius: 8px; object-fit: contain; }
.pay-copy {
    width: 100%; margin-top: 12px; min-height: 46px; border: 0; border-radius: 14px; cursor: pointer;
    background: #fff; color: #15112e; font-weight: 800;
}
.pay-card.is-yape .pay-copy { color: #ac01ff; }
.pay-card.is-plin .pay-copy { color: #0d7d73; }
.doc-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.doc-opt {
    border: 0; border-radius: 14px; padding: 12px; background: var(--surface-2); cursor: pointer; font-weight: 800;
}
.doc-opt.on { background: var(--ink); color: #fff; }
html[data-theme="dark"] .doc-opt.on { background: #fff; color: #15112e; }
form.participar { max-width: 1040px; margin: 8px auto 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
form.participar > .card { max-width: 460px; margin: 0 auto; padding: 22px 22px 18px; }
.paso-bar { height: 4px; border-radius: 999px; background: #eceaf3; overflow: hidden; margin: 2px 0 10px; }
.paso-bar > span { display: block; width: 33%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5b3dff, #7a5cff); }
.pay-layout .paso-bar > span { width: 66%; }
.paso-label { margin: 0 0 18px; color: #8d88a3; font-size: 13px; font-weight: 500; }
.paso-label b { color: #241c3d; font-weight: 800; }
.participar .field label { font-size: 13.5px; font-weight: 600; color: #6a6480; }
.participar .input {
    background: #fff; border: 1.5px solid #ece8f4; border-radius: 16px; min-height: 54px;
}
.participar .doc-switch {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 0;
    padding: 0; border-radius: 0; background: transparent;
}
.participar .doc-opt {
    min-width: 0; min-height: 48px; padding: 12px 16px; border-radius: 999px;
    border: 1.5px solid transparent; background: #f4f2f8; color: #6d6782;
    font-size: 15px; font-weight: 700; box-shadow: none;
}
.participar .doc-opt.on {
    background: #f4efff; border-color: #7c5cff; color: #1c1633; box-shadow: none;
}
.participar .input-doc {
    text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 0.62em;
    padding-left: calc(14px + 0.62em); color: #16122c;
}
.participar .input-doc::placeholder { color: #d2cde0; font-weight: 800; letter-spacing: 0.42em; }
.participar .input-mask { font-weight: 600; color: #1c1633; cursor: default; }
.participar .terminos-aviso a { color: #6d4aff; font-weight: 700; text-decoration: none; }
.participar [data-continuar] {
    background: linear-gradient(90deg, #d5c8ff, #b49cf8 52%, #c3b0ff);
    color: #fff;
    transition: background .2s ease, color .2s ease;
}
.participar [data-continuar].is-listo {
    background: linear-gradient(90deg, #ffe07a, #ffb01a 40%, #ff7a1a);
    color: #2a1700;
}
html[data-theme="dark"] .paso-bar { background: #3a3458; }
html[data-theme="dark"] .paso-label b { color: #f4f0ff; }
html[data-theme="dark"] .participar .field label { color: #c9c2de; }
html[data-theme="dark"] .participar .input { background: var(--surface-2); border-color: var(--stroke); }
html[data-theme="dark"] .participar .doc-opt { background: #2a2448; color: #c9c2de; }
html[data-theme="dark"] .participar .doc-opt.on { background: #34285f; border-color: #a78bfa; color: #f4f0ff; }
html[data-theme="dark"] .participar .input-doc,
html[data-theme="dark"] .participar .input-mask { color: #f4f0ff; }
.pay-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
form.participar [hidden] { display: none; }
.pay-box {
    background: #fff; border-radius: 22px; padding: 18px; margin-bottom: 12px;
    border: 1px solid rgba(24, 16, 70, 0.05); box-shadow: 0 16px 36px -28px rgba(40, 24, 110, 0.55);
}
.pay-lado { margin-bottom: 0; }
.pay-ask { margin: 0 0 14px; color: #8a849e; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pay-help { margin: -4px 0 14px; color: #5c5678; font-size: 14.5px; line-height: 1.45; }
.qty-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pay-layout .qty-stepper { background: #f6f4fb; border: 1px solid #ece8f4; border-radius: 16px; padding: 4px; }
.pay-layout .qty-stepper button { width: 38px; height: 38px; background: transparent; color: #1c1633; font-size: 22px; font-weight: 500; }
.qty-pay { text-align: right; }
.qty-pay span { display: block; color: #8a849e; font-size: 12px; font-weight: 700; }
.qty-pay b { font-size: 28px; letter-spacing: -0.04em; }
.qty-extra { margin: 10px 0 0; color: #6a6480; font-size: 13px; font-weight: 600; }
.btn-subir {
    width: 100%; min-height: 52px; border: 0; border-radius: 14px; cursor: pointer;
    background: #1faa59; color: #fff; font-weight: 800; font-size: 16px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 12px 24px -14px rgba(31, 170, 89, 0.95);
}
.pay-file { display: none; }
.pay-preview { width: 100%; max-height: 180px; object-fit: contain; margin-top: 12px; border-radius: 12px; background: #f6f4fb; }
.pay-preview[hidden] { display: none; }
.valida, .valida-fondo {
    position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
}
.valida[hidden], .valida-fondo[hidden] { display: none; }
.valida { background: rgba(244, 241, 250, 0.72); }
.valida-card, .valida-aviso {
    width: min(420px, 100%); background: #fff; border-radius: 28px; padding: 28px 24px 22px;
    box-shadow: 0 30px 70px -36px rgba(40, 24, 110, 0.55); text-align: center;
}
.valida-ring {
    width: 132px; height: 132px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(#6d4aff calc(var(--p) * 1%), #efeaf6 0);
}
.valida-ring span {
    width: 100px; height: 100px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; font-size: 28px; font-weight: 800; letter-spacing: -0.04em;
}
.valida-card h2, .valida-aviso h2 { margin: 0 0 14px; font-size: 26px; letter-spacing: -0.04em; }
.valida-aviso h2 { color: #e11d2e; font-size: 24px; }
.valida-bar { height: 8px; border-radius: 999px; background: #efeaf6; overflow: hidden; }
.valida-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #6d4aff, #8b6cff); }
.valida-card p { margin: 12px 0 0; color: #8d88a3; font-size: 14px; }
.valida-fondo { background: rgba(28, 22, 48, 0.45); }
.valida-icono { margin: 0 0 8px; color: #ff8a00; font-size: 34px; }
.valida-aviso p { margin: 0 0 16px; color: #6a6480; line-height: 1.45; }
.valida-codigo {
    margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: #f6f4fb; color: #6a6480;
}
.valida-codigo b { color: #1c1633; }
.valida-wa, .valida-reintentar {
    width: 100%; min-height: 52px; border-radius: 16px; font-weight: 800; font-size: 16px;
    display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.valida-wa { border: 0; color: #fff; background: linear-gradient(90deg, #7a5cff, #5b46f5); }
.valida-reintentar {
    margin-top: 10px; border: 1.5px solid #ece8f4; background: #fff; color: #1c1633; cursor: pointer;
}
html[data-theme="dark"] .valida-card,
html[data-theme="dark"] .valida-aviso { background: var(--surface); }
html[data-theme="dark"] .valida-ring span,
html[data-theme="dark"] .valida-reintentar { background: var(--surface-2); color: #f4f0ff; }
html[data-theme="dark"] .valida-codigo { background: #2a2448; }
html[data-theme="dark"] .valida-codigo b { color: #f4f0ff; }
.pay-volver {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0;
    border: 0; background: none; color: #241c3d; font-weight: 700; font-size: 15px; cursor: pointer;
}
html[data-theme="dark"] .pay-volver { color: #f4f0ff; }
.pay-layout .pay-card { margin-top: 4px; }
.pay-layout .pay-copy {
    border-radius: 999px; color: #fff; background: linear-gradient(90deg, #7a6cff, #4f6dff);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pay-layout .pay-copy::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0c5"; }
.pay-layout .pay-card.is-yape .pay-copy,
.pay-layout .pay-card.is-plin .pay-copy { color: #fff; }
html[data-theme="dark"] .pay-box { background: var(--surface); border-color: var(--stroke); }
html[data-theme="dark"] .pay-help,
html[data-theme="dark"] .qty-extra { color: var(--text-dim); }
html[data-theme="dark"] .pay-layout .qty-stepper { background: #2a2448; border-color: transparent; }
html[data-theme="dark"] .pay-layout .qty-stepper button,
html[data-theme="dark"] .qty-pay b { color: #f4f0ff; }
.paso3 { max-width: 420px; margin: 0 auto; }
.paso3 .pay-volver { text-decoration: none; }
.paso-segmentos { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 8px; align-items: end; margin: 4px 0 12px; padding-top: 28px; }
.paso-segmentos > span { display: block; height: 7px; border-radius: 999px; background: #ddd4f5; position: relative; }
.paso-segmentos > span.is-gold { height: 7px; background: linear-gradient(90deg, #ffe07a, #ffb01a); }
.paso-segmentos .globo { bottom: 1px; }
.ticket-panel {
    background: #fff; border-radius: 28px; padding: 16px 14px 18px;
    box-shadow: 0 18px 40px -28px rgba(40, 24, 110, 0.45);
}
.ticket-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ticket-panel-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #1c1633; }
.ticket-panel-title i { color: #ef3b4a; }
.ticket-cuenta {
    min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
    display: grid; place-items: center; background: #ffe14a; color: #1c1633; font-weight: 800;
}
.boleto-escena { position: relative; padding: 4px 0 0; overflow: visible; }
[data-ticket-lista] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.globos { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.globo {
    position: absolute; left: var(--x); top: var(--y); width: var(--s); height: calc(var(--s) * 1.18);
    border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 32% 28%, #fff 0 8%, var(--c) 42%);
    box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.06);
}
.globo::after {
    content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--c);
}
.boleto:has(.globos) { overflow: visible; z-index: 3; }
.globos .globo {
    top: 48%; opacity: 0;
    animation: soltar var(--t, 4.8s) var(--d, 0s) cubic-bezier(.17, .55, .28, 1) infinite;
}
.paso-segmentos .globo { animation: none; opacity: 1; }
@keyframes soltar {
    0% { transform: translate3d(0, 0, 0) scale(.15) rotate(-8deg); opacity: 0; }
    18% { transform: translate3d(0, -6px, 0) scale(1) rotate(5deg); opacity: 1; }
    100% { transform: translate3d(var(--drift), -170px, 0) scale(.65) rotate(-6deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .globos .globo { animation: none; opacity: 0; }
}
.boleto {
    position: relative; z-index: 1; min-width: 0; margin: 0; padding: 10px 8px 8px; border-radius: 16px;
    background: linear-gradient(180deg, #ff5a49 0%, #ef2d3a 55%, #e1062c 100%);
    box-shadow: 0 16px 28px -18px rgba(225, 6, 44, 0.85); color: #fff; overflow: hidden;
}
.boleto-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 18px; }
.boleto-gratis, .boleto-tipo {
    border-radius: 999px; padding: 2px 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.03em;
}
.boleto-gratis { background: rgba(255, 255, 255, 0.92); color: #e1062c; }
.boleto-tipo { border: 1.5px solid rgba(255, 255, 255, 0.9); }
.boleto-num {
    margin: 8px 0 6px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}
.boleto-foot { display: flex; justify-content: space-between; gap: 6px; font-size: 9px; font-weight: 700; opacity: .92; }
.boleto-foot span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boleto-foot span:last-child { flex: none; white-space: nowrap; }
.btn-tickets, .btn-inicio {
    width: 100%; min-height: 52px; margin-top: 12px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 800; font-size: 16px; text-decoration: none;
}
.btn-tickets { color: #fff; background: linear-gradient(90deg, #ffb01a, #ff7a1a); box-shadow: 0 12px 24px -16px rgba(255, 122, 26, 0.95); }
.btn-inicio { color: #1c1633; background: #fff; border: 1.5px solid #ece8f4; }
.libro-form { max-width: 720px; margin: 8px auto 0; padding: 24px 22px 22px; }
.libro-etiqueta { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-dim); }
.libro-tipo-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.libro-opcion {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 12px 14px;
    border: 1.5px solid var(--stroke); border-radius: 16px; background: transparent; cursor: pointer; text-align: left;
}
.libro-opcion b { font-size: 15px; font-weight: 800; }
.libro-opcion small { font-size: 12px; color: var(--text-dim); line-height: 1.3; }
.libro-opcion.on { background: #f4efff; border-color: #7c5cff; }
.libro-opcion.on b, .libro-opcion.on small { color: #1c1633; }
.libro-seccion { margin: 22px 0 12px; font-size: 17px; font-weight: 800; }
.libro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.libro-grid .field { min-width: 0; }
.libro-ancho { grid-column: 1 / -1; }
.libro-form .field label { font-size: 13.5px; font-weight: 600; color: var(--text-dim); }
.libro-form .input { background: var(--surface); border: 1.5px solid var(--stroke); }
.libro-form .input:focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.16); }
.libro-check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 4px; font-size: 14px; cursor: pointer; }
.libro-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: #6d4aff; }
@media (max-width: 560px) {
    .libro-grid { grid-template-columns: 1fr; }
}
.ticket-resultado { margin-bottom: 14px; }
.ticket-resumen { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; color: #1c1633; }
.ticket-resumen span { font-size: 13px; color: #6b6484; }
.ticket-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ticket-aviso { margin: 0; padding: 12px 14px; border-radius: 14px; background: #f5f2ff; color: #4a4270; font-size: 14px; font-weight: 600; }
.ticket-resultado .boleto { padding: 12px 12px 10px; border-radius: 18px; }
.ticket-resultado .boleto-top { min-height: 22px; }
.ticket-resultado .boleto-gratis, .ticket-resultado .boleto-tipo { font-size: 10px; padding: 3px 8px; }
.ticket-resultado .boleto-num { font-size: clamp(24px, 6vw, 34px); margin: 10px 0 8px; }
.ticket-resultado .boleto-foot { font-size: 10px; }
@media (max-width: 380px) {
    .ticket-resultado .boleto-num { font-size: 22px; }
}
html[data-theme="dark"] .ticket-resumen { color: #1c1633; }
html[data-theme="dark"] .paso-segmentos > span { background: #3a3458; }
html[data-theme="dark"] .ticket-panel,
html[data-theme="dark"] .btn-inicio { background: #fff; color: #1c1633; }
.dni-estado { margin: 8px 2px 0; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.dni-estado.is-bad { color: #e0474f; }
.pago-news {
    display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--stroke);
    color: inherit;
}
.pago-news img { width: 72px; height: 54px; object-fit: cover; border-radius: 12px; flex: none; }
.pago-news > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pago-news small { color: var(--text-mute); font-size: 12px; }
.pago-titulo {
    display: block; margin-top: 3px; font-size: 16px; font-weight: 800; color: inherit;
    text-decoration: none; letter-spacing: -0.02em;
}
.pago-cuerpo { color: var(--text-dim); font-size: 13px; line-height: 1.4; }
.pago-mas {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; width: fit-content;
    color: #6d4aff; font-size: 13px; font-weight: 800; text-decoration: none;
}
.pago-mas:hover { text-decoration: underline; }
.btn-dark { background: var(--ink); color: #fff; }
html[data-theme="dark"] .btn-dark { background: #fff; color: #15112e; }

.como .sec-head { text-align: center; }
.como .h1 { margin-top: 6px; }
.como-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
.como-step {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    min-height: 210px; padding: 20px 20px 22px; border-radius: 28px; overflow: hidden; color: #fff;
    transition: transform .25s ease;
}
.como-step:hover { transform: translateY(-5px) rotate(-1deg); }
.como-step .num { font-size: 62px; font-weight: 400; letter-spacing: -0.06em; line-height: 0.9; }
.como-step .ic {
    position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; font-size: 21px; background: rgba(255,255,255,0.24);
}
.como-step .ct { margin-top: auto; padding-top: 26px; text-align: left; }
.como-step .ct b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 6px; }
.como-step .ct span { display: block; font-size: 13px; line-height: 1.45; opacity: 0.8; }
.como-step.c1 { background: #ff7a1a; }
.como-step.c2 { background: #ff4f9a; }
.como-step.c3 { background: #5b2bff; }
.como-step.c4 { background: #ffc531; color: #2a1700; }
.como-step.c4 .ic { background: rgba(42, 23, 0, 0.1); }
.como-step.c5 { background: #15112e; }
html[data-theme="dark"] .como-step.c5 { background: #221c52; }

.prox-sorteo, .fama { margin-top: 8px; }
.prox-sorteo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center;
    padding: 26px; border-radius: 32px; color: #fff;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(255, 79, 154, 0.45), transparent 60%),
        linear-gradient(135deg, #2c1e8c, #160f52);
    box-shadow: 0 30px 60px -34px rgba(30, 16, 120, 0.9);
}
.prox-sorteo .eyebrow {
    display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
    color: #ffd874; letter-spacing: 0.2em;
}
.ps-nombre { margin: 0 0 8px; color: #fff; font-size: 26px; font-weight: 650; letter-spacing: -0.04em; }
.ps-fecha { display: flex; align-items: center; gap: 8px; margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 13px; }
.prox-sorteo .ps-boxes { display: flex; justify-content: center; gap: 8px; margin: 0; }
.prox-sorteo .ps-box {
    flex: 0 0 auto; min-width: 68px; background: rgba(255, 255, 255, 0.1); color: #fff;
    border-radius: 20px; text-align: center; padding: 10px 12px 8px;
}
.prox-sorteo .ps-box b { font-size: 26px; font-weight: 650; }
.prox-sorteo .ps-box span {
    margin-top: 4px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
html[data-theme="dark"] .prox-sorteo .ps-box { background: rgba(255, 255, 255, 0.1); }
.ps-go {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; height: 56px; width: 100%; border-radius: 999px;
    text-decoration: none; font-weight: 800; color: #2a1700;
    background: linear-gradient(135deg, #ffd874 0%, #ffab2e 52%, #ff7a1a 100%);
    box-shadow: 0 18px 36px -16px rgba(255, 140, 30, 0.85);
}
.btn-linea { background: transparent; color: var(--text); border: 1.5px solid var(--stroke); }

.fama { text-align: center; }
.fama-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fama-intro .eyebrow { margin: 0; }
.fama-intro .h1 { font-size: clamp(40px, 5vw, 56px); }
.fama-grad {
    background: linear-gradient(100deg, #5b2bff, #b14dff 45%, #ff4f9a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fama-all {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 26px; background: #fff; color: #15112e;
    text-decoration: none; font-weight: 700; font-size: 14px; border-radius: 999px;
    box-shadow: 0 10px 24px rgba(40, 24, 110, 0.08);
}
.fama-rail {
    position: relative; margin-top: 22px; text-align: left;
    background: #fff; border-radius: 32px; padding: 14px;
    box-shadow: 0 18px 40px rgba(40, 24, 110, 0.08);
}
.fama-track { gap: 14px; padding-bottom: 0; }
.fama-photo {
    flex: 0 0 calc((100% - 42px) / 4); min-width: 0; margin: 0;
    scroll-snap-align: start; position: relative; overflow: hidden;
    aspect-ratio: 4 / 3; border-radius: 22px; background: #efeaf8;
}
.fama-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fama-photo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 36px 12px 12px; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -0.02em;
    background: linear-gradient(transparent, rgba(12, 8, 32, 0.62));
}
.fama-rail .wslider-arrow {
    top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.85); color: #4a1fe0; font-size: 16px;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4);
}
.fama-rail .wslider-arrow.left { left: 10px; }
.fama-rail .wslider-arrow.right { right: 10px; }
html[data-theme="dark"] .fama-all,
html[data-theme="dark"] .fama-rail { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
html[data-theme="dark"] .fama-rail .wslider-arrow { background: rgba(255, 255, 255, 0.85); color: #4a1fe0; }
html[data-theme="dark"] .fama-photo { background: #221c42; }
.wslider { position: relative; margin-top: 12px; }
.wslider-track { display: flex; gap: 10px; overflow: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
.wslider-track::-webkit-scrollbar { display: none; }
.fama-view { overflow: hidden; container-type: inline-size; }
.fama-view .fama-track {
    width: max-content; overflow: visible; scroll-snap-type: none; padding-bottom: 0; gap: 14px;
    animation: marquee 22s linear infinite;
}
.fama-view .fama-photo { flex: 0 0 calc((100cqi - 42px) / 4); width: calc((100cqi - 42px) / 4); }
.fama-rail:hover .fama-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .fama-view .fama-track { animation: none; }
    .fama-view { overflow-x: auto; }
}
.wslide { min-width: 210px; scroll-snap-align: start; padding: 16px; }
.wslide strong, .gan-item strong, .news-card strong { display: block; }
.wslide span, .gan-item span, .news-card .news-copy > span { color: var(--text-dim); font-size: 14px; }
.wslide em, .gan-item em { font-style: normal; font-weight: 800; }
.wslide-avatar {
    width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; font-size: 22px;
    color: #fff; background: linear-gradient(180deg, #2c1e8c, #0d0932); margin-bottom: 8px;
}
.wslider-arrow {
    position: absolute; top: 40%; width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: var(--surface); box-shadow: var(--shadow); cursor: pointer; z-index: 2;
}
.wslider-arrow.left { left: -6px; }
.wslider-arrow.right { right: -6px; }

.site-footer { margin-top: 36px; }
.footer-card {
    display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 1.1fr; gap: 22px;
    background: #fff; border-radius: 28px; padding: 28px 26px;
    box-shadow: 0 16px 40px rgba(80, 60, 140, 0.08);
    border: 1px solid rgba(255,255,255,.8);
}
html[data-theme="dark"] .footer-card { background: var(--surface); border-color: var(--stroke); }
.fcol h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; color: #241b4a; }
.ficon { color: #6d4aff; }
.ficon.wa { color: #25d366; }
.fcol h3 .fa { margin-right: 0; }
.fcol p .fa { color: #6d4aff; width: 1.1em; text-align: center; }
html[data-theme="dark"] .fcol h3 { color: #f4f0ff; }
.fcol p { margin: 0 0 6px; color: #6b647c; font-size: 13.5px; line-height: 1.45; }
.fcol + .fcol { border-left: 1px solid #eee8f7; padding-left: 22px; }
html[data-theme="dark"] .fcol + .fcol { border-left-color: var(--stroke); }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-social a {
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; font-size: 13px; font-weight: 700; color: #128c7e;
    background: #e9f8f3; border-radius: 999px; padding: 6px 10px;
}
.footer-social a .fa { margin-right: 0; }
.pay-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pay-badges .badge { border-radius: 8px; padding: 6px 8px; font-size: 12px; font-weight: 800; background: #f4f2f8; }
.badge.yape { color: #6d28d9; }
.badge.plin { color: #0f9f8a; }
.badge.visa { color: #1a1f71; }
.badge.mc { color: #eb001b; }
.footer-base {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-top: 6px; padding-top: 16px; border-top: 1px solid #eee8f7;
}
html[data-theme="dark"] .footer-base { border-top-color: var(--stroke); }
.footer-legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; }
.footer-legal-links a { color: var(--text-mute); font-size: 13px; text-decoration: none; }
.footer-legal-links a:hover { color: #6d4aff; }
.footer-copy { text-align: center; color: #8b849c; font-size: 13px; margin: 0; }
.wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 40;
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: #25d366; color: #fff; box-shadow: 0 10px 24px rgba(18, 140, 70, 0.35);
}
.wa-float i { font-size: 30px; }
.cta-shine {
    position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
    animation: shine 2.8s ease-in-out infinite;
}
@keyframes shine { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

.field { margin-bottom: 12px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.input {
    width: 100%; border: 1px solid var(--stroke); background: var(--surface-2); border-radius: 16px;
    padding: 14px 14px; outline: none;
}
textarea.input { resize: vertical; }
.terminos-aviso { color: var(--text-dim); font-size: 13px; }
.form-error { color: #e0474f; font-weight: 700; }
.qty-total-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.qty-stepper { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 999px; padding: 6px; }
.qty-stepper button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; font-size: 22px; }
.qty-stepper .val { min-width: 28px; text-align: center; font-size: 22px; font-weight: 800; }
.qty-resumen { text-align: right; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pay-mini { margin: 14px 0; padding: 12px; border-radius: 18px; background: var(--surface-2); }
.paso-actions { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 8px; }
.preview { width: 100%; border-radius: 16px; margin-top: 8px; }
.ticket-list { padding: 0; list-style: none; }
.ticket-list li, .ticket-card {
    background: var(--surface-2); border-radius: 16px; padding: 12px; margin-bottom: 8px;
}
.back-link { display: inline-block; margin: 8px 0; color: #5b2bff; font-weight: 700; text-decoration: none; }
.back-link[hidden] { display: none; }
.chip-row { display: flex; gap: 8px; overflow: auto; padding: 8px 0 12px; scrollbar-width: none; }
.chip { display: inline-flex; align-items: center; border: 0; background: var(--surface); border-radius: 999px; padding: 8px 12px; white-space: nowrap; cursor: pointer; font-weight: 700; }
.search-wrap { position: relative; }
.search-wrap > .fa { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #8b849c; margin: 0; pointer-events: none; }
.search-wrap .input { padding-left: 42px; }
.chip.on { background: var(--ink); color: #fff; }
.gan-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px; margin-bottom: 10px; border-radius: 22px; }
.fame { margin-top: 8px; }
.fame-top { display: grid; gap: 18px; }
.fame-head { text-align: left; }
.fame-title { display: flex; align-items: center; gap: 14px; }
.fame-title .h1 { font-size: clamp(36px, 5vw, 52px); }
.fame-mark {
    width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 20px;
    background: #f3f1fa;
    box-shadow: 8px 8px 16px rgba(70, 50, 120, 0.14), -7px -7px 14px rgba(255, 255, 255, 0.95);
}
.fame-mark svg { width: 36px; height: 36px; display: block; }
.fame-filtros {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr) minmax(200px, 1fr);
    gap: 12px; align-items: center; min-width: 0;
}
.fame-search { position: relative; display: block; min-width: 0; }
.fame-search > .fa-solid {
    position: absolute; left: 16px; top: 0; height: 52px; display: grid; place-items: center;
    color: #8b849e; font-size: 14px; pointer-events: none; margin: 0;
}
.fame-search input, .fame-select {
    width: 100%; border: 0; border-radius: 16px; min-height: 52px; padding: 14px 16px;
    background: #f3f1fa; color: var(--text); font-weight: 650;
    box-shadow: inset 5px 5px 10px rgba(70, 50, 120, 0.12), inset -5px -5px 10px rgba(255, 255, 255, 0.95);
}
.fame-search input { padding-left: 42px; }
.fame-search input:focus, .fame-select:focus {
    outline: none;
    box-shadow: inset 4px 4px 8px rgba(70, 50, 120, 0.14), inset -3px -3px 8px #fff, 0 0 0 3px rgba(109, 74, 255, 0.16);
}
.fame-select {
    appearance: none; cursor: pointer; padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c5678' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.fame-cat { margin-top: 26px; }
.fame-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fame-cat-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 22px; letter-spacing: -0.03em; }
.fame-cat-head .fa-solid { color: #6d4aff; font-size: 18px; }
.fame-count {
    min-width: 32px; height: 32px; padding: 0 10px; border-radius: 999px;
    display: grid; place-items: center; background: #6d4aff; color: #fff; font-size: 13px; font-weight: 800;
    box-shadow: 4px 4px 10px rgba(91, 43, 255, 0.28), -2px -2px 6px rgba(255, 255, 255, 0.4);
}
.fame-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fame-card.gan-item {
    display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; overflow: hidden;
    background: #f7f5fc; border-radius: 22px;
    box-shadow: 8px 8px 18px rgba(70, 50, 120, 0.12), -6px -6px 14px rgba(255, 255, 255, 0.92);
}
.fame-foto {
    height: 156px; display: grid; place-items: center; padding: 14px 12px 4px;
    background: linear-gradient(180deg, #fff, #f4f2fb);
}
.fame-foto img { max-width: 88%; max-height: 128px; object-fit: contain; }
.fame-fallback { font-size: 32px; color: #6d4aff; }
.fame-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.fame-body strong { font-size: 15px; letter-spacing: -0.02em; }
.fame-body em { margin-top: 6px; color: #6d4aff; font-size: 13px; }
html[data-theme="dark"] .fame-mark,
html[data-theme="dark"] .fame-card.gan-item {
    background: #2a2442;
    box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.45), -4px -4px 12px rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .fame-search input,
html[data-theme="dark"] .fame-select {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -3px -3px 8px rgba(255, 255, 255, 0.04);
    background-color: #2a2442; color: var(--text);
}
html[data-theme="dark"] .fame-foto { background: linear-gradient(180deg, #322a4e, #2a2442); }
html[data-theme="dark"] .fame-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c9c2de' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
}
.news-list { display: grid; gap: 10px; }
.news-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; text-decoration: none; }
.news-card.has-img { flex-direction: row; align-items: center; gap: 14px; }
.news-card img { width: 112px; height: 84px; object-fit: cover; border-radius: 16px; flex: none; }
.news-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.news-card small { color: var(--text-mute); }
.news-card a { color: inherit; text-decoration: none; }
.news-card .pago-mas { color: #6d4aff; }
.noticia-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 8px; }
.noticia-galeria img { width: 100%; height: 180px; object-fit: cover; border-radius: 18px; }
.noticia-full { padding: 28px 26px 22px; }
.noticia-lead { margin: 8px 0 0; color: var(--text-dim); font-size: 17px; line-height: 1.5; }
.texto-rico { margin-top: 16px; }
.texto-rico p { margin: 0 0 14px; color: var(--text); font-size: 16px; line-height: 1.7; }
.texto-rico h2, .texto-rico h3, .texto-rico h4 { margin: 18px 0 8px; letter-spacing: -0.03em; }
.texto-rico ul, .texto-rico ol { margin: 0 0 14px; padding-left: 1.3em; }
.texto-rico li { margin: 4px 0; }
.texto-rico a { color: #6d4aff; }
.texto-rico blockquote {
    margin: 0 0 14px; padding: 4px 0 4px 14px; border-left: 3px solid #6d4aff; color: var(--text-dim);
}
.texto-rico img { max-width: 100%; height: auto; border-radius: 16px; }
.texto-rico figure { margin: 0 0 14px; }
.texto-rico table { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.texto-rico th, .texto-rico td { border: 1px solid var(--stroke); padding: 8px 10px; text-align: left; }
.texto-rico .todo-list { list-style: none; padding-left: 0; }
.texto-rico .todo-list input { margin-right: 8px; }
.noticia-video { position: relative; margin: 0 0 14px; padding-top: 56.25%; border-radius: 16px; overflow: hidden; background: #111; }
.noticia-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.legal p { margin-top: 0; }
.exito-inline { font-weight: 800; color: var(--green); }
.consulta-resultado { margin-top: 14px; }
.tickets-lookup { width: min(560px, 100%); margin: 8px auto 0; }
.tickets-head { text-align: left; }
.tickets-title { display: flex; align-items: center; gap: 14px; }
.tickets-title .h1 { font-size: clamp(34px, 5vw, 46px); }
.tickets-mark {
    width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 20px;
    background: #f3f1fa;
    box-shadow: 8px 8px 16px rgba(70, 50, 120, 0.14), -7px -7px 14px rgba(255, 255, 255, 0.95);
}
.tickets-mark svg { width: 36px; height: 26px; display: block; }
.tickets-head .hint { margin: 12px 0 0; font-size: 15px; }
.tickets-panel {
    margin-top: 18px; padding: 22px 20px 18px; border-radius: 28px; background: #f3f1fa;
    box-shadow: 12px 12px 26px rgba(70, 50, 120, 0.13), -10px -10px 22px rgba(255, 255, 255, 0.92);
}
.tickets-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tickets-label-row label { font-size: 14px; font-weight: 650; color: var(--text-dim); }
.tickets-switch {
    border: 0; background: transparent; padding: 0; cursor: pointer; color: #6d4aff;
    font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.tickets-input {
    width: 100%; border: 0; border-radius: 16px; min-height: 56px; padding: 14px 16px;
    background: #f3f1fa; color: var(--text); letter-spacing: 0.38em; font-weight: 700; font-size: 18px;
    box-shadow: inset 5px 5px 10px rgba(70, 50, 120, 0.13), inset -5px -5px 10px rgba(255, 255, 255, 0.95);
}
.tickets-input:focus {
    outline: none;
    box-shadow: inset 5px 5px 10px rgba(70, 50, 120, 0.15), inset -4px -4px 8px #fff, 0 0 0 3px rgba(109, 74, 255, 0.16);
}
.tickets-input::placeholder { color: #b7b0c9; }
.tickets-submit {
    width: 100%; margin-top: 14px; min-height: 54px; border: 0; border-radius: 16px; cursor: pointer;
    color: #fff; font-weight: 800; font-size: 16px;
    background: linear-gradient(180deg, #8d70ff 0%, #6d4aff 48%, #5526f2 100%);
    box-shadow: 7px 8px 16px rgba(91, 43, 255, 0.32), -3px -3px 8px rgba(255, 255, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.tickets-submit:hover { filter: brightness(1.05); }
.tickets-submit:active {
    filter: none;
    box-shadow: inset 4px 4px 10px rgba(40, 16, 120, 0.35), inset -2px -2px 6px rgba(255, 255, 255, 0.18);
}
.tickets-lookup .form-error { margin: 10px 2px 0; }
.tickets-lookup .consulta-resultado { margin-top: 16px; }
.tickets-lookup .ticket-card, .tickets-lookup .consulta-resultado .card {
    background: #f3f1fa; border-radius: 22px;
    box-shadow: 8px 8px 16px rgba(70, 50, 120, 0.12), -6px -6px 14px rgba(255, 255, 255, 0.9);
}
html[data-theme="dark"] .tickets-mark,
html[data-theme="dark"] .tickets-panel,
html[data-theme="dark"] .tickets-input,
html[data-theme="dark"] .tickets-lookup .ticket-card,
html[data-theme="dark"] .tickets-lookup .consulta-resultado .card {
    background: #2a2442;
    box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.45), -5px -5px 12px rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .tickets-input {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -3px -3px 8px rgba(255, 255, 255, 0.04);
    color: var(--text);
}
html[data-theme="dark"] .tickets-submit {
    box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.auth-wrap { display: grid; place-items: start center; padding: 18px 0 28px; }
.auth-card {
    width: min(440px, 100%);
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 28px;
    padding: 28px 26px 22px;
    box-shadow: 0 30px 70px -36px rgba(40, 24, 110, 0.55), 0 0 0 1px rgba(109, 74, 255, 0.05);
}
html[data-theme="dark"] .auth-card { border-color: var(--stroke); }
.auth-mark {
    width: 52px; height: 52px; border-radius: 16px; margin-bottom: 14px;
    display: grid; place-items: center; font-size: 24px; color: #6d4aff;
    background: rgba(109, 74, 255, 0.12);
}
.auth-card .eyebrow { margin-bottom: 4px; }
.auth-card h2 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.auth-lead { margin: 0 0 18px; color: var(--text-dim); font-size: 14px; line-height: 1.45; }
.auth-card .field { margin-bottom: 14px; }
.auth-card .field label { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.auth-control { position: relative; }
.auth-control > .ti {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #8d86a6; font-size: 18px; pointer-events: none;
}
.auth-card .input {
    background: #fbfbfe;
    border: 1px solid #e4e0f0;
    border-radius: 14px;
    min-height: 50px;
    padding: 12px 44px 12px 42px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
html[data-theme="dark"] .auth-card .input { background: var(--surface-2); border-color: var(--stroke); }
.auth-card .input::placeholder { color: #b0aac4; }
.auth-card .input:focus {
    border-color: #6d4aff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(109, 74, 255, 0.14);
}
html[data-theme="dark"] .auth-card .input:focus { background: #241d3d; }
.auth-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent;
    color: #8d86a6; cursor: pointer; display: grid; place-items: center; font-size: 18px;
}
.auth-eye:hover { color: #6d4aff; background: rgba(109, 74, 255, 0.08); }
.auth-error {
    margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600;
    color: #be123c; background: #fff1f2; border: 1px solid #fecdd3;
}
.auth-card .btn { margin-top: 4px; }
.auth-switch { text-align: center; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--stroke); font-size: 14px; color: var(--text-dim); }
.auth-switch a { color: #6d4aff; font-weight: 700; text-decoration: none; }
@media (max-width: 979px) {
    .app-shell { width: min(520px, calc(100% - 16px)); padding-bottom: 88px; }
    .topbar { width: min(520px, calc(100% - 16px)); margin-top: 8px; padding: 8px 10px 8px 14px; gap: 12px; top: 8px; }
    .nav-desk, .btn-auth { display: none; }
    .menu-burger { display: inline-flex; }
    .sorteos-grid { grid-template-columns: 1fr; }
    .hero.sec-head { text-align: left; }
    .h1, .fama-intro .h1 { font-size: 34px; }
    .prox-sorteo { grid-template-columns: 1fr; }
    .fama-view .fama-photo { flex-basis: 78cqi; width: 78cqi; }
    .vivo { width: 100%; min-width: 0; }
    .vivo-head .h1 { font-size: 28px; }
    .vivo-grid { grid-template-columns: 1fr; gap: 12px; }
    .vivo-card { min-width: 0; padding: 18px 14px; gap: 12px; }
    .vivo-logo { height: 46px; }
    .vivo-card.kick .vivo-logo { height: 36px; }
    .vivo-txt strong, .vivo-txt em { overflow-wrap: anywhere; }
    .vivo-txt strong { font-size: 17px; }
    .vivo-badge {
        max-width: calc(100% - 20px); white-space: normal; text-align: center; line-height: 1.25;
        font-size: 10px; padding: 7px 12px;
    }
    .pago-bento, .pay-layout { grid-template-columns: 1fr; }
    .noticia-galeria { grid-template-columns: 1fr; }
    .noticia-galeria img { height: 220px; }
    .fame-top, .fame-filtros { grid-template-columns: 1fr; }
    .fame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-card.has-img { flex-direction: column; align-items: stretch; }
    .news-card img { width: 100%; height: 180px; }
    .pay-card .pay-num { font-size: 28px; }
    .como-step .num { font-size: 46px; }
    .footer-card { grid-template-columns: 1fr; }
    .fcol + .fcol { border-left: 0; padding-left: 0; border-top: 1px solid #eee8f7; padding-top: 16px; }
}
@media (min-width: 980px) {
    .como-grid { grid-template-columns: repeat(5, 1fr); }
    .vivo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
    .cp-txt { display: none; }
    .h1, .sc-title { font-size: 28px; }
}