/* ══════════════════════════════════════════════════════════════════════ MODO VISUAL — pantalla de inicio con dos accesos. PRINCIPIO, aprendido a golpes: al Platinium NO se le toca la estructura. Su rejilla (.contenedor-app), el alto de sus secciones y la posición del reproductor ya están resueltos, incluidas sus propias reglas de orientación: @media (max-height:600px) and (orientation:landscape) { ... } Forzarle grid-template-rows, height, o sacar el reproductor a un overlay fijo fue lo que lo rompía. Todo eso se eliminó. Lo único que hace esta hoja es DECIDIR QUÉ SE VE dentro de .seccion-central: los dos accesos, o el reproductor. Dos reglas de display; el resto del comportamiento lo hereda del Platinium. MOBILE FIRST: reglas base de teléfono; las pantallas grandes sólo agregan con min-width. ══════════════════════════════════════════════════════════════════════ */ /* ── Lo único estructural: alternar inicio ⇄ reproductor ──────────────── El !important es necesario porque el Platinium inyecta su CSS por JavaScript y carga después de esta hoja. */ body.mv-home .area-reproductor, body.mv-home .area-informacion { display: none !important; } body:not(.mv-home) .mv-inicio { display: none !important; } /* En el inicio sólo van: menú, nombre y slogan, los dos accesos y el banner de aliados. El flotante de WhatsApp reaparece con el reproductor, que es donde tiene sentido. */ body.mv-home #whatsapp-float { display: none !important; } /* ── Fondo tipo login del portal ────────────────────────────────────────── Mismo efecto que https://solisfmdigital.com/portal/, pero con un cambio de arquitectura obligatorio: en el portal estas capas van en el porque ahí el body ES el fondo de toda la página. Acá NO — el fondo real de carátula (#bg-layer-1/2, que cambia de color según lo que suena) vive DENTRO de .contenedor-app con z-index:-1, y .contenedor-app tiene su propio fondo casi opaco (rgba(10,12,18,.92→.85)). Poner estas capas en el body (como se hizo al principio) las dejaba ENTERAS detrás de esa caja opaca — nunca se veían, y por eso el color de la carátula "se imponía": no había ningún conflicto de transparencia, sencillamente mi capa oscura estaba del otro lado de una pared opaca. La solución: las mismas capas, pero como HIJAS de .contenedor-app, apiladas justo ENCIMA de la carátula (mismo z-index:-1, el orden en el HTML decide quién queda arriba: carátula → oscurecido+manchas → puntos → anillos → circuito → recién ahí el contenido real de la página). */ .mv-fondo-oscuro { position: absolute; inset: -50px; z-index: -1; pointer-events: none; /* 42%: punto medio entre el 35% original (dejaba el circuito y los anillos invisibles debajo del color de la carátula) y el 55% de la segunda pasada (ya tapaba casi del todo ese color). Con 42% el tinte de la carátula todavía se insinúa, pero los efectos se ven bien. */ background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)), radial-gradient(ellipse 80% 60% at 15% 85%, rgba(201, 162, 76, .10) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 85% 10%, rgba(42, 142, 255, .12) 0%, transparent 55%); } .mv-fondo-puntos { position: absolute; inset: -50px; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 28px 28px; } /* Anillos que se expanden desde abajo al centro — mismo .bg-waves del portal, prefijo "mv-" para no chocar con nada del Platinium. Ocultos fuera del inicio (mv-home) para no seguir animando de fondo detrás del reproductor, donde no se ven pero seguirían gastando ciclos. */ body:not(.mv-home) .mv-waves, body:not(.mv-home) .mv-circuit { display: none; } .mv-waves { position: absolute; inset: -50px; z-index: -1; pointer-events: none; overflow: hidden; } .mv-waves span { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(0, 224, 255, .08); animation: mv-pulso-anillo 6s ease-out infinite; } .mv-waves span:nth-child(1) { width: 400px; height: 400px; animation-delay: 0s; } .mv-waves span:nth-child(2) { width: 700px; height: 700px; animation-delay: 1.5s; } .mv-waves span:nth-child(3) { width: 1000px; height: 1000px; animation-delay: 3s; } .mv-waves span:nth-child(4) { width: 1300px; height: 1300px; animation-delay: 4.5s; } @keyframes mv-pulso-anillo { 0% { opacity: 0; transform: translateX(-50%) scale(.85); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(1.1); } } /* Líneas de circuito que fluyen + nodos que laten — mismo .circuit-layer del portal. El color usa var(--color-marca) del Platinium en vez del cian fijo del portal, así el efecto se tiñe con la marca de cada cliente en vez de quedar siempre celeste. */ .mv-circuit { position: absolute; inset: -50px; z-index: -1; pointer-events: none; opacity: .75; overflow: hidden; } .mv-circuit-line { fill: none; stroke: var(--color-marca, #04b8dc); stroke-width: 1; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: .15; animation: mv-flujo 8s linear infinite; } .mv-circuit-node { fill: var(--color-marca, #04b8dc); opacity: 0; filter: drop-shadow(0 0 8px var(--color-marca, #04b8dc)); animation: mv-nodo-late 4s ease-in-out infinite; } @keyframes mv-flujo { 0% { stroke-dashoffset: 2000; opacity: 0; } 20% { opacity: .25; } 80% { opacity: .25; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes mv-nodo-late { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: .6; transform: scale(1.2); } } @media (prefers-reduced-motion: reduce) { .mv-waves span, .mv-circuit-line, .mv-circuit-node { animation: none; } } /* Con el modal de video abierto, el fondo decorativo queda tapado del todo — pausar sus animaciones libera CPU/GPU para el video en vez de seguir dibujando algo que nadie ve. Hallazgo real 01/09/2026: en un celular de gama baja, el video se veía entrecortado dentro de la página completa de Platinium pero fluido en un reproductor aislado. */ body.mv-video-abierto .mv-waves span, body.mv-video-abierto .mv-circuit-line, body.mv-video-abierto .mv-circuit-node { animation-play-state: paused; } /* ── Accesos rápidos del header (audífonos / TV) ───────────────────────── Mismo destino que MÍRANOS/ESCÚCHANOS: llevan data-mv-abrir y los recoge el listener genérico que ya existe, sin lógica nueva. Van absolutos a la derecha —igual que el botón de menú a la izquierda (left:10px)— para no descuadrar el centrado del logo, que sigue centrándose solo entre los dos elementos absolutos. */ .mv-header-rapidos { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: .2rem; z-index: 10; } .mv-header-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: .95rem; cursor: pointer; transition: background .18s ease, color .18s ease; } .mv-header-btn:hover { background: rgba(255, 255, 255, .1); } .mv-header-btn:focus-visible { outline: 2px solid var(--color-marca, #04b8dc); outline-offset: 2px; } /* TV: en rojo cuando hay transmisión (mismo código que MÍRANOS abajo), atenuado cuando no la hay — refleja el mismo estado, no uno aparte. */ .mv-header-btn--vivo { color: #ff3b30; } .mv-header-btn--vivo.mv-off { color: rgba(255, 255, 255, .35); cursor: default; } .mv-header-btn--vivo.mv-off:hover { background: transparent; } /* Sólo en teléfono: en escritorio esa esquina la usa "sonando ahora"/las tarjetas centradas, y no hace falta el atajo. */ @media (min-width: 768px) { .mv-header-rapidos { display: none; } } /* Se ocultan mientras se ve el reproductor (body pierde .mv-home): ahí, en ese mismo lugar de la derecha, aparece el botón de volver — se pisaban. Vuelven a mostrarse solos al regresar al inicio. */ body:not(.mv-home) .mv-header-rapidos { display: none !important; } /* ── Pantalla de inicio ──────────────────────────────────────────────── Vive dentro de .seccion-central, en el mismo hueco que el reproductor, y usa el mismo recurso que él para ocuparlo (flex dentro de la sección). Así hereda el reparto de espacio del Platinium sin imponerle alturas. */ .mv-inicio { display: flex; flex-direction: column; align-items: stretch; /* flex-start, no center (corregido 07/09/2026): con center, el min-height de abajo repartía el sobrante mitad arriba/mitad abajo del contenido real (tarjeta "sonando ahora" + accesos), dejando un hueco enorme entre los accesos y el banner de aliados que viene después. Con flex-start el contenido se pega arriba y no sobra nada que repartir — mismo criterio que ya usa la regla de escritorio de abajo (min-width:992px), portado ahora también a la base mobile. */ justify-content: flex-start; width: 100%; flex: 1 1 auto; /* min-height: 0, no min(56vh,25rem) (corregido 07/09/2026): ese alto mínimo fue pensado para cuando el contenido se CENTRABA, así la fila no se veía enclenque. Con flex-start el contenido ya se pega arriba por sí solo; pedir un alto mínimo mayor al que ocupa el contenido real sólo vuelve a crear el mismo hueco vacío antes del banner de aliados. En 0, la fila mide justo lo que ocupan sus hijos y el banner sube justo detrás — mismo criterio que ya usa la regla de escritorio de abajo. */ min-height: 0; /* padding-top fluido (corregido 08/09/2026, feedback de cliente real en teléfono): flex-start a secas se pasó de rosca — "sonando ahora" y los accesos quedaban pegados justo debajo del header, con TODO el sobrante acumulado en un solo bloque antes del banner de aliados. Ni el center de antes (hueco repartido mitad arriba/mitad abajo) ni el flex-start puro (todo el aire abajo) se veían bien — un poco de aire arriba, fluido según el alto real de pantalla, sin volver a depender de un alto mínimo fijo. Subido de clamp(20px,8vh,60px) a clamp(40px,20vh,200px) (mismo día): el primer valor se probó por accidente encima de una hoja vieja en caché del navegador (con el min-height de 400px que ya se había sacado), así que en producción real (sin ese min-height de más) quedaba mucho más pegado arriba de lo que se vio en la prueba. Este valor sí se verificó con la hoja real, forzando cache-bust. */ padding-top: clamp(40px, 20vh, 200px); } /* ── Acercar el banner de aliados, SOLO en "Míranos" (08/09/2026, feedback de cliente real) ── .seccion-socios es un ITEM del grid de .contenedor-app (Platinium compartido), y ese grid centra sus items dentro de su propia fila por defecto (align-items:center en .contenedor-app). En mobile esa fila es la que se queda con TODO el sobrante de la pantalla (grid-template-rows: auto auto 1fr auto — ver diagnóstico previo), así que el banner queda flotando a mitad de una fila enorme: con espacio vacío arriba Y abajo de él, en vez de pegado a lo que viene antes. align-self:start lo saca de ese centrado y lo pega al principio de su fila (mismo lugar donde ya no hay hueco). El margin-top que sigue es lo único que decide cuánto aire queda entre el bloque de arriba y el banner — antes era 0 !important (Platinium), pegado del todo; acá se pide "un poco", así que se anula ese 0 con un valor chico y fluido. No hace falta @media: en escritorio esa fila mide justo su contenido (grid-template-rows la deja como "auto" ahí), así que align-self:start no mueve nada — no hay sobrante que reacomodar. CORREGIDO 08/09/2026 (segunda vuelta): esta regla estaba SIN scope, aplicando también a "Escúchanos" (el reproductor real de Platinium, heredado tal cual) — ahí el align-items:center default de Platinium ya repartía bien el sobrante (como en turisticafm), y este align-self genérico lo forzaba a acumular TODO el sobrante después del banner, generando un hueco enorme y desproporcionado que no existe en un Platinium real. Escopeado a body.mv-home: afecta solo la pantalla de inicio propia de radiovisual, donde nació el problema; "Escúchanos" vuelve a comportarse exactamente como el Platinium del que es copia. */ body.mv-home .seccion-socios { align-self: start; margin-top: clamp(16px, 4vh, 40px) !important; } /* ── Retícula de accesos: dos tarjetas de esquinas redondeadas. Icono en cuadro redondeado del color de marca, etiqueta debajo. ────── */ .mv-accesos { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .mv-acceso { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 2.2rem 1rem; margin: .35rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.4rem; background: rgba(255, 255, 255, .025); color: var(--color-marca, #04b8dc); font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .mv-acceso:active { background: rgba(255, 255, 255, .06); transform: scale(.98); } .mv-acceso:hover { border-color: rgba(255, 255, 255, .22); } .mv-acceso:focus-visible { outline: 2px solid var(--color-marca, #04b8dc); outline-offset: 2px; } .mv-ico { width: 4.6rem; height: 4.6rem; border-radius: 1.15rem; display: grid; place-content: center; background: var(--color-marca, #04b8dc); } .mv-ico i { font-size: 2rem; color: #0a0c12; } .mv-acceso b { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; color: var(--color-marca, #04b8dc); } .mv-acceso small { display: none; } .mv-cinta { position: absolute; top: .7rem; right: .7rem; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .45rem; border-radius: 999px; background: #ff3b30; color: #fff; font-size: .5rem; font-weight: 800; letter-spacing: .1em; } .mv-cinta em { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: mv-lat 1.4s ease-in-out infinite; } @keyframes mv-lat { 0%, 100% { opacity: 1 } 50% { opacity: .3 } } /* Fuera del aire: apagado, NO oculto — el visitante debe saber que el servicio existe para volver cuando la radio esté transmitiendo. */ .mv-acceso.mv-off { opacity: .35; cursor: default; } .mv-acceso.mv-off .mv-ico { background: rgba(255, 255, 255, .16); } .mv-acceso.mv-off .mv-ico i { color: rgba(255, 255, 255, .55); } .mv-acceso.mv-off b { color: rgba(255, 255, 255, .5); } .mv-acceso.mv-off:active { background: transparent; } /* ── Relleno de escritorio: "sonando ahora" + redes ────────────────────── "Sonando ahora" NO es contenido inventado: refleja datos que el Platinium ya tiene en vivo (el mismo now playing del reproductor) — se ve en toda pantalla, con una versión compacta en teléfono y una píldora más ancha en escritorio. Las redes de marca.json, en cambio, sólo se muestran en escritorio: en vertical de teléfono el menú lateral ya las trae, y agregarlas ahí duplicaría el mismo dato en dos sitios distintos de una pantalla ya completa. */ /* Versión compacta, mobile first: fila pequeña, sin píldora ni borde, pegada arriba de los accesos. */ .mv-ahora { display: flex; align-items: center; gap: .6rem; margin: 0 auto 1rem; max-width: 20rem; } .mv-ahora-cover { width: 2.1rem; height: 2.1rem; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .08); flex-shrink: 0; } .mv-ahora-texto { display: flex; flex-direction: column; gap: .05rem; min-width: 0; } .mv-ahora-eyebrow { font-size: .55rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--color-marca, #04b8dc); } .mv-ahora-cancion { font-size: .78rem; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-ahora-cancion b { color: #fff; font-weight: 700; } @media (min-width: 720px) { /* En escritorio se convierte en la píldora con borde: hay espacio de sobra y se lee mejor como una tarjeta aparte, no como una fila suelta. */ .mv-ahora { gap: .96rem; margin: 0 auto 1.9rem; padding: .6rem 1.1rem .6rem .6rem; max-width: 31rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .03); } .mv-ahora-cover { width: 3.1rem; height: 3.1rem; } .mv-ahora-eyebrow { font-size: .72rem; } .mv-ahora-cancion { font-size: .98rem; } } /* ── Volver al inicio ────────────────────────────────────────────────── Va ABAJO a la izquierda, no arriba: arriba a la izquierda vive el botón de menú del Platinium (top:8 left:20) y lo tapaba por completo, dejando el menú lateral inaccesible mientras se escuchaba la radio. Botón circular de vidrio: fondo translúcido con desenfoque, un aro sutil y el icono en el color de marca del cliente. */ .mv-volver { position: fixed; /* A la altura del botón de menú (top:8, alto 44) pero en el lado opuesto: menú a la izquierda, volver a la derecha. Es la convención de los portales grandes y deja los dos siempre a la vista. */ right: 20px; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 8000; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)), rgba(12, 14, 20, .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); color: var(--color-marca, #04b8dc); font-size: 1.1rem; cursor: pointer; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .18s ease, box-shadow .22s ease, background .22s ease; } body:not(.mv-home) .mv-volver { display: inline-flex; } /* Con el menú lateral abierto el botón estorba y compite con el panel: se esconde, y vuelve solo al cerrarlo. */ body.mv-menu-abierto .mv-volver { display: none !important; } .mv-volver:hover { transform: translateY(-2px); box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18); } .mv-volver:active { transform: translateY(0) scale(.95); } .mv-volver:focus-visible { outline: 2px solid var(--color-marca, #04b8dc); outline-offset: 3px; } /* Halo suave del color de marca, para que se lea como acción principal. */ .mv-volver::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1px; background: linear-gradient(145deg, var(--color-marca, #04b8dc), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; } /* ── Modal del video ─────────────────────────────────────────────────── Éste SÍ es una ventana flotante: el video no forma parte del Platinium, así que no hay estructura ajena que respetar. El ancho se limita TAMBIÉN por la altura disponible: mirando sólo el ancho, en pantallas bajas el 16:9 no cabe y el video sale diminuto. */ .mv-ov { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; padding: .75rem; background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mv-ov.mv-on { display: flex; } .mv-caja { position: relative; width: min(100%, 1400px, calc((92vh - 3.5rem) * 1.7778)); max-height: 92vh; overflow: hidden; border-radius: .9rem; background: #17171a; box-shadow: 0 1.5rem 3.75rem rgba(0, 0, 0, .6); } .mv-cab { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; } .mv-cab .mv-tt { flex: 1 1 auto; font-size: .82rem; font-weight: 700; color: #f2f2f4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-x { width: 2.1rem; height: 2.1rem; flex: 0 0 auto; display: grid; place-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; } .mv-x:hover { background: rgba(255, 255, 255, .2); } .mv-marco { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; } .mv-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Girar a horizontal (02/09/2026) — el botón "girar" vive DENTRO del