/*
  AJUSTES EXCLUSIVOS DA VERSÃO MOBILE
  Este arquivo só é aplicado em telas com largura máxima de 760px.
  Faça aqui as próximas alterações visuais destinadas ao celular.
*/

/* Elementos opcionais para conteúdo diferente entre as versões */
.desktop-only{display:none!important}
.mobile-only{display:block!important}

/* Área reservada para os próximos ajustes solicitados na prévia mobile */

/* Abertura — ajustes solicitados na visualização de 395 px */
.responsive-site .hero h1{
  font-size:25.472px;
  line-height:1.16;
}

.responsive-site .hero .lead{
  font-size:13.64px;
  line-height:1.65;
}

.responsive-site .hero .eyebrow{
  font-size:10.68px;
}

/* Os botões passam a ser elementos posteriores às respectivas imagens */
.responsive-site .hero-grid>.buttons{
  display:flex!important;
  width:100%;
  justify-content:center;
}

.responsive-site .hero-grid>.buttons .btn{
  width:min(100%,320px);
}

.responsive-site .about-grid>.about-action{
  display:flex!important;
  justify-content:center;
  margin-top:-12px;
}

/* Manifesto — aproxima o texto da imagem somente no mobile */
.responsive-site .manifesto-copy{
  padding-top:2px;
}

/* Centralização uniforme dos botões de ação no mobile */
.responsive-site .buttons{
  display:flex!important;
  width:100%!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center;
}

.responsive-site a.btn{
  display:flex!important;
  width:min(100%,320px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center;
}

.responsive-site .section-cta,
.responsive-site .about-action{
  display:flex!important;
  width:100%!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center;
}

.responsive-site .reasons{
  text-align:center;
}

.responsive-site .reasons article{
  text-align:left;
}

.responsive-site .footer-grid>section{
  text-align:center;
}

.responsive-site .footer-grid>section img{
  margin-left:auto;
  margin-right:auto;
}

.responsive-site .footer-grid>section>a{
  display:inline-flex;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}

.responsive-site .footer-bottom{
  align-items:center;
  text-align:center;
}

.responsive-site .footer-bottom>div{
  display:flex;
  width:100%;
  justify-content:center;
  flex-wrap:wrap;
}
