.hero-section {
            /* 1. Imagen de fondo */
            background-image: url('../../assets/img/Contacto.png'); /* <-- REEMPLAZA ESTA URL CON TU IMAGEN */
            
            /* 2. Asegura que la imagen cubra toda la sección */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            /* 3. Ocupa toda la altura de la pantalla */
            height: 100vh; /* vh = viewport height */
            
            /* 4. Color de texto para que contraste con la imagen */
            color: white;

            /* 5. Sombra de texto para mejorar la legibilidad */
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
        }



        /* Estilos para la sección de Contacto */

/* --------------------------------------
   CARTA DE INFORMACIÓN (IZQUIERDA)
   -------------------------------------- */
.contact-info-card {
    /* Fondo oscuro, similar a tu blog */
    background-color: #212121; 
    color: white;
    padding: 30px;
    border-radius: 8px;
    height: 100%; /* Ocupa toda la altura de la columna */
}

.info-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 2px solid #006c36; /* Línea verde debajo del título */
    padding-bottom: 10px;
}

.contact-list {
    padding-left: 0;
    margin-bottom: 30px;
}

.contact-list li {
    font-size: 1.1rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.contact-list i {
    /* Color de los iconos: blanco o verde */
    color: #f1f1f1; 
    font-size: 1.5rem;
}

.schedule {
    font-size: 1rem;
    font-weight: 500;
    padding-top: 20px;
    border-top: 1px solid #444;
}

/* --------------------------------------
   CARTA DE FORMULARIO (DERECHA)
   -------------------------------------- */
.message-form-card {
    /* Fondo blanco o muy claro, contrastando con la info card */
    background-color: #ffffff; 
    color: #333;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.form-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 25px;
}

/* Estilos de los inputs */
.form-control {
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 10px 15px;
}

/* Estilo para el botón Enviar */
.btn-custom-send {
    background-color: #006c36;
    border-color: #006c36;
    color: white;
    font-weight: 600;
    padding: 10px 30px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn-custom-send:hover {
    background-color: #094b2a;
    border-color: #094b2a;
    color: white;
}

/* --------------------------------------
   MAPA
   -------------------------------------- */
.map-container {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* Asegura que el iframe se ajuste al borde */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    /* El iframe en el HTML debe tener width="100%" y height="450" */
    display: block; 
}



.toast {
    /* Añadir transición suave al aparecer/desaparecer (opcional, pero mejora la UX) */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    /* Sombras sutiles */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 
    border-radius: 8px !important;
}

.toast.text-bg-success {
    /* Color de éxito: usar el verde de tu diseño (5cb85c) */
    background-color: #5cb85c !important; 
}

.toast.text-bg-danger {
    /* Color de error: Rojo más profundo para impacto */
    background-color: #dc3545 !important; 
}

.toast-body {
    /* Asegurar que el cuerpo del mensaje esté centrado y legible */
    padding: 0.5rem 0.5rem;
}