/* ============================================================
   Bioside — home institucional (primeira versão)
   Paleta e tipografia: manual de identidade da marca.
   Verde #86C7A7 reprova contraste como texto sobre branco (~2:1);
   por isso ele vive sobre o petróleo/escuro e como fio de acento.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* cores da marca */
  --petroleo:      #19405B;
  --verde:         #86C7A7;
  --escuro:        #0F161C;
  --branco:        #FFFFFF;

  /* superfícies do ritmo claro/escuro (derivadas, não são cores de manual) */
  --claro-verde:   #EDF4F0;   /* superfície clara com viés de verde, para o institucional */
  --petroleo-fundo-1:#12303F;

  /* grafismo: traço de canto dos KVs */
  --traco:        rgba(134,199,167,.5);
  --traco-fraco:  rgba(134,199,167,.26);

  /* derivadas de trabalho (não são cores de manual) */
  --petroleo-fundo:#12304380;
  --escuro-2:      #131C24;
  --tinta:         #0F161C;
  --tinta-70:      #4A555E;
  --tinta-55:      #6B757D;
  --claro:         #FFFFFF;
  --claro-alt:     #F3F5F6;
  --claro-alt-2:   #E9EDEF;
  --fio:           rgba(15,22,28,.13);
  --fio-forte:     rgba(15,22,28,.22);
  --fio-claro:     rgba(255,255,255,.16);
  --fio-claro-2:   rgba(255,255,255,.30);
  --branco-80:     rgba(255,255,255,.80);
  --branco-64:     rgba(255,255,255,.64);

  /* tipografia */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* medidas */
  --interno: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --secao-y: clamp(72px, 8.4vw, 124px);
  --raio: 3px;
  --altura-cabecalho: 76px;

  /* movimento */
  --t-rapido: 180ms cubic-bezier(.4,0,.2,1);
  --t-medio: 320ms cubic-bezier(.4,0,.2,1);
  --t-suave: 720ms cubic-bezier(.16,1,.3,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--altura-cabecalho) + 16px);
}

body{
  margin:0;
  font-family:var(--fonte);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.65;
  color:var(--tinta);
  background:var(--claro);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
/* <picture> não deve criar caixa própria: o <img> herda o layout do pai. */
picture{ display:contents; }
svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

h1,h2,h3{
  margin:0;
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.06;
  text-wrap:balance;
}
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }

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

/* O verde dá 1,96:1 sobre branco e reprovaria como indicador de foco.
   Petróleo é o padrão (10:1 no claro); o verde só entra sobre superfície escura. */
:focus-visible{
  outline:2px solid var(--petroleo);
  outline-offset:3px;
  border-radius:2px;
}
.hero :focus-visible,
.secao--escura :focus-visible,

.rodape :focus-visible,
.cabecalho:not(.is-solido) :focus-visible,
.cabecalho.is-menu-aberto :focus-visible{ outline-color:var(--verde); }
/* o cartão do formulário é branco, mesmo dentro da seção escura */
.formulario-caixa :focus-visible{ outline-color:var(--petroleo); }
/* O botão de acento é verde: contorno verde sobre ele dá 1:1 e some.
   Escuro sobre o verde dá 9,33:1. Vale em qualquer seção. */
.botao--acento:focus-visible{ outline-color:var(--escuro); }

.pular{
  position:absolute; left:16px; top:-100px; z-index:999;
  background:var(--escuro); color:var(--branco);
  padding:12px 20px; font-size:.9rem; font-weight:500;
  transition:top var(--t-rapido);
}
.pular:focus{ top:16px; }

.interno{
  width:100%;
  max-width:var(--interno);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- 3. Tipografia compartilhada ---------- */
.sobretitulo{
  display:flex; align-items:center; flex-wrap:wrap; gap:.7em;
  font-size:clamp(.75rem,.72rem + .15vw,.8125rem);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--petroleo);
  margin-bottom:1.4rem;
}
.sobretitulo i{
  width:3px; height:3px; border-radius:50%;
  background:currentColor; opacity:.5; flex:none;
}
.sobretitulo--claro{ color:var(--verde); }

.titulo-2{
  font-size:clamp(2rem,1.5rem + 2vw,3.25rem);
  font-weight:700;
  letter-spacing:-.028em;
  line-height:1.08;
  max-width:19ch;
}

.secao{ position:relative; padding-block:var(--secao-y); }
.secao--clara{ background:var(--claro); }
.secao--escura{ background:var(--petroleo); color:var(--branco); }

.secao__topo{ max-width:760px; margin-bottom:clamp(40px,5vw,68px); }
.secao__linha{
  margin-top:1.5rem;
  font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  color:var(--tinta-70);
  max-width:52ch;
}

/* ---------- 4. Botões e links ---------- */
.botao{
  --alt:48px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--alt);
  padding:0 1.5rem;
  border:1px solid transparent;
  border-radius:var(--raio);
  font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--t-rapido), color var(--t-rapido),
             border-color var(--t-rapido), transform var(--t-rapido);
}
.botao--g{ --alt:56px; padding:0 1.9rem; font-size:1rem; }

.botao--acento{ background:var(--verde); color:var(--escuro); }
.botao--acento:hover,
.botao--acento:focus-visible{ background:#9ED6BA; }

.botao--fantasma{ background:transparent; color:var(--branco); border-color:var(--fio-claro-2); }
.botao--fantasma:hover,
.botao--fantasma:focus-visible{ border-color:var(--branco); background:rgba(255,255,255,.09); }

/* Pressão: resposta física ao toque e ao clique, sem depender de hover.
   O :active vale igual no celular, onde hover não existe. */
.botao:active{ transform:translateY(1px) scale(.988); transition-duration:70ms; }

/* A seta anda no hover E no foco, para o teclado ter a mesma resposta. */
.botao svg{ transition:transform 150ms cubic-bezier(.32,.72,0,1); }
.botao:hover svg,
.botao:focus-visible svg{ transform:translateX(3px); }
.botao:active svg{ transform:translateX(5px); transition-duration:70ms; }

.link-seta{
  display:inline-flex; align-items:center; gap:.55em;
  min-height:44px;
  font-size:.9375rem; font-weight:600;
  color:var(--petroleo);
  border-bottom:1px solid var(--fio-forte);
  align-self:flex-start;
  transition:color var(--t-rapido), border-color var(--t-rapido), gap var(--t-rapido);
}
.link-seta svg{ width:18px; height:18px; flex:none; }
.link-seta:hover,
.link-seta:focus-visible{ color:var(--escuro); border-color:var(--verde); gap:.9em; }
.link-seta:active{ transform:translateY(1px); }

/* ---------- 5. Cabeçalho ---------- */
.cabecalho{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--t-medio), border-color var(--t-medio),
             backdrop-filter var(--t-medio);
}
.cabecalho__interno{
  width:100%; max-width:var(--interno); margin-inline:auto;
  padding-inline:var(--gutter);
  min-height:var(--altura-cabecalho);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

/* estado sólido, após rolar */
.cabecalho.is-solido{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--fio);
}

.marca{
  display:inline-flex; align-items:center;
  min-height:44px;
}
.marca__logo{
  display:block; height:auto;
  width:clamp(150px, 14vw, 185px);
}
/* Duas variantes de contraste no mesmo lugar: a clara (símbolo/letras em
   verde) por padrão sobre o hero escuro, e a escura (símbolo petróleo +
   letras verdes) quando o cabeçalho vira painel sólido claro ao rolar. */
.marca__logo--escura{ display:none; }
.cabecalho.is-solido .marca__logo--clara{ display:none; }
.cabecalho.is-solido .marca__logo--escura{ display:block; }

.nav{ display:flex; align-items:center; gap:2.4rem; }
.nav__lista{ display:flex; align-items:center; gap:2.1rem; }
.nav__link{
  position:relative;
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.9375rem; font-weight:500;
  color:var(--branco-80);
  transition:color var(--t-rapido);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:11px;
  height:1px; background:var(--verde);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-medio);
}
.nav__link:hover{ color:var(--branco); }
.nav__link:hover::after{ transform:scaleX(1); }
.cabecalho.is-solido .nav__link{ color:var(--tinta-70); }
.cabecalho.is-solido .nav__link:hover{ color:var(--escuro); }

.menu-botao{
  display:none;
  width:48px; height:48px; margin-right:-12px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.menu-botao__barra{
  width:22px; height:1.5px; background:var(--branco);
  transition:transform var(--t-medio), opacity var(--t-rapido), background var(--t-medio);
}
.cabecalho.is-solido .menu-botao__barra{ background:var(--escuro); }
.menu-botao[aria-expanded="true"] .menu-botao__barra:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__barra:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(460px,62vh,620px);
  padding-top:calc(var(--altura-cabecalho) + clamp(36px,4.5vw,64px));
  background:var(--escuro);
  color:var(--branco);
  overflow:hidden;
}
/* Fundo do hero: gradiente de marca (petróleo com brilho verde no canto),
   e a foto entrando por uma diagonal em vez de retângulo com filtro por cima.
   A diagonal repete o ângulo do traço de canto dos KVs. */
.hero__fundo{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background-color:var(--escuro);      /* base sólida sob o gradiente */
  background-image:
    radial-gradient(90% 70% at 4% 96%, rgba(134,199,167,.13) 0%, rgba(134,199,167,0) 58%),
    linear-gradient(148deg, var(--petroleo-fundo-1) 0%, var(--escuro) 62%);
}
.hero__foto{
  position:absolute; top:0; right:0;
  width:74%; height:100%; object-fit:cover; object-position:62% 50%;
  filter:saturate(.62) brightness(.88) contrast(1.07);
  clip-path:polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
.hero__veu{
  position:absolute; inset:0;
  background:
    linear-gradient(101deg, var(--escuro) 0%, rgba(15,22,28,.96) 26%, rgba(15,22,28,.58) 45%, rgba(15,22,28,.18) 60%, rgba(15,22,28,.52) 88%, rgba(15,22,28,.72) 100%),
    linear-gradient(to top, rgba(15,22,28,.88) 0%, rgba(15,22,28,0) 44%);
}
.hero__interno{ position:relative; z-index:1; padding-bottom:clamp(36px,4.5vw,60px); }
.hero__texto{ max-width:860px; }

.hero__titulo{
  font-size:clamp(2.3rem,1.5rem + 3.1vw,3.9rem);
  letter-spacing:-.038em;
  line-height:1.05;
  margin-bottom:1.35rem;
  max-width:17ch;
}
.hero__titulo em{ font-style:normal; color:var(--verde); }

.hero__linha{
  max-width:54ch;
  font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  line-height:1.58;
  color:var(--branco-80);
}

.hero__acoes{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; }

/* índice das frentes, base do hero */
.hero__indice{
  position:relative; z-index:1;
  border-top:1px solid var(--fio-claro);
  /* Fundo firme: com o véu do hero mais leve, a foto passa a aparecer atrás
     desta faixa e o texto perderia contraste. */
  background:linear-gradient(to bottom, rgba(15,22,28,.88), rgba(15,22,28,.94));
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
}
.indice{ display:grid; grid-template-columns:repeat(3,1fr); }
.indice__item + .indice__item{ border-left:1px solid var(--fio-claro); }
.indice__item a{
  display:flex; align-items:center; gap:1rem;
  min-height:84px; padding:.95rem clamp(1rem,2.2vw,1.9rem);
  transition:background var(--t-rapido);
}
.indice__item a:hover{ background:rgba(255,255,255,.06); }
.indice__num{
  font-size:.8125rem; font-weight:600; letter-spacing:.08em;
  color:var(--verde); flex:none;
}
.indice__corpo{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.indice__titulo{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; }
.indice__desc{ font-size:.875rem; color:var(--branco-64); }
.indice__seta{
  width:18px; height:18px; margin-left:auto; flex:none;
  color:var(--branco-64);
  transition:transform var(--t-medio), color var(--t-rapido);
}
.indice__item a:hover .indice__seta,
.indice__item a:focus-visible .indice__seta{ transform:translateX(4px); color:var(--verde); }
.indice__item a:focus-visible{ background:rgba(255,255,255,.08); }
.indice__item a:active{ background:rgba(255,255,255,.12); }

/* ---------- 7. Frentes: três faixas editoriais alternadas ---------- */
.frentes{ position:relative; }

.frentes__topo{
  padding-block:var(--secao-y) clamp(36px,4.5vw,60px);
  max-width:var(--interno);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.frentes__topo .secao__linha{ max-width:44ch; }

/* relação ureia → ARLA 32: o que justifica duas das três frentes */
.relacao{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(12px,1.6vw,22px);
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,30px);
  border:1px solid var(--fio);
  border-radius:3px 3px 3px 40px;
  background:var(--claro-alt);
}
.relacao__no{ min-width:0; }
.relacao__nome{
  font-size:clamp(1.1rem,1rem + .5vw,1.4rem);
  font-weight:700; letter-spacing:-.024em; color:var(--petroleo);
}
.relacao__papel{
  margin-top:.3rem; font-size:.875rem; line-height:1.35; color:var(--tinta-70);
  max-width:20ch;
}
.relacao__elo{ display:flex; align-items:center; gap:.4rem; color:var(--verde); }
.relacao__fio{ flex:1; height:1px; min-width:18px; background:var(--petroleo); opacity:.35; }
.relacao__elo svg{ width:18px; height:18px; flex:none; color:var(--petroleo); }

@media (max-width:960px){
  .frentes__topo{ grid-template-columns:1fr; gap:clamp(28px,4vw,40px); }
  .frentes__topo .secao__linha{ max-width:52ch; }
}
@media (max-width:520px){
  .relacao{ grid-template-columns:1fr; gap:.7rem; text-align:left; }
  .relacao__elo{ transform:rotate(90deg); width:34px; margin:.1rem 0 .1rem .4rem; }
  .relacao__papel{ max-width:none; }
}

.faixa{ position:relative; overflow:hidden; }
.faixa--clara{ background:var(--claro); color:var(--tinta); }
.faixa--verde{ background:var(--claro-verde); color:var(--tinta); }
.faixa--escura{
  color:var(--branco);
  background-color:var(--escuro);      /* base sólida sob o gradiente */
  background-image:
    radial-gradient(80% 70% at 92% 8%, rgba(134,199,167,.12) 0%, rgba(134,199,167,0) 60%),
    linear-gradient(160deg, var(--petroleo-fundo-1) 0%, var(--escuro) 66%);
}

.faixa__grade{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  grid-template-areas:
    "midia cabeca"
    "midia corpo";
  grid-template-rows:auto auto;
  align-content:center;
  gap:clamp(14px,1.6vw,22px) clamp(32px,5vw,80px);
  padding-block:clamp(56px,7vw,104px);
}
.faixa__midia { grid-area:midia; align-self:center; }
.faixa__cabeca{ grid-area:cabeca; align-self:end; }
.faixa__corpo { grid-area:corpo; align-self:start; }

/* alterna o lado da imagem sem mudar a ordem de leitura */
.faixa--invertida .faixa__grade{
  grid-template-areas:
    "cabeca midia"
    "corpo  midia";
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
}

.faixa__midia{ margin:0; position:relative; }
.faixa__midia img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:saturate(.78) contrast(1.07) brightness(1.06);
  border-radius:3px 3px 3px 56px;      /* um canto só, ecoando o traço da marca */
}
.faixa--invertida .faixa__midia img{ border-radius:3px 56px 3px 3px; }

/* A foto do isotanque é clara e chapada; sem grade própria a faixa 03 ficava
   visualmente mais fraca que as outras duas, sem motivo de negócio. */
.faixa--verde .faixa__midia img{
  filter:saturate(.7) contrast(1.16) brightness(.96);
}
.faixa--verde .faixa__midia::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(148deg, rgba(25,64,91,.26) 0%, rgba(25,64,91,0) 52%);
}
.faixa--verde .faixa__midia{ border-radius:3px 3px 3px 56px; overflow:hidden; }

/* Tratamento de fusão: o fundo desta foto já é petróleo, então ela nasce
   da seção em vez de ficar presa num retângulo. */
.faixa__midia--fundida img{
  border-radius:0;
  aspect-ratio:1/1;
  filter:saturate(.9) contrast(1.04) brightness(1.02);
  -webkit-mask-image:radial-gradient(66% 66% at 52% 48%, #000 46%, transparent 78%);
  mask-image:radial-gradient(66% 66% at 52% 48%, #000 46%, transparent 78%);
}

/* espaço no topo para o numeral de marca d'água não encostar no rótulo */
.faixa__cabeca{ position:relative; max-width:52ch; padding-top:clamp(26px,3.4vw,52px); }
.faixa__corpo{ position:relative; max-width:52ch; }

/* numeral de marca d'água, no lugar do "01" pequeno */
.faixa__numeral{
  position:absolute; left:-.05em; top:-.30em;
  font-size:clamp(3.6rem,2.6rem + 5.2vw,8rem);
  font-weight:300; letter-spacing:-.045em; line-height:1;
  color:var(--petroleo); opacity:.10;
  pointer-events:none; user-select:none;
}
.faixa--escura .faixa__numeral{ color:var(--verde); opacity:.14; }

.faixa__rotulo{
  position:relative;
  display:inline-flex; align-items:center; gap:.6em;
  font-size:clamp(.75rem,.72rem + .15vw,.8125rem);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--petroleo);
  margin-bottom:1rem;
}
.faixa__rotulo::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.55;
}
.faixa--escura .faixa__rotulo{ color:var(--verde); }

.faixa__titulo{
  position:relative;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.35rem);
  font-weight:700; letter-spacing:-.026em; line-height:1.12;
  margin-bottom:1.1rem;
}
.faixa__texto{
  position:relative;
  font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  color:var(--tinta-70); max-width:46ch;
}
.faixa--escura .faixa__texto{ color:var(--branco-80); }

.faixa__apoio{
  position:relative;
  margin-top:1.1rem; padding-top:1.1rem;
  border-top:1px solid var(--fio);
  font-size:.9375rem; font-weight:500; color:var(--tinta-70);
}
.faixa--escura .faixa__apoio{ border-top-color:var(--fio-claro); color:var(--branco-64); }

.faixa__corpo .botao{ position:relative; margin-top:1.8rem; gap:.55em; }
.faixa__corpo .botao svg{ width:18px; height:18px; transition:transform var(--t-medio); }
.faixa__corpo .botao:hover svg{ transform:translateX(3px); }

@media (max-width:960px){
  /* Empilhado: rótulo e título ANTES da imagem, para o visitante saber do que
     se trata sem precisar passar pela foto primeiro. */
  .faixa__grade,
  .faixa--invertida .faixa__grade{
    grid-template-columns:1fr;
    grid-template-areas:"cabeca" "midia" "corpo";
    gap:clamp(18px,3vw,26px);
  }
  .faixa__midia img{ aspect-ratio:16/10; }
  .faixa__midia--fundida img{ aspect-ratio:4/3; }
  .faixa__numeral{ top:-.5em; font-size:clamp(3.4rem,10vw,5rem); }
  .faixa__corpo .botao{ width:100%; }
}
/* ---------- 8. Institucional: percurso de origem ---------- */
/* O percurso é horizontal no desktop e ocupa a largura inteira. Em duas
   colunas ele deixava um vazio grande sob o texto. */
.institucional{ position:relative; overflow:hidden; }
.institucional__grade{ position:relative; z-index:2; }

.institucional__texto{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  column-gap:clamp(28px,4vw,64px);
  row-gap:clamp(16px,2vw,24px);
  align-items:start;
}
.institucional__texto .sobretitulo,
.institucional__texto .titulo-2{ grid-column:1; }
.institucional__texto .titulo-2{ margin-bottom:0; }
.institucional__prosa{ grid-column:2; grid-row:1 / span 2; }
.institucional__linha{
  font-weight:300;
  font-size:clamp(1.0625rem,1rem + .3vw,1.15rem);
  color:var(--branco-80);
  max-width:50ch;
}
.institucional__linha + .institucional__linha{ margin-top:1.1rem; }

.percurso{
  position:relative;
  margin-top:clamp(44px,5.5vw,80px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);
}
/* fio horizontal ligando os quatro marcadores */
.percurso::before{
  content:""; position:absolute; left:6px; right:6px; top:5px; height:1px;
  background:linear-gradient(to right, var(--verde), rgba(134,199,167,.14));
}
.percurso__item{ position:relative; padding-top:1.9rem; }
.percurso__marca{
  position:absolute; left:0; top:0; width:11px; height:11px;
  border-radius:50%; border:1.5px solid var(--verde); background:var(--escuro);
}
.percurso__item:last-child .percurso__marca{ background:var(--verde); }
.percurso__etapa{
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); margin-bottom:.35rem;
}
.percurso__titulo{ font-size:1.1rem; font-weight:600; letter-spacing:-.02em; }
.percurso__nota{ margin-top:.3rem; font-size:.9375rem; color:var(--branco-64); max-width:26ch; }

@media (max-width:860px){
  .institucional__texto{ grid-template-columns:1fr; gap:1.4rem; align-items:start; }
  .institucional__texto .institucional__linha{ grid-column:1; }
  /* volta a ser vertical, com o fio à esquerda */
  .percurso{ grid-template-columns:1fr; gap:0; }
  .percurso::before{
    left:5px; right:auto; top:14px; bottom:14px; width:1px; height:auto;
    background:linear-gradient(to bottom, var(--verde), rgba(134,199,167,.14));
  }
  .percurso__item{ padding-top:0; padding-left:2.1rem; padding-bottom:clamp(22px,3vw,30px); }
  .percurso__item:last-child{ padding-bottom:0; }
  .percurso__marca{ top:7px; }
  .percurso__nota{ max-width:none; }
}

/* ---------- 9. Contato ---------- */
/* Contato em superfície clara: fecha a alternância D-L-D-L-D-L-D e evita
   três fundos escuros seguidos no terço final, que era a "lista" reclamada. */
.secao--contato{ background:var(--claro-verde); color:var(--tinta); overflow:hidden; }
.canto--claro::before{ border-color:rgba(25,64,91,.28); }
.canto--claro::after{ border-color:rgba(25,64,91,.14); }
.contato__fundo{ position:absolute; inset:0; z-index:0; }
.contato__fundo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.7) brightness(.5);
}
.contato__veu{
  position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(15,22,28,.96) 0%, rgba(15,22,28,.9) 42%, rgba(25,64,91,.82) 100%);
}
.contato{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(40px,5vw,80px);
  align-items:start;
}
.contato__intro{ position:sticky; top:calc(var(--altura-cabecalho) + 48px); }
.contato__linha{
  margin-top:1.6rem;
  font-size:clamp(1.0625rem,1rem + .3vw,1.15rem);
  color:var(--tinta-70);
  max-width:46ch;
}
.contato__nota{
  margin-top:2rem; padding-left:1.15rem;
  border-left:2px solid var(--verde);
  font-size:.9375rem; color:var(--tinta-70);
  max-width:44ch;
}

.formulario-caixa{
  background:var(--claro);
  color:var(--tinta);
  padding:clamp(28px,3.4vw,44px);
  border-radius:3px 3px 3px 56px;      /* mesmo canto das imagens das faixas */
  box-shadow:0 24px 60px -34px rgba(15,22,28,.4);
  border:1px solid rgba(25,64,91,.10);
}

.aviso-previa{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.85rem 1rem;
  margin-bottom:2rem;
  background:var(--claro-alt);
  border-left:2px solid var(--petroleo);
  font-size:.9375rem; color:var(--tinta-70);
  line-height:1.5;
}
.aviso-previa svg{ width:18px; height:17px; flex:none; margin-top:2px; color:var(--petroleo); }
.aviso-previa strong{ color:var(--escuro); font-weight:600; }

.formulario{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.15rem 1.15rem;
}
.campo{ display:flex; flex-direction:column; min-width:0; }
.campo--largo{ grid-column:1 / -1; }

.campo label{
  font-size:.875rem; font-weight:600; letter-spacing:.01em;
  color:var(--escuro);
  margin-bottom:.5rem;
}
.campo__opcional{ font-weight:400; color:var(--tinta-55); }

.campo input,
.campo select,
.campo textarea{
  font-family:inherit; font-size:1rem; color:var(--escuro);
  width:100%;
  min-height:48px;
  padding:.7rem .9rem;
  background:var(--claro);
  border:1px solid var(--fio-forte);
  border-radius:2px;
  transition:border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.campo textarea{ resize:vertical; min-height:104px; line-height:1.55; }
.campo input::placeholder,
.campo textarea::placeholder{ color:var(--tinta-55); }

.campo input:hover,
.campo select:hover,
.campo textarea:hover{ border-color:var(--tinta-55); }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible{
  outline:2px solid var(--petroleo);
  outline-offset:1px;
  border-color:var(--petroleo);
  box-shadow:0 0 0 3px rgba(25,64,91,.16);
}
/* clique de mouse: só a borda muda, sem o anel de teclado */
.campo input:focus:not(:focus-visible),
.campo select:focus:not(:focus-visible),
.campo textarea:focus:not(:focus-visible){
  outline:none; border-color:var(--petroleo);
  box-shadow:0 0 0 3px rgba(25,64,91,.12);
}

.campo__selecao{ position:relative; }
.campo__selecao select{
  appearance:none; -webkit-appearance:none;
  padding-right:2.6rem;
  cursor:pointer;
}
.campo__chevron{
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px; pointer-events:none; color:var(--tinta-55);
}

.campo__ajuda{ margin-top:.4rem; font-size:.875rem; line-height:1.45; color:var(--tinta-70); }
/* ajuda que vale para o par e-mail/telefone: sobe junto dos dois campos */
.campo__ajuda--par{
  margin-top:-.45rem; margin-bottom:.2rem;
  padding-left:.05rem;
}
.campo__erro{
  margin-top:.4rem; font-size:.875rem; font-weight:500; color:#B4232B;
  display:none;
}
.campo.is-invalido .campo__erro{ display:block; }
.campo.is-invalido input,
.campo.is-invalido select,
.campo.is-invalido textarea{ border-color:#B4232B; }
.campo.is-invalido input:focus,
.campo.is-invalido select:focus{ box-shadow:0 0 0 3px rgba(180,35,43,.14); }

.formulario__rodape{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  margin-top:.6rem;
  padding-top:1.6rem;
  border-top:1px solid var(--fio);
}
.formulario__aviso{
  font-size:.9375rem; color:var(--tinta-70); line-height:1.5;
  flex:1 1 240px; min-width:0;
}
.formulario__aviso.is-erro{ color:#B4232B; }

/* ---------- 10. Rodapé ---------- */
.rodape{
  background:var(--escuro-2); color:var(--branco);
  padding-block:clamp(48px,5vw,72px);
  border-top:1px solid var(--fio-claro);
}
.rodape__interno{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  justify-content:space-between; gap:2.4rem;
}
.marca--rodape .marca__logo{ width:clamp(150px, 12vw, 175px); }
.rodape__frentes{
  margin-top:.85rem;
  font-size:.9375rem; color:var(--branco-64); letter-spacing:.01em;
}
.rodape__nav ul{ display:flex; flex-wrap:wrap; gap:1.9rem; }
.rodape__nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.9375rem; color:var(--branco-80);
  transition:color var(--t-rapido);
}
.rodape__nav a:hover{ color:var(--verde); }
.rodape__copy{
  font-size:.875rem; color:var(--branco-64);
  width:100%; padding-top:1.8rem;
  border-top:1px solid var(--fio-claro);
}

/* ---------- 11. Revelação de entrada ---------- */
/* Sem JS, nada fica escondido: a revelação é opt-in via .js no <html>. */
.js .revelar{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 540ms var(--entra), transform 540ms var(--entra-forte);
}
.js .revelar.is-visivel{ opacity:1; transform:none; }
/* Bloco que já passou pela tela (âncora direta, rolagem rápida) ou ambiente
   sem rAF: aparece sem animar, em vez de animar fora de hora. */
.js .revelar.sem-entrada{ transition:none; }

/* ---------- 12. Responsivo ---------- */
@media (max-width:1040px){
  .institucional{ grid-template-columns:1fr; gap:clamp(36px,5vw,56px); }
  .institucional__midia img{ aspect-ratio:16/10; }
  .contato{ grid-template-columns:1fr; }
  .contato__intro{ position:static; }
  .frentes{ grid-template-columns:1fr; gap:clamp(40px,5vw,56px); }
  .frente{ display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1fr); gap:clamp(24px,4vw,44px); align-items:start; }
  .frente__midia{ margin-bottom:0; aspect-ratio:1/1; }
}

@media (max-width:860px){
  :root{ --altura-cabecalho:64px; }

  .menu-botao{ display:flex; }

  .nav{
    position:fixed; inset:var(--altura-cabecalho) 0 auto 0;
    display:block;
    /* Altura cheia e fundo opaco: com o painel translúcido, o hero aparecia
       por trás e os CTAs do topo duplicavam o do menu. */
    height:calc(100dvh - var(--altura-cabecalho));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:1.4rem var(--gutter) 2rem;
    background:var(--escuro);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--fio-claro);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    /* visibility com 0s de duração e atraso só na saída: ao abrir, o painel
       fica focável no mesmo instante em que a classe entra. Com visibility
       dentro da transição, o primeiro link não recebia foco pelo teclado. */
    transition:opacity var(--t-medio), transform var(--t-medio),
               visibility 0s linear var(--t-medio);
  }
  .nav.is-aberto{
    opacity:1; visibility:visible; transform:none;
    transition:opacity var(--t-medio), transform var(--t-medio), visibility 0s;
  }
  .nav__lista{ display:block; }
  .nav__lista li + li{ border-top:1px solid var(--fio-claro); }
  .nav__link{ width:100%; min-height:56px; font-size:1.05rem; color:var(--branco-80); }
  .nav__link::after{ display:none; }
  .nav__cta{ width:100%; margin-top:1.2rem; }

  /* menu aberto: barras sempre visíveis sobre o painel escuro */
  .cabecalho.is-menu-aberto{ background:var(--escuro); border-bottom-color:transparent; backdrop-filter:none; }
  .cabecalho.is-menu-aberto .marca__logo--clara{ display:block; }
  .cabecalho.is-menu-aberto .marca__logo--escura{ display:none; }
  /* precisa vencer .cabecalho.is-solido .nav__link, que deixaria
     texto escuro sobre o painel escuro (cerca de 2,4:1) */
  .cabecalho.is-menu-aberto .nav__link{ color:var(--branco-80); }
  .cabecalho.is-menu-aberto .nav__link:hover{ color:var(--branco); }
  .cabecalho.is-menu-aberto .menu-botao__barra{ background:var(--branco); }

  .hero__foto{ width:100%; clip-path:none; object-position:72% 46%; filter:saturate(.7) brightness(1) contrast(1.05); }
  /* O véu antigo (.78 a .92) apagava o caminhão. Agora é forte só atrás do
     texto e abre na faixa onde a cabine aparece. */
  .hero__veu{
    background:
      linear-gradient(to bottom, rgba(15,22,28,.94) 0%, rgba(15,22,28,.88) 30%,
                      rgba(15,22,28,.42) 58%, rgba(15,22,28,.34) 74%, rgba(15,22,28,.86) 100%);
  }
  .hero{ min-height:auto; padding-top:calc(var(--altura-cabecalho) + 34px); }
  .hero__interno{ padding-bottom:clamp(30px,5vw,44px); }
  .hero__titulo{ max-width:none; margin-bottom:1.1rem; }
  .hero__acoes{ margin-top:1.6rem; gap:.65rem; }
  .hero__acoes .botao{ width:100%; }
  .sobretitulo{ margin-bottom:1rem; }

  .indice{ grid-template-columns:1fr; }
  .indice__item + .indice__item{ border-left:0; border-top:1px solid var(--fio-claro); }
  .indice__item a{ min-height:66px; }

  .frente{ grid-template-columns:1fr; gap:clamp(20px,4vw,28px); }
  .frente__midia{ aspect-ratio:16/10; }

  .estrutura__item{ grid-template-columns:1fr; gap:.3rem; }

  .formulario{ grid-template-columns:1fr; }
  .formulario__rodape .botao{ width:100%; }

  .rodape__interno{ flex-direction:column; gap:1.8rem; }
}

@media (max-width:420px){
  .hero__titulo{ letter-spacing:-.035em; }
  .formulario-caixa{ padding:22px 18px; }
}

/* ---------- 13. Preferências do sistema ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .revelar{ opacity:1; transform:none; }
  .frente:hover .frente__midia img{ transform:none; }
}

@media print{
  .cabecalho,.hero__indice,.menu-botao,.pular{ display:none; }
  .secao--escura,.secao--contato,.rodape{ background:#fff; color:#000; }
}


/* ---------- 14. Sem JavaScript ----------
   O menu recolhido, o cabeçalho fixo transparente e as animações de entrada
   dependem do JS. Sem ele, a página cai para um cabeçalho sólido e estático
   com a navegação sempre visível, em vez de ficar inacessível. */
html:not(.js) .menu-botao{ display:none; }
html:not(.js) .cabecalho,
html:not(.js) .cabecalho.is-solido{
  position:static;
  background:var(--escuro);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:var(--fio-claro);
}
/* se o main.js morrer no meio, .is-solido pode ficar cravado sem a classe js */
html:not(.js) .cabecalho.is-solido .marca,
html:not(.js) .cabecalho.is-solido .nav__link{ color:var(--branco-80); }
html:not(.js) .cabecalho.is-solido .marca{ color:var(--branco); }
html:not(.js) .cabecalho__interno{ flex-wrap:wrap; padding-block:.75rem; }
html:not(.js) .hero{ padding-top:clamp(56px,8vw,104px); }

@media (max-width:860px){
  html:not(.js) .nav{
    position:static; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem;
    max-height:none; overflow:visible;
    opacity:1; visibility:visible; transform:none;
    padding:0; margin-top:.5rem;
    background:transparent; backdrop-filter:none; border:0;
  }
  html:not(.js) .nav__lista{ display:flex; flex-wrap:wrap; gap:1rem 1.4rem; }
  html:not(.js) .nav__lista li + li{ border-top:0; }
  html:not(.js) .nav__link{ width:auto; min-height:44px; font-size:.9375rem; }
  html:not(.js) .nav__cta{ width:auto; margin-top:0; }
}


/* ============================================================
   15. Grafismo da marca — traço de canto
   Par de linhas concêntricas com canto arredondado, ancorado a
   um canto do bloco e cortado pela borda. É o único elemento
   que se repete nos três KVs da marca. Alterna de lado a cada
   seção; usado 3 a 4 vezes na página, não em todas.
   Só sobre fundo escuro: o verde reprova contraste no claro.
   ============================================================ */
.canto{
  position:absolute;
  width:clamp(150px,20vw,320px);
  height:clamp(150px,20vw,320px);
  pointer-events:none;
  z-index:1;
}
.canto::before,
.canto::after{
  content:""; position:absolute; inset:0;
  border:1.5px solid var(--traco);
}
.canto::after{ inset:18px; border-color:var(--traco-fraco); }

.canto--se{ top:clamp(18px,2.4vw,34px); left:clamp(18px,2.4vw,34px); }
.canto--se::before,
.canto--se::after{ border-right:0; border-bottom:0; border-radius:52px 0 0 0; }
.canto--se::after{ border-radius:40px 0 0 0; }

.canto--id{ bottom:clamp(18px,2.4vw,34px); right:clamp(18px,2.4vw,34px); }
.canto--id::before,
.canto--id::after{ border-left:0; border-top:0; border-radius:0 0 52px 0; }
.canto--id::after{ border-radius:0 0 40px 0; }

.canto--ie{ bottom:clamp(18px,2.4vw,34px); left:clamp(18px,2.4vw,34px); }
.canto--ie::before,
.canto--ie::after{ border-right:0; border-top:0; border-radius:0 0 0 52px; }
.canto--ie::after{ border-radius:0 0 0 40px; }

@media (max-width:640px){
  .canto::after{ inset:12px; }
}

/* o traço do hero senta acima da faixa de atalhos, não no rodapé do bloco */
.hero__canto{ bottom:calc(84px + clamp(18px,2.4vw,34px)); left:clamp(18px,2.4vw,34px); z-index:1; }
/* Em tela estreita o texto do hero começa na calha e o traço cruzaria o
   título. Some abaixo de 861px; os traços das seções escuras continuam. */
@media (max-width:860px){ .hero__canto{ display:none; } }

/* ---------- 16. Contato: os três campos-chave, antes do formulário ---------- */
.contato__itens{
  margin-top:clamp(28px,3.4vw,44px);
  border-top:1px solid rgba(25,64,91,.16);
}
.contato__itens li{
  display:grid;
  grid-template-columns:104px 1fr;
  gap:1rem;
  padding:.95rem 0;
  border-bottom:1px solid rgba(25,64,91,.16);
}
.contato__chave{
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--petroleo); padding-top:.18em;
}
.contato__valor{ font-size:.9375rem; color:var(--tinta-70); }

@media (max-width:520px){
  .contato__itens li{ grid-template-columns:1fr; gap:.25rem; }
}


/* ============================================================
   17. Linguagem de movimento
   Só transform e opacity. Nada bloqueia clique durante a entrada:
   os botões do hero são acionáveis desde o primeiro quadro.
   ============================================================ */
:root{
  --entra: cubic-bezier(.4,0,.2,1);          /* sobe distribuído ao longo da duração */
  --entra-forte: cubic-bezier(.22,1,.36,1);  /* desaceleração forte, só no deslocamento */
  --resposta: cubic-bezier(.32,.72,0,1);
}

/* ---- Abertura: entrada coordenada, conjunto em ~730ms ---- */
@keyframes sobe {
  from { opacity:0; transform:translate3d(0,16px,0); }
  to   { opacity:1; transform:none; }
}
/* Defasagem de 110ms: com 70ms a cascata não era perceptível.
   O conjunto título→apoio→ações fecha por volta de 720ms. */
.js .hero__titulo,
.js .hero__linha,
.js .hero__acoes,
.js .hero__indice .indice__item{
  animation:sobe 460ms var(--entra) both;
}
.js .hero__titulo{ animation-delay:40ms; }
.js .hero__linha { animation-delay:150ms; }
.js .hero__acoes { animation-delay:260ms; }
.js .hero__indice .indice__item:nth-child(1){ animation-delay:370ms; }
.js .hero__indice .indice__item:nth-child(2){ animation-delay:440ms; }
.js .hero__indice .indice__item:nth-child(3){ animation-delay:510ms; }

/* O traço da marca desenha-se junto, mais lento e discreto */
@keyframes tracoEntra {
  from { opacity:0; transform:translate3d(-14px,14px,0); }
  to   { opacity:1; transform:none; }
}
.js .hero__canto{ animation:tracoEntra 760ms var(--entra) 240ms both; }

/* ---- Faixas de solução: imagem primeiro, texto logo atrás ----
   A imagem estabelece o assunto; o texto chega 80ms depois, quando
   o olho já sabe do que se trata. */
.js .faixa__cabeca.revelar{ transition-duration:540ms; }
.js .faixa__midia.revelar { transition-duration:540ms; transition-delay:90ms; }
.js .faixa__corpo.revelar { transition-duration:540ms; transition-delay:170ms; }

/* ---- Percurso institucional: fio cresce, etapas entram em sequência ---- */
.js .percurso::before{
  transform:scaleX(0); transform-origin:left center;
  transition:transform 720ms var(--entra) 120ms;
}
.js .percurso.is-visivel::before{ transform:scaleX(1); }
.js .percurso__item{
  opacity:0; transform:translate3d(0,12px,0);
  transition:opacity 420ms var(--entra), transform 420ms var(--entra);
}
.js .percurso.is-visivel .percurso__item{ opacity:1; transform:none; }
.js .percurso.is-visivel .percurso__item:nth-child(1){ transition-delay:220ms; }
.js .percurso.is-visivel .percurso__item:nth-child(2){ transition-delay:330ms; }
.js .percurso.is-visivel .percurso__item:nth-child(3){ transition-delay:440ms; }
.js .percurso.is-visivel .percurso__item:nth-child(4){ transition-delay:550ms; }
/* bloco que já passou pela tela aparece pronto, sem encenar */
.js .percurso.sem-entrada::before{ transition:none; transform:scaleX(1); }
.js .percurso.sem-entrada .percurso__item{ transition:none; opacity:1; transform:none; }

@media (max-width:860px){
  /* na vertical o fio cresce de cima para baixo */
  .js .percurso::before{ transform:scaleY(0); transform-origin:center top; }
  .js .percurso.is-visivel::before{ transform:scaleY(1); }
  .js .percurso.sem-entrada::before{ transform:scaleY(1); }
}

/* ---- Nada disso existe sob movimento reduzido ---- */
@media (prefers-reduced-motion: reduce){
  .js .hero__titulo,
  .js .hero__linha,
  .js .hero__acoes,
  .js .hero__indice .indice__item,
  .js .hero__canto{ animation:none; }
  .js .percurso::before{ transition:none; transform:none; }
  .js .percurso__item{ transition:none; opacity:1; transform:none; }
}


/* ---------- 18. Resumo persistente da escolha ----------
   Precisa caber em UMA linha de conteúdo: medido, acima de ~96px de altura
   ele empurra o campo Interesse para fora da primeira tela em 390x844. */
.resumo{
  display:flex; align-items:center; justify-content:space-between;
  gap:.9rem; flex-wrap:nowrap;
  padding:.6rem .7rem .6rem 1rem;
  margin-bottom:.9rem;
  background:var(--petroleo);
  color:var(--branco);
  border-radius:3px 3px 3px 20px;
}
.resumo__linha{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.resumo__rotulo{
  font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); line-height:1.2;
}
.resumo__valor{
  font-size:.9375rem; font-weight:600; letter-spacing:-.015em; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.resumo__trocar{
  flex:none;
  min-height:44px; padding:0 .85rem;
  font:inherit; font-size:.8125rem; font-weight:600;
  color:var(--branco); background:transparent;
  border:1px solid var(--fio-claro-2); border-radius:2px;
  cursor:pointer;
  transition:background var(--t-rapido), border-color var(--t-rapido);
}
.resumo__trocar:hover,
.resumo__trocar:focus-visible{ background:rgba(255,255,255,.14); border-color:var(--branco); }
.resumo__trocar:active{ transform:translateY(1px); }
.resumo :focus-visible{ outline-color:var(--verde); }

/* Realce que só começa quando o resumo está na tela */
@keyframes realce {
  0%   { box-shadow:0 0 0 0 rgba(134,199,167,.85); }
  100% { box-shadow:0 0 0 12px rgba(134,199,167,0); }
}
.resumo.is-realce{ animation:realce 1400ms cubic-bezier(.22,1,.36,1) 1; }

@media (prefers-reduced-motion: reduce){
  .resumo.is-realce{ animation:none; }
}

/* ---------- 19. Navegação das frentes ----------
   Barra fina que gruda abaixo do cabeçalho enquanto a área de soluções
   está na tela. Some antes e depois, para não empilhar duas barras fixas. */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.frentes__nav{
  position:sticky; top:var(--altura-cabecalho); z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-block:1px solid var(--fio);
}
.frentes__nav ul{
  display:flex;
  width:100%; max-width:var(--interno); margin-inline:auto;
  padding-inline:var(--gutter);
  gap:clamp(4px,2vw,32px);
}
.frentes__nav a{
  position:relative;
  display:inline-flex; align-items:center; gap:.55em;
  min-height:52px; padding-inline:.25rem;
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  color:var(--tinta-55);
  transition:color 200ms var(--resposta);
}
.frentes__nav-num{
  font-size:.75rem; font-weight:600; letter-spacing:.06em;
  color:var(--tinta-55); opacity:.7;
  transition:color 200ms var(--resposta), opacity 200ms var(--resposta);
}
.frentes__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--petroleo);
  transform:scaleX(0); transform-origin:center;
  transition:transform 220ms var(--resposta);
}
.frentes__nav a:hover,
.frentes__nav a:focus-visible{ color:var(--tinta); }

/* estado ativo: acompanha clique E rolagem manual */
.frentes__nav a.is-atual{ color:var(--petroleo); }
.frentes__nav a.is-atual .frentes__nav-num{ color:var(--petroleo); opacity:1; }
.frentes__nav a.is-atual::after{ transform:scaleX(1); }

@media (max-width:560px){
  .frentes__nav ul{ gap:0; justify-content:space-between; }
  .frentes__nav a{ flex:1; justify-content:center; font-size:.875rem; min-height:48px; }
  .frentes__nav-num{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .frentes__nav a,
  .frentes__nav a::after,
  .frentes__nav-num{ transition:none; }
}


/* A barra sticky das frentes cobriria o início da faixa ao pousar numa
   âncora. O recuo soma cabeçalho + barra. */
.faixa{ scroll-margin-top:calc(var(--altura-cabecalho) + 54px); }
#resumo-interesse{ scroll-margin-top:calc(var(--altura-cabecalho) + 14px); }
@media (max-width:560px){
  .faixa{ scroll-margin-top:calc(var(--altura-cabecalho) + 50px); }
}


/* ---------- 20. Grafismo da marca: entrada dos traços de seção ----------
   O traço do hero já anima na abertura. Os das seções escuras entram junto
   com o bloco, mais curtos, para não competir com a leitura. O numeral de
   marca d'água NÃO ganha revelação própria: ele já herda a entrada do
   .faixa__corpo, e uma segunda animação sobrescreveria sua opacidade baixa. */
.js .faixa .canto,
.js .institucional .canto,
.js .secao--contato .canto{
  opacity:0; transform:translate3d(0,8px,0);
  transition:opacity 320ms var(--entra) 180ms, transform 320ms var(--entra) 180ms;
}
.js .faixa.tem-visivel .canto,
.js .institucional.tem-visivel .canto,
.js .secao--contato.tem-visivel .canto{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .faixa .canto,
  .js .institucional .canto,
  .js .secao--contato .canto{ opacity:1; transform:none; transition:none; }
}


/* ============================================================
   21. Páginas internas de solução
   Mais baixas que o hero da home: aqui o conteúdo é o protagonista.
   ============================================================ */
.abertura{
  position:relative; overflow:hidden;
  padding-top:calc(var(--altura-cabecalho) + clamp(44px,5vw,76px));
  padding-bottom:clamp(44px,5vw,72px);
  color:var(--branco);
  background-color:var(--escuro);
  background-image:
    radial-gradient(80% 70% at 6% 96%, rgba(134,199,167,.13) 0%, rgba(134,199,167,0) 58%),
    linear-gradient(152deg, var(--petroleo-fundo-1) 0%, var(--escuro) 64%);
}
.abertura__interno{ position:relative; z-index:2; max-width:var(--interno); }
.abertura__titulo{
  font-size:clamp(2.1rem,1.5rem + 2.6vw,3.5rem);
  font-weight:700; letter-spacing:-.032em; line-height:1.06;
  max-width:20ch; margin-bottom:1.2rem;
}
.abertura__titulo em{ font-style:normal; color:var(--verde); }
.abertura__apoio{
  font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  line-height:1.58; color:var(--branco-80); max-width:56ch;
}
.abertura__acoes{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; }

/* migalha: mostra onde a pessoa está e o caminho de volta */
.migalha{
  display:flex; align-items:center; gap:.55em; flex-wrap:wrap;
  font-size:.875rem; color:var(--branco-64);
  margin-bottom:1.3rem;
}
.migalha a{
  color:var(--branco-80); border-bottom:1px solid var(--fio-claro-2);
  transition:color var(--t-rapido), border-color var(--t-rapido);
}
.migalha a:hover,
.migalha a:focus-visible{ color:var(--branco); border-color:var(--verde); }
.migalha [aria-current]{ color:var(--verde); }

/* ---------- lista de pontos ---------- */
.pontos__lista{ display:grid; gap:clamp(18px,2.4vw,28px); max-width:900px; }
.pontos__item{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  padding-bottom:clamp(18px,2.4vw,26px);
  border-bottom:1px solid var(--fio);
}
.pontos__item:last-child{ border-bottom:0; padding-bottom:0; }
.secao--escura .pontos__item{ border-bottom-color:var(--fio-claro); }
.pontos__num{
  font-size:.8125rem; font-weight:600; letter-spacing:.08em;
  color:var(--petroleo); padding-top:.25em;
}
.secao--escura .pontos__num{ color:var(--verde); }
.pontos__titulo{ font-size:1.1rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.3rem; }
.pontos__texto{ font-size:1rem; color:var(--tinta-70); max-width:60ch; }
.secao--escura .pontos__texto{ color:var(--branco-80); }
/* O apoio do topo herdava --tinta-70, pensado para fundo claro: 1,43:1 sobre petróleo. */
.secao--escura .secao__linha{ color:var(--branco-80); }

/* ---------- perguntas frequentes ---------- */
.faq__lista{ max-width:860px; border-top:1px solid var(--fio); }
.faq__item{ border-bottom:1px solid var(--fio); }
.faq__pergunta{
  display:flex; align-items:center; gap:.9rem;
  list-style:none; cursor:pointer;
  min-height:60px; padding:1rem 0;
  font-size:clamp(1.0625rem,1rem + .25vw,1.15rem); font-weight:600;
  letter-spacing:-.018em; color:var(--escuro);
}
.faq__pergunta::-webkit-details-marker{ display:none; }
.faq__pergunta::after{
  content:""; flex:none; margin-left:auto;
  width:11px; height:11px; border-right:1.8px solid var(--petroleo); border-bottom:1.8px solid var(--petroleo);
  transform:rotate(45deg) translateY(-2px);
  transition:transform 220ms var(--resposta);
}
.faq__item[open] .faq__pergunta::after{ transform:rotate(-135deg) translateY(-2px); }
.faq__pergunta:hover{ color:var(--petroleo); }
.faq__resposta{
  padding:0 0 1.3rem; max-width:64ch;
  font-size:1rem; color:var(--tinta-70); line-height:1.62;
}
.faq__resposta p + p{ margin-top:.8rem; }
.faq__resposta a{ color:var(--petroleo); border-bottom:1px solid var(--fio-forte); }
.faq__resposta a:hover{ border-color:var(--verde); }

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


/* ============================================================
   22. Seletor de idioma e submenu de soluções
   Sem bandeira: um país não identifica um idioma.
   ============================================================ */
.idioma{
  display:inline-flex; align-items:center;
  border:1px solid var(--fio-claro-2); border-radius:2px;
  overflow:hidden;
}
.idioma__atual,
.idioma__troca{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:38px; padding:0 .5rem;
  font-size:.8125rem; font-weight:600; letter-spacing:.04em;
  transition:background var(--t-rapido), color var(--t-rapido);
}
.idioma__atual{ background:var(--verde); color:var(--escuro); }
.idioma__troca{ color:var(--branco-80); }
.idioma__troca:hover,
.idioma__troca:focus-visible{ background:rgba(255,255,255,.12); color:var(--branco); }
.cabecalho.is-solido .idioma{ border-color:var(--fio-forte); }
.cabecalho.is-solido .idioma__troca{ color:var(--tinta-70); }
.cabecalho.is-solido .idioma__troca:hover,
.cabecalho.is-solido .idioma__troca:focus-visible{ background:rgba(15,22,28,.08); color:var(--escuro); }

/* Submenu de soluções: no desktop abre no foco ou no hover; no mobile os
   três links ficam sempre visíveis, sem depender de interação. */
.nav__solucoes{ position:relative; }
.nav__grupo{
  display:inline-flex; align-items:center; gap:.4em;
  min-height:44px;
  font-size:.9375rem; font-weight:500; color:var(--branco-80);
  cursor:default;
}
.nav__grupo::after{
  content:""; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform 200ms var(--resposta);
}
.cabecalho.is-solido .nav__grupo{ color:var(--tinta-70); }

.nav__sub{
  position:absolute; top:100%; left:-1rem;
  min-width:220px; padding:.5rem 0;
  background:var(--escuro);
  border:1px solid var(--fio-claro);
  border-radius:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 200ms var(--resposta), transform 200ms var(--resposta), visibility 0s linear 200ms;
}
.nav__solucoes:hover .nav__sub,
.nav__solucoes:focus-within .nav__sub{
  opacity:1; visibility:visible; transform:none;
  transition:opacity 200ms var(--resposta), transform 200ms var(--resposta), visibility 0s;
}
.nav__solucoes:hover .nav__grupo::after,
.nav__solucoes:focus-within .nav__grupo::after{ transform:rotate(-135deg) translateY(-2px); }
.nav__sub .nav__link{
  display:flex; width:100%; min-height:44px; padding:0 1.2rem;
  color:var(--branco-80); font-weight:500;
}
.nav__sub .nav__link::after{ display:none; }
.nav__sub .nav__link:hover,
.nav__sub .nav__link:focus-visible{ background:rgba(255,255,255,.08); color:var(--branco); }

@media (max-width:860px){
  /* no painel mobile tudo fica aberto: nada essencial atrás de interação */
  .nav__grupo{ color:var(--verde); font-size:.75rem; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; min-height:auto; padding-top:1rem; }
  .nav__grupo::after{ display:none; }
  .nav__sub{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; padding:0; background:none; border:0; transition:none;
  }
  .nav__sub .nav__link{ padding:0; min-height:52px; font-size:1.05rem; }
  .nav__sub li + li{ border-top:1px solid var(--fio-claro); }
  .nav__solucoes{ border-bottom:1px solid var(--fio-claro); padding-bottom:.6rem; }

  .idioma{ margin-top:1.2rem; align-self:flex-start; }
  .cabecalho.is-menu-aberto .idioma{ border-color:var(--fio-claro-2); }
  .cabecalho.is-menu-aberto .idioma__troca{ color:var(--branco-80); }
}

@media (prefers-reduced-motion: reduce){
  .nav__sub, .nav__grupo::after, .idioma__atual, .idioma__troca{ transition:none; }
}


/* ============================================================
   23. Abertura sem foto de fundo: o seletor de soluções
   O caminhão ocupava 91% da primeira tela no celular e fazia a
   Bioside parecer só transporte. Agora é uma das três miniaturas,
   com o mesmo peso de ureia e Bioatlas.
   ============================================================ */
.hero--sem-foto{
  display:block;
  min-height:0;
  padding-top:calc(var(--altura-cabecalho) + clamp(40px,5vw,72px));
  padding-bottom:clamp(44px,5vw,76px);
  background-color:var(--escuro);
  background-image:
    radial-gradient(80% 70% at 4% 94%, rgba(134,199,167,.13) 0%, rgba(134,199,167,0) 58%),
    linear-gradient(152deg, var(--petroleo-fundo-1) 0%, var(--escuro) 62%);
}
.hero__grade{ position:relative; z-index:2; }
/* Título e apoio lado a lado: em coluna estreita a chamada quebrava em
   quatro linhas e empurrava as três soluções para fora da primeira tela. */
.hero--sem-foto .hero__texto{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3vw,56px);
  align-items:end;
  max-width:none;
  margin-bottom:clamp(30px,3.4vw,48px);
}
.hero--sem-foto .hero__titulo{
  max-width:16ch; margin-bottom:0;
  font-size:clamp(2.2rem,1.5rem + 2.9vw,3.6rem);
}
.hero--sem-foto .hero__linha{ max-width:42ch; padding-bottom:.4rem; }

@media (max-width:860px){
  .hero--sem-foto .hero__texto{ grid-template-columns:1fr; gap:1rem; align-items:start; }
  .hero--sem-foto .hero__titulo{ max-width:none; }
}

/* as três escolhas */
.escolhas{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
}
.escolha{
  position:relative;
  display:flex; flex-direction:column;
  padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid var(--fio-claro);
}
/* leve desalinho no cartão do meio: quebra a leitura de três caixas iguais */
@media (min-width:961px){ .escolha--ureia{ margin-top:clamp(18px,2.4vw,34px); } }

.escolha__numeral{
  position:absolute; right:0; top:-.34em;
  font-size:clamp(2.6rem,2rem + 2.4vw,4rem);
  font-weight:300; letter-spacing:-.045em; line-height:1;
  color:var(--verde); opacity:.16;
  pointer-events:none; user-select:none;
}
.escolha__midia{
  display:block; margin-bottom:1.1rem; overflow:hidden;
  border-radius:3px 3px 3px 34px;
  background:var(--petroleo);
}
.escolha--ureia .escolha__midia{ border-radius:3px 34px 3px 3px; }
.escolha__midia img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  filter:saturate(.62) brightness(.94) contrast(1.06);
  transition:transform 620ms var(--entra-forte), filter 320ms var(--entra);
}
.escolha:hover .escolha__midia img,
.escolha:focus-within .escolha__midia img{ transform:scale(1.035); filter:saturate(.85) brightness(1) contrast(1.04); }

.escolha__corpo{ display:flex; flex-direction:column; flex:1; }
.escolha__rotulo{
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); margin-bottom:.5rem;
}
.escolha__nome{
  font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem);
  font-weight:700; letter-spacing:-.024em; line-height:1.16;
  color:var(--branco); margin-bottom:.6rem;
}
.escolha__linha{ font-size:.9375rem; color:var(--branco-64); line-height:1.5; }
.escolha__acoes{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem;
  margin-top:auto; padding-top:1.2rem;
}
/* "Conhecer" é a ação primária dentro do cartão; "cotação" fica secundária.
   No cabeçalho a hierarquia é a inversa, porque lá não há concorrência. */
.botao--claro{
  background:rgba(255,255,255,.10); color:var(--branco);
  border-color:var(--fio-claro-2);
  gap:.5em; padding:0 1.15rem; --alt:46px; font-size:.9375rem;
}
.botao--claro:hover,
.botao--claro:focus-visible{ background:rgba(255,255,255,.18); border-color:var(--branco); }
.botao--claro svg{ width:17px; height:17px; }
.escolha__cotar{
  font-size:.875rem; font-weight:600; color:var(--verde);
  border-bottom-color:transparent; min-height:40px;
}
.escolha__cotar svg{ width:16px; height:16px; }
.escolha__cotar:hover,
.escolha__cotar:focus-visible{ color:var(--branco); border-bottom-color:var(--verde); }

@media (max-width:960px){
  .escolhas{ grid-template-columns:1fr; gap:clamp(26px,4vw,36px); }
  .escolha__midia img{ aspect-ratio:16/9; }
  .escolha__numeral{ font-size:clamp(2.4rem,9vw,3.4rem); }
  .escolha__acoes .botao--claro{ flex:1 1 auto; }
}

/* ---------- atalhos para as páginas internas ---------- */
.atalhos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px); }
.atalho{
  display:flex; align-items:center; gap:1rem;
  min-height:84px; padding:1rem 1.2rem;
  border:1px solid var(--fio);
  border-radius:3px 3px 3px 26px;
  background:var(--claro-alt);
  transition:border-color var(--t-rapido), background var(--t-rapido), transform var(--t-rapido);
}
.atalho:hover,
.atalho:focus-visible{ border-color:var(--petroleo); background:var(--claro); transform:translateY(-2px); }
.atalho__num{ font-size:.8125rem; font-weight:600; color:var(--petroleo); }
.atalho__corpo{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.atalho__nome{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; color:var(--escuro); }
.atalho__desc{ font-size:.875rem; color:var(--tinta-70); }
.atalho svg{ width:18px; height:18px; margin-left:auto; flex:none; color:var(--petroleo);
  transition:transform var(--t-medio); }
.atalho:hover svg, .atalho:focus-visible svg{ transform:translateX(4px); }
@media (max-width:860px){ .atalhos{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce){
  .escolha__midia img, .atalho, .atalho svg{ transition:none; }
  .escolha:hover .escolha__midia img{ transform:none; }
}

/* Rodada 6. A resposta do FAQ aparecia de uma vez: altura de 63 para 162 px num
   único quadro. A entrada leve orienta o olho para o conteúdo que surgiu, sem
   animar altura. Com movimento reduzido, nada anima. */
@keyframes faq-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .faq__resposta{animation:faq-abre 260ms cubic-bezier(.4,.1,.2,1) both}
}