/* ===========================================================================
   VELOUR — site v2 (paleta de 5 cores · a mecanica do CADERNO)
   ATO 2 (SISTEMA): todos os tokens derivam do DESIGN DNA. Cada um com o papel
   declarado. Nenhum #000/#FFF puro, 1 easing de assinatura, 2 raios.

   v2: Bordo e Azul deixam de ser nevoa invisivel e viram SUPERFICIE — folha de
   papel colorido deitada sobre a pagina noite (ver .caderno). Duas folhas na
   pagina inteira, e a Noite entre elas.
   =========================================================================== */

:root {
  /* COR — elenco com papel */
  --noite: #0C0D14;            /* dominante 60-70% — papel escuro de revista noturna */
  --noite-alta: #12131C;       /* palco elevado — 1 passo tonal acima da base */
  --areia: #D4C4A8;            /* tinta clara — 11.3 na noite · 8.2 no bordo · 7.8 no azul-papel */
  --areia-muted: #A79B88;      /* secundario AINDA legivel — 7.1 noite · 5.2 bordo · 4.9 azul-papel */
  --caramelo: #C8906A;         /* acento unico — 7.1:1 sobre a noite, luz ambar de sodio */
  --noite-sobre-caramelo: #3B2E29; /* texto secundario no palco quente — 4.8:1 */

  /* SUPERFICIES DE COR (papel) — cada uma recebe texto, por isso os valores
     abaixo sao os CALCULADOS pelo brand-director, nao os puros da marca. */
  --azul-papel: #272C51;       /* CADERNO AZUL · o #2E3460 impresso a 80% sobre a noite */
  --bordo-papel: #580D1A;      /* CADERNO BORDO · tinta cheia, ja passa AA com as 3 tintas */

  /* TINTAS ESTRUTURAIS — fio, aba de indice, numeral-fantasma. NUNCA texto:
     sobre o #2E3460 puro o caramelo cai pra 4.31 e a areia-muted pra 4.33. */
  --azul-tinta: #2E3460;
  --bordo-tinta: #580D1A;

  --fio: rgba(212, 196, 168, 0.16);         /* hairline de spec sheet, sobre a noite */
  --fio-caderno: rgba(212, 196, 168, 0.26); /* dentro de folha: a folha e mais clara, o fio compensa */
  --fio-forte: rgba(200, 144, 106, 0.42);   /* hairline quente, separacao de secao */

  /* TIPOGRAFIA — 3 territorios, salto de 4x entre display e corpo */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-detail: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  /* HEADLINE v3 — a nova tem 79 caracteres contra 65 da antiga, e precisou de
     recalibragem MEDIDA, nao estimada. A Fraunces em opsz 144 gasta ~0.34em por
     caractere, entao a faixa de 3 linhas de uma headline de 79 caracteres numa
     coluna C e [C/13.4 , C/8.9] px de corpo. Em 6.9vw a curva fica dentro dessa
     faixa em TODO viewport (26.9px em 390 · 72px a partir de 1043), com teto de
     4.5rem pra nao passar do limite de 80px do hero_guard no desktop.
     Salto sobre o corpo: 72/19 = 3.8x, acima do minimo de 3x do DNA. */
  --text-hero: clamp(1.6rem, 6.9vw, 4.5rem);
  --text-h2: clamp(1.75rem, 3.4vw, 2.6rem);
  --text-h3: clamp(1.4rem, 2.4vw, 2rem);
  --text-lead: clamp(1.2rem, 1.9vw, 1.5rem);
  --text-body: clamp(1.0625rem, 0.45vw + 0.95rem, 1.1875rem);
  --text-detail: 0.8125rem;
  --text-num: clamp(3.4rem, 9vw, 7.5rem);

  /* ESPACO — base 8 com saltos generosos no topo (respiro de revista) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 2rem;
  --sp-4: 3.5rem;
  --sp-5: 6rem;
  --sp-6: 9rem;

  /* MOVIMENTO — 1 easing de assinatura, zero bounce */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 200ms;
  --dur-reveal: 620ms;

  /* MATERIA — sombra em 2 camadas, cor de origem bordo (nunca preto puro) */
  --sombra: 0 1px 0 rgba(88, 13, 26, 0.55), 0 22px 48px -22px rgba(88, 13, 26, 0.8);
  --sombra-quente: 0 2px 0 rgba(12, 13, 20, 0.18), 0 26px 50px -26px rgba(12, 13, 20, 0.55);

  --raio-a: 3px;   /* containers e superficies */
  --raio-b: 0px;   /* controles — reto como carimbo, diferente do container */

  --coluna: 62rem;      /* coluna editorial estreita ~992px */
  --coluna-larga: 75rem;
}

/* --------------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background-color: var(--noite);
  color: var(--areia);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* OPTICA DA FRAUNCES — o eixo opsz e o que separa didone de serifa qualquer.
   Grau alto (144) no display: hastes finas, contraste de lamina. Grau baixo (24)
   no texto serifado pequeno: haste mais grossa, legivel. O browser sozinho
   (font-optical-sizing: auto) usa o tamanho em px, o que achata o display. */
h1, .preco, .linha__num {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 144;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
h2 { font-optical-sizing: none; font-variation-settings: "opsz" 72; font-kerning: normal; }
h3, .lead, .linha__claim, .declaracao, .nota-forte, .faq__item h3,
.credo__claim, .prova__declaracao, .limite__a, .oferta__conta {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 28;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--caramelo); color: var(--noite); }

/* Foco visivel desenhado, nao o anel default do browser: fio de 1px no acento
   mais um halo curto. Contraste do fio contra a noite: 7:1. */
:focus-visible {
  outline: 1px solid var(--caramelo);
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(200, 144, 106, 0.16);
}
.oferta :focus-visible { box-shadow: 0 0 0 5px rgba(12, 13, 20, 0.18); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--caramelo);
  color: var(--noite);
  font-family: var(--font-detail);
  font-size: var(--text-detail);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 14px 20px;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* MATERIA — duas camadas no lugar da foto: grao fino de filme + mancha larga de
   papel. Sozinho, um turbulence unico le como ruido de tela; as duas escalas
   juntas leem como impresso. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23m)' opacity='0.7'/%3E%3C/svg%3E");
  background-size: 240px 240px, 700px 700px;
}

.page { position: relative; }

.wrap {
  width: 100%;
  max-width: var(--coluna);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 3rem);
}
.wrap-wide {
  width: 100%;
  max-width: var(--coluna-larga);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 3rem);
}

/* ------------------------------------------------------- gesto de assinatura */

.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-detail);
  font-size: var(--text-detail);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--caramelo);
  margin: 0 0 var(--sp-2);
}
.kicker--center { justify-content: center; }

.fio {
  display: block;
  width: 44px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease) 140ms;
}
.is-in .fio, .modal[open] .fio { transform: scaleX(1); }

/* grifo ambar de prova — marcador torto, no maximo 1 por secao.
   Duas camadas de gradiente (uma cheia, uma fina e deslocada) dao a mao tremida
   do marcador; feito em background e nao em pseudo-elemento pra sobreviver a
   quebra de linha, que fragmenta o inline box. */
.grifo {
  background-color: transparent;
  color: inherit;
  padding: 0 0.08em;
  background-image:
    linear-gradient(rgba(200, 144, 106, 0.42), rgba(200, 144, 106, 0.42)),
    linear-gradient(rgba(200, 144, 106, 0.24), rgba(200, 144, 106, 0.24));
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 0.34em, 93% 0.13em;
  background-position: 0 92%, 4% 74%;
}

/* SEGUNDA EXECUCAO DO GRIFO — sobre folha de cor o bloco reprovaria: o fill
   caramelo derruba a areia pra 4.20 no bordo e 3.84 no azul. Vira TRACO: dois
   fios caramelo cheios sob a linha de base, sem fundo atras da letra. O texto
   segue areia direto na folha (8.2 e 7.8) e o caramelo continua marcando
   (5.15 e 4.89, bem acima dos 3:1 de elemento grafico). Mesmo gesto. */
.caderno .grifo {
  padding: 0;
  background-image:
    linear-gradient(var(--caramelo), var(--caramelo)),
    linear-gradient(var(--caramelo), var(--caramelo));
  background-size: 100% 2px, 88% 1px;
  background-position: 0 100%, 5% calc(100% + 4px);
}

/* ------------------------------------------------------------------ botoes */

.btn {
  --btn-borda: var(--caramelo);
  --btn-tinta: var(--caramelo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 17px 34px;
  border: 1px solid var(--btn-borda);
  border-radius: var(--raio-b);
  background: transparent;
  color: var(--btn-tinta);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--caramelo);
  color: var(--noite);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}
.btn:active { transform: translateY(0); }

.btn--pequeno { min-height: 48px; padding: 13px 18px; font-size: 0.75rem; letter-spacing: 0.14em; }

.btn--fantasma { --btn-borda: var(--fio); --btn-tinta: var(--areia); }
.btn--fantasma:hover, .btn--fantasma:focus-visible {
  background: transparent;
  color: var(--caramelo);
  border-color: var(--caramelo);
}

/* CTA solido dentro do palco quente da oferta */
.btn--solido {
  background: var(--noite);
  border-color: var(--noite);
  color: var(--areia);
}
.btn--solido:hover, .btn--solido:focus-visible {
  background: var(--noite-alta);
  color: var(--caramelo);
  box-shadow: var(--sombra-quente);
}

.btn--solido-areia {
  background: var(--caramelo);
  border-color: var(--caramelo);
  color: var(--noite);
}
.btn--solido-areia:hover, .btn--solido-areia:focus-visible {
  background: transparent;
  color: var(--caramelo);
}
.btn[disabled] { opacity: 0.55; cursor: progress; transform: none; }

/* troca de rotulo no hover do CTA do hero — sem deslocamento de layout */
.swap { display: grid; place-items: center; }
.swap__a, .swap__b {
  grid-area: 1 / 1;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.swap__b { opacity: 0; transform: translateY(7px); }
.btn--swap:hover .swap__a, .btn--swap:focus-visible .swap__a { opacity: 0; transform: translateY(-7px); }
.btn--swap:hover .swap__b, .btn--swap:focus-visible .swap__b { opacity: 1; transform: translateY(0); }

.lnk {
  position: relative;
  color: var(--caramelo);
  text-decoration: none;
}
.lnk::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease);
}
.lnk:hover::after, .lnk:focus-visible::after { transform: scaleX(1); }

/* ----------------------------------------------------------------- reveals */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* -------------------------------------------------------------------- topo */

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.wordmark {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--areia);
}
.topbar__tag {
  font-family: var(--font-detail);
  font-size: 0.6875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--areia-muted);
}

/* ------------------------------------------------------------- D1 · o hero */

.hero {
  position: relative;
  /* EQUILIBRIO VERTICAL: com o teto antigo de 820px a hero fechava antes do
     fim do viewport, e o conteudo — centrado dentro dela — sobrava no terco
     superior com um vao morto embaixo. Com o teto em 940 a folha da hero
     ocupa o viewport inteiro nas alturas usuais (844 mobile, 900 desktop) e o
     centro optico do bloco coincide com o centro da tela. Segue sendo
     min(100svh, ...): a hero nunca passa de UMA dobra. */
  min-height: min(100svh, 940px);
  display: flex;
  align-items: center;
  /* EQUILIBRIO OPTICO vs GEOMETRICO. Centrado no eixo, o bloco ficava com
     228px de ar geometrico em cima e 228 embaixo — simetrico na regua e
     desequilibrado no olho, porque os ~95px do topo estao OCUPADOS pela
     topbar. O ar percebido era 133 no topo contra 228 na base, e a faixa
     morta ficava embaixo do preco.
     Correcao: compensar a massa da topbar movendo o bloco pra baixo, com a
     soma dos paddings CONSTANTE (o que sai da base entra no topo). O bloco
     desce exatamente --hero-comp e a altura da hero nao muda em nenhum
     viewport, entao a dobra unica continua garantida. */
  --hero-pad: clamp(5.5rem, 11vh, 7rem);
  --hero-comp: clamp(1.5rem, 4.5vh, 2.75rem);
  padding: calc(var(--hero-pad) + var(--hero-comp)) 0 calc(var(--hero-pad) - var(--hero-comp));
  overflow: hidden;
}
/* LUZ COM DIRECAO — a hero tem uma fonte fria alta a direita, uma brasa bordo
   baixa a esquerda, e uma pocinha ambar exatamente sob o CTA (a luz de sodio da
   tese: ela marca onde se decide). O vinhetamento fecha os cantos. */
.hero__fog {
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 130%;
  background:
    radial-gradient(42% 38% at 78% 4%, rgba(46, 52, 96, 0.55), transparent 68%),
    radial-gradient(30% 26% at 62% 16%, rgba(78, 88, 150, 0.18), transparent 70%),
    radial-gradient(46% 34% at 10% 98%, rgba(88, 13, 26, 0.34), transparent 72%),
    radial-gradient(22% 20% at 50% 78%, rgba(200, 144, 106, 0.09), transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(6, 6, 11, 0.55));
}
.hero__inner { position: relative; text-align: center; }

h1 {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: var(--text-hero);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* a medida agora e a propria coluna: com 79 caracteres, o balance resolve as 3
     linhas em ~85% da largura util, e travar em ch encaixotaria a headline (o
     hero_guard reprova bloco abaixo de 55% do viewport). */
  max-width: 100%;
  margin: 0 auto;
}
h1 em {
  font-style: italic;
  font-weight: 420;
  color: var(--caramelo);
}

.hero__sub {
  margin: clamp(1.4rem, 3vh, 2rem) auto 0;
  max-width: 62ch;      /* a sub v3 tem 162 caracteres: em 50ch caia pra 4 linhas */
  color: var(--areia-muted);
  text-wrap: balance;   /* distribui as linhas do mobile: sem ultima linha curta */
}
.hero__cta { margin: clamp(1.9rem, 4vh, 2.75rem) 0 0; }
.hero__apoio {
  margin: var(--sp-2) auto 0;
  max-width: 58ch;   /* o desvio le em 2 linhas no desktop: em 46ch sobrava "a" solto */
  font-family: var(--font-detail);
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--areia-muted);
  text-wrap: balance;
}
/* o preco nao se parte no meio: a condicao le como um bloco so */
.hero__apoio strong {
  color: var(--areia);
  font-weight: 500;
  white-space: nowrap;
}
/* O DESVIO DO LEAD QUENTE. Esta linha e o unico caminho direto do topo pro
   encarte da oferta, entao o link nao pode depender de hover pra existir: o
   sublinhado ja vem desenhado (em caramelo a 55%) e ACENDE pra tinta cheia no
   hover e no foco. A recompensa e em duas propriedades, nao so cor. */
.hero__apoio .lnk {
  font-weight: 500;
  white-space: nowrap;
}
.hero__apoio .lnk::after {
  transform: scaleX(1);
  bottom: -3px;
  background: rgba(200, 144, 106, 0.55);
  transition: background-color var(--dur-micro) var(--ease), height var(--dur-micro) var(--ease);
}
.hero__apoio .lnk:hover::after,
.hero__apoio .lnk:focus-visible::after {
  background: var(--caramelo);
  height: 2px;
}

/* --------------------------------------------------------------- secoes base */

/* HAIRLINE EDITORIAL — o fio de secao nasce e morre em transparencia (regua de
   revista). O fio de dado (spec, passo, FAQ) continua reto e chapado: sao duas
   linguagens de linha diferentes, de proposito. */
.secao {
  position: relative;
  padding: clamp(4.5rem, 11vh, var(--sp-6)) 0;
}
.secao::before,
.linha::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(212, 196, 168, 0.2) 14%, rgba(212, 196, 168, 0.2) 86%, transparent);
}
.secao--capitulo::before,
.secao--linhas::before,
.secao--honestidade::before,
.secao--fecho::before {
  background: linear-gradient(90deg, transparent, rgba(200, 144, 106, 0.5) 12%, rgba(200, 144, 106, 0.5) 88%, transparent);
}
.secao--linhas { padding-bottom: 0; }

/* ====================================================================
   O CADERNO — a mecanica de cor da v2.
   Folha de papel colorido DEITADA sobre a pagina noite. Quatro camadas
   obrigatorias, na ordem: cor chapada · halftone em 2 frequencias
   deslocadas (registro de impressao) · luz interior em 2 camadas vinda
   do alto a direita (a mesma fonte de luz da pagina) · sombra de contato
   inset nas duas bordas, que e o que faz a cor ler como papel deitado e
   nao como faixa colorida de template.
   A Noite reaparece acima e abaixo (calha), nunca menos de 96px no
   desktop e 64px no mobile: e ela que impede o carnaval.
   ==================================================================== */
.caderno {
  position: relative;
  background-color: var(--folha);
  margin: clamp(4rem, 11vh, 7rem) 0;
  /* a folha respira mais que a pagina: e o que separa papel deitado de faixa */
  padding-block: clamp(4.5rem, 14vh, 10rem);
  /* dentro da folha o fio compensa: a folha e mais clara que a pagina */
  --fio: var(--fio-caderno);
  background-image:
    radial-gradient(rgba(212, 196, 168, 0.075) 1px, transparent 1.5px),
    radial-gradient(rgba(12, 13, 20, 0.16) 0.5px, transparent 1px),
    radial-gradient(74% 96% at 84% 0%, var(--folha-luz), transparent 64%),
    radial-gradient(60% 60% at 6% 100%, rgba(12, 13, 20, 0.34), transparent 70%);
  background-size: 7px 7px, 4px 4px, 100% 100%, 100% 100%;
  background-position: 0 0, 2px 1px, 0 0, 0 0;
  box-shadow:
    inset 0 14px 26px -18px rgba(6, 6, 11, 0.85),
    inset 0 -14px 26px -18px rgba(6, 6, 11, 0.7);
}
/* a borda da folha ja e a separacao: o fio de secao sairia em cima dela */
.caderno::before { display: none; }

.caderno--azul { --folha: var(--azul-papel); --folha-luz: rgba(70, 82, 150, 0.26); }
.caderno--bordo { --folha: var(--bordo-papel); --folha-luz: rgba(139, 30, 52, 0.30); }

/* a transicao tensao -> resolucao e o clima da pagina: o bordo precisa de
   uma calha maior antes do encarte caramelo (>=160px desktop, >=96 mobile).
   E a unica co-visibilidade de duas folhas permitida na pagina, e o piso da
   calha e o que a mantem legitima. */
.caderno--bordo { margin-bottom: clamp(6rem, 18vh, 11rem); }
@media (min-width: 900px) {
  /* em 18vh o piso so era atingido acima de 889px de altura: num laptop de
     1440x800 a calha caia pra 144px e furava o minimo. O piso agora e
     literal (10rem = 160px), independente da altura do viewport. */
  .caderno--bordo { margin-bottom: clamp(10rem, 18vh, 11rem); }
}

h2 {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: var(--text-h2);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h3 {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.secao p { text-wrap: pretty; }
/* CORRECAO DE ESPECIFICIDADE (polish): a regra acima, com 2 seletores, vencia o
   text-wrap:balance declarado nas classes de UM seletor. Resultado pratico: o
   claim da linha 01 quebrava em "...pronta toda sexta, na / sua voz." — orfa de
   2 palavras. Paragrafo de DISPLAY (curto e grande) equilibra as linhas; corpo
   longo segue em pretty, que e o certo pra ele. */
.secao .linha__claim,
.secao .intro,
.secao .nota-forte,
.secao .credo__claim,
.secao .prova__declaracao,
.secao .prova__remate,
.secao .limite__a { text-wrap: balance; }

/* a ancora nao encosta na borda do viewport quando o link do hero desce pro
   metodo ou pro encarte: o titulo da secao chega com respiro */
section[id], article[id] { scroll-margin-top: clamp(1.5rem, 4vh, 3rem); }

/* ====================================================================
   OS GRIDS DE 2 COLUNAS — uma mecanica so pra pagina inteira.

   DIAGNOSTICO. O vao morto nao vinha do grid: vinha de a coluna curta
   carregar um ROTULO (so o titulo) enquanto a coluna longa carregava o
   texto inteiro. Coluna com rotulo termina em 100px, coluna com corpo
   termina em 600px, e a diferenca fica em branco — sobre folha de cor
   isso e exatamente a "faixa colorida chapada" da anti-referencia 4.

   MECANICA ESCOLHIDA · CABECO E PE (redistribuicao, nao preenchimento):
   1. A coluna curta e o CABECO da materia: kicker + titulo + DECK. O
      deck e a frase-sintese que ANTES abria a coluna longa (a .lead do
      estudio, a .declaracao da honestidade, o paragrafo de condicao da
      oferta) — ela sobe pro cabeco, onde pertence em qualquer revista.
      Zero palavra nova: o conteudo trocou de coluna.
   2. Quando a coluna longa carrega um bloco de FICHA (lista de spec), a
      ficha desce pro PE FULL-WIDTH, que atravessa as duas colunas. Ela
      ganha a largura que pedia (uma linha por item) e devolve altura pro
      equilibrio das duas colunas.
   3. O PE da coluna curta e sempre a marca de registro (a cruzeta do
      impressor), presa na base pelo margin-top:auto. Ela e o ponto final
      da coluna, nao o unico habitante dela.
   4. Fio de calha de altura total na fronteira (vive na coluna longa,
      que define a altura da linha).

   TETO DE VAO (medido em 1440x900): sobre folha de cor o vao residual da
   coluna curta nao passa de 25% da altura da linha — bloqueante, porque
   ali o vazio e superficie de cor exposta. Sobre a Noite vale 40%, ja que
   grain, nevoa e vinheta ocupam o vazio. Em ABSOLUTO, vao abaixo de 200px
   nunca e defeito: e o pe de pagina da coluna.

   DUAS EXCECOES DECLARADAS (vao mantido de proposito, nao esquecido):
   a) .faq__item (5/7) — linha de dicionario que REPETE 5 vezes, cada uma
      com ~190px de altura. O vao ao lado da pergunta curta nunca passa de
      ~130px absolutos e a marca de registro em 5 linhas seguidas viraria
      ruido. Fica o fio de calha, que e o suficiente.
   b) .linha__grid (168px + 1fr) — nao e grid editorial, e MARGEM DE FOLIO:
      a coluna de 168px e mais estreita que qualquer medida de texto e
      carrega o numeral-ancora mais a aba de indice de 2px, que corre a
      altura inteira da linha. O vazio ali e a margem da pagina, e sobre a
      Noite, e faz parte da unica quebra de grid da secao.
   ==================================================================== */
.grid-5-7 { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.col-texto > p + p { margin-top: 1.1em; }
.col-texto > p { max-width: 66ch; color: var(--areia-muted); }

.grid-5-7 > .col-texto,
.oferta__grid > .oferta__texto {
  border-left: 1px solid var(--fio);
  padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
  /* o fio e CALHA, nao borda de paragrafo: vai do topo a base da linha,
     mesmo quando o cabeco e a coluna mais alta */
  align-self: stretch;
}
@media (max-width: 899px) {
  /* empilhado nao existe fronteira de coluna: o fio viraria enfeite */
  .grid-5-7 > .col-texto,
  .oferta__grid > .oferta__texto { border-left: 0; padding-left: 0; }
}

/* O DECK dentro do cabeco: mesma voz da .lead, medida de deck (nao de
   corpo) e um respiro que o separa do titulo sem virar outro paragrafo. */
.col-titulo > .lead {
  margin-top: clamp(0.9rem, 2vh, 1.4rem);
  max-width: 34ch;
  text-wrap: pretty;
}
.lead {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: var(--text-lead);
  line-height: 1.34;
  color: var(--areia) !important;
  letter-spacing: -0.01em;
}

/* ====================================================================
   D2 — O CAPITULO "A Velour, sem rodeio" (5 subtopicos, 1 folha so)

   O problema desta secao e o oposto do vao: e a MONOTONIA. Cinco
   subtopicos empilhados com o mesmo esqueleto sao literalmente o
   template generico da anti-referencia 2, e resolver a variacao com
   cor de fundo por subtopico seria a anti-referencia 4 (o site
   colorido por secao). Entao a variacao e toda de COMPOSICAO e de
   DENSIDADE, sobre a mesma Noite:

   01 abertura  grid editorial 5/7 com cabeco, calha e marca de registro
   02 credos    ficha tabular full-width, 2 tintas por linha (7fr/5fr)
   03 laco      faixa horizontal de 5 etapas, ruled line correndo no topo
   04 prova     declaracao centrada, medida estreita, escala grande (respiro)
   05 limite    bento de 2 celulas de pesos diferentes (regua 2px vs 1px)

   O que amarra os cinco e o FOLIO: o mesmo numeral de indice em mono
   que numera as 3 linhas do catalogo, uma oitava abaixo (12px contra
   120px). Sistema, nao repeticao.
   ==================================================================== */
.bloco { margin-top: clamp(3.5rem, 9vh, 6rem); }
.bloco > h3 { max-width: 34ch; }
.bloco__intro { margin-top: 1.1em; max-width: 64ch; color: var(--areia-muted); }

.folio {
  font-family: var(--font-detail);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--caramelo);
  margin-bottom: 0.85em;
  font-variant-numeric: tabular-nums;
}
/* o titulo do capitulo abre um NIVEL acima dos h2 comuns da pagina, senao os 5
   subtopicos (h3 em 32px) competem com ele e a hierarquia interna se achata.
   A escala do capitulo fica 52 / 32 / 20, tres degraus visiveis, com o h1 do hero
   ainda uma oitava acima em 72px. */
.capitulo__cabeco h2 {
  max-width: 24ch;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
}

/* 02 · A FICHA DE CREDOS. Cada crenca e uma LINHA de regua com duas tintas: a
   afirmacao em Fraunces areia (o que a Velour defende) e a consequencia em
   grotesca muted (o que isso obriga na pratica). A hierarquia interna nasce do
   par display/corpo, nao de cor — e por isso a ficha le densa sem pesar. */
.credos {
  margin-top: clamp(1.6rem, 4vh, 2.5rem);
  border-top: 1px solid var(--fio-forte);
}
.credos li {
  display: grid;
  gap: clamp(0.5rem, 2vw, 2.25rem);
  padding: clamp(1.35rem, 3vh, 1.9rem) 0;
  border-bottom: 1px solid var(--fio);
}
.credo__claim {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.15rem, 1.75vw, 1.4rem);
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--areia);
}
.credo__nota {
  color: var(--areia-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
}

/* 03 · O LACO. As 5 etapas nao viram outra timeline vertical (essa e do caderno
   azul, e repetir aqui seria a mesma dobra duas vezes): viram uma FAIXA, com o
   fio de spec correndo no topo de todas as celulas e o numeral de etapa em mono
   sob ele. Le como carta de processo impressa na horizontal. */
.laco {
  margin-top: clamp(1.8rem, 4vh, 2.5rem);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.laco li {
  padding-top: 0.85rem;
  border-top: 1px solid var(--fio);
}
.laco__num {
  display: block;
  margin-bottom: 0.55em;
  font-family: var(--font-detail);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--caramelo);
  font-variant-numeric: tabular-nums;
}
.laco p {
  color: var(--areia-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.bloco--laco .nota-forte { margin-top: clamp(2.25rem, 5vh, 3rem); }

/* 04 · O RESPIRO do capitulo: densidade minima, medida estreita, escala grande e
   eixo centrado — a unica vez que o capitulo sai do alinhamento editorial. E a
   rima com a hero: a pagina abriu dizendo que foi escrita pelo motor, e este e o
   bloco que fecha esse laco. Aqui vive o grifo em BLOCO, uma vez so. */
.bloco--prova {
  margin-top: clamp(4.5rem, 12vh, 8rem);
  text-align: center;
}
.bloco--prova > h3 {
  margin: 0 auto;
  max-width: 26ch;
  font-size: clamp(1.45rem, 2.9vw, 2.2rem);
}
.prova__declaracao {
  margin: clamp(1.4rem, 3vh, 2rem) auto 0;
  max-width: 54ch;
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--areia);
}
.prova__remate {
  margin: clamp(1.1rem, 2.5vh, 1.6rem) auto 0;
  max-width: 48ch;
  color: var(--areia-muted);
}

/* 05 · O BENTO DE DUAS CELULAS. A admissao (celula grande, display areia, regua
   caramelo de 2px) contra o inventario do que existe hoje (celula menor, corpo
   muted, fio de 1px). Duas reguas de peso diferente no topo fazem o par ler como
   livro-caixa, e nao como as duas colunas do bloco 01 outra vez. */
.limite {
  margin-top: clamp(1.6rem, 4vh, 2.25rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.limite__a,
.limite__b { padding-top: 1.05rem; }
.limite__a {
  border-top: 2px solid var(--caramelo);
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.15rem, 1.75vw, 1.4rem);
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--areia);
}
.limite__b {
  border-top: 1px solid var(--fio);
  color: var(--areia-muted);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* D3 — linha do tempo, densidade alta · CADERNO AZUL: papel de macacao de
   mecanico lavado sob luz de galpao. E a secao mais tecnica da pagina, e o
   territorio do metodo e do motor. */
.passos {
  margin-top: clamp(2rem, 5vh, 3.25rem);
  border-top: 1px solid var(--fio);
}
.passo {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.6rem, 3.5vh, 2.25rem) 0;
  border-bottom: 1px solid var(--fio);
}
.passo__num {
  font-family: var(--font-detail);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--caramelo);
  padding-top: 0.35em;
}
.passo__corpo p { color: var(--areia-muted); max-width: 62ch; }
.passo__corpo strong { color: var(--areia); font-weight: 500; }

.lista { margin-top: 1.1em; display: grid; gap: 0.6em; }
.lista li {
  position: relative;
  padding-left: 24px;
  color: var(--areia-muted);
  max-width: 62ch;
}
.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 12px;
  height: 1px;
  background: var(--caramelo);
}

/* sobre a folha azul a nota troca o palco elevado por noite cheia: vira um
   retangulo escuro colado no papel, e le como etiqueta e nao como card */
.caderno .nota-forte { background: var(--noite); }

.nota-forte {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
  border-left: 2px solid var(--caramelo);
  background: var(--noite-alta);
  border-radius: var(--raio-a);
  max-width: 60ch;
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.4;
  box-shadow: var(--sombra);
}

/* D4 — as tres linhas: numeral gigante sangrando a coluna */
.intro { margin-top: var(--sp-2); max-width: 58ch; color: var(--areia-muted); }

/* O INDICE DA SECAO. As duas linhas entram como sumario de revista antes de
   virarem capitulos: numeral de folio em mono, nome em areia cheia, definicao em
   muted. Sao os MESMOS numeros 01/02 que reaparecem gigantes logo abaixo — o
   sumario e a promessa do numeral-ancora. Codificacao por numero, nao por cor:
   as tintas das duas linhas seguem vivendo so nas abas de 2px.

   RITMO DE DOIS (escopo v1). Em tres itens a leitura era vertical e o sumario
   se sustentava como lista. Em dois, empilhado, ele vira um bloco de ~110px
   com meia coluna de vao ao lado e o leitor nao percebe que existe uma
   ESCOLHA ali. Entao no desktop ele deixa de ser lista e vira BIFURCACAO: as
   duas entradas dividem a largura da coluna sob a mesma regua, lado a lado
   (ver o bloco de 900px). No mobile continua empilhado, que e onde a lista
   ainda le como lista. */
.indice {
  margin-top: clamp(1.4rem, 3vh, 1.9rem);
  border-top: 1px solid var(--fio);
  max-width: 64ch;
}
.indice li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.8em 0;
  border-bottom: 1px solid var(--fio);
  color: var(--areia-muted);
  font-size: 1rem;
  line-height: 1.55;
}
.indice__num {
  font-family: var(--font-detail);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--caramelo);
  font-variant-numeric: tabular-nums;
}
.indice strong { color: var(--areia); font-weight: 500; }

.linha {
  position: relative;
  padding: clamp(3rem, 8vh, 5.5rem) 0;

  overflow: hidden;
}
/* ABA DE INDICE — o unico lugar da pagina onde as 5 cores convivem numa
   mesma dobra. Sai a nevoa radial (que era justamente o efeito invisivel) e
   entra um registro de 2px na margem esquerda, na tinta da linha: e o
   polegar de indice de uma revista encadernada. Cor como CODIFICACAO, com
   2px de largura — o oposto de superficie. */
.linha::before {
  content: "";
  position: absolute;
  top: clamp(2rem, 5vh, 3.25rem);
  bottom: clamp(2rem, 5vh, 3.25rem);
  left: max(0.75rem, calc(50% - var(--coluna) / 2));
  width: 2px;
  background: var(--aba, var(--caramelo));
  pointer-events: none;
}
.linha--02 { --aba: var(--azul-tinta); }

.linha__grid { position: relative; display: grid; gap: clamp(0.5rem, 2vw, 2.5rem); }
/* O numeral e o elemento visual da secao (a pagina quase nao tem foto).
   Atras dele, o mesmo numero deslocado 3px na tinta da faixa: registro de
   impressao fora de esquadro — a assinatura grafica do DNA, sem virar efeito. */
.linha__num {
  position: relative;
  isolation: isolate;
  font-family: var(--font-display);
  font-weight: 340;
  font-size: var(--text-num);
  line-height: 0.82;
  color: var(--caramelo);
  letter-spacing: -0.04em;
  /* o fantasma repete a tinta da propria linha, deslocado 3px: registro fora
     de esquadro, a mesma tinta impressa duas vezes (nao uma cor nova) */
  --tinta-fantasma: rgba(200, 144, 106, 0.34);
}
.linha__num::before {
  content: attr(data-num);
  position: absolute;
  z-index: -1;
  left: 3px;
  top: 4px;
  color: var(--tinta-fantasma);
}
.linha--02 .linha__num { --tinta-fantasma: rgba(46, 52, 96, 0.95); }
.linha__corpo > * + * { margin-top: 1.1em; }
.linha__corpo p { color: var(--areia-muted); max-width: 64ch; }
.linha__claim {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.35;
  color: var(--areia) !important;
  max-width: 44ch !important;
  text-wrap: balance;
}
.spec-titulo {
  font-family: var(--font-detail);
  font-size: var(--text-detail);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--areia-muted) !important;
  margin-top: 2em !important;
}
.spec {
  border-top: 1px solid var(--fio);
  margin-top: 0.9em !important;
}
/* A mono e a voz da maquina: kicker, label, numero de spec. Frase corrida de
   compra fica na grotesca, no corpo confortavel — o esqueleto de spec sheet
   (fio reto, marcador de traco) mantem o sabor tecnico sem custar leitura. */
.spec li {
  position: relative;
  padding: 0.85em 0 0.85em 30px;
  border-bottom: 1px solid var(--fio);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--areia-muted);
  font-variant-numeric: tabular-nums;
}
.spec li strong {
  font-weight: 500;
  color: var(--areia);
}
.spec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 14px;
  height: 1px;
  background: var(--caramelo);
}
.preco-linha strong { color: var(--areia); font-weight: 500; font-variant-numeric: tabular-nums; }
.linha__acao { margin-top: 2em !important; }

/* D5 — honestidade: denso, contraste com o editorial grande */

.declaracao {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.36;
  color: var(--areia);
  max-width: 32ch;
  text-wrap: pretty;
}
/* A FICHA DE PROMESSAS — pe full-width da folha bordo. Atravessa as duas
   colunas (grid-column: 1/-1) porque cada promessa e uma linha de spec e
   pede largura: dentro da coluna de 485px cada uma quebrava em 2 linhas
   com uma coluna vazia do lado. Aqui ela fecha a folha como tabela. */
.promessas {
  grid-column: 1 / -1;
  border-top: 1px solid var(--fio);
}
.promessas li {
  position: relative;
  padding: 1em 0 1em 32px;
  border-bottom: 1px solid var(--fio);
  color: var(--areia-muted);
  font-size: 1rem;
  line-height: 1.6;
  /* linha de tabela, nao de paragrafo: a promessa e uma afirmacao unica por
     regua e alinha com a margem da folha, no lugar de parar ragged no meio. */
  max-width: none;
}
.promessas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5em;
  width: 16px;
  height: 1px;
  background: var(--caramelo);
}
.promessas li:nth-child(2)::before { background: var(--areia-muted); opacity: 0.5; }

/* D6 — o palco quente: unica superficie clara da pagina */
/* O PALCO QUENTE — folha impressa deitada sobre a noite. Halftone em duas
   frequencias (grossa e fina, deslocadas: registro de impressao), luz vinda do
   alto a direita, sombra de contato nas duas bordas onde a folha encosta no
   escuro. Sem isso, caramelo vira retangulo chapado de template. */
.oferta {
  position: relative;
  background-color: var(--caramelo);
  color: var(--noite);
  padding: clamp(4.5rem, 11vh, 7.5rem) 0;
  background-image:
    radial-gradient(rgba(12, 13, 20, 0.13) 1px, transparent 1.5px),
    radial-gradient(rgba(88, 13, 26, 0.1) 0.5px, transparent 1px),
    radial-gradient(78% 100% at 84% 0%, rgba(255, 226, 199, 0.34), transparent 62%),
    radial-gradient(90% 70% at 20% 100%, rgba(88, 13, 26, 0.16), transparent 66%);
  background-size: 7px 7px, 4px 4px, 100% 100%, 100% 100%;
  background-position: 0 0, 2px 1px, 0 0, 0 0;
  box-shadow:
    inset 0 14px 26px -18px rgba(12, 13, 20, 0.7),
    inset 0 -14px 26px -18px rgba(12, 13, 20, 0.55);
}
.oferta :focus-visible { outline-color: var(--noite); }
.oferta .kicker { color: var(--noite); }

/* MASTHEAD DO ENCARTE — o preco gigante sai da coluna e vira cabecalho de
   capa, com o carimbo de vagas ancorado na outra ponta da mesma linha. Era
   dai que vinha o vao: a ficha de preco tinha ~260px de conteudo dentro de
   uma coluna esticada de ~690px. Como faixa, ela usa a largura toda e a
   altura vira consequencia do conteudo. */
.oferta__masthead {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vh, 3rem);
  border-bottom: 1px solid rgba(12, 13, 20, 0.3);
}
.oferta__ficha { min-width: min(100%, 24ch); }

/* carimbo de vagas: a UNICA quebra de grid do encarte */
.preco__vagas {
  flex: 0 0 auto;
  margin: 0;
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1.2rem, 2.5vw, 1.7rem);
  border: 2px solid rgba(12, 13, 20, 0.55);
  border-radius: var(--raio-b);
  transform: rotate(-2.5deg);
  text-align: center;
  font-family: var(--font-detail);
  font-size: var(--text-detail);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--noite-sobre-caramelo);
  text-indent: 0.28em;   /* compensa o tracking da ultima letra: centro optico */
}
.preco__vagas b {
  display: block;
  margin-bottom: 0.1em;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 340;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-indent: 0;
  color: var(--noite);
  font-variant-numeric: tabular-nums;
}

.oferta__grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}
.oferta__grid > .oferta__texto { border-left-color: rgba(12, 13, 20, 0.24); }
.preco {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(3.6rem, 8vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--noite);
  font-variant-numeric: tabular-nums;
}
.preco span {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--noite-sobre-caramelo);
  max-width: 19ch;
  text-wrap: balance;
}
.oferta__texto h2 { color: var(--noite); }
.oferta .col-titulo h2 { color: var(--noite); }
/* o deck da oferta roda no palco quente: a tinta e a noite, nunca a areia
   (areia sobre caramelo da 1.60:1). O strong sobe pra noite cheia. */
.oferta .col-titulo > .lead {
  color: var(--noite-sobre-caramelo) !important;
  max-width: 30ch;
}
/* a condicao nao se parte no meio: "R$ 497 por mes" le como um bloco so */
.oferta .col-titulo > .lead strong {
  color: var(--noite);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.oferta__texto p { color: var(--noite-sobre-caramelo); max-width: 60ch; text-wrap: pretty; }
.oferta__texto h2 + p { margin-top: 1.2em; }
.oferta__texto p + p { margin-top: 1em; }
.oferta__texto strong { color: var(--noite); font-weight: 500; font-variant-numeric: tabular-nums; }
.oferta__acao { margin-top: 2em; }

/* A FICHA DO TRATO no palco quente: a spec e a mesma do resto da pagina, com a
   tinta invertida. Areia sobre caramelo da 1.60:1, entao aqui tudo e Noite. */
.oferta .spec { border-top-color: rgba(12, 13, 20, 0.24); margin-top: 1.2em; }
.oferta .spec li {
  color: var(--noite-sobre-caramelo);
  border-bottom-color: rgba(12, 13, 20, 0.24);
}
.oferta .spec li::before { background: var(--noite); }
.oferta .spec li strong { color: var(--noite); }

/* AS DUAS NOTAS em texto de duas colunas, full-width. Nao e outro grid editorial
   (que precisa de cabeco): e um TEXTO CORRIDO diagramado em duas colunas de
   larguras diferentes, com o paragrafo mais longo na coluna mais larga, pra que
   as duas terminem na mesma regua. */
.oferta__notas {
  grid-column: 1 / -1;
  margin-top: clamp(2rem, 4.5vh, 3rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.oferta__notas p {
  color: var(--noite-sobre-caramelo);
  max-width: 56ch;
  text-wrap: pretty;
}
.oferta__notas strong { color: var(--noite); font-weight: 500; font-variant-numeric: tabular-nums; }

/* O PE FULL-WIDTH DO ENCARTE. A oferta desceu pra sexta dobra na narrativa nova,
   e o climax nao pode depender de posicao: ganha uma faixa que atravessa as duas
   colunas, com a conta de esperar em Fraunces grande de um lado e o CTA ancorado
   na outra ponta. E o ultimo ponto do caminho de olho, no unico palco claro. */
.oferta__fecho {
  grid-column: 1 / -1;
  margin-top: clamp(2.25rem, 5vh, 3.25rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid rgba(12, 13, 20, 0.3);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.oferta__conta {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.15rem, 1.85vw, 1.45rem);
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--noite);
  max-width: 52ch;
  text-wrap: balance;
}
.oferta__fecho .oferta__acao { margin-top: 0; }

/* D7 — FAQ como folha de spec, sem sanfona */
.faq { margin-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--fio); }
.faq__item {
  display: grid;
  gap: clamp(0.5rem, 2vw, 2.5rem);
  padding: clamp(1.6rem, 3.5vh, 2.25rem) 0;
  border-bottom: 1px solid var(--fio);
}
.faq__item h3 {
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.3;
  color: var(--areia);
}
.faq__item p { color: var(--areia-muted); max-width: 60ch; }

/* D8 — fecho */
.secao--fecho { text-align: center; }
.fecho__texto { margin: var(--sp-2) auto 0; max-width: 50ch; color: var(--areia-muted); }
.fecho__botoes {
  margin-top: clamp(2rem, 5vh, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

/* CONTRACAPA — o rodape fecha a revista na mesma tinta que abriu a confissao.
   E o verso da capa: e o que faz o bordo ler como decisao de sistema, e nao
   como acidente de uma secao. Entra depois de uma calha de noite. */
.rodape {
  padding: clamp(3.25rem, 8vh, 5rem) 0 clamp(3.25rem, 8vh, 4.5rem);
  margin-top: clamp(4rem, 11vh, 7rem);
  margin-bottom: 0;   /* a contracapa e o fim do documento: nao tem calha depois */
}
.rodape__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.wordmark--rodape { margin-bottom: 1rem; color: var(--areia); }
/* areia-muted sobre folha de cor so a partir de 1rem (5.17:1 no bordo) */
.rodape__texto { color: var(--areia-muted); font-size: 1rem; max-width: 52ch; text-wrap: pretty; }
.rodape__lado { display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; }
.rodape__assinatura {
  font-family: var(--font-detail);
  font-size: var(--text-detail);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--caramelo);
}

/* ------------------------------------------------------ formularios em modal */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--areia);
  max-width: min(640px, 94vw);
  width: 100%;
  max-height: 90svh;
  margin: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal::backdrop {
  background: rgba(6, 6, 11, 0.82);
  backdrop-filter: blur(3px);
}
/* superficie secundaria do azul: o formulario e o momento mais tecnico da
   pagina (o motor recebendo o dado), entao ele roda no mesmo papel do metodo */
.modal__caixa {
  position: relative;
  background: var(--azul-papel);
  --fio: var(--fio-caderno);
  border: 1px solid var(--fio);
  border-top: 2px solid var(--caramelo);
  border-radius: var(--raio-a);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--sombra);
}
.modal__fechar {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.1rem);
  right: clamp(0.75rem, 2vw, 1.1rem);
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio-b);
  color: var(--areia-muted);
  font-family: var(--font-detail);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.modal__fechar:hover, .modal__fechar:focus-visible { color: var(--caramelo); border-color: var(--fio); }
.modal h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.modal__intro { margin-top: 0.8em; color: var(--areia-muted); max-width: 46ch; text-wrap: pretty; }

.formulario { margin-top: clamp(1.5rem, 4vh, 2rem); display: grid; gap: 1.15rem; }
.campo { display: grid; gap: 0.45rem; margin: 0; }
/* Rotulo de campo e pergunta, nao etiqueta: caixa-alta em mono some a leitura
   quando passa de 3 palavras. A mono fica no kicker do modal. */
.campo label, .campo-grupo legend {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;   /* areia-muted sobre o papel azul so vale a partir de 1rem */
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--areia-muted);
}
.campo-grupo {
  border: 0;
  border-top: 1px solid var(--fio);
  margin: 0;
  padding: 1.1rem 0 0;
  display: grid;
  gap: 1rem;
}
.campo-grupo legend {
  padding: 0 0.9rem 0.2rem 0;   /* respiro entre o rotulo e o fio do fieldset */
  color: var(--caramelo);
  max-width: 46ch;
  line-height: 1.6;
}
.campo-grupo--opcoes { gap: 0.35rem; }

input[type="text"], input[type="tel"], input[type="url"], textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--noite);
  border: 1px solid var(--fio);
  border-radius: var(--raio-a);
  color: var(--areia);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(167, 155, 136, 0.6); }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--caramelo);
  box-shadow: 0 0 0 3px rgba(200, 144, 106, 0.18);
}
input:focus-visible, textarea:focus-visible { outline: none; }

.opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-height: 44px;
}
.opcao input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--caramelo);
  flex: 0 0 auto;
}
.opcao label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--areia);
  cursor: pointer;
}

.formulario__acao { margin: 0.4rem 0 0; }
.formulario__acao .btn { width: 100%; }
/* mono 13px sobre folha de cor: sobe pra areia cheia (7.83:1) em vez de muted */
.formulario__status {
  min-height: 1.4em;
  font-family: var(--font-detail);
  font-size: var(--text-detail);
  line-height: 1.6;
  color: var(--areia);
}
.formulario__status[data-erro] { color: var(--caramelo); }

/* O ATALHO. Quem nao quer preencher seis campos nao pode virar saida da pagina:
   esta linha leva pra mesma conversa com a mensagem curta. Vem DEPOIS do envio e
   em corpo de texto, nao de botao — e a segunda opcao, e le como segunda opcao.
   areia-muted sobre o papel azul so vale a partir de 1rem (4.9:1). */
.formulario__atalho {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--areia-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.formulario__sucesso { margin-top: clamp(1.5rem, 4vh, 2rem); }
.formulario__sucesso p { color: var(--areia); max-width: 46ch; text-wrap: pretty; }
.formulario__sucesso .formulario__nota {
  margin-top: 0.9em;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--areia-muted);
}
/* o painel de sucesso fecha com duas acoes na mesma linha: a conversa (solida,
   que e pra onde a pessoa vai) e a volta pro site (fantasma) */
.formulario__acao--par {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.formulario__sucesso .formulario__acao .btn { width: auto; }

/* ------------------------------------------------------------- breakpoints */

@media (min-width: 620px) {
  /* a faixa de etapas comeca a se abrir antes das 5 colunas */
  .laco { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 700px) {
  .rodape__grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
  .rodape__lado { align-items: flex-end; text-align: right; }
  .laco { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  /* 5/7 em TODOS os grids editoriais: e a proporcao que da ao cabeco
     largura de deck (346px, ~32ch em Fraunces) sem tirar medida do corpo.
     Em 4/8 o deck cairia pra ~11 palavras por linha e viraria sopa. */
  .grid-5-7 { grid-template-columns: 5fr 7fr; align-items: start; }
  .oferta__grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .faq__item { grid-template-columns: 5fr 7fr; align-items: baseline; }
  .faq__item p { border-left: 1px solid var(--fio); padding-left: clamp(1.25rem, 2.5vw, 2.25rem); }

  /* A COLUNA-CABECO ESTICA ATE A BASE DA LINHA e fecha com a marca de
     registro — a cruzeta que o impressor poe na folha pra conferir o encaixe
     das tintas. As duas colunas terminam na mesma altura (regra 5) e o
     residuo entre o deck e a marca vira pe de pagina, nao sobra. */
  .grid-5-7 > .col-titulo,
  .oferta__grid > .col-titulo {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  /* o pe tem ar garantido: quando o cabeco e a coluna MAIS ALTA da linha, o
     margin-top:auto da marca vira zero e ela encostaria na ultima linha do
     deck. Este respiro e o piso, e o auto continua distribuindo o resto. */
  .grid-5-7 > .col-titulo > *:last-child,
  .oferta__grid > .col-titulo > *:last-child { margin-bottom: clamp(2rem, 4vh, 3rem); }
  .grid-5-7 > .col-titulo::after,
  .oferta__grid > .col-titulo::after {
    content: "";
    margin-top: auto;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.38;
    background:
      linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  }
  /* a ficha de credos ganha as duas tintas em colunas: afirmacao 7 / consequencia 5 */
  .credos li { grid-template-columns: 7fr 5fr; align-items: baseline; }
  /* o bento do limite e o inverso do grid editorial (7/5 contra 5/7), e por isso
     as duas celulas nao leem como a mesma mecanica do bloco 01 */
  .limite { grid-template-columns: 7fr 5fr; align-items: start; }
  .oferta__notas { grid-template-columns: 7fr 5fr; }
  .oferta__fecho { grid-template-columns: 7fr 5fr; }
  .oferta__fecho .oferta__acao { justify-self: end; }

  /* A BIFURCACAO DO SUMARIO: duas celulas na largura cheia da coluna, sob a
     mesma regua de topo. As duas entradas fecham em 2 linhas cada, entao os
     fios de base alinham e o par le como tabela de duas colunas — nao como
     lista curta com vao ao lado. */
  .indice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4rem);
    max-width: none;
  }

  .linha__grid { grid-template-columns: 168px 1fr; align-items: start; }
  .linha__num {
    margin-left: clamp(-3.5rem, -3vw, -1.5rem); /* a UNICA quebra de grid da secao */
    text-align: left;
  }
  .passo { grid-template-columns: 96px 1fr; }
}

@media (max-width: 899px) {
  .linha__num { font-size: clamp(2.75rem, 12vw, 4rem); }
  .col-titulo h2 { margin-top: 0.2em; }
}

@media (max-width: 639px) {
  /* o kicker precisa caber em UMA linha, senao o fio se desprende do rotulo */
  .kicker { font-size: 0.6875rem; letter-spacing: 0.2em; gap: 10px; }
  .fio { width: 30px; }
  .topbar__tag { display: none; }   /* a assinatura do topo volta no rodape */
}

@media (min-width: 1088px) {
  /* a partir daqui a coluna editorial esta no maximo (896px uteis) e a faixa de
     etapas abre nas 5 celulas: o laco inteiro se le numa varredura horizontal */
  .laco { grid-template-columns: repeat(5, 1fr); }
}

/* o override antigo de 344px saiu: com a curva de 6.9vw e o piso de 1.6rem, a
   headline de 79 caracteres fecha em 3 linhas ate 280px de largura (verificado
   pela faixa C/13.4–C/8.9), e forcar corpo menor ali so tirava presenca. */

@media (max-width: 480px) {
  .fecho__botoes { flex-direction: column; align-items: stretch; }
  .fecho__botoes .btn { width: 100%; }
  .passo { grid-template-columns: 52px 1fr; }
  /* o rotulo do CTA do hero tem 31 caracteres: em caixa alta com 0.2em de
     tracking ele quebrava em 2 linhas dentro do botao. Largura cheia (que e
     tambem o alvo de toque certo no mobile) mais tracking curto resolvem em
     uma linha ate ~340px de viewport. */
  .hero__cta .btn {
    width: 100%;
    padding-inline: 1.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .fio { transform: scaleX(1); transition: none; }
  .swap__b { display: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}