/* ===== MENU MOBILE DEFINITIVO ===== */

@media (max-width:768px){

.menu{
display:none;
flex-direction:column;

position:fixed;
top:70px;
right:0;

width:220px;
max-height:85vh;

overflow-y:auto;

background:#fff;

border-radius:10px 0 0 10px;

box-shadow:-8px 10px 25px rgba(0,0,0,0.25);

padding:10px 0;

z-index:9999;
}

.menu.active{
display:flex;
}

.menu a{
padding:12px 18px;
font-size:15px;
border-bottom:1px solid #eee;
}

.menu a:last-child{
border-bottom:none;
}

.login{
margin:10px 18px;
text-align:center;
}

/* botón hamburguesa */

.hamburger{
display:block;
font-size:26px;
cursor:pointer;
margin-left:auto;
}

}

/* ===== FORZAR MENU MOBILE ===== */

@media (max-width:768px){

.menu{
display:none !important;
}

.menu.active{
display:flex !important;
flex-direction:column !important;

position:fixed !important;

top:70px !important;
right:0 !important;

width:230px !important;

background:#ffffff !important;

border-radius:12px 0 0 12px !important;

box-shadow:-10px 10px 25px rgba(0,0,0,0.25) !important;

padding:8px 0 !important;

z-index:9999 !important;
}

.menu.active a{
padding:12px 18px !important;
font-size:15px !important;
border-bottom:1px solid #eee !important;
}

.menu.active a:last-child{
border-bottom:none !important;
}

.login{
margin:10px !important;
text-align:center !important;
}

.hamburger{
display:block !important;
}

}

/* ===== MENU MOBILE CORRECCION DEFINITIVA ===== */

@media (max-width:768px){

.menu{
display:none;
}

.menu.active{
display:flex;
flex-direction:column;

position:fixed;

top:70px;
right:0;

width:230px;

background:#ffffff;

border-radius:12px 0 0 12px;

box-shadow:-10px 10px 25px rgba(0,0,0,0.25);

padding:10px 0;

z-index:9999;

/* fuerza posición derecha */
left:auto !important;
transform:none !important;
}

.menu.active a{
padding:12px 20px;
border-bottom:1px solid #eee;
font-size:15px;
}

.menu.active a:last-child{
border-bottom:none;
}

.login{
margin:10px;
text-align:center;
}

}

/*  CORRECCCION ERROR EN EL DISEÑO DEL MENU Y ESPACIO GRIS*/


@media (max-width: 768px) {
    /* Eliminamos el exceso de altura del bloque gris */
    .contacto-header {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 100px !important; /* Espacio para que el logo no tape el título */
        padding-bottom: 0 !important;
        background-color: #f8f8f8 !important;
    }

    /* Quitamos márgenes que empujan el banner azul hacia abajo */
    .contacto-header .main-container {
        margin-bottom: 0 !important;
        padding-bottom: 5px !important;
    }

    /* SUBIDA AGRESIVA: Succionamos el banner azul */
    .blue-section, 
    .servirte-banner,
    .Estamos-para-servirte {
        margin-top: -30px !important; /* Ajusta este número si quieres que suba más */
        position: relative;
        z-index: 5;
    }
}
/* AJUSTE SOLO PARA MOBILE */
@media (max-width:768px){

.menu.active{
flex-direction:column;
gap:0;              /* elimina el gap horizontal */
padding:8px 0;
}

.menu.active a{
padding:10px 18px;
border-bottom:1px solid #eee;
}

}
@media (max-width:768px){

.menu.active{
flex-direction:column;
gap:0;              /* elimina el gap horizontal */
padding:8px 0;
}
/* LIMPIEZA DE ESPACIOS GRISES - MOBILE */
@media (max-width: 768px) {
    .navbar {
        margin-bottom: 0 !important;
        border: none !important;
    }

    .contacto-header {
        margin-top: 0 !important;
        padding-top: 80px !important;
        background-color: #ffffff !important; /* Quita el gris de fondo */
    }

    /* Succionamos el banner azul para que no haya huecos */
    .blue-section {
        margin-top: -5px !important;
        border-top: none !important;
    }
}
/* Ajuste de aterrizaje de secciones */
:target::before {
    content: "";
    display: block;
    height: 120px; /* Altura del menú */
    margin: -120px 0 0;
}

@media (max-width: 768px) {
    /* Eliminamos el espacio gris entre el menú y el título */
    .contacto-header {
        margin-top: 0 !important;
        padding-top: 70px !important; /* Espacio mínimo para que el menú no tape el logo */
        background-color: #ffffff !important;
        min-height: 0 !important;
    }

    /* Ajuste para que el banner azul "Estamos para servirte" suba */
    .blue-section, 
    .servirte-banner {
        margin-top: -40px !important; /* Sube el banner azul para cerrar el hueco */
        position: relative;
        z-index: 10;
    }
}

@media (max-width: 768px) {
    /* 1. Eliminamos el bloque gris superior y pegamos el contenido al menú */
    .quienes-somos, 
    .contacto-header,
    section:first-of-type {
        margin-top: 0 !important;
        padding-top: 20px !important; /* Espacio pequeño de cortesía */
        background-color: #ffffff !important;
    }

    /* 2. Forzamos el fondo blanco en todo el cuerpo para evitar franjas grises */
    body {
        background-color: #ffffff !important;
    }

    /* 3. Si el título "Nuestra Hermandad" tiene un margen muy grande, lo ajustamos */
    .section-title, h1, h2 {
        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }
}

@media (max-width: 768px) {
    /* El contenedor del menú desplegable */
    .navbar-nav, 
    .navbar-collapse,
    .dropdown-menu { 
        background-color: #fdfdfd !important; /* Blanco crema muy suave */
        border: 1.5px solid #e0e0e0 !important; /* Marco elegante gris suave */
        border-radius: 15px !important;       /* Bordes redondeados */
        margin-top: 10px !important;          /* Separación del botón de arriba */
        padding: 10px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; /* Sombra fina */
        overflow: hidden;
    }

    /* Estilo para cada opción del menú */
    .nav-link, 
    .navbar-nav li {
        border-bottom: 1px solid #f0f0f0; /* Línea divisoria muy tenue */
        padding: 12px 15px !important;
        color: #333 !important;
        font-size: 0.95rem;
        transition: all 0.3s ease;
    }

    /* Quitamos la última línea divisoria para que no se vea feo */
    .nav-link:last-child, 
    .navbar-nav li:last-child {
        border-bottom: none !important;
    }

    /* Efecto al tocar una opción */
    .nav-link:active, 
    .nav-link:hover {
        background-color: #f8f8f8 !important;
        color: #003366 !important; /* Tu azul oscuro */
    }
}
@media (max-width: 768px) {
    /* 1. EL MARCO: Forzamos el contenedor del menú */
    .navbar-collapse, 
    #navbarSupportedContent,
    .navbar-nav {
        background-color: #f9f9f9 !important; /* Gris seda muy suave */
        border: 1px solid #dcdcdc !important; /* Marco gris suave definido */
        border-radius: 12px !important;       /* Esquinas redondeadas elegantes */
        margin: 10px 5px !important;          /* Separación para que no toque los bordes */
        padding: 10px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; /* Sombra sutil */
    }

    /* 2. LOS ENLACES: Ajustamos los ítems dentro del marco */
    .navbar-nav .nav-item .nav-link,
    .navbar-nav li a {
        color: #333 !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid #eeeeee !important; /* Línea divisoria interna */
        text-align: left !important;
        display: block !important;
    }

    /* Quitamos la última línea para que se vea limpio */
    .navbar-nav .nav-item:last-child .nav-link,
    .navbar-nav li:last-child a {
        border-bottom: none !important;
    }

    /* 3. EFECTO AL SELECCIONAR */
    .navbar-nav .nav-link:active,
    .navbar-nav .nav-link:hover {
        background-color: #ffffff !important;
        border-radius: 8px;
        color: #003366 !important; /* Tu azul institucional */
    }
}
@media (max-width: 768px) {
    /* Despega el logo y el texto del borde izquierdo */
    .navbar-brand, 
    .header-logo-container,
    header .container-fluid {
        padding-left: 20px !important;
        display: flex;
        align-items: center;
    }

    /* Ajusta el logo individualmente si es necesario */
    .navbar-brand img {
        margin-left: 5px;
    }

    /* Opcional: Despega también el icono del menú del borde derecho para que se vea simétrico */
    .navbar-toggler {
        margin-right: 15px !important;
    }
}
@media (max-width:768px){

.menu{
gap:0 !important;
padding:6px 0;
}

.menu a{
padding:8px 16px;
line-height:1.2;
}

}
/* 1. Ajuste para "Nuestra Hermandad" (La cita con borde rojo) */
.quote-highlight {
    background-color: #ffffff !important;
    border-bottom: 5px solid #CC0000 !important; /* El borde rojo inferior */
    border-radius: 15px !important;
    
    /* ESPACIADO INTERNO (Padding) */
    padding: 40px 30px !important; /* 40px arriba/abajo y 30px a los lados */
    
    /* ESPACIADO EXTERNO (Margin) */
    margin: 30px auto !important;  /* Separa la tarjeta del título y de lo que sigue */
    
    text-align: center !important;
    line-height: 1.8 !important;   /* Separa las líneas de texto para que se lean mejor */
    max-width: 800px !important;   /* Evita que en desktop se estire demasiado */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

/* 2. Ajuste para las tarjetas de Misión y Visión (Historia/Emaús) */
.mv-card {
    background-color: #f8f9fa !important;
    border-top: 6px solid #002D5A !important; /* El borde azul superior */
    border-radius: 12px !important;
    
    /* ESPACIADO INTERNO */
    padding: 35px 25px !important; /* Despega el título del borde azul y el texto de los lados */
    
    text-align: center !important;
    height: 100% !important;       /* Asegura que ambas tarjetas midan lo mismo */
}

/* Separación entre el título de la tarjeta y su párrafo */
.mv-card h3 {
    margin-bottom: 20px !important;
    color: #002D5A !important;
    font-weight: bold !important;
}

.mv-card p {
    line-height: 1.6 !important;
    margin: 0 !important;
}
/* --- AJUSTE GENERAL (Para Desktop) --- */
.quote-highlight {
    text-align: center;
    line-height: 1.8;
    padding: 40px 60px; /* Margen ancho en PC */
    margin: 30px auto;
    max-width: 85%;
    border-bottom: 5px solid #CC0000;
    background-color: #ffffff;
    border-radius: 15px;
}

/* --- AJUSTE ESPECÍFICO PARA MOBILE (Celulares) --- */
@media (max-width: 768px) {
    .quote-highlight {
        padding: 30px 20px !important; /* Reducimos los lados de 60px a solo 20px */
        max-width: 95% !important;     /* Permitimos que ocupe casi todo el ancho */
        font-size: 1rem !important;    /* Ajustamos un poco el tamaño de letra si es necesario */
    }

    .card-emaus-full {
        padding-left: 15px !important;  /* Quitamos el exceso de espacio de la sección completa */
        padding-right: 15px !important;
    }
}
@media (max-width: 768px) {
    /* Ajuste del contenedor de texto */
    .quienes-content {
        padding: 20px 15px !important; /* Reducimos los laterales al mínimo (15px) */
        max-width: 100% !important;    /* Forzamos que use todo el ancho */
        margin: 0 !important;
    }

    /* Ajuste del párrafo para que sea más legible en mano */
    .quienes-content p {
        text-align: left !important;   /* Evita huecos raros entre palabras en pantallas pequeñas */
        font-size: 1.05rem !important; /* Un poco más grande para no forzar la vista */
        line-height: 1.6 !important;   /* Espacio cómodo entre líneas */
        margin-bottom: 15px !important;
    }

    /* El título más compacto para celulares */
    .quienes-content .sub-title {
        font-size: 1.7rem !important;
        text-align: center !important;
        padding: 0 10px !important;
    }
}
@media (max-width: 768px) {
    /* Alineamos el contenido de texto a la derecha */
    .quienes-content {
        padding: 20px 15px !important;
        text-align: right !important; /* Cambio clave: de left/center a right */
    }

    .quienes-content p {
        text-align: right !important; /* Asegura que los párrafos sigan la misma línea */
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }

    /* Opcional: Si quieres que el título también esté a la derecha */
    .quienes-content .sub-title {
        text-align: right !important;
        font-size: 1.7rem !important;
        margin-bottom: 20px !important;
    }
}@media (max-width: 768px) {
    /* Ajuste del contenedor para aprovechar la pantalla */
    .quienes-content {
        padding: 20px 15px !important; /* Margen mínimo a los lados */
        max-width: 100% !important;
    }

    /* Justificación total para que pegue a izquierda y derecha */
    .quienes-content p {
        text-align: justify !important; 
        hyphens: auto;           /* Ayuda a que las palabras largas se corten con guion si es necesario */
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }

    /* El título queda mejor centrado para equilibrar la página */
    .quienes-content .sub-title {
        text-align: center !important;
        font-size: 1.8rem !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
    }
}