/* =========================================
   ESTILOS EXCLUSIVOS PARA "CONTACTOS"
   ========================================= */

.banner-pagina {
    background-color: var(--color-primario);
    color: white;
    text-align: center;
    padding: 60px 20px;
    margin-bottom: 40px;
}

/* Layout en dos columnas (Información Izquierda, Formulario Derecha) */
.contenedor-contacto {
    display: flex;
    max-width: 1100px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
    gap: 50px; /* Separación entre ambas columnas */
}

/* Cada columna toma el 50% del espacio disponible */
.info-contacto, .formulario-contacto {
    flex: 1;
}

/* Estilos de los textos de información */
.info-contacto h2 {
    color: var(--color-primario);
    margin-bottom: 20px;
}

.lista-datos {
    list-style: none; /* Quita los puntos */
    margin-bottom: 30px;
}

.lista-datos li {
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #444;
}

.lista-datos strong {
    color: var(--color-primario); /* Resalta los títulos en azul */
}

/* Estilo del contenedor del mapa */
.info-contacto h3 {
    margin-bottom: 15px;
    color: var(--color-primario);
}

.mapa-contenedor {
    border: 2px solid #ccc;
    border-radius: 8px;
    overflow: hidden; /* Para que el mapa no se salga de las esquinas redondeadas */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* =========================================
   ESTILOS DEL FORMULARIO
   ========================================= */
.formulario-contacto h2 {
    color: var(--color-primario);
    margin-bottom: 20px;
}

.formulario-contacto form {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-top: 5px solid var(--color-primario); /* Detalle visual arriba */
}

/* Estilo contenedor de cada input y label */
.grupo-form {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column; /* Pone el label arriba del input */
}

.grupo-form label {
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

/* Diseñando las cajas de texto */
.grupo-form input, 
.grupo-form textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: inherit; /* Hereda la fuente general del body */
    transition: border-color 0.3s; /* Animación al dar clic */
}

/* Efecto Focus: Cuando el usuario hace clic dentro de la caja para escribir */
.grupo-form input:focus, 
.grupo-form textarea:focus {
    outline: none; /* Quita el borde feo por defecto de los navegadores */
    border-color: var(--color-secundario); /* Borde amarillo al seleccionar */
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.5); /* Sombra exterior amarilla */
}

/* Diseño del Botón de Enviar */
.btn-enviar {
    background-color: var(--color-primario);
    color: white;
    border: none;
    padding: 15px 20px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    width: 100%; /* Botón ancho de lado a lado */
    transition: background-color 0.3s, transform 0.1s;
}

.btn-enviar:hover {
    background-color: #002244; /* Azul más oscuro al pasar el mouse */
}

.btn-enviar:active {
    transform: scale(0.98); /* Pequeño efecto de "hundimiento" al hacer clic */
}

/* Media Query para móviles: Colapsa a 1 columna */
@media (max-width: 768px) {
    .contenedor-contacto {
        flex-direction: column; /* Pone el mapa arriba y formulario abajo */
    }
}