/* ==========================================================================
   RESPONSIVO — ajustes por tamanho de tela
   Sempre carregado por último: sobrescreve os arquivos anteriores.

   Ordem dos blocos (do maior para o menor):
     1. até 960px — tablet: as colunas viram uma só
     2. até 800px — menu de celular
     3. até 620px — celular
     4. até 400px — celular pequeno
     5. movimento reduzido (acessibilidade)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TABLET — grades de duas colunas viram uma coluna
   -------------------------------------------------------------------------- */
@media (max-width:960px){
  .hero__in,.sobre__in,.etapas__in,.online__in,.faq__in,.agendar__in{grid-template-columns:1fr}
  .hero{padding-top:calc(82px + 40px)}
  .hero::after{height:34%}
  .hero__texto{padding-bottom:38px}
  .retrato{max-width:430px; margin-inline:auto; width:100%}

  /* Retrato da seção "Sobre mim": centralizado acima do texto, com largura
     fluida (acompanha a tela em vez de dar saltos) e recorte 4:5, menos
     alongado que o 3:4 do computador.
     Quer maior ou menor? Mexa só no 52vw. */
  .sobre__foto{width:clamp(180px, 52vw, 300px); margin-inline:auto}
  .sobre__foto img{aspect-ratio:4/5}

  .rodape__in{grid-template-columns:1fr 1fr}
  .rodape__marca{grid-column:1/-1}
}

/* --------------------------------------------------------------------------
   2. MENU DE CELULAR — navegação desliza a partir do cabeçalho
   -------------------------------------------------------------------------- */
@media (max-width:800px){
  .nav{
    position:absolute; top:100%; left:0; right:0; background:var(--papel); flex-direction:column;
    align-items:stretch; gap:0; padding:8px var(--gutter) 18px; border-bottom:1px solid var(--linha);
    transform:translateY(-130%); transition:transform .45s cubic-bezier(.3,.7,.2,1);
  }
  .menu-aberto .nav{transform:translateY(0)}
  .nav a{padding:15px 0; border-bottom:1px solid var(--linha); font-size:16px}
  .nav a:last-child{border-bottom:0}
  .menu-btn{display:flex}
}

/* --------------------------------------------------------------------------
   3. CELULAR
   -------------------------------------------------------------------------- */
@media (max-width:620px){
  body{font-size:16px}

  /* Faixa de credenciais empilhada */
  .faixa__in{grid-template-columns:1fr}
  .faixa__item{border-left:0; border-top:1px solid rgba(38,35,32,.1); padding:22px}
  .faixa__item:first-child{border-top:0}

  /* Botões ocupam a largura toda, para facilitar o toque */
  .hero__acoes .btn,.agendar__acoes .btn{width:100%}

  .reconhecer::before{font-size:20rem}
  .frase{font-size:1.2rem; padding:28px 24px}
  .etapa{grid-template-columns:1fr; gap:8px}
  .rodape__in{grid-template-columns:1fr; gap:34px}

  /* Sobre mim: só o respiro entre a foto e o texto. O tamanho da foto
     vem da regra fluida do bloco 1 e não precisa ser repetido aqui. */
  .sobre__in{gap:26px}

  /* Cabeçalho: no celular o botão de WhatsApp sai. O botão verde flutuante
     já cobre esse contato, e o topo fica só com a marca e o menu. */
  .topo__zap{display:none}
}

/* --------------------------------------------------------------------------
   4. CELULAR PEQUENO (iPhone SE e similares)
   -------------------------------------------------------------------------- */
@media (max-width:400px){
  /* Botão flutuante um pouco menor, para não cobrir o conteúdo */
  .zap{width:52px; height:52px; right:16px}
  .zap svg{width:27px; height:27px}
}

/* --------------------------------------------------------------------------
   5. ACESSIBILIDADE — respeita quem pediu menos animação no sistema
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1; transform:none}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}