:root {
    --idb-petroleo: #173237;
    --idb-verde: #5FA08B;
    --idb-verde-profundo: #3E8A72;
    --idb-grafite: #26262B;
    --idb-nevoa: #E8ECE9;
    --idb-branco: #FFFFFF;
    --idb-font-titulo: 'Manrope', sans-serif;
    --idb-font-corpo: 'IBM Plex Sans', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--idb-nevoa);
    color: var(--idb-grafite);
    font-family: var(--idb-font-corpo);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

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

button,
input,
textarea {
    font: inherit;
}

.wrap {
    margin: 0 auto;
    max-width: 1160px;
    padding-inline: 28px;
    width: 100%;
}

.top {
    background: var(--idb-petroleo);
    color: var(--idb-nevoa);
    overflow: hidden;
}

.site-header {
    border-bottom: 1px solid var(--idb-verde-profundo);
}

.site-header .wrap {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    min-height: 84px;
}

.logo {
    display: block;
    height: 32px;
    width: auto;
}

.nav {
    align-items: center;
    display: flex;
    gap: 28px;
}

.nav-link {
    border-bottom: 2px solid transparent;
    color: var(--idb-nevoa);
    font-family: var(--idb-font-titulo);
    font-size: 14px;
    font-weight: 600;
    padding-block: 8px;
}

.nav-link:hover,
.nav-link:focus-visible {
    border-color: var(--idb-verde);
    color: var(--idb-verde);
}

.button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    display: inline-flex;
    font-family: var(--idb-font-corpo);
    font-size: 15px;
    font-weight: 500;
    justify-content: center;
    min-height: 46px;
    padding: 10px 20px;
    transition: transform 150ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background: var(--idb-verde);
    color: var(--idb-petroleo);
}

.button-secondary {
    /* ⚠️ `background` explícito, e não herdado: a variante nasceu para <a>, que
       é transparente por natureza. No <button> do aviso de medição o navegador
       aplica o fundo padrão dele (quase branco) — e o texto claro desaparece
       nele. Sem esta linha, "Recusar" fica ilegível. */
    background: transparent;
    border-color: var(--idb-verde);
    color: var(--idb-nevoa);
}

.button-secondary:hover {
    background: var(--idb-verde-profundo);
    color: var(--idb-nevoa);
}

/* ⚠️ A variante nasceu para seção ESCURA — o texto é `--idb-nevoa`. Numa seção
   clara ela vira uma borda verde com NADA dentro: o texto some no fundo, e o
   botão parece um campo vazio. Foi assim que o "Saiba mais" nasceu, e o defeito
   não aparece em revisão de código nenhuma — só olhando a tela.
   A cor passa a seguir o fundo da seção; no hover, que preenche de verde
   profundo, ela volta a clarear (regra logo acima). */
.section-light .button-secondary,
.section-white .button-secondary {
    color: var(--idb-petroleo);
}

.button-light {
    background: var(--idb-nevoa);
    color: var(--idb-petroleo);
}

.hero {
    align-items: center;
    display: flex;
    min-height: 650px;
    padding-block: 88px 104px;
    position: relative;
}

.hero > div {
    max-width: 950px;
    position: relative;
    z-index: 1;
}

.hero::after {
    background: url('/images/brand/icone-fundo-escuro.svg') center / contain no-repeat;
    content: "";
    height: 520px;
    opacity: .08;
    pointer-events: none;
    position: absolute;
    right: -72px;
    top: 50%;
    transform: translateY(-50%);
    width: 520px;
}

.kicker,
.eyebrow {
    color: var(--idb-verde);
    font-family: var(--idb-font-corpo);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.kicker {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.kicker::before {
    background: var(--idb-verde);
    content: "";
    height: 2px;
    width: 26px;
}

h1,
h2,
h3 {
    font-family: var(--idb-font-titulo);
    font-weight: 600;
}

h1 {
    color: var(--idb-nevoa);
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.02;
    max-width: 950px;
}

h1 .accent {
    color: var(--idb-verde);
}

.lead {
    color: var(--idb-nevoa);
    font-size: clamp(17px, 2vw, 20px);
    margin-top: 26px;
    max-width: 640px;
}

.section {
    padding-block: 96px;
}

.section-light {
    background: var(--idb-nevoa);
}

.section-white {
    background: var(--idb-branco);
}

.section-dark {
    background: var(--idb-petroleo);
    color: var(--idb-nevoa);
}

.section-heading {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    margin-bottom: 48px;
}

.section-heading h2 {
    color: var(--idb-petroleo);
    font-size: clamp(32px, 4.5vw, 50px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.08;
    margin-top: 12px;
    max-width: 16ch;
}

.section-dark .section-heading h2 {
    color: var(--idb-nevoa);
}

.section-intro {
    align-self: end;
    font-size: 17px;
}

.section-heading-stacked {
    gap: 14px;
    grid-template-columns: minmax(0, 760px);
}

.section-heading-stacked h2 {
    max-width: 26ch;
}

.section-heading-stacked .section-intro {
    max-width: 660px;
}

/* Título em UMA linha, quebrando só quando a área da tela acaba.
   ⚠️ São DUAS travas a soltar, não uma: o `max-width` em `ch` do h2 e a coluna
   de 760px do bloco empilhado. Mexer só no `max-width` não adianta — a coluna
   continuaria quebrando a linha no mesmo lugar.
   O tamanho da fonte fica o das outras seções: com a largura solta, a frase
   cabe inteira, e o `4.5vw` do meio do clamp acompanha o `.wrap` quase na
   proporção — por isso a linha se mantém única até ~650px de viewport, e só aí
   quebra, que é o comportamento pedido.
   O subtítulo segue nos 660px de sempre: linha longa demais atrapalha leitura
   de texto corrido, e o que vale para título não vale para parágrafo. */
.section-heading-oneline {
    grid-template-columns: minmax(0, 1fr);
}

.section-heading-oneline h2 {
    max-width: none;
}

/* Bloco empilhado usando a LARGURA TODA do .wrap — título e subtítulo.
   São TRÊS travas a soltar, não duas: a coluna de 760px, o max-width em `ch`
   do h2 e o teto de 660px do subtítulo. Esquecer a terceira deixa o parágrafo
   parado no meio da tela, com o resto vazio à direita.
   ⚠️ Isto ABRE MÃO da medida confortável de leitura (o tal teto de 660px):
   a 1160px de .wrap a linha passa de 120 caracteres. Vale quando o texto é
   curto o bastante para caber em poucas linhas — parágrafo longo aqui vira
   parede. */
.section-heading-full {
    grid-template-columns: minmax(0, 1fr);
}

.section-heading-full h2,
.section-heading-full .section-intro {
    max-width: none;
}

/* Subtítulo CENTRALIZADO na altura da coluna de texto ao lado, em vez de
   encostado embaixo (o padrão) ou pendurado na primeira linha do título.
   ⚠️ Sem número mágico: olho, título e subtítulo são três células do mesmo
   grid, e o subtítulo **atravessa as duas linhas** (`grid-row: 1 / span 2`)
   para centralizar-se contra o bloco inteiro. Se ele ficasse preso à linha do
   título, o olho ficaria fora da conta e o centro sairia do lugar.
   ⚠️ `span 2`, e **não** `1 / -1`: sem `grid-template-rows` declarado, o `-1`
   resolve contra a grade EXPLÍCITA (que aqui não tem linha alguma) e degenera
   para a linha 1 — o parágrafo gruda no topo e empurra o título para baixo,
   sem erro nenhum no console.
   O `margin-top` do h2 é zerado e vira `row-gap`, senão o título desceria
   12px sozinho dentro da linha. */
.section-heading-intro-centered {
    row-gap: 12px;
}

.section-heading-intro-centered .eyebrow {
    grid-column: 1;
    grid-row: 1;
}

.section-heading-intro-centered h2 {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
}

.section-heading-intro-centered .section-intro {
    align-self: center;
    grid-column: 2;
    grid-row: 1 / span 2;
}

.principles,
.features,
.paths {
    display: grid;
    gap: 18px;
}

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

.principle {
    background: var(--idb-branco);
    border-radius: 14px;
    padding: 28px;
}

.principle .number {
    color: var(--idb-verde-profundo);
    display: block;
    font-family: var(--idb-font-titulo);
    font-size: 13px;
    font-weight: 600;
    margin-top: 18px;
}

.principle-icon {
    align-items: center;
    color: var(--idb-verde-profundo);
    display: flex;
    height: 34px;
    justify-content: flex-start;
    width: 34px;
}

.principle-icon svg {
    height: 30px;
    width: 30px;
}

.principle h3,
.feature h3,
.path h3 {
    color: var(--idb-petroleo);
    font-size: 20px;
    font-weight: 600;
    margin: 10px 0 8px;
}

.principle p,
.feature p,
.path p {
    font-size: 15px;
}

.features {
    grid-template-columns: repeat(4, 1fr);
}

.feature {
    background: var(--idb-nevoa);
    border-radius: 14px;
    color: var(--idb-grafite);
    padding: 26px;
}

.feature-icon {
    align-items: center;
    color: var(--idb-verde-profundo);
    display: flex;
    height: 34px;
    justify-content: flex-start;
    width: 34px;
}

.feature-icon svg {
    height: 30px;
    width: 30px;
}

.product-note {
    border-left: 3px solid var(--idb-verde);
    font-size: 14px;
    margin-top: 32px;
    max-width: 820px;
    padding-left: 16px;
}

.paths {
    grid-template-columns: 1fr 1fr;
}

.path {
    border: 1px solid var(--idb-verde);
    border-radius: 16px;
    padding: 34px;
}

.path-mark {
    color: var(--idb-verde-profundo);
    font-family: var(--idb-font-corpo);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.path h3 {
    font-size: 25px;
}

.contact-layout {
    display: grid;
    gap: 64px;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
}

.contact-copy h2 {
    color: var(--idb-nevoa);
    font-size: clamp(34px, 4.5vw, 52px);
    letter-spacing: -.035em;
    line-height: 1.08;
    margin: 12px 0 18px;
}

.contact-copy > p {
    font-size: 17px;
}

.contact-links {
    border-top: 1px solid var(--idb-verde-profundo);
    display: grid;
    gap: 9px;
    margin-top: 30px;
    padding-top: 24px;
}

/* A calha de 26px é só dos LINKS, não do bloco todo: assim o ícone nasce
   exatamente na margem do endereço ("Joinville, Santa Catarina"), e a coluna
   visual da esquerda fica reta. Reservá-la também para o endereço deixaria o
   texto dele recuado com nada na frente, e os ícones pendurados fora da
   coluna. */
.contact-links a {
    color: var(--idb-verde);
    padding-left: 26px;
    position: relative;
}

/* No lugar do sublinhado, um ícone à frente de cada link — envelope no e-mail,
   glifo do Instagram —, visível o tempo todo. Ele ocupa a calha de 26px do
   bloco, então não empurra texto nenhum.
   ⚠️ `mask` + `background: currentColor`, e não `background-image`: assim o
   desenho herda a cor do link e acompanha o hover — um SVG colorido no data URI
   teria a cor cravada em duas cópias. */
.contact-links a::before {
    background: currentColor;
    content: "";
    height: 18px;
    left: 0;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
}

/* Sem sublinhado, a resposta ao mouse é o clareamento do texto — e o ícone vem
   junto, porque é `currentColor`. O foco por teclado continua com o anel do
   navegador, que não é removido em lugar nenhum desta folha. */
.contact-links a:hover {
    color: var(--idb-nevoa);
}

/* O ícone sai do próprio `href`, não de uma classe a lembrar de pôr na view. */
.contact-links a[href^="mailto:"] {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='m3.2 7.2 8 5.3a1.5 1.5 0 0 0 1.6 0l8-5.3'/%3E%3C/svg%3E");
}

.contact-links a[href*="instagram"] {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.2' cy='6.9' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* ⚠️ Casa `fb.com` E `facebook.com`: o endereço curto é o que está na view
   hoje, mas quem trocar pelo longo não pode perder o ícone em silêncio.
   ⚠️ O "f" é caminho PREENCHIDO dentro do quadrado traçado — desenhá-lo com
   traço de 1.7px, como o resto, empastava a letra a 18px e ela virava um
   rabisco. O quadrado segue traçado, para casar com o glifo do Instagram. */
.contact-links a[href*="fb.com"],
.contact-links a[href*="facebook"] {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M13.9 19.6v-5.7h1.9l.3-2.2h-2.2v-1.4c0-.6.2-1.1 1.1-1.1h1.2V7.2c-.2 0-.9-.1-1.7-.1-1.7 0-2.8 1-2.8 2.9v1.7H9.8v2.2h1.9v5.7z' fill='%23000'/%3E%3C/svg%3E");
}

.form-shell {
    background: var(--idb-nevoa);
    border-radius: 18px;
    color: var(--idb-grafite);
    padding: 34px;
}

.form-shell h3 {
    color: var(--idb-petroleo);
    font-size: 24px;
    margin-bottom: 24px;
}

.fields {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-wide,
.consent,
.send,
.recaptcha-note {
    grid-column: 1 / -1;
}

.field label {
    color: var(--idb-petroleo);
    font-family: var(--idb-font-corpo);
    font-size: 13px;
    font-weight: 500;
}

.optional {
    color: var(--idb-grafite);
    font-family: var(--idb-font-corpo);
    font-weight: 400;
}

.field input,
.field textarea {
    background: var(--idb-branco);
    border: 1px solid var(--idb-verde);
    border-radius: 9px;
    color: var(--idb-grafite);
    font-size: 15px;
    padding: 11px 13px;
    width: 100%;
}

.field textarea {
    min-height: 128px;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--idb-petroleo);
    outline: 2px solid var(--idb-verde);
    outline-offset: 2px;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
    border-color: #8A2F2F;
}

.error {
    color: #8A2F2F;
    font-size: 13px;
}

.honey-trap {
    height: 1px;
    left: -9999px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.consent {
    align-items: flex-start;
    display: flex;
    gap: 10px;
}

.consent input {
    accent-color: var(--idb-verde-profundo);
    flex: 0 0 auto;
    height: 17px;
    margin-top: 3px;
    width: 17px;
}

.consent label {
    font-size: 13px;
}

.send {
    background: var(--idb-verde-profundo);
    border: 0;
    border-radius: 10px;
    color: var(--idb-branco);
    cursor: pointer;
    font-family: var(--idb-font-corpo);
    font-weight: 500;
    justify-self: start;
    padding: 12px 24px;
}

.send:hover {
    background: var(--idb-petroleo);
}

.send[disabled] {
    cursor: progress;
    opacity: .7;
}

.recaptcha-note {
    font-size: 12px;
}

.recaptcha-note a {
    text-decoration: underline;
}

.success {
    align-items: flex-start;
    border: 1px solid var(--idb-verde-profundo);
    border-radius: 12px;
    display: flex;
    gap: 12px;
    padding: 18px;
}

.success strong {
    color: var(--idb-verde-profundo);
    font-family: var(--idb-font-titulo);
}

.grecaptcha-badge {
    visibility: hidden;
}

.site-footer {
    background: var(--idb-nevoa);
    border-top: 1px solid var(--idb-verde);
    color: var(--idb-grafite);
    font-size: 13px;
    padding-block: 28px;
}

.site-footer .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
}

@media (max-width: 900px) {
    .section-heading,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    /* ⚠️ Numa coluna só, a célula fixada em `grid-column: 2` criaria uma
       segunda coluna implícita e jogaria o subtítulo para fora da largura da
       tela — e o `grid-row: 1 / -1` o faria atravessar o título. Aqui os três
       voltam a empilhar, na ordem natural. */
    .section-heading-intro-centered .section-intro {
        grid-column: 1;
        grid-row: auto;
    }

    .principles {
        grid-template-columns: 1fr;
    }

    .features {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 620px) {
    .wrap {
        padding-inline: 18px;
    }

    .site-header .wrap {
        min-height: 72px;
    }

    .logo {
        height: 27px;
    }

    .nav-link {
        display: none;
    }

    .nav {
        gap: 0;
    }

    .hero {
        gap: 52px;
        min-height: auto;
        padding-block: 64px 72px;
    }

    .hero::after {
        height: 330px;
        opacity: .06;
        right: -125px;
        width: 330px;
    }

    h1 {
        font-size: clamp(40px, 13vw, 56px);
    }

    .desktop-break {
        display: none;
    }

    .section {
        padding-block: 68px;
    }

    .features,
    .paths,
    .fields {
        grid-template-columns: 1fr;
    }

    .form-shell {
        padding: 24px 18px;
    }

    .send {
        justify-self: stretch;
    }

    .site-footer .wrap {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .button {
        transition: none;
    }
}

/* Aviso de medição de audiência (ADR-0059). Só existe na landing, e só aparece
   para quem ainda não decidiu — a escolha fica no navegador da pessoa. */
.consent-bar {
    align-items: center;
    background: var(--idb-petroleo);
    border: 1px solid var(--idb-verde-profundo);
    border-radius: 14px;
    bottom: 18px;
    box-shadow: 0 12px 32px rgba(23, 50, 55, .28);
    color: var(--idb-nevoa);
    display: flex;
    gap: 20px;
    inset-inline: 18px;
    justify-content: space-between;
    margin-inline: auto;
    max-width: 880px;
    padding: 18px 22px;
    position: fixed;
    z-index: 20;
}

/* ⚠️ O `display: flex` acima passa por cima do `display: none` que o atributo
   `hidden` traz do navegador. Sem esta linha, o banner ficaria visível para
   todo mundo — inclusive para quem já recusou. */
.consent-bar[hidden] {
    display: none;
}

.consent-bar p {
    font-size: 14px;
}

.consent-actions {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

.consent-actions .button {
    cursor: pointer;
    min-height: 42px;
    padding: 8px 18px;
}

@media (max-width: 900px) {
    .consent-bar {
        align-items: stretch;
        bottom: 12px;
        flex-direction: column;
        gap: 14px;
        inset-inline: 12px;
    }

    .consent-actions .button {
        flex: 1;
    }
}

/* — voltar ao topo —
   A página é longa e a navegação vive no cabeçalho: sem isto, voltar ao menu
   depois de ler o formulário de contato é rolar tudo de novo.

   ⚠️ É um <a href="#topo">, não um <button> com JS de rolagem. Âncora é o que o
   navegador já sabe fazer: funciona com clique do meio, abre no teclado, e a
   rolagem suave vem do `scroll-behavior` que esta folha já declara — inclusive
   o desligamento dele em `prefers-reduced-motion`, logo acima. */
.ao-topo {
    align-items: center;
    background: var(--idb-petroleo);
    border: 1px solid var(--idb-verde-profundo);
    border-radius: 999px;
    bottom: 18px;
    box-shadow: 0 8px 24px rgba(23, 50, 55, .24);
    color: var(--idb-nevoa);
    display: flex;
    height: 46px;
    inset-inline-end: 18px;
    justify-content: center;
    position: fixed;
    transition: opacity 200ms ease, transform 200ms ease;
    width: 46px;
    z-index: 15;
}

/* ⚠️ `visibility: hidden`, e não só `opacity: 0`. Opacidade sozinha deixa o
   link NO CAMINHO DO TAB: quem navega por teclado tabularia para um botão que
   não está na tela, e o foco sumiria sem explicação. */
.ao-topo[data-oculto] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    visibility: hidden;
}

.ao-topo:hover,
.ao-topo:focus-visible {
    background: var(--idb-verde-profundo);
    border-color: var(--idb-verde);
}

.ao-topo svg {
    height: 20px;
    width: 20px;
}

/* ⚠️ Sai da frente da barra de consentimento, que é `position: fixed` no mesmo
   canto. O seletor é de IRMÃO POSTERIOR e olha o atributo `hidden` que o
   próprio banner já liga e desliga — nada de JS novo para sincronizar dois
   elementos flutuantes, que é como eles saem de sincronia.
   ⚠️ Depende de o link vir DEPOIS do banner no HTML; `~` não anda para trás. */
.consent-bar:not([hidden]) ~ .ao-topo {
    bottom: 96px;
}

@media (max-width: 900px) {
    .ao-topo {
        bottom: 12px;
        inset-inline-end: 12px;
    }

    /* O banner vira coluna aqui e fica bem mais alto. */
    .consent-bar:not([hidden]) ~ .ao-topo {
        bottom: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ao-topo {
        transition: none;
    }

    .ao-topo[data-oculto] {
        transform: none;
    }
}