/* Solutech LP - base: reset, tokens, tipografia, layout primitivo.
   Mobile-first. Overrides de desktop ficam em components.css, sempre
   dentro de @media (min-width: 769px), depois do estilo base. */

/* Fonte de destaque só para titulo (H1/H2/numero de prova), self-hosted,
   subset latin (cobre acentuacao do PT-BR), dois pesos, ~22KB cada.
   Corpo de texto continua em fonte de sistema de proposito, para nao repetir
   o peso de fonte em todo elemento - só onde a personalidade visual mais
   importa. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800.woff2") format("woff2");
}

:root {
  --cor-primaria: #123449;
  --cor-primaria-escura: #0a1f2c;
  --cor-primaria-clara: #1f4f68;
  --cor-acento: #e8621a;
  --cor-acento-escuro: #c14f12;
  /* Verde do botao de WhatsApp, separado do acento da marca de proposito:
     nao e a cor da Solutech, e o padrao que se repete (sem estar escrito em
     lugar nenhum) nas LPs de outras contas da operacao para o botao que leva
     ao WhatsApp - Air Solutions, B5 Multimarcas, Center Bike e Wolf Open Bar
     usam variacao de verde so nesse botao, nunca a cor de marca do cliente.
     Trocado em 08/09/2026, pedido explicito do usuario, para o mesmo verde
     vivo e o mesmo efeito (pulso) do botao flutuante da Air Solutions
     (FloatingWhatsApp.tsx: #00c800, hover #009600, animacao de pulso via
     box-shadow). Era #0b8043 (mais escuro, criterio de contraste com texto
     branco documentado pela Center Bike) - o botao flutuante em si so tem
     icone, sem texto visivel, entao a exigencia de contraste e 3:1 (grafico),
     nao 4.5:1 (texto), e #00c800 passa. Onde o mesmo token aparece com texto
     visivel (segmento WhatsApp da barra fixa mobile), o texto foi trocado
     para preto - ver components.css. */
  --cor-whatsapp: #00c800;
  --cor-whatsapp-escuro: #009600;
  --cor-acento-fraco: rgba(232, 98, 26, 0.12);

  /* Cor de CTA do corpo da pagina (hero/meio/fechamento), pedido explicito
     do usuario em 08/09/2026: mesmo amarelo e mesmo efeito do botao
     ".btn-wolf" do projeto Wolf Open Bar. So os botoes de conteudo mudam -
     o botao flutuante e a barra fixa mobile continuam verdes de proposito
     (o usuario confirmou para nao mudar isso). */
  --cor-cta: #ffca1d;
  --cor-cta-escuro: #ffba00;

  --fonte-destaque: "Barlow Condensed", var(--fonte-base);
  --cor-texto: #171b1e;
  --cor-texto-suave: #4a5560;
  --cor-fundo: #ffffff;
  --cor-fundo-alt: #f2f5f7;
  --cor-borda: #d8e0e5;
  --cor-sucesso: #1f7a4d;

  --fonte-base: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --raio: 10px;
  --sombra: 0 8px 24px rgba(10, 31, 44, 0.12);

  --largura-maxima: 1120px;
  --espaco-dobra: clamp(2.5rem, 6vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }

/* Garante que [hidden] sempre vença, mesmo quando um componente da pagina
   define display:flex/grid com especificidade maior que a folha de estilo
   do navegador para o atributo hidden (achado real: botao "Ligar" da barra
   mobile aparecia com telefone vazio antes desta regra). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-base);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  font-size: 17px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, p { margin: 0; }

button { font: inherit; }

.container {
  /* width:100% garante que o container ocupe a largura toda ate' o
     max-width mesmo quando o pai e' flex (a hero, por exemplo) - sem isso,
     um item flex sem largura explicita encolhe para caber no conteudo em
     vez de esticar, e o margin-inline:auto acaba centralizando uma caixa
     estreita demais no meio da secao em vez de alinhar com o padding das
     outras dobras (todas fora de contexto flex, onde o efeito nao aparece). */
  width: 100%;
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.dobra { padding-block: var(--espaco-dobra); }

/* Textura tecnica sutil tipo grade de planta baixa, so CSS (sem imagem,
   sem peso extra) - reforca o tom industrial/tecnico sem competir com o
   conteudo. */
.dobra--alt {
  background-color: var(--cor-fundo-alt);
  background-image:
    linear-gradient(rgba(18, 52, 73, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 52, 73, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

.h1 {
  font-family: var(--fonte-destaque);
  font-size: clamp(2.25rem, 6.4vw, 3.375rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--cor-primaria-escura);
}

.h2 {
  font-family: var(--fonte-destaque);
  font-size: clamp(1.75rem, 4.4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cor-primaria-escura);
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-acento-escuro);
}

.subhead {
  font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
  color: var(--cor-texto-suave);
}

.paragrafo {
  font-size: 1.0625rem;
  color: var(--cor-texto-suave);
  max-width: 62ch;
}

.lista-item { font-size: 0.9375rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--cor-primaria-escura);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 3px solid var(--cor-acento);
  outline-offset: 2px;
}

/* Reveal-on-scroll: aplicado via JS (IntersectionObserver) adicionando
   .revelado quando o elemento .revelar entra na tela. Sem JS ou com
   prefers-reduced-motion, o conteudo fica sempre visivel (progressive
   enhancement, nunca esconde conteudo de quem desativou animacao). */
@media (prefers-reduced-motion: no-preference) {
  .revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .revelar.revelado {
    opacity: 1;
    transform: translateY(0);
  }
}