/* Fontes — mantenha o nome coerente com os arquivos (Ubuntu).
Se realmente quiser Poppins, troque os arquivos. */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    scrollbar-gutter: stable; /* Remova o 'both-edges' */
    --cor-primaria: #0c3857ff;
}

body {
    height: auto;
    width: 100svw;
    font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    margin: 0;
    overflow-x: hidden; /* Impede a rolagem horizontal */
}

main {
    height: auto;
    width: 100svw;
    margin: 0;
}

#main_a {
    height: 85svh;
    width: 75svw;
    margin-top: 10svh;
    margin-left: 15svw;   /* era svh; use svw p/ eixo horizontal */
    margin-right: 10svw;  /* idem */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#main_a_a {
    width: 45svw;
    height: 70svh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;          /* corrigido de 'left' */
    justify-content: space-between;

}

#main_a_a_desidividando {
    height: 10svh;
    width: auto;
    margin-bottom: 5svh;
}

.main_a_a_titulo {
    font-weight: 500;                 /* usa a família única */
    font-size: 2.5svw;
    color: var(--cor-primaria);
}

.main_a_a_texto {
    font-weight: 400;
    font-size: 1.25svw;
    color: var(--cor-primaria);
    margin-bottom: 0.5svh;
}

#main_a_a_botao_cta {
    display: flex;             /* garante width/height */
    align-items: center;
    justify-content: space-between;
    height: 7.5svh;
    width: 30svw;
    background-color: #51c239ff;
    color: #fff;
    text-decoration: none;
    border-radius: 10svh;
    cursor: pointer;
    margin-top: 5svh;
}

#main_a_a_botao_cta img {
    height: 15svh;
    width: 15svh;
    margin-right: 2.5svw;

}

#main_a_a_botao_cta p {
    font-weight: 500;
    font-size: 1.5svw;
    margin-right: 2svw;
}

#main_a_imagem_mulher {
    height: 85svh;
    object-fit: contain;  /* se for img ou figure com conteúdo */
    display: block;
}


#main_b{
    height: 90svh;
    width: 90svw;
    margin-left: 10svw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#main_b_a{
    height: 75svh;
    width: 40svw;

    margin-top: 5svh;
    margin-bottom: 10svh;
}

#main_b_a_porquinho{
    height: 35svh;
    width: auto;
    margin-bottom: 10svh;
}

.main_b_a_titulo{
    color: var(--cor-primaria);
    font-weight: 500;                 /* usa a família única */
    font-size: 1.75svw;
    margin-bottom: 1svh;
    width: 25svw;

}

.main_b_a_texto{
    color: var(--cor-primaria);
    font-weight: 400;                 /* usa a família única */
    font-size: 1.25svw;
    margin-bottom: 5svh;
    width: 25svw;
}

#main_b_b{
    height: 90svh;
    width: 50svw;

    background-color: var(--cor-primaria);
    border-radius: 12.5svh 0 0 12.5svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main_b_b{
    margin-left: 10svw;
}

#main_b_b_titulo{
    color: #ffffff;
    font-size: 7.5svh;
    margin-top: 15svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.main_b_b_titulo_normal{
    font-weight: 300;
    text-align: left;
    box-sizing: border-box;
}

.main_b_b_titulo_negrito{
    font-weight: 500;
    text-align: left;
    box-sizing: border-box;
}

#main_b_b_texto{
    width: 30svw;
    color: #ffffff;
    font-weight: 300;
    font-size: 2.25svh;
}

#main_b_b_lista{
    display: flex;
    flex-direction: column;

    margin-bottom: 15svh;
}

.main_b_b_lista_item{
    display: flex;
    flex-direction: row;

    align-items: center;
    margin-top: 3svh;
}

.main_b_b_lista_item_icone{
    height: 5svh;
    width: 5svh;
}

.main_b_b_lista_item_divisor{
    height: 1svh;
    width: 1svh;
    border-radius: 25%;
    background-color: #ffffff;
    margin-left: 1.5svw;
    margin-right: 1.5svw;
}

.main_b_b_lista_item_texto{
    color: #ffffff;
    font-weight: 300;
    font-size: 3svh;
}

#main_c{
    margin-top: 5svh;
    height: 100svh;
    width: 100svw;
    display: flex;
    flex-direction: row;
}

#main_c_a{
    height: 100svh;
    width: 25svw;
    background-color: var(--cor-primaria);
    border-radius: 0 12.5svh 0 0;
    display: flex;
    flex-direction: column;
}

.main_c_a{
    margin-left: 5svw;
    width: 15svw;
    margin-top: 10svh;
    margin-bottom: -5svh;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

.main_c_a_titulo{
    font-weight: 500;                 /* usa a família única */
    font-size: 1.25svw;
    margin-bottom: 1svh;
}

.main_c_a_texto{
    font-weight: 300;                 /* usa a família única */
    font-size: 0.75svw;
    margin-bottom: 1svh;

}

#main_c_b{
    margin-left: 10svw;
}

#main_c_b_imagem{
    height: 35svh;
}

#main_c_b_titulo{
    color: var(--cor-primaria);
    font-weight: 500;                 /* usa a família única */
    font-size: 2.5svw;
    margin-bottom: 2.5svh;
    margin-top: 2.5svh;
}

#main_c_b_texto{
    color: var(--cor-primaria);
    font-weight: 400;                 /* usa a família única */
    font-size: 1.5svw;
    width: 40svw;
}

#main_c_b_botao_cta {
    display: flex;             /* garante width/height */
    align-items: center;
    justify-content: space-between;
    height: 7.5svh;
    width: 30svw;
    background-color: #51c239ff;
    color: #fff;
    text-decoration: none;
    border-radius: 10svh;
    cursor: pointer;
    margin-top: 7.5svh;
}

#main_c_b_botao_cta img {
    height: 15svh;
    width: 15svh;
    margin-right: 2.5svw;

}

#main_c_b_botao_cta  p {
    font-weight: 500;
    font-size: 1.5svw;
    margin-right: 2svw;
}

footer{
    height: 20svh;
    width: 100svw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: absolute;
    top: 275svh;
}

#footer_logo {
    width: 10svw;
    height: auto;
}

#footer_social{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer_social{
    opacity: 75%;
    height: auto;
    margin-top: 0.25svh;
}

#footer_social_cnpj {
    color: black;
    font-size: 2svh;
    height: auto;
}

#footer_social_email {
    color: black;
    font-size: 2svh;
    height: auto;
}

#footer_social_redes{
    display: flex;
    flex-direction: row;
    height: auto;
}

#footer_social_redes img{
    height: 2svh;
    width: 2svh;
}

#footer_social_instagram {
    height: 2svh;
    width: 2svh;
    margin-left: 0.25svw;
    margin-right: 0.25svw;
}

#footer_social_whatsapp {
    height: 2svh;
    width: 2svh;
    margin-left: 0.25svw;
    margin-right: 0.25svw;
}



#main_elemento_a {
    width: 10svw;
    height: auto;
    top: 45svh;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    position: absolute;
    overflow: hidden; /* Garante que qualquer parte da imagem fora da div será cortada */
}

#main_elemento_b{
    width: 20svw;
    height: auto;
    top: 175svh;
    left: 90svw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    position: absolute;
    overflow: hidden; /* Garante que qualquer parte da imagem fora da div será cortada */
}

#main_elemento_c{
    width: 40svw;
    height: 15svh;
    top: 280svh;
    left: -5svw;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    position: absolute;
    overflow: hidden; /* Garante que qualquer parte da imagem fora da div será cortada */
}


/* Ajuste para a imagem preencher a div sem extrapolar */
.main_elemento_logo img {
  width: 50svw;
  height: auto;
  object-fit: cover; /* ou 'contain', dependendo do efeito desejado */
}

@media (max-width: 768px) {

    body {
    height: auto;
    width: 100svw;
    font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    margin: 0;
    overflow-x: hidden; /* Impede a rolagem horizontal */
    }

    main {
        height: auto;
        width: 100svw;
        margin: 0;
    }

    #main_a {
        height: 90svh;
        width: 90svw;
        margin-top: 5svh;
        margin-left: 5svw;   /* era svh; use svw p/ eixo horizontal */
        margin-right: 5svw;  /* idem */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    #main_a_a {
        width: 90svw;
        height: 55svh;
        display: flex;
        flex-direction: column;
        align-items: center;          /* corrigido de 'left' */
        justify-content: space-between;

    }

    #main_a_a_desidividando {
        height: 5svh;
        width: auto;
        margin-bottom: 0;
        margin-top: 5svh;
    }

    .main_a_a_titulo {
        font-weight: 500;                 /* usa a família única */
        font-size: 6svw;
        color: var(--cor-primaria);
        text-align: center;
        width: 80svw;
        margin-top: 5svh;
    }

    .main_a_a_texto {
        font-weight: 400;
        font-size: 3svw;
        color: var(--cor-primaria);
        text-align: center;
        width: 80svw;
        margin-bottom: 5svh;
    }

    #main_a_a_botao_cta {
        display: flex;             /* garante width/height */
        align-items: center;
        justify-content: space-between;
        height: 4svh;
        width: 60svw;
        background-color: #51c239ff;
        color: #fff;
        text-decoration: none;
        border-radius: 10svh;
        cursor: pointer;
        margin-top: 0;
        margin-bottom: 5svh;
    }

    #main_a_a_botao_cta img {
        height: 8svh;
        width: 8svh;
        margin-right: 0;
    }

    #main_a_a_botao_cta p {
        font-weight: 500;
        font-size: 3svw;
        margin-right: 4svw;
    }

    #main_a_imagem_mulher {
        height: 35svh;
        object-fit: contain;  /* se for img ou figure com conteúdo */
    }









    #main_b{
    height: auto;
    width: 100svw;
    margin-left: 0;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    }

    #main_b_a{
        height: auto;
        width: 80svw;

        margin-top: 10svh;
        margin-bottom: 5svh;
        margin-left: 20svw;

        display: flex;
        flex-direction: column;
        align-items: start;
    }

    #main_b_a_porquinho{
        height: 20svh;
        width: auto;
        margin-bottom: 5svh;
    }

    .main_b_a_titulo{
        color: var(--cor-primaria);
        font-weight: 500;                 /* usa a família única */
        font-size: 5svw;
        margin-bottom: 1svh;
        width: 50svw;

    }

    .main_b_a_texto{
        color: var(--cor-primaria);
        font-weight: 400;                 /* usa a família única */
        font-size: 2.5svw;
        margin-bottom: 5svh;
        width: 50svw;
    }


    #main_b_b{
        height: auto;
        width: 80svw;
        margin-left: 20svw;
        background-color: var(--cor-primaria);
        border-radius: 5svh 0 0 5svh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .main_b_b{
        margin-left: 15svw;
    }

    #main_b_b_titulo{
        color: #ffffff;
        font-size: 4svh;
        margin-top: 5svh;
        margin-bottom: 2.5svh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .main_b_b_titulo_normal{
        font-weight: 300;
        text-align: left;
        box-sizing: border-box;
    }

    .main_b_b_titulo_negrito{
        font-weight: 500;
        text-align: left;
        box-sizing: border-box;
    }

    #main_b_b_texto{
        width: 55svw;
        color: #ffffff;
        font-weight: 300;
        font-size: 1.25svh;
        margin-bottom: 2.5svh;
    }

    #main_b_b_lista{
        display: flex;
        flex-direction: column;

        margin-bottom: 5svh;
    }

    .main_b_b_lista_item{
        display: flex;
        flex-direction: row;

        align-items: center;
        margin-top: 1svh;
    }

    .main_b_b_lista_item_icone{
        height: 5svw;
        width: 5svw;
    }

    .main_b_b_lista_item_divisor{
        height: 1svw;
        width: 1svw;
        border-radius: 25%;
        background-color: #ffffff;
        margin-left: 1.5svw;
        margin-right: 1.5svw;
    }

    .main_b_b_lista_item_texto{
        color: #ffffff;
        font-weight: 300;
        font-size: 1.5svh;
    }






    #main_c{
        margin-top: 5svh;
        height: auto;
        width: 100svw;
        display: flex;
        flex-direction: column;
    }

    #main_c_a{
        height: auto;
        width: 90svw;
        margin-right: 20svw;
        background-color: var(--cor-primaria);
        border-radius: 0 5svh 5svh 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 5svh;     
        padding-bottom: 5svh;    
    }

    .main_c_a{
        margin-left: 5svw;
        width: 80svw;
        margin-top: 2.5svh;
        margin-bottom: 2.5svw;
        color: #ffffff;
        display: flex;
        flex-direction: column;
    }

    .main_c_a_titulo{
        font-weight: 500;                 /* usa a família única */
        font-size: 4svw;
        margin-bottom: 1svh;
    }

    .main_c_a_texto{
        font-weight: 300;                 /* usa a família única */
        font-size: 2.5svw;
        margin-bottom: 1svh;

    }

    #main_c_b{
        margin-left: 0;
        margin-top: 10svh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #main_c_b_imagem{
        height: 17.5svh;
        width: auto;
    }

    #main_c_b_titulo{
        color: var(--cor-primaria);
        font-weight: 500;                 /* usa a família única */
        font-size: 6svw;
        margin-bottom: 2.5svh;
        margin-top: 2.5svh;
        width: 80svw;
        text-align: center;
    }

    #main_c_b_texto{
        color: var(--cor-primaria);
        font-weight: 400;                 /* usa a família única */
        font-size: 4svw;
        width: 80svw;
        text-align: center;
    }

    #main_c_b_botao_cta {
        display: flex;             /* garante width/height */
        align-items: center;
        justify-content: space-between;
        height: 4svh;
        width: 60svw;
        background-color: #51c239ff;
        color: #fff;
        text-decoration: none;
        border-radius: 10svh;
        cursor: pointer;
        margin-top: 5svh;
        margin-bottom: 20svh;
    }

    #main_c_b_botao_cta img {
        height: 8svh;
        width: 8svh;
        margin-right: 0;

    }

    #main_c_b_botao_cta  p {
        font-weight: 500;
        font-size: 3svw;
        margin-right: 4svw;
    }










    footer{
        height: 20svh;
        width: 100svw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        top: 330svh;
    }

    #footer_logo {
        width: auto;
        height: 5svh;
    }

    #footer_social{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer_social{
        opacity: 75%;
        height: auto;
        margin-top: 0.25svh;
    }

    #footer_social_cnpj {
        color: black;
        font-size: 1.5svh;
        height: auto;
    }

    #footer_social_email {
        color: black;
        font-size: 1.5svh;
        height: auto;
    }

    #footer_social_redes{
        display: flex;
        flex-direction: row;
        height: auto;
    }

    #footer_social_redes img{
        height: 1.5svh;
        width: 1.5svh;
    }

    #footer_social_instagram {
        height: 1.5svh;
        width: 1.5svh;
        margin-left: 0.25svw;
        margin-right: 0.25svw;
    }

    #footer_social_whatsapp {
        height: 1.5svh;
        width: 1.5svh;
        margin-left: 0.25svw;
        margin-right: 0.25svw;
    }






    #main_elemento_a {
        width: 10svw;
        height: auto;
        top: 45svh;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
        position: absolute;
        overflow: hidden; /* Garante que qualquer parte da imagem fora da div será cortada */
    }

    #main_elemento_b{
        width: 20svw;
        height: auto;
        top: 145svh;
        left: 80svw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        position: absolute;
        overflow: hidden; /* Garante que qualquer parte da imagem fora da div será cortada */
    }

    #main_elemento_c{
        width: 60svw;
        height: 10svh;
        top: 340svh;
        left: -25svw;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: end;
        position: absolute;
        overflow: hidden; /* Garante que qualquer parte da imagem fora da div será cortada */
    }

    /* Ajuste para a imagem preencher a div sem extrapolar */
    .main_elemento_logo img {
        width: auto;
        height: 45svh;
        object-fit: cover; /* ou 'contain', dependendo do efeito desejado */
    }



}