/* Declaración de la familia HK Grotesk */

@font-face {
    font-family: 'HK Grotesk Web'; /* Usamos un nombre ligeramente diferente para evitar conflictos */
    src: url('fonts/HKGrotesk-Light.woff2') format('woff2'),
         url('fonts/HKGrotesk-Light.woff') format('woff');
    font-weight: 300; /* Corresponde a Light */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HK Grotesk Web';
    src: url('fonts/HKGrotesk-Regular.woff2') format('woff2'),
         url('fonts/HKGrotesk-Regular.woff') format('woff');
    font-weight: 400; /* Corresponde a Regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HK Grotesk Web';
    src: url('fonts/HKGrotesk-SemiBold.woff2') format('woff2'),
         url('fonts/HKGrotesk-SemiBold.woff') format('woff');
    font-weight: 600; /* Corresponde a SemiBold */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HK Grotesk Web';
    src: url('fonts/HKGrotesk-Bold.woff2') format('woff2'),
         url('fonts/HKGrotesk-Bold.woff') format('woff');
    font-weight: 700; /* Corresponde a Bold */
    font-style: normal;
    font-display: swap;
}

/* El resto de tu archivo style.css comienza aquí */

/* El resto de tu archivo style.css comienza aquí */
/* Estilos generales y fondo */
/* Estilos generales y fondo */
body {
    margin: 0;
    padding: 0;
    /* CAMBIO: Aplicamos la nueva familia */
    font-family: 'HK Grotesk Web', sans-serif; 
    font-weight: 400; /* Base: Regular para buena legibilidad */
    color: #ffffff;
    /* ... el resto de las propiedades del body ... */
}

/* Estilos de la cabecera */
header h1 {
    font-size: 2.5em;
    /* CAMBIO: Usamos SemiBold para el título principal */
    font-weight: 600; 
    margin-bottom: 5px;
}

header h2 {
    font-size: 1.2em;
    /* CAMBIO: Usamos Regular para el subtítulo */
    font-weight: 400; 
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* Texto de Información */
header p {
    font-weight: 300; /* CAMBIO: Usamos Light para el mensaje secundario */
    font-size: 1.1em;
    margin-bottom: 30px;
}
/* Contenedor del fondo con la imagen */
/* Contenedor del fondo con la imagen */
.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/psp.jpg'); /* !!! CAMBIA ESTA RUTA !!! */
    background-size: cover;
    background-position: center;
    filter: blur(5px); /* Ajusta el valor para más o menos difuminado */
    -webkit-filter: blur(5px);
    z-index: -2; /* Mantenlo detrás del contenido */

    /* NUEVAS PROPIEDADES PARA ELIMINAR BORDES EN EL BLUR */
    transform: scale(1.02); /* Escala ligeramente el elemento para que el blur "salga" de los bordes */
}

/* Sombra o capa oscura sobre la imagen para mejorar la legibilidad */
.background-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Sombra oscura (50% de opacidad) */
    z-index: -1;
}

/* Contenedor principal del contenido */
/* --- NUEVOS ESTILOS PARA EL BANNER (FRANJA) --- */
.content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%; /* Ancho del banner */
    max-width: 1200px;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo oscuro casi opaco */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 20px #00000080;
}

.banner-left {
    display: flex;
    align-items: center;
    /* Aumenta la separación entre el logo y los textos */
    gap: 40px; /* Cambiado de 25px a 40px */ 
    flex: 1; 
    text-align: left;
}
.banner-titles h1 {
    font-size: 2.8em; 
    font-weight: 600; 
    margin: 0 0 5px 0;
    /* OPCIONAL: Si quieres el H1 en amarillo/dorado, usa: color: #FFD700; */
}

.banner-right {
    text-align: center;
    width: 280px; 
    padding: 20px;
    /* CAMBIO: Fondo con un tono de Azul Oscuro muy sutil (casi negro) */
    background-color:  rgba(31, 31, 53, 0.5);  /* Azul oscuro profundo */
    border-radius: 10px;
    margin-left: 20px;
    box-sizing: border-box;
    /* OPCIONAL: Añadir un borde sutil en color azul */
    border: 1px solid #3A506B; 
}

/* --- ESTILOS DE ELEMENTOS DENTRO DEL BANNER --- */

/* Logo (Ahora en la columna izquierda) */
.logo {
    width: 120px; 
    height: auto;
    margin: 0; /* Quitamos márgenes previos */
}

/* Títulos */
.banner-titles h1 {
    font-size: 2em; /* Un poco más pequeño para caber en la franja */
    font-weight: 600; 
    margin: 0 0 2px 0;
}

.banner-titles h2 {
    font-size: 1em; 
    font-weight: 400; 
    margin: 0 0 10px 0;
    letter-spacing: 1px;
    /* CAMBIO: Usaremos un tono de azul o un blanco suave para no competir con el título principal */
    color: #CCCCCC; 
}


.banner-titles p {
    font-weight: 300; 
    font-size: 1em;
    margin: 0;
}

/* Contador Regresivo (Ahora en la columna derecha) */
.countdown {
    justify-content: center;
    gap: 15px; 
    padding: 10px 0;
    margin: 0 0 15px 0; /* Ajuste de margen inferior */
    background-color: transparent; /* Quitamos el fondo para usar el del banner-right */
}

.number {
    font-size: 2.5em; 
    font-weight: 600; 
    line-height: 1;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    /* CAMBIO: Color de acento para los números (Amarillo/Dorado) */
    color: #FFD700; 
}

.label {
    font-size: 0.7em;
    font-weight: 400; 
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 1px;
    /* CAMBIO: Blanco o un tono claro para las etiquetas */
    color: #FFFFFF; 
}

/* Redes Sociales (Nueva clase para la ubicación en el banner) */
.social-links-banner {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links-banner a {
    /* CAMBIO: Iconos sociales en color de acento (Amarillo/Dorado) */
    color: #FFD700;
    font-size: 1.3em;
    margin: 0 8px;
    transition: color 0.3s ease;
}

.social-links-banner a:hover {
    /* Color al pasar el ratón: Un amarillo más brillante o blanco */
    color: #FFFFFF; 
}
/* --- Adaptabilidad (Responsive Design para tabletas y móviles) --- */

/* --- ESTILOS PARA EL FOOTER PRINCIPAL CON MAPA --- */
.main-footer {
    width: 100%;
    /* Fondo oscuro para que combine con el banner y el fondo de la página */
    background-color: rgba(0, 0, 0, 0.7); 
    padding: 30px 0;
    text-align: center;
    position: relative;
    z-index: 1; /* Asegura que esté por encima de la imagen de fondo */
    margin-top: 50px; /* Separación del banner principal */
}

.map-container-global {
    width: 90%;
    max-width: 800px; /* Limita el ancho del mapa para que no sea demasiado grande */
    margin: 0 auto;
}

/* --- Estilos para la Lista de Capillas (Nueva) --- */
.banner-titles .capillas-list {
    font-weight: 400; /* Regular */
    font-size: 0.9em;
    color: #CCCCCC; /* Un gris claro para que sea legible pero discreto */
    margin: 15px 0 20px 0; /* Espaciado entre títulos y el mensaje final */
    line-height: 1.4;
}

/* Modificación al mensaje final (para que quede claro que es el mensaje) */
.banner-titles p {
    font-weight: 300; 
    font-size: 1em;
    color: #FFFFFF;
    margin-top: 5px; /* Ajustamos el margen superior si es necesario */
}



.map-container-global h3 {
    font-size: 1.2em;
    font-weight: 600; 
    color: #FFD700; /* Color de acento (Amarillo/Dorado) */
    margin-bottom: 20px;
}

.map-container-global iframe {
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    max-width: 100%; 
    /* La altura se controla en el HTML, pero aquí aseguramos el ancho */
}

/* Ajuste de altura del contenido principal para que el footer no tape el banner en pantallas pequeñas */
.content-container {
    min-height: calc(100vh - 100px); /* Deja espacio arriba del footer */
    /* ... el resto de las propiedades ... */
}

@media (max-width: 900px) {
    .banner {
        flex-direction: column; /* Apilar en columnas */
        padding: 20px;
    }

    .banner-left {
        flex-direction: column; /* Apilar logo y títulos en móvil */
        text-align: center;
        margin-bottom: 20px;
    }
    
    .logo {
        width: 160px;
        margin-bottom: 10px;
    }

    .banner-right {
        width: 100%; /* El contador y redes ocupan todo el ancho */
        margin-left: 0;
    }

    .countdown {
        gap: 10px;
    }
}