*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#020202;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
button,input{font:inherit}

.raffle-page{min-height:100vh;background:radial-gradient(circle at 50% 0,#350000 0,#100000 18%,#050505 50%,#000 100%);padding-bottom:90px}
.raffle-hero{max-width:1240px;margin:auto;display:grid;grid-template-columns:1fr minmax(320px,500px);gap:56px;align-items:center;padding:72px 26px 54px}
.eyebrow,.section-heading span{display:block;color:#ff3434;font-size:13px;font-weight:900;letter-spacing:2.5px;margin:0 0 12px}
.hero-copy h1{font-size:clamp(48px,7vw,92px);line-height:.92;margin:0;text-transform:uppercase;letter-spacing:-3px;text-shadow:0 0 28px rgba(255,0,0,.35)}
.hero-copy h2{font-size:clamp(24px,3vw,40px);line-height:1.08;margin:22px 0;color:#fff}
.hero-text{max-width:680px;color:#ccc;line-height:1.75;font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.primary-cta,.secondary-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:7px;text-decoration:none;font-size:13px;font-weight:900;letter-spacing:1px;transition:.25s}
.primary-cta{background:#b60000;color:#fff;border:1px solid #fff;box-shadow:0 0 18px rgba(255,0,0,.35)}
.secondary-cta{background:#0a0a0a;color:#fff;border:1px solid #555}
.primary-cta:hover,.secondary-cta:hover{transform:translateY(-2px);border-color:#f33;box-shadow:0 0 22px rgba(255,0,0,.5)}
.poster-frame{margin:0;padding:12px;background:linear-gradient(145deg,#2b0000,#070707);border:1px solid #7c0000;border-radius:18px;box-shadow:0 25px 70px #000,0 0 30px rgba(255,0,0,.17)}
.poster-frame img{display:block;width:100%;max-height:650px;object-fit:contain;border-radius:11px;background:#0a0a0a}
.poster-frame figcaption{text-align:center;color:#888;font-size:11px;padding:10px 6px 1px}

.raffle-summary{max-width:1240px;margin:0 auto 26px;padding:0 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.summary-card{padding:22px;background:linear-gradient(180deg,#151515,#080808);border:1px solid #333;border-radius:12px;box-shadow:0 12px 30px #000}
.summary-card span{display:block;color:#999;font-size:11px;font-weight:900;letter-spacing:1.4px;margin-bottom:10px}
.summary-card strong{font-size:26px;color:#fff}

.progress-section{max-width:1188px;margin:0 auto 70px;padding:28px;border:1px solid #3b3b3b;border-radius:16px;background:rgba(8,8,8,.92)}
.progress-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:16px}
.progress-heading span{display:block;color:#ff3333;font-size:11px;font-weight:900;letter-spacing:1.8px;margin-bottom:7px}
.progress-heading strong{font-size:18px}
#progressPercent{font-size:32px;color:#ff3030}
.progress-track{height:13px;border-radius:20px;background:#242424;overflow:hidden;border:1px solid #444}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#750000,#ff1b1b);box-shadow:0 0 18px #f00;transition:width .55s ease}
.urgency-message{margin:13px 0 0;color:#aaa;font-size:14px}
.urgency-message.hot{color:#ffce54;font-weight:bold}.urgency-message.critical{color:#ff4545;font-weight:900}

.prize-section,.purpose-section,.numbers-section{max-width:1240px;margin:0 auto;padding:68px 26px}
.section-heading{margin-bottom:28px}
.section-heading h2{font-size:clamp(31px,4vw,52px);line-height:1.05;margin:0}
.prize-card{display:grid;grid-template-columns:minmax(280px,480px) 1fr;gap:42px;align-items:center;padding:24px;background:linear-gradient(135deg,#180000,#080808 58%);border:1px solid #650000;border-radius:18px;box-shadow:0 0 32px rgba(255,0,0,.13)}
.prize-image{min-height:360px;background:#050505;border-radius:13px;overflow:hidden;border:1px solid #333}
.prize-image img{display:block;width:100%;height:100%;max-height:500px;object-fit:cover}
.prize-label{color:#ff3838;font-size:12px;letter-spacing:2px;font-weight:900}
.prize-copy h3{font-size:36px;line-height:1.1;margin:12px 0 18px}
.prize-copy p,.prize-copy li,.purpose-section p{color:#c7c7c7;line-height:1.7}
.prize-copy ul{padding-left:20px}
.purpose-section{text-align:center;max-width:900px;padding-top:34px}
.purpose-section p{font-size:18px;margin:auto}

.numbers-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}
.refresh-button{height:42px;padding:0 18px;border:1px solid #555;border-radius:7px;background:#111;color:#fff;font-size:12px;font-weight:900;cursor:pointer;transition:.2s}
.refresh-button:hover{border-color:#f00;background:#280000}
.status-legend{display:flex;flex-wrap:wrap;gap:22px;margin:0 0 20px;color:#bbb;font-size:13px}
.status-legend span{display:flex;align-items:center;gap:7px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.available{background:#37b85a}.dot.pending{background:#d6a02f}.dot.paid{background:#c72424}
.mode-badge{display:inline-block;margin-bottom:16px;padding:8px 12px;border-radius:7px;background:#9d6300;color:#fff;font-size:12px;font-weight:900;letter-spacing:1px}
.numbers-loading{padding:28px;text-align:center;color:#999;border:1px solid #333;border-radius:12px;background:#080808}
.number-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:11px}
.number-button{aspect-ratio:1;min-width:0;border-radius:10px;border:1px solid #454545;background:linear-gradient(180deg,#171717,#090909);color:#fff;font-size:17px;font-weight:900;cursor:pointer;transition:.2s;box-shadow:0 8px 18px #000}
.number-button.available:hover{transform:translateY(-4px) scale(1.04);border-color:#ff3131;background:#400000;box-shadow:0 0 18px rgba(255,0,0,.48)}
.number-button.pending,.number-button.reservado_prueba{background:#2f2717;color:#bda56e;border-color:#765c25;cursor:not-allowed}
.number-button.paid,.number-button.pagado{background:#310909;color:#a85d5d;border-color:#761e1e;cursor:not-allowed;text-decoration:line-through}

.purchase-overlay{position:fixed;inset:0;z-index:1000000;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(0,0,0,.9);backdrop-filter:blur(8px)}
.purchase-overlay.open{display:flex}
.purchase-modal{position:relative;width:min(94vw,520px);padding:30px;background:radial-gradient(circle at top,#350000,#090909 56%);border:1px solid #e00000;border-radius:17px;box-shadow:0 0 38px rgba(255,0,0,.35);text-align:center}
.modal-close{position:absolute;right:-13px;top:-13px;width:43px;height:43px;border:0;border-radius:50%;background:#fff;color:#000;font-size:26px;font-weight:900;cursor:pointer}
.selected-number{width:104px;height:104px;margin:4px auto 18px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:#b50000;border:2px solid #fff;font-size:46px;font-weight:900;box-shadow:0 0 25px rgba(255,0,0,.65)}
.purchase-modal h2{margin:0 0 9px;font-size:27px}.modal-intro{color:#bbb;line-height:1.5;font-size:14px}
.purchase-form{display:grid;gap:11px;margin-top:22px}.purchase-form input{width:100%;padding:13px;background:#060606;color:#fff;border:1px solid #555;border-radius:8px;outline:none}.purchase-form input:focus{border-color:#f33;box-shadow:0 0 0 3px rgba(255,0,0,.1)}
.purchase-total{display:flex;justify-content:space-between;padding:14px;border:1px solid #333;border-radius:8px;background:#0b0b0b}.purchase-total strong{color:#ff3a3a}
.pay-button{min-height:49px;border:1px solid #fff;border-radius:8px;background:#ba0000;color:#fff;font-weight:900;cursor:pointer}.pay-button:hover{background:#e00000;box-shadow:0 0 16px #f00}.pay-button:disabled{opacity:.55;cursor:wait}
.form-message{min-height:20px;margin-top:14px;color:#ddd;font-size:14px;line-height:1.4}
.sale-toast{position:fixed;right:24px;bottom:24px;z-index:1000001;max-width:320px;padding:15px 18px;border:1px solid #bd0000;border-radius:10px;background:#100000;color:#fff;box-shadow:0 0 25px rgba(255,0,0,.4);transform:translateY(140px);opacity:0;transition:.35s}.sale-toast.show{transform:translateY(0);opacity:1}
.raffle-footer{text-align:center;padding:28px;color:#777;border-top:1px solid #222;background:#030303;font-size:13px}

@media(max-width:1000px){.raffle-hero{grid-template-columns:1fr;gap:32px}.poster-frame{max-width:650px;margin:auto}.raffle-summary{grid-template-columns:repeat(2,1fr)}.prize-card{grid-template-columns:1fr}.prize-image{min-height:280px}.number-grid{grid-template-columns:repeat(8,1fr)}}
@media(max-width:680px){.raffle-hero{padding-top:45px}.hero-copy h1{letter-spacing:-1px}.raffle-summary{grid-template-columns:1fr 1fr}.summary-card{padding:16px}.summary-card strong{font-size:19px}.progress-section{margin-left:18px;margin-right:18px;padding:20px}.prize-section,.purpose-section,.numbers-section{padding-left:18px;padding-right:18px}.prize-card{padding:14px}.prize-copy h3{font-size:28px}.numbers-heading{align-items:start;flex-direction:column}.number-grid{grid-template-columns:repeat(5,1fr);gap:8px}.number-button{font-size:15px}.purchase-modal{padding:24px 18px}.sale-toast{left:18px;right:18px;bottom:18px;max-width:none}}
