/* #region CONFIGURAÇÕES GERAIS DA SEÇÃO */

.vantagens-home,
.vantagens-home * {
    box-sizing: border-box;
}

.vantagens-home {
    width: 100%;
    padding: 48px 32px;

    font-family: "Sora", Arial, sans-serif;
    color: #28285c;

    background: linear-gradient(90deg,
            #28285c 0%,
            #0079bc 100%);
}

.vantagens-home h2,
.vantagens-home h3,
.vantagens-home p {
    margin: 0;
    padding: 0;
}

.vantagens-home img {
    display: block;
    max-width: 100%;
}

/* #endregion */


/* #region LAYOUT BASE — 1061px ATÉ 1599px */

.vantagens-home .vantagens-container {
    width: min(100%, 1296px);
    margin: 0 auto;
}


/* #region TÍTULO */

.vantagens-home .vantagens-titulo {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    display: block;
    width: min(calc(100vw - 120px), 1248px);

    margin: 0 0 56px;

    color: #ffffff;

    font-family: "Sora", Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 0.95;

    text-align: left;
    text-transform: none;
    font-variant: normal;
    font-variant-caps: normal;
}

.vantagens-home .vantagens-titulo::after {
    content: "";

    position: absolute;
    bottom: -14px;
    left: 0;

    width: 160px;
    height: 4px;

    border-radius: 999px;
    background-color: #eab42e;
}

/* #endregion */


/* #region LISTA */

.vantagens-home .vantagens-lista {
    display: flex;
    flex-direction: column;
    gap: 64px;
}


/* CADA LINHA */

.vantagens-home .vantagem-item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;

    width: 100%;
}


/* ITENS ALTERNADOS */

.vantagens-home .vantagem-item-invertido .vantagem-imagem {
    order: 2;
}

.vantagens-home .vantagem-item-invertido .vantagem-conteudo {
    order: 1;
}


/* IMAGENS */

.vantagens-home .vantagem-imagem {
    width: 100%;
    aspect-ratio: 625 / 322;

    overflow: hidden;

    border-radius: 24px;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.vantagens-home .vantagem-imagem img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* AJUSTES INDIVIDUAIS DE ENQUADRAMENTO */

.vantagens-home .vantagem-item:nth-child(1) .vantagem-imagem img {
    object-position: center;
}

.vantagens-home .vantagem-item:nth-child(2) .vantagem-imagem img {
    object-position: center 58%;
}

.vantagens-home .vantagem-item:nth-child(3) .vantagem-imagem img {
    object-position: center;
}

.vantagens-home .vantagem-item:nth-child(4) .vantagem-imagem img {
    object-position: center;
}


/* #region CARDS DE TEXTO */

.vantagens-home .vantagem-conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    aspect-ratio: 625 / 322;

    padding: clamp(24px, 2.2vw, 32px);

    overflow: hidden;

    border-radius: 24px;
    background-color: #ffffff;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.vantagens-home .vantagem-conteudo h3 {
    margin: 0 0 clamp(8px, 0.8vw, 12px);

    color: #28285c;

    font-family: "Sora", Arial, sans-serif;
    font-size: clamp(28px, 2.3vw, 34px);
    font-weight: 700;
    line-height: 1.05;

    text-transform: none;
    font-variant: normal;
    font-variant-caps: normal;
}

.vantagens-home .vantagem-conteudo p {
    margin: 0;

    color: #111111;

    font-family: "Sora", Arial, sans-serif;
    font-size: clamp(18px, 1.944vw, 28px);
    font-weight: 400;
    line-height: 1.35;

    text-transform: none;
    font-variant: normal;
    font-variant-caps: normal;
}

/* #endregion */
/* #endregion */

/* #endregion LAYOUT BASE */


/* #region BREAKPOINTS */


/* ==================================================
       DESKTOP GRANDE — 1600px+
    ================================================== */

@media (min-width: 1600px) {

    .vantagens-home {
        padding: 64px 40px;
    }

    .vantagens-home .vantagens-titulo {
        width: min(calc(100vw - 160px), 1460px);

        margin-bottom: 72px;
        font-size: 40px;
    }

    .vantagens-home .vantagens-titulo::after {
        bottom: -14px;

        width: 190px;
        height: 4px;
    }

    .vantagens-home .vantagens-lista {
        gap: 96px;
    }

    .vantagens-home .vantagem-item {
        gap: 32px;
    }

    .vantagens-home .vantagem-imagem,
    .vantagens-home .vantagem-conteudo {
        border-radius: 30px;
    }

    .vantagens-home .vantagem-conteudo {
        padding: 42px;
    }

    .vantagens-home .vantagem-conteudo h3 {
        margin-bottom: 16px;
        font-size: 36px;
    }

    .vantagens-home .vantagem-conteudo p {
        font-size: 23px;
    }
}


/* ==================================================
       TABLET E NOTEBOOK MENOR — ATÉ 1060px
    ================================================== */

@media (max-width: 1060px) {

    .vantagens-home {
        padding: 40px 24px;
    }

    .vantagens-home .vantagens-titulo {
        width: min(calc(100vw - 48px), 640px);

        margin-bottom: 48px;
        font-size: 30px;
    }

    .vantagens-home .vantagens-titulo::after {
        width: 140px;
    }

    .vantagens-home .vantagens-lista {
        gap: 48px;
    }

    .vantagens-home .vantagem-item {
        gap: 18px;
        align-items: stretch;
    }

    /*
         * Imagem e texto deixam de ter a altura
         * limitada pelo aspect-ratio do desktop.
         */
    .vantagens-home .vantagem-imagem,
    .vantagens-home .vantagem-conteudo {
        aspect-ratio: auto;
        min-height: 210px;

        border-radius: 20px;
    }

    /*
         * A imagem acompanha a altura do card
         * de texto da mesma linha.
         */
    .vantagens-home .vantagem-imagem {
        height: 100%;
    }

    .vantagens-home .vantagem-imagem img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .vantagens-home .vantagem-conteudo {
        height: 100%;
        padding: 20px;

        justify-content: center;
    }

    .vantagens-home .vantagem-conteudo h3 {
        margin-bottom: 8px;

        font-size: 20px;
        line-height: 1.1;
    }

    .vantagens-home .vantagem-conteudo p {
        font-size: 14px;
        line-height: 1.4;
    }
}


/* ==================================================
       MOBILE — ATÉ 639px
    ================================================== */

@media (max-width: 639px) {

    .vantagens-home {
        padding: 28px 16px 32px;
    }

    .vantagens-home .vantagens-container {
        width: min(100%, 352px);
    }

    .vantagens-home .vantagens-titulo {
        position: relative;
        left: 50%;
        transform: translateX(-50%);

        display: block;
        width: min(calc(100vw - 32px), 352px);

        margin: 0 0 34px;

        font-size: 20px;
        line-height: 1;
    }

    .vantagens-home .vantagens-titulo::after {
        position: static;
        display: block;

        width: 120px;
        height: 4px;

        margin-top: 10px;
    }

    .vantagens-home .vantagens-lista {
        gap: 20px;
    }

    .vantagens-home .vantagem-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /*
         * Remove a inversão do desktop.
         * No mobile todos ficam imagem → texto.
         */
    .vantagens-home .vantagem-item-invertido .vantagem-imagem,
    .vantagens-home .vantagem-item-invertido .vantagem-conteudo {
        order: initial;
    }

    .vantagens-home .vantagem-imagem {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 625 / 322;

        border-radius: 14px;

        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
    }

    .vantagens-home .vantagem-imagem img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .vantagens-home .vantagem-conteudo {
        width: 100%;
        height: auto;
        min-height: 132px;
        aspect-ratio: auto;

        padding: 18px 16px;

        border-radius: 14px;

        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
    }

    .vantagens-home .vantagem-conteudo h3 {
        margin-bottom: 8px;

        font-size: 20px;
        line-height: 1.15;
    }

    .vantagens-home .vantagem-conteudo p {
        font-size: 14px;
        line-height: 1.4;
    }
}

/* #endregion BREAKPOINTS */

/* #region FONTE AMPLIADA */

html.fonte-ampliada .vantagens-home .vantagem-item {
    align-items: stretch;
}

html.fonte-ampliada .vantagens-home .vantagem-imagem,
html.fonte-ampliada .vantagens-home .vantagem-conteudo {
    height: auto;
    min-height: 322px;
    aspect-ratio: auto;
}

html.fonte-ampliada .vantagens-home .vantagem-imagem {
    align-self: stretch;
}

html.fonte-ampliada .vantagens-home .vantagem-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html.fonte-ampliada .vantagens-home .vantagem-conteudo {
    justify-content: flex-start;
    overflow: visible;
}

html.fonte-ampliada .vantagens-home .vantagem-conteudo h3,
html.fonte-ampliada .vantagens-home .vantagem-conteudo p {
    overflow-wrap: anywhere;
}

html.fonte-muito-ampliada .vantagens-home .vantagem-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

html.fonte-muito-ampliada
    .vantagens-home
    .vantagem-item-invertido
    .vantagem-imagem,
html.fonte-muito-ampliada
    .vantagens-home
    .vantagem-item-invertido
    .vantagem-conteudo {
    order: initial;
}

html.fonte-muito-ampliada .vantagens-home .vantagem-imagem {
    min-height: 0;
    aspect-ratio: 625 / 322;
}

html.fonte-muito-ampliada .vantagens-home .vantagem-conteudo {
    min-height: 0;
}

/* #endregion */