/* Corpo da home entre "Soluções" e o contato. Todos os seletores ficam sob
   .home-confianca, para não colidir com editorial.css/main.css. Reaproveita
   tokens (--petroleo, --verde, --escuro, --tinta-70, --fio, --editorial-revela, --mineral),
   .interno, .editorial-kicker, .editorial-button, .revelar, .link-seta e
   .visualmente-oculto já definidos nas outras folhas carregadas na home.

   Rodada 08: recomposição completa (institucional em foto larga com painel
   sobreposto, cotação em escolha visual de abas, FAQ como pausa de leitura,
   sede com mapa do Google). Ver home-confianca.mjs para o contexto. */

.home-confianca{ color:var(--petroleo); }
.home-confianca > section{ padding-block:72px; border-top:1px solid var(--fio); }

.home-confianca p{ color:var(--tinta-70); }
.home-confianca__cabeca{ max-width:640px; margin-bottom:40px; }
.home-confianca__cabeca h2{ margin-bottom:0; }

/* ---------- institucional: metade fotografia, metade painel carvão ---------- */
/* Seção própria (#bioside), fora de .home-confianca e fora de .interno de
   propósito: home.mjs a posiciona entre o hero e "Soluções". Rodada 14: o
   verde deixou de ser aprovado como fundo de seção grande (contrato de
   composição, topo de editorial.css); ele volta a ser só destaque. A seção
   não tem mais plano de cor próprio (fica sobre o mineral herdado de
   .home-editorial); a fotografia `contexto-industrial` sangra até a borda
   esquerda e ocupa mais largura que antes, e a coluna direita vira um
   painel CARVÃO (--escuro), não petróleo: a faixa "Soluções", logo abaixo,
   já é petróleo, e duas seções escuras iguais coladas voltam a parecer um
   bloco só. Foto e painel dividem a MESMA altura de linha (align-items:
   stretch); a legenda que a foto é imagem de referência, não uma
   instalação da Bioside, passa a ficar sobreposta à própria foto (gradiente
   escuro, texto branco), então não soma altura própria — é o que libera
   espaço para o padding do painel sem estourar a altura da seção. */
/* Só respiro em cima, que separa a faixa da abertura. Embaixo, zero: com
   padding dos dois lados sobrava uma tira de mineral de 72px (48px no
   celular) espremida entre o painel carvão e o petróleo das soluções, que
   lia como defeito. Agora a faixa encosta direto nas soluções, e a virada
   carvão para petróleo faz a separação. */
.home-confianca__institucional{ padding-top:var(--secao-densa); padding-bottom:0; border-top:0; }
@media(min-width:861px){ .home-confianca__institucional{ padding-top:0; } }
.home-confianca__institucional-grade{
  display:grid; grid-template-columns:50% 50%; align-items:stretch;
}
/* Rodada 17: no desktop (a partir de 861px, ver media query no fim do
   arquivo), a linha da grade cresce até a altura útil da tela
   (--tela, contrato "Rodada 16" em editorial.css); como as colunas
   esticam (align-items:stretch), a foto e o painel ganham a mesma
   altura, e o painel já centra o texto na vertical (justify-content:
   center, acima). No celular a seção segue o próprio conteúdo. */
/* A figura fica vazia para fins de medida de linha da grade (picture/img
   saem do fluxo via position:absolute): sem isso, a altura própria do
   <img> (dada pelos atributos width/height do HTML, usados como razão de
   aspecto quando um height:100% não consegue resolver contra uma altura
   de linha ainda indefinida) vira maior que o conteúdo do painel e estoura
   a altura da seção. Com a figura vazia, quem decide a altura da linha
   (e portanto da foto, via align-items:stretch) é só o painel. */
/* Rodada 17: overflow:hidden é o que a primitiva .foto-profundidade exige
   do contêiner (ver contrato "Rodada 16" em editorial.css) para recortar a
   leve aproximação da foto durante a rolagem, sem vazar para fora do
   quadro. */
.home-confianca__institucional-foto{ position:relative; margin:0; overflow:hidden; }
.home-confianca__institucional-foto picture{ position:absolute; inset:0; display:block; }
.home-confianca__institucional-foto img{
  display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0C2432;
}
/* Legenda sobreposta (mesmo princípio de .editorial-hero__image figcaption,
   reimplementado aqui porque este arquivo não toca editorial.css): gradiente
   escuro por baixo garante branco com folga sobre qualquer trecho da foto.
   Faixa de gradiente alta (padding-top generoso) para o texto inteiro ficar
   dentro do trecho opaco — medido: alfa .6 já garante 4,5:1 de branco até
   contra uma foto branca pura, pior caso; aqui o piso sob o texto é .78,
   bem acima disso. O degradê só encosta em zero acima do texto, onde não
   há letra pra perder contraste. */
.home-confianca__institucional-foto figcaption{
  position:absolute; inset:auto 0 0 0; margin:0; padding:72px 24px 18px;
  display:flex; flex-direction:column; gap:3px; font-size:12px; color:#fff;
  background:linear-gradient(to top,rgba(6,24,35,.92) 0%,rgba(6,24,35,.78) 66%,rgba(6,24,35,0) 100%);
}
.home-confianca__institucional-foto figcaption span:first-child{ font-size:13px; font-weight:600; }
/* Painel: sobre carvão, branco e #BDCED8 passam com folga (contrato). O
   verde entra só nos marcadores das três frentes e no filete que separa a
   lista deles do texto — nunca como preenchimento do painel. */
.home-confianca__institucional-painel{
  background:var(--escuro); color:#fff;
  /* Era --r-2 (16px): o sobretítulo ficava a 28px do topo da faixa e as
     frentes a 26px do fim, apertados ao lado de uma foto de altura cheia. */
  padding-block:var(--r-5);
  padding-left:clamp(32px,5vw,72px);
  /* Mesma fórmula de .editorial-hero__copy: alinha o fim do texto com a
     calha direita de .interno, mesmo a seção sendo de largura total. */
  padding-right:max(var(--gutter),calc((100vw - var(--interno))/2 + var(--gutter)));
  display:flex; flex-direction:column; justify-content:center;
  /* Rodada 17: overflow:hidden recorta a gota d'água (abaixo) na borda do
     painel. O texto (kicker/h2/p) segue no fluxo normal, sem position
     própria. */
  position:relative; overflow:hidden;
}
/* Marca d'água da gota (rodada 16, ajuste final): fora do fluxo, ancorada
   no canto inferior direito do painel, inteira e só levemente cortada
   embaixo, para ler como a gota do símbolo e não como um triângulo solto.
   No fluxo ela empurrava a seção para 1013px, mais que uma tela. Só aparece
   onde sobra espaço medido abaixo do texto (a partir de 1200px de largura e
   760px de altura); abaixo disso o texto quebra mais e ela sai. */
.home-confianca__institucional-marca{ display:none; }
@media(min-width:1200px) and (min-height:760px){
  .home-confianca__institucional-marca{
    display:block; position:absolute; pointer-events:none;
    right:clamp(40px,4vw,72px); bottom:-28px;
    width:auto; height:clamp(170px,22vh,220px); aspect-ratio:164/223; margin:0;
  }
}
.home-confianca__institucional-painel .editorial-kicker{ color:var(--verde); margin-bottom:var(--r-2); }
.home-confianca__institucional-painel h2{ color:#fff; margin:0 0 var(--r-3); max-width:17ch; text-wrap:balance; }
.home-confianca__institucional-painel p{ color:#BDCED8; font-size:16px; line-height:1.6; max-width:44ch; }
.home-confianca__institucional-painel p + p{ margin-top:var(--r-2); }
.home-confianca__institucional-tags{
  display:flex; flex-wrap:wrap; gap:12px 26px; list-style:none; margin:var(--r-3) 0 0; padding:var(--r-1) 0 0;
  border-top:1px solid rgba(134,199,167,.4);
}
.home-confianca__institucional-tags li{
  display:flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#fff;
}
.home-confianca__institucional-tags li::before{ content:''; flex:none; width:7px; height:7px; border-radius:50%; background:var(--verde); }

/* Âncoras do menu e do botão da abertura: o cabeçalho é fixo, então o alvo
   precisa parar abaixo dele. Sem isso, "A Bioside" e "Explore nossas
   soluções" deixavam o título atrás da barra. */
/* Rodada 17: #orientacao, #perguntas e #contato entram na lista. Sem a
   regra, os três paravam a 10-11px do cabeçalho fixo (medido), cobrindo o
   começo do título de quem chega por link direto ou por um botão que
   aponta pra lá. */
#bioside,#solucoes,#orientacao,#perguntas,#contato{ scroll-margin-top:calc(var(--altura-cabecalho) + 24px); }

/* ---------- prova social (condicional, vazio hoje) ---------- */
.home-confianca__prova-corpo{ display:flex; flex-direction:column; gap:32px; }
.home-confianca__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(24px,4vw,48px); list-style:none; padding:0; margin:0; }
.home-confianca__logos img{ height:32px; width:auto; filter:grayscale(1); opacity:.75; }
.home-confianca__depoimento blockquote{ font-size:19px; line-height:1.6; max-width:56ch; margin:0 0 12px; }
.home-confianca__depoimento figcaption{ font-size:13px; color:#5A6D78; }

/* ---------- escolha visual da cotação (abas) ---------- */
/* Uma grade só, com áreas nomeadas: foto (~52%) fica à ESQUERDA e se
   estica por todas as linhas; cabeçalho, abas, painéis de texto
   (explicação + CTA) e o link de orientação ficam juntos na coluna de
   texto (~48%) à DIREITA. Áreas nomeadas em vez de duas colunas com filhos
   aninhados: a ordem visual muda entre desktop e mobile (foto no meio, no
   mobile) sem duplicar marcação nem depender de display:contents dentro do
   tablist/tabpanel.

   Rodada 14: orientação e perguntas viram um conjunto só, em mineral (ver
   contrato de composição, editorial.css). O painel verde cheio saiu (fundo
   sólido repetia o petróleo/verde da faixa de soluções, logo acima); a
   hierarquia agora vem só da aba ativa (fundo petróleo) e do respiro, sem
   caixa em volta do texto. */
.home-confianca > section.home-confianca__escolha{
  /* Fecho de emenda (rodada 13): orientação e perguntas ficam no mesmo
     plano mineral, então 48px embaixo mais 36px em cima somavam 84px de
     vazio real, sem virada de cor para justificar. Com --r-3 a passagem
     fica em 60px no desktop e 48px no celular: uma transição só. */
  background:var(--mineral); padding-block:var(--secao-densa) var(--r-3);
}
.home-confianca__escolha-grade{
  display:grid; align-items:start; position:relative;
  column-gap:clamp(32px,4vw,64px); row-gap:0;
  grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);
  grid-template-areas:
    "fotos cabeca"
    "fotos abas"
    "fotos paineis"
    "fotos orientar";
}
.home-confianca__escolha-cabeca{ grid-area:cabeca; margin-bottom:var(--r-3); }
.home-confianca__escolha-cabeca h2{ margin:10px 0 0; color:var(--petroleo); }
.home-confianca__escolha-cabeca .editorial-kicker{ margin-bottom:0; }
.home-confianca__escolha-fotos{ grid-area:fotos; position:relative; align-self:stretch; }

/* Sem JS, as abas ficam escondidas: são um controle só útil com clique ou
   teclado. Cada painel já se identifica sozinho (ver
   .home-confianca__painel-identificacao) e tem link/CTA funcional, então
   nada fica visível e inerte. */
.home-confianca__abas{ grid-area:abas; display:none; }
.home-confianca__escolha--pronto .home-confianca__abas{
  display:flex; flex-direction:column; border-top:1px solid rgba(25,64,91,.22); margin-bottom:24px;
}
.home-confianca__aba{
  all:revert; appearance:none; background:none; border:0; border-bottom:1px solid rgba(25,64,91,.22);
  display:flex; align-items:center; gap:14px; width:100%; min-height:52px;
  padding:13px 14px; margin:0; font:inherit; text-align:left; cursor:pointer;
  color:var(--tinta-70); transition:color 200ms,background 200ms;
}
.home-confianca__aba-num{ font-size:12px; font-weight:500; color:var(--tinta-70); transition:color 200ms; }
.home-confianca__aba-texto{ display:flex; flex-direction:column; gap:1px; }
.home-confianca__aba-nome{ font-size:16px; font-weight:500; line-height:1.3; }
.home-confianca__aba-sub{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--tinta-70); transition:color 200ms; }
.home-confianca__aba:hover{ color:var(--petroleo); }
.home-confianca__aba:focus-visible{ outline:2px solid var(--verde); outline-offset:-2px; }
/* Estado ativo com contraste real (fundo petróleo cheio), não só um
   cinza um pouco mais escuro: pedido explícito de revisão visual. */
.home-confianca__aba[aria-selected="true"]{ color:#fff; background:var(--petroleo); }
.home-confianca__aba[aria-selected="true"] .home-confianca__aba-num{ color:var(--verde); }
.home-confianca__aba[aria-selected="true"] .home-confianca__aba-sub{ color:rgba(245,245,240,.72); }

.home-confianca__paineis{ grid-area:paineis; position:relative; }
.home-confianca__painel-identificacao{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tinta-70); margin:0 0 12px;
}
.home-confianca__escolha--pronto .home-confianca__painel-identificacao{ display:none; }
/* Foto por opção: agora vive na própria coluna (.escolha-fotos), separada
   do texto (explicação + CTA). Troca de aba alterna a foto ativa do mesmo
   jeito que alterna o painel de texto ativo (mesma classe is-ativo, ver
   home-confianca.js), sem duplicar a legenda nem o CTA por foto. */
.home-confianca__painel-foto{ position:relative; margin:0; width:100%; height:100%; min-height:260px; aspect-ratio:16/11; overflow:hidden; background:#0C2432; }
.home-confianca__painel-foto img{ width:100%; height:100%; object-fit:cover; }
.home-confianca__painel-foto figcaption{
  position:absolute; inset:auto 0 0 0; padding:14px 18px; font-size:12px; color:#fff;
  background:linear-gradient(to top,rgba(6,24,35,.85) 0%,rgba(6,24,35,.5) 60%,rgba(6,24,35,0) 100%);
}
.home-confianca__painel-corpo{ max-width:560px; margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; }
.home-confianca__painel-corpo p{ flex:1 1 280px; font-size:15px; line-height:1.6; max-width:38ch; margin:0; }
.home-confianca__painel-corpo .editorial-button{ flex:none; margin-top:0; }
.home-confianca__escolha-orientar{
  grid-area:orientar; margin-top:var(--r-3); padding-top:var(--r-3);
  border-top:1px solid rgba(25,64,91,.22);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; font-size:14px;
}
.home-confianca__escolha-orientar span{ color:var(--tinta-70); }

@keyframes home-confianca-painel-entra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* Sem JS: todos os painéis e todas as fotos ficam visíveis e funcionais,
   empilhados, cada um com a própria borda/respiro superior de separação
   (regras "+ painel" e "+ painel-foto" abaixo). Só depois que o script
   confirma que rodou é que os inativos somem de fato e a borda/respiro
   extra também some: sem isso, trocar de painel herdava a margem/borda de
   "não é o primeiro do DOM" mesmo já sendo o único visível, e o conteúdo
   pulava a cada troca. */
.home-confianca__painel + .home-confianca__painel{ margin-top:32px; padding-top:32px; border-top:1px solid var(--fio); }
.home-confianca__painel-foto + .home-confianca__painel-foto{ margin-top:24px; }
.home-confianca__escolha--pronto .home-confianca__painel{ display:none; margin-top:0; padding-top:0; border-top:0; }
.home-confianca__escolha--pronto .home-confianca__painel.is-ativo{ display:block; }
.home-confianca__escolha--pronto .home-confianca__painel-foto{ display:none; margin-top:0; }
.home-confianca__escolha--pronto .home-confianca__painel-foto.is-ativo{ display:block; }
@media(prefers-reduced-motion:no-preference){
  .home-confianca__escolha--pronto .home-confianca__painel.is-ativo,
  .home-confianca__escolha--pronto .home-confianca__painel-foto.is-ativo{
    animation:home-confianca-painel-entra 280ms var(--editorial-revela) both;
  }
}

/* ---------- como funciona o pedido (rodada 15, caminho A) ----------
   Substitui a escolha de frente por abas, que repetia a função das faixas
   de soluções logo acima. Aqui não se escolhe produto: explica-se o que a
   equipe precisa para cotar. Os números são uma sequência real (a ordem do
   pedido), por isso a lista é <ol>. As regras antigas de .home-confianca__escolha
   continuam no arquivo, sem uso, e saem numa limpeza separada. */
/* Rodada 17: petróleo (era mineral). O contrato "Rodada 13"/"Rodada 16" no
   topo de editorial.css muda a ordem de cor da página (pedido vira o
   segundo plano escuro, depois de empresa e antes de perguntas voltar ao
   mineral): a virada de cor já separa pedido de perguntas, então as duas
   seções não são mais "um conjunto só" (o comentário de --emenda-conjunto
   em .home-confianca__faq, abaixo, era para esse esquema antigo). Título,
   parágrafos e passos usam os tons aprovados sobre petróleo (branco,
   #C7D8E1, #A8C6D4); os números viram verde (5,6:1 sobre petróleo, ver
   contrato). O foco visível também muda de cor: o outline petróleo padrão
   (ver :focus-visible em main.css) fica invisível sobre fundo petróleo. */
.home-confianca > section.home-confianca__pedido{ background:var(--petroleo); border-top:0; padding-block:var(--secao-padrao); }
.home-confianca__pedido :focus-visible{ outline-color:var(--verde); }
.home-confianca__pedido-grade{ display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); column-gap:clamp(32px,5vw,72px); row-gap:var(--r-4); align-items:start; }
.home-confianca__pedido .editorial-kicker{ color:var(--verde); }
.home-confianca__pedido-cabeca h2{ margin:0 0 var(--r-2); color:#fff; max-width:15ch; }
.home-confianca__pedido-cabeca p{ max-width:34ch; color:#C7D8E1; }
/* Segunda marca d'água (contrato "Rodada 16"): discreta, fora do texto.
   Irmã da grade (.interno...grade), não filha: um item de grid mais alto
   que os outros (por causa do próprio título em 3 linhas, que varia por
   idioma e largura) empurra a ALTURA DA LINHA inteira que ele compartilha
   com a coluna vizinha, abrindo um vão vazio antes do botão (testado:
   colocá-la dentro de .pedido-cabeca fazia exatamente isso). Como irmã da
   grade, ela só entra no fluxo do flex column da seção (regra de
   min-height/centralização, no fim do arquivo), sempre depois de todo o
   conteúdo, sem mexer numa única track do grid. Sem crop na borda (só o
   institucional pede isso). Só desktop: o media query de 860px, mais
   abaixo, esconde as duas marcas no celular. */
.home-confianca__passos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(24px,3vw,40px); border-top:1px solid rgba(255,255,255,.18); }
.home-confianca__passo{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--r-3); align-content:start; padding:var(--r-3) 0; border-bottom:1px solid rgba(255,255,255,.18); }
/* Número maior, em verde (era petróleo sobre mineral); o filete que
   sublinhava o número virou a gota da marca (primitiva .gota, contrato
   "Rodada 16"), empilhada em cima do número. */
.home-confianca__passo-num{
  grid-row:1/3; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  font-size:clamp(21px,1.9vw,27px); font-weight:600; color:var(--verde);
  font-variant-numeric:tabular-nums; padding-top:3px; line-height:1;
}
.home-confianca__passo-num .gota{ width:15px; height:20px; }
.home-confianca__passo h3{ margin:0 0 6px; font-size:clamp(18px,1.5vw,21px); font-weight:600; letter-spacing:-.01em; line-height:1.3; color:#fff; }
.home-confianca__passo p{ margin:0; font-size:14.5px; line-height:1.6; color:#A8C6D4; }
.home-confianca__pedido-acoes{ grid-column:2; display:flex; flex-wrap:wrap; align-items:center; gap:var(--r-2) var(--r-4); }
.home-confianca__pedido-acoes p{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0; font-size:14px; color:#A8C6D4; }
/* Botão verde com texto carvão, só nesta seção: fora daqui .editorial-button
   continua petróleo/branco (main.css e o resto do site não mudam). Sobre o
   verde só petróleo ou carvão têm contraste aprovado (contrato); o hover
   repete o tom claro já usado em .botao--acento:hover (main.css). */
.home-confianca__pedido-acoes .editorial-button{ background:var(--verde); color:var(--escuro); }
.home-confianca__pedido-acoes .editorial-button:hover{ background:#9ED6BA; }
/* "Peça orientação à equipe": branco com sublinhado verde (era petróleo
   sobre mineral, ilegível sobre petróleo). */
/* Rodada 18: "Peça orientação à equipe" vira botão secundário de contorno
   branco sobre o petróleo, ao lado do botão verde de cotação. */
.home-confianca__pedido-acoes .link-seta{
  gap:18px; min-height:52px; padding:0 22px; justify-content:space-between;
  color:#fff; border:1.5px solid rgba(255,255,255,.72); font-size:14px;
  transition:background 200ms,color 200ms,border-color 200ms; }
.home-confianca__pedido-acoes .link-seta:hover{ background:#fff; color:var(--petroleo); border-color:#fff; gap:18px; }
.home-confianca__pedido-acoes .link-seta:focus-visible{ outline:2px solid var(--verde); outline-offset:3px; }
@media(max-width:1100px){
  .home-confianca__pedido-grade{ grid-template-columns:minmax(0,1fr); }
  .home-confianca__pedido-cabeca h2{ max-width:22ch; }
  .home-confianca__pedido-acoes{ grid-column:1; }
}
@media(max-width:700px){
  .home-confianca__passos{ grid-template-columns:minmax(0,1fr); }
}
/* Passos entram em sequência curta quando a lista (revelar) fica visível,
   mesma técnica de .percurso__item em main.css: opacidade e um leve
   deslocamento vertical, com atraso escalonado por item. Sem JS, a regra
   toda fica fora (seletor prefixado por .js): os passos ficam visíveis de
   cara. Sob rolagem "sem-entrada" (bloco que já passou pela tela numa
   âncora direta) ou movimento reduzido, aparecem prontos, sem atraso. */
.js .home-confianca__passo{
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity 420ms var(--editorial-ease), transform 420ms var(--editorial-ease);
}
.js .home-confianca__passos.is-visivel .home-confianca__passo{ opacity:1; transform:none; }
.js .home-confianca__passos.is-visivel .home-confianca__passo:nth-child(1){ transition-delay:80ms; }
.js .home-confianca__passos.is-visivel .home-confianca__passo:nth-child(2){ transition-delay:160ms; }
.js .home-confianca__passos.is-visivel .home-confianca__passo:nth-child(3){ transition-delay:240ms; }
.js .home-confianca__passos.is-visivel .home-confianca__passo:nth-child(4){ transition-delay:320ms; }
.js .home-confianca__passos.sem-entrada .home-confianca__passo{ transition:none; opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .js .home-confianca__passo{ transition:none; opacity:1; transform:none; }
}

/* ---------- FAQ: pausa de leitura, título menor ao lado ---------- */
/* Continua mineral, mas rodada 17 deixou de ser "conjunto" com o pedido:
   o pedido virou petróleo (ver bloco acima), então a própria virada de cor
   já separa as duas seções, e o topo passa a usar --secao-padrao como o
   resto do contrato (regra "quando há virada de cor, a seção de baixo usa
   no máximo --secao-padrao"), não mais --emenda-conjunto (que era só para
   duas seções no mesmo fundo). O fechamento embaixo, para a seção sede
   (carvão), já era uma virada de cor e continua em --secao-padrao. */
.home-confianca > section.home-confianca__faq{
  background:var(--mineral); border-top:0; padding-block:var(--secao-padrao);
}
.home-confianca__faq-grade{ display:grid; grid-template-columns:minmax(180px,.28fr) minmax(0,.72fr); gap:clamp(32px,5vw,64px); align-items:start; }
.home-confianca__pergunta-marca{ width:11px; height:15px; flex:none; }
/* Marcador de pergunta aberta: a gota some quando fechada (opacidade da
   própria .gota--apagada, ver primitiva) e fica sólida quando aberta,
   trocando as propriedades que a modificadora zera de volta pelas da
   primitiva .gota (mesma máscara, sem redesenhar nada). */
.home-confianca__pergunta[open] .home-confianca__pergunta-marca{
  background:var(--verde); -webkit-mask:var(--gota) center/contain no-repeat; mask:var(--gota) center/contain no-repeat;
}
.home-confianca__pergunta[open] .home-confianca__pergunta-marca::before{ opacity:0; }
.home-confianca__faq-cabeca h2{ font-size:clamp(24px,2.4vw,30px); max-width:14ch; }
.home-confianca__lista{ border-top:1px solid var(--fio); }
.home-confianca__pergunta{ border-bottom:1px solid var(--fio); }
.home-confianca__pergunta summary{
  display:flex; align-items:center; gap:16px; list-style:none; cursor:pointer;
  padding:18px 0; font-size:15px; font-weight:500; color:var(--petroleo);
}
.home-confianca__pergunta summary::-webkit-details-marker{ display:none; }
.home-confianca__pergunta summary::marker{ content:''; }
.home-confianca__pergunta summary::after{
  content:''; flex:none; margin-left:auto; width:9px; height:9px;
  border-right:1.6px solid var(--petroleo); border-bottom:1.6px solid var(--petroleo);
  transform:rotate(45deg); transition:transform 220ms;
}
.home-confianca__pergunta[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.home-confianca__pergunta summary:hover{ color:var(--verde-escuro,#2f6b4e); }
.home-confianca__pergunta summary:focus-visible{ outline:2px solid var(--verde); outline-offset:4px; }
.home-confianca__resposta{ padding:0 0 20px; max-width:58ch; }
.home-confianca__resposta p{ font-size:14px; line-height:1.6; margin:0; }

@keyframes home-confianca-faq-abre{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference){
  .home-confianca__pergunta[open] .home-confianca__resposta{ animation:home-confianca-faq-abre 260ms cubic-bezier(.4,.1,.2,1) both; }
}
@media(prefers-reduced-motion:reduce){
  .home-confianca__pergunta summary::after{ transition:none; }
}

/* ---------- sede: mapa do Google grande + painel petróleo ---------- */
/* Mesma correção de especificidade do institucional (ver comentário lá):
   sem repetir "section", a regra genérica ".home-confianca > section"
   vencia e devolvia padding-block:72px/border-top antes e depois desta
   seção de largura total, abrindo uma faixa mineral vazia. */
.home-confianca > section.home-confianca__local{ padding:0; border-top:0; }
/* Rodada 17: min-height passa a --tela-apoio no desktop (80% da altura
   útil da tela, contrato "Rodada 16" em editorial.css), no lugar do clamp
   fixo. O painel já centra o texto na vertical (justify-content:center,
   abaixo) e o mapa acompanha a altura via grid, então a mudança só estica
   a seção, sem exigir mais nada aqui. No celular a media query mais abaixo
   zera este min-height (o conteúdo manda). */
.home-confianca__local-grade{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  min-height:var(--tela-apoio);
}
.home-confianca__local-painel{
  background:var(--escuro); color:#fff;
  padding-block:clamp(28px,3.5vw,48px); padding-right:clamp(24px,3vw,44px);
  /* Fundo e mapa ocupam a largura toda, mas o texto respeita a mesma calha
     do resto da página: mesma fórmula de .editorial-hero__copy e do painel
     institucional (ver acima), em vez do clamp fixo que descolava o texto
     do alinhamento das outras seções em telas largas. */
  padding-left:max(var(--gutter),calc((100vw - var(--interno))/2 + var(--gutter)));
  display:flex; flex-direction:column; justify-content:center;
}
/* Sem height fixo nem overflow:auto: o painel ditava um scroll interno
   quando o conteúdo (kicker + título + 4 canais + link) não cabia numa
   altura travada, e o kicker cortava no topo. Agora a altura da grade
   segue o conteúdo (min-height acima), e o mapa acompanha via grid. */
.home-confianca__local-painel .editorial-kicker{ color:var(--verde); }
.home-confianca__local-painel h2{ color:#fff; font-size:clamp(24px,2.5vw,32px); margin:10px 0 18px; }
.home-confianca__canais{ list-style:none; margin:0 0 18px; padding:0; border-top:1px solid rgba(245,245,240,.2); }
.home-confianca__canais li{ display:flex; flex-direction:column; gap:3px; padding:11px 0; border-bottom:1px solid rgba(245,245,240,.2); }
.home-confianca__canal-rotulo{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:#9FB6C2; }
.home-confianca__canais li span:last-child,
.home-confianca__canais a{ font-size:15px; color:#fff; width:fit-content; border-bottom:1px solid transparent; transition:border-color 200ms,color 200ms; }
.home-confianca__canais a:hover,.home-confianca__canais a:focus-visible{ color:var(--verde); border-color:var(--verde); }
.home-confianca__local-link{ color:var(--verde); min-height:44px; align-self:flex-start; }
.home-confianca__local-mapa{ position:relative; background:#0C2432; }
.home-confianca__local-mapa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* Botão de ativação: escondido em HTML/CSS puro (mapa já vem totalmente
   interativo por padrão). Só aparece depois que o script confirma que
   rodou, para então bloquear o primeiro scroll acidental sobre o mapa
   até um clique/toque deliberado; nunca some sem essa confirmação, então
   nunca fica um botão sem função sobre o mapa. */
.home-confianca__mapa-ativar{ display:none; }
.home-confianca__local-mapa--pronto iframe{ pointer-events:none; }
/* O mapa fica visível por baixo o tempo todo: o botão é transparente e
   cobre a área toda (qualquer clique ativa), mas só o selo no canto tem
   fundo sólido. Nada de escurecer o mapa inteiro para avisar sobre um
   scroll que ainda nem aconteceu. */
.home-confianca__local-mapa--pronto .home-confianca__mapa-ativar{
  all:revert; appearance:none; display:flex; align-items:flex-end; justify-content:flex-start;
  position:absolute; inset:0; width:100%; height:100%; border:0; margin:0; padding:0;
  background:transparent; cursor:pointer;
}
.home-confianca__mapa-ativar span{
  margin:16px; padding:10px 16px; background:rgba(6,24,35,.88); color:#fff;
  font-size:13px; font-weight:500; text-align:left; line-height:1.4;
}
.home-confianca__local-mapa--pronto .home-confianca__mapa-ativar:hover span,
.home-confianca__local-mapa--pronto .home-confianca__mapa-ativar:focus-visible span{ background:#0C2432; }
.home-confianca__local-mapa--pronto .home-confianca__mapa-ativar:focus-visible{ outline:2px solid var(--verde); outline-offset:-2px; }
.home-confianca__local-mapa--pronto.is-ativado iframe{ pointer-events:auto; }
.home-confianca__local-mapa--pronto.is-ativado .home-confianca__mapa-ativar{ display:none; }

/* ---------- transição sede -> contato (só seletor escopado à home) ---------- */
.home-editorial .secao--contato{ border-top:1px solid var(--fio); }

/* ---------- Rodada 17: altura de capítulo no desktop ----------
   Contrato "Rodada 16" em editorial.css: empresa e pedido são capítulo
   (min-height:var(--tela)), perguntas e sede são apoio
   (min-height:var(--tela-apoio)); sede já ganhou o dela acima, junto da
   própria regra da grade. Só a partir de 861px: no celular a seção segue
   o próprio conteúdo, sem travar altura nenhuma (--tela nem --tela-apoio
   existem fora de .home-editorial:not(.pagina-interna), mas esta folha só
   carrega na home, então a variável está sempre disponível aqui). */
@media(min-width:861px){
  .home-confianca__institucional-grade{ min-height:var(--tela); }
  .home-confianca > section.home-confianca__pedido{
    min-height:var(--tela); display:flex; flex-direction:column; justify-content:center;
  }
  .home-confianca > section.home-confianca__faq{
    min-height:var(--tela-apoio); display:flex; flex-direction:column; justify-content:center;
  }
}

@media(max-width:1100px){
  .home-confianca > section{ padding-block:60px; }
  /* Título > abas > foto > explicação > CTA em sequência, largura cheia:
     nada de coluna estreita de foto ao lado do texto num viewport de
     celular. Mesma marcação da grade desktop, só a ordem visual muda
     (áreas nomeadas em vez de duplicar HTML). */
  .home-confianca__escolha-grade{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "cabeca"
      "abas"
      "fotos"
      "paineis"
      "orientar";
  }
  /* minmax(0,1fr) acima evita que o track herde o min-content dos
     filhos (padrão de grid item é min-width:auto); sem isso, um botão
     ou linha de abas que não cabe em 320px empurrava a página inteira
     para o lado em vez de quebrar/rolar dentro da própria coluna. */
  .home-confianca__escolha-grade > *{ min-width:0; }
  .home-confianca__escolha-fotos{ margin-bottom:24px; }
  .home-confianca__escolha--pronto .home-confianca__abas{ flex-direction:row; flex-wrap:wrap; border-top:0; gap:8px 10px; margin-bottom:24px; }
  .home-confianca__escolha--pronto .home-confianca__aba{ width:auto; min-height:44px; padding:9px 14px; }
  .home-confianca__painel-foto,.home-confianca__painel-corpo{ max-width:none; }
  .home-confianca__faq-grade{ grid-template-columns:1fr; }
  .home-confianca__faq-cabeca{ margin-bottom:8px; }
  .home-confianca__faq-cabeca h2{ max-width:none; }
}
@media(max-width:860px){
  /* Institucional empilha: a foto continua de largura total (sem calha),
     o texto abaixo passa a usar a calha padrão (var(--gutter)) em vez do
     gap-da-foto e da fórmula de alinhamento à direita, que só fazem
     sentido nas duas colunas do desktop. */
  .home-confianca__institucional-grade{ grid-template-columns:1fr; }
  /* Empilhado, a linha da grade não estica mais a foto (cada uma vira sua
     própria linha), então quem dá altura à figura (picture/img saem do
     fluxo, ver regra base) é a própria figura, com aspect-ratio. */
  .home-confianca__institucional-foto{ aspect-ratio:16/9; }
  /* Ritmo comprimido em relação ao desktop: empilhado, o painel já soma a
     foto acima, os dois parágrafos e as tags; sem isso a seção ficava mais
     alta que a versão antiga de duas colunas, o oposto do pedido. A legenda
     sobreposta (regra base, fora deste media query) não soma altura de
     fluxo, o que sobra pra dar ao painel um fecho de baixo em vez do 0
     que dependia só do padding-bottom da seção. */
  .home-confianca__institucional-painel{ padding:var(--r-4) var(--gutter) var(--r-3); }
  .home-confianca__institucional-painel .editorial-kicker{ margin-bottom:var(--r-2); }
  .home-confianca__institucional-painel h2{ max-width:22ch; margin-bottom:var(--r-3); }
  .home-confianca__institucional-tags{ margin-top:var(--r-3); padding-top:var(--r-2); }
  .home-confianca__local-grade{ grid-template-columns:1fr; min-height:0; }
  .home-confianca__local-mapa{ height:320px; }
  .home-confianca__local-painel{ padding-left:var(--gutter); }
  /* As duas marcas d'água (institucional e pedido) são um acabamento de
     desktop: no celular, o painel já é curto e qualquer tamanho grande o
     suficiente pra "ler como marca" (não enfeite) também empurra bastante
     altura numa tela pequena. Somem no lugar de encolher a ponto de
     virar um pingo sem função. */
  .home-confianca__institucional-marca{ display:none; }
}
@media(max-width:700px){
  .home-confianca > section{ padding-block:48px; }
  /* Altura controlada no celular: um quadrado a 350px de largura empurraria
     o texto 350px para baixo. Em 16:10 a foto fica em torno de 220px. */
  .home-confianca__institucional-foto{ aspect-ratio:16/10; }
  .home-confianca__institucional-painel p{ font-size:15px; line-height:1.6; }
  .home-confianca__pergunta summary{ font-size:14.5px; gap:12px; }
}