/* ---------- ESTILO GENERAL ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Fuente Poppins */
    font-family: 'Poppins', sans-serif;
    background-color: #fff;
    color: #222;
    overflow-x: hidden;
}

/* ---------- HEADER ---------- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 60px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.6s ease;
}

header.scrolled {
    /* Mantenemos el justify-content: space-between para que el logo, nav y auth-btn sigan visibles */
    /* La corrección es mantener la estructura y solo reducir el padding si es necesario */
    padding: 15px 60px; 
}

/* ---------- LOGO ---------- */
.logo img {
    height: 60px;
    transition: all 0.5s ease;
}

/*
==============================================================
✅ NUEVO: BOTÓN HAMBURGUESA (Por defecto OCULTO en PC)
============================================================== 
*/
#menu-toggle {
    display: none; /* CLAVE: Oculto en escritorio para que no mueva el menú */
    background: none;
    border: none;
    color: #111; /* Color del icono */
    font-size: 1.6rem; 
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* Alto z-index para que esté sobre el menú */
    order: 2; /* Para control de la posición en el flexbox del header */
}

/* ---------- MENÚ ---------- */
.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-menu li {
    position: relative;
}

.nav-menu li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background-color: #d4af37;
    opacity: 0.4;
}

.nav-menu a {
    text-decoration: none;
    color: #111;
    font-weight: 600;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #d4af37;
}

/* ---------- HERO ---------- */
.hero {
    text-align: center;
    padding: 100px 20px;
    background-color: #f8f8f8;
}

.hero h1 {
    font-size: 3rem;
    color: #000;
}

.hero p {
    max-width: 800px;
    margin: 20px auto;
    color: #555;
    line-height: 1.6;
    white-space: normal; 
    text-align: center; 
}

/* ---------- SECCIONES ---------- */
section {
    padding: 60px 20px;
}

/*
==============================================================
✅ BOTONES PLAY (CONFIGURACIÓN FINAL para onda de audio)
============================================================== 
*/
.btn-play {
    position: relative; 
    background-color: #d4af37;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 10; 
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-play i {
    font-size: 1.2rem;
    color: white; 
    z-index: 15; 
    position: relative;
    transition: transform 0.3s ease, color 0.3s ease;
}

.btn-play:hover {
    background-color: #b38f2e;
}

.btn-play:hover i {
    transform: scale(1.2);
    color: #fffdd0;
}

/* La onda de audio (pulso) */
.btn-play::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); 
    border-radius: 50%;
    z-index: 5; 
    opacity: 0; 
    transition: opacity 0.3s ease;
}

/* Se elimina el pulso de ::before ya que la nueva funcionalidad JS no lo usa */
/* Mantendremos las barras de música como la única animación de "reproduciendo" */

/*
==============================================================
🚀 CORRECCIÓN: ESTILOS PARA ESPECTRO DE AUDIO DE BARRAS
============================================================== 
*/

/* 1. Contenedor que alinea el botón y las barras */
.audio-control-group {
    display: flex;
    align-items: center;
    gap: 10px; 
    margin-top: 10px;
    width: 100%; 
}

/* 2. Contenedor del espectro (Más ancho y Flexible) */
.music-bars {
    display: flex;
    align-items: flex-end; 
    flex-grow: 1; 
    height: 30px; 
    overflow: hidden;
    opacity: 0; /* INICIALMENTE INVISIBLE */
    transition: opacity 0.3s ease;
}

/* 🏆 CLAVE: Hacemos el espectro VISIBLE y ANIMADO solo cuando está en estado 'playing' */
.music-bars.playing {
    opacity: 1;
}

/* 3. Estilo base de cada barra */
.music-bars .bar {
    width: 6px; 
    height: 100%; 
    margin: 0 1px;
    background-color: #d4af37; 
    border-radius: 5px;
    transform-origin: bottom; 
    
    /* Por defecto, la animación está DESACTIVADA */
    transform: scaleY(0.2); 
    animation: none; 
}

/* 4. KEYFRAMES */
@keyframes danceBars {
    0%, 100% {
        transform: scaleY(0.2); 
    }
    50% {
        transform: scaleY(1); 
    }
}

/* 🏆 CLAVE: Aplicación de la animación SOLO si el contenedor tiene la clase 'playing' */
.music-bars.playing .bar {
    animation: danceBars 0.8s ease-in-out alternate infinite; 
}

/* Aplicación de la animación con diferentes delays */
.music-bars.playing .bar:nth-child(1) { animation-delay: 0s; }
.music-bars.playing .bar:nth-child(2) { animation-delay: 0.1s; }
.music-bars.playing .bar:nth-child(3) { animation-delay: 0.2s; }
.music-bars.playing .bar:nth-child(4) { animation-delay: 0.3s; }
.music-bars.playing .bar:nth-child(5) { animation-delay: 0.4s; }
.music-bars.playing .bar:nth-child(6) { animation-delay: 0.5s; }


/* ---------- FOOTER ---------- */
footer {
    background-color: #111;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ESTILOS PARA REDES SOCIALES */
.social-links {
    display: flex;
    gap: 25px;
    margin-top: 5px;
}

.social-links a {
    color: #fff; 
    font-size: 1.6rem; 
    transition: color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    padding: 5px; 
}

.social-links a:hover {
    color: #d4af37;
    transform: translateY(-3px) scale(1.1);
}

/*
==============================================================
NUEVOS LANZAMIENTOS (CARRUSELES)
============================================================== 
*/
.lanzamientos, .artistas {
    text-align: center;
    background-color: #f7f7f7; 
    padding: 60px 0;
}

.lanzamientos h2, .artistas h2 {
    font-size: 2rem;
    color: #000;
    margin-bottom: 10px;
}

.lanzamientos .sub, .artistas .sub {
    color: #666;
    margin-bottom: 25px;
}

.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 10px; 
}

.carousel, .artists-carousel {
    display: flex;
    flex-wrap: nowrap; 
    gap: 25px;
    overflow-x: auto; 
    scroll-behavior: auto;
    scrollbar-width: none;
    padding-bottom: 20px; /* Espacio extra para asegurar el drag manual en algunas plataformas */
}

.carousel::-webkit-scrollbar, .artists-carousel::-webkit-scrollbar {
    display: none;
}

.card-lanzamiento {
    width: 280px; 
    flex-shrink: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; 
    z-index: 1; 
}

.card-lanzamiento:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.card-lanzamiento img {
    width: 100%;
    height: 180px; 
    object-fit: cover;
}

.card-meta {
    padding: 14px;
    text-align: left;
}

.card-meta h3 {
    font-size: 1rem;
    color: #000;
    margin-bottom: 5px;
}

.card-meta .artista {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.carousel-btn {
    position: absolute;
    background-color: #d4af37;
    color: #fff;
    border: none;
    font-size: 1.5rem;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    top: 50%;
    transform: translateY(-50%);
}

.carousel-btn:hover {
    background-color: #b38f2e;
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn.left {
    left: 10px;
}

.carousel-btn.right {
    right: 10px;
}

/* NUESTROS ARTISTAS */
.artistas {
    background-color: #f9f9f9;
    padding: 70px 0;
}

.artists-carousel {
    max-width: 1100px;
    margin: 0 auto; 
}

.card-link {
    text-decoration: none; 
    color: inherit; 
    flex-shrink: 0;
}

.card-artista {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-artista:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.card-artista img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.artists-carousel a.card-link:hover .card-meta h3 {
    text-decoration: underline; 
    color: #d4af37; 
}

/*
==============================================================
ESTILOS DE VIDEOS DE YOUTUBE 
============================================================== 
*/
.videos {
    position: relative;
    text-align: center;
    background-color: #222;
    padding: 60px 20px;
    overflow: hidden;
    color: #fff;
    --video-bg: url('images/default-video-bg.jpg'); 
}

.videos::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: var(--video-bg); 
    background-size: cover;
    background-position: center;
    filter: blur(30px) brightness(0.4); 
    transition: background-image 0.6s ease-in-out;
    z-index: 0; 
}

.videos > * {
    position: relative;
    z-index: 2; 
}

.video-player-container {
    max-width: 900px;
    margin: 0 auto 30px auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); 
    border-radius: 8px; 
    overflow: hidden; 
}

.video-player-container iframe {
    width: 100%;
    height: 450px;
    border: none;
    border-radius: 0; 
    display: block; 
}

.videos-collage {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px; 
    max-width: 1200px; 
    margin: 0 auto;
}

.video-mini {
    flex: 0 0 22%; 
    min-width: 180px; 
    /* Truco para mantener la relación de aspecto 16:9 */
    padding-bottom: calc(22% * (9 / 16)); 
    height: 0; 
    background-color: #333; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid transparent; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-mini.active,
.video-mini:hover {
    border-color: #d4af37; 
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.video-mini::after {
    /* Ícono de Play superpuesto */
    content: '\f04b'; /* Font Awesome Play icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: rgba(255, 255, 255, 0.8);
    font-size: 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    transition: opacity 0.3s;
}

.video-mini:hover::after,
.video-mini.active::after {
    opacity: 1;
}

/* La imagen de thumbnail no es necesaria ya que usamos background-image */
.video-mini img {
    display: none; 
}


/*
==============================================================
>>>>> ESTILOS CMS (LOGIN Y PUBLICACIÓN) <<<<<
============================================================== 
*/

/* Contenedores principales del CMS/Login */
#login-section, 
#cms-section {
    position: absolute;
    top: 100px; 
    right: 5%; 
    z-index: 2000; 
    
    background-color: #f7f7f7; 
    border: 1px solid #ddd;
    padding: 20px;
    max-width: 450px;
    width: 90%; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.auth-section h2, .cms-section h2 {
    color: #000;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

#login-form, #news-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Estilos de inputs y textarea */
.auth-section input,
.auth-section textarea,
.cms-section input,
.cms-section textarea {
    padding: 12px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #222;
    border-radius: 44px;
    font-size: 1em;
    resize: vertical; 
}

/* Botones de acción */
.btn-primary {
    padding: 12px 20px;
    background-color: #d4af37; 
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #b38f2e;
}

/* Mensajes de estado (errores/éxito) */
.error-message {
    color: #e74c3c !important; 
    font-weight: 600;
    margin-top: 5px;
    text-align: center;
}

#cms-message {
    font-weight: 600;
    margin-top: 5px;
    text-align: center;
    display: none; /* Se oculta por defecto y se muestra con JS */
}

/* Botón de Logout */
#cms-logout-btn {
    margin-top: 20px;
    width: 100%;
    padding: 10px;
    background-color: #c0392b; 
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#cms-logout-btn:hover {
    background-color: #e74c3c;
}


/* ---------- ESTILOS DE NOTICIAS (FEED) ---------- */

#noticias-feed {
    padding: 60px 5%;
    text-align: center;
    background-color: #f1f1f1; 
}

#noticias-feed h2 {
    font-size: 2rem;
    color: #000;
    margin-bottom: 10px;
}

#noticias-feed .sub {
    color: #666;
    margin-bottom: 30px;
}

.news-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.news-card {
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    border-left: 5px solid #d4af37; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: left;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.news-card h3 {
    color: #222;
    margin-top: 0;
    font-size: 1.4em;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.news-date {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 15px;
    display: block;
}

.news-card p:last-child {
    color: #444;
    line-height: 1.6;
}

#loading-message, .no-news-message {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 40px 0;
    grid-column: 1 / -1; 
}

/*
==============================================================
✨ ESTILO PARA BOTÓN/ÍCONO DE LOGIN
============================================================== 
*/

#auth-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    
    color: #111; 
    /* 🏆 CLAVE: Alineamos el texto/botón con el menú */
    font-size: 1rem; 
    font-weight: 600;
    text-transform: uppercase;
    
    transition: color 0.3s ease, transform 0.3s ease;
    
    margin-left: 20px; 
}

#auth-btn:hover {
    color: #d4af37; 
    transform: scale(1.05);
}

/* 🏆 CLAVE: Corrección para el menú de navegación */
/* Asegura que #auth-btn se alinee correctamente con los elementos del menú */
.nav-menu ul {
    gap: 30px;
    /* Incluye el auth-btn en la misma fila del nav */
    margin-right: -30px; 
}

.nav-menu ul li:last-child {
    margin-right: 30px;
}


/*
==============================================================
>>>>> ADAPTACIÓN MÓVIL (Reglas de responsive) <<<<<
============================================================== 
*/
@media (max-width: 768px) {
    /* 1. HEADER y MENÚ de NAVEGACIÓN (Estructura de Menú Móvil) */
    
    header {
        padding: 15px 20px;
    }
    
    .logo img {
        height: 45px;
    }

    /* 🏆 CLAVE: MOSTRAR el botón de hamburguesa en móvil */
    #menu-toggle {
        display: block; 
    }

    /* Ocultar el menú de escritorio y transformarlo en un menú lateral */
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.95); /* Overlay oscuro */
        z-index: 999;
        transform: translateX(100%); /* Oculto fuera de la pantalla */
        transition: transform 0.4s ease-in-out;
        /* NOTA: No necesita 'display: none' aquí porque 'transform: translateX(100%)' 
           y 'position: fixed' lo sacan del flujo. */
        display: block; 
    }

    /* CLAVE PARA JS: Estilo para menú ABIERTO (se activa con la clase .active) */
    .nav-menu.active {
        transform: translateX(0); /* Visible */
    }

    .nav-menu ul {
        flex-direction: column; /* Lista vertical */
        justify-content: center;
        align-items: center;
        height: 100%;
        margin-right: 0;
        padding-top: 0; 
        gap: 40px; /* Más espacio entre enlaces para facilitar el toque */
    }
    
    .nav-menu li:not(:last-child)::after {
        display: none; /* Eliminar el separador vertical en móvil */
    }

    .nav-menu a {
        font-size: 1.6rem;
        color: #fff;
        font-weight: 500;
        letter-spacing: 1px;
    }

    /* Botón de Login/Publicar: Siempre visible y con más tamaño */
    #auth-btn {
        z-index: 1001; 
        font-size: 1.8rem;
        margin-left: 10px;
    }

    /* 2. AJUSTES GENERALES */
    .hero {
        padding: 60px 20px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    /* 3. CARRUSELES (Lanzamientos y Artistas) */
    
    .carousel-container {
        padding: 0;
    }

    .carousel, .artists-carousel {
        scroll-behavior: smooth;
        flex-wrap: nowrap; 
        padding: 0 15px 20px 15px; /* Padding horizontal para centrar el primer elemento y permitir el drag */
        gap: 20px;
    }
    
    .carousel-btn {
        display: none; /* Ocultamos las flechas grandes en móvil, confiando en el scroll del dedo */
    }

    .card-lanzamiento {
        min-width: 250px; 
    }

    .card-artista {
        min-width: 180px;
    }

    /* 4. SECCIÓN DE VIDEOS */
    .video-player-container iframe {
        height: 250px; 
    }
    
    .videos-collage {
        gap: 15px;
    }
    
    .video-mini {
        flex: 0 0 45%; /* Dos columnas por fila */
        padding-bottom: calc(45% * (9 / 16)); /* Mantenemos la relación de aspecto 16:9 */
        min-width: unset;
    }

    .video-mini::after {
        font-size: 2.5rem;
    }

    /* 5. CMS/LOGIN */
    #login-section, 
    #cms-section {
        position: fixed; 
        top: 80px;
        right: 5%;
        left: 5%; 
        width: 90%;
        max-width: none;
    }

    /* 6. NOTICIAS */
    #noticias-feed {
        padding: 40px 15px;
    }

    .news-container {
        grid-template-columns: 1fr; /* Una columna en móvil */
    }
}


/* Adaptación extra para móviles más pequeños (ej. pantallas de 4 pulgadas) */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }

    .video-player-container iframe {
        height: 200px;
    }

    /* Videos - una sola columna para pantallas muy estrechas */
    .video-mini {
        flex: 0 0 100%; 
        padding-bottom: calc(100% * (9 / 16));
    }
}

/*
==============================================================
>>>>> ESTILOS ESPECÍFICOS DE MINIATURAS DE VIDEOS <<<<<
============================================================== 
*/

/* Para que las miniaturas muestren la imagen de YouTube, 
usamos el ID del video dentro del atributo data-video 
y la función url() para el background-image. 
La estructura del URL de thumbnail de YouTube es:
https://img.youtube.com/vi/[VIDEO_ID]/mqdefault.jpg 
*/


/* Video 1: zNsISO96U3c */
.videos-collage .video-mini[data-video*="zNsISO96U3c"] {
    background-image: url('https://img.youtube.com/vi/zNsISO96U3c/mqdefault.jpg');
}

/* Video 2: nW2sQl1yZc8 */
.videos-collage .video-mini[data-video*="nW2sQl1yZc8"] {
    background-image: url('https://img.youtube.com/vi/nW2sQl1yZc8/mqdefault.jpg');
}

/* Video 3: N9HBpsUWIMM */
.videos-collage .video-mini[data-video*="N9HBpsUWIMM"] {
    background-image: url('https://img.youtube.com/vi/N9HBpsUWIMM/mqdefault.jpg');
}

/* Video 4: JWwZdRixrCI */
.videos-collage .video-mini[data-video*="JWwZdRixrCI"] {
    background-image: url('https://img.youtube.com/vi/JWwZdRixrCI/mqdefault.jpg');
}

/* Video 5: WQcMgyskmWs (Video principal) */
.videos-collage .video-mini[data-video*="WQcMgyskmWs"] {
    background-image: url('https://img.youtube.com/vi/WQcMgyskmWs/mqdefault.jpg');
}

/* Video 6: _vmzlmKVhEQ */
.videos-collage .video-mini[data-video*="_vmzlmKVhEQ"] {
    background-image: url('https://img.youtube.com/vi/_vmzlmKVhEQ/mqdefault.jpg');
}

/* Video 7: J5ZURvYkkWk */
.videos-collage .video-mini[data-video*="J5ZURvYkkWk"] {
    background-image: url('https://img.youtube.com/vi/J5ZURvYkkWk/mqdefault.jpg');
}

/* Video 8: CC5rJa_p82E */
.videos-collage .video-mini[data-video*="CC5rJa_p82E"] {
    background-image: url('https://img.youtube.com/vi/CC5rJa_p82E/mqdefault.jpg');
}

/* Video 9: OJxes3lccWE */
.videos-collage .video-mini[data-video*="OJxes3lccWE"] {
    background-image: url('https://img.youtube.com/vi/OJxes3lccWE/mqdefault.jpg');
}

/* Video 10: mIzU-T379uA */
.videos-collage .video-mini[data-video*="mIzU-T379uA"] {
    background-image: url('https://img.youtube.com/vi/mIzU-T379uA/mqdefault.jpg');
}

/*
==============================================================
>>>>> ESTILO PARA EL FONDO DEL VIDEO PRINCIPAL <<<<<
============================================================== 
*/

/* La propiedad CSS Custom Property (--video-bg) debe ser actualizada 
dinámicamente por JavaScript (en script.js) cada vez que se hace clic 
en una miniatura.
*/

.videos {
    /* Establece la imagen de fondo inicial del contenedor principal */
    --video-bg: url('https://img.youtube.com/vi/WQcMgyskmWs/maxresdefault.jpg'); 
}

/* Estilos de la página de videos para que el héroe sea más limpio */
.hero-videos .hero-content {
    /* Puedes usar esta clase si quieres diferenciar el estilo del hero en la página de videos */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Asegura que el título del video en la sección de videos se vea bien */
.videos h2 {
    color: #fff;
    font-size: 2.2rem;
    margin-bottom: 5px;
}

.videos .sub {
    color: #d4af37;
    margin-bottom: 25px;
    font-weight: 400;
}

/*
==============================================================
>>>>> CORRECCIÓN FINAL DE CONSISTENCIA PARA EL MENÚ Y FOOTER <<<<<
============================================================== 
*/

/* 1. Ajuste fino del padding del header (Para reducir la altura si es necesario) */
header {
    /* Forzamos un poco menos de altura para hacerlo más compacto, si los 25px originales se ven muy grandes */
    padding: 20px 60px !important; 
}

/* 2. Ajuste de altura del logo */
.logo img {
    /* Forzamos el tamaño del logo para evitar que una posible diferencia lo haga ver "más grande" */
    height: 55px !important; 
}

/* 3. Asegurar la visibilidad y color de los encabezados de la sección de videos */
.videos h2 {
    color: #fff !important;
}

.videos .sub {
    color: #d4af37 !important;
}

/* El problema de las redes sociales es casi seguro un problema de HTML en el footer de la página de videos 
(el código que te proporcioné antes). Si usaste el mismo HTML del index, el CSS debe funcionar. 
Este bloque solo asegura que no haya conflicto en los videos section. */