/* ============================================================
   Bruno e David — correções de tablet e celular (02/08/2026)

   Arquivo separado de propósito: o style-v4.css já está no cache
   dos visitantes e continua válido. URL nova = sem conflito.

   Escopo travado: só sobreposição e área segura. Nenhuma cor,
   grid, ordem, conteúdo ou tamanho de fonte foi alterado aqui.
   ============================================================ */

/* ---------------------------------------------------------
   1. Moldura do hero sobrepondo o CTA no celular

   Os rótulos verticais "BRASIL · 2026" e "BD / OFICIAL" são
   decorativos (aria-hidden). Em tela estreita eles caem em cima
   dos botões: medido em 371px, o CTA ocupa y 614–736 e os rótulos
   entram em y 705–816. Não bloqueiam o toque (pointer-events:none),
   mas sujam visualmente o botão principal do site.

   No desktop há folga lateral e o efeito editorial funciona —
   por isso some só no estreito, em vez de sumir sempre.
   --------------------------------------------------------- */
@media(max-width:900px){
  .hero__frame{display:none}
}

/* ---------------------------------------------------------
   2. Área segura do iPhone (notch e barra de gestos)

   O CSS não tinha nenhum env(safe-area-inset-*). O .mobile-menu
   é position:fixed com inset:0 e padding-bottom de 30px — num
   iPhone com barra de gestos (~34px) o último item do menu
   ("05 contratação") fica embaixo dela.

   Usa max() para nunca REDUZIR o respiro que já existia.
   --------------------------------------------------------- */
.mobile-menu{
  padding-bottom:max(30px, calc(30px + env(safe-area-inset-bottom)));
  padding-left:max(30px, calc(30px + env(safe-area-inset-left)));
  padding-right:max(30px, calc(30px + env(safe-area-inset-right)));
}

/* O cabeçalho encosta no topo; com notch, a marca fica por baixo dele. */
.site-header{padding-top:env(safe-area-inset-top)}

/* Barra de progresso é fixed no topo: acompanha o notch. */
.scroll-progress{top:env(safe-area-inset-top)}

/* ---------------------------------------------------------
   3. Respiro do rodapé em telas com barra de gestos
   --------------------------------------------------------- */
@media(max-width:780px){
  .footer__bottom{padding-bottom:max(0px, env(safe-area-inset-bottom))}
}

/* ---------------------------------------------------------
   4. Hero vertical no celular e tablet (02/08/2026)

   Abaixo de 780px o <picture> troca a composição de IA por uma
   FOTO REAL vertical da dupla — porque a foto deitada, numa
   janela em pé, mostrava só 25% da largura e cortava um dos dois.

   Dois ajustes que a troca exigiu:

   a) object-position: o 63% foi calibrado para a foto deitada,
      onde empurrava o enquadramento para a direita. Na vertical
      isso corta o integrante da esquerda. Centraliza.

   b) o overlay foi calibrado para a arte de IA, que já era bem
      escura. A foto real tem luz âmbar e uma camisa branca, então
      o texto do hero perdia contraste em cima dela. Escurece o
      suficiente para o título voltar a ler, sem apagar a foto.
   --------------------------------------------------------- */
@media(max-width:780px){
  .hero__media img{object-position:50% center}
  .hero__media:after{
    background:
      linear-gradient(0deg,#050505 4%,#030303b8 42%,#03030359 72%,#030303a6),
      linear-gradient(90deg,#030303a6,#03030340 55%,transparent 85%);
  }
}