/* ============================================================
   ESTILOS GLOBALES - TECNICOLOR FM (Versión Unificada Final)
   Fuentes: Open Sans (Base), Fraunces (Branding), Red Hat (UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Red+Hat+Display:wght@400;500;700;900&display=swap');

/* --- VARIABLES Y RESET --- */
:root {
  --color-amarillo: #FFD700;
  --color-rosa: #FF69B4;
  --color-naranja: #FF8C00;
  --color-verde: #2ecc71;
  --color-azul: #2980b9;
  --color-violeta: #8e44ad;
  --color-blanco: #FFFFFF;
  --color-rojo-live: #ff4d4d;

  --bg-principal: #000000;
  --bg-tarjeta: #1e1e1e;
  --texto-principal: var(--color-blanco);
  --texto-secundario: rgba(255,255,255,0.85);
  --radio-borde: 14px;
  --transicion-suave: 0.35s ease;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: var(--bg-principal);
  color: var(--texto-principal);
  line-height: 1.6;
}

/* --- CLASES DE COLORES DE MARCA (REUTILIZABLES) --- */
/* Fondos */
.bg-rosa     { background-color: var(--color-rosa); color: #000; }
.bg-naranja  { background-color: var(--color-naranja); color: #000; }
.bg-amarillo { background-color: var(--color-amarillo); color: #000; }
.bg-verde    { background-color: var(--color-verde); color: #000; }
.bg-azul     { background-color: var(--color-azul); color: #fff; }
.bg-violeta  { background-color: var(--color-violeta); color: #fff; }
.bg-blanco   { background-color: var(--color-blanco); color: #000; }

/* Textos */
.text-rosa     { color: var(--color-rosa); }
.text-naranja  { color: var(--color-naranja); }
.text-amarillo { color: var(--color-amarillo); }
.text-verde    { color: var(--color-verde); }
.text-azul     { color: var(--color-azul); }
.text-violeta  { color: var(--color-violeta); }
.text-blanco   { color: var(--color-blanco); }

/* --- TIPOGRAFÍA --- */
h1, h2, h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.titulo-principal {
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 40px;
}

/* --- HEADER Y NAVEGACIÓN --- */
.site-header { border-bottom: 1px solid rgba(255,255,255,0.1); }

.header-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.brand-logo { max-width: 220px; height: auto; display: block; }

.main-nav { font-family: 'Red Hat Display', sans-serif; }

.nav-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.nav-list a { 
  font-weight: 500; 
  color: var(--color-blanco); 
  transition: color var(--transicion-suave);
}

.nav-list a:hover { color: var(--color-rosa); }

/* --- PROGRAMACIÓN Y TIMELINE --- */
.programacion { max-width: 850px; margin: 0 auto; padding: 40px 20px; }

.filtros { display: flex; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }

.filtros select, .filtros input {
  padding: 12px; border-radius: 8px; border: 1px solid #333;
  background: var(--bg-tarjeta); color: #fff; flex: 1;
}

.programa { display: flex; position: relative; padding-bottom: 35px; }

.contenedor-indicador { display: flex; flex-direction: column; align-items: center; margin-right: 25px; width: 40px; }

.linea-timeline { width: 2px; background-color: #333; height: 100%; position: absolute; top: 15px; z-index: 1; }

.indicador-forma { font-size: 22px; z-index: 2; background: var(--bg-principal); padding: 5px 0; }

.estado-live .indicador-forma { color: var(--color-rojo-live); animation: parpadeo 1.5s infinite; }

.estado-live strong { color: var(--color-rojo-live); font-family: 'Fraunces', serif; font-size: 1.4rem; }

.progreso-container { 
  width: 100%; height: 4px; background: #252525; border-radius: 10px; 
  margin: 10px 0; overflow: hidden; display: none; 
}

.estado-live .progreso-container { display: block; }

.barra-progreso { height: 100%; background: linear-gradient(90deg, #ff4d4d, #f06); transition: width 0.5s ease; }

/* --- CONÓCENOS (LOCUTORES) --- */
.locutores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.locutor-card { border-radius: 15px; overflow: hidden; transition: transform 0.3s ease; }

.locutor-card:hover { transform: translateY(-10px); }

.locutor-header { padding: 30px 20px; text-align: center; }

.locutor-header h3 { font-family: 'Fraunces', serif; color: #fff; font-size: 1.8rem; margin: 0; }

.locutor-body { background: rgba(0, 0, 0, 0.2); padding: 25px; text-align: center; color: #fff; }

/* Clases específicas para Conócenos vinculadas a las variables */
.color-violeta  { background-color: var(--color-violeta); color: #fff; }
.color-azul     { background-color: var(--color-azul); color: #fff; }
.color-verde    { background-color: var(--color-verde); color: #000; }
.color-rosa     { background-color: var(--color-rosa); color: #000; }
.color-naranja  { background-color: var(--color-naranja); color: #000; }
.color-amarillo { background-color: var(--color-amarillo); color: #000; }

/* --- CONTACTO (VERSION SEO) --- */
.contacto-principal-card {
    background: var(--bg-tarjeta);
    padding: 80px 40px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #333;
    margin-bottom: 50px;
}

.conocimiento-base {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5rem;
    line-height: 2;
    color: var(--color-blanco);
}

.social-links-grid { display: flex; justify-content: center; gap: 40px; font-size: 3rem; padding-top: 20px; }

.social-links-grid a { color: #fff; transition: color 0.3s; }

.social-links-grid a:hover { color: var(--color-rosa); }

/* --- FOOTER --- */
.footer-principal {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 40px 0;
    border-top: 1px solid #333;
    text-align: center;
}

/* --- ANIMACIONES Y ACCESIBILIDAD --- */
@keyframes parpadeo {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .header-grid { grid-template-columns: 1fr; text-align: center; }
  .nav-list { flex-direction: column; gap: 1rem; margin-top: 1rem; display: none; }
  .nav-list.activo { display: flex; }
  .conocimiento-base { font-size: 1.2rem; }
  .social-links-grid { font-size: 2rem; gap: 20px; }
}