/* ============================================================================
   OVERBUILD — newsletter.css  ·  folha ÚNICA de /newsletter (18/ago/2026)
   ----------------------------------------------------------------------------
   NÃO importa o style.css. É de propósito: 99% do tráfego desta página vem do
   navegador DENTRO do Instagram, no celular, com três segundos de atenção e
   cache frio. O style.css da home tem 100+ KB e carrega o site inteiro; aqui a
   página tem UM trabalho — capturar o e-mail — e paga só pelo que usa. Os
   tokens abaixo são CÓPIA literal dos do style.css (mesma paleta, mesmas
   fontes): se a marca mudar lá, muda aqui à mão. Cópia consciente > 100 KB.

   DNA ESTRUTURAL: "OBJETO ÚNICO, SEM CROMO" — a página inteira é UM objeto (o
   cartão de inscrição) montado sobre a forja. Sem nav, sem seções, sem rolagem
   obrigatória. Não é minimalismo por preguiça: qualquer coisa a mais nesta
   página é uma coisa a mais entre a pessoa e o campo de e-mail.

   TRÊS MOVIMENTOS COREOGRAFADOS (e só três):
     1. cascata de entrada — 6 degraus de 75ms, a assinatura da casa;
     2. fio de solda — o hairline âmbar que ACENDE da esquerda pra direita sob
        o título (scaleX), e a mesma solda no foco do campo (do centro pra fora);
     3. micro — brilho do botão + seta, e a troca HONESTA de estado do rótulo.
   `prefers-reduced-motion` desliga os três.

   ACIMA DA DOBRA EM 360px: emblema + gancho + campo + botão + linha de
   confiança cabem em ~470px de altura. As medidas abaixo de 380px encolhem
   por container query de viewport (@media), não por scroll.
   ========================================================================== */

/* ── fontes: MESMOS arquivos do site (subset perf-01), caminho relativo a
   assets/ porque esta folha mora dentro de assets/ ─────────────────────── */
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; 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: "Geist Mono";
  src: url("fonts/geistmono-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; 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: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  /* o arquivo tem eixo wght 500-600 e opsz 17-54 — declarar mais faria o
     navegador sintetizar peso (bold falso). Igual ao style.css. */
  font-weight: 500 600; font-style: normal; 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;
}

:root {
  --surface-base: #0A0A0B;
  --surface-1: oklch(0.19 0.008 65);
  --surface-inset: oklch(0.12 0.006 62);
  --text-primary: oklch(0.94 0.012 78);
  --text-secondary: oklch(0.84 0.012 76);
  --text-muted: oklch(0.66 0.012 72);
  --text-on-accent: oklch(0.17 0.010 55);
  --accent: #F37E35;
  --accent-hover: oklch(0.755 0.160 49);
  --accent-hot: oklch(0.790 0.125 49);
  --accent-line: oklch(0.560 0.116 49);
  --accent-wash: oklch(0.350 0.058 49);
  --accent-glow: oklch(0.714 0.166 49 / 0.30);
  --border-subtle: oklch(0.28 0.008 66);
  --border-default: oklch(0.34 0.010 66);
  --focus-ring: oklch(0.790 0.165 49);
  --radius-lg: 16px;
  --radius-forge: 4px;
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-curtain: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* svh, NÃO vh: no navegador do Instagram o vh conta a barra do app que está
     por cima, e a página nasce mais alta que a área visível — o botão cai
     abaixo da dobra sem ninguém ver. O svh é a altura MENOR (com as barras),
     que é exatamente a que a pessoa enxerga. `100vh` fica de fallback pra
     navegador velho, na linha de cima. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
::selection { background: var(--accent-wash); color: var(--text-primary); }
:where(a, button, input):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface-base); }
::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 99px; }

/* ── AMBIENTE: brilho da forja + grade holográfica ─────────────────────────
   Os dois são `fixed`, atrás de tudo e sem eventos. Custam zero requisição e
   zero layout — não entram na conta de CLS porque não ocupam fluxo. */
.nl-amb {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
.nl-amb::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(78% 52% at 50% -4%, var(--accent-glow), transparent 68%);
  filter: blur(28px);
  opacity: .62;
}
.nl-amb::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(oklch(0.56 0.116 49 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.56 0.116 49 / 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(92% 58% at 50% 8%, #000 30%, transparent 84%);
          mask-image: radial-gradient(92% 58% at 50% 8%, #000 30%, transparent 84%);
}

/* ── palco ────────────────────────────────────────────────────────────────
   `justify-content: center` com `padding-block` fluido: em tela alta o objeto
   flutua no meio; em tela curta (navegador in-app com duas barras) o padding
   encolhe antes de qualquer coisa sair da dobra. */
.nl-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 3.2vh, 1.9rem);
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(1.1rem, 3.4vh, 2.4rem) clamp(1.15rem, 5vw, 1.75rem);
}

/* ── marca ─────────────────────────────────────────────────────────────── */
.nl-brand { display: block; line-height: 0; }
.nl-brand svg {
  display: block;
  height: 26px; width: auto;
  /* a caixa é conhecida ANTES do paint — o SVG é inline, então não há decode
     nem requisição; o aspect-ratio existe só como cinto contra distorção. */
  aspect-ratio: 1005 / 167;
  color: var(--text-primary);
}
.nl-b-mark { fill: var(--accent); transition: fill .2s var(--ease-spring); }
.nl-brand:hover .nl-b-mark { fill: var(--accent-hover); }

/* ── O OBJETO ──────────────────────────────────────────────────────────── */
.nl-card {
  position: relative;
  width: 100%;
  padding: clamp(1.35rem, 4.4vw, 2rem) clamp(1.15rem, 4.4vw, 1.9rem) clamp(1.25rem, 4vw, 1.7rem);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-inset));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  /* aresta de cima ACESA (inset 1px marfim a 6%): é o que faz o cartão ler
     como peça física com uma luz batendo de cima, e não como retângulo. */
  box-shadow: inset 0 1px 0 oklch(0.94 0.012 78 / 0.06),
              0 18px 52px -18px oklch(0.06 0.02 50 / 0.75);
}
/* marca d'água: o emblema octagonal INTEIRO, canto inferior direito, 6%.
   Ele é feito de QUATRO cantoneiras separadas — cortá-lo pela borda do cartão
   apaga duas delas e o que sobra lê como mancha, não como marca (era o estado
   da primeira rodada). Por isso entra inteiro e pequeno, como marca de
   fabricante no rodapé de uma peça: presente, nunca competindo com o gancho. */
.nl-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='105 128 176 167'%3E%3Cpath fill='%23F37E35' fill-rule='evenodd' d='M133 128L130 129L106 154L105 204L139 204L139 174L150 163L180 163L180 128ZM201 128L200 163L238 164L244 172L247 173L247 204L281 204L281 155L255 128ZM106 219L105 267L107 271L133 295L180 295L180 261L151 261L139 249L139 219ZM247 219L246 249L235 261L201 261L201 295L255 295L281 268L281 219Z'/%3E%3C/svg%3E")
    no-repeat right 1.05rem bottom 1.05rem / 78px 74px;
  opacity: .06;
  pointer-events: none;
}
.nl-card > * { position: relative; }

.nl-kicker {
  margin: 0 0 .55rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.nl-h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  /* 320px → 1.72rem · 360px → 1.86rem · 390px+ → topo em 2.3rem. O teto baixo
     é o que garante o título em DUAS linhas a 360 — três linhas empurram o
     botão pra fora da dobra do navegador do Instagram. */
  font-size: clamp(1.72rem, 7.4vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--text-primary);
}
/* `nowrap` na ênfase: sem ele o balance parte "todo / dia" e a expressão
   âmbar — a única cor do gancho — chega rachada em duas linhas. Com a frase
   inteira, o balance cai na quebra natural: "Tecnologia todo dia," / "no seu
   e-mail.". Custa uma declaração, resolve a composição do título. */
.nl-h em { font-style: normal; color: var(--accent); white-space: nowrap; }

/* fio de solda — acende da esquerda pra direita, uma vez, na entrada */
.nl-weld {
  height: 1px;
  margin: .85rem 0 .8rem;
  background: linear-gradient(90deg, var(--accent), oklch(0.56 0.116 49 / .35) 62%, transparent);
  transform-origin: left center;
}

.nl-sub {
  margin: 0 0 1.15rem;
  font-size: clamp(.9rem, 3.6vw, .98rem);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 42ch;
}

/* ── formulário ───────────────────────────────────────────────────────────
   Campo de documento editorial: rótulo mono em cima, só fio embaixo. Nada de
   caixa arredondada de SaaS. */
.nl-form { display: block; }
.nl-lab {
  display: block;
  margin: 0 0 .3rem;
  font-family: var(--font-mono);
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nl-field { position: relative; }
.nl-in {
  display: block;
  width: 100%;
  margin: 0;
  padding: .62rem .1rem .68rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  /* 16px CRAVADO: abaixo disso o Safari/iOS dá ZOOM ao focar o campo e a
     página inteira sai de escala dentro do navegador do Instagram. Este é o
     único tamanho de fonte da página que não é fluido — de propósito. */
  font-size: 16px;
  line-height: 1.5;
  appearance: none;
  transition: border-color .2s var(--ease-spring);
}
.nl-in::placeholder { color: oklch(0.52 0.010 68); }
.nl-in:focus { outline: none; border-bottom-color: var(--accent-line); }
/* a solda do foco: um fio âmbar que abre do CENTRO pra fora sobre o hairline */
.nl-field::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .28s var(--ease-curtain);
}
.nl-field:focus-within::after { transform: scaleX(1); }

.nl-form.is-invalid .nl-in { border-bottom-color: var(--accent); }
.nl-form.is-invalid .nl-lab { color: var(--accent); }

.nl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: 1.05rem;
  padding: .92rem 1.1rem;
  background: var(--accent);
  color: var(--text-on-accent);
  border: 0;
  border-radius: var(--radius-forge);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  /* 48px de alvo mínimo já vem do padding; `min-height` é o cinto pra quando
     a fonte cair no fallback. */
  min-height: 48px;
  box-shadow: 0 10px 30px -12px var(--accent-glow);
  transition: background .2s var(--ease-spring), box-shadow .2s var(--ease-spring), transform .2s var(--ease-spring);
}
.nl-btn:hover { background: var(--accent-hover); box-shadow: 0 14px 34px -10px var(--accent-glow); }
.nl-btn:active { transform: translateY(1px); }
.nl-btn[disabled] { cursor: progress; opacity: .82; }
.nl-btn svg { flex: none; transition: transform .2s var(--ease-spring); }
.nl-btn:hover svg { transform: translate(2px, -2px); }
.nl-btn[disabled] svg { opacity: .5; }

/* recado do formulário — some do fluxo quando vazio, então NÃO reserva altura
   e NÃO gera salto de layout (o :empty é o que garante o CLS 0). */
.nl-say {
  margin: .8rem 0 0;
  font-size: .87rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.nl-say:empty { display: none; }
.nl-say.is-bad { color: var(--accent-hot); }
.nl-say a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.nl-fine {
  margin: .95rem 0 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── painel de PRONTO (só aparece com 200 do servidor) ────────────────── */
.nl-done { display: none; }
.nl-card.is-done .nl-live { display: none; }
.nl-card.is-done .nl-done { display: block; }
.nl-done-mark {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin: 0 0 .9rem;
  border-radius: 999px;
  background: var(--accent-wash);
  box-shadow: 0 0 0 1px var(--accent-line), 0 0 26px -6px var(--accent-glow);
  color: var(--accent);
}
.nl-done-h {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 5.6vw, 1.6rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.nl-done-p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--text-secondary); }
.nl-done-p b { color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; }
.nl-done-fine {
  margin: .9rem 0 0;
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .04em; line-height: 1.5;
  color: var(--text-muted);
}
.nl-done-h:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* ── rodapé mínimo ────────────────────────────────────────────────────── */
.nl-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem .85rem;
  padding: 0 1.15rem clamp(1.1rem, 3vh, 1.8rem);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.nl-foot a { color: var(--text-muted); text-decoration: none; transition: color .2s var(--ease-spring); }
.nl-foot a:hover { color: var(--accent); }
.nl-foot i { font-style: normal; opacity: .45; }
.nl-foot .nl-sq {
  display: inline-block; width: .42em; height: .42em;
  background: var(--accent); vertical-align: baseline;
}

/* ── telas curtíssimas: aperta o ritmo ANTES de empurrar algo pra fora ── */
@media (max-height: 620px) {
  .nl-stage { gap: .85rem; justify-content: flex-start; padding-top: 1rem; }
  .nl-weld { margin: .6rem 0 .58rem; }
  .nl-sub { margin-bottom: .9rem; }
  .nl-btn { margin-top: .85rem; }
  .nl-fine { margin-top: .75rem; }
}
@media (max-width: 340px) {
  .nl-card { padding-inline: 1rem; }
  .nl-kicker { letter-spacing: .14em; }
}

/* ── CASCATA DE ENTRADA — 6 degraus de 75ms ───────────────────────────────
   `animation-fill-mode: both` com opacity 0 no 0%: o elemento JÁ ocupa a
   caixa dele desde o primeiro paint (só translada), então a cascata não
   move layout nenhum — CLS zero por construção. */
@keyframes nl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nl-weld { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.nl-anim { animation: nl-rise .62s var(--ease-spring) both; }
.nl-brand   { animation-delay: .04s; }
.nl-kicker  { animation-delay: .11s; }
.nl-h       { animation-delay: .185s; }
.nl-sub     { animation-delay: .26s; }
.nl-form    { animation-delay: .335s; }
.nl-fine    { animation-delay: .41s; }
.nl-foot    { animation-delay: .48s; }
.nl-weld    { animation: nl-weld .7s var(--ease-curtain) .21s both; }

@media (prefers-reduced-motion: reduce) {
  .nl-anim, .nl-weld { animation: none !important; opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}