@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Montserrat:wght@400;600&display=swap'); :root { --scrollbar-track: rgba(8, 47, 73, 0.24); --scrollbar-thumb: #06b6d4; --scrollbar-thumb-hover: #67e8f9; --scrollbar-thumb-active: #22d3ee; } html, body { margin: 0; padding: 0; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-gutter: stable both-edges; scroll-behavior: smooth; } .logo { font-family: 'Orbitron', 'Montserrat', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } iframe.section-frame { width: 100%; height: 100vh; border: none; display: block; } .home-nav-section { min-height: 100dvh; scroll-margin-top: 76px; } .home-nav-section.has-title { display: flex; flex-direction: column; } .home-nav-section.has-title > .titulo-transparente { flex: 0 0 auto; } .home-nav-section.has-title > iframe.section-frame { flex: 1 1 auto; min-height: 0; height: auto; } .home-nav-section.has-title > iframe, .home-nav-section.has-title .podcast > iframe, .home-nav-section.has-title .eventos > iframe, .home-nav-section.has-title .generos > iframe, .home-nav-section.has-title .juegos > iframe { flex: 1 1 auto; min-height: 0; height: auto; } .home-nav-section.has-title .podcast, .home-nav-section.has-title .eventos, .home-nav-section.has-title .generos, .home-nav-section.has-title .juegos { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .home-nav-section .staff { flex: 1 1 auto; min-height: 0; display: grid; gap: 8px; } #staff .counter { flex: 0 0 auto; } #staff .staff { min-height: 100dvh; } #staff, #programas, #fans, #eventos, #podcast, #generos, #juegos, #audio, #encuesta, #video, #noticias, #blog, #stats { min-height: 100dvh; } #programas, #fans, #eventos, #podcast, #generos, #juegos, #video, #noticias, #blog, #stats { display: flex; flex-direction: column; } #programas > iframe, #fans > iframe, #video > iframe, #noticias > iframe, #blog > iframe, #stats > iframe { flex: 1 1 auto; min-height: 0; height: 100%; } #eventos .eventos, #podcast .podcast, #generos .generos, #juegos .juegos { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #generos.home-nav-section { min-height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr); } #generos .generos { min-height: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); } #eventos .eventos > iframe, #podcast .podcast > iframe, #generos .generos > iframe, #juegos .juegos > iframe, #staff .staff > iframe:not([src*='route=staff_counter']) { flex: 1 1 auto; min-height: 0; height: 100%; } #generos .generos > iframe { width: 100%; min-height: 0 !important; height: 100% !important; display: block; } #juegos .juegos > iframe { width: 100%; min-height: 0 !important; height: 100% !important; display: block; } #audio.home-audio-grid, #encuesta.home-encuesta-grid { min-height: 100dvh; } #audio.home-audio-grid > .min-w-0, #encuesta.home-encuesta-grid > .min-w-0 { display: flex; flex-direction: column; min-height: 0; } #audio.home-audio-grid > .min-w-0, #encuesta.home-encuesta-grid > .min-w-0 { min-height: 0; } #audio.home-audio-grid > .min-w-0 > iframe, #encuesta.home-encuesta-grid > .min-w-0 > iframe { flex: 1 1 auto; min-height: 0; height: 100%; } #staff-main { scroll-margin-top: 76px; } #homeHeaderSlider.home-nav-section .section-frame, #estrellas.home-nav-section .section-frame { height: 100dvh; min-height: 100dvh; } #estrellas.home-nav-section, #chat.home-nav-section, #reproductor.home-nav-section, #staff.home-nav-section { min-height: 100dvh; height: 100dvh; box-sizing: border-box; scroll-margin-top: 0 !important; } #estrellas.home-nav-section > iframe.section-frame { width: 100%; height: 100%; min-height: 0; display: block; } #chat.home-nav-section, #reproductor.home-nav-section, #staff.home-nav-section { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; } #chat.home-nav-section { display: flex !important; flex-direction: column !important; min-height: 100dvh !important; height: 100dvh !important; overflow: hidden; } #chat.home-nav-section > .titulo-transparente { flex: 0 0 auto; } #chat.home-nav-section > #ichat { flex: 1 1 auto; min-height: 0 !important; height: 0 !important; } #chat.home-nav-section > .titulo-transparente, #reproductor.home-nav-section > .titulo-transparente, #staff.home-nav-section > .titulo-transparente { min-height: 0; } #chat.home-nav-section > iframe, #reproductor.home-nav-section > iframe, #staff.home-nav-section .staff { height: 100%; min-height: 0; } #chat.home-nav-section > iframe, #reproductor.home-nav-section > iframe { display: block; width: 100%; } #reproductorFrame { width: 100%; height: 100% !important; min-height: 0 !important; } #staff.home-nav-section { height: auto; min-height: 100dvh; display: flex; flex-direction: column; overflow: visible; } #staff .counter { flex: 0 0 auto; } #staff .staff { flex: 1 1 auto; min-height: 100dvh; } #staff-main { scroll-margin-top: 0 !important; } #staff .staff > iframe { width: 100%; min-height: 100dvh; height: 100%; display: block; } #staff-main.staff { flex: 1 1 auto; min-height: 100dvh !important; height: 100dvh !important; } #staff-main.staff > iframe.section-frame { min-height: 100% !important; height: 100% !important; } iframe.anuncio-frame { width: 100%; height: 120px; border: none; display: block; } html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, *::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 999px; border: 1px solid rgba(103, 232, 249, 0.14); } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #67e8f9 0%, var(--scrollbar-thumb) 58%, #0891b2 100%); border-radius: 999px; border: 2px solid rgba(8, 47, 73, 0.38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a5f3fc 0%, var(--scrollbar-thumb-hover) 52%, var(--scrollbar-thumb) 100%); box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.35); } html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active, *::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, var(--scrollbar-thumb-hover), var(--scrollbar-thumb-active)); } html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner, *::-webkit-scrollbar-corner { background: transparent; } .home-mobile-toggle { display: inline-flex; } .home-desktop-nav { display: none; } .home-mobile-nav { display: none; } .home-mobile-nav.is-open { display: block; } body.intro-active { overflow: hidden; } #siteIntroOverlay { position: fixed; inset: 0; z-index: 9999; background: #000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.8s ease, visibility 0.8s ease; } #siteIntroOverlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } #siteIntroOverlay.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; } #siteIntroFrame { width: 100%; height: 100%; border: 0; display: block; background: #000; } #navbar { position: fixed; inset-inline: 0; top: 0; z-index: 60; background-color: #0f172a; border-bottom: 1px solid rgba(148, 163, 184, 0.1); } .home-main-offset { padding-top: 76px; } @keyframes neonBreath { 0%, 100% { box-shadow: 0 0 4px rgba(0, 240, 255, 0.3), inset 0 0 2px rgba(0, 240, 255, 0.1); border-color: rgba(6, 182, 212, 0.4); } 50% { box-shadow: 0 0 14px rgba(0, 240, 255, 0.75), inset 0 0 6px rgba(0, 240, 255, 0.3); border-color: rgba(34, 211, 238, 1); } } .animate-neon-breath { animation: neonBreath 3.5s ease-in-out infinite; } .nav-contrast-dark { background-color: #f8fafc !important; border-bottom: 2px solid #e2e8f0 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .nav-contrast-dark .home-nav-link, .nav-contrast-dark .brand-name, .nav-contrast-dark .brand-tag, .nav-contrast-dark #homeNavButton, .nav-contrast-dark #homeSectionsButton, .nav-contrast-dark #homeSectionsButtonMobile { color: #1e293b !important; } .nav-contrast-dark .home-nav-link:hover { color: #0f172a !important; text-shadow: none !important; transform: translateY(-1px); } /* 🔹 Oculto por defecto */ #navbar .home-desktop-nav { display: none; } /* 🔹 Links base */ .home-nav-link { color: #f1f5f9; font-weight: 700; text-transform: uppercase; position: relative; transition: all 0.3s ease; text-shadow: 0 0 4px #00f3ff, 0 0 8px #00f3ff; /* glow sutil */ border: none !important; background: none !important; } /* 🔹 Underline neón */ .home-nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: #00f3ff; box-shadow: 0 0 6px #00f3ff, 0 0 12px #00f3ff; transform: scaleX(0); transition: transform 0.3s ease; } .home-nav-link:hover::after, .home-nav-link:focus-visible::after { transform: scaleX(1); } /* 🔹 Desktop: visible y alineado a la derecha */ @media (min-width: 768px) { .home-mobile-toggle { display: none !important; } .home-mobile-nav { display: none !important; } .home-desktop-dropdown { display: none !important; } #navbar .home-desktop-nav { display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: flex-end; /* derecha */ gap: 8px; margin-left: auto; } #navbar .home-desktop-nav .home-nav-link { font-size: 14px !important; padding: 10px 14px !important; letter-spacing: 0.05em; white-space: nowrap; } } /* 🔹 Mobile: visible solo cuando se activa */ @media (max-width: 767px) { #navbar .home-desktop-nav.active { display: flex !important; flex-direction: column; align-items: center; justify-content: center; /* centrado */ gap: 14px; margin: 0 auto; } #navbar .home-desktop-nav.active .home-nav-link { font-size: clamp(1.8rem, 9vw, 2.8rem) !important; padding: 12px 16px !important; text-align: center; animation: neonPulseSoft 2s infinite alternate; font-family: 'Montserrat', 'Orbitron', Arial, sans-serif !important; display: flex; align-items: center; justify-content: center; } #navbar .home-desktop-nav.active li { width: 100%; display: flex; justify-content: center; } /* MOBILE NAV: aplicar mismo estilo */ .home-mobile-nav.is-open { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin: 0 auto; } .home-mobile-nav.is-open .home-nav-link { font-size: clamp(0.6rem, 6vw, 0.8rem) !important; padding: 12px 16px !important; text-align: center; animation: neonPulseSoft 2s infinite alternate; font-family: 'Montserrat', 'Orbitron', Arial, sans-serif !important; display: flex; align-items: center; justify-content: center; letter-spacing: 0.08em; } .home-mobile-nav.is-open li { width: 100%; display: flex; justify-content: center; } } /* 🔹 Ajustes intermedios en desktop */ @media (min-width: 768px) and (max-width: 1499px) { #navbar .home-desktop-nav { gap: 3px; } #navbar .home-desktop-nav .home-nav-link { font-size: 11px !important; padding: 6px 7px !important; } } @media (min-width: 768px) and (max-width: 1280px) { #navbar .home-desktop-nav { gap: 2px; } #navbar .home-desktop-nav .home-nav-link { font-size: 10px !important; padding: 5px 6px !important; } } .home-block { border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(17, 24, 39, 0.55); border-radius: 14px; overflow: hidden; } .home-horario-grid { display: block; } .home-audio-grid { display: block; } #horario.home-horario-grid { min-height: 100dvh; } #horario.home-horario-grid > .min-w-0 { display: flex; flex-direction: column; min-height: 0; } #horario.home-horario-grid > .min-w-0 > .titulo-transparente { flex: 0 0 auto; } #horario.home-horario-grid iframe { flex: 1 1 auto; min-height: 0; height: 100%; } .titulo-transparente { font-family: 'Orbitron', 'Poppins', sans-serif; font-weight: 800; font-size: 40px; text-align: center; letter-spacing: 0.08em; text-transform: uppercase; color: #67e8f9; text-shadow: 0 0 6px rgba(34, 211, 238, 0.9), 0 0 16px rgba(34, 211, 238, 0.7), 0 0 34px rgba(8, 145, 178, 0.45); animation: tituloNeonPulse 2.8s ease-in-out infinite; } .titulo-transparente i, .titulo-transparente .fa-solid, .titulo-transparente .fa-regular, .titulo-transparente .fa-brands { display: inline-block; margin-left: 0.45rem; color: #0a5965 !important; filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.85)); transform-origin: center; animation: tituloIconFloat 3.2s ease-in-out infinite; } @keyframes tituloNeonPulse { 0%, 100% { text-shadow: 0 0 6px rgba(34, 211, 238, 0.8), 0 0 14px rgba(34, 211, 238, 0.55), 0 0 28px rgba(8, 145, 178, 0.35); } 50% { text-shadow: 0 0 9px rgba(103, 232, 249, 0.95), 0 0 22px rgba(34, 211, 238, 0.85), 0 0 42px rgba(6, 182, 212, 0.55); } } @keyframes tituloIconFloat { 0%, 100% { transform: translateY(0) rotate(0deg) scale(1); } 35% { transform: translateY(-3px) rotate(6deg) scale(1.07); } 70% { transform: translateY(1px) rotate(-4deg) scale(1.03); } } @media (min-width: 768px) { .home-mobile-toggle { display: none !important; } .home-desktop-nav { display: flex !important; } .home-mobile-nav { display: none !important; } .home-desktop-dropdown { display: none !important; } .home-horario-grid { display: grid; grid-template-columns: minmax(0, 2.7fr) minmax(360px, 1.35fr); gap: 0.75rem; align-items: start; } .home-audio-grid { display: grid; grid-template-columns: minmax(0, 2.7fr) minmax(360px, 1.35fr); gap: 0.75rem; align-items: stretch; } #encuesta.home-encuesta-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; } .home-karaoke-grid { display: grid; grid-template-columns: minmax(0, 2.7fr) minmax(320px, 1.35fr); gap: 0.75rem; align-items: start; } .home-blog-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(20px, 1.35fr); gap: 0.75rem; align-items: start; } #horario.home-horario-grid { align-items: stretch; } } @media (max-width: 767px) { #homeHeaderSlider.home-nav-section, #estrellas.home-nav-section, #chat.home-nav-section, #reproductor.home-nav-section { min-height: 100svh !important; height: auto !important; } #homeHeaderSlider.home-nav-section { min-height: 0 !important; height: auto !important; } #homeHeaderSlider.home-nav-section .section-frame, #estrellas.home-nav-section .section-frame { height: 100svh !important; min-height: 100svh !important; } #homeHeaderSlider.home-nav-section .section-frame { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; display: block; } #chat.home-nav-section, #reproductor.home-nav-section { display: flex !important; flex-direction: column !important; } #chat.home-nav-section > #ichat, #reproductor.home-nav-section > #reproductorFrame { flex: 1 1 auto; min-height: 0 !important; height: auto !important; } #audio.home-audio-grid, #encuesta.home-encuesta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: stretch; min-height: auto; } #audio.home-audio-grid > .min-w-0, #encuesta.home-encuesta-grid > .min-w-0 { min-height: 100svh; display: flex; flex-direction: column; } #audio.home-audio-grid > .min-w-0 > iframe, #encuesta.home-encuesta-grid > .min-w-0 > iframe { flex: 1 1 auto; min-height: 0; height: auto !important; } #horario.home-horario-grid > .min-w-0 { min-height: 100dvh; } } .marquee-wrapper { overflow: hidden; background: #000; height: auto; display: flex; align-items: center; padding: 5px 0; } .marquee { display: flex; align-items: center; will-change: transform; } .marquee img { height: 60px; max-height: 60px; margin-right: 40px; flex-shrink: 0; } @media (max-width: 768px) { .marquee img { height: 40px; max-height: 40px; margin-right: 20px; } } @media (max-width: 480px) { .marquee img { height: 30px; max-height: 30px; margin-right: 15px; } } .universo-container { min-height: 400px; background: #050508; position: relative; overflow: hidden; } #stars-small { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 10%, #fff, transparent), radial-gradient(1px 1px at 20% 50%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 70% 30%, #fff, transparent), radial-gradient(1px 1px at 90% 90%, #fff, transparent); background-size: 200px 200px; opacity: 0.4; animation: twink 4s infinite alternate; } #stars-medium { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 15% 25%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 75%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 15%, #fff, transparent); background-size: 350px 350px; opacity: 0.3; } #stars-large { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 30% 60%, #fff, transparent), radial-gradient(2px 2px at 75% 40%, #fff, transparent); background-size: 500px 500px; opacity: 0.5; } @keyframes twink { 0% { opacity: 0.3; } 100% { opacity: 0.6; } } .nebulosa-original { position: absolute; top: 50%; left: 50%; width: 800px; height: 600px; background: radial-gradient( circle, rgba(124, 58, 237, 0.5) 0%, rgba(37, 99, 235, 0.3) 40%, rgba(76, 29, 149, 0.1) 70%, transparent 100% ); transform: translate(-50%, -50%); filter: blur(60px); animation: pulso-original 10s ease-in-out infinite alternate; z-index: 1; } @keyframes pulso-original { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; } } .universo-container { background: #020205; } .cometa-v1 { position: absolute; top: -50px; right: 0; width: 2px; height: 2px; background: #fff; box-shadow: 0 0 10px #fff; z-index: 5; animation: cometa-caida 6s linear infinite; opacity: 0; } .cometa-v1::before { content: ''; position: absolute; width: 140px; height: 1px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(0deg); } @keyframes cometa-caida { 0% { transform: rotate(320deg) translateX(0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: rotate(320deg) translateX(-1200px); opacity: 0; } } .cometa-v1:nth-child(1) { top: 5%; right: 10%; animation-delay: 0s; } .cometa-v1:nth-child(2) { top: 30%; right: -5%; animation-delay: 3s; } .cometa-v1:nth-child(3) { top: 15%; right: 40%; animation-delay: 6s; } .float-animation { animation: floating 4s ease-in-out infinite; } @keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .enlace-espacial { transition: 0.3s; } .enlace-espacial:hover { color: #818cf8; text-shadow: 0 0 10px #818cf8; }