/* ARTEN — o final transplantado da variante fmrg + retoques das seções
   2 e 3 da LP de produção. */

/* seção 2: o ponto chevron como textura por cima da cena (background
   "legal" sem nova imagem: o zigzag da marca em relevo sutil) */
.malha__preso::after {
  content: '';
  position: absolute; inset: 0;
  /* o radial é o scrim da frase: no clímax da inundação o "vestir." caía
     sobre o suéter creme a ~1,5:1 de contraste */
  background: radial-gradient(60% 42% at 50% 46%, rgb(0 0 0 / .45), transparent 74%),
              repeating-linear-gradient(115deg, transparent 0 7px, #ffffff06 7px 8px, transparent 8px 15px),
              repeating-linear-gradient(65deg, transparent 0 7px, #ffffff06 7px 8px, transparent 8px 15px);
  z-index: 2;
  pointer-events: none;
}

/* seção 3: a outra modelo, à direita do manifesto, atrás do ruído */
.manifesto { position: relative; overflow: hidden; }
.manifesto__modelo {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: min(30vw, 26rem); margin: 0;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to left, black 55%, transparent);
  mask-image: linear-gradient(to left, black 55%, transparent);
}
.manifesto__modelo img { width: 100%; height: auto; display: block; }
@media (max-width: 809.98px) { .manifesto__modelo { width: 52vw; opacity: .3; } }

/* rodapé do fim: herda o fmrg-baralho.css; só o respiro local */
.rodape--fim { background: var(--ink); color: var(--paper); position: relative; overflow: clip; }

/* o manifesto abre em MARINHO — quebra franca contra o preto da malha,
   o mesmo papel do painel de área cheia do fmrg */
.manifesto { background: var(--product-marinho) !important; }

/* O PALCO DO TRICÔ, remodelado: overlay absoluto da seção inteira com
   um sticky interno. Consequências (e é por isso que é assim):
   · não ocupa slot próprio — os cartões começam já na entrada da seção,
     com a peça se tricotando ao lado (nada de primeira tela vazia);
   · o sticky interno é confinado ao overlay = à seção — o suéter NUNCA
     vaza por cima dos passos/CTA;
   · pointer-events none no overlay inteiro: o CTA da saída, que fica
     "embaixo" dele, continua clicável.

   O motor 3D (js/trico3d.js, ex-variantes/fmrg-trico.js) segue a régua
   /webgl-premium: 1 draw call via InstancedMesh, sem loop de rAF (renderiza
   sob demanda), e o IntersectionObserver de js/fim.js pausa a GPU quando
   esta seção sai da tela — o layout aqui não muda por causa disso, só o
   custo de rolar as outras nove telas da LP cai a zero. */
.baralho { position: relative; }
.baralho .baralho__trico {
  position: absolute; inset: 0;
  height: auto; margin: 0;
}
.baralho .baralho__trico-preso { position: sticky; top: 0; height: 100svh; }

/* A SAÍDA — o último tempo da seção: a peça pronta ao lado, e o CTA.
   O suéter 3D entrega a peça; o botão entrega a pessoa pro formulário. */
.baralho__saida {
  height: 100svh;
  display: flex; align-items: center;
  padding-inline: var(--gutter);
  position: relative; z-index: 2;
}
.baralho__saida-interno {
  max-width: var(--container); margin-inline: auto; width: 100%;
  display: grid; gap: var(--space-8); justify-items: start;
}
.baralho__saida-linha {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: var(--leading-display);
  color: var(--paper);
}
.baralho__saida-linha em { font-style: italic; }
.baralho__cta {
  display: inline-block;
  padding: var(--space-3) var(--space-8);
  border: 1px solid var(--paper);
  color: var(--paper); text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: background var(--duration-hover) ease, color var(--duration-hover) ease;
}
.baralho__cta:hover { background: var(--paper); color: var(--ink); }
/* dentro do cartão "Pronto" o grid esticaria o botão de borda a borda */
.cartao__texto .baralho__cta { justify-self: start; }

@media (max-width: 809.98px) {
  /* background: none é vital — o fmrg-baralho.css pinta a cortina no
     próprio __trico (que lá tem 40svh); aqui ele cobre a seção inteira,
     e herdar aquela cortina apagava todos os cartões. Ela vive no
     __trico-preso agora. */
  .baralho .baralho__trico { position: absolute; inset: 0; height: auto; margin: 0; background: none; }
  /* A peça descia colada no teto e o texto ficava órfão no meio, com um
     vão morto entre os dois (pedido do Fernando, 05/08): a cortina cresce
     pra 54svh e o canvas ancora no PÉ dela — o suéter flutua a ~14svh do
     topo e o texto do cartão entra logo abaixo, conjunto fechado.
     O tamanho do suéter DENTRO dessa faixa é responsabilidade do JS
     (js/trico3d.js, medir()): a faixa aqui é baixa e larga, e esse aspect
     sozinho já empurrava a câmera perto demais (composição virava "cesto"
     colado nas bordas) — a folga extra por aspect mora lá, não aqui. */
  .baralho .baralho__trico-preso {
    height: 54svh;
    background: linear-gradient(var(--ink) 86%, transparent);
  }
  .baralho .baralho__trico canvas { top: auto; bottom: 0; height: 40svh; }
  .baralho__saida { height: auto; padding-block: var(--space-24); }
}
@media (max-width: 809.98px) and (prefers-reduced-motion: no-preference) {
  /* o texto sobe pro pé da cortina. O gate é a classe que js/trico3d.js
     só põe quando o WebGL montou de verdade: sem motion OU sem 3D (GPU
     bloqueada, JS morto), não existe suéter pra reservar espaço e o vão
     de 58svh viraria meia tela de breu antes do texto. */
  html.trico-3d .cartao__face { align-content: start; padding-top: 58svh; }
}

@media (prefers-reduced-motion: reduce) {
  .baralho .baralho__trico { display: none; }
}

/* ==================================================================
   FRAUNCES — a fonte da ARTEN (aprovada 01/08), portada da variante.
   Eixo óptico máximo, peso 340. Os tokens globais ficam intactos: a
   promoção a --font-display global é papel do manual v1.1.
   ================================================================== */
:root { --font-display: "Fraunces", Georgia, serif; }
h1, h2, h3, .wordmark, .malha__frase, .manifesto__linha, .cartao__titulo,
.baralho__saida-linha, .passos__texto, .rodape__assinatura, .hero__lado,
.captacao__titulo, .usa__titulo, .carregando, .waitlist__ok-linha {
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 340;
}

/* ==================================================================
   CTA — sucesso tipográfico (troca, não acréscimo) + submit promovido
   ao gêmeo do botão que trouxe a pessoa + o fio de foco sob o campo
   ================================================================== */
.waitlist__form { position: relative; }
.waitlist__label, .waitlist__form input, .waitlist__form button,
.waitlist__consentimento { transition: opacity 200ms cubic-bezier(.23,1,.32,1); }
.waitlist.is-ok .waitlist__label,
.waitlist.is-ok .waitlist__form input,
.waitlist.is-ok .waitlist__form button,
.waitlist.is-ok .waitlist__consentimento { opacity: 0; pointer-events: none; }
.waitlist__ok-linha {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-title);
}
.waitlist__ok-linha em { font-style: italic; }
.waitlist__ok-nota {
  display: block; margin-top: var(--space-2);
  font-size: var(--text-caption); color: var(--text-muted);
}
/* O `display: grid` aqui vence a regra `[hidden] { display: none }` do UA:
   sem visibility/pointer-events o "ok" fica deitado — invisível, mas
   presente — por cima do form inteiro e ENGOLE todo clique no campo e no
   botão. `display: none` resolveria, mas mataria a transição (o JS tira o
   hidden e põe .is-ok no mesmo tick: sem estilo inicial, nada anima).
   visibility dá o mesmo isolamento, não bloqueia ponteiro, tira o
   role="status" da árvore de acessibilidade até a hora certa — e como
   transiciona de forma discreta, o fade continua inteiro. */
.waitlist__ok {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: start;
  visibility: hidden; pointer-events: none;
  opacity: 0; translate: 0 8px; filter: blur(2px);
  transition: opacity .6s var(--ease-editorial) .15s, translate .6s var(--ease-editorial) .15s, filter .6s var(--ease-editorial) .15s, visibility 0s .15s; }
.waitlist.is-ok .waitlist__ok { visibility: visible; opacity: 1; translate: 0 0; filter: none; }
html.sem-motion .waitlist__ok { transition: none; translate: 0 0; }

.waitlist__form button {
  padding: var(--space-3) var(--space-8);
  border: 1px solid currentColor;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--duration-hover) ease, color var(--duration-hover) ease;
}
.waitlist__form button:hover { background: var(--ink); color: var(--paper); }

/* o fio que se estica sob o campo — eco do tricô, custo zero */
.waitlist__campo { position: relative; display: block; flex: 1 1 12rem; }
.waitlist__campo input { width: 100%; }
.waitlist__campo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-reveal) var(--ease-tecido);
}
.waitlist__campo:focus-within::after { transform: scaleX(1); }
html.sem-motion .waitlist__campo::after { transition: none; }

/* no form em coluna (mobile) o flex-basis de 12rem do campo viraria
   ALTURA — 190px de vão entre o e-mail e o botão. Basis some, o campo
   mede pelo conteúdo. */
@media (max-width: 560px) {
  .waitlist__campo { flex: 0 0 auto; }
}

/* a etiqueta do rodapé em tamanho de gente — 220x340 sumia na dobra */
.rodape--fim .rodape__etiqueta {
  width: 300px; height: 400px;
  left: auto; right: 10%;
  top: 1.5rem;
}
@media (max-width: 809.98px) { .rodape--fim .rodape__etiqueta { display: none; } }

/* ==================================================================
   MANIFESTO — só tipografia. O ruído das perguntas é o visual da
   seção (a foto se mudou pra rotina), e ele SE DISSOLVE conforme você
   rola: o espelho invertido da seção 2 — lá a pergunta entra em foco,
   aqui as perguntinhas saem. Repouso (--dissolve:0) = tudo legível.
   ================================================================== */
/* evidentes a seção INTEIRA, mas coadjuvantes: opacidade quase constante
   (0.65 → 0.55) e blur fixo de 2px — presença contínua, um degrau
   abaixo do manifesto, sem o arco de dissolver. */
.manifesto__ruido span {
  filter: blur(1px);
  opacity: calc(0.8 - var(--dissolve, 0) * 0.1);
}
/* celular: a coluna da direita não existe — as compridas do meio sairiam
   cortadas no meio da palavra pelo overflow. Ficam as das faixas de cima
   e de baixo; duas se realocam pra não vazar. */
@media (max-width: 809.98px) {
  .manifesto__ruido span:nth-child(7),
  .manifesto__ruido span:nth-child(8),
  .manifesto__ruido span:nth-child(10),
  .manifesto__ruido span:nth-child(12),
  .manifesto__ruido span:nth-child(14) { display: none; }
  .manifesto__ruido span:nth-child(3) { left: 10% !important; top: 16% !important; }
  .manifesto__ruido span:nth-child(5) { left: 42% !important; }
}
.manifesto__ruido span.g { font-size: 1.35em; }
.manifesto__ruido span.p { font-size: 0.8em; }
html.sem-motion .manifesto__ruido span { filter: none; opacity: .4; }

/* ==================================================================
   O SISTEMA DE REVELAR, portado da variante (fmrg-revelar.js).
   Regra de sempre: o repouso invisível SÓ existe sob .revelar-ligado,
   que o próprio módulo aplica — script quebrado = página legível.
   ================================================================== */
.rv-p { white-space: nowrap; }
.rv-c, .rv-l { display: inline-block; }
.rv-l { white-space: pre-wrap; }
.revelar-ligado [data-revelar] .rv-c,
.revelar-ligado [data-revelar] .rv-l {
  opacity: .001;
  transform: translateY(10px);
  transition: filter .4s cubic-bezier(.12,.23,.5,1), opacity .4s cubic-bezier(.12,.23,.5,1), transform .4s cubic-bezier(.12,.23,.5,1);
}
.revelar-ligado [data-revelar="titulo"] .rv-c { filter: blur(10px); }
.revelar-ligado [data-revelar="corpo"]  .rv-l { filter: blur(2px); }
.rv-pronto .rv-c, .rv-pronto .rv-l { filter: none !important; opacity: 1 !important; transform: none !important; }
.rv-sem-transicao, .rv-sem-transicao * { transition: none !important; }

/* máscara das fotos: sobem do próprio recorte (indigo §1.5c, 102%) */
.mascara-foto { display: block; overflow: hidden; width: 100%; height: 100%; }
.usa__item .mascara-foto img { width: 100%; height: 100%; object-fit: cover; }
.revelar-ligado [data-revelar="mascara"] img {
  transform: translateY(102%);
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.revelar-ligado .usa__item--b [data-revelar="mascara"] img { transform: translateY(-102%); }
.usa__item--b [data-revelar="mascara"] img { transition-delay: .1s; }
.usa__item--c [data-revelar="mascara"] img { transition-delay: .2s; }
[data-revelar="mascara"].rv-pronto img { transform: translateY(0) !important; }

/* ==================================================================
   SEÇÃO 5 (desktop) — colagem editorial: a seção 4 é o tríptico
   full-bleed cerrado; esta é o oposto deliberado — assimetria, respiro
   de galeria e paralaxe (cada foto deriva numa velocidade, js/fim.js).
   ================================================================== */
@media (min-width: 900px) {
  .rotina .usa__grade {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: none;
    gap: 0;
    align-items: start;
  }
  .rotina .usa__item--a { grid-column: 1 / 6;  grid-row: 1; aspect-ratio: 4 / 5; }
  .rotina .usa__item--b { grid-column: 8 / 12; grid-row: 1; aspect-ratio: 3 / 4; margin-top: 22vh; }
  .rotina .usa__item--c { grid-column: 4 / 9;  grid-row: 2; aspect-ratio: 3 / 4; margin-top: -10vh; z-index: 1; }
  .rotina .usa__item { will-change: translate; }
}

/* ==================================================================
   SEÇÃO 4 — O PROVADOR (era o tríptico de painéis-hover do 21tsi).
   Virou apresentação de produto: foto ghost grande + escolha de ponto
   e cor. A troca de foto (crossfade) é toda escrita por js/pontos.js;
   aqui só mora layout, tipografia e os estados aria-pressed/aria-checked
   que o script escreve. Fundo var(--ink) como o resto da casa — o
   'cartão' claro é só a própria foto de still, sem moldura branca. */
.provador {
  padding-block: var(--section-y);
  /* data-fundo="escuro" só troca o --focus-ring — quem pinta o fundo é
     a própria seção, igual .usa/.manifesto/.baralho. */
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.provador__legenda {
  max-width: 38rem;
  color: var(--text-muted-inverse);
  font-size: var(--text-subtitle);
  line-height: var(--leading-body);
}
.provador__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}

/* A vitrine: as duas camadas de foto empilhadas pro crossfade (a segunda
   é criada pelo JS — na primeira pintura só existe uma, real, visível).
   aspect-ratio trava o espaço ANTES da imagem carregar: nada pula. */
.provador__vitrine {
  position: relative;
  overflow: hidden;
  aspect-ratio: 896 / 1200;
  background: var(--cru);   /* o "chão" claro por trás do still, nunca preto vazando na borda */
}
.provador__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.provador__escolha {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-4);
}

/* toggle feminino/masculino: sóbrio, sem preencher com o camelo (regra
   do token — camelo é filete, nunca área/texto). Ativo inverte pra
   paper sobre ink; inativo fica só com a hairline. */
.provador__genero {
  display: flex;
  border: 1px solid #ffffff1f;
  align-self: flex-start;
}
.provador__genero-btn {
  min-width: 8rem;
  min-height: 48px;
  padding: var(--space-2) var(--space-5, 1.25rem);
  background: transparent;
  border: 0;
  color: var(--text-muted-inverse);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-hover) ease, color var(--duration-hover) ease;
}
.provador__genero-btn + .provador__genero-btn { border-left: 1px solid #ffffff1f; }
.provador__genero-btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.provador__genero-btn:hover:not([aria-pressed="true"]),
.provador__genero-btn:focus-visible:not([aria-pressed="true"]) {
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--paper) 8%, transparent);
}

/* pontos: lista editorial, não chip — o nome do ponto É a interface,
   tipografia display fina, peso e sublinhado marcam o ativo. */
.provador__pontos {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid #ffffff1f;
}
.provador__ponto {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ffffff1f;
  color: var(--text-muted-inverse);
  font-family: var(--font-display);
  font-size: var(--text-title);
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-hover) ease, background var(--duration-hover) ease;
}
/* a linha inteira acende no hover/foco: só a troca de cor da letra não
   dizia onde dava pra clicar (o alvo sempre foi a linha toda). */
.provador__ponto:hover,
.provador__ponto:focus-visible {
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--paper) 7%, transparent);
}
.provador__ponto[aria-pressed="true"] {
  color: var(--text-inverse);
  text-decoration: underline;
  text-decoration-color: var(--camelo);
  text-underline-offset: 0.3em;
}

/* cores: círculo + nome curto embaixo, radiogroup semântico (role dos
   botões, não da lista) — a mesma leitura do resto da casa pra swatch. */
.provador__cores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
/* O alvo real do swatch sempre teve 72x80, mas quem via só a bolinha de
   28px mirava num ponto minúsculo e errava (pedido do Fernando, 11/08).
   Agora o botão inteiro é a peça visível: fundo e filete aparecem no
   hover/foco, e a bola cresceu pra 40px. A área de clique não mudou de
   tamanho — passou a ser legível. */
.provador__cor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 4.5rem;
  min-height: 44px;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-2, 6px);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--duration-hover) ease;
}
.provador__cor:hover,
.provador__cor:focus-visible {
  background: color-mix(in srgb, var(--paper) 10%, transparent);
}
.provador__cor-bola {
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--cor-swatch, #888);
  box-shadow: 0 0 0 1px #ffffff33;
  transition: box-shadow var(--duration-hover) ease, transform var(--duration-hover) ease;
}
.provador__cor-nome {
  font-size: var(--text-label);
  color: var(--text-muted-inverse);
  text-align: center;
  text-transform: capitalize;
}
.provador__cor:hover .provador__cor-bola { transform: scale(1.08); }
.provador__cor[aria-checked="true"] .provador__cor-bola {
  box-shadow: 0 0 0 1px #ffffff33, 0 0 0 3px var(--ink), 0 0 0 4px var(--paper);
}
.provador__cor[aria-checked="true"] .provador__cor-nome { color: var(--text-inverse); }

@media (max-width: 809.98px) {
  /* imagem em cima, edge-to-edge (a seção sangra a foto até a borda da
     tela — só os controles ficam dentro do envelope), controles embaixo. */
  .provador__interno { padding-inline: 0; }
  /* só o cabeçalho DESTA seção: o .provador__interno perdeu o gutter
     acima, então ele volta aqui. O .usa__cabeca da seção rotina vive num
     .envelope normal, que já tem gutter — sem o escopo, ele levava dois. */
  .provador .usa__cabeca, .provador__escolha { padding-inline: var(--gutter); }
  .provador__grade { grid-template-columns: 1fr; gap: var(--space-4); }
  /* a seção passava de duas telas no celular (pedido do Fernando, 11/08):
     a foto do still tem margem folgada de sobra, então o quadro fica
     quadrado, o vão entre foto e controles cai pela metade e as linhas
     de ponto encostam mais. Nada some — a seção só para de esticar. */
  .provador__vitrine { aspect-ratio: 1 / 1; }
  .provador .usa__cabeca { padding-block-end: var(--space-4); }
  .provador__ponto { padding: var(--space-2) 0; font-size: var(--text-subtitle); }
  .provador__cores { gap: var(--space-3); }
  .provador__cor { padding-block: var(--space-1); }
}
@media (prefers-reduced-motion: reduce) {
  /* o crossfade sai (o JS já checa isso antes de animar); o que fica
     de CSS é só a troca de estado visual dos controles, instantânea. */
  .provador__foto { transition: none !important; }
}


/* ==================================================================
   AUDITORIA 01/08 (impeccable + taste + emil + ui-ux-pro-max)
   ================================================================== */

.nav__wpp { min-height: 44px; }
/* pressáveis confirmam o toque no instante do press (emil) */
.baralho__cta, .waitlist__form button, .nav__wpp {
  transition: background var(--duration-hover) ease, color var(--duration-hover) ease,
              opacity var(--duration-hover) ease,
              transform 120ms cubic-bezier(.23, 1, .32, 1);   /* press responde ao dedo */
}
.baralho__cta:active, .waitlist__form button:active, .nav__wpp:active { transform: scale(.97); }

/* label visível no campo (regra dura: placeholder não é label) */
.waitlist__label {
  flex: 1 0 100%;
  text-align: left;
  color: var(--text-muted);
  margin-bottom: calc(var(--space-2) * -1);
}
/* benefício de entrar agora, no tom lifestyle */
.waitlist__beneficio {
  margin-top: var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* subtítulo do hero sobre a janela clara da foto: scrim local */
.hero__sub { color: color-mix(in srgb, #fff 92%, transparent); text-shadow: 0 1px 14px rgb(0 0 0 / .6); }

/* barra de progresso da narrativa: filete camelo sob a nav (uso
   sancionado do camelo como régua) — página de 10 telas ganha bússola */
.nav__progresso {
  position: fixed;
  z-index: calc(var(--layer-nav) + 1);
  left: 0; right: 0; top: 0;
  height: var(--rule-camelo);
  background: var(--camelo);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
html.sem-motion .nav__progresso { display: none; }

/* palco do tricô: vinheta quente tira o "viewport de Blender" do preto
   puro — a peça assenta num espaço (taste) */
.cartao--escuro .cartao__face {
  background: radial-gradient(56% 62% at 72% 45%, #16140f, var(--ink) 78%);
}

/* o cronômetro é a melhor piada do site — sai do tom de debug */
.rodape--fim .rodape__quarta {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.rodape--fim .rodape__quarta [data-cronometro] { color: var(--paper); }

/* passos como frase encadeada, não três colunas de template (taste):
   uma linha que respira, filete camelo único de articulação */
.passos__lista {
  display: flex; flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  list-style: none; margin: 0; padding: 0;
}
.passos__item { display: block; }
.passos__item + .passos__item {
  border-left: var(--rule-camelo) solid var(--camelo);
  padding-left: var(--space-8);
}
.passos__texto {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  margin: 0;
}
@media (max-width: 809.98px) {
  /* a frase encadeada quebrava: o filete atravessava o texto. No celular
     vira régua vertical única com os passos em cascata. */
  .passos__lista {
    flex-direction: column;
    gap: var(--space-5);
    border-left: var(--rule-camelo) solid var(--camelo);
    padding-left: var(--space-6);
  }
  .passos__item + .passos__item { border-left: 0; padding-left: 0; }
  .passos__item:nth-child(2) { margin-left: var(--space-6); }
  .passos__item:nth-child(3) { margin-left: var(--space-12); }
}

/* ==================================================================
   TEXTO DE APOIO EM FRAUNCES (auditoria impeccable, 01/08)
   A Inter no corpo de apoio diluía a marca: a página abria em Fraunces
   e caía numa sans genérica no exato momento em que o texto explica a
   coisa. Os leads e descrições passam para a Fraunces em eixo óptico
   de texto (opsz 9 — o desenho robusto, não o display), peso 380 para
   compensar a haste fina da serifa em corpo pequeno.
   A sans (Inter) NÃO sai: fica com os micro-labels em caps (SEU E-MAIL,
   legal do rodapé), botões, nav, inputs e mensagens utilitárias do form.
   Fraunces em texto pede entrelinha mais larga que a Inter (~1.5).
   ================================================================== */
.cartao__desc,
.escassez,
.waitlist__beneficio,
.waitlist__ok-nota,
.hero__sub {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 9, "SOFT" 0, "WONK" 0;
  font-weight: 380;
  line-height: 1.5;
}
/* o parágrafo do cartão é o único em corpo grande (18.7px): a serifa
   ganha ar de editorial com entrelinha um pouco mais alta */
.cartao__desc { line-height: 1.55; }


/* ==================================================================
   RODADA 3 (02/08) — o que a referência do Fernando ensinou, colhido
   sem copiar o layout dela: frame no manifesto + o beat que faltava
   (durabilidade), CTA na forma sólida, descritor de marca no hero,
   rodapé com a promessa de privacidade.
   ================================================================== */

/* ---- HERO: descritor de marca, linha de masthead -----------------
   Quem cai de um anúncio só descobria que é malha na quarta seção.
   Uma linha em caps resolve sem matar a atitude da frase de baixo. */
.hero__descritor {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 78%, transparent);
}

/* ---- MANIFESTO: o frame (título + selos + régua) e as duas colunas.
   O crescendo das quatro linhas continua INTEIRO na coluna da esquerda
   — quebrá-lo em citações mataria a escalada. A direita é conteúdo
   novo: durabilidade, o argumento de tempo que o site não tinha. */
.manifesto__interno {
  display: grid;
  gap: var(--space-12);
  /* o padding-left do lp-extras.css servia ao filete, que agora vive na
     coluna. Devolvido ao gutter simétrico do .envelope — sem isto o
     conteúdo encostava na borda esquerda no celular. */
  padding-inline: var(--gutter);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.manifesto__cabeca {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
}
.manifesto__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  color: var(--paper);
}
.manifesto__selos {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; margin: 0; padding: 0;
}
.manifesto__selos li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}
.manifesto__colunas {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-16);
  align-items: start;
}
.manifesto__coluna { position: relative; display: grid; gap: var(--space-6); }
.manifesto__coluna:first-child { padding-left: var(--space-8); }
.manifesto__coluna--durar { padding-top: var(--space-6); }
.manifesto__durar {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  color: var(--paper);
}
.manifesto__nota {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 9, "SOFT" 0, "WONK" 0;
  font-weight: 380;
  line-height: 1.55;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
@media (max-width: 809.98px) {
  .manifesto__colunas { grid-template-columns: 1fr; gap: var(--space-12); }
  .manifesto__coluna--durar {
    padding-top: var(--space-8);
    border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  }
}

/* ---- CTA na forma da referência: coluna estreita, campo em caixa,
   botão sólido de largura cheia. O botão vazado sobre o branco era o
   botão da seção preta copiado sem repensar o contraste (taste). */
.waitlist { text-align: left; }
.waitlist__form {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.waitlist__label { margin-bottom: 0; }
.waitlist__campo { flex: 0 0 auto; width: 100%; }
.waitlist__campo input {
  border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
}
.waitlist__campo input:focus { border-color: var(--ink); }
.waitlist__campo::after { left: 1px; right: 1px; bottom: 1px; }
.waitlist__form button {
  width: 100%;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  min-height: 48px;
}
.waitlist__form button:hover { background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--paper); }
.waitlist__beneficio { text-align: center; }

/* LGPD: consentimento explícito, obrigatório, sem cara de card — só a
   hairline que o resto do form já usa. O <label> inteiro é o alvo de
   toque (a caixinha sozinha não bate 44px), então padding vertical em
   vez de min-height puro: cresce se o texto quebrar linha no mobile. */
.waitlist__consentimento {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-2);
  min-height: 44px;
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--text-muted);
  cursor: pointer;
}
.waitlist__consentimento input {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  accent-color: var(--ink);
}
.waitlist__consentimento a { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }

/* ---- RODAPÉ: a barra de baixo. A promessa de privacidade não é
   enfeite — coletar e-mail sem dizer o que se faz com ele é exposição
   de LGPD, e escrito aumenta a chance de a pessoa entregar. */
.rodape__barra {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: var(--space-3) var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.rodape__privacidade {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--text-muted-inverse);
  max-width: 46ch;
}
.rodape__privacidade a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.rodape__privacidade a:hover { color: var(--paper); }


/* ---- SEÇÃO 2, A SURPRESA (02/08) -----------------------------------
   A seção abre em preto: só a frase fantasma denuncia que há algo ali.
   Rolando, a foto emerge do breu, entra em foco junto com o texto e só
   depois a cor inunda. Três tempos, um por gesto.

   Repouso = 1 (revelado) de propósito: a classe .malha--surpresa é
   aplicada por js/malha.js, e a variável só desce a 0 quando o script
   está de fato dirigindo. Sem JS, com motion reduzido ou com erro no
   meio, a seção nasce inteira. */
.malha--surpresa::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: var(--ink);
  opacity: calc(1 - var(--abrir, 1));
  pointer-events: none;
}

/* ---- SEÇÃO 3 com mais presença ------------------------------------
   Ela ganhou conteúdo (o beat da durabilidade) e pedia ar: passa a
   ocupar a tela cheia, com respiro maior entre o frame e as colunas. */
.manifesto {
  min-height: 100svh;
  padding-block: calc(var(--section-y) * 1.3);
}
.manifesto__interno { gap: var(--space-16); }
.manifesto__colunas { gap: var(--space-16) var(--space-20, 6rem); }
@media (max-width: 809.98px) {
  .manifesto { min-height: 0; padding-block: var(--section-y); }
}