/* ============================================================
   PÁGINAS — Osy Caminhões
   O que é de uma tela só: herói da home, faixas institucionais,
   texto corrido, contato e o painel de cadastro.
   ============================================================ */

/* ============================================================
   HOME
   ============================================================ */
.heronota{margin-top:26px;font-size:15px;color:#8fa4b0;letter-spacing:.02em}
.heronota b{color:var(--sand);font-weight:800;font-size:17px}

/* Pátio do herói: fileira de silhuetas, no lugar da foto que
   ainda vai ser fotografada. Entram deslizando de baixo, uma
   depois da outra, e param. Sem laço: movimento perpétuo atrás
   de texto cansa e come bateria no celular. */
.heropatio{
  position:relative;z-index:1;margin-top:clamp(30px,4vw,58px);
  display:flex;align-items:flex-end;gap:clamp(6px,1.2vw,22px);
  padding:0 var(--px);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8% 92%,transparent);
}
.heropatio .hp{flex:1 1 0;min-width:0;color:var(--sand);opacity:0;
  transform:translateY(26px);
  animation:patioEntra .7s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(.12s * var(--d) + .25s)}
.heropatio .hp:nth-child(even){color:#2b6d86}
.heropatio svg{width:100%;height:auto;display:block;opacity:.3}
.heropatio .hp:nth-child(odd) svg{opacity:.22}
@keyframes patioEntra{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .heropatio .hp{opacity:1;transform:none;animation:none}
}
@media (max-width:820px){
  .heropatio .hp:nth-child(n+5){display:none}
}
@media (max-width:560px){
  .heropatio{gap:4px}
  .heropatio .hp:nth-child(n+4){display:none}
}

/* A faixa de busca cavalga a quebra entre o herói e a seção
   seguinte: é o corte diagonal virando função, e não enfeite. */
.secbusca{background:linear-gradient(to bottom,var(--navy) 0 50%,var(--sand-l) 50% 100%);
  padding:0 0 clamp(10px,1.4vw,20px)}
.secbusca .wrap{padding-top:0}

.faixafin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:clamp(28px,3.4vw,60px);align-items:center}
.faixafin-num{display:grid;gap:2px}
.faixafin-num div{display:flex;align-items:baseline;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line-d)}
.faixafin-num b{font-size:40px;font-weight:900;letter-spacing:-.04em;color:var(--sand);
  line-height:1;flex:none;width:52px}
.faixafin-num span{font-size:15.5px;color:#b9c6cf;line-height:1.35}
@media (max-width:860px){.faixafin{grid-template-columns:1fr}}

.fechamento{display:flex;justify-content:space-between;align-items:center;
  gap:clamp(24px,3vw,50px);flex-wrap:wrap}
.fechamento .impacto{flex:1 1 300px}
.fechamento > div{flex:1 1 320px}

/* ============================================================
   TEXTO CORRIDO
   ============================================================ */
.texto p{font-size:18px;line-height:1.68;color:var(--ink-2);margin-bottom:18px;max-width:72ch}
.texto p b{color:var(--navy);font-weight:700}
.texto h2{font-size:clamp(21px,2vw,27px);font-weight:800;letter-spacing:-.022em;
  color:var(--navy);margin:34px 0 12px}
.texto h2:first-child{margin-top:0}
.texto--legal p{font-size:16.5px}
.texto--legal button{color:var(--teal);text-decoration:underline;font:inherit}

.legal{font-size:14px;line-height:1.65;color:#a8bac5;max-width:88ch}
.legal b{color:var(--sand);font-weight:700}

/* Blocos empilhados da ficha do caminhão */
.bloco{background:var(--white);border:1px solid var(--line);padding:clamp(20px,2.4vw,32px);
  margin-top:clamp(16px,1.8vw,24px)}
.bloco > .d3{color:var(--navy)}
.bloco-lead{margin-top:clamp(26px,3vw,40px);padding-top:clamp(24px,2.6vw,34px);
  border-top:2px solid var(--line)}
.pos-calc{background:var(--white);border:1px solid var(--line);border-top:0;
  padding:clamp(22px,2.6vw,36px)}
.fichacol{min-width:0}

/* ============================================================
   CONTATO
   ============================================================ */
.contatogrid{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:clamp(20px,2.4vw,38px);
  align-items:start}
.formbox{background:var(--white);border:1px solid var(--line);padding:clamp(22px,2.6vw,36px)}
.formbox .d3{color:var(--navy)}
.canais{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--topo-fixo) + 16px)}
.canal{background:var(--white);border:1px solid var(--line);padding:20px 22px}
.canal h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-bottom:10px}
.canal p{font-size:15px;color:var(--ink-2);margin-bottom:14px;line-height:1.45}
/* `minmax(0,1fr)`, e não `1fr`: em grid, `1fr` guarda um
   `min-width:auto` que impede a coluna de encolher abaixo do
   conteúdo. Um e-mail longo — comercial.rioverde@osycaminhoes.com.br
   — empurrava a coluna e vazava para fora do card. É o mesmo
   conserto que `.unid dl` já tinha. */
.canal dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:14.5px;margin-bottom:14px}
.canal dt{color:var(--ink-3);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;padding-top:3px}
/* Sem isto, a coluna encolhe mas a palavra não quebra, e o
   e-mail passa por cima da borda. Os dois andam juntos. */
.canal dd{color:var(--ink-2);line-height:1.4;overflow-wrap:anywhere}
.canal dd a:hover{color:var(--teal)}
.canal--destaque{border-top:4px solid var(--navy)}
@media (max-width:940px){
  .contatogrid{grid-template-columns:1fr}
  .canais{position:static}
}

/* ============================================================
   BANNERS DA HOME
   ------------------------------------------------------------
   O carrossel da primeira tela, pedido pelo cliente em 22 de
   setembro de 2026 (quem monta é js/home.js; as artes vêm do
   painel). O briefing proibia carrossel; foi decisão do
   cliente, tomada sabendo disso.

   A ARTE NUNCA É CORTADA. A primeira versão fixava a altura na
   da tela e recortava a imagem para caber (`object-fit:cover`).
   Conferido em homologação no mesmo dia, o cliente reprovou: em
   notebook com o Windows em escala de 125%, a tela útil fica
   perto de 1536 × 616, e uma arte 2:1 perdia um quinto da
   altura — justamente onde a arte de banner põe texto. Agora o
   banner ocupa a largura inteira e a altura é a da própria
   arte. Em tela baixa ele passa um pouco da dobra; é o preço de
   mostrar a arte inteira, e foi a escolha do cliente.

   OS BANNERS FICAM EMPILHADOS NA MESMA CÉLULA DE GRADE, e não
   em `position:absolute`: assim a altura do carrossel é a do
   banner mais alto, e a página não pula na troca. Banner mais
   baixo que o vizinho fica centralizado, com a própria arte
   desfocada preenchendo a sobra.

   Só a opacidade muda, em 1,2 s. `visibility` acompanha, com
   atraso na saída, para o banner escondido não receber clique.
   ============================================================ */
.banners{position:relative;overflow:hidden;background:var(--navy-d)}
.banners[hidden],.banners__controles[hidden]{display:none}
.banners__palco{display:grid}

.banner{grid-area:1/1;position:relative;overflow:hidden;margin:0;
  display:flex;align-items:center;
  opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s}
.banner.on{opacity:1;visibility:visible;transition:opacity 1.2s ease,visibility 0s}
.banner picture{position:relative;z-index:1;display:block;width:100%}
.banner__img{display:block;width:100%;height:auto}
/* A sobra de 60 px é maior que o desfoque: com menos, a borda
   dele puxa o transparente de fora e aparece uma faixa escura.
   `max-width:none` desfaz o `img{max-width:100%}` da base, que
   encurtava o fundo e deixava a mesma faixa do lado direito. */
.banner__fundo{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);
  max-width:none;object-fit:cover;filter:blur(18px) brightness(.6)}

/* Pontos e pausa, centralizados no pé. O botão tem 24 px para o
   dedo acertar; o ponto desenhado é menor, por dentro dele. */
.banners__controles{position:absolute;left:0;right:0;bottom:clamp(10px,1.6vw,22px);z-index:3;
  display:flex;justify-content:center;align-items:center;gap:10px}
.banners__pontos{display:flex;gap:2px}
.banners__pontos button,.banners__pausa{appearance:none;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;background:transparent;color:var(--white)}
.banners__pontos button{width:24px;height:24px}
.banners__pontos button::before{content:"";width:10px;height:10px;border-radius:50%;
  border:2px solid currentColor;box-shadow:0 0 0 1px rgba(3,22,31,.4);box-sizing:border-box}
.banners__pontos button[aria-current="true"]::before{background:currentColor}
.banners__pausa{width:30px;height:30px;border-radius:50%;background:rgba(3,22,31,.55)}
.banners__pausa::before{content:"";width:9px;height:11px;box-sizing:border-box;
  border-left:3px solid currentColor;border-right:3px solid currentColor}
.banners__pausa.parado::before{width:0;height:0;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.banners__pontos button:focus-visible,.banners__pausa:focus-visible{outline:2px solid var(--sand);outline-offset:2px}

/* CELULAR. Com arte de celular (1080 × 1920), é ela que aparece,
   inteira, e o fundo desfocado da larga nem é baixado (imagem
   `lazy` com display:none não carrega). Sem ela, a larga aparece
   inteira também.

   A pílula flutuante do celular (.appbar) ocupa o pé da tela, e
   a arte em pé termina perto dali: os pontos subiam para baixo
   dela. Sobem acima quando há arte em pé; na faixa 2:1 o banner
   termina bem antes do pé da tela, e eles ficam embaixo. */
@media (max-width:760px){
  .banner--com-celular .banner__fundo{display:none}
  .banners__controles{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .banners--so-largas .banners__controles{bottom:6px}
}