/*FALTA ADICIONAR A RESPONSIVIDADE DA PAGINA*/

/*pra facilitar a seleção das cores*/
:root {
  --purple-dark:#2d107d;
  --purple:#5520c5;
  --purple-light:#7135e8;
  --purple-soft:#eee8ff;
  --orange:#f26A1B;
  --orange-light:#ff8c24;
  --white:#fff;
  --bg:#faf9ff;
  --text:#4811BF;
  --muted:#6c6980;
  --border:#ebe8f4;
  --shadow:0 12px 32px rgba(57,24,130,.09);
}


/*ESTILO*/

/*GERAL*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
}

html{
    scroll-behavior:smooth
}

body{
    color:var(--text);
    background:var(--border);
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit
}

/*CABEÇALHO*/
#cabecalho{
    height:82px;
    padding:0 7%;
    padding-right: 10%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;z-index:10;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(10px)
}

.logo{
    display:flex;
    align-items:center;
    gap:9px;color:var(--purple-dark);
    font-weight:800;
    font-size:18px;
    letter-spacing:-.7px
}

.logo strong,.logo-text strong{
    color:var(--orange)
}

.logo-mark{
    width:36px;
    height:36px;
    border-radius:100%;
    display:grid;
    place-items:center;
}

#nav_bar{
    display:flex;
    gap:30px
}

.botoes_de_navegacao{
    position:relative;
    padding:30px 0;color:#58556b;
    font-size:13px;
    font-weight:600
}

.botoes_de_navegacao:hover,.botoes_de_navegacao:active{
    color:var(--purple)
}

.botoes_de_navegacao::after{
    content: "";
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--orange-light);
    transform: scaleX(0);
    transition: transform 0.3 ease;
}

body:has(#termos:target) .botoes_de_navegacao[href="#termos"] {
    color: var(--orange-light);
}
body:has(#termos:target) .botoes_de_navegacao[href="#termos"]::after {
    transform: scaleX(1);
}

/*=================*/

body:has(#politica_de_privacidade:target) .botoes_de_navegacao[href="#politica_de_privacidade"] {
    color: var(--orange-light);
}
body:has(#politica_de_privacidade:target) .botoes_de_navegacao[href="#politica_de_privacidade"]::after {
    transform: scaleX(1);
}

/*=================*/

#voltar-button:hover{
    color: var(--orange);
}

#voltar-button{
    font-size: small;
    font-weight: 600;
}

/*SEÇÕES DE CONTEÚDO*/
.secoes {
    scroll-margin-top: 100px; /* evita que o cabeçalho fixo esconda o topo da seção */
    padding: 50px 0;
    border-bottom: 1px solid var(--border);
}

.secoes:last-child {
    border-bottom: none;
}

.titulos h1 {
    color: var(--purple-dark);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

.titulos h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    border-radius: 4px;
    background: var(--orange-light);
}

.textos {
    margin-top: 30px;
}

.textos p {
    max-width: 780px;
    margin: 0 auto 12px;
    text-align: left;
    line-height: 1.8;
    font-size: 15px;
    color: var(--muted);
}

.textos h3 {
    color: var(--purple);
    font-size: 17px;
    font-weight: 700;
    margin: 28px auto 10px;
    max-width: 780px;
    text-align: left;
}

.textos ul,
.textos ol {
    max-width: 780px;
    margin: 0 auto 12px;
    padding-left: 24px;
    text-align: left;
    line-height: 1.8;
    font-size: 15px;
    color: var(--muted);
}

.textos li {
    margin-bottom: 6px;
}

.data-atualizacao {
    font-style: italic;
    font-size: 13px;
    color: var(--muted);
    opacity: 0.8;
}

.textos a {
    color: var(--purple);
    font-weight: 600;
    text-decoration: underline;
}

/*CORPO DE TEXTO (CONTAINER GERAL)*/
#corpo_de_texto {
    max-width: 900px;
    width: 80%;
    margin: 40px auto;
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 20px 50px;
}

/*RESPONSIVIDADE*/
@media (max-width: 768px) {
    #cabecalho {
        padding: 0 5%;
        flex-wrap: wrap;
        height: auto;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    #nav_bar {
        gap: 16px;
    }

    .botoes_de_navegacao {
        padding: 10px 0;
        font-size: 12px;
    }

    #corpo_de_texto {
        width: 92%;
        padding: 20px 20px;
        margin: 20px auto;
    }

    .titulos h1 {
        font-size: 22px;
    }

    .textos p {
        font-size: 14px;
        line-height: 1.7;
    }

    .textos h3 {
        font-size: 15px;
    }

    .textos ul,
    .textos ol {
        font-size: 14px;
    }
}