.main-cards-section {
    width: 100%;
    height: 171vw;
    display: flex;

    /* Centrar el listado en la página */
    justify-content: center;

    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 70%, rgba(225, 225, 225, 1) 100%),
        url('../images/modules.jpg');


    background-position: top center, 0vw -2vw;
    background-size: cover, 100% 90%;
    background-repeat: no-repeat;
}

.cards-section {
    padding-top: 2vw;
    text-align: center;
    width: 100%;

    .main-title {
        padding-top: 15vw;
        font-size: 8vw;
        font-weight: 700;
    }

    .title {
        width: 35vw;
        margin: 1.6vw auto 0 auto;
        border-radius: 6vw;
        border: 0.2vw solid;
        color: var(--color-main);
        border-color: var(--color-main-light);
        background-color: var(--color-main-light);
        padding: 0.8vw 2vw;
        font-size: 2.8vw;
        font-weight: 600;
    }

    .sub-title {
        margin-top: 1.6vw;
        font-size: 1.6vw;
        color: black;
    }
}

.cards-list {
    margin: auto;
    width: 50%;
    padding-top: 2vw;
    padding-bottom: 4vw;
    /* Usamos flexbox para la disposición horizontal */
    display: flex;
    /* Centrar el listado en la página */
    justify-content: center;
    align-items: center;
    /* Permitir que las tarjetas pasen a una nueva línea si no caben */
    flex-wrap: wrap;
}

/* Estilos de cada tarjeta (placeholder) */
.card-item {
    width: 10vw;
    height: 10vw;
    margin: 0 -2vw;
    margin-top: 3vw;

    background-color: transparent;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-40deg);
}

/* PYME */
.cards-pyme-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
    width: 100%;
    padding: 4vw 0;
    box-sizing: border-box;
}

.card-pyme-container {
    position: relative;
    left: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-pyme-image {
    width: 14vw;
    height: auto;
    display: block;
}

.card-pactar-image {
    width: 18vw;
    height: auto;
    display: block;
}

/* Estilos específicos para el logo sobrepuesto */
.overlay-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-12vw, -50%);

    width: 16vw;
    height: auto;
    z-index: 10;
}

.overlay-logo img {
    width: 8vw;
    height: auto;
    display: block;
}

/* PORTAL */
.portal-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
    width: 100%;
    padding: 1vw 0;
    padding-top: 1.5vw;
    box-sizing: border-box;
}

.portal-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portal-image {
    width: 14vw;
    height: auto;
    display: block;
}


/* 📱 MEDIA QUERY para Dispositivos Móviles (ancho máximo de 768px) 📱 */
@media (max-width: 768px) {

    .main-cards-section {
        font-size: 4vw;
        height: 255vw;

        background-size: cover, 100% 90%;
    }

    .cards-section {
        width: 100%;
        margin: 0;

        .main-title {
            padding-top: 30vw;
        }

        .title {
            width: 60vw;
            font-size: 4vw;
            line-height: 5vw;
        }

        .sub-title {
            padding-top: 2.5vw;
            font-size: 3vw;
        }

        .portal-image {
            width: 20vw;
            height: auto;
            display: block;
            margin-top: 3vw;
        }

    }

    .cards-list {
        padding-top: 5vw;
        width: 80%;
    }

    .card-item {
        width: 15vw;
        height: 15vw;
        margin: 1vw -2vw;
        margin-top: 3vw;
    }

}


.T-Agronacion {
    background-image: url('../images/cards/T-Agronacion.png');
}

.T-BancoEntreRios {
    background-image: url('../images/cards/T-BancoEntreRios.png');
}

.T-BancoPatagonia {
    background-image: url('../images/cards/T-BancoPatagonia.png');
}

.T-BanCo {
    background-image: url('../images/cards/T-BanCo.png');
}

.T-BancoProvincia {
    background-image: url('../images/cards/T-BancoProvincia.png');
}

.T-BancoSantaFe {
    background-image: url('../images/cards/T-BancoSantaFe.png');
}

.T-Bbva {
    background-image: url('../images/cards/T-Bbva.png');
}

.T-Cabal {
    background-image: url('../images/cards/T-Cabal.png');
}

.T-Cordobesa {
    background-image: url('../images/cards/T-Cordobesa.png');
}

.T-GaliciaRural {
    background-image: url('../images/cards/T-GaliciaRural.png');
}

.T-Hsbc {
    background-image: url('../images/cards/T-Hsbc.png');
}

.T-Icbc {
    background-image: url('../images/cards/T-Icbc.png');
}

.T-Macro {
    background-image: url('../images/cards/T-Macro.png');
}

.T-Santander {
    background-image: url('../images/cards/T-Santander.png');
}