/* --- Variables CSS para colores (copiadas de tu CSS principal) --- */
:root {
    --primary-color: #E94B3C; /* Rojo Fuerte / Principal */
    --secondary-color: #002D62; /* Azul Marino / Videos */
    --accent-color: #CE1126; /* Rojo oscuro / Contacto */
    --text-dark: #2c2c2c; /* Texto oscuro */
    --text-light: #fdf4fa; /* Texto claro */
    --background-light: #fdf4fa; /* Fondo claro */
    --background-dark: #121212; /* Fondo modo oscuro */
    --header-footer-dark: #1f1f1f; /* Fondo encabezado/pie modo oscuro */
    --highlight-color: #1eee17; /* Verde resaltado */
    --button-primary: #ff007b; /* Botón magenta */
    --button-hover: #b80055; /* Botón magenta hover */
    --whatsapp-green: #25d366; /* Verde WhatsApp */
}

/* Reset básico (si ya lo tienes en tu CSS principal, puedes omitirlo aquí) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    background-color: var(--background-light);
    color: var(--text-dark);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Modo oscuro base */
body.dark-mode {
    background-color: var(--background-dark);
    color: var(--text-light);
}

/* --- ESTILOS GENERALES DEL SITIO (copiados de tu estructura principal) --- */
/* Es importante que estos estilos sean idénticos o que esta hoja se cargue después de la principal. */

header {
    background: var(--primary-color);
    color: #fff;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: fixed; /* Cambiado a fixed para que el header se mantenga arriba */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Añadido un poco de sombra */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode header {
    background-color: var(--header-footer-dark);
    color: var(--text-light);
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.05);
}

.logo img.logo-img {
    height: 100px;
    width: auto;
    display: block;
}

.menu-toggle {
    display: none; /* Oculto por defecto en desktop */
    font-size: 28px;
    cursor: pointer;
    color: #fff;
}

body.dark-mode .menu-toggle {
    color: var(--text-light);
}

nav {
    display: flex;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0; /* Asegura que no haya margen por defecto */
    padding: 0; /* Asegura que no haya padding por defecto */
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s;
    padding: 5px 0;
    position: relative; /* Para el subrayado animado si lo necesitas */
}

nav a:hover {
    color: var(--highlight-color);
}

/* Subrayado animado para enlaces de navegación (opcional, si lo deseas) */
nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--highlight-color);
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}


/* --- Footer styles --- */
footer {
    background-color: var(--header-footer-dark); /* Color del footer de tu CSS principal */
    color: var(--text-light); /* Color del texto del footer de tu CSS principal */
    text-align: center;
    padding: 20px;
    font-size: 14px;
    margin-top: 40px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); /* Sombra similar al header */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode footer {
    background-color: var(--header-footer-dark);
    color: var(--text-light);
    box-shadow: 0 -2px 10px rgba(255, 255, 255, 0.05);
}

footer p {
    margin: 0;
}

/* --- Botones flotantes (Modo Oscuro, Scroll Top, WhatsApp) --- */
/* NOTA: Estos estilos deberían ser consistentes con tu archivo 'whatsapp.css' si lo usas
   como una hoja de estilo separada. Si este archivo es el único que los contiene,
   asegúrate de que estén definidos aquí. He unificado los valores a tu CSS principal. */

.dark-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Mantener a la derecha como en tu CSS principal */
    background: var(--button-primary);
    color: white;
    border: none;
    border-radius: 30px; /* Redondeado como en tu CSS principal */
    padding: 10px 15px;
    cursor: pointer;
    z-index: 999;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background 0.3s ease;
}

.dark-toggle:hover {
    background: var(--button-hover);
}

#scrollTopBtn {
    position: fixed;
    bottom: 70px; /* Ajustado para no chocar con el botón de modo oscuro */
    right: 20px;
    display: none; /* Hidden by default */
    background: var(--button-primary);
    color: white;
    border: none;
    border-radius: 50%;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
    z-index: 999;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background 0.3s ease;
}

#scrollTopBtn:hover {
    background: var(--button-hover);
}

.boton-whatsapp {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Posicionado a la izquierda como en tu CSS principal */
    background-color: var(--whatsapp-green);
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.boton-whatsapp:hover {
    transform: scale(1.1);
    background-color: #1DA851; /* Un verde un poco más oscuro al pasar el mouse */
}

.boton-whatsapp img {
    width: 30px;
    height: 30px;
    filter: none;
}

/* --- Animaciones --- */
.fade-in {
    animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA DE DISCOGRAFÍA (FORMATO DE TARJETA) --- */

.container {
    max-width: 1100px; /* Usando el mismo ancho de tu .container principal */
    margin: auto;
    padding: 40px 20px;
}

.discografia-content {
    padding-top: 150px; /* Más padding para dejar espacio al header fixed */
    padding-bottom: 60px;
    background-color: var(--background-light);
    color: var(--text-dark);
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .discografia-content {
    background-color: var(--background-dark);
    color: var(--text-light);
}

.discografia-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    text-align: center;
    color: var(--primary-color); /* Rojo Fuerte */
    margin-bottom: 50px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

body.dark-mode .discografia-content h1 {
    color: var(--highlight-color); /* Verde resaltado en modo oscuro */
}

.section-discografia {
    background-color: var(--text-light); /* Fondo claro para las secciones de álbumes */
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave */
    padding: 30px;
    margin-bottom: 40px; /* Espacio entre secciones */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.section-discografia:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

body.dark-mode .section-discografia {
    background-color: var(--header-footer-dark); /* Fondo oscuro en modo oscuro */
    box-shadow: 0 4px 12px rgba(255,255,255,0.05);
}

.section-discografia h2.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    color: var(--secondary-color); /* Azul Marino para los títulos de sección */
    margin-bottom: 25px;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color); /* Borde bajo el título */
}

body.dark-mode .section-discografia h2.section-title {
    color: var(--highlight-color); /* Verde resaltado en modo oscuro */
    border-bottom-color: var(--primary-color); /* Mismo color de borde */
}

/* --- Grid para las tarjetas de álbumes --- */
.albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    justify-content: center;
    padding-top: 20px;
}

.album-card {
    display: flex;
    background-color: #fff; /* Fondo blanco para la tarjeta */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
    text-decoration: none;
    color: var(--text-dark);
}

body.dark-mode .album-card {
    background-color: var(--background-dark); /* Fondo oscuro en modo oscuro */
    color: var(--text-light);
    box-shadow: 0 4px 12px rgba(255,255,255,0.05);
}

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

.album-cover {
    width: 120px;
    height: 120px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 8px 0 0 8px;
}

.album-info {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.album-info h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin: 0 0 5px 0;
    color: var(--primary-color); /* Rojo Fuerte para el título del álbum */
}

body.dark-mode .album-info h3 {
    color: var(--highlight-color); /* Verde resaltado en modo oscuro */
}

.album-info p {
    font-size: 14px;
    line-height: 1.4;
    color: #555; /* Gris oscuro para detalles */
    margin-bottom: 5px;
}

body.dark-mode .album-info p {
    color: #bbb; /* Gris claro en modo oscuro */
}

.album-info p strong {
    color: var(--secondary-color); /* Azul Marino para "Detalles" u "Observaciones" */
}

body.dark-mode .album-info p strong {
    color: var(--button-primary); /* Magenta en modo oscuro */
}


/* --- Estilos específicos para la última sección (Nuevos Lanzamientos) --- */

.album-link-card {
    background-color: var(--background-light); /* Fondo claro para enlaces en modo claro */
    color: var(--text-dark);
    text-decoration: none;
}

body.dark-mode .album-link-card {
    background-color: var(--header-footer-dark); /* Fondo oscuro para enlaces en modo oscuro */
    color: var(--text-light);
}

.album-link-card .album-info h3 {
    color: var(--secondary-color); /* Azul Marino para títulos de álbumes en esta sección */
}

body.dark-mode .album-link-card .album-info h3 {
    color: var(--highlight-color);
}

.album-link-card .album-info .artist-name {
    font-size: 14px;
    color: #666;
    margin-bottom: 3px;
}

body.dark-mode .album-link-card .album-info .artist-name {
    color: #bbb;
}

.album-link-card .album-info .album-details {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}

body.dark-mode .album-link-card .album-info .album-details {
    color: #999;
}

.quality-info {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 12px;
    margin-top: 5px;
}

.quality-info span {
    padding: 2px 6px;
    border-radius: 3px;
    background-color: #eee; /* Fondo claro para las etiquetas de calidad */
    font-weight: bold;
    color: var(--text-dark);
}

body.dark-mode .quality-info span {
    background-color: #333;
    color: var(--text-light);
}

.quality-info .hi-res {
    background-color: var(--highlight-color); /* Verde resaltado para "Hi-Res" */
    color: white; /* Texto blanco sobre verde */
}

.quality-info .audio-type {
    background-color: var(--secondary-color); /* Azul Marino para "AUDIO" y Estéreo */
    color: white; /* Texto blanco sobre azul */
}


/* --- Media Queries para Dispositivos Móviles --- */
@media (max-width: 768px) {
    /* Header adjustments (mismos que en tu CSS principal) */
    header {
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 10px 20px;
    }

    .logo img.logo-img {
        height: 80px;
    }

    .menu-toggle {
        display: block;
    }

    nav {
        position: absolute;
        top: 80px;
        right: 20px;
        background-color: rgba(110, 68, 93, 0.95); /* Menú un poco transparente */
        border-radius: 10px;
        overflow: hidden;
        display: none;
        flex-direction: column;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        z-index: 100;
        width: calc(100% - 40px);
        max-width: 300px;
        transition: all 0.3s ease-in-out;
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none;
    }

    nav.active {
        display: flex;
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    nav ul {
        flex-direction: column;
        gap: 0;
    }

    nav li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    nav li:last-child {
        border-bottom: none;
    }

    nav a {
        color: #fff;
        padding: 15px 20px;
        display: block;
        text-align: center;
    }

    nav a:hover {
        background-color: rgba(158, 89, 122, 0.8);
    }

    nav {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    /* Discografía specific adjustments */
    .discografia-content {
        padding-top: 100px; /* Ajuste para header más pequeño en móvil */
    }

    .discografia-content h1 {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .section-discografia {
        padding: 20px;
        margin-bottom: 30px;
    }

    .section-discografia h2.section-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .albums-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .album-card {
        flex-direction: column;
        text-align: center;
    }

    .album-cover {
        width: 100%;
        height: 200px;
        border-radius: 8px 8px 0 0;
    }

    .album-info {
        padding: 10px;
    }

    .album-info h3 {
        font-size: 16px;
    }

    .album-info p {
        font-size: 13px;
    }

    .album-link-card .album-info .artist-name,
    .album-link-card .album-info .album-details {
        font-size: 12px;
    }

    .quality-info {
        justify-content: center;
        font-size: 11px;
        margin-top: 10px;
    }

    .quality-info span {
        padding: 1px 4px;
    }

    /* Floating buttons (consistent with your main CSS) */
    .dark-toggle {
        right: 10px;
        bottom: 10px;
        padding: 8px 12px;
        font-size: 14px;
    }

    #scrollTopBtn {
        right: 10px;
        bottom: 65px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .boton-whatsapp {
        left: 10px;
        bottom: 10px;
        width: 45px;
        height: 45px;
    }

    .boton-whatsapp img {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 480px) {
    .discografia-content h1 {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .section-discografia {
        padding: 15px;
        margin-bottom: 25px;
    }

    .section-discografia h2.section-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .albums-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .album-cover {
        height: 180px;
    }

    .album-info h3 {
        font-size: 15px;
    }

    .album-info p {
        font-size: 12px;
    }

    .album-link-card .album-info .artist-name,
    .album-link-card .album-info .album-details {
        font-size: 11px;
    }
}