/* ============================================================
   HOME
   O herói abre em tela cheia: barra do grupo + cabeçalho + herói
   somam uma viewport, então a home entra inteira, sem corte.

   O problema que isto resolve: empilhado numa coluna só, o herói
   somava ~740px (texto + busca + números) e não cabia em notebook,
   onde sobram ~535px depois da barra do navegador e da do Windows.
   Espremer o texto até caber deixava tudo ilegível.

   A saída é a mesma do site da Osy Implementos: duas colunas. O
   texto fica à esquerda, a busca à direita, e o que era soma vira
   máximo — a altura cai sem encolher letra nenhuma. Abaixo de
   1081px não há largura para duas colunas, então volta a empilhar
   e aí sim é o ritmo vertical que cede.

   Carrega depois de refinamentos.css de propósito: as medidas daqui
   precisam vencer as camadas v20/v21.
   ============================================================ */

/* `svh` e não `vh`: no celular a barra do navegador entra na conta do
   `vh` e o herói nasceria mais alto que a tela visível.               */
/* O HEROI PASSA POR BAIXO DA NAVBAR

   A navbar fica transparente enquanto se esta no heroi (ver
   `body.no-heroi` em css/refinamentos.css). Para transparente
   valer alguma coisa, tem de haver imagem atras dela — e nao
   havia: a navbar e `sticky`, ocupa lugar no fluxo, e o heroi
   comecava depois. Transparente, apareceria o fundo da pagina.

   A margem negativa sobe o heroi para debaixo da navbar, e o
   `padding-top` devolve o espaco por dentro, para a chamada
   nao encostar no menu. A altura cresce na mesma medida: o
   heroi continua ocupando a tela toda menos a barra do grupo.

   So a home muda — `hero--photo` existe so nela. */
/* O HEROI PASSA POR BAIXO DA NAVBAR

   A navbar fica transparente enquanto se esta no heroi (ver
   css/refinamentos.css). Para transparente valer alguma coisa
   tem de haver imagem atras dela — e nao havia: a navbar e
   `sticky`, ocupa lugar no fluxo, e o heroi comecava depois.
   Transparente, apareceria o fundo da pagina.

   A margem negativa sobe o heroi para debaixo da barra; o
   `padding-top` do `.wrap` devolve o espaco por dentro, para a
   chamada nao encostar no menu. A altura cresce na mesma
   medida: o heroi continua ocupando a tela menos a barra do
   grupo.

   O `padding-top` e devolvido em DOIS lugares — aqui e no
   bloco de celular, mais abaixo. Esquecer o segundo foi o que
   fez a chamada subir para tras do logotipo na primeira
   tentativa: a regra de celular sobrescreve esta inteira. */
.hero--photo {
  margin-top: calc(-1 * var(--altura-header));
  min-height: calc(100svh - var(--altura-barra-grupo));
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 0;
}
.hero--photo > .wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--altura-header) + clamp(14px, 2.4vh, 40px));
  padding-bottom: clamp(8px, 1.1vh, 28px);
}

/* ---------- duas colunas, a partir de 1081px ---------- */
@media (min-width: 1000px) {
  .hero--photo > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    column-gap: clamp(30px, 3.6vw, 60px);
    align-content: center;
  }
  /* Colocação explícita: o HTML segue na ordem de leitura e quem monta
     as colunas é o grid, sem div de embrulho no meio.                 */
  .hero--photo .eyebrow { grid-area: 1 / 1; }
  .hero--photo .d1      { grid-area: 2 / 1; }
  .hero--photo .lead    { grid-area: 3 / 1; }
  .hero--photo .btns    { grid-area: 4 / 1; }
  .hero--photo .finder  { grid-area: 1 / 2 / 5 / 3; align-self: center; margin-top: 0; }

  /* Com a busca ao lado sobra altura, então o display volta a ser
     display: preso à largura, como no desenho original, e não mais
     à altura da tela.                                               */
  /* Um degrau abaixo do que era (52/4.6vw/88). A chamada
     continua sendo a primeira coisa que se le, e sobra mais
     fundo visivel ao redor dela — que era o pedido. */
  .hero--photo .d1 { font-size: clamp(44px, 3.9vw, 76px); }
  /* a coluna já limita a medida; o max-width evita que em monitor
     largo a linha estique além do confortável de leitura.           */
  .hero--photo .lead { margin-top: clamp(14px, 1.8vh, 26px); max-width: 40ch;
                       font-size: clamp(17px, 1.25vw, 20px); }
  .hero--photo .btns { margin-top: clamp(18px, 2.4vh, 30px) !important; }
}

/* ---------- coluna única: 861px a 1080px ---------- */
/* Sem largura para duas colunas, é o ritmo vertical que cede.        */
@media (min-width: 861px) and (max-width: 999px) {
  .hero--photo .d1 { font-size: clamp(36px, 2.6vw + 1.3vh, 90px); }
  .hero--photo .lead { margin-top: clamp(9px, 1.4vh, 26px); }
  .hero--photo .btns { margin-top: clamp(12px, 1.8vh, 30px) !important; }
  .hero--photo .finder { margin-top: clamp(12px, 2vh, 44px); }
}

/* ---------- aperto do miolo, válido nos dois desktops ---------- */
/* Só a vertical encolhe. O recuo lateral é o que separa um número do
   outro e o que afasta o texto da borda da caixa: mexer nele junta os
   rótulos da faixa de números.                                       */
@media (min-width: 861px) {
  .hero--photo .fbody { padding: clamp(12px, 1.6vh, 22px) 22px; }
  .hero--photo .fchips { margin-top: clamp(7px, 1.1vh, 12px); }
  .hero--photo .ftab { padding-top: clamp(8px, 1.1vh, 16px); padding-bottom: clamp(8px, 1.1vh, 16px); }
}

/* ---------- celular ---------- */
/* Aqui tela cheia é altura mínima, não prisão: o conteúdo não cabe em
   844px e forçá-lo deixaria o texto ilegível. Preenche e cresce.     */
@media (max-width: 860px) {
  .hero--photo > .wrap {
    justify-content: flex-start;
    /* + a altura da navbar, pelo mesmo motivo da regra geral:
       o heroi comeca debaixo dela. */
    padding-top: calc(var(--altura-header) + clamp(20px, 4vh, 44px));
    padding-bottom: 28px;
  }
}

/* ---------- a pílula flutuante cede o herói ---------- */
/* Quem marca `no-heroi` é o go()/scroll em js/navegacao.js. A pílula
   repete busca, WhatsApp e menu, que o herói já tem à vista, e ficaria
   justo sobre a faixa de números agora que o herói ocupa a tela toda. */
body.no-heroi .appbar { opacity: 0; visibility: hidden; pointer-events: none; }
.appbar { transition: opacity .22s ease, visibility .22s ease; }

/* ============================================================
   ACABAMENTO DO HERÓI
   Aproxima a home do desenho da Osy Implementos sem trocar a
   identidade daqui: lá o campo é o teal e um fundo de linhas,
   aqui é o amarelo e o vídeo do caminhão. O que se empresta é o
   acabamento — o card flutuante, os selos e a contenção dos
   números —, não a paleta.
   ============================================================ */

/* ---------- a busca vira um card que flutua ---------- */
/* Era uma lâmina reta pousada sobre a foto, sem nada que a
   separasse dela. Ganha raio, sombra funda e uma borda clara: o
   mesmo recurso do card do mini-guia da Implementos. O raio é a
   exceção do herói — os cards de conteúdo abaixo seguem retos. */
.hero--photo .finder{
  position:relative;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 42px 90px -38px rgba(0,0,0,.9), 0 6px 18px -10px rgba(0,0,0,.5);
}
/* A aba ativa tem fundo proprio e quina reta. Como o card ficou com
   overflow visivel (para a etiqueta poder flutuar por fora), essa quina
   escapava por cima do canto arredondado. As abas das pontas passam a
   acompanhar o raio.                                                  */
.hero--photo .ftabs{border-radius:9px 9px 0 0}
.hero--photo .ftab:first-child{border-top-left-radius:9px}
.hero--photo .ftab:last-child{border-top-right-radius:9px}
.hero--photo .fbody{border-radius:0 0 9px 9px}

/* Etiqueta pousada ACIMA do card, transbordando a borda, como o
   "Três perguntas" de lá. Fora do card, e nao na quina de dentro:
   por dentro ela empurrava so a primeira aba e desalinhava a fileira. */
.finder-selo{
  position:absolute;top:-30px;left:18px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px 7px 11px;
  background:var(--navy);color:var(--cream);
  border-radius:999px;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.85);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.finder-selo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow)}

/* ---------- selos sobre a foto ---------- */
/* Pastilha escura com desfoque e um ponto na frente: e o mesmo
   selo que a Implementos usa para dizer o que esta no lugar da
   midia. Aqui ele assume o video do heroi.                     */
/* So a pista de rolagem: o selo do video, que na Implementos fica
   embaixo dos numeros, nao cabe aqui — o heroi fecha em uma tela e
   ele caia justo sobre a faixa de numeros.                        */
.pista-role{
  position:absolute;bottom:14px;right:var(--px);z-index:4;
  display:flex;align-items:center;gap:9px;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);pointer-events:none;
}
.pista-role::after{content:"";width:1px;height:26px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}

/* ---------- o texto respira ---------- */
@media (min-width:1000px){
  /* a medida de leitura estava esticando por cima da foto clara */
  .hero--photo .lead{max-width:38ch}
  /* veu um pouco mais firme do lado do texto: e o que deixa o
     display legivel sobre o ceu claro do fim da foto            */
  .hero--photo::after{
    background:linear-gradient(90deg,var(--navy-d) 0 4%,rgba(9,32,45,.86) 26%,rgba(9,32,45,.52) 58%,rgba(9,32,45,.12) 100%);
  }
}