/* =========================================================
   RadiosEnVivo Fullscreen Player — estilos generales
   ========================================================= */
.rsev-root {
	--rsev-accent: #1db954;
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
	background: #0a0a0a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #fff;
	display: flex;
	flex-direction: column;
}

/* Dentro del editor de Elementor usamos una altura más chica para poder
   seguir editando y agregar contenido debajo con comodidad. En la página
   real (para el visitante) siempre se ve a pantalla completa. */
body.elementor-editor-active .rsev-root,
.elementor-edit-area .rsev-root,
.rsev-root.rsev-in-editor {
	min-height: 520px !important;
}

.rsev-bg-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.8s ease-in-out;
	will-change: opacity;
}
.rsev-bg-layer.rsev-visible { opacity: 1; }
.rsev-bg-layer.rsev-has-image { filter: blur(2px) brightness(0.55) saturate(1.1); transform: scale(1.08); }

.rsev-overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 100%);
	pointer-events: none;
}

.rsev-content {
	position: relative;
	z-index: 5;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	padding-bottom: 70px;
	gap: 18px;
}

.rsev-logo-wrap {
	width: min(38vw, 260px);
	height: min(38vw, 260px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.rsev-logo {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 6px 24px rgba(0,0,0,0.5));
	transition: opacity 1.2s ease;
}

.rsev-station-name {
	font-size: clamp(16px, 2.4vw, 22px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
	font-weight: 600;
}

.rsev-track-info { min-height: 56px; }
.rsev-track-title {
	font-size: clamp(20px, 3.4vw, 34px);
	font-weight: 700;
	text-shadow: 0 2px 12px rgba(0,0,0,0.6);
	transition: opacity 0.6s ease;
}
.rsev-track-artist {
	font-size: clamp(14px, 2vw, 18px);
	opacity: 0.75;
	margin-top: 4px;
	transition: opacity 0.6s ease;
}
.rsev-fade-swap { opacity: 0; }

.rsev-controls {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 8px;
}

.rsev-btn {
	background: var(--rsev-accent);
	border: none;
	color: #111;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0,0,0,0.4);
	transition: transform 0.15s ease;
}
.rsev-btn:hover { transform: scale(1.06); }
.rsev-btn:active { transform: scale(0.96); }

/* Icono de play/pausa hecho en CSS puro (evita conflictos con SVG del tema) */
.rsev-icon-shape {
	display: block;
	width: 0;
	height: 0;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 18px solid #111111;
	margin-left: 5px;
}
.rsev-btn.is-playing .rsev-icon-shape {
	width: 18px;
	height: 20px;
	border: none;
	margin-left: 0;
	position: relative;
}
.rsev-btn.is-playing .rsev-icon-shape::before,
.rsev-btn.is-playing .rsev-icon-shape::after {
	content: "";
	position: absolute;
	top: 0;
	width: 6px;
	height: 20px;
	background: #111111;
	border-radius: 1px;
}
.rsev-btn.is-playing .rsev-icon-shape::before { left: 0; }
.rsev-btn.is-playing .rsev-icon-shape::after { right: 0; }

.rsev-volume { display: flex; align-items: center; gap: 8px; }
.rsev-volume svg.rsev-icon-vol { width: 22px; height: 22px; fill: #fff; opacity: 0.85; }
.rsev-volume-slider { width: 110px; accent-color: var(--rsev-accent); }

.rsev-station-switch { display: flex; gap: 8px; }
.rsev-station-btn {
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff;
	padding: 8px 16px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
	letter-spacing: 0.03em;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.rsev-station-btn:hover { background: rgba(255,255,255,0.22); }
.rsev-station-btn.active { background: var(--rsev-accent); color: #111; border-color: transparent; font-weight: 700; }

.rsev-social {
	display: flex;
	gap: 14px;
	margin-top: 6px;
	flex-wrap: wrap;
	justify-content: center;
}
.rsev-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.15s ease;
}
.rsev-social a:hover { background: var(--rsev-accent); transform: translateY(-2px); }
.rsev-social a svg { width: 18px; height: 18px; fill: #fff; }
.rsev-social a:hover svg { fill: #111; }

.rsev-whatsapp-float {
	position: absolute;
	right: 22px;
	bottom: 22px;
	z-index: 6;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 18px rgba(0,0,0,0.5);
	animation: rsevWaPulse 2.4s ease-in-out infinite;
}
.rsev-whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }
@keyframes rsevWaPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
	50% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
}

.rsev-signature {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	text-align: center;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255,255,255,0.7);
	padding: 0 90px;
}
.rsev-signature-brand {
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}
.rsev-signature-brand:hover { color: var(--rsev-accent); }
.rsev-signature-logo {
	height: 30px;
	width: auto;
	vertical-align: middle;
}
@media (max-width: 640px) {
	.rsev-signature { font-size: 10.5px; padding: 0 16px; bottom: 10px; }
	.rsev-whatsapp-float { width: 48px; height: 48px; right: 14px; bottom: 14px; }
}

@media (max-width: 600px) {
	.rsev-controls { gap: 12px; }
	.rsev-volume-slider { width: 80px; }
}

/* =========================================================
   Contenedor genérico de animaciones de fondo (sin imagen)
   ========================================================= */
.rsev-anim-container {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #0a0a0a;
}

/* ---- 1. Barras de ecualizador ---- */
.rsev-anim-1 { display: flex; align-items: flex-end; justify-content: center; gap: 6px; background: linear-gradient(180deg,#111,#000); }
.rsev-anim-1 .bar { width: 10px; background: var(--rsev-accent); border-radius: 4px 4px 0 0; animation: rsevBarPulse 1.1s ease-in-out infinite; }
@keyframes rsevBarPulse { 0%,100% { height: 12%; } 50% { height: 85%; } }

/* ---- 2. Burbujas ---- */
.rsev-anim-2 { background: linear-gradient(180deg,#031b2e,#04263f); }
.rsev-anim-2 .bubble { position:absolute; bottom:-10%; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0.05)); animation: rsevBubbleUp linear infinite; }
@keyframes rsevBubbleUp { 0% { transform: translateY(0) scale(1); opacity:0.8; } 100% { transform: translateY(-115vh) scale(1.3); opacity:0; } }

/* ---- 3. Luces flotantes ---- */
.rsev-anim-3 { background: #050505; }
.rsev-anim-3 .light { position:absolute; border-radius:50%; filter: blur(40px); opacity:0.55; animation: rsevFloat 9s ease-in-out infinite; }
@keyframes rsevFloat { 0%,100% { transform: translate(0,0); } 33% { transform: translate(6vw,-4vh); } 66% { transform: translate(-5vw,5vh); } }

/* ---- 4. Estrellas titilando ---- */
.rsev-anim-4 { background: radial-gradient(ellipse at center,#0b1224,#000); }
.rsev-anim-4 .star { position:absolute; width:3px; height:3px; background:#fff; border-radius:50%; animation: rsevTwinkle 2.4s ease-in-out infinite; }
@keyframes rsevTwinkle { 0%,100% { opacity:0.15; } 50% { opacity:1; } }

/* ---- 5. Ondas ---- */
.rsev-anim-5 { background: linear-gradient(180deg,#001014,#00252b); display:flex; align-items:center; justify-content:center; }
.rsev-anim-5 .wave { position:absolute; width:220%; height:220%; border-radius:44%; background: rgba(29,185,84,0.10); animation: rsevWaveSpin 14s linear infinite; }
.rsev-anim-5 .wave.w2 { animation-duration: 20s; background: rgba(29,185,84,0.07); }
@keyframes rsevWaveSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- 6. Grilla neón ---- */
.rsev-anim-6 { background:#000; background-image: linear-gradient(rgba(29,185,84,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(29,185,84,0.25) 1px, transparent 1px); background-size: 40px 40px; animation: rsevGridPulse 3s ease-in-out infinite; }
@keyframes rsevGridPulse { 0%,100% { opacity:0.5; } 50% { opacity:1; } }

/* ---- 7. Aurora ---- */
.rsev-anim-7 { background: linear-gradient(120deg,#1db954,#0b3d91,#8e2de2,#1db954); background-size: 400% 400%; animation: rsevAurora 12s ease infinite; }
@keyframes rsevAurora { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }

/* ---- 8. Confeti cayendo ---- */
.rsev-anim-8 { background:#0e0e0e; }
.rsev-anim-8 .confetti { position:absolute; top:-5%; width:8px; height:14px; opacity:0.85; animation: rsevFall linear infinite; }
@keyframes rsevFall { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(115vh) rotate(360deg); } }

/* ---- 9. Ondas expansivas (ripple) ---- */
.rsev-anim-9 { background:#050708; display:flex; align-items:center; justify-content:center; }
.rsev-anim-9 .ripple { position:absolute; border:2px solid rgba(29,185,84,0.5); border-radius:50%; animation: rsevRipple 4s ease-out infinite; }
@keyframes rsevRipple { 0% { width:0; height:0; opacity:1; } 100% { width:140vmax; height:140vmax; opacity:0; } }

/* ---- 10. Resplandor pulsante ---- */
.rsev-anim-10 { background: radial-gradient(circle at center, rgba(29,185,84,0.35), #000 65%); animation: rsevGlow 3.4s ease-in-out infinite; }
@keyframes rsevGlow { 0%,100% { filter: brightness(0.85); } 50% { filter: brightness(1.3); } }

/* ---- 11. Franjas diagonales ---- */
.rsev-anim-11 { background: repeating-linear-gradient(45deg, #111 0 20px, #1a1a1a 20px 40px); background-size: 200% 200%; animation: rsevStripes 6s linear infinite; }
@keyframes rsevStripes { from { background-position:0 0; } to { background-position:200px 200px; } }

/* ---- 12. Vinilo girando ---- */
.rsev-anim-12 { background:#0c0c0c; display:flex; align-items:center; justify-content:center; }
.rsev-anim-12 .vinyl { width: 46vmin; height: 46vmin; border-radius:50%; background: repeating-radial-gradient(circle, #1a1a1a 0 6px, #060606 6px 12px); position:relative; animation: rsevSpin 6s linear infinite; box-shadow: 0 0 60px rgba(0,0,0,0.7); }
.rsev-anim-12 .vinyl::after { content:""; position:absolute; inset:42%; background: var(--rsev-accent); border-radius:50%; }
@keyframes rsevSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- 13. Barras circulares ---- */
.rsev-anim-13 { background:#000; display:flex; align-items:center; justify-content:center; }
.rsev-anim-13 .cbar { position:absolute; width:4px; height:40px; background: var(--rsev-accent); border-radius:4px; transform-origin: 50% 160px; animation: rsevBarPulse 1s ease-in-out infinite; }

/* ---- 14. Lluvia ---- */
.rsev-anim-14 { background: linear-gradient(180deg,#05070a,#0b1520); }
.rsev-anim-14 .drop { position:absolute; top:-10%; width:2px; height:60px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5)); animation: rsevRain linear infinite; }
@keyframes rsevRain { 0% { transform: translateY(0); } 100% { transform: translateY(120vh); } }

/* ---- 15. Niebla/humo ---- */
.rsev-anim-15 { background:#0a0a0a; }
.rsev-anim-15 .smoke { position:absolute; width:60vw; height:60vw; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%); filter: blur(20px); animation: rsevDrift 16s ease-in-out infinite; }
@keyframes rsevDrift { 0%,100% { transform: translate(-10%,-10%) scale(1); } 50% { transform: translate(10%,10%) scale(1.3); } }

/* ---- 16. Caleidoscopio de color ---- */
.rsev-anim-16 { background: conic-gradient(from 0deg, #1db954, #0b3d91, #8e2de2, #e91e63, #1db954); animation: rsevSpin 20s linear infinite; opacity:0.85; }

/* ---- 17. Bokeh ---- */
.rsev-anim-17 { background:#060606; }
.rsev-anim-17 .bokeh { position:absolute; border-radius:50%; filter: blur(6px); opacity:0.5; animation: rsevBokeh 10s ease-in-out infinite; }
@keyframes rsevBokeh { 0%,100% { transform: scale(1) translateY(0); opacity:0.3; } 50% { transform: scale(1.4) translateY(-30px); opacity:0.7; } }

/* ---- 18. Onda de sonido horizontal ---- */
.rsev-anim-18 { background:#000; display:flex; align-items:center; justify-content:center; }
.rsev-anim-18 .swave { width:80%; height:2px; background: var(--rsev-accent); position:relative; }
.rsev-anim-18 .swave::before, .rsev-anim-18 .swave::after { content:""; position:absolute; inset:0; border-radius:2px; background: var(--rsev-accent); animation: rsevSoundWave 2.2s ease-in-out infinite; }
.rsev-anim-18 .swave::after { animation-delay: 0.4s; opacity:0.5; }
@keyframes rsevSoundWave { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(18); } }

/* ---- 19. Blobs de color ---- */
.rsev-anim-19 { background:#000; }
.rsev-anim-19 .blob { position:absolute; width:38vmax; height:38vmax; border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; filter: blur(2px); opacity:0.6; animation: rsevMorph 12s ease-in-out infinite; }
@keyframes rsevMorph { 0%,100% { border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; transform: rotate(0deg) scale(1); } 50% { border-radius: 60% 40% 30% 70% / 55% 65% 35% 45%; transform: rotate(180deg) scale(1.15); } }

/* ---- 20. Zoom starfield ---- */
.rsev-anim-20 { background:#000; perspective: 400px; }
.rsev-anim-20 .zstar { position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; animation: rsevZoom 3.5s linear infinite; }
@keyframes rsevZoom { 0% { transform: translateZ(-400px) scale(0.2); opacity:0; } 80% { opacity:1; } 100% { transform: translateZ(200px) scale(1.6); opacity:0; } }


/* =========================================================
   20 animaciones de logo
   ========================================================= */
.rsev-logo.logo-anim-1 { animation: logoPulse 2.6s ease-in-out infinite; }
@keyframes logoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.rsev-logo.logo-anim-2 { animation: logoSpin 8s linear infinite; }
@keyframes logoSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.rsev-logo.logo-anim-3 { animation: logoBounce 2.2s ease-in-out infinite; }
@keyframes logoBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

.rsev-logo.logo-anim-4 { animation: logoFlip 3.4s ease-in-out infinite; }
@keyframes logoFlip { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } }

.rsev-logo.logo-anim-5 { animation: logoSwing 3s ease-in-out infinite; transform-origin: top center; }
@keyframes logoSwing { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(8deg); } 75% { transform: rotate(-8deg); } }

.rsev-logo.logo-anim-6 { animation: logoTada 3.2s ease-in-out infinite; }
@keyframes logoTada { 0%,100% { transform: scale(1) rotate(0); } 10%,20% { transform: scale(0.92) rotate(-3deg); } 30%,50%,70%,90% { transform: scale(1.08) rotate(3deg); } 40%,60%,80% { transform: scale(1.08) rotate(-3deg); } }

.rsev-logo.logo-anim-7 { animation: logoJello 3.4s ease-in-out infinite; }
@keyframes logoJello { 0%,100% { transform: skewX(0) skewY(0); } 30% { transform: skewX(-8deg) skewY(-8deg); } 60% { transform: skewX(4deg) skewY(4deg); } }

.rsev-logo.logo-anim-8 { animation: logoHeartbeat 1.6s ease-in-out infinite; }
@keyframes logoHeartbeat { 0%,100% { transform: scale(1); } 20% { transform: scale(1.15); } 40% { transform: scale(1); } 60% { transform: scale(1.15); } }

.rsev-logo.logo-anim-9 { animation: logoFlash 2.4s ease-in-out infinite; }
@keyframes logoFlash { 0%,100% { opacity:1; } 50% { opacity:0.25; } }

.rsev-logo.logo-anim-10 { animation: logoRubber 3.4s ease-in-out infinite; }
@keyframes logoRubber { 0%,100% { transform: scale(1,1); } 30% { transform: scale(1.25,0.75); } 50% { transform: scale(0.75,1.25); } 70% { transform: scale(1.15,0.85); } }

.rsev-logo.logo-anim-11 { animation: logoWobble 3s ease-in-out infinite; }
@keyframes logoWobble { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-8px) rotate(-4deg); } 75% { transform: translateX(8px) rotate(4deg); } }

.rsev-logo.logo-anim-12 { animation: logoShake 2.6s ease-in-out infinite; }
@keyframes logoShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

.rsev-logo.logo-anim-13 { animation: logoGlow 2.6s ease-in-out infinite; }
@keyframes logoGlow { 0%,100% { filter: drop-shadow(0 0 4px var(--rsev-accent)); } 50% { filter: drop-shadow(0 0 30px var(--rsev-accent)); } }

.rsev-logo.logo-anim-14 { animation: logoFloat 4.4s ease-in-out infinite; }
@keyframes logoFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(3deg); } }

.rsev-logo.logo-anim-15 { animation: logoTilt 3.6s ease-in-out infinite; }
@keyframes logoTilt { 0%,100% { transform: perspective(400px) rotateX(0) rotateY(0); } 50% { transform: perspective(400px) rotateX(12deg) rotateY(12deg); } }

.rsev-logo.logo-anim-16 { animation: logoElastic 3.2s cubic-bezier(0.68,-0.55,0.27,1.55) infinite; }
@keyframes logoElastic { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

.rsev-logo.logo-anim-17 { animation: logoSpin3d 5s linear infinite; }
@keyframes logoSpin3d { 0% { transform: perspective(400px) rotateY(0); } 100% { transform: perspective(400px) rotateY(360deg); } }

.rsev-logo.logo-anim-18 { animation: logoFlicker 2.4s steps(1) infinite; }
@keyframes logoFlicker { 0%,19%,21%,23%,100% { opacity:1; } 20%,22% { opacity:0.4; } }

.rsev-logo.logo-anim-19 { animation: logoBounceSide 2.8s ease-in-out infinite; }
@keyframes logoBounceSide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(20px); } }

.rsev-logo.logo-anim-20 { animation: logoZoomPulse 3s ease-in-out infinite; }
@keyframes logoZoomPulse { 0%,100% { transform: scale(0.94); opacity:0.85; } 50% { transform: scale(1.12); opacity:1; } }