/* ==========================================================================
   responsivo.css - ajustes por breakpoint
   Breakpoints herdados do projeto original:
     - ate 1024px .... tablet
     - ate 767px ..... celular
   Este arquivo deve ser sempre o ULTIMO CSS carregado.
   ========================================================================== */

/* ==========================================================================
   TABLET - ate 1024px
   ========================================================================== */
@media (max-width: 1024px) {

  /* ---- Utilitarios ---- */
  .apenas-desktop { display: none; }

  /* ---- Hero ---- */
  .hero {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 100px 0 0;
    /* No original a imagem de fundo e removida no tablet */
    background-image: none;
  }

  .hero__conteudo {
    justify-content: center;
    align-items: flex-start;
    width: 90%;
    margin-left: 0;
  }

  .hero__titulo { font-size: 36px; }

  /* ---- Sobre ---- */
  .sobre {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 100px 0 0;
    background-image: none;
  }

  .sobre__interno { flex-direction: column; }

  .sobre__midia { flex: none; padding: 0; }

  .sobre__conteudo {
    flex: none;
    align-items: flex-start;
    width: 90%;
    margin-right: 0;
  }

  .sobre__titulo { font-size: 36px; }

  .sobre__pilares { flex-wrap: wrap; }

  /* ---- Principais lutas ---- */
  .lutas { border-radius: 50px 0 0 0; }
  .lutas__titulo { font-size: 30px; }

  /* ---- Projetos ---- */
  .projetos {
    padding: 100px 0 0;
  }

  .projetos__interno {
    flex-direction: column;
    align-items: center;
  }

  .projetos__carrossel {
    flex: none;
    width: 90%;
    margin-right: 0;
  }

  .projetos__texto-bloco { flex: none; width: 90%; }

  .projeto-card__corpo  { padding: 20px 20px 24px; }
  .projeto-card__titulo { font-size: 19px; }

  /* ---- Resultados ---- */
  .resultados { border-radius: 50px 0 0 0; }
  .resultados__titulo { font-size: 30px; }

  /* ---- Cidade ---- */
  .cidade {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 100px 0 0;
    background-image: none;
  }

  .cidade__interno { flex-direction: column; }

  .cidade__conteudo {
    flex: none;
    align-items: flex-start;
    width: 90%;
    margin-right: 0;
  }

  .cidade__espaco { display: none; }

  /* ---- Chamada final ---- */
  .chamada__interno { flex-wrap: wrap; }

  /* ---- Rodape ---- */
  .rodape__titulo,
  .rodape__endereco { font-size: 15px; }

  /* ---- Paginas internas ---- */
  .contato__grade { grid-template-columns: repeat(2, 1fr); }

  .escolha__titulo    { font-size: 48px; }
  .escolha__subtitulo { font-size: 30px; }
  .escolha__opcoes    { gap: 40px; }
  .escolha__botao     { width: 300px; height: 200px; font-size: 40px; line-height: 1.3em; }
}

/* ==========================================================================
   CELULAR - ate 767px
   ========================================================================== */
@media (max-width: 767px) {

  /* ---- Utilitarios ---- */
  .apenas-mobile { display: block; }

  /* ---- Hero (somente celular) ---------------------------------------------
     Geometria medida em assets/imagens/hero-mobile.png (1080 x 1920 px):
       . altura da arte .......... 1920/1080 = 177.8% da largura -> 177.8vw
       . topo da cabeca .......... y = 917px, ou seja 47.76% da altura
       . cabeca ate a base ....... 1003px = 92.87% da largura ----> 93vw
       . azul chapado do topo .... #2F8BBD (medido na arte; NAO e a
                                   --cor-primaria #2A8CBB, que deixaria emenda)

     Por que desta forma:
     - "background-size: 100% auto" prende a arte a LARGURA da tela. Com
       "cover" a escala dependia da ALTURA da secao, entao cada aparelho
       recortava a arte num ponto diferente e a cabeca subia ou descia - era
       isso que jogava os botoes em cima do rosto so em alguns celulares.
     - "background-position: center bottom" ancora a base da arte na base da
       secao, entao a parte de baixo nunca aparece cortada.
     - O padding-bottom de 97vw nao e um respiro arbitrario: sao os 92.87vw
       da faixa ocupada pela pessoa mais ~4vw de folga. Como esta em vw,
       acompanha a imagem e os botoes param antes do rosto em QUALQUER
       largura de tela.
     - O background-color repete o azul do topo da arte: quando o texto pede
       mais espaco, a secao cresce para cima e a cor cobre a sobra sem emenda.
       E isso que dispensa altura fixa em px e faz valer para Android e iPhone.
     -------------------------------------------------------------------------- */
  .hero {
    min-height: 177.8vw;
    padding: clamp(20px, 6vw, 36px) 10px 97vw;
    background-color: #2F8BBD;
    background-image: url("../assets/imagens/hero-mobile.png");
    background-position: center bottom;
    background-size: 100% auto;
  }

  .hero__conteudo {
    align-items: center;
    align-self: center;
    width: 96.923%;
    gap: 13px;
  }

  /* No HTML a logo tem a classe .apenas-desktop, que a esconde em <=1024px.
     Esta regra a traz de volta SO no celular - o tablet e o desktop seguem
     exatamente como estavam, e o index.html nao precisa ser tocado. */
  .hero__logo.apenas-desktop {
    display: block;
    width: clamp(72px, 20vw, 96px);
    height: auto;
    margin-inline: auto;
  }

  .hero__titulo {
    font-size: 8.2vw;
    line-height: 1.2em;
    text-align: start;
  }

  .hero__texto {
    font-size: 4.3vw;
    text-align: start;
  }

  .hero__acoes {
    flex-direction: column;
    align-items: center;
    align-self:  center;
    gap: 8px;
    width: 279px;
    max-width: 100%;
  }

  .hero__acoes .botao { width: 252px; max-width: 100%; }

  /* ---- Sobre ---- */
  .sobre {
    /* 20px na horizontal: mesmo recuo de seccao de Lutas, Resultados e
       Chamada, para os titulos e textos cairem na mesma linha vertical. */
    padding: 100px 20px 0;
    margin-top: -39px;
    background-image: url("../assets/imagens/sobre-bg-mobile.png");
    background-position: center center;
    background-size: cover;
  }

  .sobre__interno {
    gap: 0;
    margin-top: -72px;
  }

  .sobre__foto-mobile { margin-top: 50px; }

  .sobre__conteudo {
    /* "stretch" faz as caixas de titulo e texto ocuparem a largura do bloco.
       Com "center" elas encolhiam ate o conteudo e ficavam centralizadas,
       o que so era visivel quando o texto nao preenchia a linha (767px) e
       tirava a Sobre do eixo das demais seccoes. O texto em si continua
       alinhado a esquerda pelo text-align: start ja existente. */
    align-items: stretch;
    /* Sem isto vale o width:90% do bloco de 1024px, que alinhava o bloco a
       esquerda e deixava 33px a mais do lado direito. */
    width: 100%;
    margin-right: 0;
  }

  .sobre__titulo {
    font-size: 33px;
    line-height: 1.4em;
    text-align: start;
  }

  .sobre__texto {
    font-size: 15px;
    text-align: start;
  }

  .sobre__pilares { flex-direction: column; }
  .pilar { width: 100%; }

  /* ---- Principais lutas ---- */
  .lutas {
    padding: 50px 20px;
    border-radius: 0;
  }

  .rotulo-secao { font-size: 10px; line-height: 1.2em; }
  .lutas__titulo { font-size: 7.3vw; }

  .lutas__grade {
    flex-direction: column;
    gap: 0;
    margin-top: -1px;
  }

  .card-luta { padding: 8px; }
  .card-luta__icone { width: 131px; height: 131px; }

  /* ---- Projetos ---- */
  .projetos { padding: 100px 20px 0; }

  .projetos__interno { flex-direction: column-reverse; }

  .projetos__carrossel {
    align-items: center;
    width: 100%;
    margin: 0;
  }

  .projetos__texto-bloco { width: 100%; }
  .projetos__titulo { font-size: 10vw; }
  .projetos__descricao { font-size: 15px; }

  .carrossel { --carrossel-visiveis: 1; }
  .carrossel__seta--anterior { left: 4px; }
  .carrossel__seta--proxima  { right: 4px; }

  .projeto-card__corpo  { padding: 18px 18px 22px; }
  .projeto-card__titulo { font-size: 18px; }
  .projeto-card__texto  { font-size: 14px; }
  .projeto-card__botao  { width: 100%; }

  /* ---- Resultados ---- */
  .resultados {
    padding: 50px 20px;
    border-radius: 0;
  }

  .resultados__titulo { font-size: 25px; line-height: 1.4em; }
  .contador__rotulo { font-size: 15px; }
  .contador__numero-area { font-size: 46px; }

  /* ---- Cidade ----
     Geometria medida em assets/imagens/cidade-mobile.png (1080 x 1920 px):
       . topo da cabeca ....... y = 1069px = 55.68% da altura
       . cabeca ate a base .... 851px = 78.8% da largura -> 78.8vw
       . cinza chapado do topo  #F6F6F6

     Com "cover" a escala da arte dependia da ALTURA da secao, entao a cabeca
     subia conforme a largura da tela e o texto acabava sobre o rosto (de 1px
     em 320px ate o rosto entrar cortado pelo topo em 767px). Com
     "100% auto" a arte fica presa a largura, e o padding-bottom de 78.8vw
     (a faixa da pessoa) mais 32px de folga mantem o texto sempre acima da
     cabeca, em qualquer largura. O background-color repete o cinza do topo
     da arte para cobrir sem emenda a sobra quando a secao cresce. */
  .cidade {
    min-height: 591px;
    padding: 100px 10px calc(78.8vw + 32px);
    background-color: #F6F6F6;
    background-image: url("../assets/imagens/cidade-mobile.png");
    background-position: bottom center;
    background-size: 100% auto;
  }

  .cidade__conteudo {
    align-items: center;
    margin-top: -43px;
    margin-right: 0;
    padding: 0;
  }

  .cidade__titulo {
    font-size: 33px;
    line-height: 1.2em;
    letter-spacing: -1px;
  }

  .cidade__texto { font-size: 16px; }

  /* ---- Chamada final ---- */
  .chamada { padding: 50px 20px; }

  .chamada__interno { flex-direction: column; }

  .chamada__texto-bloco,
  .chamada__acoes { width: 100%; }

  .chamada__titulo { font-size: 36px; line-height: 1em; }

  .chamada__acoes {
    flex-direction: column;
    padding: 10px;
  }

  .chamada__acoes .botao { width: 100%; max-width: 300px; }

  /* ---- Rodape ---- */
  .rodape { padding: 0 50px 50px; }

  .rodape__grade { flex-direction: column; gap: 0; }

  .rodape__coluna--marca,
  .rodape__coluna--redes,
  .rodape__coluna--contato,
  .rodape__coluna--local {
    width: 100%;
    align-items: center;
    padding-top: 15px;
  }

  .rodape__logo { width: 199px; margin-inline: auto; }
  .rodape__titulo { font-size: 16px; }
  .rodape__rede svg { width: 27px; height: 27px; }

  .rodape__contato-link {
    max-width: 248px;
    font-size: 6.4vw;
  }

  .rodape__contato-link svg { width: 24px; height: 24px; }
  .rodape__endereco { font-size: 15px; }

  /* ---- Paginas internas ---- */
  .pagina-interna { padding: 60px 0; }

  .formulario-demanda__linha { grid-template-columns: 1fr; }

  .contato__grade { grid-template-columns: 1fr; }

  .agradecimento__titulo { font-size: 30px; }
  .agradecimento__texto  { font-size: 16px; }

  .escolha__titulo    { font-size: 36px; line-height: 1.4em; }
  .escolha__subtitulo { font-size: 20px; }

  .escolha__opcoes {
    flex-direction: column;
    gap: 23px;
  }

  .escolha__botao {
    width: 287px;
    height: 107px;
    font-size: 27px;
    line-height: 1.3em;
    border-radius: 19px;
  }
}

/* ==========================================================================
   TELAS MUITO PEQUENAS - ate 380px
   ========================================================================== */
@media (max-width: 380px) {
  .conteudo { padding-inline: 14px; }
  .escolha__botao { width: 100%; max-width: 287px; }
}

/* ==========================================================================
   PAGINAS DE PROJETO (materias) - blocos proprios, nao afetam o que ja existia
   ========================================================================== */
@media (max-width: 1024px) {

  .materia-topo__titulo {
    font-size: 30px;
  }

  .materia-cta__titulo {
    font-size: 26px;
  }

}

@media (max-width: 767px) {

  .materia-topo {
    padding: 32px 0 28px;
  }

  .materia-topo__logo {
    width: 240px;
  }

  .materia-topo__titulo {
    font-size: 24px;
  }

  .materia-topo__resumo {
    font-size: 15px;
  }

  .materia {
    padding-top: 20px;
  }

  .materia__capa {
    margin-top: 0;
    border-radius: 12px;
  }

  .materia__corpo {
    margin-top: 30px;
    gap: 18px;
  }

  .materia__texto {
    font-size: 16px;
  }

  .materia__subtitulo {
    font-size: 20px;
  }

  .materia__topico {
    padding: 16px 18px;
    font-size: 15px;
  }

  .materia__assinatura {
    font-size: 17px;
  }

  .materia__navegacao {
    flex-direction: column;
  }

  .materia__navegacao .botao {
    width: 100%;
  }

  .materia-cta {
    padding: 44px 0;
  }

  .materia-cta__interno {
    flex-direction: column;
    align-items: stretch;
  }

  .materia-cta__titulo {
    font-size: 24px;
  }

  .materia-cta__acoes {
    flex-direction: column;
  }

  .materia-cta__acoes .botao {
    width: 100%;
  }

}