/* Ajustes que ficam por cima do estilo.css do pacote do Design.
   Vive num arquivo separado porque cada pacote novo reescreve o estilo.css e
   levaria estas correções junto. tools/aplicar-pacote.mjs preserva este
   arquivo e garante o <link> no index.html. */

/* 1. Logos dos três sistemas com o mesmo peso óptico.
   O estilo do pacote dá a mesma ALTURA DE CAIXA às três, mas a caixa contém
   coisas diferentes: os lockups da ACE têm símbolo e subtítulo, e a Cravegi é
   só o nome. Medido nos arquivos, a altura da caixa-alta é 37,6% da imagem em
   Benefícios, 44,2% em Golf e 100% na Cravegi — com 38px iguais, o nome da
   Cravegi saía 2,3x maior. As alturas abaixo igualam a caixa-alta em 24px. */
.marca-col.benef   .logo-sis{height:64px}
.marca-col.golf    .logo-sis{height:54px}
.marca-col.cravegi .logo-sis{height:24px}

@media (max-width:1100px){
  .marca-col.benef   .logo-sis{height:56px}
  .marca-col.golf    .logo-sis{height:47px}
  .marca-col.cravegi .logo-sis{height:21px}
}

/* 2. Celular do card de Benefícios na frente do computador.
   O pacote empilha só nesse card: z-index 0 no celular e 1 no notebook, o que
   esconde o aparelho atrás da tela. Os outros dois cards deixam o celular na
   frente por ordem do documento. A largura de 24% está certa: com a margem
   transparente de cada arquivo, ela iguala a altura do aparelho aos demais. */
.marca-col.benef .tela .fone{z-index:2}
.marca-col.benef .tela>img:first-child{z-index:1}

/* 3. Página mais curta: o respiro entre seções somava 2.236px, quase um quarto
   dos 9.362px de altura. Só o padding das seções era 140px em cima e embaixo,
   sete vezes. Aqui ele cai para 76px, e os blocos que abrem cada seção deixam
   de ter 80px de distância do título. Nenhum conteúdo sai. */
section{padding:76px 0}
.vitrine{padding:76px 0}
.heroi{padding:84px 0 56px;min-height:auto}
footer{padding:56px 0 40px}

.problemas,.passos,.planos,.agendar-grid{margin-top:46px}
.modulos{margin-top:46px}
.heroi .rodape-h{margin-top:40px}
.heroi .acoes{margin:32px 0 18px}
.convite{gap:40px}

/* dentro dos cards da vitrine, o mesmo aperto proporcional */
.marca-col{padding:28px 26px 26px}
.marca-col .tela{margin:20px 0 18px}
.marca-col .stats{padding:14px 0}
.marca-col .logo-sis{margin-bottom:18px}

@media (max-width:900px){
  section{padding:64px 0}
  .vitrine{padding:64px 0}
  footer{padding:48px 0 36px}
  .problemas,.passos,.planos,.agendar-grid,.modulos{margin-top:38px}
}

/* 4. A Cravegi é só o nome, sem símbolo ao lado, então precisa de mais altura
   para ter a mesma presença que os lockups da ACE. Igualar a caixa-alta em
   24px deixava o nome tímido no card. */
.marca-col.cravegi .logo-sis{height:32px}
@media (max-width:1100px){ .marca-col.cravegi .logo-sis{height:28px} }

/* 5. Títulos na escala do próprio brand guide.
   O estilo do pacote levava o H1 a 81px e os H2 a 66px na tela de 1440. O guia
   da marca define H1 em 56/64 e H2 em 32/40. Nesse tamanho o H1 quebrava em
   sete linhas (553px de altura) e um H2 chegava a quatro linhas (270px).
   Aqui eles descem para 62px e 46px: acima do guia, ainda imponentes, e com
   menos linhas por título. Nenhuma palavra foi cortada. */
h1{font-size:clamp(40px,4.3vw,62px);line-height:1.02}
h2{font-size:clamp(30px,3.2vw,46px);line-height:1.08}
.convite h2{font-size:clamp(26px,2.5vw,38px)}

/* a lista dos cards respirava 72px por item */
.faz-col li{padding:7px 0}

/* 6. O título do herói estava preso em 11 caracteres de largura, o que o
   quebrava em seis linhas. Com 17 caracteres ele cabe em quatro, na mesma
   coluna de 560px que o resto do herói ocupa. */
.heroi h1{max-width:17ch;margin-bottom:22px}