/* ===== Ajustes mobile (correções finais / consolidado) ===== */
/* 1) régua de marcas maior e legível no mobile */
@media(max-width:760px){
  .hero-ruler{border-radius:12px}
  .hero-ruler a{flex:1 0 33.33%;padding:20px 12px}
  .hero-ruler img{height:42px;max-width:90%;opacity:.95}
}
@media(max-width:480px){
  .hero-ruler a{flex:1 0 50%;padding:22px 14px}
  .hero-ruler img{height:46px;max-width:82%}
}
@media(max-width:400px){
  .hero-ruler img{height:32px}
}
/* 2) atleta mais escuro no mobile, pra nao atrapalhar a leitura */
@media(max-width:900px){
  .hero-bg::after{background:linear-gradient(180deg,rgba(4,16,14,.62) 0%,rgba(4,16,14,.86) 32%,rgba(4,16,14,.96) 56%,var(--bg) 80%)}
}
/* 4) LATAM: respiro simetrico dos dois lados no mobile */
@media(max-width:760px){
  .latam .wrap{padding-left:22px;padding-right:22px}
  .map-card{padding:26px 22px}
  .latam-row{padding-left:0;padding-right:0}
  .latam-grid{gap:34px}
}
/* 5) correção real do overflow horizontal: números "B2B+B2C" e "LATAM" não cabiam
   em 2 colunas em telas pequenas e estufavam a página (por isso existia o
   band-aid overflow-x:hidden). Agora a grade colapsa e o texto pode quebrar. */
@media(max-width:480px){
  .map-stats{grid-template-columns:1fr}
  .big.sm{font-size:32px}
  .map-card .big{font-size:44px}
  .dep-photo .ph-init{font-size:56px}
}
/* 6) alvos de toque maiores no mobile (ícones sociais e chips de marca) */
@media(max-width:760px){
  .socials a{width:44px;height:44px}
  .chip span{padding:11px 16px}
}
/* 7) rede de segurança para imagens sem classe própria */
img{max-width:100%}
/* 8) menu mobile: trava o scroll do fundo e limita a altura ao viewport */
@media(max-width:1100px){
  .nav-links{max-height:calc(100vh - 78px);overflow-y:auto}
}
body.nav-open{overflow:hidden}
html,body{max-width:100%;overflow-x:hidden}