.rp4-container {
    position: relative !important; width: 100% !important; min-height: 100vh !important; overflow: hidden !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
    background-color: #e8f1fb !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 24px 40px 60px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}
.rp4-overlay-grid {
    position: absolute !important; inset: 0 !important; pointer-events: none !important;
    background-image: linear-gradient(rgba(10,46,92,.03) 1px, transparent 1px),
                       linear-gradient(90deg, rgba(10,46,92,.03) 1px, transparent 1px) !important;
    background-size: 55px 55px !important;
    -webkit-mask-image: radial-gradient(black 40%, transparent 80%) !important;
    mask-image: radial-gradient(black 40%, transparent 80%) !important;
}
.rp4-content { position: relative !important; z-index: 5 !important; max-width: 1320px !important; width: 100% !important; margin: 0 auto !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }
.rp4-header { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important; margin-bottom: 8px !important; padding-bottom: 8px !important; min-height: 60px !important; }
.rp4-brand { display: flex !important; align-items: center !important; max-width: 55% !important; }
.rp4-logo-marca-wrap { display: inline-flex !important; align-items: center !important; max-width: 260px !important; overflow: hidden !important; }
.rp4-container img.rp4-logo-marca { height: 100% !important; width: auto !important; max-width: 260px !important; max-height: 100% !important; object-fit: contain !important; display: block !important; }
.rp4-brand-text { color: var(--rp4-primario, #061B3D) !important; font-weight: 800 !important; font-size: 1.2rem !important; }
.rp4-counter { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: .55rem 1.1rem !important; background: linear-gradient(90deg, var(--rp4-contador-1, #2C9DE3), var(--rp4-contador-2, #0081F1)) !important; border-radius: 100px !important; font-size: .78rem !important; font-weight: 700 !important; color: #FFFFFF !important; box-shadow: 0 6px 18px -4px rgba(0,129,241,.5) !important; white-space: nowrap !important; }
.rp4-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #FFFFFF !important; display: inline-block !important; animation: rp4Pulse 1.6s ease-in-out infinite !important; flex-shrink:0 !important; }
@keyframes rp4Pulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(1.3);} }
.rp4-main { flex: 1 !important; display: grid !important; grid-template-columns: 1fr 1.15fr !important; align-items: center !important; gap: 30px !important; padding: 8px 0 24px !important; }
.rp4-left { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; max-width: 500px !important; }
.rp4-logo-titulo-zone { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1.3rem !important; min-height: 180px !important; }
.rp4-svg-deco { position: absolute !important; top: 50% !important; left: 30% !important; transform: translate(-50%, -50%); width: 340px !important; height: 340px !important; z-index: 0 !important; pointer-events: none !important; animation: rp4Spin 22s linear infinite !important; filter: blur(0.3px) !important; }
.rp4-svg-deco svg { width: 100% !important; height: 100% !important; }
@keyframes rp4Spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.rp4-logo-ruleta-wrap { display: block !important; width: 100% !important; position: relative !important; z-index: 2 !important; }
.rp4-logo-ruleta-fx { animation: rp4LogoFloat 4.5s ease-in-out infinite !important; filter: drop-shadow(0 14px 30px rgba(10,46,92,.35)) drop-shadow(0 0 22px rgba(0,129,241,.25)) !important; }
@keyframes rp4LogoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.rp4-container img.rp4-logo-ruleta { width: 100% !important; height: auto !important; max-width: 100% !important; display: block !important; }
.rp4-title-fallback { color: var(--rp4-texto-hero,#061B3D) !important; font-weight: 800 !important; font-size: clamp(1.8rem,4vw,2.8rem) !important; line-height: 1.15 !important; margin: 0 0 1rem !important; position: relative !important; z-index: 2 !important; }
.rp4-subtitle { color: var(--rp4-texto-hero,#061B3D) !important; opacity: .82 !important; font-size: 1rem !important; line-height: 1.6 !important; margin: 0 0 1.6rem !important; font-weight: 400 !important; max-width: 440px !important; overflow-wrap: break-word !important; text-align: center !important; }
.rp4-spin-btn-ring { display: block !important; text-align: center !important; padding: 3px !important; border-radius: 100px !important; }
.rp4-spin-btn { position: relative !important; overflow: hidden !important; padding: 1.25rem 3.4rem !important; border: none !important; border-radius: 97px !important; cursor: pointer !important; background: radial-gradient(circle at 50% 35%, var(--rp4-boton-fill-2,#083C90) 0%, var(--rp4-boton-fill-1,#032258) 100%) !important; color: #fff !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; font-size: 1.3rem !important; letter-spacing: .07em !important; text-transform: uppercase !important; transition: transform .25s ease, box-shadow .25s ease !important; display: inline-block !important; }
.rp4-spin-btn:hover:not(:disabled) { transform: translateY(-3px) !important; }
.rp4-spin-btn:disabled { background: #94a3b8 !important; cursor: not-allowed !important; opacity: .7 !important; }
.rp4-shimmer { position: absolute !important; top:0 !important; left:-60%; width: 40% !important; height: 100% !important; background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent) !important; transform: skewX(-18deg) !important; animation: rp4Shimmer 2.8s ease-in-out infinite !important; }
@keyframes rp4Shimmer { 0%{left:-60%;} 100%{left:160%;} }
.rp4-btn-label { position: relative !important; z-index: 1 !important; }
.rp4-terms { margin-top: .8rem !important; color: var(--rp4-texto-hero,#061B3D) !important; opacity: .55 !important; font-size: .88rem !important; font-weight: 300 !important; }
.rp4-right { position: relative !important; display: flex !important; justify-content: center !important; align-items: center !important; min-height: 480px !important; padding-right: 90px !important; }
.rp4-wheel-card { position: relative !important; z-index: 3 !important; background: rgba(255,255,255,.6) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border: 1px solid rgba(255,255,255,.65) !important; border-radius: 36px !important; padding: 34px !important; box-shadow: 0 34px 80px -15px rgba(6,27,61,.25) !important; }
.rp4-wheel-area { position: relative !important; width: 600px !important; height: 600px !important; max-width: 72vw !important; max-height: 72vw !important; }
.rp4-wheel-glow { position: absolute !important; inset: 10px !important; border-radius: 50% !important; box-shadow: 0 0 90px 26px rgba(0,129,241,.4) !important; animation: rp4WheelPulse 3.2s ease-in-out infinite !important; }
@keyframes rp4WheelPulse { 0%,100%{opacity:.4;} 50%{opacity:1;} }
.rp4-container svg.rp4-wheel-svg { position: relative !important; width: 100% !important; height: 100% !important; display: block !important; transition: transform 5.2s cubic-bezier(.15,.65,.1,1) !important; filter: drop-shadow(0 12px 30px rgba(6,27,61,.35)) !important; z-index: 10 !important; }
.rp4-pointer-img { position: absolute !important; top: -8px !important; left: 50% !important; transform: translateX(-50%) !important; width: 46px !important; height: auto !important; z-index: 20 !important; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)) !important; pointer-events: none !important; }
.rp4-base-ruleta { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; z-index: 1 !important; pointer-events: none !important; }
.rp4-wheel-shimmer { position: absolute !important; inset: 0 !important; border-radius: 50% !important; overflow: hidden !important; z-index: 12 !important; pointer-events: none !important; }
.rp4-wheel-shimmer::before { content: '' !important; position: absolute !important; top: 0 !important; left: -60%; width: 40% !important; height: 100% !important; background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent) !important; transform: skewX(-18deg) !important; animation: rp4Shimmer 2.8s ease-in-out infinite !important; }
.rp4-center-hub { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; width: 84px !important; height: 84px !important; border-radius: 50% !important; background: #fff !important; border: 4px solid var(--rp4-secundario,#0081F1) !important; z-index: 15 !important; box-shadow: 0 6px 16px rgba(0,0,0,.2) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; }
.rp4-hub-logo { width: 62px !important; height: 62px !important; object-fit: contain !important; display: block !important; }
.rp4-container img.rp4-personaje { position: absolute !important; right: -12% !important; bottom: -8% !important; height: 100% !important; width: auto !important; max-height: 640px !important; max-width: none !important; object-fit: contain !important; filter: drop-shadow(0 20px 30px rgba(0,0,0,.28)) !important; pointer-events: none !important; }
.rp4-container img.rp4-personaje-frente { z-index: 8 !important; opacity: 1 !important; }
.rp4-container img.rp4-personaje-detras { z-index: 1 !important; opacity: .95 !important; }
.rp4-container img.rp4-personaje-flip { transform: scaleX(-1) !important; }
/* Barra de beneficios */
.rp4-beneficios { display: flex !important; justify-content: center !important; gap: 100px !important; flex-wrap: wrap !important; padding: 18px 32px !important; margin-top: 20px !important; background: rgba(255,255,255,.92) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-radius: 18px !important; box-shadow: 0 4px 20px rgba(6,27,61,.08) !important; }
.rp4-beneficio-item { display: flex !important; align-items: center !important; gap: 10px !important; flex: 1 !important; min-width: 160px !important; max-width: 220px !important; }
.rp4-beneficio-item img { width: 38px !important; height: 38px !important; object-fit: contain !important; flex-shrink: 0 !important; }
.rp4-beneficio-texto strong { display: block !important; font-size: .82rem !important; font-weight: 700 !important; color: var(--rp4-primario, #061B3D) !important; line-height: 1.2 !important; }
.rp4-beneficio-texto span { font-size: .73rem !important; color: var(--rp4-primario, #061B3D) !important; opacity: .6 !important; font-weight: 400 !important; }
@media (max-width: 600px) { .rp4-beneficio-item { min-width: 130px !important; } .rp4-beneficio-item img { width: 30px !important; height: 30px !important; } }

.rs-modal { display:none; position:fixed !important; inset:0 !important; background:rgba(6,20,36,.75) !important; z-index:9999 !important; align-items:center !important; justify-content:center !important; padding: 20px !important; backdrop-filter: blur(4px) !important; }
.rs-modal-content { background:#fff !important; padding:44px 36px !important; border-radius:24px !important; text-align:center !important; max-width:420px !important; width:100% !important; animation:rs-pop .35s cubic-bezier(.2,.8,.3,1) !important; font-family:'Poppins',sans-serif !important; box-shadow: 0 30px 70px rgba(0,0,0,.4) !important; }
@keyframes rs-pop { from{transform:scale(.85); opacity:0;} to{transform:scale(1); opacity:1;} }
.rs-modal-icon { font-size: 3rem !important; margin-bottom: .5rem !important; }
.rs-modal-content h2 { margin: 0 0 .6rem !important; color: #061B3D !important; font-weight: 700 !important; }
.rs-modal-content p { color: #475569 !important; font-weight: 300 !important; }
.rs-premio-intro { font-size: 1rem !important; font-weight: 600 !important; color: #475569 !important; margin: 0 0 .4rem !important; }
.rs-premio-nombre { font-size: 1.6rem !important; font-weight: 800 !important; color: #061B3D !important; margin: 0 0 .8rem !important; }
.rs-premio-captura { display: none; color: #0081F1 !important; font-weight: 600 !important; background: #eef6ff !important; padding: 12px 16px !important; border-radius: 12px !important; margin: 0 0 .8rem !important; }
.rs-no-copy { user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; -webkit-touch-callout: none !important; }
.rs-codigo { font-size:22px !important; font-weight:700 !important; background:#eef6ff !important; padding:12px !important; border-radius:12px !important; letter-spacing:2px !important; margin:18px 0 !important; color: #061B3D !important; border: 1px dashed #0081F1 !important; }
.rs-btn-primary { display:inline-block; background: linear-gradient(135deg,#2C9DE3 0%,#0081F1 100%) !important; color:#fff !important; padding:13px 30px !important; border-radius:100px !important; text-decoration:none !important; border:none !important; cursor:pointer !important; margin:6px !important; font-weight: 700 !important; font-family:'Poppins',sans-serif !important; }
.rs-btn-close { background:transparent !important; border:1px solid #cbd5e1 !important; color:#64748b !important; padding:11px 26px !important; border-radius:100px !important; cursor:pointer !important; margin: 6px !important; font-family:'Poppins',sans-serif !important; }
@media (max-width: 1100px) { .rp4-right { padding-right: 40px !important; } .rp4-container img.rp4-personaje { max-height: 480px !important; right: -8% !important; } }
@media (max-width: 960px) {
    .rp4-container { padding: 20px 20px 48px !important; }
    .rp4-main { grid-template-columns: 1fr !important; gap: 36px !important; text-align: center !important; }
    .rp4-left { align-items: center !important; text-align: center !important; max-width: 100% !important; }
    .rp4-logo-titulo-zone { justify-content: center !important; }
    .rp4-svg-deco { left: 50% !important; }
    .rp4-subtitle { margin-left: auto !important; margin-right: auto !important; }
    .rp4-right { min-height: auto !important; padding-right: 0 !important; }
    .rp4-container img.rp4-personaje { display: none !important; }
    .rp4-brand { max-width: 60% !important; }
    .rp4-logo-ruleta-wrap { max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; }
    .rp4-wheel-area { width: 500px !important; height: 500px !important; max-width: 90vw !important; max-height: 90vw !important; }
    .rp4-spin-btn-ring { margin: 0 auto !important; }
}
@media (max-width: 540px) { .rp4-logo-marca-wrap { max-width: 160px !important; } .rp4-wheel-card { padding: 16px !important; } .rp4-svg-deco { width: 260px !important; height: 260px !important; } .rp4-wheel-area { width: 340px !important; height: 340px !important; } }
