/* ==========================================================================
   PÁGINA: HOME
   Carrega por último, depois de 06-responsive.css. As media queries desta
   página moram aqui embaixo, no fim do arquivo.

   Blocos, na ordem da copy (docs/copy/home.txt):
   hero · serviços · diferenciais · resultados · avaliações · reforço · blog
   ========================================================================== */

/* O ritmo vertical das seções é compartilhado, mora em 03-layout.css */

/* ==========================================================================
   1. HERO
   Sem foto de propósito: a única imagem que existia era amostra de teste.
   Hero centrado, tipografia carregando o peso e o campo de partículas ao
   fundo. Se vier imagem oficial, dá pra voltar ao layout de duas colunas
   com o retrato que está em _arquivo.css.
   ========================================================================== */
/* overflow:hidden porque o arco é mais largo que a tela no celular.
   Sem isso ele cria rolagem horizontal, que é o defeito mais fácil de
   introduzir e o mais chato de perceber no desktop. */
.hero{position:relative;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  padding:140px 0 90px;text-align:center}
.hero .container{display:flex;flex-direction:column;align-items:center}

/* O arco da home é o mais forte do site: é o primeiro contato.

   Ele fica dentro do contêiner, então --arco-topo é medido a partir do topo
   do bloco de texto, não do topo da tela. Isso resolve o conflito que as
   versões anteriores tinham: preso à tela ele descolava do título quando a
   altura mudava, preso ao centro do hero ele subia em tela baixa e a cauda
   do brilho passava por cima dos links da barra.

   Com -250 e altura 260, o brilho começa por volta da base da nav e o fio
   fica entre a nav e a etiqueta, que é o vão livre.

   z-index -1 porque .acima-do-arco cria contexto de empilhamento: sem isso
   um filho posicionado pintaria por cima do texto. */
.hero .arco{
  --arco-topo:-250px;
  --arco-alt:260px;
  --arco-forca:1;
  z-index:-1;
  animation:respiro 9s ease-in-out infinite;
}

/* Uma linha só, em qualquer largura.

   O tamanho acompanha a viewport porque a frase é longa (48 caracteres em
   caixa alta) e, fixa, quebrava em duas linhas no celular deixando uma
   palavra órfã embaixo. */
.hero-kicker{display:inline-flex;align-items:center;
  font-size:clamp(8.6px,2.6vw,12.5px);
  color:var(--gold-hi);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:30px;opacity:0;
  padding:9px 18px;border-radius:var(--r-pill);white-space:nowrap;
  border:1px solid rgba(212,175,55,.26);background:rgba(212,175,55,.05)}

/* h1 em linhas com overflow escondido: o reveal.js sobe cada linha de baixo */
.hero h1{font-size:clamp(33px,5.6vw,66px);font-weight:800;
  margin-bottom:28px;max-width:19ch;letter-spacing:-.025em}
/* o combinador filho é obrigatório: dentro da linha existe um <span> de
   destaque em ouro, que não pode virar bloco nem ser deslocado */
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block;transform:translateY(110%)}

.hero .lead{font-size:clamp(16px,1.9vw,19px);color:var(--muted);
  max-width:60ch;margin-bottom:42px;opacity:0}

.hero-acao{opacity:0}


/* ==========================================================================
   2. SERVIÇOS
   ========================================================================== */
.grade-servicos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}


/* ==========================================================================
   3. DIFERENCIAIS
   ========================================================================== */
.acao-diferenciais{margin-top:40px}


/* ==========================================================================
   4. RESULTADOS
   A grade (.grade-graficos) é compartilhada, mora em 04-components.css.
   ========================================================================== */


/* ==========================================================================
   5. AVALIAÇÕES DO GOOGLE
   ========================================================================== */
.card-avaliacao{padding:30px 28px;border-radius:var(--r-lg);
  border:1px solid var(--line);height:100%;
  display:flex;flex-direction:column;gap:16px;
  background:linear-gradient(165deg,rgba(20,20,24,.7),rgba(8,8,10,.35))}
.card-avaliacao .estrelas{display:flex;gap:3px}
.card-avaliacao .estrelas svg{width:17px;height:17px;color:var(--gold)}
.card-avaliacao blockquote{font-size:15.5px;line-height:1.62;color:var(--ink);flex:1}
.card-avaliacao figcaption{display:flex;align-items:center;gap:12px;
  padding-top:16px;border-top:1px solid var(--line)}
.card-avaliacao .inicial{width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-family:'Sora';font-weight:700;font-size:15px;color:#1a1405;
  background:var(--gold-grad)}
.card-avaliacao .quem b{display:block;font-family:'Sora';font-size:14.5px;font-weight:600}
.card-avaliacao .quem span{font-size:12.5px;color:var(--muted)}

.avaliacoes-apoio{margin-top:26px;text-align:center;color:var(--muted);font-size:14.5px}


/* ==========================================================================
   6. REFORÇO
   Bloco de respiro antes do blog. Texto grande, nada competindo com ele.
   ========================================================================== */
.reforco{text-align:center}
.reforco p{font-family:'Sora';font-weight:600;
  font-size:clamp(21px,3.2vw,36px);line-height:1.32;letter-spacing:-.02em;
  max-width:26ch;margin:0 auto}


/* ==========================================================================
   7. BLOG
   A grade (.grade-artigos) é compartilhada, mora em 04-components.css.
   ========================================================================== */
/* .blog-todos é compartilhado com o Quem Somos, mora em 04-components.css */


/* ==========================================================================
   RESPONSIVO DA HOME
   ========================================================================== */
@media(max-width:1000px){
  .grade-servicos{grid-template-columns:repeat(2,1fr)}
}

/* Tela baixa: o conteúdo do hero sobe e o vão entre a barra de navegação e a
   etiqueta encolhe (em 800px de altura sobram cerca de 97px, e o arco cheio
   pede 250). Aqui ele diminui para caber nesse vão em vez de subir por cima
   dos links. Só acima de 760px de largura: abaixo disso vale a regra do
   celular, mais adiante. */
@media(min-width:761px) and (max-height:880px){
  .hero .arco{--arco-topo:-150px;--arco-alt:190px}
}

@media(max-width:760px){
  .hero{padding:110px 0 64px}
  .grade-servicos{grid-template-columns:1fr}

  /* O arco com fio precisa de espaço livre acima do conteúdo, e no celular
     esse espaço não existe: o hero tem cerca de 660px e o conteúdo ocupa
     quase tudo. Além disso --arco-y é um deslocamento em pixels calibrado
     para tela alta, então em tela baixa ele sobe e bate na logo.

     No celular vira mancha ancorada no topo do hero: independe da altura da
     tela e nunca alcança a barra de navegação. */
  /* O arco com fio volta no celular.

     Antes ele virava mancha aqui porque estava preso à altura da tela e não
     havia espaço acima do conteúdo. Ancorado no bloco de texto, sobram
     cerca de 190px entre a logo e a etiqueta, que é suficiente para uma
     versão menor do arco inteiro.

     Largura em 94vw para o arco caber fechado na tela, com as duas pernas
     visíveis, em vez de aparecer cortado nas laterais. */
  .hero .arco{
    --arco-topo:-175px;
    --arco-alt:190px;
    width:min(360px,94vw);
  }

  /* padding menor para sobrar largura pro texto caber em uma linha */
  .hero-kicker{letter-spacing:.05em;padding:8px 13px;margin-bottom:22px}

  /* Quebra natural em vez das três linhas fixas.

     As linhas rígidas foram pensadas para desktop; em 350px cada uma
     estourava e sobrava uma palavra órfã embaixo ("estar", "está"). Soltas,
     o texto quebra onde cabe, e text-wrap:balance distribui o comprimento
     das linhas em vez de deixar a última curta. */
  .hero h1{font-size:clamp(28px,8.2vw,38px);max-width:none;
    text-wrap:balance;opacity:0;transform:translateY(20px)}
  .hero h1 .line{display:inline;overflow:visible}
  .hero h1 .line > span{display:inline;transform:none}

  .hero .lead{font-size:16px;margin-bottom:32px}
}