/* --- 1. Declarar las fuentes que subiste --- */

/* Fuente para Títulos */
@font-face {
  font-family: 'FannDorenCondensedBold'; /* Nombre que le damos para usarla */
  src: url('/FannDorenCondensed-Bold.1.woff2') format('woff2'); /* Ruta al archivo en tu servidor */
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Fuente para Texto General */
@font-face {
  font-family: 'FannDorenGrotesque'; /* Nombre que le damos para usarla */
  src: url('/FannDorenGrotesque-Regular.1.woff2') format('woff2'); /* Ruta al archivo en tu servidor */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Asignar la fuente "Bold" a TODOS los encabezados (h1, h2, h3, etc.) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'FannDorenCondensedBold', sans-serif; /* Usa tu fuente. Si falla, usa una sans-serif genérica */
}

/* Asignar la fuente "Grotesque" al texto general (párrafos, listas, etc.) */
body, p, li, span, a {
  font-family: 'FannDorenGrotesque', sans-serif; /* Usa tu fuente. Si falla, usa una sans-serif genérica */
}


/* --- Reseteo Básico y Globales --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* ¡OJO! La fuente base es la Grotesque */
    font-family: 'FannDorenGrotesque', sans-serif; 
    background-color: #111;
    color: #fff;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* --- Header --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 1%; /* Padding superior/inferior y lateral */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    z-index: 100;
    color: #fff; /* Color de texto original */
    font-weight: bold;
    /* Fondo sutil original */

    
    /* Transición suave para el cambio de color */
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

/* ===== BLOQUE AÑADIDO ===== */
/* Estilo para páginas sin hero (como musica.php) */
.site-header.header-default-dark {
    color: #242426; /* Texto oscuro por defecto */
}
/* ===== FIN DEL BLOQUE AÑADIDO ===== */


/* ESTADO SCROLLED */
.site-header.scrolled {
    background-color: #ffffff; /* Fondo blanco */
    color: #000000; /* Texto negro */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.menu-toggle {
    grid-column: 1;
    font-size: 24px;
    cursor: pointer;
    text-align: left; /* Alineado a la izquierda */
}

.logo {
    grid-column: 2;
    text-align: center;
    font-size: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.social-icons {
    grid-column: 3;
    text-align: right;
    font-size: 20px;
}

.social-icons a {
    margin-left: 18px;
    transition: opacity 0.2s ease;
}

.social-icons a:hover {
    opacity: 0.7;
}

/* --- Menú de Navegación Oculto --- */
.nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    background-color: #111;
    border-right: 1px solid #333;
    z-index: 200;
    padding: 0; /* Padding se quita para ponerlo en el inner */
    overflow: hidden; /* Previene scroll del overlay */
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Botón de cerrar (X) */
.nav-close-toggle {
    position: absolute;
    top: 25px; /* Alineado con padding del header desktop */
    right: 4%; /* Alineado con padding del header desktop */
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    z-index: 210;
    transition: transform 0.3s ease, color 0.3s ease;
}

.nav-close-toggle:hover {
    color: #888;
    transform: rotate(90deg);
}

/* Contenedor interno del menú para gestionar el scroll */
.nav-menu-inner {
    height: 100%;
    overflow-y: auto; /* Scroll SÓLO aquí si hay muchos links */
    padding: 120px 40px; /* El padding que antes tenía .nav-menu */
}

.nav-menu ul li {
    margin-bottom: 30px;
}

.nav-menu ul li a {
    font-size: 16px;
    font-weight: bold;
    color: #eee;
    transition: color 0.2s;
}

.nav-menu ul li a:hover {
    color: #888;
}

/* --- Estado Abierto del Menú --- */
body.menu-open .nav-menu {
    transform: translateX(0);
}

/* El contenido principal ya NO se mueve */
body.menu-open #main-content {
    /* filter: blur(5px) brightness(0.7); */ /* Opcional */
}

/* --- Hero Section --- */
.fullscreen-hero {
    height: 100vh; /* <-- Fallback */
    height: 100svh; /* <-- Corrección para móviles (Small Viewport Height) */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden; /* ¡MUY IMPORTANTE! Oculta los slides que se salen */
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del contenido, delante del slider */
}

.hero-content {
    position: relative;
    z-index: 2; /* Siempre visible, encima de todo */
    padding: 20px;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 4rem); 
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    font-weight: 300;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}


/* --- ¡NUEVA LÓGICA DEL SLIDER HORIZONTAL! --- */

/* Wrapper que se moverá */
.hero-slider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    
    /* ¡CAMBIO! El ancho (ej: 300%) 
       AHORA LO APLICA EL JAVASCRIPT */
    
    display: flex;
    z-index: 0; /* Detrás del overlay y contenido */
    
    /* ¡LA ANIMACIÓN! Esta es la velocidad del "slide" */
    /* (Puedes ajustar 0.8s si quieres) */
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Estilos para los slides individuales */
.hero-slide {
    height: 100%;
    
    /* ¡CAMBIO! Cada slide ocupa el 100% de la ventana */
    width: 100vw; 
    
    /* ¡ELIMINADO! Ya no usamos flex-basis */
    /* flex-basis: 33.3333%; */
    /* flex-shrink: 0; */
    
    /* Estilos de fondo */
    background-size: cover;
    background-position: center;
}
/* --- FIN DE LA LÓGICA DEL SLIDER --- */


/* --- RESPONSIVE: 1024px --- */
@media (max-width: 1024px) {
    .site-header {
        grid-template-columns: 1fr 1fr; 
        padding: 20px 5%;
    }

    .menu-toggle {
        grid-column: 1;
        text-align: left;
    }

    .logo {
        grid-column: 2;
        text-align: right;
        font-size: 24px;
        position: static;
        transform: none;
    }

    .social-icons {
        display: none;
    }

    /* Menú full width en tablet */
    .nav-menu {
        width: 100%;
        border-right: none;
    }

    /* Ajuste posición del botón 'X' en tablet/móvil */
    .nav-close-toggle {
        top: 20px;
        right: 5%;
        font-size: 26px; /* Ajuste responsive */
    }
}

/* --- RESPONSIVE: Móvil --- */
@media (max-width: 768px) {
    /* No se necesitan reglas extra, ya que
       .nav-menu (width: 100%) se aplica desde 1024px
    */
}


/* --- Estilos del Footer --- */
.site-footer-content {
    background-color: #242426; 
    color: #a0a0a0;
    padding: 80px 0;
    font-size: 15px;
    line-height: 1.6;
}

.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px;
    margin-bottom: 50px;
}

.footer-col h4 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.footer-col p {
    margin-bottom: 10px;
}

.footer-col ul {
    list-style: none;
    padding-left: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.footer-col ul li::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    font-weight: 700;
}

.footer-col a {
    color: #ffffff;
    text-decoration: none;
}

.footer-col a:hover,
.footer-col a.footer-link:hover {
    text-decoration: underline;
}

.footer-link {
    text-decoration: underline;
}

/* Barra inferior del Footer */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid #3f3f3f;
    color: #888;
    font-size: 14px;
}

.footer-social a {
    color: #888;
    font-size: 18px;
    margin-left: 18px;
    transition: color 0.2s ease;
}

.footer-social a:hover {
    color: #ffffff;
}

/* --- RESPONSIVE FOOTER --- */

/* Tablets (2 columnas) */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Móviles (1 columna) */
@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .copyright {
        margin-bottom: 20px;
        text-align: center;
    }

    .footer-social {
        text-align: center;
    }

    .footer-social a {
        margin: 0 12px;
    }
}




/* --- Sección Servicios Grid (3 Columnas) --- */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 100vh;
    height: 100svh;
    background-color: #000;
}

.service-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 40px;
    
    /* ¡MUY IMPORTANTE! 
       Esto recorta la imagen interna que se transforma */
    overflow: hidden; 
    
    color: #fff;
    text-decoration: none;
    
    /* Quitamos el filtro de aquí para ponerlo en la imagen,
    así el texto no se ve afectado por el 'filter'
    */
    transition: filter 0.4s ease;
}

/* ¡NUEVO! Estilos para la imagen de fondo */
.service-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Reemplaza a background-size: cover */
    z-index: 0; /* Detrás de todo */
    
    /* Efecto inicial sutil */
    filter: brightness(0.9) grayscale(20%);
    
    /* Transición para el transform y el filter */
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Overlay/gradiente para asegurar legibilidad del texto */
.service-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    z-index: 1; /* Encima de la imagen */
    transition: opacity 0.3s ease;
}

.service-card:hover .service-card-overlay {
    opacity: 0.8;
}

/* Contenido de texto */
.service-card-content {
    position: relative; 
    z-index: 2; /* Encima del overlay */
}

.service-card h3 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}


/* --- ¡AQUÍ ESTÁ EL EFECTO HOVER! --- */

/* Al hacer hover en la tarjeta... */
.service-card:hover .service-card-bg {
    /* ...afectamos solo a la imagen de fondo */
    filter: brightness(1) grayscale(0%);
    transform: rotate(2deg) scale(1.05);
}

/* En el responsive de 1024px, donde quitamos el zoom, 
   ahora también quitamos la rotación.
*/
/* --- RESPONSIVE: 1024px --- */
@media (max-width: 1024px) {
    
    /* ... (tus otros estilos responsive) ... */

    /* --- REGLAS PARA LOS SERVICIOS --- */
    .services-grid {
        /* Cambia de 3 columnas a 1 sola */
        grid-template-columns: 1fr; 
        height: auto; 
    }

    .service-card {
        height: 70vh; 
        height: 70svh;
        padding: 30px;
    }
    
    .service-card:hover .service-card-bg {
        transform: none; /* Quitamos la rotación/zoom en móvil */
    }
    /* --- FIN REGLAS SERVICIOS --- */
}




/* --- Sección Texto Callout --- */
.text-callout {
    background-color: #111; /* Fondo oscuro base */
    padding: 120px 5%;
    text-align: center;
}

.callout-content h2 {
    /* La fuente 'FannDorenCondensedBold' ya está aplicada */
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.2;
}

.callout-content p {
    /* La fuente 'FannDorenGrotesque' ya está aplicada */
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    color: #a0a0a0; /* Un gris suave */
}


/* --- Sección Posts Grid (2 Columnas) --- */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    background-color: #000;
}

.post-card {
    position: relative;
    display: flex;
    align-items: flex-end; /* Contenido abajo */
    justify-content: center; /* Contenido centrado horizontalmente */
    text-align: center; /* Texto centrado */
    padding: 50px;
    min-height: 70vh; /* Alto mínimo para que se vea bien */
    overflow: hidden; 
    color: #fff;
    text-decoration: none;
    transition: filter 0.4s ease;
}

.post-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(0.7) grayscale(30%); /* Efecto inicial */
    transition: filter 0.4s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Efecto hover similar al anterior */
.post-card:hover .post-card-bg {
    filter: brightness(0.9) grayscale(0%);
    transform: rotate(-1deg) scale(1.04);
}

/* Overlay para legibilidad */
.post-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente más fuerte abajo y un poco arriba */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
    transition: opacity 0.3s ease;
}

.post-card:hover .post-card-overlay {
    opacity: 0.85;
}

.post-card-content {
    position: relative; 
    z-index: 2; /* Encima de todo */
}

.post-card .post-date {
    /* Forzamos la fuente de párrafo por si acaso */
    font-family: 'FannDorenGrotesque', sans-serif; 
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-card h3 {
    /* La fuente 'FannDorenCondensedBold' ya está aplicada */
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}