:root {
    --bg-claro: #ECE4DA;
    --font-principal: 'Space Grotesk';
    --font-secundaria: 'Raleway';
    --ancho-contenedor: 90vw;
    --padding-h: 10vw;
    --padding-v: 5vw;
    --gap-fotos: 5vw;
}

.background-custom {
    background: url(/../assets/image/homeimage/redessociales.png) no-repeat center/cover;
    padding-top: 8vw;
    padding-bottom: 8vw;
    margin-bottom: -140px;
}

.fondo-claro {
    background-color: var(--bg-claro);
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    padding-bottom: var(--padding-v);
}

.caja-contadores {
    display: flex;
    gap: 5vw;
}

.info-contador {
    display: flex;
    justify-content: space-between;
    width: var(--ancho-contenedor);
    margin: 0 auto;
    padding: var(--padding-v) var(--padding-h);
}

.text strong,
.comunidad-title {
    font-family: var(--font-principal);
    font-weight: 700;
    font-size: 3vw;
    text-align: center;
}

.somos-text,
.contador,
.contador-text,
.textos {
    font-weight: 500;
}

.somos-text {
    font-size: 1.3vw;
    width: 28vw;
}

.contador {
    font-size: 3vw;
    margin-left: 4.5vw;
}

.contador-text {
    font-size: 1vw;
    width: 13vw;
    text-align: center;
}

.comunidad {
    width: var(--ancho-contenedor);
    padding: 0 var(--padding-h);
    margin: 0 auto;
}

.foto-comunidad {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
}

.foto {
    width: 26vw;
    height: 14vw;
}

.foto-doble {
    width: 15vw;
    height: 24vw;
}

.textos {
    font-family: var(--font-secundaria);
    font-size: 0.8vw;
    font-weight: 700;
    width: 15vw;
    margin-top: 2vw;
}

#texto1 {
    width: 24vw;
}

@media (max-width: 1500px) {
    .info-contador,
    .comunidad {
        padding: 0 8vw;
        margin-bottom: 2vw;
    }

    .text strong,
    .comunidad-title {
        font-size: 3.5vw;
    }

    .somos-text {
        font-size: 1.6vw;
        width: 32vw;
    }

    .contador {
        font-size: 3.4vw;
    }

    .contador-text {
        font-size: 1.3vw;
    }

    .foto {
        width: 28vw;
        height: 16vw;
    }

    .foto-doble {
        width: 17vw;
        height: 24vw;
    }

    .textos {
        font-size: 1.1vw;
        width: 16vw;
    }
}

@media (max-width: 1280px) {
    .info-contador,
    .comunidad {
        padding: 0 5vw;
        margin-bottom: 4vw;
    }

    .text strong,
    .comunidad-title {
        font-size: 3.8vw;
    }

    .somos-text {
        font-size: 1.8vw;
        width: 36vw;
    }

    .contador {
        font-size: 3.6vw;
        margin-left: 6vw;
    }

    .contador-text {
        font-size: 1.5vw;
        width: 15vw;
    }

    .foto {
        width: 30vw;
        height: 18vw;
    }

    .foto-doble {
        width: 19vw;
        height: 26vw;
    }

    .textos {
        font-size: 1.2vw;
        width: 18vw;
    }

    #texto1 {
        width: 26vw;
    }
}

@media (max-width: 1024px) {
    .info-contador,
    .comunidad {
        padding: 0 3vw;
        margin-bottom: 4vw;
    }

    .text strong,
    .comunidad-title {
        font-size: 5vw;
    }

    .comunidad-title {
        margin: 10vw 0 8vw;
    }

    .somos-text {
        font-size: 2vw;
        width: 40vw;
    }

    .contador {
        font-size: 4.3vw;
        margin-left: 6.2vw;
    }

    .contador-text {
        font-size: 1.8vw;
        width: 17vw;
    }

    .foto {
        width: 34vw;
        height: 20vw;
    }

    .foto-doble {
        width: 22vw;
        height: 28vw;
    }

    .textos {
        font-size: 1.4vw;
        width: 22vw;
    }

    #texto1 {
        width: 30vw;
    }
}

@media (max-width: 768px) {
    .info-contador {
        flex-direction: column;
        padding: 0 3vw;
        margin-bottom: 4vw;
    }

    .text {
        margin: 0 auto;
    }

    .text strong {
        font-size: 5.5vw;
        text-align: center;
        margin-left: 1.5vw;
    }

    .caja-contadores {
        margin: 3vw auto 0;
    }

    .somos-text {
        font-size: 2vw;
        width: 49vw;
        text-align: center;
    }

    .contador {
        font-size: 5vw;
        margin-left: 7.5vw;
    }

    .comunidad {
        padding: 0 3vw;
    }

    .contador-text {
        font-size: 2vw;
        width: 20vw;
    }

    .comunidad-title {
        font-size: 5.5vw;
        margin: 10vw 0 8vw;
    }

    .foto-comunidad {
        gap: var(--gap-fotos);
        justify-content: space-around;
    }

    .foto {
        width: 50vw;
        height: 30vw;
    }

    .foto-doble {
        width: 34vw;
        height: 42vw;
    }

    .textos {
        font-size: 1.8vw;
        width: 34vw;
    }

    #texto1 {
        width: 50vw;
    }
}

@media (max-width: 500px) {
    .info-contador {
        flex-direction: column;
        padding: 0 3vw;
        margin-bottom: 4vw;
    }

    .text strong {
        font-size: 7vw;
        text-align: center;
        margin-left: 3.5vw;
    }

    .caja-contadores {
        margin: 5vw auto 0;
    }

    .somos-text {
        font-size: 2.8vw;
        width: 65vw;
        text-align: center;
    }

    .contador {
        font-size: 7vw;
        margin-left: 9vw;
    }

    .contador-text {
        font-size: 2.6vw;
        width: 25vw;
    }

    .comunidad-title {
        font-size: 6.4vw;
        margin: 12vw 0;
    }

    .foto {
        width: 60vw;
        height: 36vw;
    }

    .foto-doble {
        width: 36vw;
        height: 50vw;
    }

    .textos {
        font-size: 2.2vw;
        width: 36.5vw;
    }

    #texto1 {
        width: 60vw;
    }
}