/* ---------------------------------------------
--- VARIABLES DE TEMA (MODO OSCURO FIJO) ---
---------------------------------------------
*/
:root {
    /* Colores base de la marca */
    --color-marca-rojo: #ad0000;
    --color-marca-amarillo: #ed922e;
    --color-marca-negro: #000000;

    /* Aplicación de la paleta */
    --color-primario: var(--color-marca-rojo);     /* Rojo para acciones */
    --color-primario-texto: #ffffff;
    --color-acento: var(--color-marca-amarillo);   /* Amarillo para títulos */
    
    --color-fondo: var(--color-marca-negro);     /* Fondo negro */
    --color-fondo-secundario: #1a1a1a;             /* Gris muy oscuro para footer/forms */
    
    --color-texto: #f1f1f1;                       /* Texto principal claro */
    --color-texto-secundario: #bbbbbb;               /* Texto del footer claro */
    --color-texto-terciario: #888888;                /* Copyright claro */
    --color-texto-heading: #f1f1f1;                  /* Títulos del footer claros */

    --color-borde-suave: #333333;
    --color-borde-medio: #444444;
    --color-borde-fuerte: #333333;

    --color-nav-hover: rgba(255, 255, 255, 0.12);
    --color-nav-overlay-fondo: rgba(0, 0, 0, 0.85); /* Overlay negro */
    --color-nav-overlay-blur: 8px;

    /* Enlaces generales del contenido principal (MODO OSCURO) */
    --color-link: var(--color-marca-rojo);       /* Rojo para enlaces */
    --color-link-visited: var(--color-marca-rojo); /* Mantenemos el rojo */

    /* Transición (ya no es necesaria para el fondo) */
    --transicion-tema: background-color 0.3s ease, color 0.3s ease;
}

/* --- FIN: VARIABLES DE TEMA --- */


/* Importar fuentes */
@font-face {
    font-family: 'Raleway';
    src: url('Fuentes/Raleway-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fuentes/Raleway-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fuentes/Raleway-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fuentes/Raleway-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fuentes/Raleway-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* Reset básico */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
}

/* Estilos base de la navbar */
.navbar{
    /* Aplicamos el color ROJO primario a la barra de navegación */
    background-color: var(--color-primario);
    color: var(--color-primario-texto);
    width: 100%;
    position: relative;
    z-index: 1001; /* Asegura que esté sobre el slider */
    /* Se quita el position:relative para que el sticky funcione */
}

.navbar-inner{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.5rem 1rem; /* Un poco menos de padding vertical */
    display: flex;
    align-items: center;
    justify-content: space-between; 
}

.logo{
    font-size: 1.3rem;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.logo a {
    color: inherit; /* Hereda el color (blanco) de la barra */
    text-decoration: none; /* Quita el subrayado del enlace */
}

/* Enlaces en desktop */
.nav-links{
    list-style: none;
    margin: 0;
    padding: 0;
}

.desktop-links{
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-left: auto; 
    margin-right: 1rem; 
}

.nav-links a{
    color: var(--color-primario-texto);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    font-weight: 500; /* Medium */
}

.nav-links a:hover{
    background-color: var(--color-nav-hover);
}

/* Estilo de enlace activo */
.nav-links li.active a {
    font-weight: 700; /* Bold */
    background-color: var(--color-nav-hover);
}


/* Botón hamburguesa */
.nav-toggle{
    display: none; /* Se mostrará en móvil */
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    padding: 3px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0; 
}

.hamburger,
.hamburger::before,
.hamburger::after{
    content: '';
    display: block;
    background: var(--color-primario-texto);
    height: 2px;
    width: 24px;
    position: absolute;
    left: 3px;
    transition: transform 0.3s;
}

.hamburger{
    top: 14px;
}

.hamburger::before{
    top: -8px;
}

.hamburger::after{
    top: 8px;
}

/* Menú overlay */
.nav-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11,92,214,0); /* Estado inicial transparente */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 1000;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-overlay.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: var(--color-nav-overlay-fondo);
    backdrop-filter: blur(var(--color-nav-overlay-blur));
    -webkit-backdrop-filter: blur(var(--color-nav-overlay-blur));
}

.nav-overlay .nav-links{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.nav-overlay .nav-links li{
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-overlay.open .nav-links li{
    opacity: 1;
    transform: translateY(0);
}

/* Entrada elegante secuencial (Actualizado para 6 enlaces) */
.nav-overlay.open .nav-links li:nth-child(1){ transition-delay: 0.2s; }
.nav-overlay.open .nav-links li:nth-child(2){ transition-delay: 0.25s; }
.nav-overlay.open .nav-links li:nth-child(3){ transition-delay: 0.3s; }
.nav-overlay.open .nav-links li:nth-child(4){ transition-delay: 0.35s; }
.nav-overlay.open .nav-links li:nth-child(5){ transition-delay: 0.4s; }
.nav-overlay.open .nav-links li:nth-child(6){ transition-delay: 0.45s; }


/* Salida elegante secuencial (Actualizado para 6 enlaces) */
.nav-overlay .nav-links li:nth-child(6){ transition-delay: 0s; }
.nav-overlay .nav-links li:nth-child(5){ transition-delay: 0.05s; }
.nav-overlay .nav-links li:nth-child(4){ transition-delay: 0.1s; }
.nav-overlay .nav-links li:nth-child(3){ transition-delay: 0.15s; }
.nav-overlay .nav-links li:nth-child(2){ transition-delay: 0.2s; }
.nav-overlay .nav-links li:nth-child(1){ transition-delay: 0.25s; }

/* Estilos de enlaces del overlay */
.nav-overlay .nav-links a{
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    letter-spacing: 0.3px;
    color: var(--color-primario-texto); 
}

.nav-overlay .nav-links a:hover{
    background: rgba(255,255,255,0.15);
    transform: scale(1.03); 
    letter-spacing: 0.5px; 
}

/* Estilos responsive */
@media (max-width: 800px){
    .desktop-links{
        display: none !important;
    }
    
    .nav-toggle{
        display: flex !important;
        margin-left: auto; /* El botón hamburguesa se pega a la derecha en móvil */
    }

    /* Animación del botón cuando está abierto */
    .navbar.open .hamburger{
        background: transparent;
    }
    
    .navbar.open .hamburger::before{
        transform: translateY(8px) rotate(45deg);
        top: 0;
    }
    
    .navbar.open .hamburger::after{
        transform: translateY(-8px) rotate(-45deg);
        top: 0;
    }

    /* Estilo del overlay cuando está abierto */
    .nav-overlay.open{
        display: flex;
    }

    .nav-overlay .nav-links{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .nav-overlay .nav-links a{
        font-size: 1.5rem;
        padding: 1rem 2rem;
    }
}

/* Desktop */
@media screen and (min-width: 801px){
    .nav-toggle,
    .nav-overlay{
        display: none;
    }
}


/* ---------------------------------------------
--- ESTILOS DEL ESQUELETO (BODY, MAIN, FOOTER) ---
---------------------------------------------
*/

/* Estilos para asegurar que el footer se quede abajo */
html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* El body ocupa al menos el 100% de la altura de la pantalla */
    /* NUEVAS PROPIEDADES DE TEMA */
    background-color: var(--color-fondo);
    color: var(--color-texto);
    transition: var(--transicion-tema);
}
main {
    flex-grow: 1; /* Hace que el contenido principal ocupe el espacio disponible */
    max-width: 1100px;
	margin: 1.5rem auto;
	padding: 0 1rem;
    width: 100%; /* Asegura que ocupe el ancho en pantallas pequeñas */
}

/* ----- ESTILOS PARA ENLACES DEL CONTENIDO PRINCIPAL ----- */
main a {
    color: var(--color-link); 
    text-decoration: underline;
    transition: color 0.2s ease;
}

main a:hover {
    color: var(--color-acento); /* Amarillo al pasar el mouse */
}

main a:visited {
    color: var(--color-link-visited); 
}

.demo-section{
	padding: 2rem 0;
	border-bottom: 1px solid var(--color-borde-suave);
    transition: var(--transicion-tema);
}

/* Centrar el título y párrafo en la sección de contacto */
.contact-section h1,
.contact-section p {
    text-align: center;
}

/* Títulos con color de acento */
h1, h2, h3,
.footer-section h4 { 
    color: var(--color-acento);
}

/* Estilo principal del Footer */
.site-footer {
    background-color: var(--color-fondo-secundario);
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    border-top: 1px solid var(--color-borde-medio);
    transition: var(--transicion-tema); 
}

.footer-top-section {
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 2.5rem 1rem 2rem 1rem; 
    /* border-bottom: 1px solid var(--color-borde-fuerte); */
    transition: var(--transicion-tema);
}

.footer-logo {
    text-align: center; 
    margin-bottom: 1.5rem; 
}

.footer-logo a {
    font-size: 1.5rem; 
    font-weight: 600; 
    color: var(--color-texto-heading); 
    text-decoration: none;
    transition: color 0.2s;
}
.footer-logo a:hover {
    color: var(--color-primario);
}

.footer-social {
    display: flex; 
    justify-content: center; 
}

.social-links-icons {
    display: flex;
    gap: 1.2rem; /* <--- Aumenté el espacio entre botones */
}

.social-links-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; 
    height: 50px;
    color: var(--color-texto-secundario);
    text-decoration: none;
    border: 1px solid var(--color-borde-medio);
    border-radius: 50%; /* Círculo */
    transition: all 0.2s ease;
}

.social-links-icons a i {
    font-size: 1.5rem; 
}

.social-links-icons a:hover {
    color: var(--color-primario);
    border-color: var(--color-primario);
    transform: scale(1.05); 
}

.footer-links-grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1rem 0 1rem; 
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; /* Centrado */
    gap: 2rem; 
}

.footer-section {
    flex-basis: 200px; 
    flex-grow: 0; /* No crecer */
}

.footer-section h4 {
    font-family: 'Raleway', sans-serif;
    font-weight: 600; 
    font-size: 1rem;
    color: var(--color-acento); 
    margin-bottom: 1rem;
    position: relative;
    transition: var(--transicion-tema);
}

.footer-section h4::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: var(--color-primario); 
    margin-top: 4px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li {
    margin-bottom: 0.6rem;
}

.footer-section a { 
    text-decoration: none;
    color: var(--color-texto-secundario);
    transition: color 0.2s;
}

.footer-section a:hover {
    color: var(--color-primario); 
}

.footer-bottom {
    text-align: center;
    padding: 1.5rem 1rem;
    margin-top: 2rem; 
    border-top: 1px solid var(--color-borde-fuerte); 
    font-size: 0.85rem;
    color: var(--color-texto-terciario);
    transition: var(--transicion-tema);
}

/* Footer responsive para móviles */
@media (max-width: 800px) {
    .footer-links-grid { 
        flex-direction: column; 
        gap: 1.5rem;
        padding-top: 2rem;
    }
    .footer-section {
        flex-basis: auto; 
        text-align: center;
    }

    .footer-section h4::after {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ---------------------------------------------
--- ESTILOS DE FORMULARIO DE CONTACTO ---
---------------------------------------------
*/

.contact-form-wrapper {
    max-width: 700px; 
    margin: 2rem auto; 
    padding: 2rem;
    background-color: var(--color-fondo-secundario); 
    border: 1px solid var(--color-borde-medio);
    border-radius: 8px;
    transition: var(--transicion-tema);
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500; /* Medium */
    color: var(--color-texto-heading);
    transition: var(--transicion-tema);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-family: 'Raleway', sans-serif;
    color: var(--color-texto);
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde-medio);
    border-radius: 4px;
    box-sizing: border-box; 
    transition: var(--transicion-tema), border-color 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 2px rgba(251, 1, 3, 0.2); 
}

.form-group textarea {
    resize: vertical; 
    min-height: 120px;
}

.submit-btn {
    display: inline-block;
    width: 100%; 
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 600; 
    color: var(--color-primario-texto);
    background-color: var(--color-primario);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.submit-btn:hover {
    background-color: #d40103; /* Un rojo un poco más oscuro */
}

.submit-btn:active {
    transform: scale(0.99); 
}

/* Mensajes de estado (Éxito o Error) */
.status-msg {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    font-weight: 500;
}
.status-msg.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.status-msg.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ---------------------------------------------
--- ESTILOS DE BOTÓN "VOLVER ARRIBA" ---
---------------------------------------------
*/

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    
    background-color: var(--color-primario);
    color: var(--color-primario-texto);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    
    text-decoration: none;
    z-index: 999; 
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background-color: #d40103; 
    color: #fff;
}


/* ---------------------------------------------
--- INICIO: ESTILOS MIGRADOS DE ANTIGUA/STYLE.CSS ---
---------------------------------------------
*/

main .banner {
    width: 90%;
    margin: 60px 5%;
    aspect-ratio: 16/4;
    box-shadow: 0 8px 12px 0 rgba(255, 255, 255, 0.123);
}

main .banner img{
    width: 100%;
    aspect-ratio: 16/4;
    object-fit: cover;
}

main .sobrebeat {
    width: 90%; /* Ajustado para mejor layout */
    margin: 70px 5%; /* Centrado */
    display: grid;
    grid-template-columns: 1fr; /* 1 Columna */
    gap: 30px; 
}


main .sobrebeat .sbtxt {
    width: 100%;
    margin: 0px auto;
    font-size: 1.1rem; /* Tamaño de fuente ajustado */
    line-height: 1.6;
    color: var(--color-texto-secundario); /* Color de texto más suave */
    display: flex; /* Flex para alinear */
    flex-direction: column;
    justify-content: center; /* Centrar verticalmente */
    font-family: 'Raleway', sans-serif; /* Fuente del esqueleto */
}

main .sobrebeat .sbtxt h3 {
    margin: 0; /* Sin margen */
    font-weight: 400; /* Regular */
}

/* Estilos de Noticias (Se eliminó de index.php, pero los guardo para el futuro) */
main .noticias {
    width: 100%; /* Ocupa todo el ancho de main */
    margin: 40px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
}

main .noticias .nota {
    width: 100%;
    background-color: var(--color-fondo-secundario); /* Color del esqueleto */
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 10px;
    border: 1px solid var(--color-borde-suave);
    overflow: hidden; /* Para que la imagen respete el borde */
}

main .noticias .nota div {
    width: 90%;
    margin: 5%;
}

main .noticias .nota div img {
    width: 100%;
    aspect-ratio: 16/10; /* Proporción de imagen */
    object-fit: cover;
    border-radius: 4px;
}

main .noticias .nota .conttxt {
    color: var(--color-texto-secundario);
    padding: 1rem;
    margin: 0;
    width: 100%;
}

main .noticias .nota .conttxt h2 {
    font-size: 1.4rem;
}
main .noticias .nota .conttxt h3 {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-texto-secundario);
}


/* Estilos del Reproductor Flotante y WhatsApp */
/* El botón .pause original ya no se usa */

.wafloat {
    width: 75px;
    height: 75px;
    position: fixed;
    bottom: 45px;
    right: 135px; 
    z-index: 1002;
    transition: transform 0.2s ease;
}

.wafloat img{
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.wafloat:hover {
    transform: scale(1.05);
}

/* Estilos de Programas y Eventos */
main .programas,
main .eventos {
    width: 100%; /* Ocupa todo el ancho de main */
    margin: 40px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 45px;
}

main .programas .programa,
main .eventos .programa {
    width: 100%;
    background-color: var(--color-fondo-secundario);
    border: 1px solid var(--color-borde-suave);
    border-radius: 10px;
    overflow: hidden;
}

main .programas .programa {
    display: grid;
    grid-template-rows: auto 1fr; /* La imagen toma su tamaño, el texto el resto */
}

main .eventos .programa {
    display: grid;
    grid-template-rows: auto auto; /* Auto para ambos */
}

main .programas .programa .contimg,
main .eventos .programa .contimg {
    width: 100%;
    margin: 0;
}

main .programas .programa .contimg img,
main .eventos .programa .contimg img {
    width: 100%;
    object-fit: cover;
    display: block; /* Elimina espacio fantasma de la imagen */
}

main .programas .programa .conttxt,
main .eventos .programa .conttxt {
    color: var(--color-texto-secundario);
    padding: 1.5rem;
    margin: 0;
    width: 100%;
}

main .programas .programa .conttxt h2,
main .eventos .programa .conttxt h2 {
    font-size: 1.4rem;
}

main .programas .programa .conttxt h3,
main .eventos .programa .conttxt h3 {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-texto-secundario);
}


/* Media Queries (Móvil) de antigua/style.css */
@media (max-width:991px) {
    /* (Estilos de header antiguo eliminados, ya no aplican) */

    main .sobrebeat {
        width: 90%;
        margin: 40px 5%;
        grid-template-columns: 1fr; /* 1 columna */
        grid-template-rows: auto; 
    }

    main .sobrebeat .sbtxt {
        font-size: 1rem; /* Texto legible en móvil */
        grid-template-rows: auto;
    }

    main .sobrebeat .sbtxt h3 {
        margin: 0 0 1.5rem 0; /* Espacio inferior */
    }

    main .banner {
        width: 100%; /* Ancho completo */
        margin: 40px 0;
        aspect-ratio: 16/6; /* Más alto en móvil */
    }

    main .noticias {
        width: 90%;
        margin: 50px 5%;
        grid-template-columns: 1fr; /* 1 columna */
        gap: 30px;
    }

    main .noticias .nota {
        grid-template-columns: 1fr; /* 1 columna */
    }

    main .noticias .nota .conttxt {
        font-size: 0.9rem;
    }

    /* Botones flotantes en móvil */
    .wafloat {
        width: 60px;
        bottom: 25px;
        right: 15px;
    }
    
    /* Botón scroll-to-top en móvil */
    .scroll-to-top {
        bottom: 25px;
        right: 85px; 
    }
    
    /* Programas y Eventos en móvil */
    main .programas,
    main .eventos {
        grid-template-columns: 1fr; /* 1 columna */
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    main .programas .programa {
        grid-template-rows: auto auto; /* Filas automáticas */
    }
}


/* ---------------------------------------------
--- INICIO: CSS DEL SLIDER (AÑADIDO) ---
---------------------------------------------
*/
.slider-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto 1.5rem auto; /* Centrado y con margen inferior */
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 11; /* Proporción panorámica para el slider */
    border-radius: 8px; /* Bordes redondeados */
    background-color: var(--color-fondo-secundario); /* Color de fondo mientras carga */
}

.slider-wrapper {
    display: flex;
    width: 600%; /* 100% * 6 slides */
    height: 100%;
    
    /* Animación */
    animation: slide-anim 30s infinite ease-in-out; 
    /* 30s = 5s por slide (5s * 6 slides) */
}

.slide {
    width: 16.66666667%; /* 100% / 6 slides */
    height: 100%;
    flex-shrink: 0;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* Animación de Keyframes para el slider automático */
@keyframes slide-anim {
    /* Slide 1 (0 a 15%) */
    0% { transform: translateX(0%); }
    15% { transform: translateX(0%); }

    /* Slide 2 (17% a 32%) */
    17% { transform: translateX(-16.666667%); }
    32% { transform: translateX(-16.666667%); }

    /* Slide 3 (34% a 49%) */
    34% { transform: translateX(-33.333333%); }
    49% { transform: translateX(-33.333333%); }

    /* Slide 4 (51% a 66%) */
    51% { transform: translateX(-50%); }
    66% { transform: translateX(-50%); }

    /* Slide 5 (68% a 83%) */
    68% { transform: translateX(-66.666667%); }
    83% { transform: translateX(-66.666667%); }

    /* Slide 6 (85% a 100%) */
    85% { transform: translateX(-83.333333%); }
    100% { transform: translateX(-83.333333%); }
}


/* Pausar animación en hover */
.slider-container:hover .slider-wrapper {
    animation-play-state: paused;
}

/* Adaptación móvil del slider */
@media (max-width: 800px) {
    .slider-container {
        aspect-ratio: 4 / 3; /* Más cuadrado en móviles */
        margin-top: 1rem;
        border-radius: 0;
    }
}
/* --- FIN: CSS DEL SLIDER --- */


/* ===== INICIO: ESTILOS GOOGLE PLAY ===== */
.google-play-badge {
    margin-top: 1.5rem; /* Espacio después del texto */
    text-align: left; /* Alinear a la izquierda por defecto */
}

.google-play-badge a {
    display: inline-block; /* Para que el <a> tome el tamaño de la imagen */
    text-decoration: none; /* Quitar subrayado */
    border: none;
}

.google-play-badge img {
    height: 100px; /* Tamaño */
    width: auto;
    transition: transform 0.2s ease;
}

.google-play-badge a:hover img {
    transform: scale(1.03); /* Efecto hover sutil */
}

/* ===== FIN: ESTILOS GOOGLE PLAY ===== */


/* ---------------------------------------------
--- ESTILOS DE PÁGINA DE NOTICIAS (WordPress) ---
---------------------------------------------
*/
.noticias-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.noticia-item {
    display: grid;
    grid-template-columns: 300px 1fr; /* Columna para imagen, columna para texto */
    gap: 1.5rem;
    background-color: var(--color-fondo-secundario);
    border: 1px solid var(--color-borde-suave);
    border-radius: 8px;
    overflow: hidden;
}

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

.noticia-contenido {
    padding: 1.5rem;
}

.noticia-titulo {
    margin: 0;
    font-size: 1.5rem;
}

.noticia-titulo a {
    color: var(--color-acento);
    text-decoration: none;
}
.noticia-titulo a:hover {
    text-decoration: underline;
}

.noticia-meta {
    font-size: 0.85rem;
    color: var(--color-texto-terciario);
    margin-bottom: 1rem;
}

.noticia-extracto p {
    margin: 0;
    color: var(--color-texto-secundario);
}

.noticia-leer-mas {
    display: inline-block;
    margin-top: 1rem;
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 600;
}
.noticia-leer-mas:hover {
    text-decoration: underline;
}


/* ---------------------------------------------
--- MEDIA QUERIES (MÓVIL) ---
---------------------------------------------
*/

@media (max-width:991px) {
    /* ... (estilos móviles existentes) ... */

    /* Badge de Google Play en móvil */
    .google-play-badge {
        text-align: center; /* Centrar el botón en móvil */
        margin-top: 1rem;
    }
    .google-play-badge img {
        height: 50px; /* Un poco más pequeño en móvil */
    }

    /* Noticias en móvil */
    .noticia-item {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
    }
    .noticia-imagen img {
        max-height: 250px; /* Evitar que la imagen sea gigante */
        width: 100%;
        object-fit: cover;
    }
}

/* ===== INICIO: ESTILOS DE VIDEO YOUTUBE (INDEX) ===== */
.video-container {
    width: 90%;
    margin: 60px 5%;
    background-color: var(--color-fondo-secundario);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-borde-suave);
    box-shadow: 0 8px 12px 0 rgba(255, 255, 255, 0.08);
}

.video-responsive {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Proporción 16:9 (9 / 16 = 0.5625) */
    border-radius: 4px;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* ===== FIN: ESTILOS DE VIDEO YOUTUBE (INDEX) ===== */


/* ===== INICIO: ESTILOS PÁGINA PODCAST ===== */
.podcast-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 2rem;
}

.featured-podcast {
    background-color: var(--color-fondo-secundario);
    border: 1px solid var(--color-borde-suave);
    border-radius: 8px;
    padding: 1.5rem;
}

.featured-podcast h2 {
    margin-top: 0;
}

.featured-podcast p {
    color: var(--color-texto-secundario);
    line-height: 1.6;
}

.featured-video {
    margin-top: 1.5rem;
    /* La clase .video-responsive (de arriba) se reutiliza aquí */
}

.podcast-list .podcast-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-borde-suave);
}
.podcast-list .podcast-item:first-child {
    padding-top: 0;
}
.podcast-list .podcast-item:last-child {
    border-bottom: none;
}

.podcast-list h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
}

.podcast-list h3 a {
    color: var(--color-acento);
    text-decoration: none;
    font-weight: 600;
}
.podcast-list h3 a:hover {
    text-decoration: underline;
}

.podcast-list p {
    margin: 0;
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
}
/* ===== FIN: ESTILOS PÁGINA PODCAST ===== */


/* ===== INICIO: ESTILOS DE RADIO (VERSIÓN 5.0 HEADER) ===== */

/* 1. Estilos del Pop-Up (Sin cambios) */
#radio-popup-overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-nav-overlay-fondo); 
    backdrop-filter: blur(var(--color-nav-overlay-blur));
    -webkit-backdrop-filter: blur(var(--color-nav-overlay-blur));
    display: flex; 
    justify-content: center;
    align-items: center;
    z-index: 2000; 
    opacity: 1;
    transition: opacity 0.3s ease;
}

#radio-popup-content {
    background-color: var(--color-fondo-secundario);
    padding: 2.5em;
    border-radius: 8px;
    border: 1px solid var(--color-borde-medio);
    text-align: center;
    font-family: 'Raleway', sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#radio-popup-content h3 {
    margin: 0 0 1.5em 0;
    color: var(--color-acento); 
    font-size: 1.5em;
    font-weight: 600;
}

#start-radio-btn {
    display: inline-block;
    padding: 0.85rem 1.5rem;
    font-size: 1.2em;
    font-weight: 600; 
    color: var(--color-primario-texto);
    background-color: var(--color-primario); 
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

#start-radio-btn:hover {
    background-color: #d40103; 
}

#start-radio-btn:active {
    transform: scale(0.99); 
}


/* 2. Estilos del NUEVO Reproductor (Integrado en Header) */
#header-player-section {
    /* display: none; -> se controla por JS */
    display: flex; /* <-- CAMBIO: Dejado como 'flex' por defecto, el JS lo controla */
    align-items: center;
    
    /* Contraste oscuro contra el navbar rojo */
    background-color: var(--color-fondo-secundario); 
    color: var(--color-primario-texto);
    
    padding: 0.8rem 1rem; /* Padding más pequeño para el header */
    
    /* Centramos el contenido dentro del max-width */
    max-width: 2200px;
    margin: 0 auto;
    width: 100%;
    gap: 15px;

    /* Borde para separarlo del navbar rojo */
    border-top: 1px solid var(--color-borde-fuerte);
}

#header-player-section #player-play-pause-btn {
    /* Botón rojo, icono blanco */
    background-color: var(--color-primario); 
    color: var(--color-primario-texto); 
    border: none;
    width: 40px;   /* Un poco más pequeño para el header */
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1rem; 
    flex-shrink: 0; 
    
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#header-player-section #player-play-pause-btn:hover {
    background-color: #d40103; /* Rojo más oscuro */
    transform: scale(1.05);
}

#header-player-section #player-status-text {
    color: var(--color-primario-texto); /* Texto blanco */
    font-size: 1rem;
    font-weight: 500;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ajustes para la barra en móvil */
@media (max-width: 800px) {
    #header-player-section {
        /* Ocupa todo el ancho en móvil */
        max-width: none;
        padding: 0.8rem 1rem;
        justify-content: flex-start; /* Alineamos a la izquierda */
    }
}

/* ===== FIN: ESTILOS DE RADIO ===== */