@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Quicksand:wght@300..700&display=swap');

:root{

    /* fonts */
    --fnt-inter: "Inter";
    --fnt-quicksand: "Quicksand";

    /* colors */
    --clr-laranja-mais-forte: #ED6711;
    --clr-laranja-forte: #E76637;
    --clr-laranja-medio: #E88125;
    --clr-laranja-claro: #F9AF42;
    --clr-laranja-mais-claro: #FFF0DA;

    --clr-texto: #231F20;

    --clr-branco: #ffffff;
    --clr-preto: #000000;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--clr-texto);
    font-family: var(--fnt-inter);
}

h1, h2{
    font-family: var(--fnt-quicksand);
}

p{
    margin: 0;
}

/* header */
header{
    background: #E76637;
    background: linear-gradient(45deg,rgba(231, 102, 55, 1) 20%, rgba(249, 175, 66, 1) 100%);
    

    .nav-link{
       color: var(--clr-branco); 
       font-weight: 300;
    }

    .btn-nav{
        background-color: white;
        border: none;
        border-radius: 15px;
        padding: 10px 15px;

        a{
            text-decoration: none;
            color: var(--clr-laranja-forte);
            font-weight: 700;
            font-family: var(--fnt-quicksand);
        }
    }
}

.carrossel {
    background-color: #F2F0F0;
    width: 80%;
    max-width: 1200px;
    min-height: 400px;
    aspect-ratio: 1440 / 471;
    border-radius: 50px;
    position: relative; 
    overflow: hidden;
}

.carrossel > .row {
    height: 100%;
    margin: 0;
}

.box-carrossel{
    padding: 0 !important;
}

.carrossel-pessoa {
    position: absolute;
    bottom: 0;
    left: 18%;
    z-index: 10;
    width: auto;
    height: 100%;
    object-fit: contain;
}

.carrossel-texto{
    z-index: 10; 
    
    h1{
        color: var(--clr-laranja-forte);
        font-weight: 700;
        font-size: 36px;
    }

    p{
        font-weight: 200;
        font-size: 20px;
    }
    
    button{
        background-color: var(--clr-laranja-forte);
        border: none;
        border-radius: 15px;
        padding: 10px 15px;

        a{
            text-decoration: none;
            color: var(--clr-branco);
            font-weight: 700;
            font-family: var(--fnt-quicksand);
        }
    }
}

#carouselExample .carousel-control-prev {
    left: 7%;
}

#carouselExample .carousel-control-next {
    right: 7%;
}

/* QUEM SOMOS */
.quemsomos{
    background-color: var(--clr-laranja-mais-claro);

    h2{
        font-weight: 700;
        color: var(--clr-laranja-medio);
        font-size: 36px;
    }

    h3{
        font-family: var(--fnt-quicksand);
        font-weight: 400;
        font-size: 24px;
    }
    p{
        font-size: 16px;
        font-weight: 200;
    }

    h5{
        font-family: var(--fnt-quicksand);
        font-size: 26px;
        font-weight: 500;
        color: var(--clr-laranja-medio);
    }
}

.box-quemsomos-L, .card-proposito, .card-visao{
    background-color: var(--clr-branco);
    border: 1px solid var(--clr-laranja-medio); 
    border-radius: 20px;
    padding: 30px;
    box-shadow: 4px 4px 10px rgb(192, 192, 192);
}

.card-principios-icon{
    img{
        padding-top: 5px;
    }

    p{
        font-weight: 500;
        font-size: 20px;
        font-family: var(--fnt-quicksand);
    }

    span{
        font-weight: 200;
    }
}

.card-promessa{
    background-color: var(--clr-laranja-medio);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 4px 4px 10px rgb(192, 192, 192);

    h5{
        color: var(--clr-branco) !important;
    }
    span{
        color: var(--clr-branco) !important;
        font-size: 24px;
        font-family: var(--fnt-inter);
        font-weight: 300;
    }
}

/* MODALIDADES */
.modalidades{
    background-color: var(--clr-laranja-claro);
    color: var(--clr-branco);

    h2{
        font-weight: 700;
        font-size: 36px;
    }

    h3{
        font-family: var(--fnt-quicksand);
        font-weight: 300;
        font-size: 24px;
    }
}

.texto-modalidades{
    color: var(--clr-branco);
    font-size: 20px;
    margin-top: 10px;
}

.grid-7, .grid-6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}    

@media (min-width: 768px) {
    .grid-7, .grid-6 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-6 {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
    }

}
/* BENEFICIOS */
.beneficios h2{
    font-weight: 700;
    color: var(--clr-laranja-medio);
    font-size: 36px;
}

.card-beneficios-branco{
    border: 1px solid var(--clr-laranja-medio);
    color: var(--clr-laranja-medio);
    border-radius: 50px;
    height: 400px;

    h3{
        font-family: var(--fnt-quicksand);
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        color: var(--clr-laranja-medio);
    }

    p{
        font-size: 16px;
        font-weight: 200;
        color: var(--clr-laranja-medio);
    }

    .img-card-beneficios{
        border: 1px solid var(--clr-laranja-medio);
        height: 150px;
        object-fit: cover;
        border-radius: 25px;
    }
}

.card-beneficios-laranja{
    border: 1px solid var(--clr-laranja-mais-claro);
    background-color: var(--clr-laranja-medio);
    border-radius: 50px;
    height: 400px;
    box-shadow: 4px 4px 10px rgb(196, 196, 196);

    h3{
        font-family: var(--fnt-quicksand);
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        color: var(--clr-branco);
    }

    p{
        font-size: 16px;
        font-weight: 200;
        color: var(--clr-branco);
    }

    .img-card-beneficios{
        border: 1px solid var(--clr-laranja-mais-claro);
        height: 150px;
        object-fit: cover;
        border-radius: 25px;
    }
}

/* APPS
.apps{
    background: url(../img/bg-apps.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    color: var(--clr-branco);

    h2{
        font-weight: 700;
        font-size: 36px;
    }
}

.apps .carousel h2{
    color: var(--clr-laranja-forte);
    font-size: 30px;
}

.btn-apps-ativo{
    background-color: var(--clr-branco);
    border: none;
    border-radius: 15px;
    padding: 10px 15px;
    color: var(--clr-laranja-forte);      
    font-weight: 700;
    font-family: var(--fnt-quicksand);
}

.btn-apps-ativo.ativo{
    background-color: var(--clr-laranja-forte);
    border: none;
    border-radius: 15px;
    padding: 10px 15px;
    color: var(--clr-branco);  
}

#carouselApps .carousel-control-prev {
    left: 10%;
}

#carouselApps .carousel-control-next {
    right: 10%;
}

.box-carrossel-apps {
    background-color: var(--clr-branco);
    height: 560px;
    width: 50%;
    border-radius: 50px;
    border: 3px solid var(--clr-laranja-medio);
    margin:auto;
}

.box-carrossel-apps h3 {
    font-family: var(--fnt-quicksand);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.box-carrossel-apps p {
    font-size: 20px;
    font-weight: 300;
    word-wrap: normal;
    text-align: left;
}

.inner-lojista {
    margin-left: 25px;
}

.inner-lojista p {
    font-size: 14px;
} */

/* APPS */
.apps {
    background: url(../img/bg-apps.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--clr-branco);
}

.apps h2 {
    font-weight: 700;
    font-size: 36px;
}

.apps .carousel h2 {
    color: var(--clr-laranja-forte);
    font-size: 30px;
}

.btn-apps-ativo {
    background-color: var(--clr-branco);
    border: none;
    border-radius: 15px;
    padding: 10px 15px;
    color: var(--clr-laranja-forte);
    font-weight: 700;
    font-family: var(--fnt-quicksand);
}

.btn-apps-ativo.ativo {
    background-color: var(--clr-laranja-forte);
    color: var(--clr-branco);
}

/* CARROSSEL */
#carouselApps {
    padding: 3rem 0 !important;
}

#carouselApps .carousel-control-prev,
    #carouselApps .carousel-control-next {
        width: 50%;
    }

/* CARD */
.box-carrossel-apps {
    background-color: var(--clr-branco);
    width: min(90%, 850px);
    min-height: 560px;
    height: auto;
    padding: 40px 50px;
    border-radius: 50px;
    border: 3px solid var(--clr-laranja-medio);
    margin: auto;
}

.box-carrossel-apps h3 {
    font-family: var(--fnt-quicksand);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.box-carrossel-apps p {
    font-size: 20px;
    font-weight: 300;
    text-align: left;
    margin: 0;
    overflow-wrap: break-word;
}

/* CONTEÚDO DO PORTADOR */
.box-carrossel-apps > div {
    width: 100%;
}

/* ÍCONES */
.box-carrossel-apps img {
    flex-shrink: 0;
}

/* LOJISTA */
.inner-lojista {
    margin-left: 25px;
}

.inner-lojista p {
    font-size: 14px;
}

@media (max-width: 991px) {

    .box-carrossel-apps {
        width: 85%;
        padding: 35px;
    }

    .box-carrossel-apps h3 {
        font-size: 21px;
    }

    .box-carrossel-apps p {
        font-size: 17px;
    }

    #carouselApps .carousel-control-prev {
        left: -10px;
    }

    #carouselApps .carousel-control-next {
        right: -10px;
    }
}

/* CELULARES */
@media (max-width: 768px) {

    .btn-apps {
        gap: 15px !important;
        flex-wrap: wrap;
    }

    .btn-apps-ativo {
        padding: 8px 14px;
        font-size: 14px;
    }

    #carouselApps {
        padding: 2rem 0 !important;
    }

    .box-carrossel-apps {
        width: 90%;
        min-height: auto;
        padding: 30px 20px;
        border-radius: 30px;
    }

    .box-carrossel-apps h2 {
        font-size: 25px !important;
    }

    .box-carrossel-apps h3 {
        font-size: 18px;
        line-height: 1.3;
    }

    .box-carrossel-apps p {
        font-size: 15px;
        line-height: 1.3;
    }

    /* Portador */
    .box-carrossel-apps .d-flex {
        gap: 10px !important;
    }

    /* Esconde ou reposiciona as setas */
    #carouselApps .carousel-control-prev {
        left: -5px;
    }

    #carouselApps .carousel-control-next {
        right: -5px;
    }

    /* Cada linha de grupos do Lojista */
    .box-carrossel-apps > .d-flex.justify-content-center.w-100 {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    /* Cada bloco de conteúdo */
    .box-carrossel-apps .col-5 {
        width: 100%;
        max-width: 100%;
    }

    /* Remove a margem excessiva */
    .inner-lojista {
        margin-left: 15px;
    }

    /* Textos dos itens */
    .inner-lojista p {
        font-size: 14px;
        line-height: 1.3;
    }
}

@media (max-width: 450px) {

    .apps h2 {
        font-size: 28px;
    }

    .box-carrossel-apps {
        width: 94%;
        padding: 25px 15px;
        border-radius: 25px;
    }

    .box-carrossel-apps h2 {
        font-size: 23px !important;
    }

    .box-carrossel-apps h3 {
        font-size: 16px;
    }

    .box-carrossel-apps p {
        font-size: 13px;
    }

    .box-carrossel-apps img {
        width: 12px;
        height: auto;
    }

    .inner-lojista {
        margin-left: 10px;
    }

    #carouselApps .carousel-control-prev,
    #carouselApps .carousel-control-next {
        width: 8%;
    }
}


/* VXONE */
.vxone{
    padding: 6rem 0rem;
}

.box-vxone{
    background-color: var(--clr-laranja-mais-forte);
    border-radius: 50px;
}

.texto-vxone{
    color: var(--clr-branco);

    h3{
        font-family: var(--fnt-quicksand);
        font-size: 36px;
        font-weight: 700; 
    }
}

.topico-vxone span{
    font-size: 28px;
    color: var(--clr-branco);
    font-weight: 200;
}

/* CTA */
.cta{
    background-image: url(../img/fundo-cta.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    height: 500px;
}

.box-cta{
    height: 500px;
}

.btn-cta{
    background-color: white;
    border: none;
    border-radius: 15px;
    padding: 10px 15px;

    text-decoration: none;
    color: var(--clr-laranja-forte);
    font-weight: 700;
    font-family: var(--fnt-quicksand);
}

/* footer */
footer{
    background: #E76637;
    background: linear-gradient(45deg,rgba(231, 102, 55, 1) 20%, rgba(249, 175, 66, 1) 100%);

    h5, span{
        font-family: var(--fnt-quicksand);
        font-size: 24px;
        margin: 0;
    }

    h5{
        font-weight: 600;
    }

    span{
        font-weight: 200;
    }

    h5, span, hr {
        color: var(--clr-branco);
    }

    .agmd{
        font-size: 20px;

        a{
            text-decoration: none;
            color: var(--clr-branco);
        }
    }
}

/* responsivo */

@media (max-width: 1199.98px) {
    .carrossel {
        width: 95%; 
    }
    .carrossel-pessoa {
        left: 120px; 
    }
    .topico-vxone span {
        font-size: 22px; 
    }
}

/* Tablets em pé (Abaixo de 992px) */
@media (max-width: 991.98px) {
    
    .carrossel {
        width: 100%;
        min-height: 500px;
        aspect-ratio: auto;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
    }
    /* Texto ocupa todo o banner */
    .carrossel-texto {
        width: 100% !important;
        padding: 40px 25px !important;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .carrossel-pessoa {
        position: absolute;
        left: 0;
        width: 100%;
        height: 60%;
        object-fit: contain;
        z-index: 1;
    }

    .carrossel-texto h1 {
        font-size: 24px !important;
        line-height: 1.2;
    }

    .carrossel-texto p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
    }

    .carrossel-logo-bg{
        display: none;
    }

    .box-carrossel{
        display: flex;
        align-items: flex-start !important;
        align-content: flex-start;
    }

    /* Tipografia Geral */
    h1, .carrossel-texto h1, .quemsomos h2, .modalidades h2, .beneficios h2, .apps h2, .texto-vxone h3 {
        font-size: 28px !important;
    }
    
    .navbar-collapse {
        background-color: rgba(231, 102, 55, 0.98);
        border-radius: 15px;
        padding: 20px;
        margin-top: 15px;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    }

    .navbar-nav .nav-link {
        font-size: 18px;
        padding: 10px 0;
    }

    .btn-nav {
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .box-quemsomos {
        padding: 1.5rem !important;
    }
    .box-quemsomos-R {
        margin-top: 1.5rem;
    }

    .card-beneficios-branco, .card-beneficios-laranja {
        height: auto !important;
        margin-bottom: 1rem;
    }

   .box-carrossel-apps .col-5 {
        width: 100%;
    }

    .vxone {
        padding: 3rem 0;
    }
    .topico-vxone span {
        font-size: 18px;
    }
    
    .texto-vxone{
        padding-bottom: 20px;
    }

    /* CTA & Rodapé */
    .cta, .box-cta {
        height: 350px;
    }
    footer .row {
        flex-direction: column;
        text-align: center;
    }
    footer .col-4 {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 1.5rem;
    }
    footer .justify-content-end {
        justify-content: center !important;
    }
}

@media (max-width:450px){
    .quemsomos .row{
        justify-content: center !important;
    }

    section{
        overflow-x:hidden;
    }

    /* ---------- Títulos ---------- */

    h1{
        font-size:1.8rem !important;
        line-height:1.2;
    }

    h2{
        font-size:1.7rem !important;
    }

    h3{
        font-size:1.2rem !important;
    }

    h5{
        font-size:1.15rem !important;
    }

    p,
    span{
        font-size:.9rem !important;
        line-height:1.5;
    }

    /* ---------- Banner ---------- */

    .carrossel{
        padding:25px 18px;
        border-radius:25px;
    }

    .carrossel-texto{
        padding:0 !important;
        justify-content: flex-start;

        h1{
            font-size: 1.2rem !important;
        }
    }

    .carrossel-texto p{
        font-size: 0.8rem !important;
        margin:15px 0px;
    }

    .box-carrossel{
        display: flex;
        align-items: flex-start !important;
        align-content: flex-start;
    }

    .carrossel-pessoa{
        bottom: -50px;
        z-index: 10;
    }

    /* ---------- Cards ---------- */

    .box-quemsomos-L,
    .card-proposito,
    .card-visao,
    .card-promessa,
    .card-beneficios-branco,
    .card-beneficios-laranja{

        padding:20px;
        border-radius:20px;
        margin-bottom:20px;
    }

    .card-principios-icon{
        margin-bottom:18px;
    }

    .box-quemsomos-R{
        padding: 0 !important;
    }

    /* ---------- Benefícios ---------- */

    .beneficios{
        margin: 0px 30px;
    }
    .row-beneficios{

        gap:20px !important;
    }

    .card-beneficios-branco h3,
    .card-beneficios-laranja h3{

        font-size:1.2rem !important;
        margin:18px 0 12px;
    }

    /* ---------- VXONE ---------- */

    .vxone{
        margin: 0px 30px;
    }

    .topico-vxone{

        margin-bottom:12px;
    }

    .topico-vxone span{

        font-size:1rem !important;
    }

    /* cta */
    .btn-cta{
        width: 50%;
        font-size: 14px;
    }

    .w-75{
        width: 100% !important;
    }

    /* ---------- Footer ---------- */

    footer{

        padding:40px 20px;

        span{
            font-size: 14px !important;
        }
    }

}

@media (max-width:330px){
    .carrossel-pessoa{
        bottom: -70px;
        z-index: 10;
    }
}

.dashboard{
    background-color: var(--clr-laranja-claro);
    
    h2{
        font-weight: 700;
        color: white;
        font-size: 36px;
    }

    h3{
        font-family: var(--fnt-quicksand);
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        color: white;
    }
     p{
         color: white;
         font-weight: 300;
         font-size: 18px;
     }
}

.titulo-topico-dash{
    font-size: 24px !important;
    font-weight: 600 !important;
    font-family: var(--fnt-quicksand);
}

@media (max-width: 991px) {
    .box-dashboard .col-5 {
        width: 100% !important;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .box-dashboard > div {
        flex-direction: column;
        align-items: center;
        gap: 25px !important;
    }
}

.whatsapp-float {
    position: fixed !important;
    right: 25px !important;
    bottom: 25px !important;

    width: 60px !important;
    height: 60px !important;

    background-color: #25D366 !important;
    color: #fff !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 32px !important;
    text-decoration: none !important;

    z-index: 2147483647 !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.whatsapp-float:hover {
    color: #fff !important;
    transform: scale(1.1);
}

@media (max-width: 576px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        right: 15px;
        bottom: 15px;
        font-size: 26px;
    }
}