/* ============================================================================
   landing.css — folha PRÓPRIA da página pública (/), carregada só por
   landing.html. hub.css NÃO é carregado aqui e NÃO foi tocado: ele continua
   servindo dashboard, dashboard_pessoas, login e pallets exatamente como antes.
   Qualquer regra abaixo só existe nesta página.

   Acabamento conforme DOUTRINA.md (skill fable-design), com duas leis da casa
   preservadas do hub.css: NENHUMA sombra, NENHUM border-radius.

   Cor: a doutrina pede no máximo 4 cores, fundo quase-preto, texto off-white e
   UMA de destaque. A paleta da marca já cumpre isso, então ela ficou — inventar
   um laranja "mais premium" seria trocar uma decisão de marca por gosto meu.
   ========================================================================== */

/* Fontes locais. A doutrina proíbe requisição externa: nada de fonts.googleapis.
   Ambas são VARIÁVEIS, que é o que permite o peso animar na entrada. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-latin-ext.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* As QUATRO cores. Nada fora daqui. */
  --breu:  #232E26;  /* quase-preto: o chão da página            */
  --cal:   #F0E8D2;  /* off-white: o texto                        */
  --brasa: #C07030;  /* A cor de destaque. UMA. Toma seção inteira */
  --tinta: #1E2820;  /* texto sobre claro e sobre a brasa          */

  --cal-58: rgba(240, 232, 210, .58);
  --cal-30: rgba(240, 232, 210, .30);
  --cal-12: rgba(240, 232, 210, .12);
  --tinta-62: rgba(30, 40, 32, .62);
  --tinta-20: rgba(30, 40, 32, .20);

  /* Tipografia: display fluido de 70 a 217px sobre corpo de 15px.
     13vw a 1440px = 187px, ou seja 12,5:1 — acima do piso de 12:1 da doutrina. */
  --display: clamp(70px, 13vw, 217px);
  --corpo: 15px;

  --face-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --face-corpo: 'DM Sans', system-ui, -apple-system, sans-serif;

  --entrada: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--breu); scroll-behavior: smooth; }

body {
  background: var(--breu);
  color: var(--cal);
  font-family: var(--face-corpo);
  font-size: var(--corpo);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Barra de rolagem própria, fininha, na borda direita (doutrina/Movimento). */
* { scrollbar-width: thin; scrollbar-color: var(--cal-30) transparent; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cal-30); }
::-webkit-scrollbar-thumb:hover { background: var(--brasa); }

/* Toda métrica em números tabulares (doutrina/Tipografia). */
.metrics, .pipe-line, .num { font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }

/* ── preloader: 0 a 100 e barra que enche, dissolve em ~1s ─────────────── */

#preloader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem;
  background: var(--breu);
  transition: opacity 900ms var(--entrada);
}
#preloader.saindo { opacity: 0; }

#preloader .conta {
  font-family: var(--face-display);
  font-size: clamp(70px, 13vw, 217px);
  font-variation-settings: 'wght' 800;
  font-variant-numeric: tabular-nums;
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--cal);
}

#preloader .barra { width: min(38vw, 420px); height: 2px; background: var(--cal-12); }
#preloader .barra i { display: block; height: 100%; width: 0; background: var(--brasa); }

/* ── revelação: linha a linha, atrás de máscara, com atraso encadeado ──── */
/* Nada aparece por corte seco: a máscara é overflow hidden e a linha sobe. */

/* A máscara precisa de folga embaixo: com line-height .86 num display de 187px a
   caixa da linha fica ~31px acima do fim do "g", e o overflow hidden decepava o
   descendente. O padding abre a máscara e a margem negativa devolve o espaço,
   então o ritmo vertical não muda. Em em, escala com cada tamanho. */
.linha { display: block; overflow: hidden; padding-bottom: .28em; margin-bottom: -.28em; }
.linha > span {
  display: block;
  transform: translate3d(0, 115%, 0);
  transition:
    transform 1000ms var(--entrada),
    font-variation-settings 1200ms var(--entrada);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.revelado .linha > span { transform: translate3d(0, 0, 0); }

.sobe {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 900ms var(--entrada), transform 900ms var(--entrada);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.revelado .sobe { opacity: 1; transform: none; }

/* ── nav ───────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1.25rem, 5vw, 4.5rem);
  background: rgba(35, 46, 38, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cal-12);
}

.brand {
  font-family: var(--face-display);
  font-variation-settings: 'wght' 800;
  font-size: 1.2rem;
  letter-spacing: -.02em;
}
.brand-accent { color: var(--brasa); }

.nav-links { display: inline-flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }

/* ── botões (sem sombra, sem raio — lei da casa) ───────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .82rem 1.5rem;
  font-family: var(--face-corpo);
  font-size: .95rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.btn-sm { padding: .5rem .95rem; font-size: .85rem; }

.btn-primary { background: var(--brasa); color: var(--tinta); border-color: var(--brasa); }
.btn-primary:hover { background: var(--cal); border-color: var(--cal); }

.btn-ghost { background: transparent; color: var(--cal); border-color: var(--cal-30); }
.btn-ghost:hover { border-color: var(--cal); background: var(--cal); color: var(--tinta); }

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(4rem, 11vh, 8rem) clamp(1.25rem, 5vw, 4.5rem) clamp(5rem, 12vh, 9rem);
  max-width: 1600px;
}

.badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .85rem;
  border: 1px solid var(--cal-12);
  font-size: .8rem;
  color: var(--cal-58);
  letter-spacing: .02em;
  margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
}

.dot { width: 6px; height: 6px; background: var(--brasa); flex: none; }

.hero h1 {
  font-family: var(--face-display);
  /* O display fica no PRÓPRIO h1, não num span interno: senão o h1 herda 15px do
     corpo e a escala de verdade some do estilo computado (e da semântica). */
  font-size: var(--display);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .86;
  margin-bottom: clamp(1.75rem, 4vh, 3rem);
}

/* A linha menor prepara; a linha grande é o display de verdade. */
/* letter-spacing herda o valor JÁ COMPUTADO do pai: -.045em a 187px vira -8.4px
   absolutos, que a 49px esmagam as letras umas nas outras. Tem de ser redeclarado. */
.h1-sm {
  font-size: clamp(26px, 3.4vw, 54px);
  letter-spacing: -.02em;
  line-height: 1.04;
  color: var(--cal-58);
}
.h1-xl { font-size: 1em; }
.h1-xl .hl { color: var(--brasa); }

/* O peso anima na entrada: 250 -> 800 no eixo variável da Bricolage. */
.hero h1 .linha > span { font-variation-settings: 'wght' 250; }
.revelado.hero h1 .linha > span { font-variation-settings: 'wght' 800; }

.sub {
  max-width: 54ch;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--cal-58);
  margin-bottom: clamp(2rem, 5vh, 3rem);
}

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.metrics {
  display: flex; flex-wrap: wrap; gap: .6rem 2.25rem;
  list-style: none;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cal-12);
  font-size: .88rem;
  color: var(--cal-58);
}
.metrics li { display: inline-flex; align-items: center; gap: .55rem; }

/* ── recursos ──────────────────────────────────────────────────────────── */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--cal-12);
  border-top: 1px solid var(--cal-12);
  border-bottom: 1px solid var(--cal-12);
}

.card {
  background: var(--breu);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
  transition: background 320ms ease;
}
.card:hover { background: #29352B; }

.card-icon { width: 26px; height: 26px; color: var(--brasa); margin-bottom: 1.5rem; }
.card-icon svg { width: 100%; height: 100%; }

.card h2 {
  font-family: var(--face-display);
  font-variation-settings: 'wght' 700;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -.025em;
  line-height: 1;
  margin-bottom: .85rem;
}

.card > p { color: var(--cal-58); margin-bottom: 1.5rem; }

.card ul { list-style: none; display: grid; gap: .7rem; }
.card li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .92rem;
  color: var(--cal-58);
}
.card li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 1px; background: var(--brasa);
}

.card-note {
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--cal-12);
  font-size: .85rem;
  color: var(--brasa);
}

/* ── A VIRADA: a seção inteira inverte na cor de destaque ──────────────── */
/* A doutrina: "a página respira escuro -> destaque -> claro". Aqui é o
   destaque, tomando a tela por completo — não um acento decorativo. */

.virada {
  background: var(--brasa);
  color: var(--tinta);
  padding: clamp(5rem, 14vh, 10rem) clamp(1.25rem, 5vw, 4.5rem);
}

.virada h2 {
  font-family: var(--face-display);
  font-weight: 800;
  font-size: clamp(44px, 7.5vw, 124px);
  letter-spacing: -.04em;
  line-height: .9;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  max-width: 16ch;
}

.pipe-line {
  font-family: var(--face-display);
  font-variation-settings: 'wght' 600;
  font-size: clamp(18px, 2.2vw, 30px);
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
}
.pipe-line span { color: var(--cal); padding: 0 .35rem; }

.virada .sub { color: var(--tinta-62); max-width: 58ch; margin-bottom: 0; }

/* ── rodapé: a página fecha no claro ───────────────────────────────────── */

.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.25rem, 5vw, 4.5rem);
  background: var(--cal);
  color: var(--tinta-62);
  font-size: .88rem;
}
.footer a { color: var(--tinta); border-bottom: 1px solid var(--tinta-20); padding-bottom: 1px; }
.footer a:hover { border-color: var(--tinta); }

/* ── acessibilidade ────────────────────────────────────────────────────── */

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

/* Movimento reduzido: tudo visível, nada anima. O conteúdo nunca depende da
   animação para existir. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .linha > span,
  .sobe {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .hero h1 .linha > span { font-variation-settings: 'wght' 800; }
  #preloader { display: none; }
}

@media (max-width: 720px) {
  .nav { padding: .9rem 1.25rem; }
  .nav-links { gap: .35rem; }
  .metrics { gap: .5rem 1.25rem; }
}

/* Oito botões ao lado da marca: num celular os links descem para baixo dela e ocupam a
   largura toda (uma linha a menos aos 360px). No tablet ficam ao lado, que é mais baixo. */
@media (max-width: 480px) {
  .nav { flex-wrap: wrap; }
}