/*
=================================================================
 HOJA DE ESTILOS PARA LA HERMANDAD DE SAN PEDRO APÓSTOL
=================================================================
 Versión: 4.7 (Revisada y Corregida)
 Fecha: 11/08/2025
 Descripción: Restaurada y corregida la configuración del hero
 y la cabecera para un posicionamiento correcto.
=================================================================
*/

/* --- 1. CONFIGURACIÓN GLOBAL Y VARIABLES --- */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@400;500;700&display=swap');

:root { 
    /* Colores Corporativos Hermandad (Rojo y Gris Oscuro) */
    --hermandad-rojo-rgb: 139, 0, 0;
    --hermandad-gris-oscuro-rgb: 52, 58, 64;
    --hermandad-negro-rgb: 0, 0, 0;

    /* Asignación a variables de Bootstrap (para compatibilidad) */
    --bs-primary-rgb: var(--hermandad-rojo-rgb);
    --bs-secondary-rgb: var(--hermandad-gris-oscuro-rgb);

    /* Colores en formato HEX para uso directo */
    --hermandad-rojo: #ea3323;
    --hermandad-gris-oscuro: #343a40;
    --hermandad-blanco: #ffffff;
    --hermandad-negro: #000000;
    --hermandad-negro-texto: #212529;
    --bs-gris-claro: #F8F9FA;
    
    /* Fuentes adaptadas para la Hermandad */
    --fuente-principal: 'Inter', sans-serif;
    --fuente-titulos: 'Cinzel', serif;
}  

/* --- 2. ESTILOS BASE Y TIPOGRAFÍA --- */
*, *::before, *::after { 
    box-sizing: border-box; 
}
html { 
    scroll-behavior: smooth; 
}
body {
    font-family: var(--fuente-principal);
    font-size: 16px;
    line-height: 1.7;
    color: var(--hermandad-negro-texto);
    background-color: var(--hermandad-blanco);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Se elimina el padding-top de aquí para evitar problemas de layout */
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    color: var(--hermandad-rojo);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.75rem 0;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
p { 
    margin: 0 0 1rem 0; 
}
a {
    color: var(--hermandad-rojo);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover { 
    color: var(--hermandad-gris-oscuro); 
}

/* --- 3. COMPONENTES REUTILIZABLES --- */
.btn {
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-primary { 
    background-color: var(--hermandad-rojo); 
    border-color: var(--hermandad-rojo);
    color: var(--hermandad-blanco);
}
.btn-primary:hover { 
    background-color: #6d0000; 
    border-color: #6d0000; 
    color: var(--hermandad-blanco);
    transform: translateY(-2px); 
}

/* --- 4. BARRA SUPERIOR (TOP BAR) --- */
.top-bar {
    background-color: var(--hermandad-negro);
    padding: 0.6rem 0;
    font-size: 0.85rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1031; /* Más alto que el menú para que siempre esté visible */
}
.top-bar-group {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    border-left: 1px solid #555;
}
.top-bar-group:first-child {
    border-left: none;
}
.top-bar a {
    color: var(--hermandad-rojo);
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}
.top-bar a:hover {
    color: var(--hermandad-blanco);
}

.top-bar a i {
    color: var(--hermandad-rojo);
    font-size: 1.1rem;
    margin-right: 1rem;
}

.top-bar a:hover i {
    color: var(--hermandad-blanco);
}




/* --- 5. CABECERA (HERO SECTION) --- */
/* --- Hero Banner (Slider/Video) - ESTILOS ADAPTADOS --- */
.hero-banner {
    position: relative;
    height: 100vh;
    min-height: 450px;
    width: 100%;
    background-color: var(--bs-gris-oscuro);
}
.hero-banner .carousel, .hero-banner .carousel-inner, .hero-banner .carousel-item { height: 100%; }
.hero-banner .carousel-item img { width: 100%; height: 100%; object-fit: cover; }

/* REPARACIÓN 1: Se posiciona el item como relativo para contener el overlay. */
.hero-banner .carousel-item {
    position: relative;
}

/* REPARACIÓN 2: Se crea el overlay con un pseudo-elemento ::after. */
.hero-banner .carousel-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Se coloca entre la imagen y el texto. */
    
    /* REPARACIÓN 3: Se corrige la sintaxis de linear-gradient (sin comillas). */
    background: linear-gradient(to top, rgba(0,0,0, 0.8) 0%, rgba(0,0,0, 0.4) 50%, rgba(0,0,0, 0.8) 100%);
}

.hero-banner .carousel-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* REPARACIÓN 4: Se asegura que el texto (caption) esté por encima del overlay. */
.hero-banner .carousel-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2; /* Por encima del overlay. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

.hero-banner .carousel-caption h1 {
    font-size: 4rem;
    color: var(--bs-blanco);
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    font-weight: 700;
   margin-top: 700px;
}

.hero-banner .carousel-caption p {
    font-size: 1.4rem;
    max-width: 750px;
    color: var(--bs-blanco);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}
.hero-banner .cta-buttons .btn { margin: 0 10px; }
/* Corrección para eliminar el borde redondeado del carrusel */
.hero-banner,
.hero-banner .carousel,
.hero-banner .carousel-inner,
.hero-banner .carousel-item,
.hero-banner .carousel-item img,
.hero-banner .overlay-content,
.hero-banner .carousel-caption {
    border-radius: 0 !important;
}

/* --- 6. BARRA DE NAVEGACIÓN --- */
#mainNavbar {
    position: fixed;
    top: 34px; /* Justo debajo de la top-bar */
    left: 0;
    width: 100%;
    background-color: transparent !important;
    transition: background-color 0.4s ease-in-out, padding 0.3s ease-in-out;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    z-index: 1030;
}
#mainNavbar.navbar-scrolled {
    background-color: rgba(var(--hermandad-negro-rgb), 0.9) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#mainNavbar .navbar-brand-img {
    max-height: 100px;
    transition: max-height 0.3s ease-in-out;
}

#mainNavbar .navbar-brand-text {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    line-height: 1.2;
    color: var(--hermandad-blanco);
}

#mainNavbar .brand-line-1 {
    font-family: var(--fuente-principal);
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

#mainNavbar .brand-line-2 {
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    font-weight: 700;
}

#mainNavbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-family: var(--fuente-principal);
    margin: 0 0.5rem;
    padding: 0.5rem 0;
    transition: color 0.3s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    position: relative;
    background: none;
    border: none;
}

#mainNavbar .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--hermandad-rojo);
    transition: width 0.3s ease-in-out;
}

#mainNavbar .navbar-nav .nav-link:hover::after,
#mainNavbar .navbar-nav .nav-link.active::after {
    width: 70%;
}

#mainNavbar .navbar-nav .nav-link:hover,
#mainNavbar .navbar-nav .nav-link.active {
    color: var(--hermandad-blanco);
}

#mainNavbar .dropdown-toggle::after {
    background-color: transparent !important;
}

#mainNavbar .dropdown-menu {
    background-color: rgba(var(--hermandad-negro-rgb), 0.9);
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#mainNavbar .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    transition: background-color 0.3s;
}

#mainNavbar .dropdown-item:hover {
    background-color: rgba(var(--hermandad-rojo-rgb), 0.1);
}

/* --- 7. CONTENIDO PRINCIPAL --- */
.main-content {
    /* REVISADO: El padding-top debe ser suficiente para que el contenido
       no quede oculto detrás de las barras de navegación fijas.
       La altura de la navbar es variable, pero podemos estimar un valor seguro. */
    padding-top: 150px; 
    padding-bottom: 4rem;
}

/* --- 8. PIE DE PÁGINA --- */
.footer-page { 
    background-color: var(--hermandad-gris-oscuro); 
    color: #ccc; 
    font-size: 0.95rem; 
    padding: 3rem 0 0 0;
}

.footer-page .logo-pie {
    max-height:250px;
    margin-bottom: 1rem;
}

.footer-page .footer-title { 
    color: var(--hermandad-blanco); 
    font-family: var(--fuente-titulos); 
    margin-bottom: 1.25rem; 
    font-weight: 700; 
    border-bottom: 2px solid var(--hermandad-rojo); 
    padding-bottom: 0.5rem; 
    display: inline-block; 
}
.footer-page a { 
    color: #ccc; 
}
.footer-page .footer-links li {
    padding: 4px 0;
}
.footer-page .footer-links li a:hover { 
    color: var(--hermandad-blanco); 
    transform: translateX(4px);
    display: inline-block;
}
.footer-page .footer-icon {
    vertical-align: middle;
    margin-right: 8px;
    color: var(--hermandad-rojo);
}
.footer-bottom { 
    background-color: #212529;
    padding: 15px 0; 
    margin-top: 2rem;
    font-size: 0.85rem; 
    color: #aaa; 
}
.footer-bottom a {
    color: #aaa;
}
.footer-bottom a:hover {
    color: var(--hermandad-blanco);
}

/* --- 9. DISEÑO RESPONSIVE --- */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }
    .hero-content p {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .hero-header {
        height: 80vh;
        min-height: 550px;
    }
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .hero-content p {
        font-size: 1.1rem;
    }
    #mainNavbar .navbar-brand-img {
        max-height: 55px;
    }
    #mainNavbar .brand-line-1 {
        display: none; /* Ocultamos la línea superior en móvil para más limpieza */
    }
    #mainNavbar .brand-line-2 {
        font-size: 1.1rem;
    }
    .footer-page .text-md-end {
        text-align: center !important;
        margin-top: 1rem;
    }
}
/* --- 8. GALERÍA --- */


/* --- ESTILOS PARA LA VISTA DE CATEGORÍAS --- */

.category-grid {
    display: grid;
    gap: 1.75rem;
    /* Por defecto, 1 columna para móviles */
    grid-template-columns: 1fr; 
}

/* 2 columnas para tablets y pantallas medianas */
@media (min-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 columnas para pantallas de escritorio (máximo) */
@media (min-width: 992px) {
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.category-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    aspect-ratio: 4 / 3;
    text-decoration: none;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.category-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

.category-card:hover .category-card-bg {
    transform: scale(1.1);
}

.category-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.category-card-title {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--drm-blanco);
}

.category-card-description {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}




.cabecera-galeria {
    background-color: var(--hermandad-negro);
    padding: 2rem 0;
    min-height: 125px;
    top:34px;
    position: absolute;
}

.gallery-container {
    margin-top: 200px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    cursor: pointer;
    aspect-ratio: 4 / 3;
}
.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.gallery-item:hover img {
    transform: scale(1.1);
}


/*/////////////////ESTILOS PARA NOTICIAS////////////////////////////////*/
.cabecera-noticias {
    background-color: var(--hermandad-negro);
    padding: 2rem 0;
    min-height: 125px;
    top:34px;
    position: absolute;
}

.noticias-container {
    margin-top: 200px;
    min-height: 500px;

}

/*/////////////////////////ESTILOS PARA CONTACTO/////////////////////////*/
.contacto-cabecera {
    background-color: var(--hermandad-negro);
    padding: 2rem 0;
    min-height: 125px;
    top:34px;
    position: absolute;
}

.contacto-hero {
    /* Superponemos un gradiente oscuro sobre la imagen de fondo */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../../imagenes/contacto-hero.jpg');
    background-size: cover;
    background-position: center;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    margin-top: 125px;
}
.contacto-hero h1 {
   color: var(--hermandad-blanco);
}