/*Geral*/

:root{
    /*cores*/
    --padrao-branco: #FFF;
    --padrao-preto: #000;

    --base-primario: #5A3AB3;
    --base-secundario: #6DFD79;
    --base-terciario: #FF6B6B;

    --textos-primario: #161616;
    --textos-secundario: #F8FAFC;
    --textos-destaques: #3E297A;
    --textos-destaques2: #34C759;
    --textos-links: #6DFD79;

    --complementares-roxo-escuro: #3E297A;
    --complementares-cinza: #161616;
    --complementares-superficies: #F8FAFC;
    --complementares-inputs: #B6D4FF;

    /*font-size*/
    --display-text1: 48px;
    --display-text2: 32px;
    --subtitle: 24px;
    --body-text: 18px;
    --functional-text: 16px; 
}

body{
    padding: 0;
    margin: 0;
    border: 0;
    background-color: var(--complementares-superficies);
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: var(--body-text);
}

h1, h2, h3{
    font-family: "Boldonse", system-ui;
    font-weight: 400;
    font-style: normal;
    line-height: 180%;
}

p{
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 120%;
    font-size: var(--body-text);
}

.btn{
    width: 100%;
    max-width: 400px;
    padding: 16px 32px;
    border-radius: 48px;
    background-color: var(--base-secundario);
    border: 0;
    font-size: var(--subtitle);
    font-weight: 700;
    color: var(--base-primario);
}

.btn:hover{
    background-color: var(--textos-destaques2);
}


@media(max-width: 991px){
    :root{
        --display-text1: 32px;
        --display-text2: 24px;
        --subtitle: 18px;
        --body-text: 18px;
        --functional-text: 14px; 
    }
}

/*Hero*/
#hero-section{
    background: var(--complementares-roxo-escuro);
    padding: 24px 0 60px 0;
    background-image: url(../../images/background_granulado.svg);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--textos-secundario);
    align-items: center;
    text-align: center;
}

#hero-section .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

#hero-section h1{
    max-width: 868px;
    font-size: var(--display-text1);
}

#hero-section p{
    max-width: 868px;
    font-size: var(--subtitle);
}

#hero-section p span{
    color: var(--base-secundario);
    font-weight: 700;
}

#qr-code{
    margin-bottom: -330px;
    z-index: 100;
    max-width: 1050px;
}

@media(max-width: 1119px){
    #qr-code{
        margin-bottom: -316px;
        max-width: 100%;
    }
}

@media(max-width: 767px){
    #qr-code{
        margin-bottom: -196px;
        max-width: 100%;
    }
}

@media(max-width: 575px){
    #qr-code{
        margin-bottom: -162px;
        max-width: 100%;
    }
}

/*Como funciona*/
#como-funciona{
    padding: 200px 0 32px 0;
    background-color: var(--complementares-superficies);
}

#como-funciona .container{
    background-color: var(--padrao-branco);
    padding: 48px;
    border: 1px solid var(--complementares-inputs);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

#como-funciona h2{
    font-size: var(--display-text2);
    color: var(--textos-primario);
}

#etapas{
    padding: 0;
    list-style: none;
}

.etapa{
    padding: 24px;
}

.etapa img{
    margin-right: 16px;
}

.etapa h3{
    font-size: var(--display-text2);
    color: var(--textos-destaques);
}

.etapa p{
    font-size: var(--subtitle);
}

.etapa span#pqp{
    text-decoration-line: line-through;
}

.etapa span#wow{
    font-weight: 700;
}

@media(max-width: 767px){
    #como-funciona{
        padding-top: 80px;
    }
}

@media(max-width: 575px){
    #como-funciona{
        padding-right: 20px;
        padding-left: 20px;
    }
}

/*Objetivo*/
#objetivo{
    background-color: var(--complementares-superficies);
    padding: 32px 0 64px 0;
}

#objetivo .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

#objetivo h2{
    font-size: var(--display-text1);
    color: var(--textos-destaques);
}

#objetivo h2 span{
    color: var(--textos-destaques2);
}

#caracteristicas{
    list-style: none;
    padding: 0;
}

#caracteristicas li{
    padding-left: 16px;
    padding-right: 16px;
}

#caracteristicas li:first-child{
    padding-left: 0;
}

#caracteticas li:last-child{
    padding-right: 0;
}

.caracteristica{
    border-radius: 24px;
    background-image: url(../../images/bg_caracteristicas_tadebob.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 16px;
    text-align: left;
}

.caracteristica div{
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    text-align: left;
    margin-top: 8px;
    margin-bottom: 8px;
}

.caracteristica div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.caracteristica div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

.caracteristica div h3{
    font-size: var(--subtitle);
    color: var(--textos-destaques);
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    line-height: 120%;
    width: 100%;
}

.caracteristica div p{
    width: 100%;
}

.caracteristica img{
    border-radius: 16px;
}

@media(max-width: 991px){
    #objetivo h2{
        font-size: 24px;
    }

    #caracteristicas{
        padding: 0 20px;
    }

    #caracteristicas li{
        padding: 0 !important;
        margin-bottom: 24px;    
    }
}

/*App tadebob*/
#app-tadebob{
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: var(--base-primario);
    color: var(--padrao-branco);
}

#app-tadebob h2{
    margin-bottom: 24px;
}

#app-tadebob h2 span{
    color: var(--base-secundario);
}

#app-tadebob p{
    margin-bottom: 24px;
    max-width: 533px;
}

#app-tadebob .destaque{
    font-weight: 700;
}

@media(max-width: 767px){
    #app-tadebob img{
        margin-top: 24px
    }
}

/*Traga seu estabelecimento*/

#estabelecimento{
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: var(--complementares-superficies);
    text-align: center;
}

#estabelecimento .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

#estabelecimento h3{
    font-size: var(--subtitle);
    color: var(--textos-destaques);
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    line-height: 120%;
}

#estabelecimento h2{
    font-size: var(--display-text2);
    color: var(--textos-primario);
    max-width: 1074px;
}

/*Perguntas frequentes*/
#perguntas-frequentes{
    background-color: var(--padrao-branco);
    padding-top: 64px;
    padding-bottom: 64px;
    text-align: center;
}

#perguntas-frequentes h2{
    color: var(--textos-destaques);
    margin-bottom: 32px;
}

.accordion-item{
    border: 2px solid var(--base-secundario) !important;
    border-radius: 8px;
    margin-bottom: 32px;
}

.accordion-item .accordion-button{
    background-color: transparent;
    font-size: var(--subtitle);
    color: var(--textos-destaques);
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 120%;
    outline: 0 !important;
    border: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}

.accordion-item button img{
    margin-right: 16px;
}

.accordion-body{
    padding-top: 8px;
    text-align: left;
}

/*Footer*/
footer{
    background-color: var(--complementares-roxo-escuro);
    padding-top: 64px;
    padding-bottom: 64px;
    text-align: center;
    color: var(--padrao-branco);
}

footer .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

footer h2{
    font-size: var(--display-text1);
    max-width: 950px;
}

footer h2 span{
    color: var(--base-secundario);
}

footer img{
    max-width: 188px !important;
}