/* ==========================================================================
   Módulo: Mapa Full Width y Redes Sociales
   ========================================================================== */

.module-mapa-social {
    width: 100%;
    background-color: var(--color-white, #ffffff);
}

/* =====================================================
   EL MAPA DE GOOGLE
   ===================================================== */
.mapa-fullwidth-wrap {
    width: 100%;
    height: 450px; /* Altura ideal para desktop */
    overflow: hidden;
    line-height: 0; /* Evita espacios en blanco debajo del iframe */
}

/* Secuestramos el iframe de Google para forzar nuestro diseño */
.mapa-fullwidth-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    
    /* EL TRUCO MAGISTRAL: Convertir a escala de grises */
    filter: grayscale(100%) contrast(90%);
    -webkit-filter: grayscale(100%) contrast(90%);
    
    /* Previene el puntero de eventos raros mientras se hace scroll (opcional) */
    pointer-events: auto;
}

/* =====================================================
   LA BARRA DE REDES SOCIALES
   ===================================================== */
.social-bar-wrap {
    padding: 60px 0;
    background-color: var(--color-white, #ffffff);
}

.social-bar-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Espaciado entre los iconos */
}

.social-bar-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary); /* Casi negro, calcado de tu captura */
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Controlando el SVG que pegues desde ACF */
.social-bar-item svg {
    width: 30px;
    max-width: 30px; /* Tamaño pequeño y elegante */
    height: auto;
    fill: currentColor; /* Hereda el color del enlace (.social-bar-item) */
    display: block;
}

/* Efecto al pasar el mouse */
.social-bar-item:hover {
    color: color-mix(in srgb, var(--color-primary), 10% transparent); /* Cambia al rojo corporativo */
    transform: translateY(-3px); /* Pequeño salto hacia arriba */
}

/* =====================================================
   RESPONSIVE (Tablets y Móviles)
   ===================================================== */
@media (max-width: 768px) {
    .mapa-fullwidth-wrap {
        height: 350px; /* El mapa se hace un poco más bajo en móvil */
    }
    
    .social-bar-wrap {
        padding: 40px 0;
    }
    
    .social-bar-inner {
        gap: 30px;
    }
}