/*
Theme Name: GeneratePress Child - MultyRadios Ecuador
Description: Tema accesible con los colores de la bandera de Ecuador
Template: generatepress
Version: 2.0
*/

/* =========================
 * PALETA DE COLORES ECUADOR (WCAG AA/AAA)
 * Basado en: https://es.wikipedia.org/wiki/Bandera_de_Ecuador
 * Colores oficiales: #FFD100 (Amarillo), #0072CE (Azul), #EF3340 (Rojo)[citation:8]
 * ========================= */
:root {
    /* Colores principales - Bandera de Ecuador */
    --ecuador-amarillo: #FFD100;     /* Pantone 109 C */
    --ecuador-azul: #0072CE;         /* Pantone 285 C */
    --ecuador-rojo: #EF3340;         /* Pantone 032 C */
    
    /* Variantes accesibles con mejor contraste */
    --amarillo-oscuro: #D4A900;      /* Para texto sobre fondo claro */
    --azul-oscuro: #0056A3;          /* Para enlaces y botones */
    --rojo-oscuro: #CC2A35;          /* Para alertas y énfasis */
    
    /* Colores neutros para fondos y texto */
    --blanco: #FFFFFF;
    --gris-claro: #F8F9FA;
    --gris-medio: #6C757D;
    --gris-oscuro: #343A40;
    --negro: #212529;
    
    /* Colores de estado para interactividad */
    --focus-outline: 3px solid var(--ecuador-azul);
    --focus-shadow: 0 0 0 4px rgba(0, 114, 206, 0.25);
    
    /* Espaciado consistente */
    --espacio-xs: 0.5rem;
    --espacio-sm: 1rem;
    --espacio-md: 1.5rem;
    --espacio-lg: 2rem;
    --espacio-xl: 3rem;
    
    /* Bordes */
    --radio-borde: 0.5rem;
    --radio-borde-lg: 1rem;
    
    /* Sombras */
    --sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.1);
    --sombra-media: 0 10px 15px rgba(0, 0, 0, 0.1);
    --sombra-fuerte: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* =========================
 * RESET Y NORMALIZACIÓN ACCESIBLE
 * ========================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: var(--gris-oscuro);
    background-color: var(--blanco);
}

/* =========================
 * TIPOGRAFÍA ACCESIBLE
 * ========================= */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--espacio-md);
    color: var(--gris-oscuro);
}

h1 {
    font-size: 2.5rem;
    color: var(--ecuador-azul);
}

h2 {
    font-size: 2rem;
    border-bottom: 3px solid var(--ecuador-amarillo);
    padding-bottom: var(--espacio-xs);
}

h3 {
    font-size: 1.5rem;
    color: var(--ecuador-rojo);
}

p {
    margin-bottom: var(--espacio-md);
}

/* Contraste mínimo WCAG AA: 4.5:1 para texto normal[citation:1][citation:3] */
.texto-contraste {
    color: var(--gris-oscuro);
    background-color: var(--blanco);
}

/* =========================
 * ENLACES ACCESIBLES
 * ========================= */
a {
    color: var(--azul-oscuro);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}

a:hover, a:focus {
    color: var(--ecuador-rojo);
    text-decoration-thickness: 3px;
}

a:focus {
    outline: var(--focus-outline);
    outline-offset: 3px;
    box-shadow: var(--focus-shadow);
}

/* Enlaces que son botones */
a[role="button"] {
    display: inline-block;
    text-decoration: none;
    padding: var(--espacio-sm) var(--espacio-lg);
    border-radius: var(--radio-borde);
    font-weight: bold;
    text-align: center;
}

/* =========================
 * BOTONES ACCESIBLES (VISUAL Y LECTOR PANTALLA)
 * ========================= */
button, .btn, input[type="submit"], input[type="button"] {
    /* SEMÁNTICA: Usar <button> en lugar de <div> o <a> con JavaScript[citation:5][citation:9] */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-xs);
    padding: var(--espacio-sm) var(--espacio-lg);
    border: none;
    border-radius: var(--radio-borde);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px; /* Tamaño mínimo para tactil[citation:7] */
    min-width: 44px;
}

/* Estados de botón VISIBLES */
button:hover, .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

button:focus, .btn:focus {
    outline: var(--focus-outline);
    outline-offset: 3px;
    box-shadow: var(--focus-shadow);
}

button:active, .btn:active {
    transform: translateY(0);
}

/* Estilos específicos por color */
.btn-primary {
    background: linear-gradient(135deg, var(--ecuador-azul) 0%, var(--azul-oscuro) 100%);
    color: var(--blanco);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--ecuador-amarillo) 0%, var(--amarillo-oscuro) 100%);
    color: var(--negro);
}

.btn-danger {
    background: linear-gradient(135deg, var(--ecuador-rojo) 0%, var(--rojo-oscuro) 100%);
    color: var(--blanco);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--ecuador-azul);
    color: var(--ecuador-azul);
}

.btn-outline:hover {
    background-color: var(--ecuador-azul);
    color: var(--blanco);
}

/* Estados para lectores de pantalla (ARIA) */
button[aria-pressed="true"] {
    background-color: var(--ecuador-rojo);
    color: var(--blanco);
}

button[aria-expanded="true"]::after {
    content: " (expandido)";
    /* Texto oculto visualmente pero leído por lectores */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================
 * FORMULARIOS ACCESIBLES
 * ========================= */
label {
    display: block;
    margin-bottom: var(--espacio-xs);
    font-weight: 600;
    color: var(--gris-oscuro);
}

input, textarea, select {
    width: 100%;
    padding: var(--espacio-sm);
    border: 2px solid var(--gris-medio);
    border-radius: var(--radio-borde);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--ecuador-azul);
    outline: var(--focus-outline);
    box-shadow: var(--focus-shadow);
}

/* Agrupar label + input para lectores de pantalla[citation:3] */
.form-group {
    margin-bottom: var(--espacio-md);
}

/* Mensajes de error/éxito */
.form-error {
    color: var(--ecuador-rojo);
    font-size: 0.875rem;
    margin-top: var(--espacio-xs);
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
}

.form-success {
    color: var(--ecuador-azul);
    font-size: 0.875rem;
    margin-top: var(--espacio-xs);
}

/* =========================
 * TARJETAS Y CONTENEDORES
 * ========================= */
.card {
    background: var(--blanco);
    border-radius: var(--radio-borde-lg);
    box-shadow: var(--sombra-suave);
    padding: var(--espacio-lg);
    margin-bottom: var(--espacio-lg);
    border: 1px solid var(--gris-claro);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-fuerte);
}

.card-header {
    background: linear-gradient(135deg, var(--ecuador-azul) 0%, var(--azul-oscuro) 100%);
    color: var(--blanco);
    padding: var(--espacio-md);
    border-radius: var(--radio-borde) var(--radio-borde) 0 0;
    margin: -var(--espacio-lg) -var(--espacio-lg) var(--espacio-lg);
}

/* =========================
 * COMPONENTES DE RADIO (Actualizados para accesibilidad)
 * ========================= */
.radio-player {
    background: var(--gris-claro);
    border-radius: var(--radio-borde);
    padding: var(--espacio-md);
    margin: var(--espacio-md) 0;
}

.player-controls {
    display: flex;
    gap: var(--espacio-xs);
    align-items: center;
    flex-wrap: wrap;
}

.volume-controls {
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
    margin-top: var(--espacio-sm);
}

/* Range input accesible */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: var(--gris-medio);
    border-radius: 4px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: var(--ecuador-azul);
    border-radius: 50%;
    border: 3px solid var(--blanco);
    cursor: pointer;
    box-shadow: var(--sombra-suave);
}

input[type="range"]:focus::-webkit-slider-thumb {
    border-color: var(--ecuador-amarillo);
    box-shadow: var(--focus-shadow);
}

/* =========================
 * NAVEGACIÓN Y HEADER
 * ========================= */
.main-navigation ul {
    display: flex;
    list-style: none;
    gap: var(--espacio-md);
    flex-wrap: wrap;
}

.main-navigation a {
    padding: var(--espacio-sm) var(--espacio-md);
    border-radius: var(--radio-borde);
    text-decoration: none;
    font-weight: 600;
}

.main-navigation a:hover,
.main-navigation a:focus {
    background-color: var(--ecuador-amarillo);
    color: var(--negro);
}

/* Navegación por teclado: skip link[citation:7] */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ecuador-azul);
    color: var(--blanco);
    padding: var(--espacio-sm);
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    top: 0;
}

/* =========================
 * UTILITARIOS DE ACCESIBILIDAD
 * ========================= */
/* Ocultar contenido visualmente pero mantenerlo para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Solo para lectores de pantalla */
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Alto contraste para texto */
.high-contrast {
    color: var(--negro) !important;
    background-color: var(--blanco) !important;
    border-color: var(--negro) !important;
}

/* Modo de alto contraste para el sitio */
body.high-contrast-mode {
    background-color: var(--negro) !important;
    color: var(--blanco) !important;
}

body.high-contrast-mode a {
    color: #FFFF00 !important; /* Amarillo brillante */
}

/* =========================
 * RESPONSIVE Y MEDIA QUERIES
 * ========================= */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    .player-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: var(--espacio-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================
 * ESTILOS ESPECÍFICOS PARA BANDERA ECUADOR
 * ========================= */
/* Banner con colores de bandera */
.ecuador-flag-banner {
    height: 6px;
    background: linear-gradient(90deg, 
        var(--ecuador-amarillo) 0%, 
        var(--ecuador-amarillo) 33%, 
        var(--ecuador-azul) 33%, 
        var(--ecuador-azul) 66%, 
        var(--ecuador-rojo) 66%, 
        var(--ecuador-rojo) 100%
    );
    width: 100%;
}

/* Gradientes patrios */
.gradient-ecuador {
    background: linear-gradient(135deg, 
        var(--ecuador-amarillo) 0%, 
        var(--ecuador-azul) 50%, 
        var(--ecuador-rojo) 100%
    );
}

/* Badges especiales Ecuador */
.badge-ecuador {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-xs);
    padding: var(--espacio-xs) var(--espacio-sm);
    background: linear-gradient(90deg, 
        var(--ecuador-amarillo) 0%, 
        var(--ecuador-azul) 50%, 
        var(--ecuador-rojo) 100%
    );
    color: var(--blanco);
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.875rem;
}
/* =========================
 * BOTONES DE RADIO VISIBLES Y ACCESIBLES
 * ========================= */

/* Botón principal "ESCUCHAR AHORA" - LA MÁS QUERIDA */
#player-querida button[onclick*="togglePlayPause"] {
    background: linear-gradient(90deg, #d32f2f 0%, #b71c1c 100%) !important;
    color: white !important;
    border: 3px solid #ffeb3b !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.4) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

#player-querida button[onclick*="togglePlayPause"]:hover {
    background: linear-gradient(90deg, #b71c1c 0%, #8b0000 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(211, 47, 47, 0.6) !important;
    border-color: #fff176 !important;
}

#player-querida button[onclick*="togglePlayPause"]:focus {
    outline: 4px solid #1976d2 !important;
    outline-offset: 4px !important;
    border-color: #64b5f6 !important;
}

/* Estado de reproducción (cuando está sonando) */
#player-querida button[onclick*="togglePlayPause"][aria-pressed="true"] {
    background: linear-gradient(90deg, #388e3c 0%, #2e7d32 100%) !important;
    border-color: #a5d6a7 !important;
    box-shadow: 0 4px 15px rgba(56, 142, 60, 0.4) !important;
}

#player-querida button[onclick*="togglePlayPause"][aria-pressed="true"]:hover {
    background: linear-gradient(90deg, #2e7d32 0%, #1b5e20 100%) !important;
}

/* Botón "ESCUCHAR AHORA" - QUITEÑA STEREO */
#player-quitena button[onclick*="togglePlayPause"] {
    background: linear-gradient(90deg, #ff8f00 0%, #ef6c00 100%) !important;
    color: #000 !important;
    border: 3px solid #ffd600 !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(255, 143, 0, 0.4) !important;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

#player-quitena button[onclick*="togglePlayPause"]:hover {
    background: linear-gradient(90deg, #ef6c00 0%, #e65100 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(255, 143, 0, 0.6) !important;
    border-color: #ffea00 !important;
}

#player-quitena button[onclick*="togglePlayPause"]:focus {
    outline: 4px solid #1976d2 !important;
    outline-offset: 4px !important;
    border-color: #64b5f6 !important;
}

/* Estado de reproducción */
#player-quitena button[onclick*="togglePlayPause"][aria-pressed="true"] {
    background: linear-gradient(90deg, #00897b 0%, #00695c 100%) !important;
    color: white !important;
    border-color: #80cbc4 !important;
    box-shadow: 0 4px 15px rgba(0, 137, 123, 0.4) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* =========================
 * BOTONES DE DETENER VISIBLES
 * ========================= */

/* Botón "Detener" - Ambos reproductores */
#player-querida button[onclick*="stopRadio"],
#player-quitena button[onclick*="stopRadio"] {
    background: linear-gradient(90deg, #546e7a 0%, #37474f 100%) !important;
    color: white !important;
    border: 3px solid #b0bec5 !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(84, 110, 122, 0.4) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#player-querida button[onclick*="stopRadio"]:hover,
#player-quitena button[onclick*="stopRadio"]:hover {
    background: linear-gradient(90deg, #37474f 0%, #263238 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(84, 110, 122, 0.6) !important;
    border-color: #cfd8dc !important;
}

#player-querida button[onclick*="stopRadio"]:focus,
#player-quitena button[onclick*="stopRadio"]:focus {
    outline: 4px solid #1976d2 !important;
    outline-offset: 4px !important;
    border-color: #64b5f6 !important;
}

/* Iconos dentro de los botones */
#player-querida button i,
#player-quitena button i {
    font-size: 1.3rem !important;
    margin-right: 8px !important;
}

/* Contenedor de botones para mejor distribución */
#player-querida > div:last-child,
#player-quitena > div:last-child {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
}

/* =========================
 * MEJORAS VISUALES ADICIONALES
 * ========================= */

/* Efecto de pulso cuando está reproduciendo */
@keyframes pulse-playing {
    0% { box-shadow: 0 4px 15px rgba(56, 142, 60, 0.4); }
    50% { box-shadow: 0 4px 25px rgba(56, 142, 60, 0.8); }
    100% { box-shadow: 0 4px 15px rgba(56, 142, 60, 0.4); }
}

.playing {
    animation: pulse-playing 2s infinite !important;
}

/* Indicador visual de estado */
.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    background: #4caf50;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mejorar contraste del texto en botones */
#play-text-querida,
#play-text-quitena {
    font-weight: 900 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Para Quiteña Stereo (texto negro) */
#player-quitena button[onclick*="togglePlayPause"] span {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7) !important;
}

/* =========================
 * RESPONSIVE PARA BOTONES
 * ========================= */
@media (max-width: 768px) {
    #player-querida button[onclick*="togglePlayPause"],
    #player-quitena button[onclick*="togglePlayPause"] {
        padding: 12px 20px !important;
        font-size: 1rem !important;
    }
    
    #player-querida button[onclick*="stopRadio"],
    #player-quitena button[onclick*="stopRadio"] {
        width: 50px !important;
        height: 50px !important;
    }
    
    #player-querida > div:last-child,
    #player-quitena > div:last-child {
        gap: 10px !important;
    }
}

/* =========================
 * ESTILOS PARA MODO ALTO CONTRASTE
 * ========================= */
@media (prefers-contrast: high) {
    #player-querida button[onclick*="togglePlayPause"],
    #player-quitena button[onclick*="togglePlayPause"] {
        border: 4px solid white !important;
        color: white !important;
        background: black !important;
    }
    
    #player-querida button[onclick*="stopRadio"],
    #player-quitena button[onclick*="stopRadio"] {
        border: 4px solid white !important;
        color: white !important;
        background: black !important;
    }
}

/* =========================
 * MEJORAR ICONOS PARA VISIBILIDAD
 * ========================= */
#player-querida .fa-play,
#player-querida .fa-pause,
#player-querida .fa-stop,
#player-quitena .fa-play,
#player-quitena .fa-pause,
#player-quitena .fa-stop {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important;
}

/* Resplandor para iconos en hover */
#player-querida button:hover .fa-play,
#player-querida button:hover .fa-pause,
#player-querida button:hover .fa-stop,
#player-quitena button:hover .fa-play,
#player-quitena button:hover .fa-pause,
#player-quitena button:hover .fa-stop {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) !important;
}
/* =========================
 * MEJORAS DE ACCESIBILIDAD GLOBAL
 * SIN CAMBIAR DISEÑO EXISTENTE
 * ========================= */

/* 1. MEJORAR FOCO PARA TECLADO */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus {
    outline: 3px solid #0072CE !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(0, 114, 206, 0.3) !important;
}

/* 2. MEJORAR VISIBILIDAD DE ENLACES */
a:hover,
a:focus {
    text-decoration: underline !important;
}

/* 3. CONTRASTE MEJORADO PARA TEXTO */
body.high-contrast-mode {
    background-color: #000 !important;
    color: #FFF !important;
}

body.high-contrast-mode * {
    background-color: #000 !important;
    color: #FFF !important;
    border-color: #FFF !important;
}

body.high-contrast-mode a {
    color: #FFFF00 !important;
    text-decoration: underline !important;
}

body.high-contrast-mode button,
body.high-contrast-mode .btn {
    background-color: #000 !important;
    color: #FFF !important;
    border: 2px solid #FFF !important;
}

/* 4. BOTÓN DE ALTO CONTRASTE */
.contrast-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background: #0072CE;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.contrast-toggle:hover {
    background: #005a9c;
}

/* 5. SKIP LINK */
.skip-link {
    position: absolute;
    top: -40px;
    left: 10px;
    background: #0072CE;
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    z-index: 10000;
}

.skip-link:focus {
    top: 10px;
}

/* 6. CLASE PARA LECTORES DE PANTALLA */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* 7. MEJORAR INPUTS PARA ACCESIBILIDAD */
input[type="range"]:focus::-webkit-slider-thumb {
    border-color: #0072CE !important;
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.3) !important;
}

/* 8. MEJORAR TAMAÑOS MÍNIMOS PARA TACTO */
button,
.btn,
a[role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* 9. ANIMACIONES REDUCIDAS (para sensibilidad) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 10. MEJORAR LEGIBILIDAD */
@media (prefers-contrast: high) {
    body {
        background-color: #000 !important;
        color: #FFF !important;
    }
    
    a {
        color: #FFFF00 !important;
        text-decoration: underline !important;
    }
    
    button,
    .btn {
        border: 2px solid #FFF !important;
    }
}

/* 11. ZOOM SEGURO */
html {
    text-size-adjust: 100%;
}

/* 12. MEJORAR CONTRASTE EN TARJETAS */
.main-radio-card,
.tarjeta,
.card {
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* 13. MEJORAR VISIBILIDAD DE ESTADOS */
[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px #0072CE !important;
}

/* 14. MEJORAR ICONOS PARA ACCESIBILIDAD */
.icon-with-label::after {
    content: attr(aria-label);
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 15. MEJORAR FOOTER ACCESIBLE */
.site-footer a:focus {
    outline: 2px solid #FFD100 !important;
    outline-offset: 2px !important;
}

/* 16. RESPONSIVE PARA ACCESIBILIDAD */
@media (max-width: 768px) {
    .contrast-toggle {
        top: auto;
        bottom: 10px;
        right: 10px;
    }
    
    /* Asegurar que el texto sea legible en móviles */
    body {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}

/* 17. MEJORAR TABLAS (si las hay) */
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

/* 18. MEJORAR MENÚS DESPLEGABLES */
[aria-expanded="true"] {
    background-color: #f0f0f0 !important;
}

/* 19. INDICADORES DE ESTADO */
[aria-busy="true"]::after {
    content: " (cargando)";
    font-size: 0.8em;
}

[aria-disabled="true"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* 20. MEJORAR SCROLL SUAVE PARA TECLADO */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
/* ==================== */
/* ACCESIBILIDAD BÁSICA */
/* ==================== */

/* Texto para lectores de pantalla */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Enlace para saltar al contenido */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 999999;
}

.skip-link:focus {
    top: 0;
}

/* Enfoque visible para todos los elementos */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #0c4a6e;
    outline-offset: 2px;
}

/* ==================== */
/* HEADER BÁSICO */
/* ==================== */

.site-header {
    background: #fff;
    padding: 20px 0;
    position: relative;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
.site-logo a {
    text-decoration: none;
    color: #333;
    font-size: 1.5rem;
    font-weight: bold;
}

.site-logo .custom-logo {
    max-height: 60px;
    width: auto;
}

/* Menú principal */
.main-navigation {
    display: flex;
    align-items: center;
}

.menu-principal {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.menu-principal a {
    text-decoration: none;
    color: #333;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

.menu-principal a:hover,
.menu-principal a:focus {
    color: #0c4a6e;
}

/* Botón menú móvil (oculto en desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    position: relative;
    z-index: 100;
}

.menu-toggle .hamburger {
    display: block;
    width: 24px;
    height: 18px;
    position: relative;
}

.menu-toggle .hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #333;
    border-radius: 2px;
    transition: 0.3s ease;
}

.menu-toggle .hamburger span:nth-child(1) {
    top: 0;
}

.menu-toggle .hamburger span:nth-child(2) {
    top: 8px;
}

.menu-toggle .hamburger span:nth-child(3) {
    top: 16px;
}

/* Menú móvil activo */
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
    top: 8px;
}

/* ==================== */
/* RESPONSIVE */
/* ==================== */

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .menu-principal {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        display: none;
        z-index: 99;
    }
    
    .menu-principal.active {
        display: flex;
    }
    
    .menu-principal a {
        padding: 10px 15px;
        border-bottom: 1px solid #eee;
    }
    
    .menu-principal a:last-child {
        border-bottom: none;
    }
}

/* ==================== */
/* ALTO CONTRASTE */
/* ==================== */

@media (prefers-contrast: high) {
    .site-header {
        border-bottom: 2px solid #000;
    }
    
    .menu-toggle {
        border: 2px solid #000;
    }
    
    .menu-principal a {
        border: 1px solid #000;
    }
}

/* ===== Ajustes del frontend PHP independiente ===== */
.header-container { display:flex; justify-content:space-between; align-items:center; }
.site-main { width:100%; margin:0; padding:0; }
.contenido-inicio { width:100%; }
.global-audio-shell { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.multy-footer { background:#0c4a6e; color:#fff; padding:28px 20px; }
.multy-footer .footer-inner { max-width:1200px; margin:0 auto; text-align:center; }
.multy-footer a { color:#fcd116; margin:0 8px; }
.main-radio-card:hover { transform:translateY(-5px); }
.radio-volume-controls input[type="range"] { width:100%; }
@media (max-width: 1000px) { .header-container { flex-direction:column; gap:16px; } .menu-principal { justify-content:center; flex-wrap:wrap; } }


/* =========================================================
   BLOQUE 5 - EMISORAS Y FICHAS, BASADO EN WORDPRESS ACTUAL
   ========================================================= */
.ecuador-stripe {height:6px;background:linear-gradient(90deg,#fcd116 0%,#fcd116 33%,#0033a0 33%,#0033a0 66%,#ed2939 66%,#ed2939 100%)}
.emisoras-page {background:linear-gradient(135deg,#0c4a6e 0%,#1e3a8a 100%);min-height:100vh;color:#fff}
.emisoras-hero {padding:55px 0 70px;position:relative;overflow:hidden}
.emisoras-title-block {text-align:center;max-width:780px;margin:0 auto 45px}
.emisoras-kicker {font-size:1.1rem;font-weight:700;color:#fcd116;margin:0 0 8px}
.emisoras-title-block h1 {font-size:3.3rem;line-height:1.05;margin:0 0 14px;color:#fff}
.emisoras-title-block>p:last-child {font-size:1.15rem;line-height:1.7;opacity:.92}
.directory-radio-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;align-items:start}
.directory-radio-card {color:#111;box-shadow:0 20px 40px rgba(0,0,0,.24)}
.directory-radio-card__head {padding:25px;text-align:center;position:relative;color:#fff}
.directory-radio-card__badge {position:absolute;top:15px;right:15px;background:rgba(255,255,255,.2);padding:5px 14px;border-radius:20px;font-size:.82rem;font-weight:700}
.directory-radio-card__logo {width:120px;height:120px;margin:0 auto 15px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;border:5px solid rgba(255,255,255,.3);overflow:hidden}
.directory-radio-card__logo img {width:100%;height:100%;object-fit:contain;padding:10px}
.directory-radio-card__head h2 {color:#fff;margin:0;font-size:1.8rem}
.directory-radio-card__head .slogan-box {color:rgba(255,255,255,.96);margin:10px 0 0;font-size:1rem;font-weight:700;letter-spacing:.3px;padding:8px 16px;background:rgba(0,0,0,.25);border-radius:15px;display:inline-block}
.directory-radio-card__body {padding:25px;background:#fff}
.directory-radio-card__stats {display:flex;justify-content:space-between;gap:10px;margin-bottom:20px;text-align:center}
.directory-radio-card__stats div {display:grid;gap:2px;min-width:70px}
.directory-radio-card__stats strong {font-size:1.65rem;color:var(--radio-accent)}
.directory-radio-card__stats span {font-size:.88rem;color:#6b7280}
.directory-radio-card__description {color:#4b5563;line-height:1.65;min-height:78px}
.directory-radio-card__meta {background:#f8fafc;padding:12px 14px;border-radius:10px;margin:18px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.9rem;color:#475569}
.directory-radio-card__buttons {display:grid;grid-template-columns:1fr auto;gap:10px}
.radio-play-button,.radio-stop-button {border:0;border-radius:10px;padding:13px 16px;font:inherit;font-weight:800;cursor:pointer}
.radio-play-button {color:#fff}.radio-stop-button {background:#e2e8f0;color:#334155}
.radio-volume-controls {margin:14px 0}.radio-volume-controls label {display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;font-weight:700}.radio-volume-controls input {width:100%}
.radio-inline-status {background:#f1f5f9;color:#475569;padding:9px 12px;border-radius:8px;margin:12px 0;font-size:.9rem}
.directory-radio-card__details {display:block;margin-top:14px;text-align:center;padding:11px;border:2px solid var(--radio-accent);border-radius:10px;color:var(--radio-accent);font-weight:800;text-decoration:none}
.directory-radio-card__details:hover,.directory-radio-card__details:focus {background:var(--radio-accent);color:#fff}
.emisoras-info {margin:55px auto 0;max-width:900px;text-align:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:30px;border-radius:20px}
.emisoras-info h2 {color:#fcd116;margin-top:0}.emisoras-info__stats {display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:25px}.emisoras-info__stats div {display:grid;gap:4px}.emisoras-info__stats strong {font-size:2rem;color:#fff}.emisoras-info__stats span {opacity:.9}
.empty-radios {background:#fff;color:#111;padding:30px;border-radius:18px;text-align:center}

.radio-detail-page {min-height:100vh;background:var(--detail-page);color:#1f2937}
.radio-detail-hero {background:var(--detail-hero);color:var(--detail-text);padding:74px 0 42px;position:relative;overflow:hidden}
.radio-detail-hero__grid {display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.radio-detail-logo {width:200px;height:200px;background:#fff;border-radius:20px;display:flex;align-items:center;justify-content:center;border:5px solid rgba(255,255,255,.3);box-shadow:0 20px 40px rgba(0,0,0,.3);overflow:hidden}
.radio-detail-logo img {width:100%;height:100%;object-fit:contain;padding:15px}
.radio-detail-hero__content h1 {font-size:3.5rem;line-height:1.05;margin:0 0 10px;color:var(--detail-text);text-shadow:2px 2px 4px rgba(0,0,0,.18)}
.radio-detail-hero__content>p {font-size:1.2rem;line-height:1.65;max-width:700px}
.radio-detail-hero__meta {display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.radio-detail-slogan {background:rgba(255,255,255,.3);padding:5px 15px;border-radius:20px;font-weight:800}
.radio-detail-actions {display:flex;gap:15px;margin-top:28px;flex-wrap:wrap}
.detail-play-button,.detail-share-button,.detail-home-button {border-radius:50px;padding:14px 25px;font-weight:800;font-size:1rem;display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer}
.detail-play-button {background:#fff;color:var(--detail-accent);border:0;box-shadow:0 5px 15px rgba(0,0,0,.2)}
.detail-share-button {background:rgba(255,255,255,.2);color:var(--detail-text);border:2px solid currentColor}.detail-home-button {background:rgba(255,255,255,.1);color:var(--detail-text);border:1px solid rgba(255,255,255,.4)}
.radio-detail-content {padding:40px 0 70px}
.radio-detail-columns {display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:40px;align-items:start}
.detail-card {background:#fff;padding:28px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.1);margin-bottom:32px}
.detail-card h2 {color:var(--detail-accent);font-size:1.7rem;margin-top:0}
.detail-player-card {border:3px solid var(--detail-accent)}
.detail-mini-logo {width:50px;height:50px;display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;margin-right:8px;overflow:hidden;border-radius:10px;background:#fff;border:2px solid var(--detail-accent)}
.detail-mini-logo img {width:100%;height:100%;object-fit:contain;padding:4px}
.detail-now-playing {background:#f8fafc;padding:15px;border-radius:10px;margin:20px 0;color:#475569}.detail-now-playing i {color:var(--detail-accent);margin-right:8px}
.detail-player-actions {display:flex;gap:10px;flex-wrap:wrap}.detail-big-play,.detail-stop {border:0;border-radius:10px;padding:13px 20px;font-weight:800;cursor:pointer}.detail-big-play {background:var(--detail-accent);color:#fff}.detail-stop {background:#e2e8f0;color:#334155}
.detail-volume {display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-top:18px}.detail-volume input {width:100%}
.detail-feature-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:22px}.detail-feature-grid div {background:#f8fafc;border-radius:12px;padding:16px;display:grid;gap:4px}.detail-feature-grid i {font-size:1.5rem;color:var(--detail-accent)}.detail-feature-grid span {font-size:.9rem;color:#64748b}
.detail-text-link,.detail-website {font-weight:800;color:var(--detail-accent)}
.detail-info-list {margin:0}.detail-info-list div {border-bottom:1px solid #e5e7eb;padding:10px 0}.detail-info-list dt {font-weight:800;color:#475569}.detail-info-list dd {margin:3px 0 0}
.detail-socials {display:grid;gap:10px}.detail-socials a {display:block;padding:10px 12px;border-radius:10px;background:#f8fafc;color:#334155;text-decoration:none;font-weight:700}.detail-socials i {width:22px;color:var(--detail-accent)}
.radio-detail-page--missing {padding:60px 0}

@media (max-width:768px){
  .emisoras-title-block h1,.radio-detail-hero__content h1{font-size:2.45rem}
  .directory-radio-grid{grid-template-columns:1fr}
  .radio-detail-hero__grid,.radio-detail-columns{grid-template-columns:1fr;text-align:center}
  .radio-detail-logo{width:160px;height:160px;margin:0 auto}
  .radio-detail-hero__meta,.radio-detail-actions{justify-content:center}
  .detail-feature-grid{grid-template-columns:1fr 1fr;text-align:left}
  .detail-card{text-align:left}
  .emisoras-info__stats{grid-template-columns:1fr}
}
@media (max-width:480px){.detail-feature-grid{grid-template-columns:1fr}.directory-radio-card__buttons{grid-template-columns:1fr}.radio-detail-actions{display:grid}.detail-play-button,.detail-share-button,.detail-home-button{justify-content:center}}


/* =========================================================
   PROGRAMACION Y LOCUTORES - MIGRACION FIEL DESDE WORDPRESS
   ========================================================= */

.directory-page {
    background: linear-gradient(135deg, #0c4a6e 0%, #1e3a8a 100%);
    min-height: 100vh;
    color: #ffffff;
    padding-bottom: 4rem;
}

.directory-page .page-container {
    width: min(1200px, calc(100% - 2rem));
    margin: 0 auto;
}

.directory-hero {
    text-align: center;
    padding: 3rem 0 2rem;
}

.directory-hero h1 {
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 0.75rem;
}

.directory-hero p {
    max-width: 780px;
    margin: 0 auto;
    font-size: 1.1rem;
}

.back-home {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    margin-top: 1.25rem;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}

.stat-box {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 18px;
    padding: 1rem;
    text-align: center;
    backdrop-filter: blur(5px);
}

.stat-box strong {
    display: block;
    color: #fcd116;
    font-size: 1.8rem;
}

.filter-strip,
.day-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 1.5rem 0 2rem;
}

.filter-pill,
.day-tab {
    display: inline-block;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 999px;
    padding: 0.7rem 1rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    background: rgba(255,255,255,0.08);
}

.filter-pill.active,
.day-tab.active {
    background: linear-gradient(135deg, #ed2939 0%, #dc2626 100%);
    border-color: #ed2939;
    color: #ffffff;
}

.section-white-title {
    color: #ffffff;
    text-align: center;
    margin: 2rem 0 1rem;
}

.hosts-grid,
.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0 2rem;
}

.host-card,
.program-card {
    background: #ffffff;
    color: #1e293b;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    padding: 1.25rem;
}

.host-card h3,
.program-card h3 {
    color: #0c4a6e;
    margin-top: 0;
}

.host-card.featured-host {
    border: 3px solid #fcd116;
}

.host-badge,
.time-badge,
.program-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-weight: 700;
    background: #fcd116;
    color: #111827;
    margin-bottom: 0.75rem;
}

.host-meta,
.program-meta {
    display: grid;
    gap: 0.4rem;
    margin: 1rem 0;
}

.host-actions,
.program-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.host-actions a,
.program-actions a,
.program-actions button {
    border: 0;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.action-primary {
    background: #ed2939;
    color: #ffffff;
}

.action-secondary {
    background: #0033a0;
    color: #ffffff;
}

.now-playing {
    border: 3px solid #fcd116;
    position: relative;
}

.now-playing::before {
    content: "EN VIVO";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ed2939;
    color: #ffffff;
    padding: 4px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

.info-panel,
.recruitment-panel {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 20px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.info-grid,
.recruitment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.info-tile,
.recruitment-tile {
    background: #ffffff;
    color: #1e293b;
    border-radius: 16px;
    padding: 1rem;
}

.empty-directory {
    background: #ffffff;
    color: #1e293b;
    border-radius: 16px;
    padding: 1.25rem;
    text-align: center;
}

@media (max-width: 720px) {
    .hosts-grid,
    .program-grid {
        grid-template-columns: 1fr;
    }
}

.content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;padding-bottom:3rem}
.content-card,.content-detail{background:#fff;color:#1e293b;border-radius:20px;padding:1.5rem;box-shadow:0 20px 40px rgba(0,0,0,.18)}
.content-card h2,.content-detail h1{color:#0c4a6e}
.content-image,.content-detail-image{max-width:100%;height:auto;border-radius:14px}
.content-meta{color:#64748b;font-size:.92rem}
.content-link{display:inline-block;border-radius:999px;padding:.7rem 1rem;text-decoration:none;font-weight:700}
.content-detail{margin:2rem 0 4rem}.content-body{line-height:1.8;margin:1.5rem 0}
.content-card audio,.content-detail audio{width:100%;margin-top:1rem}
.contact-layout{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;padding-bottom:4rem}
.public-form{display:grid;gap:.65rem}.public-form input,.public-form select,.public-form textarea{width:100%;box-sizing:border-box;padding:.85rem;border:1px solid #94a3b8;border-radius:10px;font:inherit}
.public-submit{border:0;border-radius:999px;padding:.85rem 1.2rem;font-weight:700;cursor:pointer;width:max-content}
.public-notice{padding:1rem;border-radius:10px;margin-bottom:1rem}.public-notice.success{background:#dcfce7;color:#14532d}.public-notice.error{background:#fee2e2;color:#7f1d1d}
@media(max-width:760px){.contact-layout{grid-template-columns:1fr}}


/* Bloque 8: páginas informativas y legales */
.legal-page {
    max-width: 980px;
    margin: 28px auto 0;
    line-height: 1.75;
}

.legal-page .legal-content > h2:first-child {
    margin-top: 0;
}

.legal-page h2,
.legal-page h3 {
    color: #0c4a6e;
}

.legal-page ul,
.legal-page ol {
    padding-left: 1.5rem;
}

.legal-page .update-date {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #dbe4ee;
    font-weight: 700;
}

.footer-title {
    margin-top: 0;
    color: inherit;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin: 1rem 0;
}

.footer-nav a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.footer-nav a:focus-visible,
.footer-nav a:hover {
    text-decoration-thickness: .16em;
}

.footer-copyright {
    margin-bottom: 0;
}


/* Bloque 14: multimedia visible en el frontend */
.page-featured-media {
    margin: 0 auto 1.5rem;
    max-width: 980px;
}

.page-featured-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.home-editorial {
    padding: 4rem 0;
    background: #f8fafc;
}

.home-editorial-group {
    margin-top: 2.5rem;
}

.home-editorial-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.home-editorial-heading h3 {
    margin: 0;
    color: #0c4a6e;
}

.home-editorial .content-card audio {
    width: 100%;
}


/* =========================================================
 * BLOQUE 26 - RECONSTRUCCIÓN DESDE RESPALDO ORIGINAL REAL
 * ========================================================= */

.original-container {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;
}

.original-brand-block {
    text-align: center;
    padding: 20px 0;
    background: #ffffff;
}

.original-main-logo {
    max-width: 400px;
    max-height: 120px;
    width: auto;
    height: auto;
}

.original-tagline {
    color: #0c4a6e;
    margin: 10px 0 0;
    font-weight: bold;
    font-size: 1.1rem;
}

.original-hero-radios {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #0c4a6e 0%,
            #1e3a8a 100%
        );
}

.original-ecuador-stripe {
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background:
        linear-gradient(
            90deg,
            #fcd116 0%,
            #fcd116 33%,
            #0033a0 33%,
            #0033a0 66%,
            #ed2939 66%,
            #ed2939 100%
        );
}

.original-hero-heading {
    text-align: center;
    margin-bottom: 50px;
}

.original-hero-heading h2 {
    color: #ffffff;
    border: 0;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    margin-bottom: 15px;
    font-weight: 800;
}

.original-hero-heading h2 span {
    color: #fcd116;
}

.original-hero-heading p {
    font-size: 1.3rem;
    opacity: .9;
    max-width: 780px;
    margin: 0 auto;
}

.original-main-radios {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.original-main-radio-card {
    background: #ffffff;
    color: #1f2937;
    border-radius: 18px;
    padding: 26px;
    box-shadow:
        0 18px 36px rgba(0,0,0,.22);
    text-align: center;
}

.original-main-radio-card h3 {
    color: #0c4a6e;
    margin: 12px 0 8px;
}

.original-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fcd116;
    color: #111827;
    font-weight: 800;
    font-size: .8rem;
}

.original-radio-logo {
    display: block;
    width: 155px;
    height: 155px;
    object-fit: contain;
    margin: 14px auto;
    border-radius: 16px;
}

.original-radio-slogan {
    font-weight: 700;
    color: #475569;
}

.original-radio-status-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.original-radio-status-grid > div {
    padding: 10px;
    background: #f8fafc;
    border-radius: 10px;
}

.original-radio-description {
    text-align: left;
}

.original-radio-meta {
    display: grid;
    gap: 8px;
    text-align: left;
}

.original-radio-meta > div {
    display: flex;
    gap: 6px;
}

.original-radio-meta dd {
    margin: 0;
}

.original-player-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.original-play-button,
.original-stop-button {
    width: 100%;
    border-radius: 10px;
}

.original-play-button {
    background: #0c4a6e;
    color: #ffffff;
}

.original-stop-button {
    background: #e2e8f0;
    color: #111827;
}

.original-player-state {
    margin: 10px 0;
    color: #64748b;
    font-weight: 700;
}

.original-details-link {
    font-weight: 800;
}

.original-audience-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    font-weight: 800;
}

.original-global-stats,
.original-certification-stats,
.original-contact-benefits {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 35px;
}

.original-global-stats > div,
.original-contact-benefits > div {
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
}

.original-global-stats dt {
    font-size: 1.8rem;
    font-weight: 900;
}

.original-global-stats dd {
    margin: 4px 0 0;
}

.original-certification-section {
    padding: 55px 0;
    background: #ffffff;
}

.original-certification-section h2 {
    text-align: center;
}

.original-certification-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    align-items: center;
}

.original-tower {
    text-align: center;
    font-size: 8rem;
}

.original-certification-stats {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.original-certification-stats > div {
    padding: 20px;
    text-align: center;
    background: #f8fafc;
    border-radius: 12px;
}

.original-certification-stats dt {
    color: #0c4a6e;
    font-size: 2rem;
    font-weight: 900;
}

.original-about-section {
    padding: 60px 0;
    background: #f8fafc;
}

.original-section-kicker {
    color: #0c4a6e;
    font-weight: 900;
    letter-spacing: .08em;
}

.original-about-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 30px 0;
}

.original-about-grid article {
    padding: 22px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 8px 20px rgba(0,0,0,.08);
}

.original-about-grid article > div {
    font-size: 2rem;
}

.original-about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.original-about-actions a,
.original-directory-section button {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 10px;
    background: #0c4a6e;
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
}

.original-directory-section {
    padding: 60px 0;
}

.original-small-radio-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.original-small-radio-card {
    text-align: center;
    padding: 24px;
    border-radius: 14px;
    box-shadow:
        0 8px 24px rgba(0,0,0,.1);
}

.original-small-radio-card img {
    width: 125px;
    height: 125px;
    object-fit: contain;
}

.original-small-listeners {
    color: #0c4a6e;
    font-weight: 900;
}

.original-contact-section {
    padding: 60px 0;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #0c4a6e,
            #1e3a8a
        );
}

.original-contact-section h2,
.original-contact-section h3 {
    color: #ffffff;
    border: 0;
}

.original-contact-heading {
    text-align: center;
    margin-bottom: 30px;
}

.original-contact-layout {
    display: grid;
    grid-template-columns:
        1.15fr .85fr;
    gap: 24px;
}

.original-contact-form-card,
.original-contact-info-card {
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    color: #1f2937;
}

.original-contact-form-card h3,
.original-contact-info-card h3 {
    color: #0c4a6e;
}

.original-whatsapp-form {
    display: grid;
    gap: 10px;
}

.original-whatsapp-form button {
    margin-top: 8px;
    background: #25d366;
    color: #ffffff;
}

.original-contact-info-card dl {
    display: grid;
    gap: 15px;
}

.original-contact-info-card dd {
    margin: 3px 0 0;
}

.original-contact-info-card small {
    display: block;
    color: #64748b;
}

.original-contact-hours > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.original-response-strip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    margin-top: 24px;
}

.original-contact-benefits > div {
    background: rgba(255,255,255,.14);
}

.portal-seccion {
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 20px;
}

.portal-seccion .tarjetas {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(260px, 1fr)
        );
    gap: 20px;
}

.portal-seccion .tarjeta {
    overflow: hidden;
    border-radius: 12px;
    background: #ffffff;
    box-shadow:
        0 7px 20px rgba(0,0,0,.09);
}

.portal-seccion .tarjeta a {
    color: inherit;
    text-decoration: none;
}

.portal-seccion .tarjeta img,
.image-placeholder {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    font-size: 3rem;
}

.portal-seccion .tarjeta h3,
.portal-seccion .tarjeta p {
    padding-left: 16px;
    padding-right: 16px;
}

.ver-mas {
    display: inline-block;
    margin-top: 20px;
    font-weight: 800;
}

.site-header {
    background: #ffffff;
}

.site-header > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.site-logo img {
    max-width: 210px;
    max-height: 75px;
    width: auto;
    height: auto;
}

.menu-principal {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
}

.menu-principal a {
    font-weight: 700;
}

.original-site-footer {
    background: #0f172a;
    color: #e5e7eb;
    padding-top: 50px;
}

.original-site-footer h2,
.original-site-footer h3 {
    color: #ffffff;
    border: 0;
}

.original-footer-grid {
    display: grid;
    grid-template-columns:
        1.25fr 1fr 1fr 1fr;
    gap: 28px;
}

.original-footer-logo {
    max-width: 170px;
    background: #ffffff;
    border-radius: 10px;
}

.original-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.original-footer-links li + li {
    margin-top: 8px;
}

.original-site-footer a {
    color: #fcd116;
}

.original-footer-bottom {
    max-width: 1400px;
    margin: 35px auto 0;
    padding: 28px 20px 34px;
    border-top:
        1px solid rgba(255,255,255,.15);
}

.original-footer-flag {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    height: 8px;
    margin: 24px 0 0;
}

.original-footer-flag span:nth-child(1) {
    background: #fcd116;
}

.original-footer-flag span:nth-child(2) {
    background: #0033a0;
}

.original-footer-flag span:nth-child(3) {
    background: #ed2939;
}

@media (max-width: 1000px) {
    .original-main-radios,
    .original-small-radio-grid,
    .original-about-grid,
    .original-footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .original-contact-layout,
    .original-certification-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .site-header > .container {
        align-items: flex-start;
        flex-direction: column;
    }

    .original-main-radios,
    .original-small-radio-grid,
    .original-about-grid,
    .original-global-stats,
    .original-certification-stats,
    .original-contact-benefits,
    .original-footer-grid {
        grid-template-columns: 1fr;
    }

    .original-radio-status-grid {
        grid-template-columns: 1fr;
    }

    .original-audience-row {
        flex-direction: column;
    }
}


/* =========================================================
 * BLOQUE 27 - PÁGINAS INTERNAS SEGÚN TEMA ORIGINAL
 * ========================================================= */

.original-inner-content {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    padding: 50px 0;
}

.original-content-area {
    width: 100%;
}

.original-page-header,
.entry-header {
    margin-bottom: 30px;
}

.original-page-header .page-title,
.entry-title {
    color: var(--ecuador-azul);
}

.noticias-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );
    gap: 24px;
}

.noticia-card {
    overflow: hidden;
    background: var(--blanco);
    border-radius: var(--radio-borde-lg);
    box-shadow: var(--sombra-suave);
}

.noticia-thumb img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.noticia-content {
    padding: 20px;
}

.noticia-title {
    font-size: 1.4rem;
    border: 0;
    padding: 0;
}

.noticia-title a {
    text-decoration: none;
}

.noticia-excerpt {
    color: var(--gris-oscuro);
}

.cultura-destacado {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, .8fr);
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
    padding: 24px;
    background: var(--gris-claro);
    border-radius: var(--radio-borde-lg);
}

.cultura-destacado-thumb img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radio-borde);
}

.cultura-title {
    border: 0;
    padding: 0;
}

.cultura-lista {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 1fr)
        );
    gap: 20px;
}

.cultura-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border-radius: var(--radio-borde);
    background: var(--blanco);
    box-shadow: var(--sombra-suave);
}

.cultura-item-thumb img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radio-borde);
}

.cultura-item-title {
    margin: 0;
    font-size: 1.1rem;
}

.original-podcast-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(270px, 1fr)
        );
    gap: 24px;
}

.original-podcast-card {
    padding-bottom: 18px;
    overflow: hidden;
    background: var(--blanco);
    border-radius: var(--radio-borde-lg);
    box-shadow: var(--sombra-suave);
}

.original-podcast-card > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.original-podcast-card img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.original-podcast-card h2 {
    margin: 18px;
    font-size: 1.4rem;
    border: 0;
    padding: 0;
}

.original-podcast-card audio {
    display: block;
    width: calc(100% - 36px);
    margin: 0 18px;
}

.noticia-article,
.cultura-article,
.podcast-article,
.original-generic-page {
    max-width: 900px;
    margin: 0 auto;
}

.noticia-meta,
.cultura-meta,
.podcast-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 24px;
    color: var(--gris-medio);
}

.noticia-thumb img,
.cultura-thumb img,
.podcast-thumb img,
.post-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 28px;
    border-radius: var(--radio-borde-lg);
}

.original-entry-content {
    font-size: 1.05rem;
    line-height: 1.75;
}

.podcast-audio {
    margin: 0 0 28px;
}

.podcast-audio audio {
    width: 100%;
}

.original-content-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 900px;
    margin: 45px auto 0;
    padding-top: 24px;
    border-top: 2px solid var(--gris-claro);
}

.original-content-navigation .nav-next {
    text-align: right;
}

@media (max-width: 760px) {
    .cultura-destacado {
        grid-template-columns: 1fr;
    }

    .original-content-navigation {
        flex-direction: column;
    }

    .original-content-navigation .nav-next {
        text-align: left;
    }
}


/* =========================================================
 * BLOQUE 28 - EMISORAS / PROGRAMACIÓN / LOCUTORES / CONTACTO
 * FIELES AL RESPALDO ORIGINAL
 * ========================================================= */

.faithful-directory-page {
    background: #f8fafc;
    padding-bottom: 60px;
}

.faithful-directory-hero {
    position: relative;
    padding: 55px 30px;
    margin-bottom: 35px;
    border-radius: 0 0 24px 24px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #0c4a6e 0%,
            #1e3a8a 100%
        );
}

.faithful-directory-hero h1,
.faithful-directory-hero h2 {
    color: #ffffff;
    border: 0;
}

.faithful-directory-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
}

.faithful-directory-hero h1 span {
    color: #fcd116;
}

.faithful-country {
    font-weight: 800;
    letter-spacing: .05em;
}

.faithful-summary-grid,
.faithful-contact-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.faithful-summary-grid > div,
.faithful-contact-summary > div {
    padding: 18px;
    text-align: center;
    border-radius: 14px;
    background: rgba(255,255,255,.13);
}

.faithful-summary-grid dt {
    font-size: 1.8rem;
    font-weight: 900;
}

.faithful-summary-grid dd {
    margin: 4px 0 0;
}

.faithful-radio-directory {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px, 1fr)
        );
    gap: 24px;
}

.faithful-radio-directory-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow:
        0 12px 28px rgba(15,23,42,.11);
}

.faithful-radio-badge {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fcd116;
    color: #111827;
    font-size: .82rem;
    font-weight: 900;
}

.faithful-radio-directory-logo {
    width: 145px;
    height: 145px;
    object-fit: contain;
    margin: 0 auto;
}

.faithful-radio-directory-card h2 {
    border: 0;
    padding: 0;
    margin: 0;
    color: #0c4a6e;
    text-align: center;
}

.faithful-radio-directory-slogan {
    text-align: center;
    font-weight: 700;
}

.faithful-radio-status {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.faithful-radio-status span {
    padding: 8px 10px;
    text-align: center;
    border-radius: 10px;
    background: #f1f5f9;
    font-weight: 700;
}

.faithful-radio-facts > div {
    display: flex;
    gap: 6px;
}

.faithful-radio-facts dd {
    margin: 0;
}

.faithful-player-box {
    margin-top: auto;
}

.faithful-player-box .action-primary {
    width: 100%;
}

.faithful-player-box label {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.faithful-card-actions,
.faithful-detail-actions,
.faithful-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.faithful-audience-rating {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 800;
}

.faithful-how-listen,
.faithful-important-info,
.faithful-recruitment,
.faithful-location {
    margin-top: 45px;
    padding: 28px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow:
        0 10px 24px rgba(15,23,42,.08);
}

.faithful-info-grid,
.faithful-mini-radio-grid,
.faithful-benefit-grid,
.faithful-featured-program-grid,
.faithful-social-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );
    gap: 18px;
}

.faithful-info-grid article,
.faithful-mini-radio-grid article,
.faithful-benefit-grid article,
.faithful-featured-program-grid article,
.faithful-social-grid article {
    padding: 18px;
    border-radius: 14px;
    background: #f8fafc;
}

.faithful-mini-radio-grid img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.faithful-radio-detail-page {
    background: #f8fafc;
}

.faithful-radio-detail-hero {
    padding: 55px 0;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #0c4a6e,
            #1e3a8a
        );
}

.faithful-radio-detail-hero h1,
.faithful-radio-detail-hero h2 {
    color: #ffffff;
    border: 0;
}

.faithful-radio-detail-grid {
    display: grid;
    grid-template-columns:
        minmax(180px, .6fr)
        minmax(0, 1.4fr);
    gap: 35px;
    align-items: center;
}

.faithful-radio-detail-logo {
    display: block;
    width: min(100%, 280px);
    max-height: 280px;
    object-fit: contain;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20px;
}

.faithful-detail-listeners {
    font-size: 1.2rem;
}

.faithful-detail-actions a,
.faithful-detail-actions button {
    padding: 12px 18px;
    border-radius: 10px;
}

.faithful-detail-body {
    padding-top: 45px;
    padding-bottom: 55px;
}

.faithful-detail-body > section {
    margin-bottom: 42px;
}

.faithful-live-panel {
    padding: 26px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 12px 26px rgba(15,23,42,.09);
}

.faithful-live-panel button {
    margin: 5px 5px 5px 0;
}

.faithful-quality-panel {
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
    background: #f1f5f9;
}

.faithful-special-list {
    display: grid;
    gap: 12px;
}

.faithful-special-list article {
    padding: 16px 18px;
    border-left: 5px solid #fcd116;
    background: #ffffff;
}

.faithful-mission {
    padding: 26px;
    border-radius: 18px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #0c4a6e,
            #1e3a8a
        );
}

.faithful-mission h2 {
    color: #ffffff;
    border: 0;
}

.faithful-radio-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.faithful-radio-stats > div {
    padding: 20px;
    text-align: center;
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 8px 20px rgba(15,23,42,.08);
}

.faithful-radio-stats dd {
    margin: 8px 0 0;
    font-size: 1.4rem;
    font-weight: 900;
    color: #0c4a6e;
}

.faithful-radio-stats small {
    display: block;
    font-size: .8rem;
    color: #64748b;
}

.faithful-radio-local-footer {
    padding: 25px;
    border-radius: 18px;
    background: #0f172a;
    color: #e5e7eb;
}

.faithful-radio-local-footer h2,
.faithful-radio-local-footer h3 {
    color: #ffffff;
    border: 0;
}

.faithful-current-time {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    font-weight: 800;
}

.faithful-filter-panel {
    margin-bottom: 25px;
}

.faithful-day-selector {
    display: grid;
    grid-template-columns:
        repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 35px;
}

.faithful-day-selector a {
    display: grid;
    gap: 3px;
    padding: 12px 8px;
    text-align: center;
    border-radius: 12px;
    background: #ffffff;
    text-decoration: none;
}

.faithful-day-selector a.active {
    background: #0c4a6e;
    color: #ffffff;
}

.faithful-current-program {
    padding: 26px;
    margin-bottom: 40px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );
    box-shadow:
        0 12px 28px rgba(15,23,42,.09);
}

.faithful-program-time {
    font-size: 1.15rem;
    font-weight: 900;
    color: #0c4a6e;
}

.faithful-current-program-meta,
.faithful-host-meta-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );
    gap: 12px;
    margin: 18px 0;
}

.faithful-current-program-meta > div,
.faithful-host-meta-grid > div {
    padding: 12px;
    border-radius: 10px;
    background: #f1f5f9;
}

.faithful-current-program-meta dd,
.faithful-host-meta-grid dd {
    margin: 3px 0 0;
}

.faithful-program-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(270px, 1fr)
        );
    gap: 20px;
}

.faithful-program-card {
    padding: 22px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow:
        0 9px 22px rgba(15,23,42,.08);
}

.faithful-host-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 25px 0 35px;
}

.faithful-host-filter a {
    display: grid;
    gap: 2px;
    padding: 12px 18px;
    border-radius: 12px;
    background: #ffffff;
    text-decoration: none;
}

.faithful-host-filter a.active {
    color: #ffffff;
    background: #0c4a6e;
}

.faithful-featured-host {
    margin-bottom: 45px;
}

.faithful-featured-host > article {
    padding: 28px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 12px 28px rgba(15,23,42,.09);
}

.faithful-host-photo-large,
.faithful-host-photo {
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.faithful-host-photo-large {
    width: 170px;
    height: 170px;
    margin: 16px auto;
}

.faithful-host-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto 14px;
}

.faithful-host-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );
    gap: 20px;
}

.faithful-host-card {
    padding: 22px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow:
        0 9px 22px rgba(15,23,42,.08);
    text-align: center;
}

.faithful-host-top-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 800;
}

.faithful-contact-main-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr);
    gap: 24px;
}

.faithful-contact-form-card,
.faithful-contact-info {
    padding: 26px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 10px 24px rgba(15,23,42,.08);
}

.faithful-contact-info dl {
    display: grid;
    gap: 16px;
}

.faithful-contact-info dd {
    margin: 4px 0 0;
}

.faithful-contact-info small {
    display: block;
    color: #64748b;
}

.faithful-faq {
    margin-top: 45px;
}

.faithful-faq details {
    margin-bottom: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow:
        0 5px 15px rgba(15,23,42,.06);
}

.faithful-faq summary {
    cursor: pointer;
    font-weight: 800;
}

@media (max-width: 900px) {
    .faithful-radio-detail-grid,
    .faithful-contact-main-grid {
        grid-template-columns: 1fr;
    }

    .faithful-summary-grid,
    .faithful-contact-summary,
    .faithful-radio-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .faithful-day-selector {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .faithful-summary-grid,
    .faithful-contact-summary,
    .faithful-radio-stats,
    .faithful-day-selector {
        grid-template-columns: 1fr;
    }

    .faithful-audience-rating {
        flex-direction: column;
    }
}


/* =========================================================
 * BLOQUE 34 - REFUERZO DE ACCESIBILIDAD
 * ========================================================= */

:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]
):focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}

.js-volume-output {
    display: inline-block;
    min-width: 4ch;
    margin-inline-start: .5rem;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
 * BLOQUE 40 - FIDELIDAD VISUAL ECUADOR
 * Basado en el style.css auténtico de generatepress-child.
 * Colores originales:
 * Amarillo #FFD100
 * Azul     #0072CE
 * Rojo     #EF3340
 * ========================================================= */

:root {
    --ecuador-amarillo: #FFD100;
    --ecuador-azul: #0072CE;
    --ecuador-rojo: #EF3340;

    --amarillo-oscuro: #D4A900;
    --azul-oscuro: #0056A3;
    --rojo-oscuro: #CC2A35;
}

/* Barra patria del sitio original. */
.site-header::before,
.original-brand-block::before,
.faithful-directory-page::before {
    content: "";
    display: block;
    width: 100%;
    height: 7px;
    background:
        linear-gradient(
            90deg,
            var(--ecuador-amarillo) 0%,
            var(--ecuador-amarillo) 33.333%,
            var(--ecuador-azul) 33.333%,
            var(--ecuador-azul) 66.666%,
            var(--ecuador-rojo) 66.666%,
            var(--ecuador-rojo) 100%
        );
}

/* Marca y navegación. */
.original-tagline,
.site-title,
.main-navigation a {
    color: var(--azul-oscuro);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a[aria-current="page"] {
    color: var(--ecuador-rojo);
}

.main-navigation a:focus-visible {
    outline: 3px solid var(--ecuador-azul);
    outline-offset: 4px;
}

/* Hero principal: azul oficial, con la banda tricolor original. */
.original-hero-radios,
.faithful-directory-hero,
.faithful-radio-detail-hero {
    background:
        linear-gradient(
            135deg,
            var(--ecuador-azul) 0%,
            var(--azul-oscuro) 100%
        );
}

.original-ecuador-stripe {
    height: 7px;
    background:
        linear-gradient(
            90deg,
            var(--ecuador-amarillo) 0%,
            var(--ecuador-amarillo) 33.333%,
            var(--ecuador-azul) 33.333%,
            var(--ecuador-azul) 66.666%,
            var(--ecuador-rojo) 66.666%,
            var(--ecuador-rojo) 100%
        );
}

.original-hero-heading h2 span,
.faithful-directory-hero h1 span {
    color: var(--ecuador-amarillo);
}

/* Tarjetas de emisoras con acento tricolor sin alterar su contenido. */
.original-main-radio-card,
.faithful-radio-directory-card,
.original-small-radio-card,
.faithful-host-card,
.faithful-program-card,
.noticia-card,
.cultura-item,
.original-podcast-card {
    position: relative;
    overflow: hidden;
}

.original-main-radio-card::before,
.faithful-radio-directory-card::before,
.original-small-radio-card::before,
.faithful-host-card::before,
.faithful-program-card::before,
.noticia-card::before,
.cultura-item::before,
.original-podcast-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background:
        linear-gradient(
            90deg,
            var(--ecuador-amarillo) 0%,
            var(--ecuador-amarillo) 33.333%,
            var(--ecuador-azul) 33.333%,
            var(--ecuador-azul) 66.666%,
            var(--ecuador-rojo) 66.666%,
            var(--ecuador-rojo) 100%
        );
}

.original-main-radio-card h3,
.faithful-radio-directory-card h2,
.faithful-program-time,
.faithful-radio-stats dd,
.original-page-header .page-title,
.entry-title {
    color: var(--ecuador-azul);
}

.original-badge,
.faithful-radio-badge {
    background: var(--ecuador-amarillo);
    color: #212529;
    border: 1px solid var(--amarillo-oscuro);
}

/* Acciones principales. */
.action-primary,
.original-play-button,
button.action-primary,
a.action-primary,
.btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--ecuador-azul) 0%,
            var(--azul-oscuro) 100%
        );
    color: #FFFFFF;
    border: 2px solid var(--ecuador-azul);
}

.action-primary:hover,
.action-primary:focus,
.original-play-button:hover,
.original-play-button:focus,
button.action-primary:hover,
button.action-primary:focus,
a.action-primary:hover,
a.action-primary:focus {
    background:
        linear-gradient(
            135deg,
            var(--ecuador-rojo) 0%,
            var(--rojo-oscuro) 100%
        );
    color: #FFFFFF;
    border-color: var(--ecuador-rojo);
}

/* Botón reproduciendo: rojo oficial, igual que el lenguaje visual original. */
.js-play-radio[aria-pressed="true"] {
    background:
        linear-gradient(
            135deg,
            var(--ecuador-rojo) 0%,
            var(--rojo-oscuro) 100%
        );
    color: #FFFFFF;
    border-color: var(--ecuador-rojo);
}

/* Encabezados de sección del tema original. */
h2 {
    border-bottom-color: var(--ecuador-amarillo);
}

h3 {
    color: var(--ecuador-rojo);
}

/* Bloques informativos con acentos patrios. */
.faithful-mission {
    background:
        linear-gradient(
            135deg,
            var(--ecuador-azul) 0%,
            var(--azul-oscuro) 100%
        );
    border-bottom: 6px solid var(--ecuador-rojo);
}

.faithful-special-list article {
    border-left-color: var(--ecuador-amarillo);
}

/* Formularios. */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--ecuador-azul);
    outline: 3px solid var(--ecuador-azul);
    outline-offset: 2px;
}

/* Footer con identidad tricolor. */
.site-footer,
.original-site-footer,
footer {
    position: relative;
}

.site-footer::before,
.original-site-footer::before,
footer::before {
    content: "";
    display: block;
    width: 100%;
    height: 7px;
    background:
        linear-gradient(
            90deg,
            var(--ecuador-amarillo) 0%,
            var(--ecuador-amarillo) 33.333%,
            var(--ecuador-azul) 33.333%,
            var(--ecuador-azul) 66.666%,
            var(--ecuador-rojo) 66.666%,
            var(--ecuador-rojo) 100%
        );
}

.original-footer-flag span:nth-child(1) {
    background: var(--ecuador-amarillo);
}

.original-footer-flag span:nth-child(2) {
    background: var(--ecuador-azul);
}

.original-footer-flag span:nth-child(3) {
    background: var(--ecuador-rojo);
}

/* Mantener contraste y accesibilidad. */
:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]
):focus-visible {
    outline: 3px solid var(--ecuador-azul);
    outline-offset: 4px;
}


/* =========================================================
 * BLOQUE 41 - PÁGINA OYENTES
 * ========================================================= */

.listeners-page .faithful-radio-directory {
    margin-top: 24px;
}

.listeners-page .faithful-radio-directory-card h3 {
    margin-top: 0;
    color: var(--ecuador-azul);
}

.listeners-page .faithful-important-info {
    border-top: 6px solid var(--ecuador-amarillo);
    border-bottom: 6px solid var(--ecuador-rojo);
}