/* --- Variables Globales de Diseño --- */
:root {
    --color-primario-claro: #f4f4f4;
    --color-secundario-claro: #ffffff;
    --color-texto-principal-claro: #222222;
    --color-texto-secundario-claro: #555555;
    --color-primario-oscuro: #121212;
    --color-secundario-oscuro: #1e1e1e;
    --color-texto-principal-oscuro: #ffffff;
    --color-texto-secundario-oscuro: #b3b3b3;
    --color-acento: #1e90ff;
    --color-acento-hover: #1266cc;
    --fuente-titulos: 'Montserrat', sans-serif;
    --fuente-cuerpo: 'Roboto', sans-serif;
    --ancho-maximo: 1200px;
    --border-radius: 8px;
}
/* --- Reseteo y Estilos Generales --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: var(--color-primario-claro); color: var(--color-texto-principal-claro); font-family: var(--fuente-cuerpo); line-height: 1.7; }
h1, h2, h3, h4 { font-family: var(--fuente-titulos); margin-bottom: 1rem; font-weight: 700; }
a { color: var(--color-acento); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--color-acento-hover); }
.container { max-width: var(--ancho-maximo); margin: 0 auto; padding: 3rem 2rem; }
.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; font-family: var(--fuente-titulos); color: inherit; }

/* ===================================================================== */
/*   HEADER Y MENÚ DESPLEGABLE PARA PÁGINAS INTERIORES
/* ===================================================================== */
.header-interno { 
    position: sticky; top: 0; z-index: 1000;
    background-color: rgba(255,255,255,0.95); 
    border-bottom: 1px solid #ddd; 
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
body.dark-theme { background-color: var(--color-primario-oscuro); color: var(--color-texto-principal-oscuro); }
body.dark-theme .header-interno { background-color: rgba(30, 30, 30, 0.9); border-bottom-color: #333; }
.header-interno .logo { font-family: var(--fuente-titulos); font-size: 1.5rem; font-weight: bold; }
.header-interno .logo a { color: var(--color-texto-principal-claro); }
body.dark-theme .header-interno .logo a { color: var(--color-texto-principal-oscuro); }

.menu-toggle { display: none; order: 3; width: 30px; height: 22px; position: relative; cursor: pointer; background: transparent; border: none; z-index: 1002; }
.menu-toggle span { display: block; position: absolute; height: 4px; width: 100%; border-radius: 4px; left: 0; background-color: var(--color-texto-principal-claro); transition: all 0.25s ease-in-out; }
body.dark-theme .menu-toggle span { background-color: var(--color-texto-principal-oscuro); }
.menu-toggle span:nth-child(1) { top: 0px; }
.menu-toggle span:nth-child(2) { top: 9px; }
.menu-toggle span:nth-child(3) { top: 18px; }
.menu-toggle.activo span:nth-child(1) { top: 9px; transform: rotate(135deg); }
.menu-toggle.activo span:nth-child(2) { opacity: 0; left: -30px; }
.menu-toggle.activo span:nth-child(3) { top: 9px; transform: rotate(-135deg); }

.main-navigation { position: static; }
.main-nav-desktop { display: flex; list-style: none; gap: 2rem; margin: 0; padding: 0; }
.main-nav-desktop a { font-weight: bold; font-size: 1rem; text-transform: uppercase; color: var(--color-texto-principal-claro); }
body.dark-theme .main-nav-desktop a { color: var(--color-texto-principal-oscuro); }
.main-nav-desktop a.active { color: var(--color-acento); }
.main-nav-mobile { display: none; }

@media (max-width: 850px) {
    .main-navigation { order: 4; width: 100%; position: relative; }
    .main-nav-desktop { display: none; }
    .menu-toggle { display: block; }
    .main-nav-mobile { display: none; list-style: none; position: absolute; top: 1rem; left: -2rem; right: -2rem; background-color: rgba(255,255,255,0.98); box-shadow: 0 8px 16px rgba(0,0,0,0.1); padding: 0; margin: 0; }
    body.dark-theme .main-nav-mobile { background-color: rgba(30, 30, 30, 0.98); }
    .main-nav-mobile.activo { display: block; }
    .main-nav-mobile a { display: block; padding: 1rem 2rem; text-align: center; text-transform: uppercase; font-weight: bold; color: var(--color-texto-principal-claro); border-bottom: 1px solid #eee; }
    body.dark-theme .main-nav-mobile a { color: var(--color-texto-principal-oscuro); border-bottom-color: #444; }
    .main-nav-mobile a:hover { background-color: var(--color-acento); color: white !important; }
}

/* ... (Estilos de song-card y video-card) ... */
.music-grid, .video-playlist-grid { max-width: var(--ancho-maximo); margin: 2rem auto; }
.music-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; }
.song-card { background-color: var(--color-secundario-claro); border-radius: var(--border-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.song-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
.song-card-image { height: 200px; width: 100%; object-fit: cover; }
.song-card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.video-playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.playlist-item { background-color: var(--color-secundario-oscuro); border-radius: var(--border-radius); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; }
.playlist-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.playlist-item img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.playlist-item-title { padding: 1rem; font-weight: bold; }