/* ---------- SORTEOS en claro (spec 27) ---------- */
.rf-page{container-type:inline-size}
/* Título y saldo: el saldo lleva a Mis puntos */
.rf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.rf-head h1{font-family:var(--tech-wide);font-weight:600;font-size:1.7rem;line-height:1.1;color:var(--navy)}
.rf-bal{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:20px;background:var(--white);box-shadow:var(--shadow-soft);color:var(--navy)}
.rf-bal .pts b{font-family:var(--tech-wide);font-weight:600;font-size:1.05rem}

/* Estado sobre la foto, en vidrio oscuro; "Participando" con palomita */
.rf-state{position:absolute;z-index:2;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--white);background:rgba(4,11,31,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .rf-state{background:rgba(4,11,31,.82)} }
.rf-state svg{width:14px;height:14px;color:var(--celeste)}

/* Sorteo destacado: la foto a sangre es el bloque oscuro de la pantalla; los datos van en blanco */
.rf-hero{overflow:hidden;border-radius:var(--r-tile);background:var(--white);box-shadow:var(--shadow-soft)}
.rf-hero .art{position:relative;height:max(200px,56cqw);display:grid;place-items:center;background:var(--grad);color:var(--white)}
.rf-hero .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rf-hero .art .ic{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.14);display:grid;place-items:center}
.rf-hero .art .ic svg{width:32px;height:32px}
.rf-hero .art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,11,31,.28) 0%,rgba(4,11,31,.05) 30%,rgba(4,11,31,.4) 58%,rgba(4,11,31,.9) 100%)}
.rf-hero .art h2{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;font-family:var(--tech-wide);font-weight:600;font-size:1.4rem;line-height:1.25;color:var(--white);text-shadow:0 1px 2px rgba(4,11,31,.45)}
.rf-hero .body{display:flex;flex-direction:column;gap:16px;padding:18px 18px 20px}
.rf-hero .prize{margin-top:-8px;font-size:.88rem;line-height:1.45;color:var(--muted)}
.rf-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rf-stats>div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:var(--bg-card)}
.rf-stats small{font-size:.76rem;color:var(--muted)}
.rf-stats b,.rf-stats .pts{font-family:var(--tech-wide);font-weight:600;font-size:1.3rem;line-height:1.1;color:var(--navy)}
.rf-stats .pts b{font-size:1em}

/* Filas con palomita: base compartida con las reglas de contraseña de Acceso (no cambia) */
.reqs{display:flex;flex-direction:column;gap:8px}
.req{display:flex;align-items:center;gap:10px;font-size:.88rem}
.req .ck{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--gray-lightest);color:var(--gray-med)}
.req .ck svg{width:14px;height:14px}
.req.ok .ck{background:var(--celeste);color:var(--navy-g1)}
.req.ok{color:var(--navy)}
.req .act{margin:-11px 0 -11px auto;min-height:40px;padding:0 2px;font-size:.76rem;font-weight:700;color:var(--p2143);white-space:nowrap}
.prog{height:8px;border-radius:4px;background:var(--gray-lightest);overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--p2143),var(--cyan))}

/* Avance y checklist de requisitos en Sorteos */
.rf-req{display:flex;flex-direction:column;gap:10px}
.rf-prog-l{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.82rem;color:var(--muted)}
.rf-prog-l b{color:var(--navy)}
.rf-prog-l .pts{color:var(--navy)}
.rf-page .prog{height:6px;border-radius:3px}
.rf-page .prog i{border-radius:3px;background:var(--sky-ink)}
.rf-page .reqs{gap:10px;margin-top:4px}
.rf-page .req{line-height:1.35;color:var(--muted)}
.rf-page .req .ck{color:var(--muted)}
.rf-page .req.ok{color:var(--navy)}
.rf-page .req.ok .ck{background:var(--navy-g1);color:var(--white)}
.rf-page .req .act{font-size:.8rem;color:var(--sky-ink)}

/* Cómo funciona */
.rf-how{margin-top:20px;font-size:.86rem;line-height:1.55;color:var(--muted)}

/* Más sorteos: tarjetas blancas con la foto arriba */
.rf-list{display:flex;flex-direction:column;gap:28px}
.raffle{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-tile);background:var(--white);box-shadow:var(--shadow-soft)}
.raffle .art{position:relative;aspect-ratio:16/8;display:grid;place-items:center;overflow:hidden;background:var(--grad);color:var(--white)}
.raffle .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.raffle .art .ic{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.14);display:grid;place-items:center}
.raffle .art .ic svg{width:28px;height:28px}
.raffle.closed .art img{filter:grayscale(.85) brightness(.95)}
.raffle .body{display:flex;flex-direction:column;gap:14px;padding:18px 18px 20px}
.raffle h3{font-family:var(--tech-wide);font-weight:600;font-size:1.2rem;line-height:1.28;color:var(--navy)}
.raffle .prize{margin-top:4px;font-size:.86rem;line-height:1.45;color:var(--muted)}
.rf-note{font-size:.82rem;color:var(--muted)}
.rf-note b{color:var(--navy)}
.winners{display:flex;flex-wrap:wrap;gap:8px}
.winners span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:20px;background:var(--bg-card);font-size:.8rem;font-weight:600;color:var(--navy)}
.winners span i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--navy-g1);color:var(--white);font-style:normal;font-size:.62rem;font-weight:700}
.tickets{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
@container (max-width:300px){ .rf-head h1{font-size:1.5rem} .rf-hero .art h2{font-size:1.25rem} .rf-hero .body,.raffle .body{padding:16px 14px 18px} }

/* ---------- Hoja Participar (canje): sin cambios; el resumen oscuro es un momento con neón (spec 25) ---------- */
.enter-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--bg-card);border-radius:var(--r-tile);padding:12px 14px}
.enter-row b{color:var(--navy);display:block}
.enter-row small{color:var(--muted);font-size:.8rem;display:block;margin-top:2px}
.enter-row .qty{background:#fff;height:44px}
.qty button[disabled]{opacity:.35;cursor:not-allowed}

/* Resumen del canje en la hoja de Participar (saldo, canjeas y te quedan) */
.summary{background:var(--grad-hero);border:1px solid rgba(126,222,241,.22);box-shadow:0 12px 30px rgba(4,11,31,.28),inset 0 1px 0 rgba(255,255,255,.08);color:#fff;border-radius:var(--r-card);padding:18px;display:flex;flex-direction:column;gap:8px}
.summary .l{display:flex;justify-content:space-between;font-size:.9rem;font-variant-numeric:tabular-nums}
.summary .l.tot{font-size:1.2rem;font-weight:700;border-top:1px solid var(--glass-line);padding-top:10px;margin-top:4px}
.summary .disc{color:var(--cyan)}
.summary .l>span:last-child{font-family:var(--tech);font-size:1.1em;letter-spacing:.02em}
.summary .l.tot>span:last-child{text-shadow:0 0 14px rgba(61,139,255,.6)}