/* Silex — site público (design-v2, SITE-6 #1352).
   Base BRANCA, acento verde #16A34A. ZERO tema Material, ZERO índigo, ZERO
   request externo: a Inter é self-hosted (woff2 local, @font-face abaixo).
   As páginas de design usam estilos inline (fidelidade ao mock); este arquivo
   cobre só o que inline não faz: @font-face, reset mínimo e estados :hover
   (inline vence o seletor, então o hover usa !important de propósito). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-Italic.woff2") format("woff2");
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }

/* Estados :hover — inline style tem specificity máxima, então !important é
   necessário pra sobrescrever a cor/background base declarada inline. */
a { transition: color .15s ease; }
.slx-navlink:hover { color: #0f1420 !important; }
.slx-langlink:hover { background: #f7f8f6 !important; color: #0f1420 !important; }
.slx-sidelink:hover { background: #f7f8f6 !important; color: #0f1420 !important; }
.slx-btn-primary:hover { background: #15803D !important; color: #fff !important; }
.slx-btn-ghost:hover { background: #EAF7EE !important; }
.slx-footlink:hover { color: #4cdf7a !important; }
.slx-dimlink:hover { color: #9a9cb8 !important; }
.slx-report-link:hover { color: #85fbae !important; }
.slx-anchor-link:hover { color: #a8c1f0 !important; }
.slx-proof-link:hover h4 { color: #16A34A !important; }
.slx-icon-btn:hover { background: #f7f8f6 !important; }
.slx-join-btn:hover { background: #5cf68b !important; }

/* Carrossel da landing: slides empilhados, um visível por vez. Os hooks são
   ATRIBUTOS data-slx-* (não classes) — o seletor precisa casar o atributo. */
[data-slx-slide] { transition: opacity .3s ease; }
[data-slx-slide][data-active="false"] { opacity: 0; pointer-events: none; }
[data-slx-slide][data-active="true"] { opacity: 1; pointer-events: auto; }
[data-slx-substep][data-active="false"] { display: none; }
[data-slx-substep][data-active="true"] { display: flex; }

/* Mensagem da waitlist (sucesso / indisponível). */
.slx-waitlist-msg { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; }
.slx-waitlist-msg[data-tone="ok"] { color: #4cdf7a; }
.slx-waitlist-msg[data-tone="err"] { color: #f0a37a; }
.slx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Responsividade mobile (SITE-9 #1574). Breakpoint 760px, medido no layout
   real: abaixo dele o grid #install de 3 colunas (~230px por coluna) espreme
   o <pre> do Quickstart a ponto de ilegível, e os demais grids (hero 2-col,
   #how 4-col, footer 5-col) estouram 375px de viewport (scrollWidth 779px
   antes desta regra). Entre 761px e 900px as colunas ainda comportam o
   conteúdo sem quebra, então 760px é o ponto onde o mobile começa de fato.
   Mesmo padrão do :hover acima: os grids são declarados em style= inline
   (specificity máxima), então a regra usa !important de propósito. */
@media (max-width: 760px) {
  .slx-hero-grid,
  .slx-how-grid,
  .slx-install-grid,
  .slx-tier-grid,
  .slx-footer-grid {
    grid-template-columns: 1fr !important;
  }
  .slx-hero-grid { gap: 24px !important; }
  .slx-how-grid { gap: 14px !important; }
  .slx-install-grid { gap: 16px !important; }
  .slx-footer-grid { gap: 20px !important; }
  /* CTAs do hero: "Instalar Silex Grátis" + "Ler a documentação" têm
     white-space:nowrap inline; juntos (198px+187px+gap) estouram 375px de
     viewport no PT (scrollWidth 424px medido). Wrap do container resolve a
     causa — cada botão em linha própria — sem quebrar o texto do botão nem
     esconder overflow. */
  .slx-hero-ctas { flex-wrap: wrap !important; }
  /* O form da waitlist (footer) tem um <input> com largura intrínseca
     (~212px) que, somada ao botão, empurra o card além de 375px de viewport
     (medido: sem o wrap o scrollWidth do documento fica > 375). Wrap resolve
     a causa — input em linha cheia, botão embaixo — sem esconder overflow. */
  .slx-waitlist-row { flex-wrap: wrap !important; }
}