/* ==========================================================================
   2. CABECERA, MENÚ Y FOOTER (Estilo Editorial Black & White)
   ========================================================================== */
   .main-header {
    padding: 20px 0; 
    background-color: #000000d5; /* Fondo negro puro */
    position: sticky; top: 0; left: 0; width: 100%;
    z-index: 1000; 
    /* Sombra sutil oscura en lugar del brillo lila */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
}
.main-header .container { display: flex; justify-content: space-between; align-items: center; }

.logo-img { max-height: 80px; width: auto; filter: brightness(0) invert(1); transition: var(--transition); }
.logo-img:hover { transform: scale(1.05); }

/* Cabecera transparente solo en portada */
.home .main-header { background-color: transparent; position: absolute; box-shadow: none; padding: 30px 0; }

/* Botón Hamburguesa */
.hamburger {
    display: flex; flex-direction: column; gap: 7px;
    background: transparent; border: none; cursor: pointer;
    z-index: 1002; margin-left: auto; 
}
.hamburger span {
    width: 35px; height: 2px; 
    background-color: #FFFFFF; /* Líneas blancas siempre */
    transition: var(--transition); border-radius: 2px;
}
.hamburger.active span { background-color: #FFFFFF; /* Siguen blancas cuando el menú se abre sobre fondo negro */ }
.hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Panel Lateral Deslizante (Fondo Negro) */
.nav-list {
    position: fixed; top: 0; right: -100%; 
    width: 100vw; max-width: 100%; height: 100vh;
    background-color: #000000; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; /* Separa los bloques: logo arriba, menú medio, iconos abajo */
    align-items: center; 
    padding: 80px 0 60px; /* Espacio para que no se pegue ni arriba ni abajo */
    transition: right 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1001; 
}

.nav-list.active { right: 0; }

/* Logo dentro del menú desplegable */
.menu-panel-logo {
    max-height: 80px;
    width: auto;
    filter: brightness(0) invert(1); /* Lo vuelve blanco */
}

/* La lista interna de los enlaces */
.menu-items-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px; /* Espacio entre las páginas del menú */
}

/* Los textos de los enlaces */
.menu-items-ul li a { 
    font-size: 2.5rem; 
    font-weight: 400; 
    font-family: var(--font-headings); 
    color: #FFFFFF; 
    letter-spacing: 1px; 
    text-decoration: none;
    transition: var(--transition);
}

.menu-items-ul li a:hover { 
    opacity: 0.5; 
}

/* Redes sociales en el menú desplegable */
.menu-panel-socials {
    display: flex;
    gap: 30px; /* Separación entre el icono de Insta y TikTok */
}

.menu-panel-socials a {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-panel-socials a:hover {
    transform: translateY(-4px);
    opacity: 0.7;
}

/* Nota: .svg-social ya lo tienes configurado de antes para el footer, así que heredará el tamaño perfecto y el color blanco. */

/* Footer (Fondo Negro) */
.site-footer { 
    background-color: #000000d5; 
    color: #FFFFFF; 
    padding: 80px 0 30px; 
    text-align: center; 
}

/* --- 1. LOGO MÁS GRANDE --- */
.footer-logo { 
    max-height: 90px; /* Aumentado de 40px a 90px (ajústalo a tu gusto) */
    width: auto; 
    margin: 0 auto 30px; /* Un poco más de margen inferior para respirar */
    display: block; 
    filter: brightness(0) invert(1); /* Lo mantiene blanco */
}

/* Aseguramos que los enlaces del footer también sean blancos */
.site-footer a {
    color: #FFFFFF;
    text-decoration: none;
    transition: var(--transition);
}
.site-footer a:hover {
    opacity: 0.6; /* Mismo efecto elegante que el menú */
}

/* --- 2. REDES SOCIALES FOOTER (Alineación perfecta) --- */
.footer-socials {
    display: flex;
    flex-direction: row; /* Fuerza estrictamente a que estén en la misma línea */
    justify-content: center; 
    align-items: center; /* Los centra verticalmente entre sí */
    gap: 30px; /* Espacio elegante entre Instagram y TikTok */
    margin: 25px auto 40px; /* Separación con el texto superior e inferior */
}

.footer-socials a {
    display: flex; /* Evita márgenes fantasma dentro de la etiqueta <a> */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-socials a:hover {
    transform: translateY(-4px); /* Animación suave al pasar el ratón */
    opacity: 0.7; 
}

.svg-social {
    width: 28px; /* Un tamaño un pelín más grande y proporcionado */
    height: 28px;
    display: block;
    
    /* ¡IMPORTANTE! Si tus iconos de Instagram/TikTok originales son negros, 
       necesitarás descomentar (quitar los /*) de la siguiente línea 
       para que se vuelvan blancos y se vean sobre el fondo oscuro: */
    filter: brightness(0) invert(1); 
}