/* ---------------------------------------------------
    CONTACTO
    Estilos para la sección de contacto de la página
----------------------------------------------------- */

/* Contenedor principal de la sección CONTACTO */
#-CONTACTO {
    display: flex;                   /* Usa flexbox para el layout */
    flex-direction: column;          /* Organiza los elementos en columna */
    font-family: Montserrat;         /* Fuente principal */
    background: #efefef;            /* Color de fondo gris claro */
    padding: 40px 0;                /* Espaciado vertical interno */
    color: #777;                    /* Color de texto gris */
}

/* Contenedor secundario para organizar el contenido */
#-CONTACTO .container {
    display: flex;                   /* Flexbox para layout horizontal */
    flex-direction: row;             /* Elementos en fila por defecto */
}

/* Estilos para cada ítem de información de contacto */
.info-item {
    background: #fff;               /* Fondo blanco */
    padding: 10px;                  /* Espaciado interno */
    margin: 15px;                   /* Margen exterior */
}

/* Control de visibilidad de elementos span (responsive) */
.info-item span, 
.info-item spane, 
.info-item spaner {
    display: none;                  /* Ocultos por defecto */
}

/* Estilos para iconos Font Awesome */
.info .fas {
    margin: 0 15px;                 /* Margen horizontal */
    color: #007bff;                 /* Color azul */
    font-weight: bold;              /* Negrita */
}

/* Contenedor del mapa */
.map {
    display: flex;                   /* Flexbox para centrado */
    justify-content: center;        /* Centrado horizontal */
    align-items: center;            /* Centrado vertical */
    margin: 0 15px;                 /* Margen horizontal */
    height: 230px;                  /* Altura fija */
}

/* Estilos para el iframe del mapa */
.map iframe {
    height: 100%;                   /* Altura completa del contenedor */
    width: 100%;                    /* Ancho completo del contenedor */
}

/* Estilos para el título del formulario */
.formulario h3 {
    padding: 18px 0 0 18px;        /* Espaciado interno */
    font-family: Montserrat;        /* Fuente */
}

/* Contenedor para los botones del formulario */
.contactFormButtons {
    display: flex;                   /* Flexbox para layout */
    flex-direction: row;             /* Elementos en fila por defecto */
    justify-content: space-evenly;   /* Distribución equitativa del espacio */
}

/* ---------------------------------------------------
    MEDIA QUERIES - Adaptaciones responsive
----------------------------------------------------- */

/* Tablet en orientación horizontal (768px a 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contactFormButtons {
        flex-direction: column;      /* Botones en columna */
    }
    .contactFormButtons button {
        margin-bottom: 15px;         /* Espaciado entre botones */
    }
}

/* Dispositivos móviles (hasta 767px) */
@media only screen and (max-width: 767px) {
    #-CONTACTO .container {
        flex-direction: column;      /* Contenido en columna */
    }
    #-CONTACTO .info {
        margin-bottom: 20px;         /* Margen inferior para sección info */
    }
}

/* Pantallas muy pequeñas (hasta 418px) */
@media only screen and (max-width: 418px) {
    .contactFormButtons {
        flex-direction: column;      /* Botones en columna */
    }
    .contactFormButtons button {
        margin-bottom: 15px;         /* Espaciado entre botones */
    }
    .info-item span {
        display: inline-block;       /* Muestra elementos span ocultos */
    }
}

/* Pantallas extremadamente pequeñas (hasta 296px) */
@media only screen and (max-width: 296px) {
    /* Muestra todos los elementos span ocultos */
    .info-item span, 
    .info-item spane, 
    .info-item spaner {
        display: inline-block;
    }
}