/* public/css/landing.css */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Montserrat:wght@300;400;600&display=swap');

:root {
    --azul-noche: var(--azul-noche); 
    --oro-mason: var(--oro-mason);
    --blanco: #ffffff;
    --font-taller: 'Cinzel', serif;
    --font-base: 'Montserrat', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    background-color: var(--azul-noche);
    color: var(--blanco);
    overflow-x: hidden;
}

/* landing.css - PODER TOTAL SOBRE LA PÁGINA PÚBLICA */

/* Creamos una clase maestra para el cuerpo de la página pública */
.public-body {
    margin: 0;
    padding: 0;
    /* Fondo fijo que no se mueve con el scroll */
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Forzamos que el footer empuje hacia abajo */
main {
    flex: 1;
}

/* Forzamos que cualquier contenedor dentro de la pública sea transparente */
.public-body .main-container, 
.public-body main {
    background: transparent !important;
}

/* --- NAVEGACIÓN (Navbar) --- */
/* NAVBAR PROFESIONAL CORREGIDA */
.navbar-taller {
    background-color: color-mix(in srgb, var(--azul-noche) 98%, transparent) !important;
    border-bottom: 2px solid var(--oro-mason);
    padding: 0.5rem 0; /* Reducimos el padding para que no ocupe tanto espacio */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050; /* Un poco más alto para que nada lo tape */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Ajuste para que los botones no se peguen al borde */
.navbar-nav .nav-item {
    margin: 0 5px;
}

/* Forzamos que los botones se vean blancos si se pierden */
.navbar-dark .navbar-nav .nav-link {
    color: var(--blanco) !important;
    opacity: 1 !important;
}

.navbar-brand {
    font-family: var(--font-taller);
    color: var(--oro-mason) !important;
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}

/* Logo redondo en la navegación */
.logo-masonico-nav {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 2px solid var(--oro-mason) !important;
    object-fit: cover !important;
    background-color: var(--blanco) !important;
}

/* Para el logo central de la portada */
/* Regla para que el logo central sea siempre redondo */
.logo-masonico {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50% !important;
    border: 3px solid var(--oro-mason);
    mix-blend-mode: multiply; /* Elimina el fondo blanco */
    background-color: transparent !important;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .logo-masonico {
        width: 140px;
        height: 140px;
        margin-top: 70px;
    }
}

@media (max-width: 480px) {
    .logo-masonico {
        width: 110px;
        height: 110px;
        margin-top: 90px;
    }
}

@media (max-width: 360px) {
    .logo-masonico {
        width: 90px;
        height: 90px;
        margin-top: 100px;
    }
}

/* Para el logo pequeño del menú */
.navbar-brand img {
    border-radius: 50%; /* Lo hace redondo */
    border: 1px solid var(--oro-mason);
    object-fit: cover;
    
    /* ELIMINAR EL FONDO FEO: */
    mix-blend-mode: multiply; 
    
    background-color: transparent !important;
}

/* Contenedor para asegurar que nada sobresalga */
.logo-wrapper {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    background: none !important;
}

/* --- NAVEGACIÓN UNIFICADA (Sin botones sólidos) --- */

.nav-link {
    color: var(--blanco) !important;
    font-family: var(--font-taller);
    font-weight: bold;
    letter-spacing: 1.5px;
    padding: 0.5rem 1rem !important;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    text-transform: uppercase;
}

/* El efecto dorado al pasar el mouse para TODOS */
.nav-link:hover {
    color: var(--oro-mason) !important;
    transform: translateY(-2px);
}

/* Estilo para el nombre de la Logia al lado del logo */
.nombre-logia-menu {
    font-family: var(--font-taller); /* Cinzel */
    font-weight: 700;
    font-size: 1.2rem; /* Tamaño ideal para el menú */
    color: var(--oro-mason); /* Color dorado */
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
}

/* Eliminamos los bordes y fondos de los botones especiales */
.btn-postular, .btn-entrar-taller {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem 1rem !important;
}

/* --- PORTADA (Hero Section) --- */
.hero-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Cambiamos la URL fija por nuestra variable dinámica --img-taller */
    background: linear-gradient(rgba(177, 179, 197, 0.7), rgba(137, 139, 158, 0.9)), 
                var(--img-taller) no-repeat center center/cover !important;
    background-attachment: fixed; /* Esto le da el efecto de profundidad */
    padding: 0 20px;
}

/* Y para el blog lo mismo, para que use la misma imagen de la biblioteca */
.blog-main-container {
    background: linear-gradient(color-mix(in srgb, var(--azul-noche) 85%, transparent), color-mix(in srgb, var(--azul-noche) 95%, transparent)),
                var(--img-taller) no-repeat center center fixed !important;
    background-size: cover !important;
    min-height: 100vh;
    padding-top: 140px;
}
.hero-section {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    /* Tu fondo con degradado blanco */
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3)), 
                var(--img-hero) no-repeat center center/cover !important;
    background-attachment: fixed !important;
}

/* Título: De blanco a Azul Noche Profundo */
.hero-title {
    font-family: 'Cinzel', serif !important;
    font-weight: 900 !important;
    font-size: 4.5rem !important;
    color: var(--azul-noche) !important; /* Azul oscuro para leer sobre blanco */
    letter-spacing: 5px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    /* Un ligero relieve para mayor elegancia */
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5) !important;
}

/* Subtítulo: De blanco a Gris Antracita */
.hero-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.4rem !important;
    color: #2c3e50 !important; /* Gris oscuro muy legible */
    letter-spacing: 6px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    margin-top: 15px !important;
}

/* El divisor dorado */
.hero-divider {
    width: 80px;
    height: 3px;
    background-color: var(--oro-mason) !important; /* Dorado masónico */
    margin: 20px auto;
}

.hero-motto {
    font-family: var(--font-taller);
    color: var(--azul-noche);
    font-size: clamp(0.9rem, 2.5vw, 1.4rem);
    letter-spacing: 4px;
    border-top: 1px solid var(--oro-mason);
    border-bottom: 1px solid var(--oro-mason);
    padding: 10px 40px;
    margin: 20px 0;
    text-transform: uppercase;
    font-weight: 700;
}

/* landing.css - ESTILO BLOG UNIFICADO */
/* landing.css - BLOG ESTILO COLUMNA SOLITARIA */

/* landing.css - BLOG ESTILO COLUMNA ÚNICA */

#blog-publico {
    padding-top: 120px !important;
    min-height: 100vh;
}

/* Títulos del encabezado en Azul Noche */
.blog-title-main {
    font-family: 'Cinzel', serif !important;
    color: #eeb518de !important;
    font-weight: 900 !important;
    font-size: 3.5rem !important;
    letter-spacing: 5px;
    margin-bottom: 5px !important;
}

.blog-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    color: #2c3e50 !important;
    font-size: 1.1rem !important;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 40px !important;
}

/* Contenedor central para que no se desparramen las cards */
.blog-column-container {
    max-width: 850px !important;
    margin: 0 auto !important;
    padding: 20px;
}

/* Tarjetas de artículos: Una debajo de otra */
.blog-card-single {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(5px);
    border: 1px solid var(--oro-mason) !important;
    border-radius: 8px;
    padding: 40px !important;
    margin-bottom: 50px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    width: 100% !important;
    /* Animación de entrada */
    animation: aparecerSutil 0.8s ease-out forwards;
}

.blog-post-title {
    font-family: 'Cinzel', serif !important;
    color: var(--azul-noche) !important;
    font-size: 2rem !important;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--oro-mason);
    padding-bottom: 10px;
}

/* Botón de Paginación Azul y Dorado */
.btn-mason-page {
    background-color: var(--azul-noche) !important;
    color: white !important;
    border: 1px solid var(--oro-mason) !important;
    padding: 12px 30px;
    font-family: 'Cinzel', serif;
    transition: 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-mason-page:hover {
    background-color: var(--oro-mason) !important;
    color: var(--azul-noche) !important;
}

/* Botones de navegación (Azul con Dorado) */
.btn-mason-nav {
    background-color: var(--azul-noche) !important;
    color: #ffffff !important;
    border: 1px solid var(--oro-mason) !important;
    padding: 12px 35px;
    font-family: 'Cinzel', serif;
    transition: 0.3s;
}

.btn-mason-nav:hover {
    background-color: var(--oro-mason) !important;
    color: var(--azul-noche) !important;
}
/* Botón de Paginación */
.btn-paginacion {
    background-color: var(--azul-noche) !important;
    color: white !important;
    border: 1px solid var(--oro-mason) !important;
    padding: 10px 30px;
    font-family: 'Cinzel', serif;
    transition: 0.3s;
}

.btn-paginacion:hover {
    background-color: var(--oro-mason) !important;
    color: var(--azul-noche) !important;
}

/* Ajuste del Footer para que combine con el nuevo estilo claro */
.footer-taller {
    background-color: rgba(240, 240, 240, 0.95) !important;
    border-top: 2px solid var(--oro-mason) !important;
    color: #1a2a40 !important;
}

/* landing.css - FOOTER AZUL Y CENTRADO */
/* landing.css - CORRECCIÓN DE FOOTER Y EMPUJE */

/* 1. Asegurar que el contenedor del blog empuje al footer hacia abajo */
#blog-publico {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 100px !important; /* Espacio de seguridad antes del footer */
}

/* 2. El Footer: Azul sólido, centrado y con prioridad */
.footer-taller {
    background-color: var(--azul-noche) !important; /* Azul Noche */
    border-top: 3px solid var(--oro-mason) !important; /* Línea dorada */
    padding: 60px 0 40px 0 !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: auto !important; /* EMPUJA EL FOOTER AL FINAL */
    position: relative !important;
    z-index: 100 !important;
    clear: both !important; /* Limpia cualquier flotación de las cards */
}

/* 3. Ajuste de los textos del footer */
.footer-text {
    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    margin-bottom: 10px !important;
    font-size: 0.9rem !important;
    display: block !important;
}

.footer-logia {
    font-family: 'Cinzel', serif !important;
    color: var(--oro-mason) !important;
    font-size: 1.1rem !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    margin-top: 10px !important;
}

/* Centrado del divisor del footer */
.footer-divider {
    width: 80px !important;
    height: 2px !important;
    background-color: var(--oro-mason) !important;
    margin: 0 auto 25px auto !important;
}

/* landing.css - ANIMACIONES PARA CARDS */

/* 1. Animación de entrada (Aparecen al cargar) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blog-card-custom {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--oro-mason) !important;
    border-radius: 15px;
    padding: 25px;
    color: #1a2a40 !important;
    
    /* Aplicamos la animación de entrada */
    animation: fadeInUp 0.8s ease-out forwards;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 2. Efecto Hover (Al pasar el mouse) */
.blog-card-custom:hover {
    transform: translateY(-12px) scale(1.02) !important; /* Levita y agranda un pelo */
    background: rgba(255, 255, 255, 0.9) !important; /* Se vuelve más sólida */
    box-shadow: 0 15px 30px color-mix(in srgb, var(--azul-noche) 20%, transparent) !important;
    border-color: #b8860b !important; /* El borde brilla más */
    cursor: pointer;
}

/* 3. Animación escalonada (una tras otra) */
.col-md-6:nth-child(1) .blog-card-custom { animation-delay: 0.1s; }
.col-md-6:nth-child(2) .blog-card-custom { animation-delay: 0.2s; }
.col-md-6:nth-child(3) .blog-card-custom { animation-delay: 0.3s; }
.col-md-6:nth-child(4) .blog-card-custom { animation-delay: 0.4s; }
.col-md-6:nth-child(5) .blog-card-custom { animation-delay: 0.5s; }
.col-md-6:nth-child(6) .blog-card-custom { animation-delay: 0.6s; }

/* landing.css - ANIMACIONES PARA MISIÓN Y VISIÓN (INDEX) */

/* landing.css - RESCATE DE TARJETAS DESAPARECIDAS */

.card-mision-vision {
    /* Quitamos el opacity: 0 para que nunca desaparezcan */
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    border: 2px solid var(--oro-mason) !important;
    border-radius: 15px;
    padding: 3rem !important;
    color: var(--azul-noche) !important;
    
    /* Animación más segura */
    animation: aparecerSutil 0.6s ease-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

@keyframes aparecerSutil {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efecto Hover para que sepas que funcionan */
.card-mision-vision:hover {
    transform: translateY(-10px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}



.text-secondary {
    color: #2c3e50 !important; /* Gris oscuro para que se lea sobre blanco */
}

/* --- BLOG: FUERZA BRUTA PARA CENTRADO Y AZUL --- */

/* 1. Encabezado principal */
#blog-publico .blog-title-main {
    color: #7e631a !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    font-family: 'Cinzel', serif !important;
    font-size: 3.5rem !important;
    margin-top: 100px !important;
}

#blog-publico .blog-subtitle {
    color: #2c3e50 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: 5px !important;
}

/* 2. El contenedor de las tarjetas (UNA SOLA COLUMNA) */
.blog-column-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* CENTRA LAS CARDS */
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* 3. La tarjeta del artículo */
.blog-card-single {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--oro-mason) !important;
    padding: 40px !important;
    margin-bottom: 50px !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    opacity: 1 !important; /* Aseguramos que se vea */
}

/* 4. Título interno del post */
.blog-post-title {
    color: var(--azul-noche) !important;
    text-align: left !important;
    font-family: 'Cinzel', serif !important;
    border-bottom: 2px solid var(--oro-mason) !important;
    padding-bottom: 15px !important;
    margin-bottom: 25px !important;
}

/* --- SISTEMA DE ANIMACIÓN POR SCROLL (UNIFICADO) --- */

/* 1. Estado inicial: Oculto y desplazado hacia abajo */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s ease-out;
    visibility: hidden; /* Evita clics en elementos invisibles */
}

/* 2. Estado activo: Cuando el JS detecta que entran en pantalla */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* 3. Variantes de dirección (Opcional por si quieres que vengan de los lados) */
.reveal-left { transform: translateX(-50px); opacity: 0; transition: all 0.9s ease-out; }
.reveal-right { transform: translateX(50px); opacity: 0; transition: all 0.9s ease-out; }

.reveal-left.active, .reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* 4. Delays para efecto cascada (Misión, Visión, etc.) */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* MATAMOS EL FONDO BLANCO DEL HTML DE ESTILOS.CSS */
html {
    height: auto !important;
    min-height: 100% !important;
    background-color: var(--azul-noche) !important; 
}

/* FORZAMOS QUE EL BODY SEA FLEXIBLE Y USE LA VARIABLE DINÁMICA */
body.public-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Aquí llamamos a la variable que Flask inyectó en el HTML */
    background: var(--bg-dinamico) no-repeat center center fixed !important;
    background-size: cover !important;
}

/* EL MAIN EMPUJA EL FOOTER AL FONDO */
main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

/* =================================================================
   COLOR DEL NAV: AZUL NOCHE TRANSLÚCIDO ORIGINAL
   ================================================================= */
/* Compensa el navbar fijo al navegar a anclas (#historia, #mision, etc.) */
html {
    scroll-padding-top: 90px;
}

.navbar-publica {
    background-color: color-mix(in srgb, var(--azul-noche) 85%, transparent) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 2px solid color-mix(in srgb, var(--oro-mason) 40%, transparent) !important;
    transition: all 0.4s ease-in-out !important;
    padding: 12px 0 !important;
}

.navbar-publica .navbar-brand {
    gap: 0.75rem;
}

/* BLINDAJE DEL LOGO EN EL NAV: Forzamos brillo total y eliminamos filtros oscuros */
.navbar-publica .navbar-brand img,
.navbar-brand img {
    background: transparent !important; 
    border-radius: 50% !important;     
    border: 1px solid var(--oro-mason) !important; 
    object-fit: cover !important;
    
    /* Reglas críticas de iluminación */
    opacity: 1.0 !important;            /* Fuerza opacidad completa */
    filter: none !important;            /* Elimina cualquier filtro de oscurecimiento heredado */
    -webkit-filter: none !important;    /* Compatibilidad con Safari/Chrome antiguos */
    mix-blend-mode: normal !important;  /* Evita que se fusione de forma extraña con el fondo azul */
}

/* Forzar el color blanco de los enlaces */
.navbar-publica .nav-link {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    opacity: 1.0 !important;
}

/* Efecto dorado al pasar el mouse */
.navbar-publica .nav-link:hover {
    color: var(--oro-mason) !important;
}

/* =================================================================
   CORRECCIÓN: LOGOTIPOS REDONDOS, NÍTIDOS Y SIN OSCURECIMIENTO
   ================================================================= */

/* Logotipo central del Hero: Totalmente nítido, brillante y con realce */
.hero-section img {
    background: transparent !important; /* Eliminamos el fondo calipso antiguo */
    border-radius: 50% !important;     /* Círculo perfecto */
    border: 2px solid var(--oro-mason) !important; /* Delicado borde dorado */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important; /* Sombra profunda para separarlo del fondo */
    object-fit: cover !important;
    
    /* FUERZA DE BRILLO Y OPACIDAD */
    opacity: 1.0 !important;           /* Forzamos opacidad completa (quita lo oscuro) */
    filter: drop-shadow(0px 0px 8px rgba(214, 175, 55, 0.3)) !important; /* Sutil destello dorado alrededor */
    position: relative !important;
    z-index: 10 !important;            /* Lo empujamos por encima del gradiente oscuro del fondo */
}

/* Logotipo pequeño del Nav: Totalmente brillante y redondo */
.navbar-brand img {
    background: transparent !important; 
    border-radius: 50% !important;     
    border: 1px solid var(--oro-mason) !important; 
    object-fit: cover !important;
    opacity: 1.0 !important;           /* Nitidez absoluta en el menú */
}

/* Ajustes estéticos para el menú desplegable en celulares */
@media (max-width: 991px) {
    #navbarNavPublico {
        background-color: rgba(255, 255, 255, 0.98);
        padding: 20px;
        border-radius: 8px;
        margin-top: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    #navbarNavPublico .nav-item {
        width: 100%;
        text-align: center;
        margin-bottom: 12px;
    }
    #navbarNavPublico .nav-link {
        margin-right: 0 !important; /* Quitamos márgenes horizontales de PC */
        padding: 10px 0;
    }
}

.postulacion-page {
    min-height: calc(100vh - 120px);
    padding-top: 140px;
    padding-bottom: 70px;
}

.postulacion-card {
    max-width: 650px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.95);
    overflow: hidden;
}

.postulacion-card-header {
    background-color: var(--primary-dark);
}

.postulacion-title {
    font-family: 'Cinzel', serif;
    color: var(--gold);
}

.postulacion-submit {
    background-color: var(--primary-dark);
    border-color: var(--gold);
}

@media (max-width: 991.98px) {
    .postulacion-page {
        padding-top: 120px;
    }
}