@charset "utf-8";
/* ============================================================
   ACT · ARCONTEC — componentes das Landing Pages
   Carrega DEPOIS de style.css: reaproveita todos os tokens, tipografia,
   botões, hero, rodapé e faixa de credenciais do design system do site.
   Aqui só existe o que é específico de LP.
   ============================================================ */

/* ---------- HEADER DE LP ----------
   Sem menu de navegação: numa LP cada link é uma rota de fuga. Fica logo +
   CTA. Ao contrário do site, aqui o CTA no topo se justifica — é a própria
   razão da página, não um botão que compete com o hero. */
.lp-cabecalho__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: var(--h-cabecalho);
}
.lp-cabecalho .btn { padding: .7rem 1.3rem; }

@media (max-width: 35em) {
  .lp-cabecalho .btn { padding: .65rem 1rem; font-size: var(--txt-xs); }
  .lp-cabecalho .logo { height: 28px; }
}

/* ---------- MICROCOPY ACIMA DO CTA ----------
   A copy traz uma linha de contexto antes de cada botão; ela reduz o atrito
   de clique e não deve competir com o rótulo do botão. */
.cta-bloco { margin-top: var(--sp-6); }
.cta-bloco--centro { text-align: center; }
.cta-linha {
  margin-bottom: var(--sp-2);
  font-size: var(--txt-sm); color: var(--cor-texto-suave);
}
/* Toda seção de fundo escuro precisa inverter a microcopy. `.autoridade` faltava
   na lista e a linha ficava em cinza escuro sobre o azul (2,5:1). */
.secao--escura .cta-linha, .cta .cta-linha, .lp-hero .cta-linha,
.autoridade .cta-linha, .qualidade .cta-linha { color: var(--cor-inv-suave); }

/* ---------- VANTAGENS (numeradas, sem ícone) ----------
   Mesma decisão dos pilares do site: numeral como marcador em vez de ícone
   outline repetido acima de cada título (anti-padrão 2.5), e linhas com fio
   em vez de grid de cards idênticos (2.3). */
.vantagens {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 4rem);
}
.vantagem {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) 0; border-top: var(--fio);
}
.vantagem__num {
  font-family: var(--fonte-titulo); font-size: var(--txt-sm); font-weight: 700;
  color: #A9151A;              /* vermelho da marca escurecido p/ contraste */
  font-variant-numeric: tabular-nums; padding-top: .1rem;
}
.vantagem p { font-size: var(--txt-base); color: var(--cor-texto); }

/* ---------- MODALIDADES (blocos editoriais) ---------- */
.modalidades { display: grid; gap: 0; }
.modalidade {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--sp-3) clamp(1.5rem, 4vw, 4rem);
  padding: var(--sp-5) 0; border-top: var(--fio);
}
.modalidade:last-child { border-bottom: var(--fio); }
.modalidade h3 { font-size: var(--txt-2xl); color: var(--act-azul); }
.modalidade p { color: var(--cor-texto-suave); }

/* ---------- COMPARATIVA (mercado × ACT) ---------- */
.comparativa {
  border: var(--fio); border-radius: var(--raio-2);
  overflow: hidden; background: var(--act-branco);
}
.comparativa__cabeca, .comparativa__linha {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.comparativa__cabeca > * {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--fonte-titulo); font-size: var(--txt-xs); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.comparativa__cabeca > :first-child { background: var(--act-cinza-claro); color: var(--cor-texto-suave); }
.comparativa__cabeca > :last-child { background: var(--act-azul); color: var(--act-azul-clara); }
.comparativa__linha > * { padding: var(--sp-3); border-top: var(--fio); font-size: var(--txt-sm); }
.comparativa__linha > :first-child { color: var(--cor-texto-suave); }
.comparativa__linha > :last-child {
  color: var(--cor-texto); font-weight: 600;
  background: rgba(30, 90, 168, .05);
  border-left: 2px solid var(--act-azul);
}

/* ---------- IDENTIFICAÇÃO COM A DOR (LP2) ---------- */
.dores-lista { display: grid; gap: 0; max-width: 70ch; }
.dores-lista li {
  position: relative; padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  border-top: var(--fio); color: var(--cor-texto);
}
.dores-lista li:last-child { border-bottom: var(--fio); }
.dores-lista li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--sp-3) + .6em);
  width: 18px; height: 2px; background: var(--act-vermelho);
}

/* ---------- PASSOS DO PROCESSO (LP2) ---------- */
.passos { counter-reset: passo; display: grid; gap: 0; }
.passo {
  counter-increment: passo;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3); align-items: start;
  padding: var(--sp-4) 0; border-top: 1px solid var(--act-fio-esc);
}
.passo:last-child { border-bottom: 1px solid var(--act-fio-esc); }
.passo::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--fonte-titulo); font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  font-weight: 700; line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .45);
  font-variant-numeric: tabular-nums;
}
.passo h3 { font-size: var(--txt-lg); color: var(--cor-inv); margin-bottom: .3rem; }
.passo p { font-size: var(--txt-sm); color: var(--cor-inv-suave); }

/* ---------- CLIENTES (nomes, não logos) ----------
   O material do cliente não traz arquivos de logo — só os nomes. Grid
   tipográfico é honesto; logo em texto imitando marca não é. */
.clientes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 1px; background: var(--act-borda);
  border: var(--fio); border-radius: var(--raio-2); overflow: hidden;
}
.clientes-grid li {
  display: flex; align-items: center; min-height: 74px;
  padding: var(--sp-2) var(--sp-3); background: var(--act-branco);
  font-family: var(--fonte-titulo); font-size: var(--txt-sm); font-weight: 600;
  color: var(--act-azul); line-height: 1.3;
}

/* ---------- DEPOIMENTOS (estáticos, sem slider) ----------
   Numa LP os três depoimentos aparecem de uma vez: obrigar a navegar num
   carrossel é custo de interação sem retorno (ux-ui §2.2 — Hick).
   Reaproveita o visual de `.depoimento` do site. */
.depoimentos-lp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }

/* ---------- GALERIA (grade simples, sem lightbox) ---------- */
.lp-galeria {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2);
}
.lp-galeria figure {
  margin: 0; border-radius: var(--raio-3); overflow: hidden;
  border: var(--fio); background: var(--act-cinza-claro);
}
.lp-galeria img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.lp-galeria figcaption {
  padding: .7rem .85rem; font-size: var(--txt-xs);
  color: var(--cor-texto-suave); background: var(--act-branco); border-top: var(--fio);
}

/* ---------- FAQ ----------
   `<details>/<summary>` nativo: acessível por teclado, funciona sem JS e
   comunica estado ao leitor de tela sem ARIA manual. */
.faq { display: grid; gap: 0; max-width: 80ch; }
.faq details { border-top: var(--fio); }
.faq details:last-of-type { border-bottom: var(--fio); }
.faq summary {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3) 0; cursor: pointer;
  font-family: var(--fonte-titulo); font-size: var(--txt-lg); font-weight: 600;
  color: var(--act-azul);
  list-style: none;                /* remove o triângulo padrão */
  transition: color var(--dur-1) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--act-azul-2); }
.faq summary::after {
  content: ""; flex: 0 0 auto; margin-left: auto; margin-top: .45em;
  width: 12px; height: 12px;
  border-right: 2px solid var(--act-azul-2); border-bottom: 2px solid var(--act-azul-2);
  transform: rotate(45deg);
  transition: transform var(--dur-2) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > p {
  padding: 0 var(--sp-5) var(--sp-3) 0;
  color: var(--cor-texto-suave); max-width: 70ch;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 67.5em) {
  .lp-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .depoimentos-lp { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 60em) {
  .vantagens { grid-template-columns: minmax(0, 1fr); }
  .modalidade { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  /* A comparativa vira pares empilhados: uma tabela de 2 colunas em 360px
     obrigaria a scroll horizontal ou a quebrar cada célula em duas linhas. */
  .comparativa__cabeca { display: none; }
  .comparativa__linha { grid-template-columns: minmax(0, 1fr); }
  .comparativa__linha > * { border-left: 0; }
  .comparativa__linha > :first-child::before,
  .comparativa__linha > :last-child::before {
    display: block; margin-bottom: .3rem;
    font-family: var(--fonte-titulo); font-size: 11px; font-weight: 700;
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  }
  .comparativa__linha > :first-child::before {
    content: "Comum no mercado"; color: var(--act-cinza);
  }
  .comparativa__linha > :last-child {
    border-left: 2px solid var(--act-azul); border-top-width: 0;
  }
  .comparativa__linha > :last-child::before {
    content: "Como a ACT trabalha"; color: var(--act-azul-2);
  }
}
@media (max-width: 35em) {
  .lp-galeria { grid-template-columns: minmax(0, 1fr); }
  .clientes-grid { grid-template-columns: minmax(0, 1fr); }
  .clientes-grid li { min-height: 0; }
  .faq summary { font-size: var(--txt-base); }
  .cta-bloco .btn { width: 100%; }
}

/* ---------- MÉTRICAS DA LP (3 números, não 4) ----------
   Classe em vez de style inline: com `grid-template-columns` no atributo, a
   regra do breakpoint não tem como vencer e os números ficavam comprimidos em
   106px no celular. */
.metricas-lp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }
.metricas-lp--claro .metrica { border-left-color: var(--act-borda); }
.metricas-lp--claro .metrica__valor { color: var(--act-azul); }
.metricas-lp--claro .metrica__rotulo { color: var(--cor-texto-suave); }

@media (max-width: 35em) {
  .metricas-lp { grid-template-columns: minmax(0, 1fr); }
}