/* ===== 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;
    }
}
/* =========================================
   QUIÉNES SOMOS - MOBILE
========================================= */
/* =========================================
   QUIÉNES SOMOS - DESKTOP
========================================= */

.quienes-content-wrapper{
    max-width:1000px;
    margin:0 auto;
    padding:20px 40px 60px;
}

.quienes-content{
    max-width:1000px;
    margin:0 auto;
}

.quienes-content .sub-title{
    text-align:center;
    font-size:3rem;
    font-weight:800;
    color:#002b5c;
    margin-bottom:40px;
}

.quienes-content p{
    font-size:1.35rem;
    line-height:2;
    color:#333;
    text-align:justify;
    margin-bottom:35px;
}

/* Bloque final */


/* Texto destacado */

.quienes-content strong{
    color:#e60000;
    font-weight:800;
}

/* Bloque final */

/* Texto destacado */

.quienes-content strong{
    color:#e60000;
    font-weight:800;
}

.quienes-destacado{
    margin-top:40px;
    padding:35px;
    background:#f7f8fa;
  
    border-radius:20px;
    font-size:1.4rem;
    line-height:2;
    font-style:italic;
    color:#333;
}

.quienes-destacado span{
    display:block;
    margin-top:20px;
    text-align:center;
    font-size:1.6rem;
    font-weight:800;
    color:#e60000;
    letter-spacing:2px;
}

.quienes-destacado{
    background:#f7f8fa;
  
    border-radius:22px;
    padding:40px;
    margin:40px 0;
}

.quienes-destacado p{
    font-size:1.3rem;
    line-height:1.9;
    text-align:justify;
    font-style:italic;
    color:#444;
    margin-bottom:25px;
}

.quienes-destacado p:last-child{
    margin-bottom:0;
}

.quienes-destacado strong{
    color:#e60000;
    font-weight:800;
}

.quienes-destacado{
    display:block !important;
    width:100% !important;
    max-width:100% !important;

    background:#f8f9fb !important;

    border-radius:20px !important;

    padding:35px !important;
    margin:40px 0 !important;
}


@media (max-width:768px){

    .quienes-destacado{
        width: calc(100% - 30px) !important;
        margin: 20px auto !important;
        padding: 20px !important;
     
    }

    .quienes-destacado p{
        text-align: left !important;
        word-spacing: normal !important;
        letter-spacing: normal !important;
        font-size: 1.15rem !important;
        line-height: 1.9 !important;
        font-style: italic;
    }


@media (max-width: 768px) {

    .quienes-content-wrapper{
        width:100% !important;
        padding:0 12px !important;
        margin:0 auto !important;
    }

    .quienes-content{
        width:100% !important;
        max-width:100% !important;
        padding:25px 20px !important;
        margin:0 auto !important;
        box-sizing:border-box !important;
    }

    .quienes-content .sub-title{
        font-size:1.8rem !important;
        text-align:center !important;
        margin-bottom:20px !important;
        line-height:1.3 !important;
    }
    @media (max-width:768px){

    .quienes-destacado{
        width: calc(100% - 20px) !important;
        margin: 20px auto !important;
        padding: 25px !important;
        border-radius: 25px !important;
    }

    .quienes-destacado p{
        text-align: left !important;
        font-size: 1.15rem !important;
        line-height: 1.9 !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
    }

}

    @media (max-width: 768px) {

    .quienes-content p{
        text-align: justify !important;
        text-justify: inter-word !important;

        font-size: 1.25rem !important;
        line-height: 1.9 !important;
        margin-bottom: 18px !important;

        hyphens: none !important;
        -webkit-hyphens: none !important;
        -moz-hyphens: none !important;

        word-break: normal !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

}
    .quienes-content strong{
        font-weight:700 !important;
    }

}

/* =========================================
   QUE ES EMAUS - MOBILE
========================================= */

@media (max-width:768px){

    .quote-highlight-card{
        padding:20px !important;
    }

    
   @media (max-width:768px){

    .quote-highlight-card p{
        text-align:justify !important;
        font-size:1.05rem !important;
        line-height:1.35 !important;

        hyphens:none !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
    }

}

}
.emaus-intro-text{
    font-size:1.05rem;
    line-height:1.3;
    text-align:center;
}

@media(max-width:768px){

    .emaus-intro-text{
        text-align:justify;
       font-size:1.05rem;
       line-height:1.3;
    }

}

/* =========================================
   ¿CÓMO FUNCIONA? - MOBILE
========================================= */

@media (max-width:768px){

    .emaus-subtitle{
        font-size:1.8rem !important;
        text-align:center !important;
        margin-bottom:25px !important;
    }

    .emaus-box-elegant h4{
        font-size:1.25rem !important;
        line-height:1.4 !important;
        text-align:center !important;
        margin-bottom:12px !important;
    }

    .emaus-box-elegant p{
        font-size:1.25rem !important;
        line-height:1.8 !important;
        text-align:justify !important;

        hyphens:none !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
    }

    .icon-circle{
        width:60px !important;
        height:60px !important;
        margin:0 auto 15px auto !important;
    }

}

/* =========================================
   CIERRE E INSPIRACIÓN BÍBLICA - MOBILE
========================================= */

@media (max-width:768px){

    .emaus-closing,
    .inspiration-text{
        font-size:1rem !important;
        line-height:1.8 !important;
        text-align:justify !important;
        color:#333 !important;

        hyphens:none !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;

        margin-bottom:18px !important;
    }

    .emaus-subtitle-small{
        font-size:1.4rem !important;
        text-align:center !important;
        margin:15px 0 !important;
        color:#002b5c !important;
    }

    .bible-reference{
        font-size:1rem !important;
        font-weight:700 !important;
        text-align:center !important;
        margin-top:15px !important;
        color:#e60000 !important;
    }

    .bible-icon{
        font-size:2rem !important;
        display:block !important;
        text-align:center !important;
        margin-bottom:15px !important;
    }

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

    .emaus-inspiration-box{
        background:#002b5c !important;
    }

    .emaus-subtitle-small{
        color:#ffffff !important;
        font-size:1.5rem !important;
        font-weight:700 !important;
        text-align:center !important;
    }

    .inspiration-text{
        color:#ffffff !important;
        font-size:1rem !important;
        line-height:1.8 !important;
        text-align:justify !important;

        hyphens:none !important;
        word-break:normal !important;
    }

    .inspiration-text strong{
        color:#ffffff !important;
    }

    .bible-icon{
        color:#ffffff !important;
    }

}