/* ══════════════════════════════════════════════════════════════════════
   01 · BASE — reinício, tokens e tipografia
   Site Lugar do Futuro · valores colados de DOCS/01_sistema-visual.md §1 e §3
   Nenhuma cor fora dos tokens abaixo (§1.1).
   ══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: dark;

  /* ── COR · marca (Pantone, vindo do vetor original — não converter de novo) ── */
  --lf-marinho:      #001A70;   /* PANTONE 662 C */
  --lf-azul:         #003DA5;   /* PANTONE 293 C */
  --lf-luz:          #FFC98A;   /* único acento quente */
  --lf-luz-forte:    #FFE7C6;
  --lf-branco:       #FFFFFF;

  /* ── COR · campo (profundidades do azul, já usadas na base) ── */
  --lf-noite:        #04091F;   /* fundo padrão do site inteiro */
  --lf-noite-2:      #071231;   /* miolo do campo — telas 01 e 03 */
  --lf-noite-3:      #0A1738;   /* miolo mais claro — tela 04 */
  --lf-tinta-foto:   #0E2A6E;   /* tinta que leva foto neutra para o campo LF (§6.3) */

  /* ── COR · interface ── */
  --lf-ui:           #9BA9C9;              /* etiqueta, metadado — 8,38:1 sobre noite */
  --lf-texto:        #FFFFFF;              /* 19,74:1 */
  --lf-texto-2:      rgba(255,255,255,.72);/* 10,19:1 — apoio */
  --lf-texto-3:      rgba(255,255,255,.62);/* 7,75:1 — legenda. PISO ABSOLUTO */
  --lf-linha:        rgba(255,255,255,.14);
  --lf-linha-forte:  rgba(255,255,255,.24);

  /* ── COR · vidro (translucidez de verdade, §11.4) ── */
  --lf-vidro:        rgba(255,255,255,.055);
  --lf-vidro-alto:   rgba(255,255,255,.09);   /* hover */
  --lf-vidro-borda:  rgba(255,255,255,.13);
  --lf-vidro-desfoque: blur(26px) saturate(135%);
  --lf-vidro-brilho: inset 0 1px 0 rgba(255,255,255,.16);
  --lf-sombra:       0 30px 90px rgba(0,0,0,.42);
  --lf-sombra-alta:  0 40px 110px rgba(0,0,0,.52);

  /* ── TIPOGRAFIA · famílias (duas ópticas da mesma família, §3.1) ── */
  --lf-fonte-display: "Segoe UI Variable Display", ui-sans-serif, "Segoe UI",
                      system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --lf-fonte-texto:   "Segoe UI Variable Text", ui-sans-serif, "Segoe UI",
                      system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ── TIPOGRAFIA · escala (interpolada de 375px a 1920px) ── */
  --lf-tipo-display:  clamp(44px, 26px + 4.40vw, 108px);
  --lf-tipo-titulo:   clamp(30px, 20px + 2.60vw, 62px);
  --lf-tipo-lead:     clamp(18px, 15px + 0.85vw, 26px);
  --lf-tipo-corpo:    clamp(15px, 13.6px + 0.38vw, 19px);
  --lf-tipo-legenda:  clamp(13px, 12.2px + 0.22vw, 15px);
  --lf-tipo-etiqueta: clamp(11px, 10.4px + 0.16vw, 13px);

  /* ── ESPAÇAMENTO · base 4, degraus fixos ── */
  --lf-esp-1: 4px;   --lf-esp-2: 8px;   --lf-esp-3: 12px;  --lf-esp-4: 16px;
  --lf-esp-5: 24px;  --lf-esp-6: 32px;  --lf-esp-7: 48px;  --lf-esp-8: 64px;
  --lf-esp-9: 96px;  --lf-esp-10: 128px; --lf-esp-11: 160px;

  /* ── ESPAÇAMENTO · fluido ── */
  --lf-margem:        clamp(24px, 6vw, 160px);          /* margem lateral, §4.2 */
  --lf-respiro-secao: clamp(96px, 14vh, 220px);         /* padding vertical de seção */
  --lf-respiro-bloco: clamp(28px, 3.4vw, 56px);         /* entre blocos internos */
  --lf-vazio:         clamp(120px, 20vh, 260px);        /* o nada entre assuntos */

  /* ── LARGURA (§4.1) ── */
  --lf-largura:       min(100% - 2 * var(--lf-margem), 1240px);
  --lf-largura-larga: min(100% - 2 * var(--lf-margem), 1800px); /* trilho do carrossel */

  /* ── FORMA ── */
  --lf-raio-p:   14px;
  --lf-raio-m:   22px;
  --lf-raio-g:   34px;    /* painel — valor da base aprovada, não mexer */
  --lf-raio-xg:  44px;    /* quadro do carrossel */
  --lf-raio-pilula: 999px;
  --lf-superelipse: 2.4;  /* expoente do canto contínuo, §11.5 */

  /* ── MOVIMENTO · duração ── */
  --lf-dur-toque:    140ms;  /* pressionado */
  --lf-dur-rapida:   220ms;  /* hover, foco */
  --lf-dur-media:    420ms;  /* troca de estado */
  --lf-dur-lenta:    760ms;  /* revelação de bloco */
  --lf-dur-entrada:  900ms;  /* revelação da capa */
  --lf-dur-carrossel: 560ms;
  --lf-dur-ambiente: 26s;    /* ciclo de fundo — mesma faixa da base (26–38s) */

  /* ── MOVIMENTO · curva ── */
  --lf-ease-entra:  cubic-bezier(.16,1,.30,1);    /* chega e assenta, sem quicar */
  --lf-ease-sai:    cubic-bezier(.32,0,.67,0);    /* sai acelerando */
  --lf-ease:        cubic-bezier(.22,.61,.36,1);  /* padrão de interface */
  --lf-ease-duplo:  cubic-bezier(.65,0,.35,1);    /* ida e volta */
  --lf-ease-luz:    cubic-bezier(.37,0,.63,1);    /* respiração de fundo */

  /* ── CAMADA ── */
  --lf-z-foto:      0;
  --lf-z-campo:     1;   /* fundo da seção (fitotaxia, brilhos) — ver nota abaixo */
  --lf-z-tinta:     1;
  --lf-z-luz:       2;
  --lf-z-leitura:   3;   /* véu da capa E costura entre seções: sempre acima do campo */
  --lf-z-conteudo:  5;
  --lf-z-painel:    6;
  --lf-z-controle:  7;
  --lf-z-fixo:      20;
  --lf-z-pular:     100;  /* link "ir para o conteúdo" */

  /* REVISÃO design 15/08/2026 — --lf-z-campo era 4, acima de --lf-z-leitura.
     A costura entre seções (§5.2, camada A) é uma camada de leitura: com o
     campo por cima dela, os brilhos da seção 03 ficavam CORTADOS na borda e
     apareciam duas emendas duras de largura inteira — exatamente o que o §5.2
     proíbe. O campo é o fundo da seção: seu lugar é 1. */
}

/* ── Recuo: a borda esquerda REAL da coluna de conteúdo, em qualquer largura.
   Abaixo de ~1440px é a margem; acima, a coluna trava em 1240px e centraliza,
   e a margem deixa de descrever onde o texto começa. Sem este valor, o primeiro
   quadro do carrossel desalinha do título: 14px em 1440, 225px em 1920.
   (REVISÃO design 15/08/2026 — §8.3 pede o alinhamento, o §1 não dava o token.) */
:root{
  --lf-recuo: max(var(--lf-margem), calc((100% - 1240px) / 2));
}

/* ══ REINÍCIO ═══════════════════════════════════════════════════════ */

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

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

body{
  margin:0;
  font-family: var(--lf-fonte-texto);
  font-size: var(--lf-tipo-corpo);
  font-weight: 400;
  line-height: 1.62;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: var(--lf-texto-2);
  background: var(--lf-noite);
  text-rendering: optimizeSpeed;
  overflow-x: hidden;   /* trava a rolagem lateral: nenhum campo sangra para fora */
}

img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; }

/* ══ TIPOGRAFIA ═════════════════════════════════════════════════════ */

h1,h2{
  font-family: var(--lf-fonte-display);
  font-weight: 200;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1 b, h2 b{ font-weight: 500; display:block; }   /* o único recurso de ênfase */
p{ text-wrap: pretty; margin: 0; }

/* Display da capa — 44px a 108px, sempre acima de 40px, logo sempre peso 200 (§3.3) */
.display{
  font-size: var(--lf-tipo-display);
  line-height: .98;
  letter-spacing: -.032em;
  max-width: 20ch;
  color: var(--lf-texto);
}

/* Título de seção */
.titulo{
  font-size: var(--lf-tipo-titulo);
  line-height: 1.06;
  letter-spacing: -.020em;
  max-width: 22ch;
  color: var(--lf-texto);
}
/* Abaixo de 768px o título cai de 40px e o peso 200 começa a esfarelar (§3.3) */
@media (max-width: 767px){
  .titulo{ font-weight: 300; }
}

.lead{
  font-family: var(--lf-fonte-texto);
  font-size: var(--lf-tipo-lead);
  font-weight: 300;
  line-height: 1.36;
  letter-spacing: -.006em;
  max-width: 34ch;
  color: var(--lf-texto-2);
}

.corpo{
  font-size: var(--lf-tipo-corpo);
  line-height: 1.62;
  max-width: 62ch;
  color: var(--lf-texto-2);
}

.legenda{
  font-size: var(--lf-tipo-legenda);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--lf-texto-3);
}

/* Etiqueta numerada — herda a da base aprovada: número em --lf-luz,
   assunto separado por um filete, nunca por um caractere (§4.4) */
.etiqueta{
  display:flex;
  align-items:center;
  gap: var(--lf-esp-3);
  font-size: var(--lf-tipo-etiqueta);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lf-ui);
}
.etiqueta__n{ color: var(--lf-luz); font-weight:600; }
.etiqueta__p{
  border-left: 1px solid var(--lf-linha);
  padding-left: var(--lf-esp-3);
}
.etiqueta--centro{ justify-content:center; }

/* ══ FOCO (§11.1) ═══════════════════════════════════════════════════
   Um só tratamento na página inteira. `outline:none` é proibido.
   [tabindex="0"] e não [tabindex]: o alvo do link de salto tem
   tabindex="-1" e nunca é alcançado pelo Tab — marcá-lo desenharia um
   retângulo âmbar em volta da seção inteira. Nenhum elemento que o
   teclado alcança fica sem indicador. */

:where(a,button,[tabindex="0"]):focus-visible{
  outline: 2px solid var(--lf-luz);
  outline-offset: 3px;
  border-radius: inherit;
  box-shadow: 0 0 0 6px rgba(255,201,138,.18);
  transition: box-shadow var(--lf-dur-rapida) var(--lf-ease);
}

/* ══ LINK DE SALTO ══════════════════════════════════════════════════ */

.pular{
  position: fixed;
  z-index: var(--lf-z-pular);
  top: var(--lf-esp-5);
  left: var(--lf-esp-5);
  padding: var(--lf-esp-3) var(--lf-esp-5);
  border-radius: var(--lf-raio-pilula);
  font-size: var(--lf-tipo-etiqueta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lf-texto);
  transform: translateY(-160%);
  transition: transform var(--lf-dur-media) var(--lf-ease-entra);
}
.pular:focus{ transform: none; }