/* ============================================================
   LAYOUT — Osy Caminhões
   Barra do grupo, cabeçalho, menu de gaveta, pílula flutuante,
   herói e rodapé.

   As proporções do topo são as mesmas dos outros três sites do
   grupo. Quem sai do site do Grupo Osy e cai aqui não pode
   sentir que trocou de empresa.
   ============================================================ */

/* Os dois vazios que o js/layout.js preenche não podem gerar caixa:
   position:sticky gruda dentro do pai, e um pai com a altura exata
   do cabeçalho não deixa percurso nenhum. Com display:contents o
   div some do layout e quem vale como pai passa a ser o body. */
#cabecalho,#rodape{display:contents}

/* ------------------------------------------------------------
   BARRA DO GRUPO
   Navegação entre os quatro sites. Fixa no alto: é o único lugar
   onde a pessoa troca de frente sem voltar ao institucional.
   ------------------------------------------------------------ */
.util{
  background:var(--navy-x);font-size:14px;letter-spacing:.03em;
  height:var(--altura-barra-grupo);position:fixed;top:0;left:0;right:0;z-index:61;
}
body{padding-top:var(--altura-barra-grupo)}
.util .wrap{display:flex;align-items:center;gap:20px;height:100%;flex-wrap:nowrap;overflow:hidden}
.util .tel{color:var(--sand);font-weight:700;white-space:nowrap}
.util .tel:hover{color:var(--white)}
.util .local{color:#7d94a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.util .local:hover{color:var(--sand)}
.util .frentes{display:flex;gap:2px;margin-left:auto;height:100%;flex:none}
.util .frentes a{display:flex;align-items:center;height:100%;padding:0 12px;
  color:#7d94a1;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s}
.util .frentes a:hover{color:var(--white)}
.util .frentes a.is{color:var(--white);border-bottom-color:var(--sand);font-weight:700}
@media (max-width:960px){.util .local{display:none}}
@media (max-width:700px){
  .util{font-size:13px}
  .util .frentes a{padding:0 9px}
}
@media (max-width:560px){
  .util .tel{display:none}
  .util{font-size:12.5px}
  .util .wrap{padding-left:12px;padding-right:12px}
  .util .frentes a{padding:0 7px;letter-spacing:0}
}

/* ------------------------------------------------------------
   CABEÇALHO
   ------------------------------------------------------------ */
header.site{
  position:sticky;top:var(--altura-barra-grupo);z-index:60;
  background:var(--navy);border-bottom:1px solid var(--line-d);
  transition:box-shadow .2s;
}
header.site.rolou{box-shadow:0 14px 34px -26px rgba(3,22,31,.95)}
header.site .wrap{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);
  height:var(--altura-header);flex-wrap:nowrap;transition:height .2s}
header.site.small .wrap{height:var(--altura-header-compacto)}

/* Regra 04: o descritor CAMINHÕES acompanha o logotipo em todas as
   páginas. Quem usa GRUPO OSY é o rodapé e a página institucional. */
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:34px;width:auto;max-width:none;flex:none;transition:height .2s}
header.site.small .brand img{height:30px}

nav.main{display:flex;align-items:center;gap:clamp(10px,1.1vw,17px);
  font-size:15.5px;font-weight:600;flex:0 0 auto;white-space:nowrap}
nav.main a{color:#b0c1cc;padding:7px 0;border-bottom:2px solid transparent;transition:color .15s}
nav.main a:hover{color:var(--white)}
nav.main a.on{color:var(--white);border-bottom-color:var(--sand);font-weight:700}

.hactions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:1 1 auto;
  justify-content:flex-end;min-width:0}
/* A busca cresce até apertar o botão, e o rótulo quebrava em duas
   linhas dentro de um cabeçalho de altura fixa. */
.hactions > .btn{white-space:nowrap;flex:none}

/* Busca rápida de código/modelo no topo. Some antes do menu porque
   a home e a página de estoque já têm busca própria e maior.

   Mesma peça do cabeçalho da Osy Implementos: uma caixa só, de
   40px, com a lupa dentro à esquerda e o campo ocupando o resto.
   Antes eram duas caixas coladas disputando largura com o menu, e
   o campo acabava espremido a ponto de cortar o rótulo. Agora ele
   tem base fixa e cresce ao receber o foco, que é quando a pessoa
   precisa ver o que digitou.

   O seletor do campo carrega o [type=search] de propósito: o
   componentes.css pinta todo input de branco com borda de 2px, e
   entra depois deste arquivo. Sem empatar a especificidade e
   ganhar no desempate, o campo do cabeçalho voltava a ser a
   caixinha branca que estourava a altura da barra. */
.hbusca{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(197,194,179,.28);
  min-width:0;flex:0 1 250px;
  transition:flex-basis .25s,background .18s,border-color .18s,box-shadow .18s}
.hbusca:hover{border-color:rgba(197,194,179,.5)}
.hbusca:focus-within{flex-basis:320px;background:rgba(255,255,255,.1);
  border-color:var(--sand);box-shadow:0 0 0 3px rgba(197,194,179,.16)}
.hlupa{flex:none;display:grid;place-items:center;padding:0;color:var(--sand);opacity:.8;
  transition:opacity .15s,color .15s}
.hlupa:hover{opacity:1;color:var(--white)}
.hbusca input[type=search]{flex:1;width:auto;min-width:0;height:100%;
  background:none;border:none;padding:0;color:var(--white);font:inherit;font-size:15px}
.hbusca input[type=search]::placeholder{color:#7d94a1}
.hbusca input[type=search]:focus{outline:none;border:none}
.hbusca input[type=search]::-webkit-search-cancel-button{display:none}

.social{width:40px;height:40px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(197,194,179,.28);color:var(--sand-l);transition:.15s}
.social:hover{background:var(--sand);color:var(--navy);border-color:var(--sand)}

/* ---- hambúrguer ---- */
.burger{display:none;width:46px;height:46px;flex:none;
  border:1px solid rgba(197,194,179,.3);place-items:center;padding:0}
.burger span{display:block;width:21px;height:2.5px;background:var(--sand-l);
  margin:4.5px auto;transition:transform .25s,opacity .18s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------------------
   GAVETA (menu de celular)
   ------------------------------------------------------------ */
.scrim{position:fixed;inset:0;background:rgba(3,22,31,.7);z-index:88;
  opacity:0;pointer-events:none;transition:opacity .28s}
.scrim.open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,90vw);background:var(--navy-d);
  z-index:90;transform:translateX(101%);transition:transform .3s cubic-bezier(.3,.8,.4,1);
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  border-left:3px solid var(--sand);
}
.drawer.open{transform:none}
.dtop{display:flex;align-items:center;gap:16px;padding:16px 22px;
  border-bottom:1px solid var(--line-d);position:sticky;top:0;background:var(--navy-d);z-index:2}
.dtop img{height:30px;width:auto}
.dclose{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(197,194,179,.3);color:var(--sand-l);font-size:21px;line-height:1;flex:none}
.dclose:hover{background:var(--sand);color:var(--navy);border-color:var(--sand)}

.dbusca{padding:16px 22px;border-bottom:1px solid var(--line-d);display:flex;gap:8px}
.dbusca input[type=search]{flex:1;width:auto;min-width:0;font:inherit;font-size:16px;padding:13px;
  background:var(--navy);border:1px solid rgba(197,194,179,.3);color:var(--sand-l)}
.dbusca input[type=search]:focus{outline:none;border-color:var(--sand)}
.dbusca button{background:var(--sand);color:var(--navy);padding:0 17px;font-weight:800;font-size:14.5px;flex:none}

.dnav{display:flex;flex-direction:column;padding:6px 0}
.dnav a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;font-size:18.5px;font-weight:700;color:var(--sand-l);
  border-bottom:1px solid rgba(197,194,179,.09)}
.dnav a:hover,.dnav a.on{background:var(--navy);color:var(--white)}
.dnav a.on{box-shadow:inset 3px 0 0 var(--sand)}
.dnav a small{font-size:13px;font-weight:500;color:#7d94a1}

.dfoot{margin-top:auto;padding:20px 22px;display:flex;flex-direction:column;gap:13px;
  border-top:1px solid var(--line-d)}
.dfoot .tel{font-size:19px;font-weight:800;color:var(--sand)}
.dfoot small{font-size:13px;color:#7d94a1;line-height:1.5}
.dfrentes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:4px}
.dfrentes a{padding:11px 6px;font-size:12.5px;font-weight:700;color:#93a9b5;
  border:1px solid rgba(197,194,179,.2);text-align:center}
.dfrentes a.is{color:var(--navy);background:var(--sand);border-color:var(--sand)}
.dfrentes .dgrupo{grid-column:1/-1;padding:12px 6px;margin-top:2px}
body.locked{overflow:hidden}

/* ------------------------------------------------------------
   PÍLULA FLUTUANTE
   Mesma peça dos sites irmãos, e agora com o mesmo conteúdo: o
   cartão é só o símbolo e o hambúrguer, e ao lado ficam os botões
   redondos de ação. A lista de links que morava dentro do cartão
   saiu — no Grupo Osy, na Implementos e na Componentes ela não
   existe, e quem troca de frente não pode encontrar um menu
   diferente aqui. O que os links faziam, a gaveta faz.
   ------------------------------------------------------------ */
.appbar{
  display:none;position:fixed;left:0;right:0;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  z-index:66;align-items:center;justify-content:center;gap:10px;
  /* A barra atravessa a tela inteira para centralizar o conjunto.
     Sem isto ela engoliria o clique de tudo o que passa por baixo
     dela na faixa inferior da página. */
  pointer-events:none;
}
.appbar > *{pointer-events:auto}
.abpill{display:flex;align-items:center;flex:none;
  background:var(--sand-l);color:var(--navy);border-radius:999px;padding:7px;
  box-shadow:0 14px 34px -10px rgba(3,22,31,.6)}
.abmenu{display:flex;align-items:center;gap:10px;padding:0 4px 0 0;color:var(--navy);
  border-radius:999px;flex:none}
.abmenu:active{transform:scale(.97)}
.abmark{width:40px;height:40px;border-radius:50%;background:var(--navy);
  display:grid;place-items:center;flex:none}
.abmark svg{width:21px;height:auto;display:block}
.ablines{display:grid;gap:4px;flex:none;padding:0 8px}
.ablines i{display:block;width:20px;height:2.5px;background:var(--navy);border-radius:2px;
  transition:transform .25s,opacity .18s}
.abmenu.on .ablines i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.abmenu.on .ablines i:nth-child(2){opacity:0}
.abmenu.on .ablines i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.abcirc{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:none;
  box-shadow:0 14px 34px -10px rgba(3,22,31,.6)}
.abcirc svg{width:22px;height:22px}
.abcirc.zap{background:var(--sand);color:var(--navy)}
/* `abcalc`, e nao `calc`: `.calc` ja e a calculadora de
   financiamento, um bloco de duas colunas em componentes.css.
   O botao redondo herdava dela o `grid-template-columns` —
   numa caixa de 54px a primeira coluna virava zero, e o icone
   escorregava para fora do circulo — e a `box-shadow`, que
   chega depois na ordem dos arquivos e vencia a daqui. */
.abcirc.abcalc{background:var(--navy-d);color:var(--sand-l);border:1px solid rgba(197,194,179,.3)}
.abcirc:active{transform:scale(.94)}

/* WhatsApp fixo só no computador: no celular quem faz esse papel é
   a pílula, e as duas juntas cobriam o preço no rodapé da ficha. */
.wafloat{position:fixed;right:22px;bottom:22px;z-index:64;display:flex;align-items:center;gap:10px;
  background:var(--sand);color:var(--navy);padding:13px 20px;font-weight:800;font-size:16px;
  box-shadow:0 16px 40px -18px rgba(3,22,31,.85)}
.wafloat:hover{background:var(--white)}
@media (max-width:860px){.wafloat{display:none}}

/* Fita de progresso da rolagem. Anda por scaleX de um filho, e não
   por width: transform não refaz layout. */
.progresso{position:fixed;inset:0 0 auto 0;height:3px;z-index:94;pointer-events:none;
  opacity:0;transition:opacity .25s}
.progresso.ativa{opacity:1}
.progresso i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--teal),var(--sand))}

/* ------------------------------------------------------------
   HERÓI
   ------------------------------------------------------------ */
.hero{position:relative;background:var(--navy);overflow:hidden;
  padding:clamp(44px,5.4vw,80px) 0 clamp(30px,3vw,44px)}
.hero .sym{right:-14%;top:-30%;width:min(880px,74vw)}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:var(--white)}
.hero h1 em{font-style:normal;color:var(--sand)}
.hero .lead{color:#b9c6cf;margin-top:24px}
.hero .btns{margin-top:30px}

/* A home abre em tela cheia: o herói ocupa a primeira tela
   inteira, descontadas a barra do grupo e o cabeçalho, com o
   texto no meio e o pátio apoiado embaixo. Em svh, e não em vh,
   porque no celular a barra do navegador entra na conta do vh e
   cortaria justamente o pátio. É min-height: tela baixa demais
   cresce em vez de espremer o texto. */
.hero--full{
  min-height:calc(100vh - var(--topo-fixo));
  min-height:calc(100svh - var(--topo-fixo));
  display:flex;flex-direction:column;
  padding-bottom:clamp(18px,2.4vw,34px);
}
.hero--full .wrap:not(.herogrid){margin-top:auto;margin-bottom:auto}

/* Duotone navy sobre a foto de pátio. O briefing pede foto tratada
   em duotone. (O briefing também proibia carrossel; o cliente pediu
   o dos banners em 22 de setembro de 2026 — ver .banners.) */
.heroarte{position:absolute;inset:0;z-index:0}
.heroarte img{width:100%;height:100%;object-fit:cover;object-position:52% 62%;
  filter:grayscale(1) contrast(1.06)}
.heroarte::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(140deg,rgba(8,57,85,.72) 0 52%,rgba(5,38,55,.93) 100%),
    linear-gradient(to top,var(--navy) 2%,rgba(8,57,85,.5) 46%,rgba(8,57,85,.72));
  mix-blend-mode:multiply}
.heroarte::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(140deg,transparent 0 51.5%,rgba(197,194,179,.13) 51.5% 54.5%,transparent 54.5%)}

.hero--interno{padding:clamp(38px,4.4vw,64px) 0 clamp(34px,3.6vw,52px)}
.hero--interno h1{font-size:clamp(32px,4.6vw,64px);line-height:1.04;letter-spacing:-.034em;font-weight:900;text-wrap:balance}

/* migalha */
.crumb{font-size:13.5px;color:#7d94a1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb a:hover{color:var(--sand)}
.crumb span{opacity:.5}
.crumb--claro{color:var(--ink-3)}
.crumb--claro a:hover{color:var(--navy)}

/* ------------------------------------------------------------
   RODAPÉ
   Regra 04: aqui o logotipo é GRUPO OSY.
   ------------------------------------------------------------ */
footer.site{background:var(--navy-d);color:var(--sand-l);position:relative;overflow:hidden;
  padding:clamp(48px,5vw,76px) 0 0}
footer.site .fsym{position:absolute;right:-8%;bottom:-42%;width:min(560px,58vw);
  opacity:.045;color:var(--sand);pointer-events:none}
footer.site .fsym svg{width:100%;height:auto}
footer.site .wrap{position:relative;z-index:1}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(26px,3vw,48px);
  padding-bottom:44px}
.fbrand img{height:52px;width:auto;margin-bottom:18px}
.fbrand p{color:var(--sand);font-size:14.5px;max-width:34ch}
.fbrand .fass{font-family:var(--fb);font-size:14px;line-height:1.4;margin-top:14px;color:var(--sand-l)}
footer.site h4{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
  margin-bottom:16px;font-weight:800}
footer.site ul li{margin-bottom:10px;font-size:15.5px;color:#a8bac5}
footer.site ul li a:hover{color:var(--white)}
footer.site .fcnpj{font-size:13px;color:#6f8794;margin-top:16px;line-height:1.5}
.fredes{display:flex;gap:8px;margin-top:16px}
.fredes a{width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(197,194,179,.25);color:var(--sand-l)}
.fredes a:hover{background:var(--sand);color:var(--navy);border-color:var(--sand)}

.flegal{border-top:1px solid var(--line-d);padding:20px 0 26px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#7d94a1}
.flegal a:hover,.flegal button:hover{color:var(--sand)}
.flegal button{text-decoration:underline;font-size:inherit}

/* ------------------------------------------------------------
   COOKIES (LGPD, item 10)
   ------------------------------------------------------------ */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:92;background:var(--navy-x);
  border-top:2px solid var(--sand);transform:translateY(110%);transition:transform .35s;
  padding:16px 0}
.cookie.up{transform:none}
.cookie .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cookie p{flex:1 1 340px;font-size:14.5px;color:#b9c6cf;margin:0}
.ckpanel{position:fixed;inset:0;z-index:96;background:rgba(3,22,31,.72);display:none;
  place-items:center;padding:20px}
.ckpanel.open{display:grid}
.ckbox{background:var(--white);color:var(--ink);max-width:560px;width:100%;padding:28px;
  max-height:88vh;overflow:auto}
.ckbox h2{font-size:24px;font-weight:900;letter-spacing:-.02em;margin-bottom:8px}
.ckbox > p{font-size:15px;color:var(--ink-2);margin-bottom:18px}
.ckopt{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:14.5px}
.ckopt b{display:block;margin-bottom:2px}
.ckopt input{margin-top:4px;accent-color:var(--teal);width:18px;height:18px;flex:none}
.ckacoes{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

/* ------------------------------------------------------------
   RESPONSIVO DO TOPO
   ------------------------------------------------------------ */
@media (max-width:1400px){.social{display:none}}
@media (max-width:1120px){.hbusca{display:none}}
@media (max-width:980px){nav.main{gap:14px;font-size:15px}}
@media (max-width:900px){
  nav.main{display:none}
  .burger{display:grid}
  .hactions{gap:8px}
}
@media (max-width:860px){
  .appbar{display:flex}
  body{padding-bottom:92px}
}
@media (min-width:861px){
  .appbar{display:flex;bottom:calc(22px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:620px){
  .fcols{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1/-1}
}
@media (max-width:560px){
  .hactions > .btn{display:none}
  .d1{font-size:clamp(38px,10vw,58px)}
  .sec{padding:44px 0}
  .btn{padding:14px 20px;font-size:15.5px}
  .btns .btn{flex:1 1 auto;min-width:0}
  .sechead--split{grid-template-columns:1fr}
}
@media (max-width:420px){
  .brand img{height:30px}
  .fcols{grid-template-columns:1fr}
  .abcirc{width:50px;height:50px}
}

/* ============================================================
   HERÓI DA HOME — DUAS COLUNAS, COM O SIMULADOR FLUTUANTE
   ------------------------------------------------------------
   O que havia antes: a chamada em quatro linhas enormes sobre
   navy chapado, ocupando a tela inteira sozinha, e metade
   direita vazia. Era o site que o cliente menos gostou, e o
   motivo aparece numa olhada — a primeira tela de uma loja de
   caminhões não mostrava caminhão nenhum e não oferecia nada
   para fazer.

   Agora a mesma tela faz três coisas:

     · o CAMPO DA MARCA, do brand book, entra no lugar do azul
       chapado. A cunha de 50° dá geometria e direção, e cai do
       lado direito, onde antes não havia nada;

     · a CHAMADA encolhe um degrau e passa a dividir a largura,
       em vez de atravessar a tela;

     · o SIMULADOR ocupa a direita. É a pergunta que o comprador
       de caminhão faz primeiro — quanto cabe por mês — e agora
       ela é respondida na primeira tela, sem cadastro e sem
       trocar de página.
   ============================================================ */

/* O campo da marca. `cover` e não `contain`: a cunha precisa
   sangrar pela borda, como sangra em todas as peças impressas
   do brand book. */
.herofundo{position:absolute;inset:0;z-index:0;
  background:var(--navy) url("../img/fundo-marca.webp") center right/cover no-repeat}
/* Um véu discreto só onde o texto mora. Sem ele, a chamada
   branca esbarra na parte clara da cunha em telas largas. */
.herofundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(5,38,55,.82) 0 38%,rgba(5,38,55,.38) 62%,rgba(5,38,55,0) 100%)}

.hero--full .herogrid{position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:auto;margin-bottom:auto;padding-block:clamp(20px,3vh,44px)}

/* A chamada cede um degrau: com o simulador ao lado ela não
   precisa mais carregar a tela sozinha, e quatro linhas de
   112px empurravam os botões para fora da dobra em notebook. */
.hero--full .herotexto .d1{font-size:clamp(38px,3.5vw + .6vh,68px);line-height:.98}
.hero--full .herotexto .lead{margin-top:20px;max-width:46ch}
.hero--full .herotexto .btns{margin-top:26px}

/* ------------------------------------------------------------
   O CARTÃO DO SIMULADOR
   Claro sobre o navy: é o único bloco branco da primeira tela,
   e é para onde o olho vai depois da chamada. Essa é a ordem
   que se quer — a marca fala, e logo abaixo há o que fazer.
   ------------------------------------------------------------ */
.simcard{background:var(--white);color:var(--ink);
  padding:clamp(20px,1.9vw,30px);box-shadow:0 34px 70px -34px rgba(3,22,31,.85);
  display:flex;flex-direction:column;gap:clamp(12px,1.3vh,18px);
  border-top:4px solid var(--yellow)}
.simcard[hidden]{display:none}
/* Pátio vazio: o cartão não aparece, e a grade volta a uma
   coluna para a chamada não ficar espremida ao lado de um
   espaço em branco. Quem põe a classe é o js/home.js. */
.herogrid--so-texto{grid-template-columns:minmax(0,1fr)}

.simcard__selo{font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal)}
.simcard__titulo{font-size:clamp(19px,1.5vw,24px);line-height:1.15;color:var(--navy);
  font-weight:900;letter-spacing:-.01em}

.simcampo{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.simcampo__rotulo{font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.simcampo__valor{font-size:19px;font-weight:900;color:var(--navy);text-align:right}
.simcampo input[type="range"]{grid-column:1/-1;width:100%;margin:2px 0 0;
  accent-color:var(--teal);cursor:pointer}

.simprazos{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.simprazos button{flex:1 1 0;min-width:54px;padding:9px 4px;border:2px solid var(--line);
  background:var(--white);color:var(--ink-2);font-weight:800;font-size:14.5px;
  transition:background .15s,border-color .15s,color .15s;cursor:pointer}
.simprazos button:hover{border-color:var(--sand-d)}
.simprazos button.on{background:var(--navy);border-color:var(--navy);color:var(--sand)}

.simsaida{background:var(--sand-l);padding:14px 16px;display:grid;gap:2px}
.simsaida__rotulo{font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.simsaida__valor{font-size:clamp(30px,2.7vw,40px);font-weight:900;color:var(--navy);
  line-height:1;letter-spacing:-.02em}
.simsaida__valor small{font-size:.45em;font-weight:800;margin-right:4px;vertical-align:.35em}
.simsaida__nota{font-size:12.5px;color:var(--ink-3);margin-top:4px}

.simcard__cta{width:100%;justify-content:center;text-align:center}
.simcard__legal{font-size:11px;line-height:1.45;color:var(--ink-3)}

/* ------------------------------------------------------------
   UMA COLUNA
   O corte é 1000px e não 860: abaixo disso a chamada e o cartão
   ficam com menos de 400px cada, e o cartão tem quatro campos
   e uma parcela de 40px para caber.
   ------------------------------------------------------------ */
@media (max-width:1000px){
  .hero--full .herogrid{grid-template-columns:1fr;gap:clamp(22px,3.4vh,34px)}
  .hero--full .herotexto .d1{font-size:clamp(34px,7.4vw,52px)}
  .hero--full .herotexto .lead{max-width:52ch;margin-top:16px}
  /* Aperta o bloco de texto para o cartao ESPIAR na primeira
     tela. Um simulador que so aparece depois de rolar nao e
     mais a primeira coisa que a pessoa ve — e era esse o
     pedido. A borda amarela no topo dele e o que chama o
     dedo para baixo. */
  .hero--full .herotexto .btns{margin-top:20px}
  .hero--full .herotexto .heronota{margin-top:14px}
  /* No celular o campo da marca vira faixa vertical: a cunha em
     cima, o campo limpo embaixo, onde o cartão mora. */
  .herofundo{background-position:72% top}
  .herofundo::after{background:linear-gradient(to bottom,rgba(5,38,55,.72) 0 44%,rgba(5,38,55,.9) 100%)}
  /* O pátio sai: com o cartão na tela, ele empurraria a
     parcela para fora da dobra, que é justamente o que o
     cartão veio resolver. */
  .hero--full .heropatio{display:none}
}