/* Ajustes da home. Seja investidor: em telas baixas (notebook, celular menor) o título e os números seguem também a altura
   da tela e a faixa escura de baixo desce até a borda, para o número não ficar embaixo dela */
@media (max-height:820px){
  .invs .invs__title{font-size:min(clamp(54px,8.4vw,136px),13svh)}
  .invs .istat b{font-size:min(clamp(54px,12vw,190px),15svh)}
  .invs .tape--b{bottom:2%}
}

/* Aplicativo (home): imagem real do app Top Up (tela de login e treino), no lugar da tela desenhada em HTML */
.app__phone--shot{height:auto;width:min(80%,336px)}
.app__phone--shot img{transform:none;filter:drop-shadow(0 30px 40px rgba(11,11,12,.35))}

/* Lista de unidades no celular: "Ver no mapa" e "Mapa" dividem a primeira linha e o "Matricule-se" fica sozinho,
   na largura toda, em vez de 3 botões espremidos com o texto quebrado no meio ("MATRICULE-/SE") */
@media (max-width:520px){
  .locator--unified .unit__links{flex-wrap:wrap;gap:8px}
  .locator--unified .unit__links>*{flex:1 1 0;min-height:44px;white-space:nowrap}
  .locator--unified .unit__links .unit__go{flex:1 1 100%}
}

/* "A academia que nunca fecha" no celular: título → relógio → texto, um embaixo do outro (o "top" do layout de
   computador é zerado para o título não descer em cima do relógio); a lua/sol fica pequena, logo abaixo do
   cabeçalho e atrás do texto */
@media (max-width:700px){
  .day .day__head{position:relative;z-index:3;top:auto;left:auto}
  .day .day__clock{position:relative;z-index:2}
  .day .day__sun{display:none} /* enfeite: no celular não sobra lugar sem cobrir o cabeçalho ou o título; o céu que muda com a hora continua */
}

/* Telas bem estreitas (até 360px, ex.: celulares pequenos, Galaxy Fold dobrado com 280px): nada passa da borda */
@media (max-width:360px){
  .nums__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums dd{font-size:clamp(40px,17vw,64px)}
  .invp{grid-template-columns:minmax(0,1fr)}
  .footer__in{grid-template-columns:minmax(0,1fr)}
  .header__bar{gap:8px;padding-left:12px}
  .header__cta{padding-inline:12px}
  .section-title,.kicker,.lead{overflow-wrap:anywhere}
  /* títulos com palavra longa ("aplicativo!", "transparência", "Transformando") acompanham a largura: a animação
     separa as letras e a palavra não quebra */
  body main .section-title.display,body main .cta__title.display{font-size:clamp(24px,10.5vw,40px)}
}
@media (max-width:300px){
  .nums__in{grid-template-columns:minmax(0,1fr)}
  .header__logo img{width:88px;height:auto}
  .sim{grid-template-columns:minmax(0,1fr);padding-inline:16px}
  .sim>*,.sim__box,.sim__copy{min-width:0}
}