/* --- ESTILOS DE CONTACTO --- */
.contacto-ficha {
    min-height: 600px;
    align-items: stretch;
}

.decorativa {
    background: linear-gradient(rgba(0, 43, 92, 0.8), rgba(0, 43, 92, 0.8)), 
                url('../img/parroquias/parroquia01.jpg') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.overlay-text i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: var(--rojo-emaus);
}

.form-emaus {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--azul-emaus);
}

.form-group input, 
.form-group select, 
.form-group textarea {
    padding: 12px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
}

.form-group input:focus, 
.form-group select:focus {
    outline: none;
    border-color: var(--azul-emaus);
    box-shadow: 0 0 0 3px rgba(0, 43, 92, 0.1);
}

<header class="contacto-header">
  <div class="contacto-wrapper">
    <h1>Ponte en Contacto</h1>
    <p>"Quédate con nosotros, porque atardece y el día ya ha declinado"</p>
  </div>
</header>

/* Responsive */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .contacto-ficha { flex-direction: column; }
    .decorativa { height: 150px; }
}
.footer-bottom {
    text-align: center;
}
.footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 0.85rem;
}
/* ===== Ajuste ancho footer ===== */

.site-footer {
    padding-left: 10px;   /* antes 20px o más */
    padding-right: 10px;
}

.site-footer .footer-container,
.site-footer .footer-top,
.site-footer .footer-menu {
    max-width: 100%;      /* elimina límite estrecho */
    padding-left: 5px;
    padding-right: 5px;
}
/* =============================
   FORMULARIO MÁS ESTRECHO
   ============================= */

.contacto-ficha {
  max-width: 950px;   /* antes ocupa demasiado */
  margin: 0 auto;     /* lo centra */
}
.contacto-ficha .info-contenedor {
  padding: 2rem 2rem;
}
.form-emaus input,
.form-emaus select,
.form-emaus textarea {
  width: 100%;
}
/* =============================
   CENTRALIZAR TITULOS CONTACTO
   ============================= */

.contacto-wrapper {
  max-width: 950px; /* mismo ancho que contacto-ficha */
  margin: 0 auto;
  padding: 0 1rem;
}
/* ===== Alinear títulos con formulario ===== */

.contacto-header {
  max-width: 950px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
/* Ajuste para que el formulario no se meta debajo del header */
.contacto-section, .form-container { 
    margin-top: 80px !important; /* Espacio para que baje el contenido */
    padding-top: 20px;
}

/* Ajuste específico para el texto que se ve cortado arriba */
.contacto-header-text, .quote-text {
    margin-top: 10px;
    display: block;
    padding: 0 15px;
}

@media (max-width: 768px) {
    /* 1. Empujamos el inicio del contenido de contacto hacia abajo */
    /* Ajusta el selector si tu contenedor principal tiene otro nombre */
    .contacto-page, 
    main, 
    #contacto { 
        padding-top: 100px !important; /* Espacio suficiente para que baje el texto */
    }

    /* 2. Ajuste para la frase "Quédate con nosotros..." */
    /* Si es un párrafo o h3, asegúrate de que no tenga márgenes negativos */
    .contacto-header p, 
    .frase-emaus {
        margin-top: 10px !important;
        padding: 0 20px !important;
        line-height: 1.4 !important;
        font-size: 0.95rem !important;
        text-align: center;
    }

    /* 3. El contenedor azul de "Estamos para servirte" */
    /* Aseguramos que respete el flujo y no se amontone */
    .servirte-banner {
        margin-top: 20px !important;
    }
}
/* Ajuste equilibrado para móvil */
@media (max-width: 768px) {
    /* 1. El contenedor principal del título */
    .contacto-header {
        padding-top: 85px !important; /* Espacio justo para librar el header fixed */
        padding-bottom: 20px !important;
        background-color: #ffffff; /* O el color de fondo que desees */
        text-align: center;
    }

    /* 2. El título "Ponte en Contacto" */
    .contacto-header h1 {
        font-size: 1.8rem !important;
        margin-bottom: 10px !important;
        color: #7b1f1f; /* Rojo Emaús */
        margin-top: 0 !important;
    }

    /* 3. La frase "Quédate con nosotros..." */
    .contacto-header p {
        font-size: 0.95rem !important;
        padding: 0 20px !important;
        line-height: 1.4 !important;
        color: #555 !important;
        margin: 0 auto !important;
        max-width: 90%;
    }
}
@media (max-width: 768px) {
    /* 1. Reducimos el contenedor gris/blanco de arriba */
    .contacto-header {
        padding-top: 70px !important; /* Espacio mínimo para no chocar con el logo */
        padding-bottom: 10px !important; /* Pegamos más la frase al banner azul */
        min-height: auto !important; /* Quitamos alturas mínimas forzadas */
    }

    /* 2. Ajustamos los márgenes de los textos internos */
    .contacto-header h1 {
        font-size: 1.6rem !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .contacto-header p {
        margin-bottom: 10px !important;
        font-size: 0.9rem !important;
    }

    /* 3. El banner azul con las manos */
    /* Si tiene un margen superior muy grande, lo reducimos */
    .servirte-banner, .blue-section {
        margin-top: 0 !important; 
        padding: 15px 0 !important;
    }
}
@media (max-width: 768px) {
    /* 1. Eliminamos el espacio gris excesivo */
    .contacto-header {
        padding-top: 80px !important; /* Espacio para que no lo tape el logo */
        padding-bottom: 0 !important; /* Quitamos el espacio de abajo */
        height: auto !important;      /* Forzamos a que no tenga altura fija */
        min-height: 0 !important;    /* Eliminamos mínimos que crean el hueco */
    }

    /* 2. Ajustamos el contenedor de los textos */
    .contacto-header .main-container {
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
    }

    .contacto-header h1 {
        font-size: 1.7rem !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .contacto-header p {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }

    /* 3. Subimos el banner azul */
    .blue-section, .servirte-banner {
        margin-top: 0 !important; 
        padding: 10px 0 !important; /* Lo hacemos más delgado en móvil */
    }
}

@media (max-width: 768px) {
    /* Atacamos el contenedor gris para que NO tenga altura fija */
    .contacto-header {
        height: auto !important; 
        min-height: 0 !important; 
        max-height: none !important;
        padding-top: 85px !important; /* Para que no lo tape el logo */
        padding-bottom: 5px !important; /* Casi pegado al azul */
        display: block !important;
    }

    /* Eliminamos cualquier espacio sobrante dentro del contenedor de texto */
    .contacto-header .main-container {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        height: auto !important;
    }

    /* Subimos el banner azul eliminando márgenes superiores */
    /* Ajusta este nombre si tu sección azul se llama diferente */
    .blue-section, 
    .servirte-banner, 
    div:has(> .fa-hands-praying),
    .contacto-header + div {
        margin-top: -1px !important; /* Pequeño truco para solapar y eliminar líneas blancas */
        padding: 10px 0 !important;
    }
}

@media (max-width: 768px) {
    /* 1. Resetear el contenedor gris */
    .contacto-header {
        display: block !important; /* Desactivamos Flexbox si existe */
        height: auto !important;
        min-height: 0 !important;
        padding-top: 85px !important; /* Espacio para el logo fixed */
        padding-bottom: 5px !important; /* Casi pegado al azul */
    }

    /* 2. Resetear el contenedor del texto */
    .contacto-header .main-container {
        display: block !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. Ajustar los textos para que no ocupen espacio extra */
    .contacto-header h1 {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        padding-top: 0 !important;
    }

    .contacto-header p {
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

    /* 4. Succionar el banner azul hacia arriba */
    /* Usamos el nombre de la clase azul que tengas */
    .blue-section, .servirte-banner, .Estamos-para-servirte {
        margin-top: 0 !important;
        padding: 10px 0 !important;
    }
}@media (max-width: 768px) {
    /* 1. Forzamos al bloque gris a reducir su altura al mínimo */
    .contacto-header {
        height: auto !important;
        min-height: 140px !important; /* Altura suficiente para el logo + título */
        padding-top: 75px !important; /* Espacio para que el logo no tape el texto */
        padding-bottom: 0 !important; /* Eliminamos el aire de abajo */
        display: block !important;    /* Quitamos flexbox para que no se estire */
    }

    /* 2. El contenedor de los textos (H1 y P) */
    .contacto-header .main-container {
        height: auto !important;
        padding-bottom: 5px !important; /* Reducimos el margen interno */
    }

    /* 3. SUBIR EL BANNER AZUL */
    /* Este es el truco clave: eliminamos cualquier margen superior 
       y usamos un margen negativo si es necesario para pegarlo más */
    .blue-section, .servirte-banner {
        margin-top: 0 !important; 
        position: relative;
        z-index: 2;
        padding: 12px 0 !important; /* Banner más delgado en móvil */
    }

    /* 4. Subir el Formulario */
    .contacto-section, .container {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }
}
/* AJUSTE PARA ESCRITORIO (DESKTOP) */
@media (min-width: 769px) {
    .contacto-header {
        background-color: #f4f4f4; /* Color gris suave de fondo para que se note */
        padding-top: 120px !important; /* Espacio para que baje de la barra de navegación */
        padding-bottom: 60px !important;
        text-align: center;
        width: 100%;
        display: block !important;
    }

    .contacto-header h1 {
        color: #7b1f1f !important; /* Rojo Emaús para el título */
        font-size: 2.5rem !important;
        margin-bottom: 10px !important;
    }

    .contacto-header p {
        color: #555 !important;
        font-size: 1.2rem !important;
        font-style: italic;
    }

    /* Aseguramos que el banner azul no suba demasiado en Desktop */
    .blue-section, .servirte-banner {
        margin-top: 0 !important;
        padding: 40px 0 !important;
    }
}
@media (max-width: 768px) {
    /* 1. Reducimos el contenedor gris al mínimo */
    .contacto-header {
        padding-top: 80px !important; /* Espacio para el logo */
        padding-bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        background-color: #f8f8f8 !important; /* Asegura un color uniforme */
    }

    /* 2. Ajustamos los textos para que no ocupen espacio de más */
    .contacto-header .main-container {
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
    }

    .contacto-header h1 {
        font-size: 1.6rem !important;
        margin-bottom: 5px !important;
    }

    /* 3. EL TRUCO CLAVE: Subimos todo lo que está abajo */
    .blue-section, 
    .servirte-banner,
    div:has(> .fa-hands-praying) {
        margin-top: -40px !important; /* Sube el banner azul sobre el gris */
        position: relative;
        z-index: 10;
        padding: 15px 0 !important;
    }

    /* 4. Ajustamos el formulario para que también suba */
    .contacto-section {
        margin-top: -10px !important;
    }
}
@media (max-width: 768px) {
    /* 1. Obligamos al bloque gris a colapsar */
    .contacto-header {
        height: 180px !important; /* Altura fija pequeña para móvil */
        min-height: 180px !important; 
        padding-top: 80px !important; /* Espacio para el logo */
        padding-bottom: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }

    /* 2. Ajustamos los textos para que quepan en esos 180px */
    .contacto-header h1 {
        font-size: 1.5rem !important;
        margin: 5px 0 !important;
    }

    .contacto-header p {
        font-size: 0.9rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* 3. EL CAMBIO RADICAL: Subimos el banner azul a la fuerza */
    /* Usamos un margen negativo grande para "succionar" todo lo de abajo */
    .blue-section, 
    .servirte-banner,
    .contacto-header + div {
        margin-top: -30px !important; /* Esto obliga al bloque azul a subir al área gris */
        position: relative !important;
        z-index: 99 !important;
    }

    /* 4. Subimos también el formulario */
    .contacto-section, 
    #contacto-form {
        margin-top: -20px !important;
    }
}
@media (max-width: 768px) {
    /* 1. Quitamos el color gris para que no se note el hueco */
    .contacto-header {
        background: transparent !important;
        background-color: transparent !important;
        height: auto !important;
        min-height: 0 !important;
        padding-top: 80px !important; /* Espacio para el logo fixed */
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 2. Eliminamos márgenes del contenedor de texto */
    .contacto-header .main-container {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    /* 3. SUBIDA AGRESIVA DEL BANNER AZUL */
    /* Usamos un margen negativo de 80px para obligarlo a subir */
    .blue-section, 
    .servirte-banner,
    div:has(> .fa-hands-praying) {
        margin-top: -80px !important; 
        position: relative !important;
        z-index: 999 !important;
        padding: 15px 0 !important;
    }

    /* 4. Subimos también el formulario para que no quede un hueco blanco */
    .contacto-section, .form-container {
        margin-top: -20px !important;
    }
}
@media (max-width: 768px) {
    /* 1. Reducimos el contenedor gris al mínimo absoluto */
    .contacto-header {
        padding-top: 80px !important; 
        padding-bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* 2. SUBIDA MÁS FUERTE DEL BANNER AZUL */
    /* Aumentamos el margen negativo de -40px a -80px o -100px */
    .blue-section, 
    .servirte-banner,
    div:has(> .fa-hands-praying) {
        margin-top: -95px !important; /* Ajusta este número hasta que toque la frase */
        position: relative !important;
        z-index: 10 !important;
    }

    /* 3. El formulario también debe subir para no dejar hueco blanco */
    .contacto-section {
        margin-top: -15px !important;
    }
}
/* --- AJUSTE PARA LA PÁGINA DE CONTACTO EN MÓVIL --- */
@media (max-width: 768px) {
    
    /* 1. Bajamos la cabecera de contacto para que no la tape el menú */
    .contacto-header {
        padding-top: 120px !important; /* Espacio extra arriba */
        padding-bottom: 40px !important;
        background-color: #ffffff !important;
        text-align: center !important;
    }

    /* 2. Ajustamos el título "Ponte en Contacto" */
    .contacto-header h1 {
        font-size: 1.8rem !important; /* Un poco más pequeño para celulares */
        margin-bottom: 15px !important;
        color: #002D5A !important; /* Azul oscuro */
    }

    /* 3. Ajustamos la frase bíblica (Cita) */
    .contacto-header p {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        padding: 0 25px !important; /* Margen a los lados para que respire */
        color: #555 !important;
        font-style: italic !important;
    }

    /* 4. Ajuste para el bloque azul "Estamos para servirte" */
    .contacto-info-banner { /* Asegúrate de que esta sea la clase del cuadro azul */
        margin-top: 20px !important;
        padding: 30px 15px !important;
    }
}
@media (max-width: 768px) {
    /* 1. Ajuste del banner azul para que suba */
    .contacto-info-banner { 
        padding-top: 5px !important;    /* Casi elimina el espacio arriba del icono */
        padding-bottom: 20px !important; /* Mantiene un espacio limpio abajo */
        margin-top: 0px !important;     /* Elimina cualquier separación con el texto de arriba */
    }

    /* 2. Acercar el icono de las manos al texto */
    .contacto-info-banner i, 
    .contacto-info-banner img {
        margin-bottom: 0px !important;  /* Pega el icono a la frase "Estamos para servirte" */
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 3. Ajuste del texto "Estamos para servirte" */
    .contacto-info-banner p {
        margin-top: 5px !important;    /* Reduce la distancia con las manos */
        font-size: 1rem !important;
        letter-spacing: 0.5px !important;
    }
}
/* Corrección definitiva para el título tapado en móviles */
@media (max-width: 768px) {
    
    /* 1. Bajamos el contenedor del título */
    .contacto-header {
        margin-top: 90px !important; /* Este espacio empuja el texto debajo del menú */
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        background-color: white !important;
    }

    /* 2. Ajustamos el tamaño del h1 para que no ocupe tanto espacio */
    .contacto-header h1 {
        font-size: 1.8rem !important;
        text-align: center !important;
        margin-bottom: 5px !important;
        color: #002d5a !important; /* Azul de la hermandad */
    }

    /* 3. Ajustamos la cita bíblica */
    .contacto-header p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin: 0 auto !important;
        width: 90% !important;
        text-align: center !important;
    }

    /* 4. Subimos el bloque azul de las manos para que no quede tanto hueco */
    .foto-contenedor.decorativa {
        margin-top: -10px !important;
    }
}
/* SOLUCIÓN FINAL PARA MÓVIL: TÍTULO VISIBLE */
@media (max-width: 768px) {
    
    /* 1. Empujamos el encabezado de contacto hacia abajo */
    .contacto-header {
        margin-top: 110px !important; /* Espacio para que baje del menú */
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        background-color: #ffffff !important;
        display: block !important;
        position: relative !important;
    }

    /* 2. Ajustamos el título para que se vea completo */
    .contacto-header h1 {
        font-size: 1.8rem !important;
        color: #002d5a !important; /* Azul de la hermandad */
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 3. Ajuste de la cita bíblica */
    .contacto-header p {
        font-size: 1.1rem !important;
        margin-top: 10px !important;
        line-height: 1.4 !important;
        padding: 0 15px !important;
        color: #555555 !important;
    }

    /* 4. Subimos el bloque azul de las manos (quitar el espacio vacío) */
    .foto-contenedor.decorativa {
        margin-top: -5px !important; 
        padding: 15px 0 !important;
        min-height: auto !important;
    }

    .overlay-text {
        position: relative !important;
        top: 0 !important;
        padding: 0 !important;
    }
}