/* ============================================================
   BASE — Osy Caminhões
   Reset, paleta, tipografia, botões e o sistema de cunhas de 50°.

   A paleta veio fechada do briefing (item 02) e é a do logotipo:
   navy e areia, sem cor de acento própria. A regra difícil está
   aplicada aqui, no .btn: areia sobre navy, navy sobre claro.
   Um par só, invertido conforme o fundo. Não existe .btn amarelo
   nem laranja de promoção neste arquivo, e a ausência é
   deliberada — item 07 das regras de aplicação.
   ============================================================ */

:root{
  /* ---- paleta de marca (briefing 02) ---- */
  --navy:#083955;         /* dominante */
  --navy-d:#052637;       /* rodapé e faixas profundas */
  --navy-x:#03161f;       /* barra do grupo */
  --navy-l:#0d4c6f;       /* hover e superfícies elevadas sobre navy */
  --sand:#c5c2b3;         /* assinatura, o S do logotipo */
  --sand-d:#aca897;       /* borda e hover da areia */
  --sand-l:#f2f1ed;       /* areia clara, fundo de seção alternada */
  --white:#fff;
  --teal:#1f7a8c;         /* uso restrito: link, filtro ativo, foco */
  --teal-l:#2e9cb1;
  --green:#1f6b4a;        /* estado: disponível */
  --amber-sys:#8a6b1f;    /* estado: reservado. Cor de sistema, não de marca */

  /* ---- tinta ---- */
  --ink:#083955;
  --ink-2:#4a6577;
  --ink-3:#6c8494;
  --line:#dedbd1;
  --line-d:rgba(197,194,179,.22);

  /* ---- tipografia ---- */
  --f:'Chivo',system-ui,-apple-system,sans-serif;
  --fb:'Boldonse','Chivo',sans-serif;

  /* ---- métrica ---- */
  --wrap:1320px;
  --px:clamp(20px,4vw,64px);

  /* Alturas do topo, iguais às da Osy Componentes e da Osy
     Implementos: as quatro frentes abrem com o mesmo cabeçalho.
     São alturas fixas e não padding, para a barra não crescer
     junto com o conteúdo dela. */
  --altura-barra-grupo:38px;
  --altura-header:76px;
  --altura-header-compacto:64px;
  --topo-fixo:calc(var(--altura-barra-grupo) + var(--altura-header));

  --navy-rolagem:#12587e;
  --sombra:0 30px 70px -45px rgba(3,22,31,.75);
  --sombra-card:0 2px 0 rgba(8,57,85,.05), 0 18px 38px -30px rgba(8,57,85,.5);
}

html{scrollbar-width:thin;scrollbar-color:var(--navy-rolagem) var(--sand-l)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--sand-l)}
::-webkit-scrollbar-thumb{background:var(--navy-rolagem);border-radius:6px;border:2px solid var(--sand-l)}
::-webkit-scrollbar-thumb:hover{background:var(--navy)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--navy);color:var(--sand-l);
  font-family:var(--f);font-size:18.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--sand);color:var(--navy)}

/* O foco é a única situação em que o teal aparece grande. Item 02:
   uso restrito a link, estado ativo de filtro e foco de teclado. */
:focus-visible{outline:3px solid var(--teal-l);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--px)}
.wrap--estreito{max-width:920px}

/* Números tabulares. Regra 03: o comprador varre a vitrine pelo
   preço, e preço desalinhado obriga a ler em vez de varrer. */
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:fixed;top:-999px;left:12px;z-index:200;background:var(--sand);color:var(--navy);
  padding:12px 18px;font-weight:800}
.pular:focus{top:12px}

/* ============================================================
   TIPOGRAFIA DISPLAY
   ============================================================ */
.d1{font-weight:900;font-size:clamp(46px,7vw,104px);line-height:.94;letter-spacing:-.042em;text-wrap:balance}
.d2{font-weight:900;font-size:clamp(34px,4.4vw,66px);line-height:1.02;letter-spacing:-.034em;text-wrap:balance}
.d3{font-weight:800;font-size:clamp(25px,2.5vw,38px);line-height:1.1;letter-spacing:-.024em}
.d4{font-weight:800;font-size:clamp(20px,1.7vw,25px);line-height:1.2;letter-spacing:-.015em}
.lead{font-size:clamp(18px,1.4vw,22.5px);line-height:1.52;max-width:58ch}
.mini{font-size:14.5px;line-height:1.5;color:var(--ink-3)}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase}
.eyebrow::before{content:"";width:32px;height:3px;background:var(--sand);flex:none}
.eyebrow--claro::before{background:var(--navy)}
.eyebrow--teal::before{background:var(--teal)}

.impacto{font-family:var(--fb);font-weight:400;font-size:clamp(24px,3.4vw,46px);
  line-height:1.14;letter-spacing:-.01em}

/* ============================================================
   BOTÕES — a decisão difícil do briefing, item 02
   Um par só: areia sobre navy, navy sobre claro. Nunca as duas
   cores em botões diferentes na mesma tela.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--sand);color:var(--navy);
  font-weight:800;font-size:16.5px;letter-spacing:.005em;
  padding:15px 26px;border:2px solid var(--sand);
  transition:transform .16s,background .16s,border-color .16s,color .16s;
  text-align:center;
}
.btn:hover{background:var(--white);border-color:var(--white);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* sobre fundo claro */
.btn--navy{background:var(--navy);color:var(--sand);border-color:var(--navy)}
.btn--navy:hover{background:var(--navy-l);border-color:var(--navy-l);color:var(--white)}

/* contornado: herda a cor do texto do bloco */
.btn--out{background:none;color:var(--sand-l);border-color:rgba(197,194,179,.5)}
.btn--out:hover{background:var(--sand-l);color:var(--navy);border-color:var(--sand-l)}
.btn--out-navy{background:none;color:var(--navy);border-color:rgba(8,57,85,.35)}
.btn--out-navy:hover{background:var(--navy);color:var(--sand);border-color:var(--navy)}

.btn--sm{padding:10px 16px;font-size:14.5px;border-width:2px}
.btn--lg{padding:18px 34px;font-size:18px}
.btn--bloco{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btns{display:flex;gap:14px;flex-wrap:wrap}

/* WhatsApp: mesmo par de cores, ícone identifica o canal. Não
   entra verde de terceiro no sistema. */
.btn svg{flex:none}

/* ============================================================
   O CORTE DIAGONAL — elemento gráfico da divisão
   Regra 02 do briefing: 50°, o mesmo ângulo do logotipo, usado
   na quebra entre seções e no rodapé das faixas. Nunca como
   moldura de foto nem máscara de imagem.

   Os seis backgrounds entregues pelo marketing são exatamente
   isto: uma cor chapada, uma cunha no canto superior direito e
   um brilho difuso na fronteira. Estão reproduzidos aqui em
   gradiente em vez de PNG — os arquivos originais têm 8000×4500
   e somam 3,6 MB, e o item 10 pede a página de estoque abrindo
   em três segundos no 4G. Mesmo desenho, peso zero.
   ============================================================ */

/* 140deg no CSS coloca a fronteira a 50°, o ângulo da marca. */
.cunha{position:relative;isolation:isolate}
.cunha::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--cunha-fundo,transparent);
}

/* --- reprodução dos backgrounds oficiais --- */
/* 01, areia clara com cunha areia */
.bg-01{background:
  linear-gradient(140deg,transparent 0 61%,rgba(197,194,179,.55) 61% 100%),
  linear-gradient(140deg,var(--sand-l) 0 66%,var(--sand) 66% 100%);
  color:var(--ink)}
/* 02, branco com cunha areia clara */
.bg-02{background:
  linear-gradient(140deg,var(--white) 0 66%,var(--sand-l) 66% 100%);color:var(--ink)}
/* 03, navy com cunha profunda e brilho na fronteira */
.bg-03{background:
  linear-gradient(140deg,transparent 0 58%,rgba(31,122,140,.16) 58% 70%,transparent 70%),
  linear-gradient(140deg,var(--navy) 0 66%,var(--navy-d) 66% 100%);
  color:var(--sand-l)}
/* 04, areia com cunha navy */
.bg-04{background:
  linear-gradient(140deg,var(--sand) 0 66%,var(--navy) 66% 100%);color:var(--ink)}
/* 05, areia com cunha navy e halo, o mais usado do manual */
.bg-05{background:
  linear-gradient(140deg,transparent 0 55%,rgba(8,57,85,.16) 55% 68%,transparent 74%),
  linear-gradient(140deg,var(--sand) 0 66%,var(--navy) 66% 100%);color:var(--ink)}
/* 06, navy com cunha areia */
.bg-06{background:
  linear-gradient(140deg,var(--navy) 0 66%,var(--sand) 66% 100%);color:var(--sand-l)}

/* --- cunhas novas, criadas para o site ---
   O manual entrega seis fundos de peça gráfica. Um site precisa de
   textura que sobreviva atrás de texto longo e de tabela, e os seis
   originais têm a fronteira no meio da tela, onde o texto mora.
   Estas cinco levam o grafismo para as bordas.                    */

/* pista: faixas de 50° espaçadas, leitura de rodovia */
.bg-pista{position:relative;overflow:hidden}
.bg-pista::before{
  content:"";position:absolute;inset:-20% -10%;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(140deg,
    rgba(197,194,179,.075) 0 3px,transparent 3px 74px);
}
.bg-pista.sobre-claro::before{
  background:repeating-linear-gradient(140deg,
    rgba(8,57,85,.07) 0 3px,transparent 3px 74px);
}
.bg-pista > *{position:relative;z-index:1}

/* aresta: uma lâmina fina de luz atravessando o bloco */
.bg-aresta{position:relative;overflow:hidden}
.bg-aresta::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(140deg,transparent 0 51%,
    rgba(197,194,179,.16) 51% 53.4%,transparent 53.4%);
}
.bg-aresta.sobre-claro::before{
  background:linear-gradient(140deg,transparent 0 51%,
    rgba(8,57,85,.13) 51% 53.4%,transparent 53.4%);
}
.bg-aresta > *{position:relative;z-index:1}

/* halo: brilho radial frio no canto, dá profundidade ao navy chapado */
.bg-halo{position:relative;overflow:hidden}
.bg-halo::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 88% -20%,rgba(31,122,140,.34),transparent 60%);
}
.bg-halo > *{position:relative;z-index:1}

/* degrau: dois planos de navy separados pela diagonal, sem contraste duro */
.bg-degrau{background:linear-gradient(140deg,var(--navy-d) 0 44%,var(--navy) 44% 100%)}

/* trama: grade diagonal fininha, para cabeçalho de página interna */
.bg-trama{position:relative;overflow:hidden}
.bg-trama::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(140deg,rgba(197,194,179,.055) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(50deg,rgba(197,194,179,.04) 0 1px,transparent 1px 26px);
  mask-image:linear-gradient(140deg,transparent 20%,#000 90%);
}
.bg-trama > *{position:relative;z-index:1}

/* ============================================================
   CAMPOS E CUNHAS DA MARCA — bg-cunha
   ------------------------------------------------------------
   O cliente olhou as seções claras e disse que estavam brancas
   e cruas. Estavam: `.sec--white` era #fff chapado, e as
   texturas daqui de cima — pista, aresta, trama — andam entre
   4% e 16% de opacidade. São acabamento, não presença.

   Duas peças novas, as duas do brand book.

   CAMPO  a peça inteira, do arquivo oficial: campo de cor com a
          cunha no canto. WebP de 8 a 10 KB, porque é gradiente.
          Vai em faixa curta e em fecho de página — atrás de
          texto corrido ele briga com a leitura.

   CUNHA  só a forma, em SVG de 539 bytes dentro deste arquivo.
          A geometria foi MEDIDA no grafismo oficial: aresta a
          49,4°, que é a cunha de 50° do brand book, e a base
          côncava ajustada por Bézier com 0,3% de desvio do
          original. No arquivo da OSY a COR é constante — #c5c2b3
          exato — e o que varia é a opacidade, de 255 no topo a
          ~110 na base. Por isso aqui é gradiente de
          `stop-opacity`, e a mesma peça serve em areia, navy e
          areia clara, sem precisar de três arquivos.

   DA PALETA, SÓ NAVY E AREIA. Dos seis campos do brand book
   três ficaram de fora: o amarelo e os dois teal. O briefing
   fechou a paleta em navy e areia, sem cor de acento (item 02),
   e o item 07 é explícito sobre acento de promoção. O teal
   segue no que já era: link, filtro ativo e foco.

   POSIÇÃO, TAMANHO E LADO SÃO POR VARIANTE. Repetir a mesma
   cunha do mesmo jeito nas oito páginas seria trocar branco cru
   por cunha cansada.

   O NOME É `bg-cunha`, E NÃO `cunha`. `.cunha` já existe lá em
   cima, com `--cunha-fundo` — nunca aplicada em HTML nenhum,
   como os `.bg-01`..`.bg-06` ao lado dela, mas ocupada. Este
   prefixo segue os irmãos que estão de fato em uso: bg-pista,
   bg-aresta, bg-halo, bg-degrau, bg-trama.
   ============================================================ */

/* ---- o campo inteiro, arquivo do brand book ----
   Prefixado com `.sec` de propósito. As regras de seção
   (`.sec--white`, `.sec--sand`) vêm mais abaixo neste arquivo e
   têm a mesma especificidade que uma classe sozinha: `.campo`
   sem o prefixo era declarado antes, perdia o `background`
   delas e não pintava nada. Com `.sec` na frente o campo vence,
   e a seção mantém as cores de texto que já tinha — inclusive
   o `.lead`, que tem regra própria por tipo de fundo. */
.sec.campo,.hero.campo{background-repeat:no-repeat;
  background-position:center right;background-size:cover}
/* O VÉU. O campo é o arquivo do brand book em cheio, e em cheio
   ele tem contraste de peça impressa: a cunha bege sobre o texto
   dava 3,43:1 no celular. O véu é a própria cor base da seção em
   alpha, por cima da imagem — a cunha continua lá, de longe, e o
   texto volta a ter fundo de leitura. Fica no CSS, e não no
   arquivo, porque é o número que se ajusta depois de medir. */
.sec.campo--areia,.hero.campo--areia{background-color:var(--sand-l);
  background-image:linear-gradient(rgba(242,241,237,.8),rgba(242,241,237,.8)),
    url("../img/fundos/campo-areia.webp")}

/* UM CAMPO SÓ, e não os três que este bloco chegou a ter. O de
   areia funda e o navy foram exportados, escritos aqui e depois
   apagados: o de areia funda tem a cunha em NAVY, e a faixa de
   fecho onde ele ia tem o texto em navy — com véu ou sem, o
   texto media 1,29:1 de contraste ali. Aquela faixa passou a
   usar a cunha, e o campo navy nunca chegou a ser aplicado em
   seção nenhuma. Ficar no arquivo "porque pode servir" é como
   nasceram os `.bg-01`..`.bg-06` lá em cima, que nenhuma página
   jamais usou. */

/* ---- a cunha sozinha ----
   Desenha no ::after de propósito. As texturas do começo deste
   arquivo — pista, aresta, halo, trama — usam todas o ::before
   da própria seção, e pseudo-elemento não empilha: enquanto a
   cunha também era ::before, numa seção com as duas classes a
   que fosse declarada depois APAGAVA a outra. Medido: a seção 3
   de financiamento despencou de 27 para 1 de amplitude de
   luminância ao ganhar a cunha, porque perdeu a aresta na
   troca. Com ::after as duas convivem. */
.bg-cunha{position:relative;overflow:hidden}
.bg-cunha::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  /* medida base: alta, encostada na direita, entrando por cima */
  width:46%;height:190%;right:-5%;top:-46%;
  /* A MÁSCARA É O QUE SEGURA O CONTRASTE, e não a opacidade.
     Baixar a opacidade até o texto ficar seguro apagava a peça
     junto: das 29 seções, só duas continuavam com textura
     mensurável. A máscara faz a peça viver inteira na borda
     externa e desaparecer antes de chegar à coluna de leitura,
     que é o que o comentário das cinco texturas acima já pedia
     — levar o grafismo para as bordas. O `transform` das
     variantes espelha a máscara junto com a peça, de graça. */
  mask-image:linear-gradient(to left,#000 0 34%,transparent 78%);
  -webkit-mask-image:linear-gradient(to left,#000 0 34%,transparent 78%);
}
.bg-cunha > *{position:relative;z-index:1}

/* Cor, e cada uma pede a sua opacidade.

   ESTES NÚMEROS FORAM MEDIDOS, NÃO ESCOLHIDOS. Na primeira
   tentativa a areia estava em 55%, a clara em 12% e o navy em
   9%, e parecia bom na tela: o que o olho não pega é que a peça
   passa ATRÁS da coluna de texto. Medido pixel a pixel o fundo
   sob cada letra das oito páginas, dezenove textos caíam abaixo
   de 4,5:1 — no celular o pior deles a 2,21:1, porque lá o
   `.wrap` ocupa a largura toda e não existe margem onde a peça
   possa ficar sozinha.

   As texturas do começo deste arquivo andam entre 4% e 16% pelo
   mesmo motivo. Decoração que cruza texto é decoração fraca, ou
   não é decoração. */
.bg-cunha--areia::after{opacity:.62;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20127.7'%3E%3ClinearGradient%20id='g'%20x1='99'%20y1='6'%20x2='26'%20y2='96'%20gradientUnits='userSpaceOnUse'%3E%3Cstop%20offset='0'%20stop-color='%23c5c2b3'%20stop-opacity='1'/%3E%3Cstop%20offset='.55'%20stop-color='%23c5c2b3'%20stop-opacity='.62'/%3E%3Cstop%20offset='1'%20stop-color='%23c5c2b3'%20stop-opacity='.43'/%3E%3C/linearGradient%3E%3Cpath%20d='M99.8,0%20L13.2,74.3%20C73.2,74.3%2093.7,113.7%2099.7,127.7%20Z'%20fill='url(%23g)'/%3E%3C/svg%3E")}
.bg-cunha--navy::after{opacity:.1;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20127.7'%3E%3ClinearGradient%20id='g'%20x1='99'%20y1='6'%20x2='26'%20y2='96'%20gradientUnits='userSpaceOnUse'%3E%3Cstop%20offset='0'%20stop-color='%23083955'%20stop-opacity='1'/%3E%3Cstop%20offset='.55'%20stop-color='%23083955'%20stop-opacity='.62'/%3E%3Cstop%20offset='1'%20stop-color='%23083955'%20stop-opacity='.43'/%3E%3C/linearGradient%3E%3Cpath%20d='M99.8,0%20L13.2,74.3%20C73.2,74.3%2093.7,113.7%2099.7,127.7%20Z'%20fill='url(%23g)'/%3E%3C/svg%3E")}
.bg-cunha--clara::after{opacity:.16;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20127.7'%3E%3ClinearGradient%20id='g'%20x1='99'%20y1='6'%20x2='26'%20y2='96'%20gradientUnits='userSpaceOnUse'%3E%3Cstop%20offset='0'%20stop-color='%23f2f1ed'%20stop-opacity='1'/%3E%3Cstop%20offset='.55'%20stop-color='%23f2f1ed'%20stop-opacity='.62'/%3E%3Cstop%20offset='1'%20stop-color='%23f2f1ed'%20stop-opacity='.43'/%3E%3C/linearGradient%3E%3Cpath%20d='M99.8,0%20L13.2,74.3%20C73.2,74.3%2093.7,113.7%2099.7,127.7%20Z'%20fill='url(%23g)'/%3E%3C/svg%3E")}

/* Lado, altura e tamanho. É a combinação destes que faz a mesma
   peça não parecer a mesma peça duas seções depois. */
.bg-cunha--esq::after{right:auto;left:-5%;transform:scaleX(-1)}
.bg-cunha--pe::after{top:auto;bottom:-46%}
.bg-cunha--pe.bg-cunha--esq::after{transform:scaleX(-1) scaleY(-1)}
.bg-cunha--pe:not(.bg-cunha--esq)::after{transform:scaleY(-1)}
.bg-cunha--larga::after{width:66%}
.bg-cunha--estreita::after{width:30%}
.bg-cunha--dentro::after{right:4%;width:38%;height:150%;top:-26%;
  mask-image:linear-gradient(to left,#000 0 52%,transparent 92%);
  -webkit-mask-image:linear-gradient(to left,#000 0 52%,transparent 92%)}

/* No celular a cunha grande come a largura do texto. */
/* No celular o `.wrap` ocupa a largura inteira: a peça não tem
   margem onde ficar e cruza o texto por cima, inteira. Aqui ela
   encolhe e recua mais — foi onde o contraste caiu a 2,21:1. */
@media (max-width:700px){
  .bg-cunha::after{width:66%;
    /* no celular a coluna vai de borda a borda: a máscara corta
       mais cedo, e o que sobra é um canto */
    mask-image:linear-gradient(to left,#000 0 18%,transparent 58%);
    -webkit-mask-image:linear-gradient(to left,#000 0 18%,transparent 58%)}
  .bg-cunha--navy::after{opacity:.07}
  /* 13px peso 800 do rotulo dos numeros, em quem-somos, ficava
     a 4,42:1 contra o minimo de 4,5. Faltava 0,08. */
  .bg-cunha--areia::after{opacity:.44}
}

/* O símbolo da marca como marca-d'água. Opacidade baixa: é textura,
   não logotipo — o logotipo aplicado tem lugar próprio (regra 04). */
.sym{position:absolute;pointer-events:none;opacity:.05;color:var(--sand-l);z-index:0}
.sym svg{width:100%;height:auto;display:block}
.sym--escuro{color:var(--navy);opacity:.06}

/* ============================================================
   SEÇÕES
   ============================================================ */
.sec{padding:clamp(54px,6.6vw,104px) 0;position:relative;overflow:hidden}
.sec--navy{background:var(--navy);color:var(--sand-l)}
.sec--deep{background:var(--navy-d);color:var(--sand-l)}
.sec--white{background:var(--white);color:var(--ink)}
.sec--sand{background:var(--sand-l);color:var(--ink)}
.sec--sand-cheia{background:var(--sand);color:var(--ink)}
.sec--navy .lead,.sec--deep .lead{color:#b9c6cf}
.sec--white .lead,.sec--sand .lead{color:var(--ink-2)}
.sec--sand-cheia .lead{color:#3d5666}
.sec--compacta{padding:clamp(38px,4vw,64px) 0}

.sechead{max-width:64ch;display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(30px,3.4vw,52px)}
.sechead--split{max-width:none;display:grid;grid-template-columns:1fr minmax(0,46ch);gap:34px;align-items:end}
.sechead--centro{margin-left:auto;margin-right:auto;text-align:center;align-items:center}

/* Entrada suave de seção. Só translada e desvanece: nada que
   segure a leitura de quem chega pelo celular em rede fraca.

   Duas decisões que parecem detalhe e não são:
   · a animação mora no .wrap, e não na própria <section>. Opacidade
     na seção apagaria o fundo dela junto, e a página inteira viraria
     um vazio da cor do body enquanto o observador não dispara;
   · tudo fica atrás de html.js. Sem JavaScript — ou com ele quebrado
     — nada some, porque a regra sequer existe.                      */
html.js .reveal > .wrap{opacity:0;transform:translateY(22px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
html.js .reveal.vis > .wrap{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal > .wrap{opacity:1;transform:none}
}

/* ============================================================
   ESTADOS DE SISTEMA (badges)
   Fora da paleta de marca de propósito: são informação funcional.
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;padding:5px 9px;line-height:1;white-space:nowrap}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge--disp{background:rgba(31,107,74,.12);color:var(--green)}
.badge--res{background:rgba(138,107,31,.13);color:var(--amber-sys)}
.badge--unid{background:rgba(8,57,85,.08);color:var(--ink-2)}
.badge--destaque{background:var(--navy);color:var(--sand)}
.badge--sobre-navy{background:rgba(197,194,179,.16);color:var(--sand)}

/* Aviso de protótipo / pendência do briefing. Aparece onde o dado
   ainda não foi homologado, para ninguém confundir demonstração
   com número aprovado pelo BV. */
.pend{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  border-left:3px solid var(--teal);background:rgba(31,122,140,.09);
  font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.pend b{color:var(--navy);display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.pend--escuro{background:rgba(31,122,140,.16);color:#b9c6cf;border-left-color:var(--teal-l)}
.pend--escuro b{color:var(--sand)}