.seccion-mision-vision {
    padding: 60px 20px;
    text-align: center;
    background-color: #ffffff;
}

.titulo-gavy {
     font-family: 'Poppins', sans-serif;
    font-size: 50px;
    color: #358cff;
    margin-bottom: 50px;
    font-weight: 800;
}

.contenedor-lentes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* El círculo exterior con la imagen y el tinte azul */
.cristal {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* CONFIGURACIÓN DE IMAGEN + AZUL */
    background-image: url('../img/local.png'); /* Reemplaza con tu ruta */
    background-size: cover;
    background-position: center;
    background-color: #358cff; /* El color azul que quieres */
    background-blend-mode: multiply; /* Esto hace que la imagen se vea azulada */
    
    transition: transform 0.3s ease;
    position: relative;
}

/* El círculo blanco interior */
.contenido-blanco {
    width: 75%; /* Ajusta este % para que el borde azul sea más grueso o delgado */
    height: 75%;
    background-color: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
}

.cristal:hover {
    transform: scale(1.05);
}

.contenido-blanco h3 {
     font-family: 'Poppins', sans-serif;
    color: #358cff;
    margin-bottom: 10px;
    font-size: 25px;
}

.contenido-blanco p {
    font-size: 14px;
    color: #000000;
}

/* El puente (ahora azul con imagen también) */
.puente {
    width: 80px;
    height: 30px;
    background-image: url('../img/local.png');
    background-size: cover;
    background-color: #358cff;
    background-blend-mode: multiply;
    z-index: 1;
    margin: 0 -10px; /* Para que se meta un poco tras los lentes */
}

/* --- RESPONSIVO --- */
@media (max-width: 850px) {
    .contenedor-lentes {
        flex-direction: column;
    }

    .puente {
        display: none;
    }

    .cristal {
        width: 300px;
        height: 300px;
        margin-bottom: 20px;
    }
}