/* ============================================================ RN Necochea 97.3 — Estilos del sitio público El color principal se define desde el panel (variable --color-radio inyectada en el de cada página). ============================================================ */ :root { --color-radio: #037F8B; /* se sobreescribe desde el backend */ --rojo-vivo: #EC3237; --fondo: #F7F7F7; --tinta: #17272A; --tinta-suave: #5A6B6E; --blanco: #FFFFFF; --radio-borde: 14px; --sombra-card: 0 2px 10px rgba(23, 39, 42, 0.08); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Archivo', system-ui, -apple-system, sans-serif; background: var(--fondo); color: var(--tinta); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--color-radio); text-decoration: none; } a:hover { text-decoration: underline; } .contenedor { width: min(1100px, 100% - 2rem); margin-inline: auto; } /* ---------- Cabecera ---------- */ .cabecera { background: var(--blanco); border-bottom: 3px solid var(--color-radio); position: sticky; top: 0; z-index: 50; } .cabecera-inner { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0; } .cabecera-logo { height: 48px; width: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .cabecera-marca { line-height: 1.15; } .cabecera-nombre { font-weight: 900; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--tinta); } .cabecera-slogan { font-size: 0.78rem; color: var(--tinta-suave); font-weight: 500; } .cabecera-redes { margin-left: auto; display: flex; gap: 0.35rem; } .red-social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fondo); color: var(--color-radio); transition: background 0.15s, color 0.15s, transform 0.15s; } .red-social:hover { background: var(--color-radio); color: var(--blanco); text-decoration: none; transform: translateY(-2px); } .red-social svg { width: 18px; height: 18px; fill: currentColor; } .cabecera-enlace-marca { display: flex; align-items: center; gap: 0.8rem; color: inherit; min-width: 0; } .cabecera-enlace-marca:hover { text-decoration: none; } .cabecera-derecha { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; } .cabecera-redes { margin-left: 0; } /* ---------- Clima ---------- */ .clima { display: flex; align-items: center; gap: 0.4rem; background: var(--fondo); padding: 0.35rem 0.8rem; border-radius: 100px; font-weight: 700; font-size: 0.92rem; white-space: nowrap; } .clima-icono { font-size: 1.1rem; line-height: 1; } .clima-temp { color: var(--tinta); } .clima-lugar { font-size: 0.72rem; font-weight: 600; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; } /* ---------- Menú principal ---------- */ .menu-principal { background: var(--color-radio); } .menu-inner { display: flex; gap: 0.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .menu-inner::-webkit-scrollbar { display: none; } .menu-item { color: rgba(255, 255, 255, 0.88); font-weight: 700; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.65rem 0.9rem; white-space: nowrap; border-bottom: 3px solid transparent; } .menu-item:hover { color: #fff; background: rgba(255, 255, 255, 0.1); text-decoration: none; } .menu-item.activo { color: #fff; border-bottom-color: #fff; } .menu-programacion { margin-left: auto; background: var(--rojo-vivo); color: #fff; } .menu-programacion:hover { background: color-mix(in srgb, var(--rojo-vivo) 85%, #000); } .menu-programacion.activo { border-bottom-color: rgba(255, 255, 255, 0.6); } /* ---------- Publicidades ---------- */ .bloque-publicidad { margin: 1.6rem 0; } .publicidad-top { margin: 1.6rem 0 0; } .etiqueta-publicidad { display: block; text-align: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 0.35rem; } .banner-960 { text-align: center; } .banner-960 img { display: inline-block; width: 100%; max-width: 960px; height: auto; border-radius: 8px; box-shadow: var(--sombra-card); } .trio-banners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; max-width: 960px; margin-inline: auto; justify-items: center; } .banner-300 { width: 100%; max-width: 300px; } .banner-300 img { width: 100%; height: auto; border-radius: 8px; box-shadow: var(--sombra-card); } @media (max-width: 640px) { .trio-banners { grid-template-columns: 1fr; } } /* ---------- Programación ---------- */ .grilla-programacion { display: flex; flex-direction: column; gap: 2rem; } .dia-titulo { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-radio); border-bottom: 2px solid var(--color-radio); padding-bottom: 0.4rem; margin: 0 0 0.9rem; } .lista-programas { display: flex; flex-direction: column; gap: 0.7rem; } .programa { display: flex; gap: 1.1rem; background: var(--blanco); border-radius: var(--radio-borde); box-shadow: var(--sombra-card); padding: 0.95rem 1.2rem; } .programa-horario { font-weight: 800; color: var(--rojo-vivo); white-space: nowrap; min-width: 110px; font-variant-numeric: tabular-nums; } .programa-nombre { font-size: 1.02rem; font-weight: 800; margin: 0; letter-spacing: -0.01em; } .programa-conduccion { font-size: 0.85rem; color: var(--tinta-suave); font-weight: 600; } .programa-descripcion { font-size: 0.88rem; color: var(--tinta-suave); margin: 0.3rem 0 0; } @media (max-width: 640px) { .programa { flex-direction: column; gap: 0.25rem; } .programa-horario { min-width: 0; } } /* ---------- Reproductor (hero) ---------- */ .hero-player { background: radial-gradient(1200px 400px at 85% -10%, rgba(255,255,255,0.14), transparent 60%), linear-gradient(135deg, var(--color-radio), color-mix(in srgb, var(--color-radio) 70%, #032e33)); color: var(--blanco); padding: 2.6rem 0 2.8rem; } .player-inner { display: flex; align-items: center; gap: 2rem; } .player-logo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border: 4px solid rgba(255, 255, 255, 0.85); flex-shrink: 0; } .player-datos { flex: 1; min-width: 0; } .badge-envivo { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--rojo-vivo); color: var(--blanco); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.14em; padding: 0.3rem 0.85rem; border-radius: 100px; text-transform: uppercase; } .badge-envivo .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--blanco); animation: latido 1.4s ease-in-out infinite; } @keyframes latido { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } } .player-nombre { font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 900; letter-spacing: -0.03em; margin: 0.5rem 0 0.15rem; line-height: 1.05; } .player-slogan { font-size: 1.02rem; opacity: 0.88; font-weight: 500; margin: 0; } /* Controles */ .player-controles { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.4rem; flex-wrap: wrap; } .btn-play { width: 76px; height: 76px; border-radius: 50%; border: none; background: var(--blanco); color: var(--color-radio); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0; } .btn-play:hover { transform: scale(1.06); box-shadow: 0 10px 30px rgba(0,0,0,0.35); } .btn-play:active { transform: scale(0.97); } .btn-play:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; } .btn-play svg { width: 32px; height: 32px; fill: currentColor; } .btn-play .icono-pausa { display: none; } .btn-play.reproduciendo .icono-play { display: none; } .btn-play.reproduciendo .icono-pausa { display: block; } .control-volumen { display: flex; align-items: center; gap: 0.6rem; background: rgba(255, 255, 255, 0.14); padding: 0.55rem 1rem; border-radius: 100px; } .control-volumen svg { width: 20px; height: 20px; fill: var(--blanco); flex-shrink: 0; } .control-volumen input[type="range"] { -webkit-appearance: none; appearance: none; width: 130px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.35); cursor: pointer; } .control-volumen input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); border: none; } .control-volumen input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); border: none; } .estado-player { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; font-weight: 600; opacity: 0.92; } /* Ecualizador animado (solo mientras suena) */ .ecualizador { display: none; align-items: flex-end; gap: 3px; height: 18px; } .ecualizador span { width: 4px; border-radius: 2px; background: var(--blanco); animation: eq 0.9s ease-in-out infinite; } .ecualizador span:nth-child(1) { animation-delay: 0s; } .ecualizador span:nth-child(2) { animation-delay: 0.22s; } .ecualizador span:nth-child(3) { animation-delay: 0.1s; } .ecualizador span:nth-child(4) { animation-delay: 0.34s; } @keyframes eq { 0%, 100% { height: 5px; } 50% { height: 18px; } } .reproduciendo-activo .ecualizador { display: flex; } @media (prefers-reduced-motion: reduce) { .badge-envivo .punto, .ecualizador span { animation: none; } html { scroll-behavior: auto; } } /* ---------- Sección de noticias ---------- */ .seccion-noticias { padding: 2.6rem 0 3.5rem; } .titulo-seccion { display: flex; align-items: center; gap: 0.7rem; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 1.6rem; } .titulo-seccion::before { content: ''; width: 6px; height: 1.35em; border-radius: 3px; background: var(--rojo-vivo); } .grilla-noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; } .card-noticia { background: var(--blanco); border-radius: var(--radio-borde); overflow: hidden; box-shadow: var(--sombra-card); display: flex; flex-direction: column; transition: transform 0.18s, box-shadow 0.18s; } .card-noticia:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(23, 39, 42, 0.14); } .card-noticia a.card-enlace { color: inherit; display: flex; flex-direction: column; height: 100%; } .card-noticia a.card-enlace:hover { text-decoration: none; } .card-imagen { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: color-mix(in srgb, var(--color-radio) 12%, var(--blanco)); } .card-imagen-placeholder { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--color-radio) 16%, var(--blanco)), color-mix(in srgb, var(--color-radio) 34%, var(--blanco))); } .card-imagen-placeholder img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; opacity: 0.9; } .card-cuerpo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; } .card-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.74rem; font-weight: 700; } .card-categoria { color: var(--rojo-vivo); text-transform: uppercase; letter-spacing: 0.1em; } .card-fecha { color: var(--tinta-suave); font-weight: 500; } .card-titulo { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; margin: 0; } .card-bajada { font-size: 0.9rem; color: var(--tinta-suave); margin: 0; } .sin-noticias { background: var(--blanco); border-radius: var(--radio-borde); padding: 2.5rem; text-align: center; color: var(--tinta-suave); box-shadow: var(--sombra-card); } /* ---------- Página de noticia individual ---------- */ .articulo { background: var(--blanco); border-radius: var(--radio-borde); box-shadow: var(--sombra-card); margin: 2.2rem auto 3rem; max-width: 780px; overflow: hidden; } .articulo-imagen { width: 100%; max-height: 440px; object-fit: cover; } .articulo-contenido { padding: 1.8rem clamp(1.2rem, 4vw, 2.6rem) 2.4rem; } .articulo-titulo { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.18; margin: 0.5rem 0 0.7rem; } .articulo-bajada { font-size: 1.08rem; color: var(--tinta-suave); font-weight: 500; margin: 0 0 1.4rem; border-left: 4px solid var(--color-radio); padding-left: 0.9rem; } .articulo-cuerpo { font-size: 1.02rem; } .articulo-cuerpo p { margin: 0 0 1.1rem; } .volver { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; margin-top: 1.4rem; } /* ---------- Pie ---------- */ .pie { background: var(--tinta); color: rgba(255, 255, 255, 0.85); padding: 1.8rem 0; font-size: 0.86rem; } .pie-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pie .red-social { background: rgba(255, 255, 255, 0.1); color: var(--blanco); } .pie .red-social:hover { background: var(--color-radio); } /* ---------- Responsive ---------- */ @media (max-width: 640px) { .player-inner { flex-direction: column; text-align: center; gap: 1.2rem; } .player-logo { width: 118px; height: 118px; } .player-controles { justify-content: center; } .cabecera-redes { display: none; } .hero-player { padding: 2rem 0 2.3rem; } .cabecera-slogan { display: none; } .clima { padding: 0.3rem 0.6rem; font-size: 0.85rem; } .clima-lugar { display: none; } }