/*
 * A folha comum do site do Plexus (V1, 12/10/2026): a página inicial e a política usam esta folha.
 * Uma cara só, a «cinema» da V0 (a Legora nas cores do Plexus). A escala é a da frente 4 da pesquisa:
 * três tamanhos de letra, nada em negrito. Fora da conta ficam só a palavra «Plexus» (a letra do
 * front, Bricolage 700 em 20) e os pedaços da tela do produto (os tokens do front).
 *
 * V2 (12-13/10/2026), a auditoria do verde: o verde da marca é #4a643c (a escolha dele de 02/10, «gostei
 * mais escuro»), o mesmo do front. Ele vale igual nos botões (parado, sob o ponteiro e pressionado), na
 * faixa, nos links, na faixa da confiança, no cartão do fim e no laço. Nenhum tom derivado de verde na página;
 * a única exceção é a réplica da tela do produto, que segue os tokens do front.
 *
 * V3 (13/10/2026): sai a faixa verde de cima («Versão de teste, por convite. Começa pelo Gmail.»), que ficou falsa.
 */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/plex-pt-400-600.woff2') format('woff2-variations'), url('../fonts/plex-pt-400-600.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  /* só os glifos da palavra «Plexus», na instância 700 e no tamanho óptico 96 (1,2 KB) */
  font-family: 'Plexus Marca';
  src: url('../fonts/bricolage-700-96-plexus.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  /* a voz do Plexus nos títulos (26/10/2026, a opção A): a Bricolage no tamanho óptico 96, pesos 400 a 700,
     só o latim do português (33 KB); a mesma voz do front, nos mesmos papéis */
  font-family: 'Plexus Voz';
  src: url('../fonts/plexus-voz.woff2') format('woff2-variations'), url('../fonts/plexus-voz.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* as cores: o verde da identidade como único destaque, um escuro só (o do topo) */
  --paper: #fafaf9;
  --stone: #ecebe6;
  --surface: #ffffff;
  --ink: #1b1b19;
  --ink-soft: #5c5b56;
  --ink-faint: #6f6e69;
  --accent: #4a643c;
  --dark: var(--accent);
  --dark-ink: #ffffff;
  --dark-soft: rgba(255, 255, 255, 0.86);
  --line: rgba(27, 27, 25, 0.12);
  --line-strong: rgba(27, 27, 25, 0.22);

  --font-ui: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* a voz: os títulos grandes e, nas telas do produto, os mesmos lugares do front (o título da página, a frase
     do fim, o título da caixa); nos títulos do site o peso normal (o médio, 500, a 48 e 56, pesa como negrito,
     e o site não usa negrito; medido lado a lado em 26/10/2026) e o espaçamento do front, -0,01em */
  --font-voice: 'Plexus Voz', var(--font-ui);
  --weight-voice: 400;
  --tracking-voice: -0.01em;

  /* os três tamanhos (frente 4, seção 5.1) */
  --size-display: clamp(32px, calc(1.524vw + 26.06px), 48px);
  --size-lead: 18px;
  --size-text: 15px;
  --leading-display: 1.1;
  --leading-lead: 1.45;
  --leading-text: 1.6;
  --tracking-display: -0.02em;

  /* as larguras e os espaços (frente 4, seções 5.2 a 5.4) */
  --wrap: 1200px;
  --gutter: 32px;
  --measure-title: 760px;
  --measure-lead: 30em;
  --measure-text: 30em;
  --section: 112px;
  --space-head: 24px;
  --space-block: 56px;
  --space-row: 40px;
  --nav-h: 64px;
  --control: 36px;
  --field-pad: 4px;
  --field-w: 400px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 1020px) {
  :root { --section: 96px; --gutter: 24px; }
}
@media (max-width: 640px) {
  :root { --size-lead: 17px; --gutter: 24px; --section: 96px; --space-block: 48px; --nav-h: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
/* a rolagem suave só nos saltos dentro da página inicial; na política, o salto para a seção 10 é direto */
html:has(body.over) { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--size-text)/var(--leading-text) var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p, h1, h2, h3, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.display {
  font-family: var(--font-voice);
  font-size: var(--size-display); font-weight: var(--weight-voice); line-height: var(--leading-display);
  letter-spacing: var(--tracking-voice); text-wrap: balance;
}
.lead { font-size: var(--size-lead); line-height: var(--leading-lead); text-wrap: pretty; }
.soft { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
p { text-wrap: pretty; }
.nw { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* as marcas visíveis do que ainda falta (o material de «Quem faz», as perguntas da política, os termos) */
mark.q {
  background: #fff3c4; color: #5c4700; padding: 1px 4px; border-radius: 4px;
  font-size: var(--size-text); font-weight: 400;
}

/* O foco em duas cores, que aparece no verde, no creme e no escuro (frente 3, seção 5) */
:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 4px #0d1016; }
input:focus-visible { outline: none; box-shadow: none; }

/* A palavra da marca, na letra do front: o .wordmark da barra lateral (Bricolage, opsz 96, 700, 20, -0,01em) */
.wordmark {
  font-family: 'Plexus Marca', 'Bricolage Grotesque', var(--font-ui);
  font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1.25;
}
/* a do centro da barra, sutilmente maior (V2, o pedido dele): 22 em vez de 20, o laço acompanha */
.nav .brand .wordmark { font-size: 22px; }
.nav .brand svg { width: 26px; height: 27px; }

/* O salto para o conteúdo, escondido até receber o foco do teclado */
.pular { position: absolute; left: 16px; top: -64px; z-index: 40; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; }
.pular:focus { top: 8px; }

/* A barra: sobre o topo verde ela é transparente, e ao rolar ganha o creme (a Legora) */
.nav {
  position: sticky; top: 0; z-index: 30; background: var(--paper); color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease);
}
.nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--nav-h); }
.brand { grid-column: 2; display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; border-radius: 6px; }
.brand svg { width: 24px; height: 25px; }
/* os links em 14, e sob o ponteiro o texto apaga a 60% (o efeito da Legora, medido em 16/10: a opacidade de 1 a 0,6 em cerca de 200 ms) */
.nav-links { grid-column: 1; grid-row: 1; display: flex; gap: 28px; font-size: 14px; }
.nav-links a { text-decoration: none; color: inherit; transition: opacity 200ms var(--ease); }
.nav-links a:hover { opacity: 0.6; }
.nav-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 24px; }
.nav-end a.back { text-decoration: none; }
/* o botão da barra um pouco menor que os outros (o pedido dele em 16/10): 32 de altura, texto 14 */
.nav .btn { height: 32px; padding: 0 14px; gap: 8px; font-size: 14px; }
.nav .btn .arrow { width: 18px; height: 18px; margin-right: -7px; }
.nav .btn .arrow svg { width: 11px; height: 11px; }
/* com o roteiro de pé, a barra começa transparente sobre o topo e o roteiro marca quando a página rolou */
.js .over .nav:not(.rolou) { background: transparent; border-bottom-color: transparent; color: #fff; }
.js .over .nav { margin-bottom: calc(-1 * var(--nav-h) - 1px); }

/* Os botões: pílula de 36, texto 15 em 450, sempre no verde da marca. Sob o ponteiro a seta anda
 * um pouco; pressionado, uma sombra extremamente sutil (o pedido dele). O verde não muda em nenhum estado. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--control); padding: 0 16px; border-radius: 999px; border: 0;
  font: 450 var(--size-text)/1 var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--accent); color: #fff;
  transition: box-shadow 160ms var(--ease);
}
.btn:active { box-shadow: 0 1px 2px rgba(13, 16, 10, 0.10), 0 2px 6px -2px rgba(13, 16, 10, 0.12); }
.btn .arrow { display: grid; place-items: center; width: 20px; height: 20px; margin-right: -8px; border-radius: 50%; background: #fff; color: var(--accent); transition: transform 200ms var(--ease); }
.btn:hover .arrow { transform: translateX(2px); }
.btn .arrow svg { width: 12px; height: 12px; }
/* sobre o fundo em movimento, um fio claro separa o botão do verde de trás */
.js .over .nav:not(.rolou) .btn { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.js .over .nav:not(.rolou) .btn:active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 1px 2px rgba(13, 16, 10, 0.10), 0 2px 6px -2px rgba(13, 16, 10, 0.12); }

/* O pedido de entrada: o desenho da caixa da V0 (a pílula translúcida com o fio claro e o vidro fosco)
 * no tamanho da V1 (46 de altura, 400 de largura, o botão de 36). Ao clicar, o fio clareia e aparece uma
 * sombra extremamente sutil, no lugar do halo. Sem JavaScript, ele envia sozinho. */
.ask { max-width: var(--field-w); }
.ask form { position: relative; }
.ask .field {
  display: flex; gap: 4px; padding: var(--field-pad);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.ask .field:focus-within { border-color: var(--accent); box-shadow: 0 1px 2px rgba(13, 16, 10, 0.06), 0 6px 16px -10px rgba(13, 16, 10, 0.22); }
.ask input[type=email] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 400 var(--size-text)/1 var(--font-ui); color: var(--ink); padding: 0 8px 0 18px;
}
.ask input::placeholder { color: var(--ink-faint); opacity: 1; }
/* O e-mail que o navegador sugere e preenche pinta o campo de azul claro e a letra de escuro (o defeito que ele achou
 * em 16/10): o fundo do navegador fica para depois de uma espera que nunca acaba, e a letra fica a do campo */
.ask input:-webkit-autofill, .ask input:-webkit-autofill:hover, .ask input:-webkit-autofill:focus, .ask input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  -webkit-transition: background-color 600000s 0s, color 600000s 0s; transition: background-color 600000s 0s, color 600000s 0s;
}
.ask input:autofill { background-color: transparent; }
.ask .isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ask .erro { margin-top: 8px; color: #b4402f; }
.ask .erro:empty { display: none; }
.ask .aviso:empty { margin-top: 0; }
.ask .aviso { margin-top: 12px; }
.ask .aviso:focus, .ask .aviso:focus-visible { outline: none; box-shadow: none; }
.ask .note { margin-top: 12px; color: var(--ink-soft); }
.ask.feito form, .ask.feito .note { display: none; }
.ask.feito .aviso { margin-top: 0; }

/* O rodapé: colunas curtas e o P gigante no verde (a Legora) */
/* O rodapé no esqueleto da Circleback (16/10, a opção A dele): três colunas com título e uma última linha
 * separada por um fio, com o laço, o © e «Feito no Brasil»; os links apagam a 60% sob o ponteiro, como na barra */
footer { padding: 64px 0 40px; overflow: hidden; }
footer .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
footer h2 { font-size: 14px; font-weight: 400; color: var(--ink-soft); margin-bottom: 16px; }
footer ul { list-style: none; display: grid; gap: 10px; }
footer a { color: var(--ink); text-decoration: none; transition: opacity 200ms var(--ease); }
footer a:hover { opacity: 0.6; }
footer .base { display: flex; align-items: center; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; }
footer .brand { justify-content: flex-start; width: max-content; color: var(--ink); }
footer .brand svg { width: 20px; height: 21px; }
footer .brand .wordmark { font-size: 17px; }
footer .feito { margin-left: auto; }

@media (max-width: 1020px) {
  .nav-links { display: none; }
  footer .cols { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  footer .cols > :last-child { grid-column: 1 / -1; }
  footer .base { flex-wrap: wrap; row-gap: 8px; margin-top: 48px; }
}
@media (max-width: 640px) {
  .nav .wrap { grid-template-columns: auto 1fr; }
  .brand { grid-column: 1; }
  .nav-end { grid-column: 2; }
  .nav .btn { height: 40px; }
  /* o campo e o botão numa linha só: 44 de toque e o texto em 16 no campo (o Safari aproxima abaixo de 16) */
  .ask .field { padding: 4px; }
  .ask input[type=email] { height: 44px; font-size: 16px; padding: 0 4px 0 14px; }
  .ask .btn { height: 44px; padding: 0 16px; }
  .ask .btn .arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}