/* ============================================================
   FORRÓ EM HARMONIA — Página de Vendas
   Conceito: "Partitura Viva" — cinematográfico, cobre vintage
   editorial, Orbitron + Poppins, mood cinema novo + Blue Note
   ============================================================ */

/* ===== RESET MÍNIMO ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--urg-h) + 76px); }
body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* ===== Font fallback metric-adjusted: minimiza CLS quando webfont chega ===== */
@font-face {
  font-family: 'BG-Fallback';
  src: local('Arial');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Orb-Fallback';
  src: local('Arial');
  size-adjust: 92%;
  ascent-override: 85%;
  descent-override: 20%;
}
@font-face {
  font-family: 'Pop-Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 92%;
  descent-override: 28%;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ===== DESIGN TOKENS ===== */
:root {
  /* Cores */
  --bg:           #0A0A0A;
  --bg-alt:       #14100D;        /* mais quente — base cobre escuro */
  --bg-card:      #1A130E;
  --bg-elev:      rgba(255, 208, 186, 0.04);
  --line:         rgba(214, 214, 214, 0.10);
  --line-warm:    rgba(184, 115, 51, 0.22);

  --text:         #D6D6D6;        /* prata principal */
  --text-soft:    #A8A29B;        /* prata-muted (subiu de 9A938D pra passar AA) */
  --text-mute:    #847E78;        /* (subiu de 6B655F) */
  --text-strong:  #F2EEE9;        /* branco quente */

  --accent:       #FFD0BA;        /* salmão pálido (brandbook) */
  --copper:       #B87333;        /* cobre vivo — texto/traço */
  --copper-solid: #B87333;        /* cobre vivo como SUPERFÍCIE (não remapeia em seção clara:
                                     é fundo de botão, e o par com --ink dá 4.84:1) */
  --copper-deep:  #8B5A2B;
  --copper-glow:  rgba(184, 115, 51, 0.35);

  --rgb-copper:   184, 115, 51;
  --rgb-accent:   255, 208, 186;

  /* ===== SEÇÕES CLARAS (areia quente — esquema brand-director) ===== */
  --bg-light:        #EDE4D8;   /* areia base */
  --bg-light-alt:    #F2E2D6;   /* salmão-areia lavado */
  --bg-light-card:   #F7F0E7;   /* card sobre areia */
  --ink:             #1A130E;   /* tinta — corpo/headline · 14.6:1 AA */
  --ink-soft:        #3D332A;   /* parágrafo secundário · 9.79:1 AA */
  --ink-mute:        #6E5F4F;   /* metadados · ~4.7:1 AA */
  --copper-ink:      #8B5A2B;   /* cobre legível em claro · 4.64:1 AA */
  --line-ink:        rgba(26, 19, 14, 0.12);
  --line-ink-warm:   rgba(139, 90, 43, 0.28);

  /* ===== BOTÃO CLARO ===== */
  --btn-light-bg:    #FDFBF7;   /* branco quente */
  --btn-light-ink:   #1A130E;   /* texto do botão · 17.8:1 */
  --btn-light-glow:  rgba(255, 208, 186, 0.42);

  /* Tipografia */
  --font-display: 'Bricolage Grotesque', 'BG-Fallback', system-ui, sans-serif;
  --font-marquee: 'Orbitron', 'Orb-Fallback', system-ui, sans-serif;
  --font-body:    'Poppins', 'Pop-Fallback', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Tamanhos fluidos (clamp) — escala reduzida moderadamente (ajuste cliente lote 16),
     corpo mantido confortável (>=16px), headlines suavizadas */
  --fs-micro:  0.75rem;
  --fs-small:  0.875rem;
  --fs-base:   1rem;
  --fs-md:     1.05rem;
  --fs-lg:     clamp(1.12rem, 0.6vw + 0.95rem, 1.28rem);
  --fs-xl:     clamp(1.28rem, 1.0vw + 0.95rem, 1.62rem);
  --fs-2xl:    clamp(1.6rem, 1.8vw + 1.0rem, 2.35rem);
  --fs-3xl:    clamp(1.85rem, 3.0vw + 0.95rem, 3.3rem);
  --fs-4xl:    clamp(2.2rem, 4.2vw + 0.95rem, 4.4rem);

  /* Espaço — espaçamento entre blocos reduzido (lote 11) */
  --container:    1280px;
  --gutter:       clamp(1.25rem, 3vw, 2.5rem);
  --space-sec:    clamp(3.25rem, 6vw, 5.5rem);

  /* Motion */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:       180ms;
  --d-norm:       360ms;
  --d-slow:       720ms;

  /* ===== CAMADA DE URGÊNCIA (campanha de aniversário) =====
     --urg-h é DECLARADO, nunca medido: é ele que entra na conta do topo do header,
     do padding-top do hero e do scroll-padding das âncoras. Também está no CSS
     crítico do <head>, porque a primeira pintura já precisa do número certo. */
  --urg-h:      34px;
  --urg-bg:     linear-gradient(180deg, #17110C 0%, #0D0A07 100%);
  --urg-line:   rgba(184, 115, 51, 0.34);

  /* Sombras */
  --shadow-soft:  0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-card:  0 16px 40px rgba(0, 0, 0, 0.5);
  --glow-cta:     0 0 0 rgba(var(--rgb-copper), 0);
  --glow-cta-hover: 0 12px 40px rgba(var(--rgb-copper), 0.45), 0 0 80px rgba(var(--rgb-copper), 0.15);
}

/* seleção de texto na cor do projeto */
::selection { background: rgba(184, 115, 51, 0.36); color: #FFF6EE; }
.section--light ::selection,
.section--light-warm ::selection { background: rgba(139, 90, 43, 0.28); color: #14100D; }

/* âncoras não passam por baixo do header fixo */
#promise, #offer { scroll-margin-top: calc(var(--urg-h) + 88px); }

/* anel de foco padrão do projeto (nunca o outline default do browser) */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--light a:focus-visible, .section--light button:focus-visible,
.section--light-warm a:focus-visible, .section--light-warm button:focus-visible {
  outline-color: var(--copper-ink);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===== BODY BASE ===== */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 300;
  letter-spacing: 0.005em;
  /* SEM overflow-x: hidden aqui, de propósito. Ele era remendo pra vazamento lateral
     que já não existe — o overflow_probe.py fecha em zero nas 57 larguras. E remendo
     de overflow no body não é grátis: ele propaga pro viewport e faz o overflow
     COMPUTADO do body virar "hidden auto", o que embaralha qualquer diagnóstico de
     rolagem. Quem precisar conter sangramento, contenha no elemento que sangra. */
  /* atmosfera global: vinheta cobre profunda */
  background-image:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(184, 115, 51, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(184, 115, 51, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Grão sutil (fixo, global)
   ============================================================
   NÃO DEVOLVA O mix-blend-mode AQUI. Leia antes de mexer.

   Esta camada é fixa e cobre o viewport inteiro. Com mix-blend-mode, o Chromium
   precisa de um backdrop pra blendar — e o backdrop dela é a página toda. Pra
   conseguir isso ele DUPLICA o conteúdo rolável inteiro numa segunda camada de
   raster: com blend a árvore tinha dois layers de 1512x14265; sem blend, um só
   (medido via CDP LayerTree.compositingReasons, 3 scrollers -> 2).

   Numa página de 14.265px isso é fatal em 2x de DPR: 14.265 x 2 = 28.530px de
   altura, muito acima do teto de textura de 16.384px do GL. A camada precisa ser
   ladrilhada, e quando um ladrilho de baixo não fica pronto o blend lê um backdrop
   vazio. Como overlay(preto, x) = preto, o resultado é a TELA INTEIRA PRETA em
   rolagem profunda, com o DOM íntegro e a geometria correta — o defeito exato que
   foi reportado em 01/09.

   O grão é ruído a ~3% de alfa; o blend nunca valeu o que custava. Sem ele o
   layout fica a 7/255 de diferença máxima do que estava aprovado (medido pixel a
   pixel em 5 alturas, com o relógio congelado e piso de ruído em 0,000). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.82  0 0 0 0 0.73  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ===== TIPOGRAFIA UTIL ===== */
.font-display { font-family: var(--font-display); letter-spacing: 0.02em; }
.font-mono    { font-family: var(--font-mono); }
.uppercase    { text-transform: uppercase; }
.text-accent  { color: var(--accent); }
.text-copper  { color: var(--copper); }
.text-soft    { color: var(--text-soft); }
.text-strong  { color: var(--text-strong); }

/* ===== CONTAINER ===== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
  z-index: 2;
}

/* ===== ACCESSIBILITY ===== */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--accent); color: var(--bg);
  padding: 12px 18px; font-weight: 600; border-radius: 4px;
  z-index: 10000;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   HEADER + NAV
   ============================================================ */
/* O header não mora mais no topo absoluto: a barra de urgência fica acima dele e o
   empurra por --urg-h. Com a barra na tela o header também emagrece um passo — dois
   blocos gordos empilhados no topo comeriam a primeira dobra em janela baixa. */
.site-header {
  position: fixed;
  top: var(--urg-h); left: 0; right: 0;
  z-index: 100;
  padding: 10px 0;
  transition: background var(--d-norm) var(--ease), backdrop-filter var(--d-norm) var(--ease), border-color var(--d-norm) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-warm);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header .brand {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding-right: 8px;
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  color: var(--text-strong);
}
.site-header .brand img {
  width: auto; height: 36px;
  filter: invert(0%) brightness(1.1);
}
.site-header .nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 13px 20px;
  min-height: 44px;
  border: 1px solid var(--copper);
  color: var(--accent);
  background: rgba(184, 115, 51, 0.05);
  transition: all var(--d-fast) var(--ease);
}
.site-header .nav-cta:hover {
  background: var(--copper);
  color: var(--bg);
}
@media (max-width: 640px) {
  .site-header .nav-cta { display: none; }
}

/* ============================================================
   CAMPANHA DE ANIVERSÁRIO — as duas versões no mesmo HTML
   ============================================================
   O documento nasce PÓS-VIRADA. A classe .fh-campaign entra no <head>, por
   comparação de data no fuso de Brasília (corte 2026-09-16T00:00:00-03:00), antes
   da primeira pintura. Sem JS a página permanece pós-virada, de propósito.
   Estas regras espelham as do CSS crítico do <head>. */
/* O prefixo html- é deliberado: sem ele estas regras empatam em especificidade com
   as dos próprios componentes (.offer__stack-item {display:grid}, .offer__price-badge
   {display:inline-block}) e perdem por vir antes no arquivo. Sem JS, a linha do cupom
   reaparecia na oferta exatamente por isso. */
html .fh-when-campaign { display: none; }
html.fh-campaign .fh-when-campaign { display: var(--fh-d, block); }
html.fh-campaign .fh-when-after { display: none; }
.fh-inline { --fh-d: inline; }

/* ============================================================
   BARRA DE URGÊNCIA — topo fixo
   ============================================================
   MANIFESTO DESTA CAMADA
   TESE      · contagem como compasso, não como sirene — o mesmo cobre do resto da
               página e os mesmos dígitos Orbitron que já marcam o preço.
   SENSAÇÃO  · "a janela tem hora marcada", precisão em vez de alarme.
   GESTO     · a barra de compasso (‖) separando a chamada dos dígitos, ecoando o
               divisor que já corta as seções da página.
   ANTI-REF  · contador vermelho piscando · selo de "últimas vagas" · barra que
               some na virada e deixa um buraco no topo.
   APOSTA    · zero vermelho e zero piscada num elemento cuja única função é
               apressar. A urgência vem do segundo que anda, não da cor.

   ALTURA — --urg-h é declarado por breakpoint e a barra tem exatamente essa altura.
   Uma linha só desde 03/09/2026: a micro-legenda do horário saiu por decisão do
   cliente e a altura de campanha desceu de 46/44/34 para 40/36/30, mantendo a
   mesma folga vertical da barra pós-virada. Quem mexer aqui mexe no topo do hero,
   no header e no scroll-padding das âncoras — os três somam --urg-h.
   Os dígitos nascem no HTML no formato final e ficam invisíveis até o main.js
   escrever os valores: a largura já está reservada, então o relógio entra sem
   mexer um pixel do que está em volta. */
.fh-campaign { --urg-h: 40px; }
@media (max-width: 620px) { :root { --urg-h: 30px; } .fh-campaign { --urg-h: 36px; } }
@media (max-height: 640px) { :root { --urg-h: 26px; } .fh-campaign { --urg-h: 30px; } }

.urg {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 150;
  height: var(--urg-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter);
  overflow: hidden;
  /* entrelinha curta e declarada: a barra tem altura fixa, então o tipo dela não pode
     herdar o line-height 1.6 do corpo — 2px de sobra viram corte silencioso. */
  line-height: 1.15;
  background: var(--urg-bg);
  border-bottom: 1px solid var(--urg-line);
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.95),
              0 1px 0 rgba(184, 115, 51, 0.08) inset;
}
/* trilho de brasa no pé da barra — a mesma luz de palco do hero, em 1px */
.urg::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 208, 186, 0.30) 30%, rgba(255, 208, 186, 0.42) 50%, rgba(255, 208, 186, 0.30) 70%, transparent);
  pointer-events: none;
}
.urg__row {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%; min-width: 0;
}
.urg__row--campaign { --fh-d: flex; }
.urg__line { display: flex; align-items: baseline; justify-content: center; gap: 10px; min-width: 0; }
.urg__call {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  color: var(--accent);
  white-space: nowrap;
}
.urg__rule {
  font-family: var(--font-marquee);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--copper);
  opacity: 0.62;
}
.urg__clock {
  display: flex; align-items: baseline; gap: 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.js .urg__clock { visibility: hidden; }
.js .urg__clock.is-live { visibility: visible; }
.urg__unit b {
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
.urg__lab {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--copper);
  margin-left: 3px;
}
.urg__lab--short { display: none; }
@media (max-width: 480px) {
  .urg__lab--long  { display: none; }
  .urg__lab--short { display: inline; }
  .urg__clock { gap: 8px; }
}
.urg__scope {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
/* Telas estreitas: o tipo cede, a informação não. */
@media (max-width: 620px) {
  .urg__call   { font-size: 0.56rem; letter-spacing: 0.13em; }
  .urg__rule   { font-size: 0.52rem; }
  .urg__unit b { font-size: 0.79rem; }
  .urg__lab    { font-size: 0.55rem; margin-left: 2px; }
  .urg__scope  { font-size: 0.58rem; letter-spacing: 0.11em; }
  .urg__line   { gap: 7px; }
  .urg__clock  { gap: 7px; }
}
@media (max-width: 400px) {
  .urg__call   { font-size: 0.5rem; letter-spacing: 0.09em; }
  .urg__unit b { font-size: 0.74rem; }
  .urg__lab    { font-size: 0.5rem; }
  .urg__line   { gap: 5px; }
  .urg__clock  { gap: 6px; }
}
/* Janela baixa: o tipo cede um passo, os dígitos continuam legíveis. */
@media (max-height: 640px) {
  .urg__call   { font-size: 0.53rem; letter-spacing: 0.11em; }
  .urg__unit b { font-size: 0.74rem; }
  .urg__lab    { font-size: 0.52rem; }
}

/* Accent stripe topo */
.accent-stripe {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper) 30%, var(--accent) 50%, var(--copper) 70%, transparent);
  z-index: 200;
  opacity: 0.7;
}

/* ============================================================
   HERO — BUSTO CENTRALIZADO, FIGURA QUE EMERGE DO BREU
   ============================================================
   ATO 1 — MANIFESTO (herdado do DESIGN DNA "Partitura Viva")
   TESE      · o sanfoneiro do Cariri e a harmonia de conservatório na mesma respiração.
   SENSAÇÃO  · "esse cara sabe algo que eu não sei" — a figura aparece do escuro, não é colada nele.
   GESTO     · a headline atravessa o fole; o rosto nunca é tocado por texto.
   ANTI-REF  · retrato encaixotado com borda de foto · figura-selo perdida em campo preto ·
               vão morto entre a promessa e o botão.
   APOSTA    · a fotografia não tem contorno em canto nenhum: as bordas dissolvem por curva
               elíptica, sem nenhuma rampa reta, e a última coisa sólida da imagem é o fole,
               já sob a primeira linha da headline.

   ATO 2 — SISTEMA (tokens do prato)
   Enquadramento aferido pelo @brand-director (percentual sobre a ALTURA do arquivo):
   • wide   >=900px · 6:7  · coroa 12,0% · queixo 38,9% · topo do fole 40,4% · base 98,8%
   • tablet 621-899 · 4:5  · coroa 11,0% · queixo 36,1% · topo do fole 37,5% · base 92,0%
   • celular <=620  · 3:4  · coroa 10,0% · queixo 33,5% · topo do fole 34,9% · base 86,0%
   Nas três famílias a figura ocupa de 10,3% a 89,8% da largura e o rosto de 29,4% a 53,3%,
   com eixo do rosto em 41,4% — a massa do instrumento à direita equilibra a cabeça à esquerda.

   ------------------------------------------------------------
   CICLO-VARREDURA (2026-08-28) — POR QUE A GEOMETRIA MUDOU
   ------------------------------------------------------------
   O modelo anterior escolhia a altura do prato por clamps de svh e depois PRESUMIA que o
   texto caberia no que sobrasse. Numa varredura de 228 janelas (320→2560 de 40 em 40, com
   520/650/800/1080 de altura) isso reprovou em 70 delas: em 820x520 a pilha do tablet
   empurrava a headline pra fora da dobra, e acima de 1440x520 o botão saía da tela.
   Amostrar janela bonita escondia o furo; a varredura não esconde.

   O modelo novo inverte a dependência. Quem manda agora é a ALTURA QUE SOBRA:
   • O palco (.hero__stage) é o único item elástico da coluna (flex: 0 1 auto, min-height:0).
     Headline, subtítulo e CTA são rígidos. Como o hero tem ALTURA DEFINIDA (não min-height),
     qualquer excesso vira espaço negativo e é o palco — nunca o texto — que cede.
     Consequência dura: o texto não tem como ser empurrado pra fora da dobra.
   • A figura vive DENTRO do palco com altura em porcentagem:
         altura = (100% do palco − folga) ÷ queixo
     Como a porcentagem resolve contra a altura JÁ ENCOLHIDA do palco, a folga
     queixo→headline é a mesma em qualquer janela: é premissa da conta, não resultado dela.
   • A largura sai da altura por aspect-ratio, então o arquivo nunca é esticado nem cortado,
     e o teto de largura (--w-cap, com termo calc(100vw − 2×gutter)) impede por construção
     que a figura encoste em qualquer borda lateral.

   CRUZAMENTO (decisão do cliente, com uma exceção declarada)
   Desktop cruza (--chin-k = queixo do arquivo). Tablet e celular não cruzam — e "não cruzar"
   é só --chin-k:1, isto é, o queixo passa a ser a base da figura e a fórmula continua a mesma.
   EXCEÇÃO: no tablet com janela baixa (<=680px de altura) a pilha vertical não cabe sem
   espremer a figura a ~13% da tela. Nessa faixa, e só nela, o cruzamento volta.
   ============================================================ */
.hero {
  /* --- prato: geometria --- */
  --plate-r:    0.857;                       /* 6:7, razão do arquivo wide */
  --chin-k:     0.389;                       /* queixo, fração da altura do arquivo */
  --folga:      clamp(72px, 9svh, 132px);    /* queixo -> topo da headline */
  /* teto de largura em quatro termos. Os dois primeiros são gosto (família e tela), o
     terceiro impede encostar na borda lateral, o quarto limita a ALTURA da figura — é ele
     que impede a cauda do cruzamento de estourar a base do hero em janela baixa. */
  --w-vw:       38vw;
  --w-px:       520px;
  --img-h-max:  72svh;
  --w-cap:      min(var(--w-vw), var(--w-px),
                    calc(100vw - 2 * var(--gutter)),
                    calc(var(--img-h-max) * var(--plate-r)));
  /* altura de FLUXO do palco quando NADA aperta: a maior compatível com o teto de largura.
     Não existe "altura ideal" chutada em svh — o palco pede o máximo e o flex tira o resto. */
  --stage-cap:  calc(var(--w-cap) / var(--plate-r) * var(--chin-k) + var(--folga));

  position: relative;
  height: min(100svh, 940px);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* A barra de urgência soma altura ao topo em TODAS as telas, então ela entra na
     fórmula do palco em vez de o palco fingir que ela não existe. O termo do header
     também emagreceu, porque o header emagreceu junto. */
  padding-top: calc(var(--urg-h) + clamp(56px, 3.4svh + 38px, 104px));
  padding-bottom: clamp(18px, 3.4svh, 52px);
  overflow: hidden;
  overflow: clip;
  background: var(--bg);
  /* atmosfera de palco — a dissolução da foto pousa em brasa, não em vazio */
  background-image:
    radial-gradient(ellipse 62% 58% at 50% 40%, rgba(184, 115, 51, 0.17) 0%, transparent 72%),
    radial-gradient(ellipse 130% 54% at 50% 106%, rgba(184, 115, 51, 0.10) 0%, transparent 62%);
}

/* --- o palco: único item elástico da coluna --- */
.hero__stage {
  position: relative;
  z-index: 0;
  /* POLISH: no cruzamento a figura passa POR BAIXO da headline. Sem isto, arrastar pra
     selecionar a primeira linha do título inicia o drag-and-drop da fotografia e o cursor
     vira "mãozinha" onde deveria ser texto. O palco é cenário, não é alvo. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;                              /* deixa encolher abaixo do conteúdo */
  height: var(--stage-cap);
  margin-top: auto;                           /* sobra positiva repartida com o CTA */
  display: flex;
  justify-content: center;
  align-items: flex-start;                    /* a figura transborda por baixo, sob o texto */
}

/* --- o prato: razão travada, altura derivada da folga --- */
.hero__poster {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
  height: calc((100% - var(--folga)) / var(--chin-k));
  width: auto;
  max-width: none;
  aspect-ratio: var(--plate-r);
}
/* halo quente por trás do prato: sangra pra fora das quatro bordas e engole a dissolução */
.hero__poster::before {
  content: "";
  position: absolute;
  inset: -14% -30% -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side,
      rgba(184, 115, 51, 0.22) 0%,
      rgba(184, 115, 51, 0.10) 48%,
      rgba(184, 115, 51, 0.03) 72%,
      transparent 100%);
}
/* ANEL DE EXTINÇÃO — a segunda metade da resposta ao "suavize essa borda".
   A máscara resolve a opacidade; sobra o problema de COR: o fundo de estúdio da foto
   (musselina marrom à esquerda, azul-noite à direita) é mais claro que #0A0A0A, então
   mesmo a 30% de alfa ele ainda denuncia onde a fotografia termina. Este anel escurece
   a coroa externa do próprio prato ANTES da dissolução, e volta a alfa 0 na borda —
   nada de retângulo preto no canto. Ele não toca o miolo (transparente até 46%). */
.hero__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(52% 84% at 50% 45%,
    rgba(10, 10, 10, 0) 0%,
    rgba(10, 10, 10, 0) 40%,
    rgba(10, 10, 10, 0.07) 48%,
    rgba(10, 10, 10, 0.18) 56%,
    rgba(10, 10, 10, 0.32) 64%,
    rgba(10, 10, 10, 0.45) 72%,
    rgba(10, 10, 10, 0.53) 80%,
    rgba(10, 10, 10, 0.48) 87%,
    rgba(10, 10, 10, 0.32) 93%,
    rgba(10, 10, 10, 0.12) 97%,
    rgba(10, 10, 10, 0) 100%);
}

/* --- MÁSCARA: duas camadas, nenhuma aresta reta ---
   ANTES: uma rampa linear vertical + uma rampa linear HORIZONTAL. O problema é que a rampa
   horizontal tem curvas de nível retas e verticais — a olho, a lateral da foto continuava
   sendo uma linha. Agora a lateral é modelada por uma ELIPSE de raio 50% na horizontal, o
   que zera a alfa exatamente na borda do arquivo e faz toda curva de nível ser um arco.
   1) vertical — topo curto (coroa intacta a partir de 12%) + base longa em S até 100%
   2) elíptica — laterais, cantos e base em arco; 13 paradas aproximando um smoothstep,
                 com derivada quase nula na borda (é isso que apaga a aresta)             */
.hero__poster-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;                 /* razão idêntica à do arquivo: cover não corta nada */
  display: block;
  -webkit-user-drag: none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 2%, rgba(0,0,0,.14) 3.5%, rgba(0,0,0,.28) 5%, rgba(0,0,0,.46) 6.5%, rgba(0,0,0,.64) 8%, rgba(0,0,0,.80) 9.5%, rgba(0,0,0,.93) 11%, #000 12.5%, #000 42%, rgba(0,0,0,.94) 48%, rgba(0,0,0,.84) 54%, rgba(0,0,0,.70) 60%, rgba(0,0,0,.54) 66%, rgba(0,0,0,.38) 72%, rgba(0,0,0,.24) 78%, rgba(0,0,0,.13) 84%, rgba(0,0,0,.06) 90%, rgba(0,0,0,.02) 95%, transparent 100%),
    radial-gradient(50% 82% at 50% 45%, #000 0%, #000 38%, rgba(0,0,0,.99) 45%, rgba(0,0,0,.96) 52%, rgba(0,0,0,.91) 58%, rgba(0,0,0,.84) 64%, rgba(0,0,0,.74) 70%, rgba(0,0,0,.62) 75%, rgba(0,0,0,.49) 80%, rgba(0,0,0,.36) 85%, rgba(0,0,0,.24) 89%, rgba(0,0,0,.14) 93%, rgba(0,0,0,.07) 96%, rgba(0,0,0,.02) 98.5%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 2%, rgba(0,0,0,.14) 3.5%, rgba(0,0,0,.28) 5%, rgba(0,0,0,.46) 6.5%, rgba(0,0,0,.64) 8%, rgba(0,0,0,.80) 9.5%, rgba(0,0,0,.93) 11%, #000 12.5%, #000 42%, rgba(0,0,0,.94) 48%, rgba(0,0,0,.84) 54%, rgba(0,0,0,.70) 60%, rgba(0,0,0,.54) 66%, rgba(0,0,0,.38) 72%, rgba(0,0,0,.24) 78%, rgba(0,0,0,.13) 84%, rgba(0,0,0,.06) 90%, rgba(0,0,0,.02) 95%, transparent 100%),
    radial-gradient(50% 82% at 50% 45%, #000 0%, #000 38%, rgba(0,0,0,.99) 45%, rgba(0,0,0,.96) 52%, rgba(0,0,0,.91) 58%, rgba(0,0,0,.84) 64%, rgba(0,0,0,.74) 70%, rgba(0,0,0,.62) 75%, rgba(0,0,0,.49) 80%, rgba(0,0,0,.36) 85%, rgba(0,0,0,.24) 89%, rgba(0,0,0,.14) 93%, rgba(0,0,0,.07) 96%, rgba(0,0,0,.02) 98.5%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---------- DESKTOP EM JANELA BAIXA ----------
   O prato cede largura (o texto é que precisa de ar), mas a folga do queixo não cede. */
@media (min-width: 900px) and (max-height: 780px) {
  .hero {
    --w-vw: 30vw; --w-px: 420px;
    --folga: clamp(70px, 12svh, 110px);
    padding-bottom: clamp(14px, 2.6svh, 34px);
  }
}
@media (min-width: 900px) and (max-height: 620px) {
  .hero {
    --w-vw: 27vw; --w-px: 380px;
    --folga: clamp(64px, 11svh, 92px);
    padding-top: calc(var(--urg-h) + clamp(50px, 2svh + 38px, 74px));
  }
}

/* ---------- TABLET (621–899px): pilha vertical, headline NÃO cruza ----------
   --chin-k:1 põe o queixo na base da figura — a mesma fórmula, sem cruzamento.
   Com 3 linhas de headline a última cairia onde o teclado branco volta sólido. */
@media (max-width: 899px) {
  .hero {
    --plate-r:   0.8;                                    /* 4:5 */
    --chin-k:    1;
    --folga:     clamp(14px, 2.4svh, 30px);
    --w-vw: 58vw; --w-px: 470px;
  }
  .hero__poster-img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 2%, rgba(0,0,0,.15) 3.5%, rgba(0,0,0,.30) 5%, rgba(0,0,0,.48) 6.5%, rgba(0,0,0,.66) 8%, rgba(0,0,0,.82) 9.5%, rgba(0,0,0,.94) 11%, #000 12.5%, #000 62%, rgba(0,0,0,.93) 68%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.66) 80%, rgba(0,0,0,.48) 85%, rgba(0,0,0,.31) 90%, rgba(0,0,0,.17) 94%, rgba(0,0,0,.07) 97%, transparent 100%),
      radial-gradient(50% 84% at 50% 46%, #000 0%, #000 40%, rgba(0,0,0,.99) 47%, rgba(0,0,0,.96) 54%, rgba(0,0,0,.91) 60%, rgba(0,0,0,.84) 66%, rgba(0,0,0,.74) 71%, rgba(0,0,0,.62) 76%, rgba(0,0,0,.49) 81%, rgba(0,0,0,.36) 86%, rgba(0,0,0,.24) 90%, rgba(0,0,0,.14) 94%, rgba(0,0,0,.06) 97%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 2%, rgba(0,0,0,.15) 3.5%, rgba(0,0,0,.30) 5%, rgba(0,0,0,.48) 6.5%, rgba(0,0,0,.66) 8%, rgba(0,0,0,.82) 9.5%, rgba(0,0,0,.94) 11%, #000 12.5%, #000 62%, rgba(0,0,0,.93) 68%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.66) 80%, rgba(0,0,0,.48) 85%, rgba(0,0,0,.31) 90%, rgba(0,0,0,.17) 94%, rgba(0,0,0,.07) 97%, transparent 100%),
      radial-gradient(50% 84% at 50% 46%, #000 0%, #000 40%, rgba(0,0,0,.99) 47%, rgba(0,0,0,.96) 54%, rgba(0,0,0,.91) 60%, rgba(0,0,0,.84) 66%, rgba(0,0,0,.74) 71%, rgba(0,0,0,.62) 76%, rgba(0,0,0,.49) 81%, rgba(0,0,0,.36) 86%, rgba(0,0,0,.24) 90%, rgba(0,0,0,.14) 94%, rgba(0,0,0,.06) 97%, transparent 100%);
  }
}

/* ---------- TABLET EM JANELA BAIXA (<=680px de altura) — EXCEÇÃO DECLARADA ----------
   Aqui a pilha vertical é aritmeticamente impossível: sobram ~150px para a figura e ela
   cai para ~13% da largura da tela, virando selo. Nesta faixa, e só nesta, o cruzamento
   do desktop volta: --chin-k passa a ser o queixo do arquivo tablet (36,1%) e a headline
   atravessa o fole de novo, sempre abaixo do queixo, com folga declarada de 66px. */
@media (min-width: 621px) and (max-width: 899px) and (max-height: 680px) {
  .hero {
    --chin-k:    0.361;
    --folga:     clamp(66px, 13svh, 96px);
    --w-vw: 40vw; --w-px: 330px;
  }
  .hero__poster-img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 2%, rgba(0,0,0,.15) 3.5%, rgba(0,0,0,.30) 5%, rgba(0,0,0,.48) 6.5%, rgba(0,0,0,.66) 8%, rgba(0,0,0,.82) 9.5%, rgba(0,0,0,.94) 11%, #000 12.5%, #000 40%, rgba(0,0,0,.93) 47%, rgba(0,0,0,.82) 54%, rgba(0,0,0,.66) 61%, rgba(0,0,0,.48) 68%, rgba(0,0,0,.31) 75%, rgba(0,0,0,.17) 82%, rgba(0,0,0,.08) 89%, rgba(0,0,0,.02) 95%, transparent 100%),
      radial-gradient(50% 82% at 50% 45%, #000 0%, #000 38%, rgba(0,0,0,.99) 45%, rgba(0,0,0,.96) 52%, rgba(0,0,0,.91) 58%, rgba(0,0,0,.84) 64%, rgba(0,0,0,.74) 70%, rgba(0,0,0,.62) 75%, rgba(0,0,0,.49) 80%, rgba(0,0,0,.36) 85%, rgba(0,0,0,.24) 89%, rgba(0,0,0,.14) 93%, rgba(0,0,0,.07) 96%, rgba(0,0,0,.02) 98.5%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 2%, rgba(0,0,0,.15) 3.5%, rgba(0,0,0,.30) 5%, rgba(0,0,0,.48) 6.5%, rgba(0,0,0,.66) 8%, rgba(0,0,0,.82) 9.5%, rgba(0,0,0,.94) 11%, #000 12.5%, #000 40%, rgba(0,0,0,.93) 47%, rgba(0,0,0,.82) 54%, rgba(0,0,0,.66) 61%, rgba(0,0,0,.48) 68%, rgba(0,0,0,.31) 75%, rgba(0,0,0,.17) 82%, rgba(0,0,0,.08) 89%, rgba(0,0,0,.02) 95%, transparent 100%),
      radial-gradient(50% 82% at 50% 45%, #000 0%, #000 38%, rgba(0,0,0,.99) 45%, rgba(0,0,0,.96) 52%, rgba(0,0,0,.91) 58%, rgba(0,0,0,.84) 64%, rgba(0,0,0,.74) 70%, rgba(0,0,0,.62) 75%, rgba(0,0,0,.49) 80%, rgba(0,0,0,.36) 85%, rgba(0,0,0,.24) 89%, rgba(0,0,0,.14) 93%, rgba(0,0,0,.07) 96%, rgba(0,0,0,.02) 98.5%, transparent 100%);
  }
}

/* ---------- CELULAR (<=620px): sanfona inteira, texto abaixo da dissolução ---------- */
@media (max-width: 620px) {
  .hero {
    --plate-r:   0.75;                                   /* 3:4 */
    --chin-k:    1;
    --folga:     clamp(10px, 1.8svh, 22px);
    --w-vw: 86vw; --w-px: 400px;
    padding-bottom: clamp(16px, 3svh, 34px);
    background-image:
      radial-gradient(ellipse 96% 34% at 50% 28%, rgba(184, 115, 51, 0.16) 0%, transparent 72%),
      radial-gradient(ellipse 128% 44% at 50% 98%, rgba(184, 115, 51, 0.11) 0%, transparent 64%);
  }
  .hero__poster-img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 1.8%, rgba(0,0,0,.16) 3.2%, rgba(0,0,0,.32) 4.6%, rgba(0,0,0,.51) 6%, rgba(0,0,0,.69) 7.5%, rgba(0,0,0,.85) 9%, rgba(0,0,0,.95) 10.5%, #000 12%, #000 66%, rgba(0,0,0,.93) 72%, rgba(0,0,0,.82) 78%, rgba(0,0,0,.66) 83%, rgba(0,0,0,.48) 88%, rgba(0,0,0,.31) 92%, rgba(0,0,0,.16) 96%, rgba(0,0,0,.06) 98%, transparent 100%),
      radial-gradient(50% 86% at 50% 47%, #000 0%, #000 41%, rgba(0,0,0,.99) 48%, rgba(0,0,0,.96) 55%, rgba(0,0,0,.91) 61%, rgba(0,0,0,.84) 67%, rgba(0,0,0,.74) 72%, rgba(0,0,0,.62) 77%, rgba(0,0,0,.49) 82%, rgba(0,0,0,.36) 87%, rgba(0,0,0,.24) 91%, rgba(0,0,0,.13) 95%, rgba(0,0,0,.05) 98%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 1.8%, rgba(0,0,0,.16) 3.2%, rgba(0,0,0,.32) 4.6%, rgba(0,0,0,.51) 6%, rgba(0,0,0,.69) 7.5%, rgba(0,0,0,.85) 9%, rgba(0,0,0,.95) 10.5%, #000 12%, #000 66%, rgba(0,0,0,.93) 72%, rgba(0,0,0,.82) 78%, rgba(0,0,0,.66) 83%, rgba(0,0,0,.48) 88%, rgba(0,0,0,.31) 92%, rgba(0,0,0,.16) 96%, rgba(0,0,0,.06) 98%, transparent 100%),
      radial-gradient(50% 86% at 50% 47%, #000 0%, #000 41%, rgba(0,0,0,.99) 48%, rgba(0,0,0,.96) 55%, rgba(0,0,0,.91) 61%, rgba(0,0,0,.84) 67%, rgba(0,0,0,.74) 72%, rgba(0,0,0,.62) 77%, rgba(0,0,0,.49) 82%, rgba(0,0,0,.36) 87%, rgba(0,0,0,.24) 91%, rgba(0,0,0,.13) 95%, rgba(0,0,0,.05) 98%, transparent 100%);
  }
  .hero__poster::before { inset: -10% -22% -16%; }
  .hero__poster::after {
    background: radial-gradient(54% 86% at 50% 47%,
      rgba(10,10,10,0) 0%, rgba(10,10,10,0) 42%, rgba(10,10,10,.08) 51%,
      rgba(10,10,10,.20) 60%, rgba(10,10,10,.34) 69%, rgba(10,10,10,.46) 78%,
      rgba(10,10,10,.50) 86%, rgba(10,10,10,.38) 92%, rgba(10,10,10,.16) 97%,
      rgba(10,10,10,0) 100%);
  }
}
/* scrim: faixa escura que sobe da base e sustenta o contraste da headline sobre o fole.
   O topo leva só o necessário pro logo do header — a figura NUNCA é escurecida no rosto. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.18) 8%, transparent 15%),
    linear-gradient(0deg, rgba(10,10,10,0.70) 0%, rgba(10,10,10,0.52) 20%, rgba(10,10,10,0.26) 40%, transparent 58%);
}
.hero__top {
  position: relative; z-index: 2;
  width: 100%; max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
  flex: 0 0 auto;
}
/* ------------------------------------------------------------------
   SCRIM LOCAL DO CRUZAMENTO — ancorado no TEXTO, não na página
   ------------------------------------------------------------------
   O .hero__scrim global sobe da BASE do hero, então a proteção que ele dá
   depende de onde a headline calhou de cair. Medindo o composto renderizado
   (contrast_probe.py, contraste par a par entre o pixel do glifo e o pixel do
   fundo no mesmo ponto), o furo apareceu justamente onde o global é fraco:
   a palavra em destaque cruzando o TECLADO BRANCO da sanfona.
       1440x900  pior banda de 24px da headline: 1,91:1
       1512x860  idem:                           1,78:1
   O pé do gradiente da palavra é o cobre #B87333, que é escuro; sobre tecla
   clara ele simplesmente some. Não é o branco do resto da frase que falha
   (mediana 16,5:1), é o cobre.

   A correção é local e viaja com o texto: um scrim elíptico preso ao próprio
   .hero__top. Onde o texto for, a proteção vai junto, em qualquer janela —
   não há mais dependência de a headline "cair no lugar certo". Fica DEBAIXO
   do texto (z-index -1 dentro do contexto do .hero__top) e ACIMA da fotografia.
   Sem aresta: elipse com parada transparente em 100% e caixa mais larga que a
   viewport, recortada pelo overflow:clip do hero.

   Só entra onde o texto CRUZA a figura (--scrim-local: 1): desktop e a exceção
   do tablet em janela baixa. No celular o texto pousa abaixo da dissolução,
   sobre a brasa de cobre do fundo — ali o scrim não protegeria nada e ainda
   apagaria a atmosfera quente, que é o gesto do projeto.
   Depois da correção a pior banda vai a 3,53:1 no desktop e 4,69:1 no tablet. */
.hero__top::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  transform: translateX(-50%);
  width: min(1700px, 150vw);
  top: calc(-1 * clamp(16px, 3.5svh, 46px));
  bottom: calc(-1 * clamp(18px, 4svh, 58px));
  opacity: var(--scrim-local, 0);
  background: radial-gradient(ellipse 82% 66% at 50% 48%,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.88) 30%,
    rgba(10, 10, 10, 0.76) 48%,
    rgba(10, 10, 10, 0.56) 64%,
    rgba(10, 10, 10, 0.34) 78%,
    rgba(10, 10, 10, 0.15) 89%,
    rgba(10, 10, 10, 0.04) 96%,
    transparent 100%);
}
/* o cruzamento acontece aqui — e só aqui */
@media (min-width: 900px) {
  .hero { --scrim-local: 1; }
}
@media (min-width: 621px) and (max-width: 899px) and (max-height: 680px) {
  .hero { --scrim-local: 1; }
}
/* CICLO-BUSTO — o CTA deixa de ser ancorado na base do hero.
   Antes: align-self:end + grid 1fr abria um vão morto de ~150px entre o subtítulo e o botão
   em 1440x900. Agora o conjunto palco+headline+subtítulo+CTA é UM bloco, e a sobra de altura
   é dividida pelos margin:auto do palco (topo) e do próprio CTA (base) — vão simétrico,
   nunca um buraco só no meio. */
.hero__bottom {
  position: relative; z-index: 2;
  width: 100%; max-width: 940px;
  margin: 0 auto auto;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  flex: 0 0 auto;
  margin-top: clamp(16px, 3svh, 40px);
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw + 0.62rem, 3.85rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-strong);
  margin: 0 auto 14px;
  width: min(100%, 88vw);
  max-width: 100%;
  text-wrap: balance;
  font-optical-sizing: auto;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.hero__headline .accent-word {
  /* CONTRASTE DO COMPOSTO (2026-08-28) — a rampa salmão→cobre é a mesma; o que muda é
     ONDE ela termina. Com a parada do cobre em 100%, a base do glifo resolvia em #B87333
     puro e, sobre a região mais clara da fotografia, o pior pixel de "harmonizar," media
     2,93:1 — abaixo do piso de 3:1 de texto grande. Levando a parada pra 119%, a caixa da
     palavra passa a usar só os primeiros 84% da rampa e a base resolve em ~#C38249: mesma
     cor, mesmo caminho, mesma leitura — corta apenas o trecho final, onde a rampa escurece
     demais pra sustentar o piso. A regra é da classe, então vale pras três palavras ao
     mesmo tempo: elas são um conjunto e não podem divergir entre si. */
  background: linear-gradient(180deg, var(--accent) 0%, var(--copper) 119%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.hero__sub {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 0.3vw + 0.85rem, 1.1rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--accent);
  margin: 0 auto;
  max-width: 54ch;
  text-wrap: pretty;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.hero__sub strong {
  color: var(--text-strong);
  font-weight: 600;
}
.hero__bottom .btn { text-shadow: none; }
/* LINHA DE REFORÇO — o argumento da campanha logo abaixo do botão, no lugar exato
   onde vivia o slot do contador antigo. Ela é curta de propósito: o relógio já está
   no topo e esta linha só nomeia a consequência da data. */
.hero__note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-align: center;
  /* 62ch cabe a frase inteira numa linha no desktop; abaixo disso a viewport quebra
     sozinha, e o balance divide em duas linhas iguais em vez de deixar órfã. */
  max-width: 62ch;
  margin: 0 auto;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
/* CICLO-1 — telas grandes: medida da headline um passo maior que o container padrão.
   1200px de medida jogava a última palavra pra uma 3ª linha; 1360 devolve as 2 linhas
   equilibradas do desktop aprovado.
   NOTA (2026-08-28): a copy do h1 perdeu o ponto final a pedido do cliente. A medição
   caractere a caractere em 390, 820, 1280, 1440, 1512 e 1920 mostrou quebra idêntica
   com e sem o ponto — os 1360px continuam necessários pela largura das palavras, não
   pela pontuação. */
@media (min-width: 1360px) {
  .hero__top { max-width: 1360px; }
}

/* ============================================================
   HERO — AJUSTES DE TIPO POR JANELA
   Vivem DEPOIS de .hero__headline/.hero__sub de propósito: mesma especificidade,
   quem vem por último ganha. Colocados junto da geometria, eles perdiam em silêncio.
   ============================================================ */

/* Pilha vertical (tablet e celular): o texto começa logo abaixo da dissolução da base */
@media (max-width: 899px) {
  .hero__top { margin-top: clamp(4px, 1.2svh, 18px); }
}
@media (max-width: 620px) {
  .hero__top { margin-top: clamp(2px, 0.9svh, 14px); }
}

/* Celular baixo (iPhone SE, Android 360x740): o bloco inteiro tem de caber numa dobra.
   Compacto subtítulo e botão — a headline de 4 linhas é copy congelada e não muda. */
@media (max-width: 620px) and (max-height: 800px) {
  .hero {
    --w-vw: 80vw; --w-px: 330px;
    padding-bottom: clamp(12px, 2.2svh, 26px);
  }
  .hero__top { margin-top: clamp(0px, 0.6svh, 10px); }
  .hero__headline { margin-bottom: 10px; }
  .hero__sub { font-size: 0.89rem; line-height: 1.45; }
  .hero__bottom { margin-top: clamp(10px, 2svh, 18px); gap: 10px; }
  .hero__bottom .btn--lg { padding: 13px 18px; font-size: 0.74rem; letter-spacing: 0.09em; gap: 10px; }
  .hero__note { font-size: 0.62rem; letter-spacing: 0.03em; }
}
/* Celular em janela baixa (<=640px de altura) — a varredura reprovou 320x520 e 600x520
   por PRESENÇA: sobravam 105px de palco e a figura caía a 16% da tela. Como a headline de
   4 linhas é copy congelada, quem cede aqui é o corpo do tipo e o respiro, nunca a palavra. */
@media (max-width: 620px) and (max-height: 640px) {
  .hero { padding-top: calc(var(--urg-h) + clamp(40px, 1.4svh + 32px, 58px)); padding-bottom: 10px; }
  .hero__top { margin-top: 0; }
  .hero__headline { font-size: clamp(1.3rem, 5.4vw, 1.7rem); margin-bottom: 8px; }
  .hero__sub { font-size: 0.82rem; line-height: 1.4; }
  .hero__bottom { margin-top: 8px; gap: 7px; }
  .hero__bottom .btn--lg { padding: 11px 14px; font-size: 0.68rem; letter-spacing: 0.07em; gap: 8px; }
  .hero__note { font-size: 0.57rem; line-height: 1.25; letter-spacing: 0.02em; }
}

/* Tablet em janela baixa: o tipo cede junto com o palco, senão a figura vira selo.
   A compactação do TIPO começa antes do cruzamento (790px de altura contra 680px) porque
   a varredura fina pegou 860x681 e 880x681 com a figura em 21% da tela: ali a pilha ainda
   é vertical, e é o tipo — não a mecânica aprovada — que tem de abrir espaço. */
@media (min-width: 621px) and (max-width: 899px) and (max-height: 790px) {
  .hero__headline { font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.4rem); margin-bottom: 10px; }
  .hero__sub { max-width: 78ch; font-size: 0.9rem; line-height: 1.45; }
  .hero__top { margin-top: 0; }
  .hero__bottom { margin-top: clamp(10px, 2svh, 18px); }
  .hero__bottom .btn--lg { padding: 13px 22px; font-size: 0.76rem; }
}

/* Janela baixa e larga — o caso que o cliente reportou.
   Aqui o palco já cedeu largura, então quem cede em seguida é o TIPO:
   headline um passo menor, subtítulo em medida larga (2 linhas em vez de 3),
   botão compacto. A folga queixo->texto continua declarada, nunca calculada. */
@media (min-width: 900px) and (max-height: 780px) {
  .hero__headline { font-size: clamp(1.6rem, 2.86vw + 0.46rem, 3.6rem); margin-bottom: 11px; }
  .hero__sub { max-width: 94ch; font-size: 0.97rem; line-height: 1.48; }
  .hero__bottom { margin-top: clamp(12px, 2.2svh, 22px); }
  .hero__bottom .btn--lg { padding: 15px 28px; font-size: 0.8rem; }
}
/* Janela muito baixa (<=620px de altura) em tela larga */
@media (min-width: 900px) and (max-height: 620px) {
  .hero__headline { font-size: clamp(1.5rem, 2.5vw + 0.4rem, 3.2rem); margin-bottom: 9px; }
  .hero__sub { font-size: 0.93rem; line-height: 1.44; }
  .hero__bottom { margin-top: clamp(10px, 1.8svh, 18px); }
  .hero__bottom .btn--lg { padding: 13px 24px; font-size: 0.76rem; }
}

/* ============================================================
   CTA — Botão Principal (cobre sólido com glow pulsante)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 14px;
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 20px 32px;
  border: 1px solid transparent;
  position: relative;
  transition: all var(--d-norm) var(--ease);
  cursor: pointer;
}
.btn--primary {
  background: linear-gradient(180deg, var(--copper) 0%, var(--copper-deep) 100%);
  color: #1A1209;
  border-color: var(--copper);
  box-shadow: var(--glow-cta);
  animation: cta-glow 2.6s ease-in-out infinite;
}
.btn--primary::after {
  content: '→';
  font-family: var(--font-marquee);
  font-size: 1.1em;
  transition: transform var(--d-fast) var(--ease);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-cta-hover);
  background: linear-gradient(180deg, #D4843C 0%, var(--copper) 100%);
  animation: none;
}
.btn--primary:hover::after { transform: translateX(6px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--line-warm);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  padding: 18px 26px;
}
.btn--ghost:hover {
  border-color: var(--copper);
  background: rgba(184, 115, 51, 0.06);
  color: var(--text-strong);
}

.btn--block { width: 100%; }
.btn--lg { padding: 24px 42px; font-size: 1rem; }

@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--rgb-copper), 0), 0 0 0 rgba(var(--rgb-copper), 0); }
  50%      { box-shadow: 0 0 30px rgba(var(--rgb-copper), 0.35), 0 0 60px rgba(var(--rgb-copper), 0.12); }
}

/* ===== BOTÃO CLARO (cliente: fundo claro + texto escuro, texto centralizado) ===== */
/* Em SEÇÃO ESCURA: branco quente + halo salmão (vira a mancha clara do mar escuro) */
.btn--light {
  background: var(--btn-light-bg);
  color: var(--btn-light-ink);
  border: 1px solid #FFFFFF;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(255,208,186,.25),
    0 10px 30px -8px rgba(0,0,0,.7),
    0 0 34px -6px var(--btn-light-glow);
  animation: none;
}
.btn--light::after {
  content: '→';
  font-family: var(--font-marquee);
  font-size: 1.1em;
  transition: transform var(--d-fast) var(--ease);
}
.btn--light:hover {
  transform: translateY(-2px);
  background: #FFFFFF;
  color: var(--btn-light-ink);
  box-shadow:
    0 0 0 1px rgba(255,208,186,.45),
    0 14px 40px -8px rgba(0,0,0,.8),
    0 0 50px -4px var(--btn-light-glow);
}
.btn--light:hover::after { transform: translateX(6px); }
.btn--light:active { transform: translateY(0); }
.btn--light:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Em SEÇÃO CLARA: inverte p/ cobre sólido + texto tinta (mancha mais saturada do areia) */
.section--light .btn--light,
.section--light-warm .btn--light {
  background: var(--copper-solid);
  color: var(--ink);
  border: 1px solid var(--copper-deep);
  box-shadow:
    0 8px 24px -8px rgba(139,90,43,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.section--light .btn--light:hover,
.section--light-warm .btn--light:hover {
  background: #C8823D;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px -8px rgba(139,90,43,.7),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.section--light .btn--light:focus-visible,
.section--light-warm .btn--light:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}

/* ===== SEÇÕES CLARAS — troca de tokens local (zero refator de componente) ===== */
.section--light,
.section--light-warm {
  --text:        var(--ink);
  --text-soft:   var(--ink-soft);
  --text-mute:   var(--ink-mute);
  --text-strong: var(--ink);
  --accent:      var(--copper-ink);
  /* cobre vivo (#B87333) só rende 3.0:1 sobre areia — reprova AA em texto pequeno.
     Remapeia o token inteiro no escopo claro: 4.6:1 em qualquer componente. */
  --copper:      var(--copper-ink);
  --line:        var(--line-ink);
  --line-warm:   var(--line-ink-warm);
  --bg-card:     var(--bg-light-card);
  --bg-elev:     rgba(26, 19, 14, 0.04);
  position: relative;
  z-index: 2;
}
.section--light      { background: var(--bg-light); }
.section--light-warm { background: var(--bg-light-alt); }

/* faixa de transição escuro→claro no topo da seção clara (micro-fade, sem gradiente clichê) */
.section--light::before,
.section--light-warm::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 64px;
  background: linear-gradient(180deg,
    rgba(10,10,10,.16) 0%, rgba(184,115,51,.05) 42%, transparent 100%);
  pointer-events: none; z-index: 0;
}
/* claro→escuro: base escurece de leve antes do corte */
.section--light::after,
.section--light-warm::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 56px;
  background: linear-gradient(0deg, rgba(26,19,14,.10) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}
.section--light > .container,
.section--light-warm > .container { z-index: 2; }
/* grain global some demais no areia → baixar contribuição via blend menos agressivo */
.section--light,
.section--light-warm { isolation: isolate; }

/* ============================================================
   SECTION HEADER (cifra + label + título)
   ============================================================ */
.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 44px);
  position: relative;
}
.sec-head__mark {
  display: grid;
  grid-template-columns: auto;
  gap: 4px;
}
.sec-head__cifra {
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 0.95;
  color: var(--copper);
  letter-spacing: 0.01em;
}
.sec-head__op {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.sec-head__body {
  padding-bottom: 4px;
}
.sec-head__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.sec-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.08;
  color: var(--text-strong);
  letter-spacing: -0.015em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
.sec-head__title em {
  font-style: normal;
  color: var(--copper);
}

/* ============================================================
   BARRA DE COMPASSO — divisor entre seções
   ============================================================ */
.measure-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  padding: clamp(28px, 5vw, 60px) 0;
  position: relative;
}
.measure-bar::before, .measure-bar::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-warm) 30%, var(--line-warm) 70%, transparent);
}
.measure-bar__sym {
  font-family: var(--font-marquee);
  font-size: 1.1rem;
  letter-spacing: 0.4em;
  color: var(--copper);
  opacity: 0.55;
}

/* ============================================================
   MANIFESTO (citação central)
   ============================================================ */
.manifesto {
  padding: var(--space-sec) 0;
  position: relative;
  background: var(--bg-alt);
}
.manifesto::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(184, 115, 51, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 80%, rgba(184, 115, 51, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.manifesto__quote-mark {
  font-family: var(--font-marquee);
  font-size: clamp(6rem, 14vw, 12rem);
  line-height: 0.7;
  color: var(--copper);
  opacity: 0.18;
  margin-bottom: -40px;
  margin-left: -8px;
}
.manifesto__quote {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw + 0.6rem, 2.2rem);
  line-height: 1.45;
  color: var(--text-strong);
  max-width: 920px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.manifesto__quote em {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}
.manifesto__attr {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
}
.manifesto__attr span { color: var(--text-mute); }

/* ============================================================
   PROMESSA CENTRAL — bloco de 4 verbos
   ============================================================ */
.promise {
  padding: var(--space-sec) 0;
}
.promise__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lg);
  color: var(--text-soft);
  text-wrap: pretty;
  max-width: 760px;
  margin-bottom: 20px;
  line-height: 1.6;
}
.promise__intro:last-of-type { margin-bottom: 36px; }
.promise__intro strong { color: var(--text-strong); font-weight: 500; }

.verbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4px;
  border: 1px solid var(--line-warm);
  background: var(--bg-card);
}
.verb {
  padding: clamp(26px, 3.6vw, 40px);
  border: 1px solid var(--line-warm);
  margin: -1px;
  background: var(--bg-card);
  position: relative;
  transition: background var(--d-norm) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.verb:hover { background: var(--bg-elev); }
.verb__index {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper-ink, var(--copper));
  margin-bottom: 0;
}
.section--light .verb__index,
.section--light-warm .verb__index { color: var(--copper-ink); }
/* lote 3: cada card vira UMA frase em negrito (estilo título), sem descrição repetida */
.verb__title {
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.12rem, 1.0vw + 0.7rem, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0;
}

/* ============================================================
   LINHAGEM DOS MESTRES — dobra dedicada (composto duotone)
   ============================================================ */
/* R2.3-FIX — cena única full-bleed, headline CENTRALIZADA na faixa central */
/* ALTURA DERIVADA DA LARGURA, uma família por faixa (spec do @brand-director em
   screenshots/brand-mestres-2026-08-28/REFERENCIA-mestres-retrato.css.txt).
   Cada recorte só sobrevive ao cover acima de uma razão mínima — abaixo dela a janela
   começa a comer testa e aba de chapéu:
     wide   >= largura / 2,39   ·   tablet >= largura / 1,84   ·   mobile >= largura / 0,91
   Por isso a altura deixa de ser um clamp único e passa a acompanhar a largura: a razão
   da CAIXA fica presa perto da razão do ARQUIVO e o recorte nunca decapita ninguém. */
.masters {
  position: relative;
  min-height: clamp(460px, 58vw, 680px);
  display: flex;
  align-items: flex-end;        /* a linha pousa na faixa dos foles, nunca sobre os rostos */
  justify-content: center;
  overflow: hidden;
  overflow: clip;
  background: var(--bg);
}
.masters__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;  /* wide: enquadramento aprovado pelo cliente */
  z-index: 0;
}
/* tablet (621–899): a caixa vira 3:2, a mesma razão do arquivo — não há o que reposicionar */
@media (max-width: 899px) {
  .masters { min-height: clamp(430px, 66.67vw, 600px); }
  .masters__bg { object-position: center center; }
}
/* celular (<=620): 3:4, a coluna da linhagem — passado no alto, Mestrinho encostando no texto.
   O 40% herdado PRECISA sair aqui: puxar a janela pra cima comeria a faixa de texto,
   que no retrato é atmosfera pura de 68% a 100% do arquivo. */
@media (max-width: 620px) {
  .masters { min-height: clamp(430px, 133.33vw, 700px); }
  .masters__bg { object-position: center center; }
}
/* RESSALVA DO @brand-director — folga de rosto em viewport muito larga.
   Sem isto, o clamp base trava em 680px e a razão da caixa dispara: em 1920 chega a 2,82
   contra o limite de 2,39 do recorte wide, e o corte superior começa a comer a testa do
   Sivuca e a aba do chapéu do Dominguinhos.
   DESVIO DECLARADO: a spec propõe teto de 1000px, que segura até 2381px de viewport
   (42vw = 1000 nesse ponto). De 2381 em diante o teto volta a mandar e a razão estoura
   de novo — em 2560 dá 2,56. O teto vai a 1080px, que é 42vw em 2571, e aí a faixa de
   42vw cobre a varredura inteira até 2560 com razão constante de 2,381. Mesma fórmula
   do @brand-director, só com o teto recalculado pro fim da matriz de teste. */
@media (min-width: 1600px) {
  .masters { min-height: clamp(680px, 42vw, 1080px); }
}
/* scrim concentrado na faixa central pra headline ler sobre a cena (figuras não escurecem demais) */
.masters__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 82% 40% at 50% 82%, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.38) 62%, transparent 84%),
    linear-gradient(180deg, rgba(10,10,10,0.30) 0%, transparent 26%, rgba(10,10,10,0.42) 78%, rgba(10,10,10,0.72) 100%);
  pointer-events: none;
}
.masters__band {
  position: relative; z-index: 2;
  width: 100%;
  text-align: center;
  padding: clamp(24px, 5vw, 56px) 0 clamp(26px, 5vw, 58px);
}
.masters__line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.4vw + 0.7rem, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.5);
}
.masters__line strong {
  background: linear-gradient(180deg, var(--accent) 0%, var(--copper) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}

/* ============================================================
   SABE QUANDO VOCÊ VÊ — bloco emocional
   ============================================================ */
.recognition {
  padding: var(--space-sec) 0;
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.recognition__image {
  position: absolute;
  right: 0; top: 8%;
  width: min(46%, 640px);
  opacity: 0.16;
  filter: grayscale(0.3);
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 62% 50%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 62% 50%, black 0%, transparent 72%);
}
/* No celular a figura a 16% de opacidade só suja o texto e vazava 39px pra fora da tela */
@media (max-width: 900px) {
  .recognition__image { display: none; }
}
.recognition__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.6vw + 0.6rem, 1.65rem);
  line-height: 1.45;
  color: var(--text-strong);
  max-width: 820px;
  margin-bottom: 50px;
  position: relative; z-index: 2;
}
.recognition__intro em {
  color: var(--accent); font-style: normal; font-weight: 500;
}
.recognition__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 880px;
  position: relative; z-index: 2;
  margin-bottom: 50px;
}
.recognition__item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.recognition__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.9;                 /* alinha opticamente com a 1ª linha do parágrafo */
  letter-spacing: 0.28em;
  color: var(--copper);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .recognition__item { grid-template-columns: 40px 1fr; }
  .recognition__num { letter-spacing: 0.18em; }
}
.recognition__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}
.recognition__text strong { color: var(--text-strong); font-weight: 500; }
.recognition__verdict {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw + 0.5rem, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  max-width: 880px;
  text-wrap: balance;
  position: relative; z-index: 2;
}
.recognition__verdict strong {
  background: linear-gradient(180deg, var(--accent) 0%, var(--copper) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}
.recognition--after-sec { padding-top: clamp(2rem, 4vw, 3.5rem); }
.recognition__after {
  margin-top: 0;
  max-width: 760px;
  display: grid;
  gap: 1.1rem;
  position: relative; z-index: 2;
}
.recognition__after p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}
.recognition__after strong { color: var(--text-strong); font-weight: 500; }

/* Eram 8 parágrafos do mesmo peso — 844px de texto corrido no celular, sem
   cabeça de seção e sem ponto de descanso pro olho. Sem mexer na copy, três
   densidades: entrada em mono, duas batidas em display, corpo no meio. */
.recognition__after { gap: 1.35rem; }
.recognition__after p:first-child {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--copper);
  line-height: 1.5;
  margin-bottom: 0.35rem;
}
.recognition__after p:nth-child(2),
.recognition__after p:last-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text-strong);
  text-wrap: balance;
  border-left: 2px solid var(--copper);
  padding-left: clamp(14px, 3vw, 22px);
  margin: 0.5rem 0;
}
.recognition__after p:last-child {
  border-left-color: var(--accent);
  margin-top: 1.1rem;
}

/* ============================================================
   APRESENTAÇÃO DO RANIER (sobre)
   ============================================================ */
.about {
  padding: var(--space-sec) 0;
  position: relative;
}
.about__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;                      /* texto casa com o topo do enquadramento */
}
@media (max-width: 880px) {
  .about__grid { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
}
.about__photo {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  width: 100%;
  max-width: 360px;             /* contém a largura → não ocupa tela toda */
  aspect-ratio: 4 / 5;          /* enquadramento contido, vê-se foto + início do texto */
  align-self: start;
  box-shadow: 0 16px 40px -16px rgba(26,19,14,0.45);
  margin: 0;
}
.about__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;  /* prioriza o rosto */
  filter: contrast(1.04) saturate(0.98);
  transition: transform var(--d-slow) var(--ease);
}
.about__photo:hover img { transform: scale(1.03); }
.about__content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--text-strong);
  margin-bottom: 28px;
  letter-spacing: -0.018em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
.about__content p {
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-soft);
  margin-bottom: 22px;
  text-wrap: pretty;
}
/* no desktop o bloco de texto é dimensionado ao enquadramento da foto (Regra 5):
   corpo maior + entrelinha maior fazem as duas colunas fecharem na mesma altura */
@media (min-width: 881px) {
  .about__content p { font-size: var(--fs-lg); line-height: 1.78; margin-bottom: 26px; }
  .about__content p:last-child { margin-bottom: 0; }
}
.about__content p strong { color: var(--text-strong); font-weight: 500; }
.about__lineage {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line-warm);
}
.about__lineage-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 16px;
}
.about__lineage-names {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
  letter-spacing: 0.005em;
}
.about__lineage-names span {
  display: inline-block;
  white-space: nowrap;
}
.about__lineage-names span + span::before {
  content: '·';
  margin: 0 12px;
  color: var(--copper);
}

/* ============================================================
   PARA QUEM É — 2 colunas (para / não para)
   ============================================================ */
.who {
  padding: var(--space-sec) 0;
  background: var(--bg-alt);
}
.who__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
}
@media (max-width: 768px) {
  .who__grid { grid-template-columns: 1fr; }
}
.who__col h3 {
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-warm);
}
.who__col--yes h3 { color: var(--accent); }
.who__col--no h3  { color: var(--text-soft); }
.who__list { display: grid; gap: 14px; }
.who__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.55;
  padding: 8px 0;
}
.who__col--yes .who__list li::before {
  content: '+';
  font-family: var(--font-marquee);
  font-weight: 700;
  color: var(--copper);
  font-size: 1.2rem;
  line-height: 1;
}
.who__col--no .who__list li {
  color: var(--text-soft);
}
.who__col--no .who__list li::before {
  content: '−';
  font-family: var(--font-marquee);
  font-weight: 700;
  color: var(--text-mute);
  font-size: 1.2rem;
  line-height: 1;
}
.who__col--yes .who__list li::before { grid-column: 1; }
.who__col--no .who__list li::before { grid-column: 1; }

/* ============================================================
   PASSO A PASSO — 4 movimentos
   ============================================================ */
.movements {
  padding: var(--space-sec) 0;
  position: relative;
  overflow: hidden;
}
.movements__photo {
  position: absolute;
  left: -15%; top: 0;
  width: 50%;
  height: 100%;
  z-index: 0;
  opacity: 0.13;
  mask-image: linear-gradient(to right, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 50%, transparent 100%);
}
.movements__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.3);
}
.movements__list { display: grid; gap: 4px; position: relative; z-index: 2; }
.movement {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--line-warm);
  transition: background var(--d-norm) var(--ease);
}
.movement:last-child { border-bottom: 1px solid var(--line-warm); }
.movement:hover { background: rgba(184, 115, 51, 0.03); padding-left: 12px; padding-right: 12px; }
/* No celular a coluna do numeral comia 60px dos 320 úteis (19% da largura) e a
   cifra sumia — o elo "Passo 2 = módulos 6 a 9" ia embora justo pra quem só lê
   no telefone. Numeral e cifra viram um cabeçalho de linha; o texto pega a
   largura inteira. */
@media (max-width: 700px) {
  .movement {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num cifra"
      "body body";
    gap: 8px 14px;
    align-items: baseline;
  }
  .movement__num   { grid-area: num; font-size: 1.85rem; }
  .movement__cifra { grid-area: cifra; display: block; text-align: right; align-self: baseline; }
  .movement__body  { grid-area: body; }
}
.movement__num {
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw + 0.5rem, 3rem);
  line-height: 0.9;
  color: var(--copper);
  letter-spacing: 0.02em;
}
.movement__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.2vw + 0.6rem, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin-bottom: 12px;
  text-wrap: balance;
}
.movement__body p {
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: pretty;
}
.movement__body p strong { color: var(--text); font-weight: 500; }
.movement__cifra {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--copper);
  align-self: end;
  text-align: right;
}
.section--light .movement__cifra,
.section--light-warm .movement__cifra { color: var(--copper-ink); }

/* nota prática do método (lote 6) */
.method-note {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line-warm);
  display: grid;
  gap: 12px;
  max-width: 760px;
}
.method-note__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.2vw + 0.7rem, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  text-wrap: balance;
}
.method-note__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-soft);
}

/* ============================================================
   GRADE — 15 módulos
   ============================================================ */
.curriculum {
  padding: var(--space-sec) 0;
  background: var(--bg-alt);
}
.curriculum__counter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: clamp(32px, 5vw, 60px);
  border: 1px solid var(--line-warm);
}
@media (min-width: 860px) {
  .curriculum__counter { grid-template-columns: repeat(4, 1fr); }
}
.curriculum__counter > div {
  padding: clamp(16px, 3vw, 34px) clamp(10px, 2vw, 28px);
  border: 1px solid var(--line-warm);
  margin: -1px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.curriculum__counter strong {
  display: block;
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw + 0.5rem, 2.8rem);
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.curriculum__counter span {
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 1.6vw, 0.72rem);
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-mute);
}
/* célula textual (lote 8): substitui o número-gigante "1:1" por um bloco de texto coerente */
.curriculum__counter > div.curriculum__counter--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.curriculum__counter--text .curriculum__counter-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.92rem, 2.4vw, 1.05rem);
  line-height: 1.2;
  color: var(--accent);
  letter-spacing: -0.01em;
}
  .curriculum__counter--text .curriculum__counter-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.8rem, 2.1vw, 0.92rem);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-soft);
  text-transform: none;
}

/* R3 — grade real: as 15 capas visíveis de uma vez (a densidade é o argumento
   da seção; carrossel escondia 12 de 15 no celular e não tinha affordance) */
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 x 5 = 15 exatos */
  gap: clamp(8px, 2vw, 16px);
}
@media (min-width: 620px) {
  .module-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
  .module-grid { grid-template-columns: repeat(5, 1fr); }  /* 5 x 3 = 15 exatos */
}
/* A capa tem o nome do módulo impresso na arte — mas a 101px (390px de tela)
   esse texto cai pra ~5px e vira ornamento. O nome sai da imagem e vira
   legenda HTML: legível em qualquer largura, e indexável. */
.module-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  text-decoration: none;
}
.module-card__shot {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  overflow: clip;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: transform var(--d-norm) var(--ease), border-color var(--d-norm) var(--ease), box-shadow var(--d-norm) var(--ease);
}
.module-card__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.66rem, 1.9vw, 0.8rem);
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--text-soft);
  text-wrap: balance;
  transition: color var(--d-fast) var(--ease);
}
.module-card:hover .module-card__label,
.module-card:focus-visible .module-card__label { color: var(--text-strong); }
.module-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.module-card__num {
  position: absolute;
  top: clamp(6px, 1.4vw, 14px); left: clamp(6px, 1.4vw, 14px);
  font-family: var(--font-mono);
  font-size: clamp(0.56rem, 1.5vw, 0.7rem);
  letter-spacing: 0.16em;
  color: var(--accent);
  background: rgba(0,0,0,0.6);
  padding: 3px 6px;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.module-card:hover .module-card__shot {
  transform: translateY(-4px);
  border-color: var(--copper);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,0.9), 0 0 22px -10px var(--copper-glow);
}
.module-card img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--ease);
}
.module-card:hover img { transform: scale(1.04); }
.module-card__overlay {
  position: absolute; inset: 0;
  display: block;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
  pointer-events: none;
}

/* ============================================================
   BÔNUS — 5 cards
   ============================================================ */
.bonus {
  padding: var(--space-sec) 0;
}
.bonus__head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-warm);
}
.bonus__head-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
}
.bonus__head-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--text-strong);
  letter-spacing: -0.018em;
  line-height: 1.1;
}
.bonus__head-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  text-wrap: balance;
}

/* R2.2 — bônus agora são capas reais (imagem 2:3), estilo da grade de módulos */
.bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
@media (max-width: 639px) {
  .bonus-grid { grid-template-columns: repeat(2, 1fr); }
  /* o 5º bônus fecha a série centralizado, mantendo o retrato 2:3 da capa.
     Antes virava faixa 16:9 e o crop comia o nome do bônus (só sobrava "BÔNUS 5"). */
  .bonus-grid > :last-child {
    grid-column: 1 / -1;
    width: calc(50% - 8px);
    justify-self: center;
  }
}
@media (min-width: 640px) {
  .bonus-grid { grid-template-columns: repeat(5, 1fr); align-items: start; }
  /* ritmo de leque: os bônus não repetem o esqueleto da grade de módulos (Regra 7) */
  .bonus-grid > :nth-child(even) { margin-top: clamp(16px, 2.4vw, 34px); }
}
.bonus-card {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  background: var(--bg);
  border: 1px solid var(--line-warm);
  overflow: hidden;
  border-radius: 4px;
  transition: border-color var(--d-norm) var(--ease), transform var(--d-norm) var(--ease);
}
.bonus-card:hover {
  border-color: var(--copper);
  transform: translateY(-4px);
}
.bonus-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--ease);
}
.bonus-card:hover img { transform: scale(1.04); }
.bonus-card__num {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0,0,0,0.62);
  padding: 4px 8px;
  border-radius: 2px;
  backdrop-filter: blur(8px);
  z-index: 2;
}

/* ============================================================
   DEPOIMENTOS — cards autorais
   ============================================================ */
.proof {
  padding: var(--space-sec) 0;
  background: var(--bg-alt);
  position: relative;
}
/* Galeria de prints reais (depoimentos do Telegram) — molduras curadas */
.proof-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 30px);
}
.proof-shot {
  margin: 0;
  flex: 0 0 auto;
}
.proof-shot__frame {
  position: relative;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(184, 115, 51, 0.10) 0%, rgba(184, 115, 51, 0.02) 55%),
    var(--bg-card);
  border: 1px solid var(--line-warm);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  transition: transform var(--d-norm) var(--ease), border-color var(--d-norm) var(--ease);
}
/* canto superior tipo "evidência" emoldurada — marca tipográfica de aspas */
.proof-shot__frame::before {
  content: '\201C';
  position: absolute;
  top: -14px; left: 14px;
  font-family: var(--font-marquee);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--copper);
  opacity: 0.55;
  pointer-events: none;
}
.proof-shot__frame:hover {
  transform: translateY(-4px);
  border-color: var(--copper);
}
.proof-shot__frame img {
  display: block;
  height: auto;
  border-radius: 3px;
  /* passe-partout claro para destacar o print sobre o fundo cobre/preto */
  border: 1px solid rgba(255, 255, 255, 0.06);
}
/* tamanho natural de cada print — nunca acima do real, pra não pixelizar.
   Ordem R2.9: 1=dep2(481x346) · 2=dep4(432x278) · 3=dep5(375x280) · 4=dep6(381x265) · 5=dep3 vertical(434x572, por último) */
.proof-shot img              { width: 100%; max-width: 420px; }  /* horizontais largos */
.proof-shot:nth-child(3) img { max-width: 375px; }
.proof-shot:nth-child(4) img { max-width: 381px; }
.proof-shot--tall img        { max-width: 340px; }               /* vertical (vence por vir depois) */
/* cada moldura acompanha a largura do seu print */
.proof-shot              { flex: 0 1 420px; }
.proof-shot:nth-child(3) { flex: 0 1 375px; }
.proof-shot:nth-child(4) { flex: 0 1 381px; }
.proof-shot--tall        { flex: 0 1 340px; }

@media (max-width: 480px) {
  .proof-shot,
  .proof-shot--tall,
  .proof-shot:nth-child(3),
  .proof-shot:nth-child(4) { flex: 1 1 100%; max-width: 360px; }
}
/* Entre 700 e 1000px a galeria ficava em coluna única: 1896px de altura a 768px
   com metade da largura vazia. Dois por linha, sem passar do tamanho natural. */
@media (min-width: 700px) and (max-width: 999px) {
  .proof-shot,
  .proof-shot--tall,
  .proof-shot:nth-child(3),
  .proof-shot:nth-child(4) { flex: 1 1 300px; max-width: 340px; }
  .proof-shot img,
  .proof-shot:nth-child(3) img,
  .proof-shot:nth-child(4) img,
  .proof-shot--tall img { max-width: 100%; }
}

/* ============================================================
   BILHETE DO CUPOM — dobra entre depoimentos e oferta
   ============================================================
   A única dobra da página com mecânica de canhoto: corpo + picote com recortes
   laterais + faixa destacável. É a composição que NOMEIA a palavra cupom sem
   exibir código nenhum, e é diferente de tudo que vem antes (galeria de prints)
   e de tudo que vem depois (stack centralizado da oferta).
   Compacto por decisão: quatro linhas de texto não viram meia dobra. */
.ticket-sec {
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0;
  position: relative;
  isolation: isolate;
}
/* brasa própria desta dobra: o preto entre os prints e a oferta precisava de uma
   temperatura só dela, senão o bilhete lê como continuação da seção anterior. */
.ticket-sec::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 100% at 50% 50%, rgba(184, 115, 51, 0.11) 0%, transparent 70%);
}
.ticket {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid var(--line-warm);
  background:
    linear-gradient(150deg, rgba(184, 115, 51, 0.10) 0%, rgba(184, 115, 51, 0.02) 42%, transparent 70%),
    var(--bg-alt);
  box-shadow:
    0 2px 0 rgba(184, 115, 51, 0.10),
    0 26px 60px -34px rgba(0, 0, 0, 0.95);
}
.ticket__body { padding: clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.35rem, 3.4vw, 3rem) clamp(1.35rem, 2.6vw, 2rem); }
.ticket__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.5vw + 0.9rem, 1.95rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--text-strong);
  text-wrap: balance;
  margin-bottom: 14px;
}
.ticket__title strong { color: var(--accent); font-weight: 700; }
.ticket__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
  max-width: 62ch;
  margin-bottom: 12px;
}
.ticket__sub strong { color: var(--accent); font-weight: 600; }
@media (max-width: 620px) {
  .ticket__sub  { font-size: var(--fs-md); }
  .ticket__desc { font-size: 0.95rem; }
}
.ticket__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: pretty;
  max-width: 62ch;
}
/* PICOTE — linha tracejada com os dois recortes laterais do bilhete.
   Os recortes são feitos com radial-gradient na cor do fundo da página, não com
   borda: assim eles mordem a moldura e o canhoto lê como destacável de verdade. */
.ticket__perf {
  position: relative;
  height: 1px;
  margin: 0 clamp(1.35rem, 3.4vw, 3rem);
  background-image: repeating-linear-gradient(90deg, var(--line-ink-warm) 0 7px, transparent 7px 14px);
  background-color: transparent;
}
.ticket__perf::before,
.ticket__perf::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-warm);
  transform: translateY(-50%);
}
.ticket__perf::before { left: calc(-1 * clamp(1.35rem, 3.4vw, 3rem) - 12px); }
.ticket__perf::after  { right: calc(-1 * clamp(1.35rem, 3.4vw, 3rem) - 12px); }
.ticket__stub {
  padding: clamp(0.95rem, 1.9vw, 1.25rem) clamp(1.35rem, 3.4vw, 3rem);
  background: rgba(184, 115, 51, 0.07);
}
.ticket__stub-text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.6rem, 0.42vw + 0.5rem, 0.76rem);
  line-height: 1.55;
  letter-spacing: 0.13em;
  color: var(--accent);
  text-wrap: balance;
}
@media (max-width: 520px) {
  .ticket__perf::before, .ticket__perf::after { width: 16px; height: 16px; }
  .ticket__perf::before { left: calc(-1 * clamp(1.35rem, 3.4vw, 3rem) - 9px); }
  .ticket__perf::after  { right: calc(-1 * clamp(1.35rem, 3.4vw, 3rem) - 9px); }
  .ticket__stub-text { letter-spacing: 0.09em; }
}

/* ============================================================
   OFERTA — stack de valor + preço
   ============================================================ */
.offer {
  padding: var(--space-sec) 0;
  position: relative;
  overflow: hidden;
}
.offer::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(184, 115, 51, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.offer__container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.offer__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 24px;
  text-wrap: balance;   /* a 360px quebrava com "COMPLETO" sozinho na 2a linha */
}
.offer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--text-strong);
  margin-bottom: 18px;
  text-wrap: balance;
}
.offer__sub {
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--text-soft);
  margin-bottom: 48px;
}
.offer__stack {
  text-align: left;
  border: 1px solid var(--line-warm);
  background: var(--bg-alt);
  margin-bottom: 48px;
}
.offer__stack-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}
.offer__stack-item:last-child { border-bottom: 0; }
/* A 6a linha (cupom) é da campanha e some na virada. Sem JS ela fica só oculta, e
   nesse caso a 5a linha vira a última visível — o traço dela precisa sumir junto,
   senão sobra um fio duplo contra a borda da caixa. */
.offer__stack-item.fh-when-campaign { --fh-d: grid; }
.offer__stack-item:has(+ .offer__stack-item.fh-when-campaign:last-child) { border-bottom: 0; }
.fh-campaign .offer__stack-item:has(+ .offer__stack-item.fh-when-campaign:last-child) { border-bottom: 1px solid var(--line); }
.offer__stack-item-name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--text);
}
.offer__stack-item-name strong {
  color: var(--text-strong); font-weight: 600;
}
.offer__stack-item-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--copper);
}

.offer__price {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-bottom: 36px;
}
/* selo de urgência acima do "De 397,00 por" (lote 13) */
.offer__price-badge {
  --fh-d: inline-block;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  border: 1px solid var(--line-warm);
  padding: 7px 16px;
  margin-bottom: 14px;
  border-radius: 2px;
}
.section--light .offer__price-badge,
.section--light-warm .offer__price-badge {
  color: var(--copper-ink);
  border-color: var(--line-ink-warm);
  background: rgba(139,90,43,0.06);
}
.offer__price-old {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  text-decoration: line-through;
  text-decoration-color: var(--copper);
}
.offer__price-main {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw + 0.5rem, 3.6rem);
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: 0.005em;
}
.offer__price-main em {
  font-style: normal;
  background: linear-gradient(180deg, var(--accent) 0%, var(--copper) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.offer__price-cents {
  font-family: var(--font-marquee);
  font-size: 0.5em;
  vertical-align: top;
}
.offer__price-alt {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin-top: 8px;
}
.offer__price-alt strong { color: var(--text); font-weight: 600; }

/* LINHA DE GARANTIA JUNTO AO BOTÃO — nota curta, não caixa: o selo formal dos 7
   dias continua sendo o bloco tracejado mais abaixo, e dois quadros seguidos
   dizendo garantia empilhariam a mesma informação duas vezes. */
.offer__note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 60ch;
  margin: 20px auto 0;
  text-wrap: pretty;
}

.offer__guarantee {
  margin-top: 40px;
  padding: 28px;
  border: 1px dashed var(--line-warm);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  text-align: left;
}
/* Colapsar em 1 coluna jogava o "7" sozinho numa linha (lia como glifo solto) e
   deixava 6 linhas de texto centralizadas e esfarrapadas. Mantém as 2 colunas. */
@media (max-width: 600px) {
  .offer__guarantee { gap: 16px; padding: 22px 20px; align-items: start; }
  .offer__guarantee-seal { font-size: 2.4rem; }
}
.offer__guarantee-seal {
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--copper);
}
.offer__guarantee-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.offer__guarantee-text strong { color: var(--text-strong); font-weight: 500; }

/* ============================================================
   FAQ — accordion
   ============================================================ */
.faq { padding: var(--space-sec) 0; }
.faq__list { max-width: 900px; }
.faq__item {
  border-bottom: 1px solid var(--line-warm);
}
.faq__item:first-child { border-top: 1px solid var(--line-warm); }
.faq__q {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 26px 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.8vw + 0.75rem, 1.18rem);
  line-height: 1.35;
  color: var(--text-strong);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color var(--d-fast) var(--ease);
}
.faq__q > span:first-child { text-wrap: balance; }   /* zero linha órfã nas perguntas a 360px */
.faq__q:hover { color: var(--accent); }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq__q-icon {
  width: 28px; height: 28px;
  border: 1px solid var(--copper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--copper);
  transition: transform var(--d-norm) var(--ease), background var(--d-norm) var(--ease);
  flex-shrink: 0;
}
.faq__item.is-open .faq__q-icon {
  transform: rotate(45deg);
  background: var(--copper);
  color: var(--bg);
}
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--d-norm) var(--ease), padding var(--d-norm) var(--ease);
}
.faq__a-inner {
  padding-bottom: 28px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 760px;
}
.faq__item.is-open .faq__a {
  max-height: 600px;
}

/* ============================================================
   FINAL CTA — duas opções
   ============================================================ */
.final-cta {
  padding: var(--space-sec) 0;
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(184, 115, 51, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(255, 208, 186, 0.05) 0%, transparent 50%);
  pointer-events: none;
}
.final-cta__container {
  max-width: 820px;
  position: relative; z-index: 2;
}
.final-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw + 0.6rem, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--text-strong);
  margin-bottom: 24px;
  text-wrap: balance;
}
.final-cta__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 48px 0;
  border: 1px solid var(--line-warm);
}
@media (max-width: 700px) {
  .final-cta__options { grid-template-columns: 1fr; }
}
.final-cta__option {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line-warm);
  margin: -1px;
  background: var(--bg);
}
/* A opção 01 é a que ninguém deve escolher — vinha com fundo MAIS claro que a
   02, ou seja, o destaque estava na recusa. Invertido: a 02 ganha o palco. */
.final-cta__option--no {
  opacity: 1;
  background: rgba(0, 0, 0, 0.34);
  border-color: rgba(214, 214, 214, 0.09);
}
.final-cta__option--no p { color: var(--text-mute); }
.final-cta__option--yes {
  background:
    linear-gradient(180deg, rgba(184, 115, 51, 0.11) 0%, rgba(184, 115, 51, 0.03) 100%),
    var(--bg);
  border-color: var(--copper);
  box-shadow: 0 18px 44px -30px rgba(184, 115, 51, 0.95);
}
.final-cta__option--yes p { color: var(--text); }
.final-cta__option-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 18px;
}
.final-cta__option--no .final-cta__option-label { color: var(--text-mute); }
.final-cta__option p {
  text-wrap: pretty;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.final-cta__close {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 36px;
  font-style: italic;
  text-wrap: pretty;
}
.final-cta__close strong { color: var(--text-strong); font-style: normal; font-weight: 500; }
/* LINHA DO CUPOM NO FECHAMENTO — última menção do Floreios na página, colada no
   botão. Na virada ela sai e nada entra no lugar: o bloco das duas opções já
   fechava sozinho antes da campanha. */
.final-cta__coupon {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--accent);
  max-width: 62ch;
  margin: 0 0 22px;
  text-wrap: pretty;
}
@media (max-width: 520px) {
  .final-cta__coupon { font-size: 0.72rem; letter-spacing: 0.02em; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding: 64px 0 32px;
  border-top: 1px solid var(--line-warm);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .site-footer__top { grid-template-columns: 1fr; text-align: center; }
}
.site-footer__brand {
  display: flex; align-items: center; gap: 16px;
}
@media (max-width: 700px) {
  .site-footer__brand { justify-content: center; }
}
.site-footer__brand img {
  width: auto; height: 32px;
}
.site-footer__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.site-footer__bottom {
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; gap: 8px 16px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
/* alvo de toque: os links do rodapé tinham 14px de altura */
.site-footer__bottom a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 2px;
  transition: color var(--d-fast) var(--ease);
}
.site-footer a:hover { color: var(--accent); }
.site-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 700px) {
  .site-footer__bottom { justify-content: center; text-align: center; }
}

/* Sticky mobile CTA removido (lote 14 — cliente pediu remoção do botão fixo). */

/* ============================================================
   OVERRIDES DE COMPONENTE EM SEÇÃO CLARA (cartas sobre areia)
   ============================================================ */
/* Grade fica ESCURA (módulos não precisam override). Bônus = capas reais (imagem):
   em seção clara a moldura ganha sombra de carta pra destacar a capa escura sobre areia. */
.section--light .bonus-card,
.section--light-warm .bonus-card {
  border-color: var(--line-ink-warm);
  box-shadow: 0 10px 30px -12px rgba(26,19,14,.30);
}

.section--light .offer__stack,
.section--light-warm .offer__stack {
  background: var(--bg-light-card);
  border-color: var(--line-ink-warm);
  box-shadow: 0 8px 28px -10px rgba(26,19,14,.18);
}
.section--light .offer__stack-item-name strong,
.section--light-warm .offer__stack-item-name strong { color: var(--ink); }
.section--light .offer__stack-item-meta,
.section--light-warm .offer__stack-item-meta { color: var(--copper-ink); }
.section--light .offer__price-main,
.section--light-warm .offer__price-main { color: var(--ink); }
.section--light .offer__guarantee-seal,
.section--light-warm .offer__guarantee-seal { color: var(--copper-ink); }
.section--light .verb,
.section--light-warm .verb {
  background: var(--bg-light-card);
  border-color: var(--line-ink-warm);
  box-shadow: 0 6px 22px -12px rgba(26,19,14,.16);
}
.section--light .verbs,
.section--light-warm .verbs {
  background: transparent;
  border-color: var(--line-ink-warm);
}
.section--light .verb:hover,
.section--light-warm .verb:hover { background: #FBF6EF; }
/* grain global some demais no claro */
.section--light::before { /* keep */ }

/* ============================================================
   SCROLL REVEAL — só esconde se JS disponível (progressive enhance)
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.js .reveal-delay-1 { transition-delay: 80ms; }
.js .reveal-delay-2 { transition-delay: 160ms; }
.js .reveal-delay-3 { transition-delay: 240ms; }
.js .reveal-delay-4 { transition-delay: 320ms; }

/* ============================================================
   MOBILE TWEAKS GERAIS
   ============================================================ */
@media (max-width: 768px) {
  /* hero busto: prato dimensionado no bloco HERO; aqui só a altura mínima e o tipo */
  .hero { height: 100svh; min-height: 100svh; }
  .hero__headline { letter-spacing: -0.03em; }
  .hero__sub { font-size: 0.96rem; }
  /* scrim no celular: o texto vive abaixo da dissolução, então a base é que sustenta o CTA */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.16) 9%, transparent 16%),
      linear-gradient(0deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.46) 18%, rgba(10,10,10,0.18) 36%, transparent 52%);
  }
  .sec-head__body { padding-top: 0; }
  .sec-head__body { padding-top: 0; }
  body { font-size: 1rem; }
  .btn { padding: 16px 24px; font-size: 0.84rem; letter-spacing: 0.12em; }
  .site-header { padding: 10px 0; }
  .site-header .brand img { height: 32px; }
}

/* Tablet: carrossel mantém-se horizontal (scroll-snap) — sem override de grid */