/* ===== banda_datos_contacto_multiple ===== */

/* --- Fondo --- */
/* Añadir imagen de fondo en background-image según el proyecto */
/*.datos_contacto_multiple .fondo_corporativo {*/
/*    background-image: linear-gradient(rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);*/
/*}*/

/* --- Estructura --- */
.datos_contacto_multiple{ background-color: #1c1c1c; background-image: url(../img/fondo_contacto.jpg); background-attachment: fixed; background-size: cover;} 

.datos_contacto_multiple h1 {
    font-size: clamp(1.25rem, 1.131rem + 0.6vw, 1.875rem);
    color: #fff;
}

.datos_contacto_multiple .card {
    background-color: #fff;
    border:3px;
    border-radius:50px 50px 20px 20px;
    overflow: hidden;
    border-color: #666 !important;
    box-shadow: 0 0 35px 5px rgba(0, 0, 0, 0.25), inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);
}

.datos_contacto_multiple .card-body { background-color: #F8F9FA; font-size: 0.85em; color:#333; padding: 1rem 1.5rem;}
.datos_contacto_multiple .card-body i { display: inline-block; width: 15px; }
.datos_contacto_multiple .card-title { font-size:clamp( 1.3em, 2vw, 1.7em);  }
.datos_contacto_multiple address {font-weight: 300;  display: grid; grid-template-columns: 20px auto;}

.datos_contacto_multiple .card-text p { color: #333 !important; font-size: 0.85em; }
.datos_contacto_multiple .card-text i{margin-top: 5px;}
.datos_contacto_multiple .card-text span { font-weight: 400; font-size: 0.9em; color: #000; }
.datos_contacto_multiple .card-text a { color: #333; }
.datos_contacto_multiple .card-text a:hover { color: #000; }

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .datos_contacto_multiple .card-body { display: block; }
}


/* ===== banda_datos_contacto_mapa ===== */

/* --- Datos de contacto --- */
.bloque_contacto { color: #333; }

.bloque_contacto h1 {
    font-size: clamp(2rem, 2.051rem + 2.25vw, 5rem);
    line-height: 100%;
    text-transform: uppercase;
    font-weight: 300;
    color: #000;
}

.bloque_contacto .area {
    font-weight: 400;
    position: relative;
    display: flex;
    flex-flow: row;
    align-items: center;
    place-content: flex-start;
    font-family: Jost, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    line-height: 1rem;
    text-transform: uppercase;
}
.bloque_contacto .area::after {
    content: "";
    height: 0.0625rem;
    flex: 1 1 0%;
    margin-left: 1.25rem;
    border-style: solid;
    border-width: 0;
    box-sizing: border-box;
}

.bloque_contacto .zona_contacto { position: relative; }
.bloque_contacto .direccion { line-height: 100%; }
.bloque_contacto .horario { line-height: 180%; }
.bloque_contacto .tel a { color: #333; transition: all 0.2s linear; }
.bloque_contacto .email a { color: #333; }
.bloque_contacto .email a:hover { color: #000; }

/* --- Redes sociales --- */
.bloque_contacto .zona_redes li {
    display: inline-block;
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #efefef;
    transition: all 0.2s linear;
}
.bloque_contacto .zona_redes li i { color: #212529; }
.bloque_contacto .zona_redes i {
    width: 1em;
    height: 1em;
    text-align: center;
    font-size: 1.5em;
    line-height: 50px;
}
.bloque_contacto .zona_redes li:hover { background-color: #212529; }
.bloque_contacto .zona_redes li:hover i { color: #fff; }

/* --- Mapa --- */
.bloque_contacto .altura_mapa { height: 730px; }
.bloque_contacto .mapboxgl-canvas {
    height: 100% !important;
    width: 100% !important;
}
.bloque_contacto .mapboxgl-popup-content { padding: 25px !important; border: transparent !important; color: #000; }
.bloque_contacto .mapboxgl-popup-content a { color: #000; }
.bloque_contacto .mapboxgl-popup-content a:focus-visible { outline: none !important; }

/* --- Responsive --- */
@media (max-width: 575.98px) {
    .bloque_contacto .altura_mapa { height: 400px; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .bloque_contacto .altura_mapa { height: 450px; }
}