/* ============================================================ TEMAS PROMOCIONALES — FansPremium Se activan poniendo data-promo="verano" o "blackfriday" en . Mantienen la identidad del sitio, solo re-tintan los acentos promocionales y añaden detalles de campaña. Para crear un tema nuevo: copia un bloque y cambia los colores. ============================================================ */ /* ---- etiquetas de descuento (comunes a todos los temas) ---- */ .promo-discount-tag{ position:absolute; top:12px; left:12px; z-index:4; display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; letter-spacing:0.06em; padding:5px 10px; border-radius:999px; background:linear-gradient(135deg,#E8384F,#B3122A); color:#fff; box-shadow:0 4px 14px -4px rgba(232,56,79,0.6); } .price-old{ text-decoration:line-through; opacity:0.55; font-weight:500; margin-right:6px; } .price-new{ font-weight:800; } /* ========================================================= ⚫ BLACK FRIDAY — negro, rojo, detalles dorados ========================================================= */ [data-promo="blackfriday"]{ --purple:#E8384F; --purple-deep:#8A0F22; --purple-glow:rgba(232,56,79,0.3); --pink:#FF5A5A; --gold:#E8B94A; --gold-soft:#F5D488; } [data-promo="blackfriday"] .hero-media::after{ background: linear-gradient(180deg, rgba(6,4,8,0.82) 0%, rgba(6,4,8,0.6) 45%, var(--bg) 100%), radial-gradient(ellipse 900px 500px at 50% 30%, rgba(232,56,79,0.2), transparent 70%); } [data-promo="blackfriday"] .hero-promo-title{ background:linear-gradient(120deg,#fff,#FF5A5A 45%,#E8384F 70%,#fff); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } [data-promo="blackfriday"] .promo-banner{ background:linear-gradient(100deg,#1A0206,#8A0F22 45%,#E8384F 85%); } [data-promo="blackfriday"] .hero-btn-primary{ background:linear-gradient(135deg,#E8384F,#8A0F22); color:#fff; box-shadow:0 14px 38px -10px rgba(232,56,79,0.5); } [data-promo="blackfriday"] .price-card[data-ch] .price-card-mxn{ color:#FF7A7A; } [data-promo="blackfriday"] .promo-pct{ color:#FFD98A; } [data-promo="blackfriday"] .hero-count .seg{ border-color:rgba(232,56,79,0.4); } [data-promo="blackfriday"] .hero-count .seg b{ color:#FF7A7A; } /* ========================================================= ☀️ VERANO — azul océano, turquesa, blanco, detalles dorados ========================================================= */ [data-promo="verano"]{ --purple:#1CA9C9; --purple-deep:#0E7A94; --purple-glow:rgba(28,169,201,0.3); --pink:#3DE7D6; --cyan:#3DE7D6; --gold:#F5D488; --gold-soft:#FFE28A; } [data-promo="verano"] .hero-media::after{ background: linear-gradient(180deg, rgba(6,20,28,0.78) 0%, rgba(8,40,52,0.5) 45%, var(--bg) 100%), radial-gradient(ellipse 900px 500px at 50% 30%, rgba(28,169,201,0.22), transparent 70%); } [data-promo="verano"] .hero-promo-title{ background:linear-gradient(120deg,#fff,#7FE9D8 45%,#1CA9C9 70%,#FFE28A); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } [data-promo="verano"] .promo-banner{ background:linear-gradient(100deg,#0E7A94,#1CA9C9 45%,#3DE7D6 90%); } [data-promo="verano"] .promo-banner .promo-text b, [data-promo="verano"] .promo-pct{ color:#FFF3C4; } [data-promo="verano"] .hero-btn-primary{ background:linear-gradient(135deg,#1CA9C9,#0E7A94); color:#fff; box-shadow:0 14px 38px -10px rgba(28,169,201,0.5); } [data-promo="verano"] .discount-tag, [data-promo="verano"] .promo-discount-tag{ background:linear-gradient(135deg,#1CA9C9,#0E7A94); } [data-promo="verano"] .price-card[data-ch] .price-card-mxn{ color:#3DE7D6; } [data-promo="verano"] .hero-count .seg{ border-color:rgba(61,231,214,0.4); } [data-promo="verano"] .hero-count .seg b{ color:#7FE9D8; } /* brillo sutil tipo agua en el hero (solo verano, muy ligero) */ [data-promo="verano"] .hero::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%); background-size:250% 100%; animation:veranoShine 8s linear infinite; } @keyframes veranoShine{0%{background-position:150% 0;} 100%{background-position:-150% 0;}} @media (prefers-reduced-motion: reduce){ [data-promo="verano"] .hero::before{animation:none;} }