/* contacto.css - Estilos específicos de la página contacto.html */

/* Asegúrate de que las variables CSS (como --padding-seccion, --color-principal, etc.)
   estén definidas en tu archivo CSS principal (e.g., style.css) */

/* Sección principal de Contacto */
#contacto-principal {
    padding: var(--padding-seccion, 80px 20px); /* Usar variable, con fallback */
    background-color: var(--color-blanco, #ffffff);
    text-align: center;
}

#contacto-principal h1 {
    font-size: var(--h1-size, 2.8em);
    color: var(--color-principal, #004a8f);
    margin-bottom: 15px;
}

#contacto-principal .introduccion {
    font-size: 1.1em;
    color: var(--color-texto-oscuro, #333);
    max-width: 800px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
}

.contenido-interno {
    max-width: var(--max-width-contenido, 1100px);
    margin: 0 auto;
    padding: 0 15px;
}

/* Estilos del Grid de Contacto (Formulario e Información) */
.contacto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Ajustado para un buen tamaño */
    gap: 30px; /* Espacio entre los cuadros */
    align-items: flex-start; /* Alinea los elementos al inicio */
    margin-top: 30px;
    margin-bottom: 40px;
}

/* Contenedores individuales del formulario y la información */
.formulario-container,
.info-contacto-container {
    background-color: var(--color-gris-claro, #f8f9fa);
    padding: 30px;
    border-radius: var(--border-radius-suave, 8px);
    box-shadow: 0 4px 12px var(--color-sombra, rgba(0, 0, 0, 0.1));
    text-align: left;
    height: min-height: Xpx; /* Permite que la altura se ajuste al contenido (incluyendo el mapa) */
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    justify-content: flex-start; /* Alinea el contenido al inicio */
}

.formulario-container h2,
.info-contacto-container h2 {
    font-size: var(--h2-size, 2em);
    color: var(--color-principal, #004a8f);
    margin-bottom: 20px;
    text-align: center;
}

/* Estilos del Formulario */
.contacto-form .form-group {
    margin-bottom: 15px;
}

.contacto-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-texto-oscuro, #333);
    font-size: 0.95em;
}

.contacto-form input[type="text"],
.contacto-form input[type="email"],
.contacto-form input[type="tel"],
.contacto-form input[type="text"], /* Asunto */
.contacto-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-gris, #dee2e6);
    border-radius: var(--border-radius-pequeno, 4px);
    font-size: 1em;
    color: var(--color-texto-oscuro, #333);
    box-sizing: border-box;
}

.contacto-form textarea {
    resize: vertical;
    min-height: 90px;
}

.contacto-form input:focus,
.contacto-form textarea:focus {
    border-color: var(--color-secundario, #ffa500);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-secundario-rgb, 255, 165, 0), 0.2);
}

.btn-enviar {
    background-color: var(--color-principal, #004a8f);
    color: var(--color-blanco, #ffffff);
    padding: 12px 20px;
    border: none;
    border-radius: var(--border-radius-suave, 8px);
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color var(--transicion-rapida, 0.3s ease), transform var(--transicion-rapida, 0.3s ease);
    width: 100%;
    margin-top: auto; /* Empuja el botón al final del contenedor flex */
}

.btn-enviar:hover {
    background-color: var(--color-secundario, #ffa500);
    transform: translateY(-2px);
}

/* Mensajes de feedback del formulario (éxito/error) */
.mensaje-exito {
    color: green;
    background-color: #e6ffe6;
    border: 1px solid green;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: var(--border-radius-pequeno, 4px);
    font-weight: bold;
    text-align: center;
}

.mensaje-error {
    color: red;
    background-color: #ffe6e6;
    border: 1px solid red;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: var(--border-radius-pequeno, 4px);
    font-weight: bold;
    text-align: center;
}

/* Estilos de Información de Contacto */
.info-contacto-container .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--color-texto-oscuro, #333);
}

.info-contacto-container .info-item i {
    color: var(--color-principal, #004a8f);
    font-size: 1.2em;
    margin-right: 12px;
    width: 25px;
    text-align: center;
    padding-top: 3px;
}

.info-contacto-container .info-item p {
    margin: 0;
}

.info-contacto-container .info-item strong {
    color: var(--color-negro, #212529);
}

.info-contacto-container .info-item a {
    color: var(--color-secundario, #ffa500);
    text-decoration: none;
    transition: color var(--transicion-rapida, 0.3s ease);
}

.info-contacto-container .info-item a:hover {
    color: var(--color-principal, #004a8f);
    text-decoration: underline;
}

/* ESTILOS DEL MAPA DENTRO DEL CUADRO DE INFORMACIÓN */
.info-contacto-container .mapa-container {
    margin-top: 25px; /* Espacio superior para el mapa dentro del cuadro */
    border-radius: var(--border-radius-suave, 8px);
    overflow: hidden; /* Asegura que el iframe no se salga de los bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Sombra suave para el mapa */
    flex-grow: 1; /* Permite que el mapa ocupe el espacio restante si es un flex column, útil si el texto de info es muy corto */
}

.info-contacto-container .mapa-container iframe {
    width: 100%;
    height: 270px; /* Altura del mapa (ajusta según prefieras) */
    border: none;
    border-radius: var(--border-radius-pequeno, 4px);
}

/* Media Queries para responsividad */
@media (max-width: 992px) {
    .contacto-grid {
        grid-template-columns: 1fr; /* Una sola columna en tablets */
        gap: 30px;
    }

    .formulario-container,
    .info-contacto-container {
        padding: 30px; /* Reducir padding en tablets */
        min-height: auto; /* Permitir que la altura se ajuste en móviles */
    }

    .contacto-principal .introduccion {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    #contacto-principal {
        padding: 60px 15px;
    }

    #contacto-principal h1 {
        font-size: 2.2em;
    }

    #contacto-principal .introduccion {
        font-size: 1em;
        margin-bottom: 25px;
    }

    .formulario-container,
    .info-contacto-container {
        padding: 25px;
    }

    .formulario-container h2,
    .info-contacto-container h2 {
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    .contacto-form .form-group {
        margin-bottom: 15px;
    }

    .contacto-form input,
    .contacto-form textarea {
        padding: 10px;
    }

    .btn-enviar {
        padding: 12px 20px;
        font-size: 1em;
    }

    .info-contacto-container .mapa-container {
        margin-top: 20px;
    }

    .info-contacto-container .mapa-container iframe {
        height: 200px;
    }
}