/* ========================================================= OUT2FI — stylesheet Design language: deep space navy, neon purple → indigo → pink gradient accents, glassy cards, editorial-clean type. ========================================================= */ :root { /* --- color: dark (default) --- */ --bg: #08060f; --bg-elevated: #0d0a1a; --surface: #13101f; --surface-2: #171325; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text: #f4f3f8; --text-dim: #a8a4b8; --text-faint: #6f6c82; --accent-1: #a855f7; --accent-2: #6366f1; --accent-3: #ec4899; --gradient: linear-gradient(120deg, var(--accent-1) 0%, var(--accent-2) 50%, var(--accent-3) 100%); --gradient-soft: linear-gradient(120deg, rgba(168,85,247,.16), rgba(99,102,241,.16), rgba(236,72,153,.16)); --live: #f43f5e; --success: #22c55e; --success-bg: rgba(34,197,94,.12); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-full: 999px; --shadow-card: 0 8px 30px rgba(0,0,0,.35); --shadow-glow: 0 0 0 1px rgba(168,85,247,.25), 0 8px 24px rgba(99,102,241,.18); --font-display: 'Sora', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --header-h: 76px; --container: 1440px; color-scheme: dark; } :root[data-theme="light"] { --bg: #f6f5fb; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f0eef8; --border: rgba(20, 12, 40, 0.08); --border-strong: rgba(20, 12, 40, 0.14); --text: #17132a; --text-dim: #55506b; --text-faint: #8b869c; --shadow-card: 0 8px 30px rgba(90, 60, 140, .10); color-scheme: light; } /* --- reset --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Cinturón de seguridad contra scroll horizontal fantasma: el menú móvil (.mobile-nav, más abajo) es un panel position:fixed; inset:0 que se saca de pantalla con transform: translateX(100%). En ciertos Android/Chromium ese patrón (fixed + inset:0 + transform) sigue sumando ancho al documento aunque esté invisible — en iOS no se nota porque Safari recorta/rebota distinto, pero en Android deja un hueco vacío a la derecha de TODA la página (header, tarjeta del reproductor, todo), porque el viewport queda más ancho de lo que se ve y el scroll descansa en su posición inicial. overflow-x: hidden acá corta cualquier desborde horizontal de cualquier elemento — de este panel o de cualquier otro que apareciera en el futuro — sin afectar el scroll horizontal interno que sí se usa a propósito en .greetings-scroller / .genre-scroller (esos declaran su propio overflow-x: auto y no dependen de que el documento pueda desbordar). */ overflow-x: hidden; width: 100%; } body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; color: inherit; } button { cursor: pointer; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; transition: background .25s ease, color .25s ease; /* BUG REAL (reportado: al hacer scroll el header no quedaba fijo). .site-header ya tiene position: sticky; top: 0 — no era eso. El problema estaba ACÁ: cuando un elemento declara overflow-x: hidden con overflow-y en visible, la especificación obliga al navegador a calcular overflow-y como auto. O sea que este overflow-x convertía al en un contenedor de scroll propio, y un hijo sticky se pega al contenedor que scrollea MÁS CERCANO — que pasó a ser el body. Como el body no scrollea (scrollea el viewport), el header se iba con la página como si el sticky no existiera. No se puede simplemente borrarlo: está para cortar el desborde horizontal del panel móvil (ver el comentario largo en html, arriba). La solución es 'clip', que recorta EXACTAMENTE igual pero no crea un contenedor de scroll, así que el sticky vuelve a funcionar. Las dos líneas van a propósito y en este orden: un navegador viejo que no conozca 'clip' descarta esa declaración y se queda con 'hidden' — mismo comportamiento que hasta ahora, nada se rompe. En no hace falta tocar nada: ahí el overflow se propaga al viewport y el propio queda como visible, así que nunca fue parte del problema. */ overflow-x: hidden; overflow-x: clip; width: 100%; position: relative; /* ancla el contexto para que el recorte de arriba realmente recorte, no solo lo declare */ } .icon { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; } .icon-stroke { fill: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -60px; z-index: 200; background: var(--accent-2); color: #fff; padding: .75rem 1.25rem; border-radius: var(--radius-sm); transition: top .2s ease; } .skip-link:focus { top: 1rem; } :focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; border-radius: 6px; } .container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2.5rem); } /* ========================================================= Header ========================================================= */ .site-header { position: sticky; top: 0; z-index: 100; height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: 1.5rem; width: 100%; } .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; margin-right: .5rem; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; } .brand-accent { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .main-nav { display: none; } .main-nav ul { display: flex; align-items: center; gap: 2rem; } .main-nav a { font-size: .72rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; padding-block: .4rem; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .main-nav a:hover { color: var(--text); } .main-nav a[aria-current="page"] { color: var(--text); border-color: var(--accent-1); } .header-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; } .icon-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-dim); transition: color .2s ease, border-color .2s ease, transform .15s ease; } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); } /* Corazones flotantes al dar "me gusta" a la estación — estilo TikTok: varios corazones suben desde el botón con trayectorias ligeramente distintas (deriva horizontal + rotación) y se van desvaneciendo, en vez de un solo ícono subiendo en línea recta, que se ve mecánico. */ .heart-particle { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; color: var(--live); pointer-events: none; z-index: 5; transform: translate(-50%, -50%); animation: heart-float 1.1s ease-out forwards; /* Deriva, giro, tamaño y altura los pone el JS por corazón (--hx, --hr, --hs, --hy); los valores de aquí son solo el respaldo. */ } @keyframes heart-float { 0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) rotate(var(--hr, 0deg)) scale(.3); } 12% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--hx, 0px) * .2), -10px) rotate(var(--hr, 0deg)) scale(var(--hs, 1)); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--hx, 0px), var(--hy, -58px)) rotate(var(--hr, 0deg)) scale(calc(var(--hs, 1) * .8)); } } @media (prefers-reduced-motion: reduce) { .heart-particle { display: none; } /* la regla global ya congela animaciones, esto evita que aparezcan y desaparezcan de golpe sin transición */ } .lang-switch { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px; } .lang-switch a { padding: .4rem .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .03em; border-radius: var(--radius-full); color: var(--text-faint); transition: color .2s ease, background .2s ease; } .lang-switch a[aria-current="true"] { background: var(--gradient); color: #fff; } .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: var(--radius-full); font-weight: 600; font-size: .88rem; border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-gradient { background: var(--gradient); color: #fff; box-shadow: 0 6px 20px rgba(99,102,241,.35); } .btn-gradient:hover { box-shadow: 0 8px 26px rgba(99,102,241,.5); } .btn-outline { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-outline:hover { border-color: var(--border-strong); } .btn .icon { width: 17px; height: 17px; } .menu-toggle { display: grid; } /* ========================================================= Hero / live player ========================================================= */ .hero { padding-block: clamp(1.25rem, 3vw, 2rem) 1.5rem; } .player-card { display: grid; grid-template-columns: 1fr; gap: 0; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .player-art { position: relative; aspect-ratio: 16/10; overflow: hidden; } .player-art img { width: 100%; height: 100%; object-fit: cover; } .player-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,6,15,.55), transparent 55%); } .live-badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; background: var(--live); color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .05em; padding: .35rem .7rem; border-radius: var(--radius-full); } .live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse-dot 1.6s ease-in-out infinite; } @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .player-info { position: relative; padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; } .player-corner-badge { position: absolute; top: 1.1rem; right: clamp(1.25rem, 3vw, 2rem); z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; } .player-listeners-badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); padding: .35rem .7rem .35rem .55rem; font-size: .74rem; white-space: nowrap; } .player-listeners-badge .icon { width: 14px; height: 14px; color: var(--text-faint); } .player-listeners-badge strong { font-weight: 800; color: var(--text); } .player-listeners-badge span { color: var(--text-faint); } .player-listeners-badge::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse-dot-slow 2.4s ease-in-out infinite; } .player-neon-logo { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 3vw, 1.55rem); letter-spacing: .05em; padding: .3rem .85rem; border-radius: var(--radius-full); /* Fondo oscuro FIJO, no ligado a --surface-2. El texto de este letrero es blanco a propósito (así se ve un neón real) y en modo claro --surface-2 es casi blanco — el texto quedaba casi invisible, solo se notaba el resplandor. Con este fondo propio el letrero se ve igual de bien en los dos temas. */ background: #0d0a1a; color: #fff; border: 1.5px solid rgba(168,85,247,.65); text-shadow: 0 0 4px #fff, 0 0 10px rgba(168,85,247,1), 0 0 22px rgba(168,85,247,.85), 0 0 42px rgba(99,102,241,.6), 0 0 74px rgba(99,102,241,.4); box-shadow: 0 0 10px rgba(168,85,247,.55), 0 0 24px rgba(168,85,247,.3), inset 0 0 12px rgba(168,85,247,.22); animation: neon-breathe 2.6s ease-in-out infinite, neon-flicker 6s linear infinite; position: relative; overflow: hidden; isolation: isolate; } /* Brillo que recorre el letrero de izquierda a derecha en loop — el típico "shine" de un cartel de neón profesional. Es una franja diagonal semitransparente que se desliza por encima del texto; se pausa 1.6s entre pasadas para que no distraiga (un brillo constante se siente barato, uno que "respira" con pausas se lee como intencional). */ .player-neon-logo::before { /* z-index NEGATIVO a propósito: en el orden de pintado de CSS, un descendiente con z-index negativo se pinta DESPUÉS del fondo del contenedor pero ANTES del texto en flujo normal — justo el hueco donde queda "detrás de las letras, encima del fondo". Con z-index positivo (o sin isolation:isolate) el brillo taparía "OUT2FI" en cada pasada en vez de asomar entre las letras. */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); background-size: 220% 100%; background-position: 150% 0; animation: neon-shine 3.6s cubic-bezier(.4,0,.2,1) infinite; } @keyframes neon-shine { 0% { background-position: 150% 0; } 45% { background-position: -50% 0; } 100% { background-position: -50% 0; } } .player-neon-logo span { color: #ffe9fb; text-shadow: 0 0 4px #fff, 0 0 10px rgba(236,72,153,1), 0 0 24px rgba(236,72,153,.9), 0 0 46px rgba(236,72,153,.6), 0 0 80px rgba(236,72,153,.35); } @keyframes neon-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } @keyframes neon-flicker { 0%, 89%, 92%, 100% { opacity: 1; } 90% { opacity: .4; } 91% { opacity: .9; } 95% { opacity: 1; } 96% { opacity: .6; } 97% { opacity: 1; } } @media (max-width: 560px) { .player-corner-badge { position: static; align-items: flex-start; margin-bottom: .3rem; } /* Sitio reservado para el corazón, que en móvil sube a esta esquina: sin esto el contador ("119 En este momento") tiene white-space:nowrap y se metería por debajo del botón en teléfonos angostos. */ .player-corner-badge { padding-right: 3.4rem; } .volume-track { width: 60px; } .player-secondary { gap: .5rem; } /* Con el botón de visualizador son cinco controles: se aprieta el espaciado y los botones para que la fila siga entrando de una sola línea en teléfonos angostos. */ .volume-row { gap: .35rem; } .volume-row .icon-btn { width: 36px; height: 36px; } .player-controls-sep { height: 18px; } /* El corazón se va a la esquina superior derecha, en línea con el contador de oyentes. Se saca del flujo con position:absolute, así no deja un hueco en la fila de controles y esa fila queda más holgada. Se queda a 42px (no a los 36px del resto) porque es el gesto que más se toca y conviene un objetivo táctil cómodo. El selector lleva .volume-row para ganarle en especificidad a la regla de 36px de arriba, no porque siga dentro de esa fila visualmente. */ .volume-row [data-favorite-toggle] { position: absolute; top: 1.25rem; right: clamp(1.25rem, 3vw, 2rem); width: 42px; height: 42px; z-index: 4; } } @media (max-width: 380px) { /* Muy angosto: se van el separador y el slider de volumen (el botón de silenciar sigue estando), antes que dejar que la fila se parta. */ .volume-track { width: 44px; } .player-controls-sep { display: none; } } .eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-1); } .show-name { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 700; letter-spacing: -.01em; } .show-host { font-size: .85rem; font-weight: 600; color: var(--text-dim); } .show-host strong { color: var(--text); } .transport { display: flex; align-items: center; gap: 1rem; } .play-btn { width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0; background: var(--gradient); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 18%, transparent), 0 10px 30px rgba(99,102,241,.4); transition: transform .15s ease; } .play-btn:hover { transform: scale(1.05); } .play-btn .icon { width: 26px; height: 26px; } .play-btn.is-playing .icon-play { display: none; } .play-btn:not(.is-playing) .icon-pause { display: none; } .visualizer { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 54px; min-width: 0; overflow: hidden; } .visualizer span { flex: 1; min-width: 2px; border-radius: 2px; background: var(--gradient); opacity: .85; transform-origin: bottom; } /* Visualizador "onda líquida": el