/* ============================================================
   COUROS MARTINS · Bancos Automotivos
   Folha de estilo principal — escrita à mão, sem framework.

   Registro visual: showroom. Fundo claro, fotografia grande,
   tipografia geométrica leve e movimento discreto.

   01 Base            06 Blocos de conteúdo
   02 Tipografia      07 Galeria
   03 Componentes     08 Formulários
   04 Cabeçalho       09 Rodapé
   05 Hero            10 Movimento e responsivo
   ============================================================ */

/* ── 01. Base ────────────────────────────────────────────── */

:root {
    --tinta:    #16181a;
    --tinta-80: #3b4043;
    --tinta-60: #55595c;
    --tinta-40: #6b7073;

    --papel:  #ffffff;
    --nuvem:  #f5f4f2;
    --areia:  #f0ece6;
    --linha:  #e4e2de;

    --escuro:   #101214;
    --escuro-2: #1a1d1f;
    --linha-esc: rgba(255, 255, 255, .16);

    --acento:    #8f5c2c;
    --acento-cl: #b4854f;

    --sans: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, -apple-system, sans-serif;

    --largura: 1440px;
    --gutter:  clamp(20px, 4.4vw, 72px);
    --respiro: clamp(64px, 8.4vw, 132px);

    --curva:       cubic-bezier(.25, .1, .25, 1);
    --curva-suave: cubic-bezier(.6, .02, .18, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font: 400 clamp(15.5px, 1.02vw, 17px)/1.7 var(--sans);
    letter-spacing: .008em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--tinta); color: var(--papel); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.envoltorio {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.envoltorio--estreito { max-width: 900px; }

.oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pular {
    position: fixed;
    top: -64px; left: 20px;
    z-index: 999;
    padding: 12px 22px;
    background: var(--tinta);
    color: var(--papel);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: top .25s var(--curva);
}
.pular:focus { top: 20px; }

/* ── 02. Tipografia ──────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.14; }

p { margin: 0 0 1.15em; color: var(--tinta-80); max-width: 62ch; }
p:last-child { margin-bottom: 0; }
p strong { color: var(--tinta); font-weight: 500; }

.rotulo {
    display: block;
    margin: 0 0 20px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--tinta-40);
}

.titulo-1 {
    font-size: clamp(2.3rem, 5.4vw, 4.4rem);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -.032em;
    max-width: 19ch;
}
.titulo-2 {
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.028em;
    max-width: 20ch;
}
.titulo-3 {
    font-size: clamp(1.25rem, 1.9vw, 1.55rem);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -.018em;
}
.titulo-1 .linha, .titulo-2 .linha { display: block; }

.entrada {
    font-size: clamp(1.06rem, 1.4vw, 1.32rem);
    font-weight: 300;
    line-height: 1.62;
    color: var(--tinta-80);
    max-width: 56ch;
}

/* ── 03. Componentes ─────────────────────────────────────── */

.botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 15px 30px;
    border: 1px solid var(--tinta);
    border-radius: 100px;
    background: var(--tinta);
    color: var(--papel);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .09em;
    cursor: pointer;
    transition: background-color .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva);
}
.botao svg { transition: transform .4s var(--curva); }
.botao:hover { background: transparent; color: var(--tinta); }
.botao:hover svg { transform: translateX(4px); }

.botao--vazado { background: transparent; color: var(--tinta); }
.botao--vazado:hover { background: var(--tinta); color: var(--papel); }

.botao--claro {
    background: var(--papel);
    border-color: var(--papel);
    color: var(--tinta);
}
.botao--claro:hover { background: transparent; color: var(--papel); }

.botao--linha {
    background: transparent;
    border-color: rgba(255, 255, 255, .5);
    color: var(--papel);
}
.botao--linha:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }

.botao--pequeno { padding: 11px 22px; font-size: 11.5px; }
.botao--largo { width: 100%; }

.link-seta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 3px;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--tinta);
    border-bottom: 1px solid var(--linha);
    transition: border-color .35s, color .35s, gap .35s var(--curva);
}
.link-seta svg { flex: none; color: var(--acento); transition: transform .4s var(--curva); }
.link-seta:hover { border-color: var(--tinta); gap: 14px; }
.link-seta:hover svg { transform: translateX(2px); }
.link-seta--claro { color: var(--papel); border-color: rgba(255, 255, 255, .35); }
.link-seta--claro svg { color: var(--acento-cl); }
.link-seta--claro:hover { border-color: var(--papel); }

.fio {
    height: 1px;
    background: var(--linha);
    border: 0;
    margin: 0;
}

.aviso {
    margin: 0 0 24px;
    padding: 15px 20px;
    border-left: 2px solid;
    font-size: 14px;
    max-width: none;
}
.aviso--ok   { border-color: #3f7d4e; background: #f1f7f2; color: #2c5c38; }
.aviso--erro { border-color: #b4483a; background: #fbf1ef; color: #8f342a; }

/* ── 04. Cabeçalho ───────────────────────────────────────── */

.topo {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--papel);
    border-bottom: 1px solid transparent;
    transition: border-color .4s var(--curva), box-shadow .4s var(--curva);
}
.topo.esta-fixo {
    border-bottom-color: var(--linha);
    box-shadow: 0 1px 24px rgba(22, 24, 26, .05);
}

.topo__grade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: clamp(72px, 7vw, 88px);
}

.marca { flex: none; display: block; }
.marca img {
    width: auto;
    height: clamp(40px, 3.6vw, 52px);
    transition: opacity .3s;
}
.marca:hover img { opacity: .75; }

.menu__lista {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.3vw, 36px);
    list-style: none;
    margin: 0; padding: 0;
}
.menu__item {
    position: relative;
    display: block;
    padding: 6px 0;
    font-size: 13.5px;
    letter-spacing: .01em;
    color: var(--tinta-80);
    transition: color .3s;
}
.menu__item::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--acento);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s var(--curva-suave);
}
.menu__item:hover { color: var(--tinta); }
.menu__item:hover::after { transform: scaleX(1); transform-origin: left; }
.menu__item.esta-ativo { color: var(--tinta); }
.menu__item.esta-ativo::after { transform: scaleX(1); }

.topo__acoes { display: flex; align-items: center; gap: 18px; }

.restrito {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-40);
    transition: color .3s;
}
.restrito:hover { color: var(--tinta); }

.hamburguer {
    display: none;
    width: 42px; height: 42px;
    background: none;
    border: 1px solid var(--linha);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}
.hamburguer span {
    position: absolute;
    left: 50%;
    width: 15px; height: 1.2px;
    background: var(--tinta);
    transform: translateX(-50%);
    transition: transform .4s var(--curva);
}
.hamburguer span:first-child { top: 17px; }
.hamburguer span:last-child  { top: 23px; }
.hamburguer[aria-expanded="true"] span:first-child { transform: translateX(-50%) translateY(3px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:last-child  { transform: translateX(-50%) translateY(-3px) rotate(-45deg); }

.cortina {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--papel);
    opacity: 0;
    transition: opacity .4s var(--curva);
}
.cortina[hidden] { display: none; }
.cortina.esta-aberta { opacity: 1; }
.cortina__conteudo { padding: 100px var(--gutter) 40px; }
.cortina__lista { list-style: none; margin: 0 0 44px; padding: 0; }
.cortina__lista li { border-bottom: 1px solid var(--linha); overflow: hidden; }
.cortina__lista a {
    display: block;
    padding: 17px 0;
    font-size: clamp(1.5rem, 6.4vw, 2.1rem);
    font-weight: 300;
    letter-spacing: -.028em;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .55s var(--curva-suave), opacity .4s;
    transition-delay: calc(var(--i) * 45ms);
}
.cortina.esta-aberta .cortina__lista a { transform: none; opacity: 1; }
.cortina__rodape {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 22px;
}
.cortina__rodape .rotulo { margin-bottom: 6px; }
.cortina__rodape a { font-size: 14.5px; color: var(--tinta-80); }
.cortina__rodape a:hover { color: var(--acento); }

/* ── 05. Hero ────────────────────────────────────────────── */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(520px, 84vh, 880px);
    background: var(--escuro);
    overflow: hidden;
    isolation: isolate;
}
.hero__fundo { position: absolute; inset: 0; z-index: -2; }
.hero__fundo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 62% 52%;
}
.hero__veu {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(10, 11, 12, .74) 0%, rgba(10, 11, 12, .28) 48%, rgba(10, 11, 12, .1) 100%),
        linear-gradient(to right, rgba(10, 11, 12, .74) 0%, rgba(10, 11, 12, .36) 38%, transparent 66%),
        radial-gradient(90% 80% at 88% 12%, rgba(143, 92, 44, .34), transparent 62%);
}
.hero__conteudo {
    position: relative;
    width: 100%;
    padding-block: clamp(46px, 7vw, 92px);
    color: var(--papel);
}
.hero .rotulo { color: rgba(255, 255, 255, .62); }
.hero__titulo {
    font-size: clamp(2.4rem, 5.6vw, 4.6rem);
    font-weight: 300;
    line-height: 1.03;
    letter-spacing: -.034em;
    max-width: 16ch;
    margin-bottom: 26px;
}
.hero__titulo .linha { display: block; }
.hero__texto {
    max-width: 46ch;
    font-size: clamp(1rem, 1.16vw, 1.12rem);
    font-weight: 300;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 34px;
}
.hero__acoes { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.hero__barra {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero__barra .envoltorio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
}
.hero__marca {
    padding: 22px 26px 22px 0;
    color: var(--papel);
}
.hero__marca dt {
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 8px;
}
.hero__marca dd {
    margin: 0;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 300;
    letter-spacing: -.02em;
}

/* ── 06. Blocos de conteúdo ──────────────────────────────── */

.bloco { padding-block: var(--respiro); }
.bloco--nuvem  { background: var(--nuvem); }
.bloco--areia  { background: var(--areia); }
.bloco--escuro { background: var(--escuro); color: var(--papel); }
.bloco--escuro p { color: rgba(255, 255, 255, .74); }
.bloco--escuro .rotulo { color: rgba(255, 255, 255, .45); }
.bloco--curto { padding-block: clamp(44px, 5.4vw, 84px); }
.bloco--sem-topo { padding-top: 0; }

.cabeca {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 72px);
    align-items: end;
    margin-bottom: clamp(34px, 4.4vw, 64px);
}
.cabeca--simples { grid-template-columns: minmax(0, 1fr); }
.cabeca__acao { justify-self: end; align-self: end; }

/* declaração — parágrafo grande de abertura de seção */
.declaracao {
    font-size: clamp(1.4rem, 2.8vw, 2.3rem);
    font-weight: 300;
    line-height: 1.32;
    letter-spacing: -.024em;
    color: var(--tinta);
    max-width: 24ch;
}
.declaracao--largo { max-width: 34ch; }

/* dois textos lado a lado */
.colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(22px, 3vw, 56px);
}

/* cartões de conteúdo (padrão showroom) */
.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(18px, 2.4vw, 34px);
}
.cartao { display: flex; flex-direction: column; }
.cartao__imagem {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    background: var(--nuvem);
}
.cartao__imagem img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 1.1s var(--curva);
}
.cartao:hover .cartao__imagem img { transform: scale(1.04); }
.cartao__indice {
    margin: 0 0 10px;
    font-size: 10.5px;
    letter-spacing: .2em;
    color: var(--acento);
}
.cartao h3 { margin-bottom: 12px; }
.cartao p { font-size: 14.6px; margin-bottom: 20px; flex: 1; }
.cartao .link-seta { align-self: flex-start; }

/* divisão 50/50 imagem + texto */
.divisao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(26px, 4.4vw, 80px);
    align-items: center;
}
.divisao--invertida .divisao__midia { order: 2; }
.divisao__midia { position: relative; overflow: hidden; }
.divisao__midia img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.divisao__midia--larga img { aspect-ratio: 4 / 3; }
.divisao__texto .titulo-2 { margin-bottom: 22px; }

/* legenda sob imagem */
.legenda {
    margin-top: 12px;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-40);
}
.bloco--escuro .legenda { color: rgba(255, 255, 255, .45); }

/* faixa de números */
.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    border-top: 1px solid var(--linha);
}
.numeros > div {
    padding: 26px 24px 26px 0;
    border-bottom: 1px solid var(--linha);
}
.numeros dt {
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tinta-40);
    margin-bottom: 10px;
}
.numeros dd {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 300;
    letter-spacing: -.032em;
    line-height: 1;
}
.numeros dd i { font-style: normal; font-size: .42em; letter-spacing: 0; color: var(--tinta-60); margin-left: 3px; }
.bloco--escuro .numeros { border-color: var(--linha-esc); }
.bloco--escuro .numeros > div { border-color: var(--linha-esc); }
.bloco--escuro .numeros dt { color: rgba(255, 255, 255, .45); }
.bloco--escuro .numeros dd i { color: rgba(255, 255, 255, .55); }

/* lista de parâmetros — grade editorial com filete no topo de cada item */
.itens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 52px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.itens > li {
    padding-top: 20px;
    border-top: 1px solid var(--linha);
}
.itens__num {
    display: block;
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--acento);
    margin-bottom: 12px;
}
.itens h3 { font-size: 1.06rem; font-weight: 400; letter-spacing: -.012em; margin-bottom: 8px; }
.itens p { font-size: 13.8px; line-height: 1.62; margin: 0; max-width: 34ch; }
.bloco--escuro .itens > li { border-color: var(--linha-esc); }
.bloco--escuro .itens__num { color: var(--acento-cl); }

/* passos numerados */
.passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(20px, 2.6vw, 40px);
    counter-reset: passo;
}
.passo { position: relative; padding-top: 24px; border-top: 1px solid var(--linha); }
.passo__num {
    display: block;
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--acento);
    margin-bottom: 14px;
}
.passo h3 { font-size: 1.05rem; font-weight: 400; margin-bottom: 10px; letter-spacing: -.01em; }
.passo p { font-size: 13.8px; line-height: 1.6; }
.bloco--escuro .passo { border-color: var(--linha-esc); }
.bloco--escuro .passo__num { color: var(--acento-cl); }

/* faixa de destaque com fotografia */
.faixa-foto {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(360px, 48vw, 560px);
    overflow: hidden;
    isolation: isolate;
    background: var(--escuro);
}
.faixa-foto__fundo { position: absolute; inset: 0; z-index: -2; }
.faixa-foto__fundo img { width: 100%; height: 100%; object-fit: cover; }
.faixa-foto__veu {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgba(10, 11, 12, .86), rgba(10, 11, 12, .32) 72%),
        radial-gradient(70% 90% at 92% 100%, rgba(143, 92, 44, .3), transparent 60%);
}
.faixa-foto__conteudo { position: relative; color: var(--papel); padding-block: clamp(40px, 5vw, 70px); }
.faixa-foto .rotulo { color: rgba(255, 255, 255, .55); }
.faixa-foto p { color: rgba(255, 255, 255, .78); }

/* lista de regiões */
.regioes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0 clamp(20px, 3vw, 48px);
    list-style: none;
    margin: 0; padding: 0;
}
.regioes li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--linha);
    font-size: 1.02rem;
    color: var(--tinta-80);
}
.regioes span { font-size: 10.5px; letter-spacing: .16em; color: var(--acento); }

/* citação / destaque em bloco */
.destaque {
    padding: clamp(26px, 3vw, 44px);
    background: var(--nuvem);
    border-left: 2px solid var(--acento);
}
.destaque p { font-size: 15px; margin: 0; }
.bloco--escuro .destaque { background: var(--escuro-2); border-color: var(--acento-cl); }

/* ficha técnica */
.ficha { margin: 0; }
.ficha > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--linha);
}
.ficha dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-40); }
.ficha dd { margin: 0; font-size: 15px; text-align: right; color: var(--tinta); }
.bloco--escuro .ficha > div { border-color: var(--linha-esc); }
.bloco--escuro .ficha dt { color: rgba(255, 255, 255, .45); }
.bloco--escuro .ficha dd { color: var(--papel); }

/* painel técnico ilustrativo */
.painel-tec { border: 1px solid var(--linha); background: var(--papel); }
.bloco--escuro .painel-tec { border-color: var(--linha-esc); background: var(--escuro-2); }
.painel-tec__topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--linha);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tinta-40);
}
.bloco--escuro .painel-tec__topo { border-color: var(--linha-esc); color: rgba(255, 255, 255, .5); }
.painel-tec__luz {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4a9a63;
    animation: pisca 2.4s ease-in-out infinite;
}
@keyframes pisca { 50% { opacity: .3; } }
.painel-tec__estado { margin-left: auto; color: var(--acento); }
.painel-tec__grafico { height: 120px; padding: 10px 0; }
.painel-tec__grafico svg { width: 100%; height: 100%; }
.painel-tec__grade { stroke: var(--linha); stroke-width: 1; }
.bloco--escuro .painel-tec__grade { stroke: rgba(255, 255, 255, .1); }
.painel-tec__onda { stroke: var(--acento-cl); stroke-width: 1.4; }
.painel-tec__dados {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin: 0;
    background: var(--linha);
    border-block: 1px solid var(--linha);
}
.bloco--escuro .painel-tec__dados { background: var(--linha-esc); border-color: var(--linha-esc); }
.painel-tec__dados > div { padding: 16px 20px; background: var(--papel); }
.bloco--escuro .painel-tec__dados > div { background: var(--escuro-2); }
.painel-tec__dados dt {
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tinta-40);
    margin-bottom: 6px;
}
.bloco--escuro .painel-tec__dados dt { color: rgba(255, 255, 255, .45); }
.painel-tec__dados dd { margin: 0; font-size: 1.15rem; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.painel-tec__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tinta-40);
}
.bloco--escuro .painel-tec__rodape { color: rgba(255, 255, 255, .45); }
.painel-tec__rodape strong { font-size: 14px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--tinta); }
.bloco--escuro .painel-tec__rodape strong { color: var(--papel); }

/* cabeçalho das páginas internas */
.capa {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(340px, 46vh, 500px);
    background: var(--escuro);
    overflow: hidden;
    isolation: isolate;
}
.capa__fundo { position: absolute; inset: 0; z-index: -2; }
.capa__fundo img { width: 100%; height: 100%; object-fit: cover; }
.capa__veu {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(10, 11, 12, .88), rgba(10, 11, 12, .4) 72%),
        linear-gradient(to right, rgba(10, 11, 12, .6), transparent 62%),
        radial-gradient(80% 90% at 90% 8%, rgba(143, 92, 44, .32), transparent 60%);
}
.capa__conteudo { position: relative; padding-block: clamp(36px, 4.6vw, 64px); color: var(--papel); }
.capa .rotulo { color: rgba(255, 255, 255, .55); }
.capa__titulo {
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -.032em;
    max-width: 20ch;
}
.capa__titulo .linha { display: block; }
.capa__texto {
    margin-top: 20px;
    max-width: 52ch;
    font-size: clamp(1rem, 1.14vw, 1.1rem);
    font-weight: 300;
    color: rgba(255, 255, 255, .8);
}

.migalhas ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.migalhas li + li::before { content: "/"; margin-right: 8px; }
.migalhas a:hover { color: var(--papel); }

/* prosa (política de privacidade) */
.prosa h2 { margin: 42px 0 12px; font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 500; letter-spacing: -.015em; }
.prosa h2:first-child { margin-top: 0; }
.prosa ul { margin: 0 0 1.2em; padding-left: 20px; color: var(--tinta-80); }
.prosa li { margin-bottom: 8px; }
.prosa a { color: var(--acento); border-bottom: 1px solid var(--linha); }
.prosa__nota { margin-top: 42px; font-size: 12.5px; color: var(--tinta-40); }

/* página de agradecimento e erro */
.centralizado { text-align: center; }
.centralizado .titulo-1, .centralizado .entrada, .centralizado p { margin-inline: auto; }
.acoes-centro { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.visto { display: inline-grid; place-items: center; margin-bottom: 24px; color: var(--acento); }
.visto__risco { stroke-dasharray: 40; stroke-dashoffset: 40; animation: riscar 1s var(--curva) .3s forwards; }
@keyframes riscar { to { stroke-dashoffset: 0; } }
.protocolo { margin-top: 20px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-40); }
.protocolo strong { font-size: 16px; letter-spacing: .02em; color: var(--tinta); }
.erro-codigo {
    font-size: clamp(4.5rem, 15vw, 10rem);
    font-weight: 200;
    line-height: .9;
    letter-spacing: -.05em;
    color: var(--linha);
    margin: 0 0 -.1em;
}

/* ── 07. Galeria ─────────────────────────────────────────── */

.filtros { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 30px; }
.filtros__item {
    position: relative;
    padding: 4px 0;
    background: none;
    border: 0;
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--tinta-40);
    cursor: pointer;
    transition: color .3s;
}
.filtros__item::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--tinta);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s var(--curva-suave);
}
.filtros__item:hover { color: var(--tinta); }
.filtros__item.esta-ativo { color: var(--tinta); }
.filtros__item.esta-ativo::after { transform: scaleX(1); transform-origin: left; }
.filtros__conta { font-size: 10px; color: var(--tinta-40); vertical-align: super; margin-left: 3px; }

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: clamp(14px, 1.6vw, 26px);
}
.peca { margin: 0; }
.peca--larga { grid-column: span 2; }
.peca.esta-escondida { display: none; }

.peca__gatilho {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.peca__moldura {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--nuvem);
}
.peca__moldura img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 1.1s var(--curva);
}
.peca--larga .peca__moldura img { aspect-ratio: 8 / 5; }
.peca__gatilho:hover .peca__moldura img { transform: scale(1.045); }
.peca__lupa {
    position: absolute;
    right: 14px; bottom: 14px;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--tinta);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s var(--curva), transform .4s var(--curva);
}
.peca__gatilho:hover .peca__lupa,
.peca__gatilho:focus-visible .peca__lupa { opacity: 1; transform: none; }
.peca__legenda {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0 0;
}
.peca__titulo { font-size: 13.6px; color: var(--tinta-80); line-height: 1.45; }
.peca__tag {
    flex: none;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta-40);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 56px);
}
.lightbox[hidden] { display: none; }
.lightbox__fundo {
    position: absolute;
    inset: 0;
    background: rgba(16, 18, 20, .96);
    opacity: 0;
    transition: opacity .4s var(--curva);
}
.lightbox.esta-aberta .lightbox__fundo { opacity: 1; }
.lightbox__caixa {
    position: relative;
    max-width: min(1080px, 100%);
    opacity: 0;
    transform: scale(.97);
    transition: opacity .45s var(--curva), transform .5s var(--curva);
}
.lightbox.esta-aberta .lightbox__caixa { opacity: 1; transform: none; }
.lightbox__figura { margin: 0; }
.lightbox__figura img { width: 100%; max-height: 78vh; object-fit: contain; }
.lightbox__figura figcaption {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
.lightbox__botao {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: var(--papel);
    cursor: pointer;
    transition: background-color .3s, transform .3s;
}
.lightbox__botao:hover { background: rgba(255, 255, 255, .2); }
.lightbox__botao--fechar   { top: -58px; right: 0; }
.lightbox__botao--anterior { left: -62px; top: 50%; transform: translateY(-50%); }
.lightbox__botao--proxima  { right: -62px; top: 50%; transform: translateY(-50%); }
.lightbox__botao--anterior:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox__botao--proxima:hover  { transform: translateY(-50%) translateX(3px); }

/* ── 08. Formulários ─────────────────────────────────────── */

.contato__grade {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(30px, 4.6vw, 80px);
    align-items: start;
}
.cartao-contato { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--linha); }
.cartao-contato:last-child { border-bottom: 0; }
.cartao-contato address { font-style: normal; line-height: 1.8; color: var(--tinta-80); }
.cartao-contato--aviso { padding: 22px 24px; background: var(--nuvem); border-bottom: 0; }
.cartao-contato--aviso p { font-size: 13.6px; margin: 0; }

.canais { list-style: none; margin: 0; padding: 0; }
.canais li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--linha);
}
.canais li:last-child { border-bottom: 0; }
.canais__rotulo { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-40); }
.canais a, .canais span:last-child { font-size: 14.6px; color: var(--tinta); text-align: right; }
.canais a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.canais a:hover { border-color: var(--tinta); }

.formulario { display: grid; gap: 26px; }
.formulario__linha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 26px;
}

.campo { position: relative; }
.campo input,
.campo textarea,
.campo select {
    width: 100%;
    padding: 21px 2px 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--linha);
    color: var(--tinta);
    font: inherit;
    border-radius: 0;
    transition: border-color .35s;
    appearance: none;
}
.campo textarea { resize: vertical; min-height: 128px; line-height: 1.65; }
.campo label {
    position: absolute;
    left: 2px; top: 19px;
    font-size: 15px;
    color: var(--tinta-40);
    pointer-events: none;
    transform-origin: left top;
    transition: transform .35s var(--curva), color .35s;
}
.campo input:focus + label,
.campo textarea:focus + label,
.campo input:not(:placeholder-shown) + label,
.campo textarea:not(:placeholder-shown) + label,
.campo select:focus + label,
.campo--selecao label {
    transform: translateY(-18px) scale(.74);
    color: var(--acento);
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; }
.campo__traco {
    position: absolute;
    left: 0; bottom: 0;
    height: 1px; width: 100%;
    background: var(--tinta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--curva-suave);
}
.campo input:focus ~ .campo__traco,
.campo textarea:focus ~ .campo__traco { transform: scaleX(1); }
.campo.tem-erro input, .campo.tem-erro textarea { border-color: #b4483a; }
.campo__erro { display: block; margin-top: 8px; font-size: 12.5px; color: #a03c2f; }
.campo__erro--solto { margin-top: -14px; }
.campo__contador {
    position: absolute;
    right: 2px; bottom: -20px;
    font-size: 10.5px;
    letter-spacing: .08em;
    color: var(--tinta-40);
    font-variant-numeric: tabular-nums;
}
.campo--area { padding-bottom: 8px; }

.campo-armadilha { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.assuntos { border: 0; margin: 0; padding: 0; }
.assuntos legend {
    padding: 0;
    margin-bottom: 14px;
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tinta-40);
}
.assuntos__opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
    display: inline-block;
    padding: 10px 19px;
    border: 1px solid var(--linha);
    border-radius: 100px;
    font-size: 13px;
    color: var(--tinta-60);
    transition: all .3s var(--curva);
}
.chip:hover span { border-color: var(--tinta-40); color: var(--tinta); }
.chip input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

.consentimento {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    cursor: pointer;
    font-size: 13.4px;
    color: var(--tinta-60);
    line-height: 1.6;
}
.consentimento input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consentimento__caixa {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    margin-top: 2px;
    border: 1px solid var(--linha);
    color: transparent;
    transition: all .3s var(--curva);
}
.consentimento input:checked + .consentimento__caixa { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.consentimento input:focus-visible + .consentimento__caixa { outline: 2px solid var(--acento); outline-offset: 2px; }
.consentimento a { color: var(--tinta); border-bottom: 1px solid var(--linha); }
.consentimento a:hover { border-color: var(--tinta); }
.consentimento.tem-erro .consentimento__caixa { border-color: #b4483a; }

.formulario__acoes { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.formulario__acoes .botao { min-width: 240px; }
.formulario__nota { margin: 0; font-size: 12px; color: var(--tinta-40); }
.formulario__resposta { display: block; font-size: 14px; }
.formulario__resposta[hidden] { display: none; }
.formulario__resposta.esta-ok { color: #2c5c38; }
.formulario__resposta.esta-erro { color: #a03c2f; }

.mapa { border: 1px solid var(--linha); filter: grayscale(1) contrast(.95); transition: filter .6s var(--curva); }
.mapa:hover { filter: grayscale(0); }
.mapa iframe { display: block; }

/* ── 09. Rodapé ──────────────────────────────────────────── */

.rodape { background: var(--escuro); color: rgba(255, 255, 255, .72); }
.rodape__grade {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: clamp(28px, 3.6vw, 56px);
    padding-block: clamp(48px, 6vw, 82px);
}
.rodape .rotulo { color: rgba(255, 255, 255, .4); margin-bottom: 18px; }
.rodape__bloco ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.rodape__bloco a { font-size: 14px; color: rgba(255, 255, 255, .72); transition: color .3s; }
.rodape__bloco a:hover { color: var(--papel); }
.rodape__bloco address { font-style: normal; font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .72); }
.rodape__bloco--marca img { width: 136px; height: auto; margin-bottom: 18px; }
.rodape__bloco--marca p { font-size: 13.4px; color: rgba(255, 255, 255, .6); max-width: 32ch; }
.rodape__nota { margin-top: 12px; font-size: 12.5px; color: rgba(255, 255, 255, .45); }

.rodape__sociais { display: flex; gap: 10px; margin-top: 22px; }
.rodape__sociais a {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--linha-esc);
    border-radius: 50%;
    color: rgba(255, 255, 255, .7);
    transition: all .35s var(--curva);
}
.rodape__sociais a:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }

.rodape__base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block: 24px;
    border-top: 1px solid var(--linha-esc);
    font-size: 12px;
    color: rgba(255, 255, 255, .45);
}
.rodape__base p { margin: 0; color: inherit; }
.rodape__base a { color: rgba(255, 255, 255, .6); }
.rodape__base a:hover { color: var(--papel); }
.rodape__base span { margin-inline: 8px; }

.zap {
    position: fixed;
    right: clamp(16px, 2.2vw, 28px);
    bottom: clamp(16px, 2.2vw, 28px);
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 100px;
    background: #1f7a4c;
    color: #fff;
    box-shadow: 0 12px 28px rgba(16, 18, 20, .22);
    transition: transform .4s var(--curva), background-color .3s;
}
.zap:hover { transform: translateY(-2px); background: #228855; }
.zap__balao {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: .1em;
    transition: max-width .45s var(--curva), margin-right .45s var(--curva);
}
.zap:hover .zap__balao, .zap:focus-visible .zap__balao { max-width: 150px; margin-right: 6px; }

.ao-topo {
    position: fixed;
    right: clamp(16px, 2.2vw, 28px);
    bottom: calc(clamp(16px, 2.2vw, 28px) + 64px);
    z-index: 69;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--linha);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--tinta);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s, transform .35s var(--curva);
}
.ao-topo[hidden] { display: none; }
.ao-topo.esta-visivel { opacity: 1; transform: none; }
.ao-topo:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* ── 10. Movimento e responsivo ──────────────────────────── */

.com-js [data-revelar] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .85s var(--curva), transform .85s var(--curva);
    transition-delay: var(--atraso, 0ms);
}
.com-js [data-revelar].esta-visivel { opacity: 1; transform: none; }

.com-js [data-revelar-linhas] .linha-mascara { display: block; overflow: hidden; padding-bottom: .05em; }
.com-js [data-revelar-linhas] .linha-interna {
    display: block;
    transform: translateY(105%);
    transition: transform .95s var(--curva-suave);
    transition-delay: calc(var(--linha-i, 0) * 80ms);
}
.com-js [data-revelar-linhas].esta-visivel .linha-interna { transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .com-js [data-revelar],
    .com-js [data-revelar-linhas] .linha-interna { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
    .rodape__grade { grid-template-columns: 1fr 1fr; }
    .lightbox__botao--anterior { left: 6px; }
    .lightbox__botao--proxima  { right: 6px; }
}

@media (max-width: 1000px) {
    .menu { display: none; }
    .hamburguer { display: block; }
    .restrito { display: none; }
    .topo__acoes .botao { display: none; }

    .cabeca { grid-template-columns: minmax(0, 1fr); }
    .cabeca__acao { justify-self: start; }
    .divisao { grid-template-columns: minmax(0, 1fr); }
    .divisao--invertida .divisao__midia { order: 0; }
    .contato__grade { grid-template-columns: minmax(0, 1fr); }
    .peca--larga { grid-column: span 1; }
}

@media (max-width: 680px) {
    .galeria { grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr)); }
    .rodape__grade { grid-template-columns: 1fr; }
    .rodape__base { justify-content: center; text-align: center; }
    .formulario__acoes .botao { min-width: 100%; }
    .hero__barra .envoltorio { grid-template-columns: 1fr 1fr; }
    .ficha > div { flex-direction: column; gap: 4px; }
    .ficha dd { text-align: left; }
}

@media print {
    .topo, .cortina, .zap, .ao-topo, .mapa { display: none !important; }
    body { background: #fff; color: #111; }
    .bloco { padding-block: 24px; }
}

.chamada__grade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    flex-wrap: wrap;
}
.chamada .titulo-2 { color: var(--papel); max-width: 22ch; }
@media (max-width: 680px) { .chamada__grade { align-items: flex-start; } }

/* respiro menor logo após a capa das páginas internas */
.capa + .bloco { padding-top: clamp(46px, 5.6vw, 84px); }
.capa + .bloco--nuvem { padding-top: clamp(46px, 5.6vw, 84px); }

/* chamada final encostada no rodapé — separa sem quebrar o tom */
.chamada { padding-bottom: clamp(42px, 5vw, 76px); border-bottom: 1px solid var(--linha-esc); }
.rodape__base { padding-right: 76px; }
@media (max-width: 680px) { .rodape__base { padding-right: 0; padding-bottom: 74px; } }

/* capas: recorte um pouco acima do centro, onde mora o assunto da foto */
.capa__fundo img { object-position: 50% 42%; }
.capa { min-height: clamp(360px, 48vh, 520px); }

/* negrito e ênfase precisam clarear nas seções escuras */
.bloco--escuro p strong,
.faixa-foto p strong,
.hero p strong,
.capa p strong { color: var(--papel); font-weight: 500; }
.bloco--escuro .titulo-2,
.bloco--escuro .titulo-3,
.bloco--escuro .declaracao { color: var(--papel); }
.bloco--escuro .link-seta { color: var(--papel); border-color: var(--linha-esc); }
.bloco--escuro .link-seta:hover { border-color: var(--papel); }
.bloco--escuro .link-seta svg { color: var(--acento-cl); }
.bloco--escuro .legenda { color: rgba(255, 255, 255, .45); }

/* ── Registros do processo (fotos da máquina) ────────────── */

.registros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(22px, 2.8vw, 42px);
}
.registro { margin: 0; }
.registro__gatilho {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}
.registro__moldura {
    display: block;
    overflow: hidden;
    background: var(--nuvem);
    border: 1px solid var(--linha);
}
.registro__moldura img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 1s var(--curva);
}
.registro__gatilho:hover .registro__moldura img { transform: scale(1.03); }
.registro figcaption { display: block; padding-top: 16px; }
.registro__num {
    display: block;
    font-size: 10.5px;
    letter-spacing: .2em;
    color: var(--acento);
    margin-bottom: 8px;
}
.registro__titulo {
    display: block;
    font-size: 1.02rem;
    letter-spacing: -.012em;
    margin-bottom: 7px;
}
.registro__texto { display: block; font-size: 13.6px; line-height: 1.6; color: var(--tinta-60); max-width: 40ch; }
.bloco--escuro .registro__moldura { background: var(--escuro-2); border-color: var(--linha-esc); }
.bloco--escuro .registro__texto { color: rgba(255, 255, 255, .68); }

/* sem JavaScript: filtros não teriam efeito, então saem de cena */
.sem-js .filtros { display: none; }
.peca__gatilho, .registro__gatilho { cursor: zoom-in; }

/* ── Gradação de cor sobre as fotografias de banner ───────────
   A imagem recebe três camadas: dessaturação leve, um multiply
   quente que aprofunda o lado do texto e um brilho conhaque em
   soft-light. O resultado é um tratamento de campanha, não um
   filtro colorido chapado.                                      */

.hero__fundo img,
.capa__fundo img,
.faixa-foto__fundo img {
    filter: saturate(.82) contrast(1.07) brightness(.96);
}

.hero__veu::before,
.capa__veu::before,
.faixa-foto__veu::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, #40210f 0%, #2a1a12 34%, transparent 72%);
    mix-blend-mode: multiply;
    opacity: .68;
}

.hero__veu::after,
.capa__veu::after,
.faixa-foto__veu::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(72% 88% at 88% 8%, rgba(214, 152, 88, .5), transparent 58%),
        radial-gradient(60% 70% at 6% 96%, rgba(46, 30, 22, .55), transparent 62%);
    mix-blend-mode: soft-light;
}

.capa__veu::before { background: linear-gradient(105deg, #40210f 0%, #2a1a12 40%, transparent 78%); opacity: .6; }
.faixa-foto__veu::before { opacity: .62; }

/* no celular a fotografia do herói precisa aparecer mais */
@media (max-width: 680px) {
    .hero { min-height: clamp(480px, 76vh, 640px); }
    .hero__fundo img { object-position: 72% 46%; }
    .hero__veu {
        background:
            linear-gradient(to top, rgba(10, 11, 12, .92) 0%, rgba(10, 11, 12, .55) 46%, rgba(10, 11, 12, .18) 100%),
            radial-gradient(90% 60% at 80% 6%, rgba(143, 92, 44, .3), transparent 62%);
    }
    .hero__titulo { font-size: clamp(1.95rem, 8.4vw, 2.6rem); }
    .hero__conteudo { padding-block: clamp(30px, 5vw, 50px); }
}

/* Capa com véu suave — para fotografias que já são escuras por natureza.
   Sem isso o assunto some sob o escurecimento padrão.                    */
.capa--suave .capa__fundo img {
    filter: saturate(.9) contrast(1.12) brightness(1.28);
    object-position: 50% 58%;
}
.capa--suave .capa__veu {
    background:
        linear-gradient(to top, rgba(10, 11, 12, .72) 0%, rgba(10, 11, 12, .18) 62%, transparent 100%),
        linear-gradient(to right, rgba(10, 11, 12, .78) 0%, rgba(10, 11, 12, .3) 34%, transparent 62%);
}
.capa--suave .capa__veu::before { opacity: .34; }
.capa--suave .capa__veu::after {
    background: radial-gradient(64% 80% at 78% 42%, rgba(214, 152, 88, .42), transparent 60%);
}
