/* =============================================================
   RFILMS - ESTILOS PERSONALIZADOS PREMIUM
   Paleta: Cyber Crimson & VIP Gold, Neon Glows y Glassmorphism
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --site-font: 'Plus Jakarta Sans', sans-serif;
}

body, header, nav, a, button, input, select, textarea {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* =============================================================
   TIPOGRAFÍA PREMIUM OFICIAL PARA PRECIOS (MODERNO & ELEGANTE)
   ============================================================= */
.font-price,
.font-mono-price,
.price-tag,
.price-badge,
#orderModalPrice,
#yapeColPrice,
#bankColPrice,
#vipColPrice,
#checkoutSummaryFinalTotal,
#summaryTotalPrice {
    font-family: var(--site-font) !important;
    font-feature-settings: "tnum" on, "lnum" on !important;
    letter-spacing: -0.03em !important;
}

/* Animación de entrada de página */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   PALETA SOLICITADA: FONDO CONSOLIDADO EN TONOS ROJOS OSCUROS
   (NO NEGRO, NO BRILLANTE - DEGRADADO ARMONIOSO Y UNIFORME)
   ============================================================= */
html {
    overflow-x: clip;
    max-width: 100%;
    width: 100%;
}

body {
    font-family: var(--site-font) !important;
    animation: fadeIn 0.3s ease-out;
    overflow-x: clip !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    background-color: #240307 !important;
    background-image: 
        radial-gradient(ellipse 90% 55% at 50% -5%, rgba(165, 18, 36, 0.24), transparent 70%),
        radial-gradient(ellipse 85% 40% at 50% 16%, rgba(165, 18, 36, 0.22), transparent 70%),
        radial-gradient(circle at 12% 38%, rgba(130, 12, 26, 0.18), transparent 50%),
        radial-gradient(circle at 88% 68%, rgba(140, 14, 28, 0.18), transparent 55%),
        radial-gradient(ellipse 85% 45% at 50% 100%, rgba(145, 15, 30, 0.20), transparent 70%),
        linear-gradient(180deg, #2e050b 0%, #220308 28%, #2d060d 55%, #200307 80%, #28040a 100%) !important;
    background-attachment: fixed !important;
    background-size: 100% 100% !important;
    color: #fff5f5;
    min-height: 100vh;
    position: relative;
}

/* =============================================================
   BARRA DE NAVEGACIÓN PERMANENTE (FIJA / STICKY INFALIBLE)
   Tanto en celular (móvil) como en computadora (web):
   NUNCA desaparece al desplazarse / scrollear la página.
   ============================================================= */
header#mainNavbar,
#mainNavbar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 45 !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

header, main, footer, section {
    max-width: 100%;
    min-width: 0 !important;
}

/* Pseudo-elemento de fondo fijo que garantiza cobertura total y degradado consolidado sin cortes */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #240307;
    background-image: 
        radial-gradient(ellipse 90% 55% at 50% -5%, rgba(165, 18, 36, 0.24), transparent 70%),
        radial-gradient(ellipse 85% 40% at 50% 16%, rgba(165, 18, 36, 0.22), transparent 70%),
        radial-gradient(circle at 12% 38%, rgba(130, 12, 26, 0.18), transparent 50%),
        radial-gradient(circle at 88% 68%, rgba(140, 14, 28, 0.18), transparent 55%),
        radial-gradient(ellipse 85% 45% at 50% 100%, rgba(145, 15, 30, 0.20), transparent 70%),
        linear-gradient(180deg, #2e050b 0%, #220308 28%, #2d060d 55%, #200307 80%, #28040a 100%);
    background-size: 100% 100%;
}

h1, h2, h3, h4, h5, h6, button, input, select, textarea, .font-sans {
    font-family: var(--site-font) !important;
}

/* =============================================================
   COLOR DE TEXTO BLANCO OFICIAL: #FFF5F5
   ============================================================= */
.text-white,
.text-white\/90,
.text-white\/80,
.text-\[\#ffffff\],
.text-\[\#fff\],
.text-\[\#FFFFFF\],
.text-\[\#FFF\] {
    color: #fff5f5 !important;
}

/* Secciones 100% Transparentes para que el degradado consolidado fluya sin cortes */
section,
main {
    background-color: transparent !important;
}

section[class*="bg-"] {
    background-color: transparent !important;
}

footer {
    background-color: rgba(31, 3, 7, 0.88) !important;
    border-top: 1px solid rgba(220, 38, 38, 0.20) !important;
}

/* Cuadros, Tarjetas y Paneles en estilo Login (Fondo Negro Profundo #090103 con Borde Rojo Sutil) */
.platform-card,
.combo-card,
.canje-card,
.trailer-card,
.benefit-card,
.faq-item,
.glass-panel,
.bg-\[\#111118\], 
.bg-\[\#121218\], 
.bg-\[\#11121a\], 
.bg-\[\#11121b\], 
.bg-\[\#0f1017\], 
.bg-\[\#0d0e14\], 
.bg-\[\#10121a\], 
.bg-\[\#0e1017\], 
.bg-\[\#12131b\],
.bg-\[\#141620\],
.bg-\[\#181b24\],
.bg-\[\#0b0c13\],
.bg-\[\#0b0c12\],
.bg-\[\#0d0d12\],
.bg-\[\#090a10\],
.bg-\[\#08080c\],
.bg-\[\#06070a\],
.bg-\[\#0b0b0e\],
.bg-\[\#090a0f\],
.bg-\[\#101117\],
.bg-\[\#151722\],
.bg-\[\#14141e\],
.bg-\[\#0e0f18\],
.bg-\[\#0e0f16\],
.bg-\[\#310005\],
.bg-\[\#4A0404\],
.bg-\[\#3D0007\],
.bg-\[\#370006\] {
    background-color: #090103 !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
}

.platform-card {
    background: linear-gradient(180deg, #180206 0%, #0e0104 50%, #070002 100%) !important;
    border: 2px solid rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 0 25px rgba(229, 9, 20, 0.25) !important;
}

.platform-card:hover {
    background: linear-gradient(180deg, #24030a 0%, #0f0104 100%) !important;
    border-color: rgba(248, 113, 113, 0.8) !important;
    box-shadow: 0 0 35px rgba(229, 9, 20, 0.5) !important;
}

/* Efecto Glassmorphism con Matiz #090103 */
.glass-panel {
    background: rgba(9, 1, 3, 0.94) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
}

/* Bordes y Resplandores Neón */
.neon-border-red {
    border: 1px solid rgba(229, 9, 20, 0.4);
    box-shadow: 0 0 20px -5px rgba(229, 9, 20, 0.25);
    transition: all 0.3s ease;
}

.neon-border-red:hover {
    border-color: rgba(229, 9, 20, 0.8);
    box-shadow: 0 0 30px -2px rgba(229, 9, 20, 0.45);
    transform: translateY(-2px);
}

.neon-button-red {
    background: linear-gradient(135deg, #E50914 0%, #800C2F 100%);
    color: #ffffff;
    box-shadow: none !important;
    transition: all 0.25s ease;
}

.neon-button-red:hover {
    background: linear-gradient(135deg, #ff1e2b 0%, #9e0f3a 100%);
    box-shadow: none !important;
    transform: translateY(-1px);
}

/* =============================================================
   LOGO OFICIAL DE LA MARCA EN BARRA DE NAVEGACIÓN
   ============================================================= */
.nav-brand-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
    transition: transform 0.25s ease, filter 0.25s ease;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .nav-brand-logo {
        height: 32px;
        max-width: 135px;
    }
}

.store-brand-logo-container:hover .nav-brand-logo {
    transform: scale(1.05);
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.65));
}

/* =============================================================
   BARRA DE NAVEGACIÓN CENTRADA: COMPRA RÁPIDA SIEMPRE EN EL MEDIO
   ============================================================= */
@media (max-width: 767px) {
    .desktop-navbar-grid {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .desktop-navbar-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        width: 100%;
    }

    .desktop-nav-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .desktop-nav-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .desktop-nav-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .nav-wing {
        flex: 1 1 0;
        min-width: 215px;
        display: flex;
        align-items: center;
    }

    .nav-wing-left {
        justify-content: flex-end;
    }

    .nav-wing-right {
        justify-content: flex-start;
    }
}

@media (min-width: 1024px) {
    .nav-wing {
        min-width: 235px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .desktop-navbar-grid {
        grid-template-columns: auto 1fr auto;
    }
    .nav-wing {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* =============================================================
   ANIMACIÓN DEL RAYO DE COMPRA RÁPIDA (EFECTO ELÉCTRICO VIBRANTE)
   ============================================================= */
@keyframes boltElectricZap {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0));
    }
    8% {
        transform: scale(1.35) rotate(-16deg);
        filter: drop-shadow(0 0 8px rgba(251, 191, 36, 1)) drop-shadow(0 0 14px rgba(245, 158, 11, 0.8));
    }
    16% {
        transform: scale(1.1) rotate(12deg);
        filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.9));
    }
    24% {
        transform: scale(1.4) rotate(-10deg);
        filter: drop-shadow(0 0 10px rgba(255, 230, 0, 1)) drop-shadow(0 0 18px rgba(245, 158, 11, 0.9));
    }
    32% {
        transform: scale(1.15) rotate(6deg);
        filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
    }
    40% {
        transform: scale(1.25) rotate(-4deg);
        filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.7));
    }
    48% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0));
    }
}

.animate-bolt {
    display: inline-block;
    transform-origin: center center;
    animation: boltElectricZap 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    will-change: transform, filter;
}

/* Aceleración en hover para interactividad */
a:hover .animate-bolt,
button:hover .animate-bolt,
.group:hover .animate-bolt {
    animation: boltElectricZap 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

/* Resplandor Dorado para VIP & Puntos */
.gold-glow-text {
    background: linear-gradient(135deg, #FFF6D1 0%, #FFB800 50%, #FF8A00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(255, 184, 0, 0.3));
}

/* Resplandor y Degradado Rojo Oficial para Títulos Principales (Armonizado con Navbar) */
.red-gradient-title {
    background: linear-gradient(135deg, #ffffff 5%, #ff4d5a 28%, #dc1420 65%, #8a0810 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 20px rgba(220, 20, 32, 0.45));
}

/* Precios con Degradado Neón Luminoso de Alta Visibilidad y Contraste (Blanco a Rojo Neón Eléctrico) */
.price-gradient-brand {
    background: linear-gradient(180deg, #ffffff 0%, #ff9fa8 45%, #ff2a4b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #ffffff !important;
    display: inline-block;
    font-weight: 900;
    filter: drop-shadow(0 0 14px rgba(255, 42, 75, 0.65)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
}

/* Tarjetas de Planes del Modal (Vibrantes estilo Cyber Crimson) */
.modal-plan-card {
    background: linear-gradient(180deg, #220308 0%, #130205 55%, #080002 100%) !important;
    border: 2px solid rgba(239, 68, 68, 0.38) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 22px rgba(220, 20, 32, 0.2) !important;
    position: relative;
    overflow: visible !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.9), transparent);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
    z-index: 5;
}

.modal-plan-card:hover {
    transform: translateY(-3px) scale(1.015);
    border-color: rgba(248, 113, 113, 0.85) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 32px rgba(220, 20, 32, 0.45) !important;
}

.modal-plan-card.highlighted-plan {
    border-color: rgba(251, 191, 36, 0.85) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 28px rgba(245, 158, 11, 0.3) !important;
}

.modal-plan-card.highlighted-plan::before {
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 1), transparent);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.9);
}

.modal-plan-card.highlighted-plan:hover {
    border-color: #fde047 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 38px rgba(245, 158, 11, 0.5) !important;
}

/* Insignia VIP Dorada Radiante */
.vip-points-badge {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.22) 0%, rgba(251, 191, 36, 0.32) 50%, rgba(245, 158, 11, 0.22) 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.6) !important;
    color: #fde047 !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.28) !important;
}

.navbar-title-badge {
    background: linear-gradient(to right, #8a0810, #dc1420, #8a0810);
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 4px 15px rgba(220, 20, 32, 0.35);
}

.navbar-title-divider {
    background: linear-gradient(to right, #8a0810, #dc1420, #8a0810);
    box-shadow: 0 2px 10px rgba(220, 20, 32, 0.5);
}

.hero-gold-bg {
    background: radial-gradient(circle at 50% 30%, rgba(140, 18, 42, 0.6) 0%, rgba(45, 6, 12, 0.9) 70%, #240307 100%);
}

/* Tarjetas de Plataformas con Animación Suave */
.platform-card {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.platform-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.8), 0 0 15px -2px rgba(229, 9, 20, 0.3);
}

/* Badges de Precios */
.price-badge-red {
    background: linear-gradient(90deg, #E50914, #B8001F);
}

.price-badge-blue {
    background: linear-gradient(90deg, #0070F3, #003EB3);
}

.price-badge-purple {
    background: linear-gradient(90deg, #7928CA, #4C0070);
}

.price-badge-green {
    background: linear-gradient(90deg, #10B981, #047857);
}

.price-badge-orange {
    background: linear-gradient(90deg, #F59E0B, #B45309);
}

/* Scrollbar Personalizado Cyberpunk Elegante (No sobresale en esquinas redondeadas) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
    margin: 0;
}

::-webkit-scrollbar-thumb {
    background: #7a0c1a;
    border-radius: 9999px;
    border: 1px solid rgba(220, 20, 32, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: #dc1420;
    box-shadow: 0 0 8px rgba(220, 20, 32, 0.8);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Modal y Drawers Blur */
.modal-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Insignia del Carrito */
.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #E50914;
    color: white;
    font-size: 10px;
    font-weight: 900;
    min-width: 18px;
    height: 18px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #240307;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.8);
}

/* FAQ Acordeón */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease;
    opacity: 0;
}

.faq-item.active .faq-content {
    max-height: 250px;
    opacity: 1;
    padding-top: 0.75rem;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* Estilos de la Zona de Trailers & Multimedia */
.trailer-card {
    transition: all 0.3s ease;
}

.trailer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px -8px rgba(0, 0, 0, 0.9), 0 0 20px -3px rgba(229, 9, 20, 0.35);
}

.trailer-play-btn {
    opacity: 0.85;
    transform: scale(0.92);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trailer-card:hover .trailer-play-btn {
    opacity: 1;
    transform: scale(1.08);
}

.trailer-spotlight-overlay {
    background: linear-gradient(180deg, rgba(36, 3, 7, 0.05) 0%, rgba(36, 3, 7, 0.65) 60%, rgba(36, 3, 7, 0.98) 100%);
}

.trailer-video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 1.25rem;
}

.trailer-video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Selector de Planes en Modal de Compra VIP */
.plan-select-card {
    position: relative;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-select-card:hover {
    border-color: rgba(229, 9, 20, 0.6);
    transform: translateY(-2px);
    background: rgba(26, 29, 41, 0.85);
}

.plan-select-card.selected {
    border-color: #E50914 !important;
    background: linear-gradient(135deg, rgba(107, 15, 42, 0.4) 0%, rgba(20, 22, 31, 0.95) 100%) !important;
    box-shadow: 0 8px 25px -4px rgba(229, 9, 20, 0.35), inset 0 0 0 1px #E50914;
}

/* =============================================================
   CAMPOS DE ENTRADA Y FORMULARIOS (FONDOS ULTRA OSCUROS Y ELEGANTES)
   ============================================================= */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select,
.input-dark {
    background-color: #06070a !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.75) !important;
    transition: all 0.2s ease !important;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.input-dark:focus {
    background-color: #030406 !important;
    border-color: #dc1420 !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85), 0 0 10px rgba(220, 20, 32, 0.3) !important;
}

#waCodeInput {
    background-color: #040508 !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.85), 0 0 14px rgba(16, 185, 129, 0.2) !important;
}

#waCodeInput:focus {
    background-color: #020305 !important;
    border-color: #10b981 !important;
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.9), 0 0 18px rgba(16, 185, 129, 0.4) !important;
}

#waPhoneInput:focus {
    border-color: #10b981 !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85), 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

/* =============================================================
   BOTÓN COMPRAR ANIMADO (ESTILO OFICIAL DEGRADADO BARRA DE NAVEGACIÓN)
   ============================================================= */
.btn-buy {
  width: 100%;
  background: linear-gradient(90deg, #8a0810 0%, #dc1420 50%, #8a0810 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  user-select: none;
}

@media (min-width: 640px) {
  .btn-buy {
    padding: 10px 14px;
    font-size: 0.82rem;
    letter-spacing: 1px;
    gap: 8px;
  }
}

.btn-buy::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(90deg, #8a0810, #dc1420, #8a0810);
  border-radius: 14px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: blur(8px);
}

.btn-buy::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-buy:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(90deg, #9e0b13 0%, #ea1a27 50%, #9e0b13 100%) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 6px 18px rgba(220, 20, 32, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.btn-buy:hover::before {
  opacity: 0.4;
}

.btn-buy:hover::after {
  left: 140%;
}

.btn-buy .btn-icon,
.btn-buy i,
.btn-buy-modern .btn-icon,
.btn-buy-modern i.fa-cart-shopping {
  display: inline-block;
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.btn-buy:hover .btn-icon,
.btn-buy:hover i,
.btn-buy-modern:hover .btn-icon,
.btn-buy-modern:hover i.fa-cart-shopping {
  transform: scale(1.1);
}

.btn-buy:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.btn-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.btn-text {
  display: inline-block;
  font-weight: 900;
  letter-spacing: 0.8px;
  opacity: 1 !important;
}

/* Botón Moderno de Alta Conversión (Degradado oficial de la Barra de Navegación: #8a0810 a #dc1420) */
.btn-buy-modern {
  background: linear-gradient(to right, #8a0810 0%, #dc1420 50%, #8a0810 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.25s ease !important;
}

.btn-buy-modern:hover {
  background: linear-gradient(to right, #9e0b13 0%, #ea1a27 50%, #9e0b13 100%) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px) scale(1.02);
}

.btn-buy-modern:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Botón Continuar en Rojo Oscuro Elegante */
.btn-continue-dark {
  background: linear-gradient(to right, #380208 0%, #58040f 50%, #380208 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(220, 20, 32, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: all 0.25s ease !important;
}

.btn-continue-dark:hover {
  background: linear-gradient(to right, #4c030b 0%, #6e0614 50%, #4c030b 100%) !important;
  border-color: rgba(220, 20, 32, 0.75) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), 0 0 14px rgba(220, 20, 32, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) scale(1.01);
}

.btn-continue-dark:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Tarjetas del Constructor de Combos - Rojo Degradado Oficial de RFILMS */
.combo-platform-selected {
  background: linear-gradient(180deg, #dc1420 0%, #8a0810 55%, #380308 100%) !important;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 28px rgba(220, 20, 32, 0.85) !important;
  transform: scale(1.03);
}

.combo-platform-unselected {
  background: linear-gradient(180deg, rgba(28, 3, 7, 0.92) 0%, rgba(16, 1, 4, 0.95) 50%, #080102 100%) !important;
  border: 2px solid rgba(220, 20, 32, 0.45) !important;
}

.combo-platform-unselected:hover {
  border-color: rgba(220, 20, 32, 0.9) !important;
  background: linear-gradient(180deg, #2b040a 0%, #170206 100%) !important;
  box-shadow: 0 0 20px rgba(220, 20, 32, 0.5) !important;
  transform: translateY(-2px);
}

/* Cuadro de Resumen del Constructor de Combos - Rojo Degradado Oficial de la Marca */
.combo-summary-card {
  background: linear-gradient(135deg, #8a0810 0%, #dc1420 50%, #8a0810 100%) !important;
  border: 2px solid rgba(220, 20, 32, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 35px rgba(220, 20, 32, 0.45) !important;
}

/* Botón de Comprar Combo en Rojo Oscuro Elegante de Alto Contraste */
.btn-combo-buy-darkred {
  background: linear-gradient(to right, #240206 0%, #46050e 50%, #240206 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.25s ease !important;
}

.btn-combo-buy-darkred:hover {
  background: linear-gradient(to right, #340309 0%, #5c0713 50%, #340309 100%) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.01);
}

.btn-combo-buy-darkred:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* =========================================================================
   HERO BANNER - TAMAÑO WEB RESPONSIVO SIN RECORTES (ZERO CROPPING)
   ========================================================================= */
#heroBannersSection {
  width: 100%;
  position: relative;
  background-color: transparent;
  overflow: hidden;
}

#heroBannersTrack {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-banner-slide {
  width: 100%;
  position: relative;
  transition: opacity 0.5s ease-in-out;
}

.hero-banner-slide img {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 64px);
  object-fit: contain;
  object-position: center;
  display: block;
}

@media (max-width: 768px) {
  .hero-banner-slide img {
    max-height: calc(100vh - 58px);
  }
}

/* =========================================================================
   DEGRADADO SUAVE Y TRANSPARENTE HERO BANNER (NO TAPA IMÁGENES NI TEXTOS)
   ========================================================================= */
.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 25px;
  background: linear-gradient(
    to top,
    rgba(36, 3, 7, 0.45) 0%,
    rgba(36, 3, 7, 0.12) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 20;
}

@media (min-width: 640px) {
  .hero-bottom-fade {
    height: 35px;
    background: linear-gradient(
      to top,
      rgba(36, 3, 7, 0.40) 0%,
      rgba(36, 3, 7, 0.10) 55%,
      transparent 100%
    );
  }
}

@media (min-width: 1024px) {
  .hero-bottom-fade {
    height: 45px;
    background: linear-gradient(
      to top,
      rgba(36, 3, 7, 0.35) 0%,
      rgba(36, 3, 7, 0.08) 60%,
      transparent 100%
    );
  }
}

@media (min-width: 1440px) {
  .hero-bottom-fade {
    height: 50px;
    background: linear-gradient(
      to top,
      rgba(36, 3, 7, 0.30) 0%,
      rgba(36, 3, 7, 0.05) 65%,
      transparent 100%
    );
  }
}

/* =========================================================================
   RULETA DE LA SUERTE VIP - CUADRO CONTENEDOR Y ESTILOS CINEMATOGRÁFICOS
   ========================================================================= */
.roulette-box-frame {
  position: relative;
  background: radial-gradient(circle at 50% 0%, rgba(138, 8, 16, 0.35) 0%, rgba(14, 2, 5, 0.95) 75%);
  border: 1.5px solid rgba(220, 20, 32, 0.5);
  border-radius: 28px;
  box-shadow: 
    0 0 35px rgba(220, 20, 32, 0.22),
    0 20px 45px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 25px rgba(138, 8, 16, 0.25);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

@media (min-width: 640px) {
  .roulette-box-frame {
    border-radius: 36px;
    border-width: 2px;
  }
}

.roulette-box-frame::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 184, 0, 0.08) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* Aguja Indicadora Superior (Pointer) */
.roulette-needle-wrapper {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.85));
}

.roulette-needle {
  width: 26px;
  height: 38px;
  background: linear-gradient(180deg, #fffbeb 0%, #ffd700 35%, #b47306 75%, #78350f 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5);
  transform-origin: 50% 15%;
  transition: transform 0.05s ease;
  position: relative;
}

.roulette-needle-wrapper::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff4d5a, #dc1420 60%, #66040a);
  border: 1.5px solid #ffd700;
  box-shadow: 0 0 8px rgba(220, 20, 32, 0.8), 0 2px 4px rgba(0,0,0,0.6);
}

.pointer-wiggle {
  animation: needleTick 0.08s ease-in-out;
}

@keyframes needleTick {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(-14deg); }
  80% { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

/* Confeti flotante */
.roulette-confetti {
  position: absolute;
  top: 0;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.9;
  z-index: 50;
  pointer-events: none;
  animation: confettiFall 2.8s linear forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(480px) rotate(720deg) scale(0.6);
    opacity: 0;
  }
}

.animate-pulse-subtle {
  animation: pulseSubtle 2.5s infinite alternate ease-in-out;
}

@keyframes pulseSubtle {
  0% {
    box-shadow: 0 0 15px rgba(220, 20, 32, 0.3), inset 0 0 10px rgba(255, 184, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 28px rgba(220, 20, 32, 0.5), inset 0 0 16px rgba(255, 184, 0, 0.25);
  }
}

/* =========================================================================
   TICKET VIP DE DESCUENTO - ESTILO CINEMATOGRÁFICO DE ALTA GAMA (RFILMS VIP)
   ========================================================================= */
.vip-ticket-card {
  position: relative;
  background: radial-gradient(circle at 50% 0%, rgba(220, 20, 32, 0.28) 0%, rgba(20, 3, 7, 0.98) 65%, #0a0103 100%);
  border: 1.5px solid rgba(255, 215, 0, 0.6);
  border-radius: 22px;
  box-shadow: 
    0 15px 35px -5px rgba(0, 0, 0, 0.9),
    0 0 25px rgba(220, 20, 32, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 20px rgba(255, 215, 0, 0.06);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vip-ticket-card:hover {
  border-color: rgba(255, 215, 0, 0.85);
  box-shadow: 
    0 20px 45px -5px rgba(0, 0, 0, 0.95),
    0 0 35px rgba(220, 20, 32, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 25px rgba(255, 215, 0, 0.1);
}

/* Micro-trama de seguridad VIP de fondo */
.vip-ticket-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 215, 0, 0.02) 0px,
    rgba(255, 215, 0, 0.02) 2px,
    transparent 2px,
    transparent 10px
  );
  pointer-events: none;
  z-index: 1;
}

/* Resplandor ambiental superior */
.ticket-bg-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 90px;
  background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.25) 0%, rgba(220, 20, 32, 0.15) 50%, transparent 80%);
  filter: blur(15px);
  pointer-events: none;
  z-index: 1;
}

/* Divisor de troquelado con muescas circulares exactas */
.ticket-divider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  z-index: 3;
}

.ticket-divider-line {
  flex: 1;
  margin: 0 12px;
  border-top: 2px dashed rgba(255, 215, 0, 0.45);
  height: 0;
}

.ticket-notch-left,
.ticket-notch-right {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0e0205;
  border: 1.5px solid rgba(255, 215, 0, 0.6);
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
}

.ticket-notch-left {
  left: -11px;
  box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.85);
}

.ticket-notch-right {
  right: -11px;
  box-shadow: inset 2px 0 5px rgba(0, 0, 0, 0.85);
}

/* Botón de Usar Descuento: Acabado Oro Metálico VIP con Shimmer */
.ticket-btn-use {
  position: relative;
  background: linear-gradient(135deg, #ffe066 0%, #f59e0b 50%, #d97706 100%);
  box-shadow: 
    0 4px 18px rgba(245, 158, 11, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.25s ease;
  overflow: hidden;
}

.ticket-btn-use:hover {
  background: linear-gradient(135deg, #fff085 0%, #fbbf24 50%, #f59e0b 100%);
  transform: translateY(-1px);
  box-shadow: 
    0 6px 24px rgba(245, 158, 11, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ticket-btn-use:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}

.ticket-btn-use::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(25deg);
  pointer-events: none;
  animation: ticketBtnShimmer 4s infinite ease-in-out;
}

@keyframes ticketBtnShimmer {
  0%, 75% { left: -60%; }
  100% { left: 140%; }
}

/* =========================================================================
   SILUETA FÍSICA DE TICKET VIP (RÉPLICA EXACTA DE TICKET DORADO)
   - 4 muescas circulares en esquinas
   - Dientes troquelados / perforaciones semicirculares laterales
   - Marco interior biselado de lujo
   ========================================================================= */
.real-vip-ticket {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(234, 179, 8, 0.25));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.real-vip-ticket:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 32px rgba(234, 179, 8, 0.4));
}

.real-vip-ticket svg {
  width: 100%;
  height: auto;
  display: block;
}

.real-vip-ticket-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6.5% 8.5%;
  box-sizing: border-box;
  z-index: 10;
}

/* =========================================================================
   BANNER EVENTOS - RECTÁNGULO DE TRANSMISIÓN DE ALTA GAMA
   ========================================================================= */
.event-banner-card,
.promo-banner-card {
  position: relative;
  background: radial-gradient(circle at 70% 20%, rgba(138, 8, 16, 0.4) 0%, rgba(18, 3, 6, 0.98) 60%, rgba(9, 1, 3, 1) 100%);
  border: 1.5px solid rgba(220, 20, 32, 0.55);
  box-shadow: 
    0 18px 45px -10px rgba(0, 0, 0, 0.9),
    0 0 35px rgba(220, 20, 32, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 25px rgba(138, 8, 16, 0.15);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: all 0.3s ease;
}

.event-banner-card:hover,
.promo-banner-card:hover {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 
    0 22px 55px -10px rgba(0, 0, 0, 0.95),
    0 0 45px rgba(220, 20, 32, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.event-platform-row {
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.event-platform-row:hover {
  background: rgba(40, 5, 10, 0.7);
  border-color: rgba(220, 20, 32, 0.5);
  transform: translateX(3px);
}

/* Flechas de cambio manual en Banner Eventos: completamente desactivadas según solicitud */
#eventBannerPrevBtn,
#eventBannerNextBtn {
  display: none !important;
}

/* Soporte 100% responsivo para etiquetas <picture> de banners web y móvil */
.event-banner-card picture,
.promo-banner-card picture,
.event-banner-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.event-banner-card picture img,
.promo-banner-card picture img,
.event-banner-slide picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =========================================================================
   ADAPTACIÓN MÓVIL: BANNER EVENTOS Y BANNER PROMOCIONES (REDUCIDO ~60%)
   En móviles (< 640px), la plataforma se ubica en la esquina inferior derecha
   con tamaño reducido para que el fondo del evento / promo se aprecie 100%.
   Los textos se distribuyen de arriba a abajo sin amontonarse ni tapar el arte.
   ========================================================================= */
@media (max-width: 639px) {
  .event-banner-card,
  .promo-banner-card {
    min-height: 350px !important;
    position: relative !important;
  }

  /* El contenedor de textos ocupa todo el alto vertical para separar badge arriba y fecha abajo */
  .event-banner-card > .relative.z-10,
  .promo-banner-card > .relative.z-10 {
    height: 100% !important;
    min-height: 315px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .event-banner-platform-wrap,
  .promo-banner-card-wrap {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    z-index: 25 !important;
    width: auto !important;
    max-width: 130px !important;
  }

  .event-banner-platform-wrap .platform-card,
  .promo-banner-card-wrap .platform-card,
  .promo-banner-card-wrap > div > div {
    width: 122px !important;
    max-width: 122px !important;
  }
}

@media (min-width: 640px) {
  .event-banner-platform-wrap .platform-card,
  .promo-banner-card-wrap .platform-card {
    width: 255px !important;
    max-width: 255px !important;
  }
}

/* =========================================================================
   POSICIONAMIENTO BANNER EVENTOS: BADGE ARRIBA Y FECHA ABAJO (100% LIMPIO EN EL CENTRO)
   Garantiza que el badge quede arriba y la fecha abajo en cualquier pantalla,
   dejando los logos, versus y artes centrales completamente despejados.
   ========================================================================= */
#eventBannerBadgeWrap {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 25 !important;
  width: auto !important;
  max-width: calc(100% - 24px) !important;
  pointer-events: auto !important;
  margin: 0 !important;
}

#eventBannerDateWrap {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  z-index: 25 !important;
  width: auto !important;
  max-width: calc(100% - 145px) !important;
  pointer-events: auto !important;
  margin: 0 !important;
}

#eventBannerCarouselDots {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 22 !important;
}

@media (min-width: 640px) {
  #eventBannerBadgeWrap {
    top: 24px !important;
    left: 24px !important;
    max-width: none !important;
  }

  #eventBannerDateWrap {
    bottom: 24px !important;
    left: 24px !important;
    max-width: none !important;
  }

  #eventBannerCarouselDots {
    bottom: 16px !important;
  }
}