:root {
    /* Base */
    --tinta: #0B0B12;
    /* fundo escuro; texto sobre claro */
    --papel: #F3F2F7;
    /* fundo claro; texto sobre escuro */
    --violeta-pixel: #7C3AED;
    /* destaque, fundo violeta e pixel aceso */

    /* Destaque em texto */
    --violeta-claro: #A78BFA;
    /* palavra de destaque sobre escuro */
    --roxo: #6D28D9;
    /* palavra de destaque sobre claro */
    --tinta-sobre-violeta: #0B0B12;
    /* palavra de destaque no fundo violeta */

    /* Apoio */
    --cinza-claro: #54546A;
    /* texto de apoio sobre claro */
    --cinza-escuro: #A9A8BC;
    /* texto de apoio sobre escuro */
    --lilas-claro: #EDE6FF;
    /* texto de apoio sobre violeta */

    /* Sinais (nunca viram fundo) */
    --ciano-claro: #0E7490;
    /* cursor e prompt, no claro */
    --ciano-escuro: #22D3EE;
    /* cursor e prompt, no escuro */
    --rosa-claro: #BE185D;
    /* número ou seta, no claro */
    --rosa-escuro: #F472B6;
    /* número ou seta, no escuro */

    /* Linhas e bordas */
    --linha-claro: #D4D2DE;
    /* grade e divisória, no claro */
    --linha-escuro: #2B2B3B;
    /* grade e divisória, no escuro */
    --linha-forte: #8A879B;
    /* borda de card no claro */
    --borda-escuro: #3A3A50;
    /* borda de card no escuro */

    /* Auxiliares (só nos arquivos) */
    --preto-elevado: #14141F;
    /* cards e janelas no escuro */
    --quadrado-apagado-escuro: #1C1C2A;
    /* grade de pixels no escuro */
    --quadrado-apagado-claro: #E4E2EC;
    /* grade de pixels no claro */
    --quadrado-apagado-violeta: #8E56F0;
    /* grade de pixels no violeta */
    --card-violeta: #6B2FDB;
    /* cards sobre violeta */
    --cinza-logo: #2B2B3C;
    /* logo sobre cinza */
    --branco: #FFFFFF;
    /* texto sobre violeta e cards; nunca fundo de post */
}

/* :root { ...suas variáveis de cor... } */

/* ---------- Fontes ---------- */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
    font-display: swap;
    font-weight: 200 800;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
    font-display: swap;
    font-weight: 100 800;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--papel);
    background: var(--tinta);
}

h1,
h2,
h3,
p,
ul {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
}

a:focus-visible {
    outline: 3px solid var(--papel);
    outline-offset: 3px;
}

.container {
    max-width: 72rem;
    margin: 0 auto;
    padding-inline: clamp(1.5rem, 5vw, 4.5rem);
    /* chega a 72 px no desktop */
}

.rotulo {
    margin-bottom: 0.5rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cinza-escuro);
}

/* ---------- Topo ---------- */
.topo {
    padding-block: 1rem;
    border-bottom: 1px solid var(--linha-escuro);
}

.topo__conteudo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.topo__marca {
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    text-decoration: none;
}

.menu {
    display: flex;
    gap: 1.5rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.875rem;
}

.menu a {
    text-decoration: none;
}

.menu a:hover {
    color: var(--violeta-claro);
}

/* ---------- Hero ---------- */
.hero {
    padding-block: 3rem;
}

.hero__tarja {
    width: fit-content;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--violeta-pixel);
    font-family: "JetBrains Mono", monospace;
    font-size: 1rem;
    color: var(--papel);
}

h1 {
    margin-bottom: 1rem;
    font-size: 2rem;
    line-height: 1.2;
}

.h1__forte {
    display: block;
    font-weight: 800;
}

.h1__leve {
    display: block;
    font-weight: 300;
}

.pixel {
    display: inline-block;
    width: 0.15em;
    height: 0.15em;
    margin-left: 0.08em;
    background: var(--violeta-pixel);
}

.hero__description {
    max-width: 40rem;
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    color: var(--cinza-escuro);
}

.hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ---------- Botões ---------- */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--violeta-pixel);
    font-family: "JetBrains Mono", monospace;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}

.btn--primario {
    background: var(--violeta-pixel);
    color: var(--papel);
}

.btn--secundario {
    background: transparent;
    color: var(--papel);
}

.btn:hover {
    background: var(--roxo);
    border-color: var(--roxo);
}

/* ---------- Seções (espaçamento e título em comum) ---------- */
.servicos,
.processo,
.contato {
    padding-block: 3rem;
    border-top: 1px solid var(--linha-escuro);
}

.servicos h2,
.processo h2,
.contato h2 {
    margin-bottom: 2rem;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
}

/* ---------- Serviços ---------- */
.servicos__lista {
    display: grid;
    gap: 1.5rem;
}

.servico {
    padding: 1.5rem;
    background: var(--preto-elevado);
    border: 1px solid var(--borda-escuro);
}

.servico__numero {
    display: block;
    margin-bottom: 1rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.875rem;
    color: var(--violeta-claro);
}

.servico h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}

.servico p {
    color: var(--cinza-escuro);
}

/* ---------- Contato (formulário) ---------- */
.formulario {
    display: grid;
    gap: 1.25rem;
    max-width: 36rem;
}

.formulario__campo input,
.formulario__campo textarea {
    width: 100%;
    padding: 0.75rem;
    background: var(--preto-elevado);
    border: 1px solid var(--borda-escuro);
    border-radius: 0.25rem;
    font: inherit;
    font-size: 1rem;
    /* 16px, em rem */
    color: var(--papel);
    /* campo não herda a cor do texto */
}

.formulario__campo input:focus-visible,
.formulario__campo textarea:focus-visible {
    outline: 3px solid var(--violeta-claro);
    outline-offset: 2px;
}

.formulario__campo {
    display: grid;
    gap: 0.5rem;
}

.consentimento {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.consentimento input {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.15rem 0 0;
}

.consentimento input:focus-visible {
    outline: 3px solid var(--violeta-claro);
    outline-offset: 2px;
}

.consentimento a {
    color: var(--violeta-claro);
}

.btn[type="submit"] {
    margin-top: 1rem;
    cursor: pointer;
    width: 100%;
}

/* ---------- Processo ---------- */
.processo__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: etapa;
    display: grid;
    gap: 2rem;
}

.processo__etapa {
    counter-increment: etapa;
    padding-top: 1rem;
    border-top: 2px solid var(--violeta-pixel);
}

.processo__numero::before {
    content: "0" counter(etapa);
    display: block;
    margin-bottom: 0.5rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.875rem;
    color: var(--violeta-claro);
}

.processo__etapa h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}

.processo__etapa p {
    color: var(--cinza-escuro);
}

/* ---------- Rodapé ---------- */
.rodape {
    padding-block: 2rem;
    border-top: 1px solid var(--linha-escuro);
    color: var(--cinza-escuro);
}

/* ===== Página de política de privacidade (adicione ao final do style.css) ===== */
.politica {
    padding-block: 3rem 4rem;
    max-width: 48rem;
    /* linhas curtas = leitura confortável */
}

.politica h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.1;
    margin-block-end: 0.5rem;
}

.politica h2 {
    font-size: 1.25rem;
    margin-block: 2.5rem 0.75rem;
}

.politica p,
.politica li {
    line-height: 1.7;
}

.politica p,
.politica ul {
    margin-block-end: 1rem;
}

.politica ul {
    padding-inline-start: 1.25rem;
    list-style: disc;
}

.politica li+li {
    margin-block-start: 0.5rem;
}

.politica a {
    color: var(--violeta-claro);
    text-underline-offset: 0.2em;
}

.politica code {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.9em;
}

.politica__data {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.875rem;
    color: var(--cinza-escuro);
}

/* Tabela: rola na horizontal no celular, sem quebrar a página */
.politica__tabela {
    overflow-x: auto;
    margin-block-end: 1.5rem;
}

.politica table {
    border-collapse: collapse;
    min-width: 40rem;
    width: 100%;
    font-size: 0.9375rem;
}

.politica th,
.politica td {
    text-align: left;
    vertical-align: top;
    padding: 0.75rem;
    border-block-end: 1px solid var(--linha-escuro);
}

.politica thead th {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cinza-escuro);
}

#aviso-cookies {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;

    display: grid;
    gap: 1rem;

    /* com zoom alto ou celular deitado, o conteúdo rola dentro do aviso */
    max-height: 90vh;
    overflow-y: auto;

    padding: 1.5rem;
    background: var(--preto-elevado);
    border-top: 1px solid var(--borda-escuro);
    color: var(--papel);
    box-shadow: 0 -8px 30px rgb(0 0 0 / 20%);
}

/* Garante que o atributo hidden funcione */
#aviso-cookies[hidden] {
    display: none;
}

#aviso-cookies h2 {
    margin: 0;
    font-size: 1.25rem;
}

#aviso-cookies p {
    max-width: 70ch;
    margin: 0;
    line-height: 1.6;
}

#aviso-cookies a {
    color: var(--violeta-claro);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

#aviso-cookies a:focus-visible,
#abrir-preferencias-cookies:focus-visible {
    outline: 2px solid var(--violeta-claro);
    outline-offset: 4px;
}

/* Foco visível em todos os botões .btn (Aceitar, Recusar, Enviar) */
.btn:focus-visible {
    outline: 3px solid var(--papel);
    outline-offset: 3px;
}

/* Botões: mesmo tamanho e destaque para Aceitar e Recusar */
.botoes-cookies {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.botoes-cookies .btn {
    flex: 1 1 10rem;
    text-align: center;
}

/* Botão do rodapé com aparência de link */
.link-cookies {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.link-cookies:hover {
    color: var(--violeta-claro);
}

/* ---------- Telas maiores ---------- */
@media (min-width: 768px) {
    .hero {
        padding-block: 5rem;
    }

    .hero__tarja {
        font-size: 1.25rem;
    }

    h1 {
        font-size: 3rem;
    }

    .hero__description {
        font-size: 1.25rem;
    }

    .servicos,
    .processo,
    .contato {
        padding-block: 5rem;
    }

    .servicos h2,
    .processo h2,
    .contato h2 {
        font-size: 2.25rem;
    }

    .servicos__lista {
        grid-template-columns: repeat(3, 1fr);
    }

    .processo__lista {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }

    .btn[type="submit"] {
        width: auto;
        justify-self: start;
    }
}

@media(max-width: 480px) {
    #aviso-cookies {
        gap: 0.875rem;
        padding: 1rem;
    }

    .botoes-cookies {
        gap: 0.75rem;
    }

    .botoes-cookies .btn {
        flex: 1 1 calc(50% - 0.75rem);
        min-width: 0;
    }
}

/* Telas maiores: mesma margem do resto do site, botões em tamanho natural */
@media (min-width: 768px) {
    #aviso-cookies {
        padding-inline: clamp(1.5rem, 5vw, 4.5rem);
    }

    .botoes-cookies .btn {
        flex: 0 0 auto;
    }
}