/* ═══════════════════════════════════════════════════════════════════
   HORAC — Estratégia e Aquisição
   Design system · monocromo editorial de consultoria
   Poppins única · papel ↔ grafite · fios metálicos · raio 2px
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ──────────────────────────────────────────────────── */
:root {
  /* Cores base */
  --branco:        #FFFFFF;
  --off:           #F4F3F0;
  --grafite:       #1B1D21;
  --preto:         #0B0C0E;

  /* Escala de cinzas */
  --cinza-100:     #E9E8E5;
  --cinza-300:     #C9CBCE;
  --cinza-500:     #8B8E94;
  --cinza-600:     #666B74;
  --cinza-700:     #4A4D53;
  --cinza-900:     #26282C;

  /* Cinza metálico — material de precisão (fios, índices, detalhes) */
  --metal:         #9BA0A8;
  --metal-claro:   #C6CAD1;
  --metal-escuro:  #6E737C;
  --fio-metal:     linear-gradient(90deg, transparent 0%, var(--metal) 18%, var(--metal-claro) 50%, var(--metal) 82%, transparent 100%);
  --fio-metal-v:   linear-gradient(180deg, transparent 0%, var(--metal) 6%, var(--metal) 94%, transparent 100%);

  /* Semânticos — tema claro (padrão); seções escuras redefinem */
  --superficie:    var(--branco);
  --tinta:         var(--preto);
  --tinta-2:       var(--cinza-700);
  --tinta-3:       var(--cinza-600);   /* AA: 4,83:1 no off-white, 5,36:1 no branco */
  --linha:         var(--cinza-100);
  --linha-forte:   var(--cinza-300);

  /* Tipografia */
  --fonte:         'Poppins', system-ui, -apple-system, sans-serif;
  --t-display:     clamp(2.75rem, 6vw, 5.5rem);
  --t-titulo:      clamp(1.875rem, 3.6vw, 3rem);
  --t-titulo-menor: clamp(1.5rem, 2.4vw, 2rem);
  --t-lead:        clamp(1.125rem, 1.6vw, 1.3125rem);
  --t-corpo:       1.0625rem;
  --t-pequeno:     0.875rem;
  --t-rotulo:      0.8125rem;

  /* Espaçamento (base 4px) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-secao: clamp(5.5rem, 12vh, 9rem);

  /* Medidas */
  --container:       74rem;   /* 1184px */
  --container-texto: 46rem;   /* ~736px · 65–75ch de corpo */
  --gutter:          clamp(1.25rem, 4vw, 2.5rem);
  --grid-gap:        clamp(1.5rem, 3vw, 2.5rem);

  /* Bordas e elevação — hairlines antes de sombras */
  --raio: 2px;
  /* Mídia em formato story lê como tela de celular, não como placa
     editorial: raio próprio, maior que o do resto do sistema. */
  --raio-midia: 14px;
  --sombra-header: 0 1px 0 var(--linha);

  /* Movimento */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.7s;
}

/* ── 2 · Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.7;
  color: var(--tinta);
  background: var(--superficie);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; }

ol, ul { list-style: none; }

/* ── 3 · Superfícies do browser ──────────────────────────────────── */
::selection { background: var(--preto); color: var(--branco); }
.secao--escura ::selection,
.secao--cta ::selection { background: var(--branco); color: var(--preto); }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: var(--raio);
}

html { caret-color: var(--preto); scrollbar-color: var(--cinza-300) transparent; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--cinza-300); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

.pular-conteudo {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--preto);
  color: var(--branco);
  font-size: var(--t-pequeno);
  text-decoration: none;
  border-radius: var(--raio);
}
.pular-conteudo:focus-visible { top: var(--s-4); }

/* ── 4 · Tipografia ──────────────────────────────────────────────── */
.display {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.titulo {
  font-size: var(--t-titulo);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: var(--s-5);
}

.titulo--menor {
  font-size: var(--t-titulo-menor);
  letter-spacing: -0.015em;
}

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 34em;
}

.texto { max-width: 65ch; }
.texto--suave { color: var(--tinta-2); }
.texto + .texto { margin-top: var(--s-4); }

/* ── 5 · Layout ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--texto { max-width: calc(var(--container-texto) + 2 * var(--gutter)); }

/* Bloco editorial: mede menos que a página, mas começa no mesmo eixo
   vertical de todas as outras seções. Estreitar E recuar ao mesmo tempo
   era o que fazia esta seção parecer solta em vez de proposital. */
.container--bloco > * { max-width: var(--container-texto); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: center;
}

.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }

/* Seções */
/* O header é fixo: sem esta margem, uma âncora encostaria o topo da
   seção embaixo dele. Só importa para o CTA do hero, que é a única
   âncora de progressão da página. */
.secao {
  scroll-margin-top: calc(4.5rem + var(--s-4));
  padding-block: var(--s-secao);
  background: var(--superficie);
  color: var(--tinta);
}

.secao--off { --superficie: var(--off); --linha: var(--cinza-300); }

.secao--escura,
.secao--cta {
  --superficie: var(--grafite);
  --tinta: var(--branco);
  --tinta-2: var(--cinza-300);
  --tinta-3: var(--cinza-500);
  --linha: var(--cinza-900);
  --linha-forte: var(--cinza-700);
}

.secao--cta { --superficie: var(--preto); text-align: center; }

/* ── 6 · Header ──────────────────────────────────────────────────── */
.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--branco) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  transition: box-shadow 0.3s var(--curva);
}
.header.rolou { box-shadow: var(--sombra-header); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: 4.5rem;
}

.marca {
  display: flex;
  align-items: center;      /* imagem não tem baseline de texto */
  gap: var(--s-3);
  text-decoration: none;
}

/* Logo: largura casada com a do antigo texto "HORAC" (79,4px no header,
   63,5px no rodapé), para o cabeçalho não mudar de proporção. */
.marca__logo {
  width: 4.9625rem;      /* 79,4px */
  height: auto;
  display: block;
  align-self: center;
}

.marca__logo--rodape { width: 3.969rem; }   /* 63,5px */

.marca__fio {
  width: 1px;
  height: 1rem;
  background: var(--metal);
}

.marca__descritor {
  font-size: var(--t-rotulo);
  font-weight: 400;
  color: var(--tinta-2);
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  gap: var(--s-6);
  margin-left: auto;
}

.nav__link {
  font-size: var(--t-pequeno);
  font-weight: 500;
  text-decoration: none;
  color: var(--tinta-2);
  transition: color 0.25s var(--curva);
}

.header__cta { flex-shrink: 0; }

/* ── 7 · Botões ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: inherit;
  font-size: var(--t-pequeno);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--curva), color 0.25s var(--curva),
              border-color 0.25s var(--curva), transform 0.25s var(--curva);
}
.btn:active { transform: translateY(1px); }

.btn--grande { padding: 1rem 2rem; font-size: 0.9375rem; }

.btn--solido {
  background: var(--tinta);
  color: var(--superficie);
}

.btn--fantasma {
  border-color: var(--linha-forte);
  color: var(--tinta);
  background: transparent;
}

/* ── 8 · Componentes ─────────────────────────────────────────────── */

/* Fio metálico — divisor de precisão */
.fio {
  border: 0;
  height: 1px;
  background: var(--fio-metal);
}

/* Placeholder de mídia — identifica o arquivo a fornecer */
.midia-ph {
  position: relative;
  width: 100%;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background:
    linear-gradient(135deg, transparent calc(50% - 0.5px), var(--linha) calc(50% - 0.5px), var(--linha) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--off);
}
.secao--escura .midia-ph { background-color: var(--cinza-900); }
.midia-ph--retrato  { aspect-ratio: 4 / 5; }
.midia-ph--paisagem { aspect-ratio: 3 / 2; }

.midia-ph::after {
  content: 'FOTO · ' attr(data-arquivo);
  position: absolute;
  inset-inline: 0;
  bottom: var(--s-4);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--tinta-2);
  padding-inline: var(--s-4);
}

/* ══════════════════════ HERO ══════════════════════ */
.secao--hero {
  position: relative;            /* contexto para o canvas dos feixes */
  padding-top: calc(4.5rem + clamp(3.5rem, 8vh, 6rem));
  padding-bottom: var(--s-8);
  overflow-x: clip;
}

/* todo o conteúdo do hero fica acima do fundo animado */
.secao--hero > .container { position: relative; z-index: 1; }

.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: end;
}

.hero__texto {
  grid-column: 1 / 9;
  grid-row: 1;
  z-index: 2;
  padding-bottom: var(--s-6);
  padding-right: clamp(0rem, 6vw, var(--s-9));
}

.display--hero { display: block; }

.display__abre {
  display: block;
  font-weight: 300;
  color: var(--tinta-2);
  font-size: 0.62em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
  max-width: 16em;
}

.display__fecha {
  display: block;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.hero__lead { margin-top: var(--s-6); max-width: 30em; }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-7);
}

/* ── Campo do hero: bruma, não forma ──────────────────────────────
   A massa é a matéria invisível de que fala a tese. Sem contorno, sem
   anel, sem border-radius: três gradientes de centros deslocados se
   sobrepõem para que não exista uma única iso-linha circular, e um
   desfoque real dissolve qualquer resíduo geométrico. */
.hero__midia {
  /* Sem a legenda que ancorava o canto inferior, a massa e a figura
     ficavam altas na coluna: o núcleo escuro cai a 39% da bruma e a
     figura carrega -61% de compensação óptica. Este deslocamento faz
     o centro visual da composição coincidir com o centro da coluna. */
  --campo-y: 2.5rem;
  grid-column: 7 / -1;
  grid-row: 1;
  z-index: 1;
  align-self: stretch;
  position: relative;
  --campo-d: 31rem;
  --fig-p: 0.60;            /* figura = 60% do diâmetro do campo */
  min-height: min(28rem, 56vh);
  margin-right: calc((min(100vw, var(--container)) - 100vw) / 2 - var(--gutter));
}

.campo {
  position: absolute;
  top: calc(50% + var(--campo-y, 0px));
  left: 50%;
  width: var(--campo-d);
  aspect-ratio: 1 / 0.94;   /* levemente oval, não um círculo perfeito */
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Massa: sem border-radius de propósito — com ele, qualquer parada de
   gradiente que não chegue a zero vira uma borda circular recortada.
   Os três centros deslocados destroem a simetria; o blur come o resto. */
.campo__massa {
  position: absolute;
  inset: -20%;                 /* espaço para a bruma se dissipar */
  background:
    radial-gradient(46% 44% at 53% 39%,
      rgba(11, 12, 14, 0.99) 0%,
      rgba(13, 15, 18, 0.96) 26%,
      rgba(23, 25, 29, 0.74) 45%,
      rgba(27, 29, 33, 0.44) 60%,
      rgba(27, 29, 33, 0.19) 73%,
      rgba(27, 29, 33, 0.06) 85%,
      rgba(27, 29, 33, 0) 95%),
    radial-gradient(38% 41% at 44% 56%,
      rgba(27, 29, 33, 0.54) 0%,
      rgba(27, 29, 33, 0.24) 46%,
      rgba(27, 29, 33, 0.06) 72%,
      rgba(27, 29, 33, 0) 90%),
    radial-gradient(64% 60% at 58% 48%,
      rgba(27, 29, 33, 0.26) 0%,
      rgba(27, 29, 33, 0.11) 44%,
      rgba(27, 29, 33, 0.03) 70%,
      rgba(27, 29, 33, 0) 90%);
  filter: blur(10px);
}

/* ── Ecossistema orbital ──────────────────────────────────────────
   Marcas reais em ladrilho squircle percorrendo elipses. A profundidade
   é função da fase: ao fundo encolhe, desfoca e vai para trás da figura;
   à frente cresce e ganha nitidez. Sem bisel nem gloss simulado — o
   volume vem de luz direcional e sombra, que é como objeto se comporta. */
.ecossistema { position: absolute; inset: 0; pointer-events: none;
  transform: translateY(var(--campo-y, 0px)); }

/* Trilhos das órbitas: fio metálico da casa, quase no limiar */
.eco__trilhos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.eco__trilhos ellipse {
  fill: none;
  stroke: var(--metal);
  stroke-width: 1;
  opacity: 0.34;
  vector-effect: non-scaling-stroke;
}

/* Paradas do gradiente dos trilhos, saindo dos tokens de metal. Ficam
   aqui, e não como atributo no SVG, para o material continuar sendo
   decidido em um lugar só. Quem referencia é o bloco do celular. */
/* Órbita de fora: passa mais longe, some quase por inteiro atrás. */
.trilho__longe { stop-color: var(--metal);       stop-opacity: 0.05; }
.trilho__meio  { stop-color: var(--metal);       stop-opacity: 0.24; }
.trilho__perto { stop-color: var(--metal-claro); stop-opacity: 0.72; }

/* Órbita de dentro: é a que cruza na frente da figura, então acende
   mais embaixo e apaga mais em cima. A diferença entre as duas é o
   que faz o par ler como profundidade em vez de dois anéis. */
.trilho2__longe { stop-color: var(--metal);       stop-opacity: 0.03; }
.trilho2__meio  { stop-color: var(--metal-claro); stop-opacity: 0.32; }
.trilho2__perto { stop-color: var(--branco);      stop-opacity: 0.96; }


/* Assinatura da figura no hero: desligada por padrão, ligada só no
   celular (ver o bloco de 30rem). No desktop a composição já tem a
   coluna de texto ao lado dizendo de quem é a página. */


/* Pontos de luz sobre os trilhos */
.eco__faisca {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.5);
  opacity: 0.75;
}
.eco__faisca--1 { left: 71.3%; top: 18.6%; }
.eco__faisca--2 { left: 25.1%; top: 22.8%; opacity: 0.45; }
.eco__faisca--3 { left: 82.8%; top: 48.2%; }

.orb {
  position: absolute;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

/* Ladrilho squircle: superfície com luz vinda de cima e sombra em três
   camadas. Elevação declarada só pela sombra — borda sob sombra larga
   seria o "ghost card". */
.orb__tile {
  display: grid;
  place-items: center;
  width: var(--orb-d, 3.4rem);
  height: var(--orb-d, 3.4rem);
  border-radius: 30%;
  box-shadow: 0 14px 30px rgba(11, 12, 14, 0.24),
              0 4px 9px rgba(11, 12, 14, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.orb__tile svg { display: block; }

/* Superfícies por marca, nas cores oficiais */
.orb__tile--claro     { background: linear-gradient(168deg, #FFFFFF 0%, #F7F7F6 62%, #EDEDEA 100%); }
.orb__tile--facebook  { background: linear-gradient(168deg, #1F86FF 0%, #1877F2 58%, #0C5CD1 100%); }
.orb__tile--instagram { background: linear-gradient(140deg, #F9CE34 0%, #EE2A7B 46%, #6228D7 100%); }

/* Órbitas geradas: trajeto, profundidade e repouso sob movimento reduzido */
@keyframes orbita-instagram {
  0.0% { left: 59.94%; top: 12.80%; transform: translate(-50%,-50%) scale(0.733); filter: blur(1.74px); opacity: 0.54; z-index: 1; }
  6.25% { left: 68.79%; top: 16.71%; transform: translate(-50%,-50%) scale(0.771); filter: blur(1.55px); opacity: 0.59; z-index: 1; }
  12.5% { left: 74.78%; top: 22.65%; transform: translate(-50%,-50%) scale(0.829); filter: blur(1.26px); opacity: 0.66; z-index: 1; }
  18.75% { left: 77.00%; top: 29.71%; transform: translate(-50%,-50%) scale(0.897); filter: blur(0.91px); opacity: 0.76; z-index: 1; }
  25.0% { left: 75.10%; top: 36.81%; transform: translate(-50%,-50%) scale(0.966); filter: blur(0.57px); opacity: 0.85; z-index: 3; }
  31.25% { left: 69.39%; top: 42.87%; transform: translate(-50%,-50%) scale(1.025); filter: blur(0.27px); opacity: 0.93; z-index: 3; }
  37.5% { left: 60.72%; top: 46.98%; transform: translate(-50%,-50%) scale(1.065); filter: blur(0.07px); opacity: 0.98; z-index: 3; }
  43.75% { left: 50.42%; top: 48.50%; transform: translate(-50%,-50%) scale(1.080); filter: blur(0.0px); opacity: 1.00; z-index: 3; }
  50.0% { left: 40.06%; top: 47.20%; transform: translate(-50%,-50%) scale(1.067); filter: blur(0.06px); opacity: 0.98; z-index: 3; }
  56.25% { left: 31.21%; top: 43.29%; transform: translate(-50%,-50%) scale(1.029); filter: blur(0.25px); opacity: 0.93; z-index: 3; }
  62.5% { left: 25.22%; top: 37.35%; transform: translate(-50%,-50%) scale(0.971); filter: blur(0.54px); opacity: 0.86; z-index: 3; }
  68.75% { left: 23.00%; top: 30.29%; transform: translate(-50%,-50%) scale(0.903); filter: blur(0.89px); opacity: 0.76; z-index: 3; }
  75.0% { left: 24.90%; top: 23.19%; transform: translate(-50%,-50%) scale(0.834); filter: blur(1.23px); opacity: 0.67; z-index: 1; }
  81.25% { left: 30.61%; top: 17.13%; transform: translate(-50%,-50%) scale(0.775); filter: blur(1.53px); opacity: 0.59; z-index: 1; }
  87.5% { left: 39.28%; top: 13.02%; transform: translate(-50%,-50%) scale(0.735); filter: blur(1.73px); opacity: 0.54; z-index: 1; }
  93.75% { left: 49.58%; top: 11.50%; transform: translate(-50%,-50%) scale(0.720); filter: blur(1.8px); opacity: 0.52; z-index: 1; }
  100.0% { left: 59.94%; top: 12.80%; transform: translate(-50%,-50%) scale(0.733); filter: blur(1.74px); opacity: 0.54; z-index: 1; }
}

.orb--instagram { animation-name: orbita-instagram; animation-duration: 30s; }
@media (prefers-reduced-motion: reduce) {
  .orb--instagram { left: 59.94%; top: 12.80%; transform: translate(-50%,-50%) scale(0.733); filter: blur(1.74px); opacity: 0.54; z-index: 1; }
}

@keyframes orbita-facebook {
  0.0% { left: 65.87%; top: 44.97%; transform: translate(-50%,-50%) scale(1.046); filter: blur(0.17px); opacity: 0.95; z-index: 3; }
  6.25% { left: 56.30%; top: 47.99%; transform: translate(-50%,-50%) scale(1.075); filter: blur(0.02px); opacity: 0.99; z-index: 3; }
  12.5% { left: 45.78%; top: 48.27%; transform: translate(-50%,-50%) scale(1.078); filter: blur(0.01px); opacity: 1.00; z-index: 3; }
  18.75% { left: 35.89%; top: 45.77%; transform: translate(-50%,-50%) scale(1.053); filter: blur(0.13px); opacity: 0.96; z-index: 3; }
  25.0% { left: 28.16%; top: 40.87%; transform: translate(-50%,-50%) scale(1.006); filter: blur(0.37px); opacity: 0.90; z-index: 3; }
  31.25% { left: 23.75%; top: 34.32%; transform: translate(-50%,-50%) scale(0.942); filter: blur(0.69px); opacity: 0.82; z-index: 3; }
  37.5% { left: 23.33%; top: 27.11%; transform: translate(-50%,-50%) scale(0.872); filter: blur(1.04px); opacity: 0.72; z-index: 1; }
  43.75% { left: 26.98%; top: 20.33%; transform: translate(-50%,-50%) scale(0.806); filter: blur(1.37px); opacity: 0.63; z-index: 1; }
  50.0% { left: 34.13%; top: 15.03%; transform: translate(-50%,-50%) scale(0.754); filter: blur(1.63px); opacity: 0.57; z-index: 1; }
  56.25% { left: 43.70%; top: 12.01%; transform: translate(-50%,-50%) scale(0.725); filter: blur(1.78px); opacity: 0.53; z-index: 1; }
  62.5% { left: 54.22%; top: 11.73%; transform: translate(-50%,-50%) scale(0.722); filter: blur(1.79px); opacity: 0.52; z-index: 1; }
  68.75% { left: 64.11%; top: 14.23%; transform: translate(-50%,-50%) scale(0.747); filter: blur(1.67px); opacity: 0.56; z-index: 1; }
  75.0% { left: 71.84%; top: 19.13%; transform: translate(-50%,-50%) scale(0.794); filter: blur(1.43px); opacity: 0.62; z-index: 1; }
  81.25% { left: 76.25%; top: 25.68%; transform: translate(-50%,-50%) scale(0.858); filter: blur(1.11px); opacity: 0.70; z-index: 1; }
  87.5% { left: 76.67%; top: 32.89%; transform: translate(-50%,-50%) scale(0.928); filter: blur(0.76px); opacity: 0.80; z-index: 3; }
  93.75% { left: 73.02%; top: 39.67%; transform: translate(-50%,-50%) scale(0.994); filter: blur(0.43px); opacity: 0.89; z-index: 3; }
  100.0% { left: 65.87%; top: 44.97%; transform: translate(-50%,-50%) scale(1.046); filter: blur(0.17px); opacity: 0.95; z-index: 3; }
}

.orb--facebook { animation-name: orbita-facebook; animation-duration: 30s; }
@media (prefers-reduced-motion: reduce) {
  .orb--facebook { left: 65.87%; top: 44.97%; transform: translate(-50%,-50%) scale(1.046); filter: blur(0.17px); opacity: 0.95; z-index: 3; }
}

@keyframes orbita-google {
  0.0% { left: 23.21%; top: 32.32%; transform: translate(-50%,-50%) scale(0.923); filter: blur(0.79px); opacity: 0.79; z-index: 3; }
  6.25% { left: 23.96%; top: 25.12%; transform: translate(-50%,-50%) scale(0.853); filter: blur(1.14px); opacity: 0.70; z-index: 1; }
  12.5% { left: 28.67%; top: 18.66%; transform: translate(-50%,-50%) scale(0.790); filter: blur(1.45px); opacity: 0.61; z-index: 1; }
  18.75% { left: 36.62%; top: 13.93%; transform: translate(-50%,-50%) scale(0.744); filter: blur(1.68px); opacity: 0.55; z-index: 1; }
  25.0% { left: 46.62%; top: 11.65%; transform: translate(-50%,-50%) scale(0.721); filter: blur(1.79px); opacity: 0.52; z-index: 1; }
  31.25% { left: 57.12%; top: 12.16%; transform: translate(-50%,-50%) scale(0.726); filter: blur(1.77px); opacity: 0.53; z-index: 1; }
  37.5% { left: 66.55%; top: 15.38%; transform: translate(-50%,-50%) scale(0.758); filter: blur(1.61px); opacity: 0.57; z-index: 1; }
  43.75% { left: 73.45%; top: 20.83%; transform: translate(-50%,-50%) scale(0.811); filter: blur(1.35px); opacity: 0.64; z-index: 1; }
  50.0% { left: 76.79%; top: 27.68%; transform: translate(-50%,-50%) scale(0.877); filter: blur(1.01px); opacity: 0.73; z-index: 1; }
  56.25% { left: 76.04%; top: 34.88%; transform: translate(-50%,-50%) scale(0.947); filter: blur(0.66px); opacity: 0.82; z-index: 3; }
  62.5% { left: 71.33%; top: 41.34%; transform: translate(-50%,-50%) scale(1.010); filter: blur(0.35px); opacity: 0.91; z-index: 3; }
  68.75% { left: 63.38%; top: 46.07%; transform: translate(-50%,-50%) scale(1.056); filter: blur(0.12px); opacity: 0.97; z-index: 3; }
  75.0% { left: 53.38%; top: 48.35%; transform: translate(-50%,-50%) scale(1.079); filter: blur(0.01px); opacity: 1.00; z-index: 3; }
  81.25% { left: 42.88%; top: 47.84%; transform: translate(-50%,-50%) scale(1.074); filter: blur(0.03px); opacity: 0.99; z-index: 3; }
  87.5% { left: 33.45%; top: 44.62%; transform: translate(-50%,-50%) scale(1.042); filter: blur(0.19px); opacity: 0.95; z-index: 3; }
  93.75% { left: 26.55%; top: 39.17%; transform: translate(-50%,-50%) scale(0.989); filter: blur(0.45px); opacity: 0.88; z-index: 3; }
  100.0% { left: 23.21%; top: 32.32%; transform: translate(-50%,-50%) scale(0.923); filter: blur(0.79px); opacity: 0.79; z-index: 3; }
}

.orb--google { animation-name: orbita-google; animation-duration: 30s; }
@media (prefers-reduced-motion: reduce) {
  .orb--google { left: 23.21%; top: 32.32%; transform: translate(-50%,-50%) scale(0.923); filter: blur(0.79px); opacity: 0.79; z-index: 3; }
}

@keyframes orbita-meta {
  0.0% { left: 82.81%; top: 39.83%; transform: translate(-50%,-50%) scale(0.844); filter: blur(1.18px); opacity: 0.69; z-index: 1; }
  6.25% { left: 76.23%; top: 35.23%; transform: translate(-50%,-50%) scale(0.783); filter: blur(1.48px); opacity: 0.60; z-index: 1; }
  12.5% { left: 65.66%; top: 31.97%; transform: translate(-50%,-50%) scale(0.740); filter: blur(1.7px); opacity: 0.55; z-index: 1; }
  18.75% { left: 52.71%; top: 30.54%; transform: translate(-50%,-50%) scale(0.721); filter: blur(1.8px); opacity: 0.52; z-index: 1; }
  25.0% { left: 39.34%; top: 31.16%; transform: translate(-50%,-50%) scale(0.729); filter: blur(1.76px); opacity: 0.53; z-index: 1; }
  31.25% { left: 27.59%; top: 33.73%; transform: translate(-50%,-50%) scale(0.763); filter: blur(1.58px); opacity: 0.58; z-index: 1; }
  37.5% { left: 19.26%; top: 37.87%; transform: translate(-50%,-50%) scale(0.818); filter: blur(1.31px); opacity: 0.65; z-index: 1; }
  43.75% { left: 15.61%; top: 42.94%; transform: translate(-50%,-50%) scale(0.886); filter: blur(0.97px); opacity: 0.74; z-index: 1; }
  50.0% { left: 17.19%; top: 48.17%; transform: translate(-50%,-50%) scale(0.956); filter: blur(0.62px); opacity: 0.83; z-index: 3; }
  56.25% { left: 23.77%; top: 52.77%; transform: translate(-50%,-50%) scale(1.017); filter: blur(0.32px); opacity: 0.92; z-index: 3; }
  62.5% { left: 34.34%; top: 56.03%; transform: translate(-50%,-50%) scale(1.060); filter: blur(0.1px); opacity: 0.97; z-index: 3; }
  68.75% { left: 47.29%; top: 57.46%; transform: translate(-50%,-50%) scale(1.079); filter: blur(0.0px); opacity: 1.00; z-index: 3; }
  75.0% { left: 60.66%; top: 56.84%; transform: translate(-50%,-50%) scale(1.071); filter: blur(0.04px); opacity: 0.99; z-index: 3; }
  81.25% { left: 72.41%; top: 54.27%; transform: translate(-50%,-50%) scale(1.037); filter: blur(0.22px); opacity: 0.94; z-index: 3; }
  87.5% { left: 80.74%; top: 50.13%; transform: translate(-50%,-50%) scale(0.982); filter: blur(0.49px); opacity: 0.87; z-index: 3; }
  93.75% { left: 84.39%; top: 45.06%; transform: translate(-50%,-50%) scale(0.914); filter: blur(0.83px); opacity: 0.78; z-index: 3; }
  100.0% { left: 82.81%; top: 39.83%; transform: translate(-50%,-50%) scale(0.844); filter: blur(1.18px); opacity: 0.69; z-index: 1; }
}

.orb--meta { animation-name: orbita-meta; animation-duration: 38s; }
@media (prefers-reduced-motion: reduce) {
  .orb--meta { left: 82.81%; top: 39.83%; transform: translate(-50%,-50%) scale(0.844); filter: blur(1.18px); opacity: 0.69; z-index: 1; }
}

@keyframes orbita-googleads {
  0.0% { left: 20.87%; top: 51.23%; transform: translate(-50%,-50%) scale(0.996); filter: blur(0.42px); opacity: 0.89; z-index: 3; }
  6.25% { left: 30.16%; top: 55.05%; transform: translate(-50%,-50%) scale(1.047); filter: blur(0.16px); opacity: 0.96; z-index: 3; }
  12.5% { left: 42.47%; top: 57.17%; transform: translate(-50%,-50%) scale(1.076); filter: blur(0.02px); opacity: 0.99; z-index: 3; }
  18.75% { left: 55.93%; top: 57.30%; transform: translate(-50%,-50%) scale(1.077); filter: blur(0.01px); opacity: 1.00; z-index: 3; }
  25.0% { left: 68.49%; top: 55.40%; transform: translate(-50%,-50%) scale(1.052); filter: blur(0.14px); opacity: 0.96; z-index: 3; }
  31.25% { left: 78.23%; top: 51.76%; transform: translate(-50%,-50%) scale(1.004); filter: blur(0.38px); opacity: 0.90; z-index: 3; }
  37.5% { left: 83.67%; top: 46.94%; transform: translate(-50%,-50%) scale(0.939); filter: blur(0.7px); opacity: 0.81; z-index: 3; }
  43.75% { left: 83.99%; top: 41.68%; transform: translate(-50%,-50%) scale(0.869); filter: blur(1.05px); opacity: 0.72; z-index: 1; }
  50.0% { left: 79.13%; top: 36.77%; transform: translate(-50%,-50%) scale(0.804); filter: blur(1.38px); opacity: 0.63; z-index: 1; }
  56.25% { left: 69.84%; top: 32.95%; transform: translate(-50%,-50%) scale(0.753); filter: blur(1.64px); opacity: 0.56; z-index: 1; }
  62.5% { left: 57.53%; top: 30.83%; transform: translate(-50%,-50%) scale(0.724); filter: blur(1.78px); opacity: 0.53; z-index: 1; }
  68.75% { left: 44.07%; top: 30.70%; transform: translate(-50%,-50%) scale(0.723); filter: blur(1.79px); opacity: 0.52; z-index: 1; }
  75.0% { left: 31.51%; top: 32.60%; transform: translate(-50%,-50%) scale(0.748); filter: blur(1.66px); opacity: 0.56; z-index: 1; }
  81.25% { left: 21.77%; top: 36.24%; transform: translate(-50%,-50%) scale(0.796); filter: blur(1.42px); opacity: 0.62; z-index: 1; }
  87.5% { left: 16.33%; top: 41.06%; transform: translate(-50%,-50%) scale(0.861); filter: blur(1.1px); opacity: 0.71; z-index: 1; }
  93.75% { left: 16.01%; top: 46.32%; transform: translate(-50%,-50%) scale(0.931); filter: blur(0.75px); opacity: 0.80; z-index: 3; }
  100.0% { left: 20.87%; top: 51.23%; transform: translate(-50%,-50%) scale(0.996); filter: blur(0.42px); opacity: 0.89; z-index: 3; }
}

.orb--googleads { animation-name: orbita-googleads; animation-duration: 38s; }
@media (prefers-reduced-motion: reduce) {
  .orb--googleads { left: 20.87%; top: 51.23%; transform: translate(-50%,-50%) scale(0.996); filter: blur(0.42px); opacity: 0.89; z-index: 3; }
}

/* Figura ancorada no mesmo ponto do campo (top/left 50%), para que o
   alinhamento seja geométrico e não um chute por breakpoint.
   O centróide do recorte está em 58,8% x / 60,2% y da caixa — o MacBook
   puxa massa para a esquerda e o corpo para a direita. Os -58,8% fazem
   esse centro ÓPTICO cair no centro do campo; os -61% o elevam um fio
   acima do eixo, para a figura emergir da bruma em vez de afundar. */
.hero__figura {
  position: absolute;
  top: calc(50% + var(--campo-y, 0px));
  left: 50%;
  width: calc(var(--campo-d) * var(--fig-p));
  transform: translate(-58.8%, -61%);
  z-index: 2;
  display: block;
  height: auto;
  /* A base do original é cortada. Com a figura inteiramente dentro da
     massa, a dissolvida termina no escuro — e não sobre o branco, que
     era o que produzia a aparência de recorte colado. */
  -webkit-mask-image: linear-gradient(180deg, #000 44%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.42) 78%, rgba(0,0,0,0.12) 91%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 44%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.42) 78%, rgba(0,0,0,0.12) 91%, transparent 100%);
}

/* Trilho dos pilares — a linha que desagua no 06 */
.rail { margin-top: var(--s-8); }

.rail__titulo {
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-2);
  margin-bottom: var(--s-4);
}

.rail__lista {
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto;
  border-top: 1px solid var(--linha-forte);
  position: relative;
}

.rail__lista::before {
  /* fio metálico sobreposto à borda, dando o brilho do material */
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--fio-metal);
}

.rail__item {
  padding: var(--s-4) var(--s-4) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.rail__num {
  font-size: var(--t-pequeno);
  font-weight: 200;
  color: var(--metal-escuro);
  font-variant-numeric: tabular-nums;
}

.rail__nome {
  font-size: var(--t-pequeno);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.rail__item--trafego {
  padding-right: 0;
  gap: var(--s-3);
}

.rail__item--trafego .rail__num { color: var(--tinta); font-weight: 600; }

.rail__tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--tinta);
  color: var(--superficie);
  border-radius: var(--raio);
  padding: 0.125rem var(--s-2);
  transform: translateY(-1px);
}

/* ══════════════════════ PROBLEMA ══════════════════════ */
.problema { align-items: start; }

.problema__texto { grid-column: 1 / 7; }

/* A dor da seção. Um degrau acima do parágrafo anterior em corpo e em
   tinta, sem virar um segundo título: quem escaneia lê a headline e
   esta linha, e já entendeu a seção. */
.problema__dor {
  margin-top: var(--s-5);
  max-width: 32rem;
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-wrap: pretty;
}

/* Fecho da seção em linha cheia, sob as duas colunas. Mesmo tratamento
   do outro fecho da página (tese): fio, corpo maior, 600. */
.problema__conclusao {
  grid-column: 1 / -1;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linha-forte);
  font-size: var(--t-titulo-menor);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.problema__ledger {
  grid-column: 8 / -1;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: var(--s-6);
}

.ledger__titulo {
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  margin-bottom: var(--s-4);
}

.tentativa {
  position: relative;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--linha);
  font-weight: 300;
  font-size: 1.125rem;
  color: var(--tinta-2);
}

.tentativa::after {
  /* o risco — cada tentativa é cortada, uma a uma, de ponta a ponta */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--metal);
  transform-origin: left;
  transition: transform 0.6s var(--curva);
}

.js-anima .tentativas:not(.visivel) .tentativa::after { transform: scaleX(0); }

.tentativas.visivel .tentativa:nth-child(1)::after { transition-delay: 0.3s; }
.tentativas.visivel .tentativa:nth-child(2)::after { transition-delay: 0.55s; }
.tentativas.visivel .tentativa:nth-child(3)::after { transition-delay: 0.8s; }
.tentativas.visivel .tentativa:nth-child(4)::after { transition-delay: 1.05s; }
.tentativas.visivel .tentativa:nth-child(5)::after { transition-delay: 1.3s; }

.ledger__verdade {
  margin-top: var(--s-5);
  font-size: var(--t-pequeno);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tinta);
}

/* ══════════════════════ REVELAÇÃO ══════════════════════ */
.revelacao__abertura { max-width: 46rem; }

/* A parte visível — pequena, emoldurada, quase um aparte */
.cadeia-visivel {
  display: inline-block;
  margin-top: var(--s-7);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: var(--s-4) var(--s-6);
}

.cadeia-visivel__rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  margin-bottom: var(--s-2);
}

.cadeia-visivel__lista {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cadeia-visivel__seta { color: var(--metal-escuro); font-weight: 300; }

/* O corpo: cadeia + foto */
.revelacao__corpo {
  margin-top: var(--s-8);
  align-items: start;
}

.revelacao__cadeia { grid-column: 1 / 8; }

.revelacao__midia {
  grid-column: 9 / -1;
  position: sticky;
  top: calc(4.5rem + var(--s-6));
}

.cadeia__rotulo {
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-2);
  margin-bottom: var(--s-5);
}

/* A espinha: linha vertical contínua ligando 01 → 06 */
.cadeia {
  position: relative;
}

.elo:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.375rem;
  width: 1px;
  background: var(--metal);
}

.js-anima .cadeia.revela .elo::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--curva);
}
.js-anima .cadeia.revela.visivel .elo:nth-child(1)::before { transform: scaleY(1); transition-delay: 0.2s; }
.js-anima .cadeia.revela.visivel .elo:nth-child(2)::before { transform: scaleY(1); transition-delay: 0.45s; }
.js-anima .cadeia.revela.visivel .elo:nth-child(3)::before { transform: scaleY(1); transition-delay: 0.7s; }
.js-anima .cadeia.revela.visivel .elo:nth-child(4)::before { transform: scaleY(1); transition-delay: 0.95s; }
.js-anima .cadeia.revela.visivel .elo:nth-child(5)::before { transform: scaleY(1); transition-delay: 1.2s; }

.elo {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: start;
  padding-bottom: var(--s-6);
}

.elo__num {
  font-size: 1.75rem;
  font-weight: 200;
  line-height: 1.4;
  color: var(--metal-escuro);
  font-variant-numeric: tabular-nums;
  background: var(--superficie);
  position: relative;
  z-index: 1;
  width: 2.75rem;
  text-align: center;
}

.elo__nome {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding-top: 0.4rem;
}

.elo__dep {
  margin-top: var(--s-1);
  font-size: var(--t-pequeno);
  color: var(--tinta-2);
}

/* O sexto elo: a única placa escura — onde a parte visível acontece */
.elo--trafego { padding-bottom: 0; }

.elo--trafego .elo__corpo {
  background: var(--grafite);
  color: var(--branco);
  border-radius: var(--raio);
  padding: var(--s-5) var(--s-6);
  margin-left: calc(-1 * var(--s-4));
}

.elo--trafego .elo__num {
  color: var(--tinta);
  font-weight: 600;
}

.elo--trafego .elo__nome { padding-top: 0; }

.elo__dep--claro { color: var(--cinza-300); }

.elo__tag {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--cinza-700);
  border-radius: var(--raio);
  padding: 0.125rem var(--s-2);
  color: var(--cinza-300);
}

/* Fecho e transição */
.revelacao__fecho {
  margin-top: var(--s-8);
  max-width: 46rem;
}

.fecho__frase {
  margin-top: var(--s-6);
  font-size: var(--t-titulo-menor);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.fecho__transicao {
  margin-top: var(--s-5);
  color: var(--tinta-2);
}

.fecho__link {
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--metal);
  transition: border-color 0.25s var(--curva);
  margin-left: var(--s-2);
}

/* ══════════════════════ PILARES ══════════════════════ */
.pilares__abertura { max-width: 46rem; }

.pilarx {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  margin-top: var(--s-9);
  padding-top: var(--s-8);
  border-top: 1px solid var(--linha-forte);
  position: relative;
}

.pilarx::before {
  /* fio metálico sobre a borda — o material de precisão marca cada pilar */
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--fio-metal);
}

.pilarx__cabeca {
  grid-column: 1 / 5;
  position: sticky;
  top: calc(4.5rem + var(--s-6));
}

.pilarx--invertido .pilarx__cabeca { grid-column: 9 / -1; grid-row: 1; }

.pilarx__conteudo { grid-column: 6 / -1; }
.pilarx--invertido .pilarx__conteudo { grid-column: 1 / 8; grid-row: 1; }

.pilarx__num {
  display: block;
  font-size: clamp(4rem, 8vw, 6.5rem);
  font-weight: 200;
  line-height: 1;
  color: var(--metal-escuro);
  font-variant-numeric: tabular-nums;
}

.pilarx__nome {
  font-size: var(--t-titulo-menor);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: var(--s-3);
}

.pilarx__essencia {
  margin-top: var(--s-4);
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 18em;
}

/* Matriz — índice do que se investiga (tabela editorial, não chips) */
.matriz { margin-top: var(--s-6); }

.matriz__rotulo {
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  margin-bottom: var(--s-2);
}

.matriz__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  column-gap: var(--s-6);
}

.matriz__lista li {
  font-size: var(--t-pequeno);
  font-weight: 500;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--linha);
}

/* Contraste erro × abordagem — o erro é riscado, como no livro-razão */
.contraste {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-5);
}

.contraste__rotulo {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  margin-bottom: var(--s-1);
}

.contraste__erro s {
  text-decoration-line: line-through;
  text-decoration-color: var(--metal);
  text-decoration-thickness: 1px;
  font-weight: 300;
  font-size: 1.125rem;
  color: var(--tinta-2);
}

.contraste__horac { max-width: 60ch; }

/* Perguntas respondidas */
.perguntas { margin-top: var(--s-6); }

.perguntas__rotulo {
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  margin-bottom: var(--s-2);
}

.perguntas li {
  position: relative;
  padding-left: var(--s-6);
  padding-block: var(--s-1);
  font-weight: 500;
}

.perguntas li::before {
  /* traço curto em fio metálico: o marcador da casa, sem travessão */
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.75rem;
  height: 1px;
  background: var(--metal-escuro);
}

/* Saída — o resultado que alimenta o próximo pilar */
.saida {
  margin-top: var(--s-6);
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: var(--s-5) var(--s-6);
}

.saida__rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
}

.saida__texto {
  margin-top: var(--s-2);
  font-weight: 500;
  max-width: 56ch;
}

.saida__prox {
  margin-top: var(--s-3);
  font-size: var(--t-pequeno);
  color: var(--tinta-2);
}

.saida__prox span { color: var(--metal-escuro); }

.saida__prox a {
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--metal);
  transition: border-color 0.25s var(--curva);
}

.saida--final { background: var(--grafite); border-color: var(--grafite); }
.saida--final .saida__rotulo { color: var(--cinza-500); }
.saida--final .saida__texto { color: var(--branco); }
.saida--final .saida__prox { color: var(--cinza-300); }
.saida--final .saida__prox a { color: var(--branco); border-color: var(--metal-escuro); }

/* Trajeto do funil */
.trajeto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-5);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.trajeto__seta { color: var(--metal-escuro); font-weight: 300; }

/* Ação contextual ao fim dos pilares — espaço separa, sem moldura */
.pilares__acao {
  margin-top: var(--s-9);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
}

.pilares__acao-texto {
  font-size: var(--t-lead);
  font-weight: 300;
  color: var(--tinta-2);
}

/* ── Hero: linha de apoio sob a subheadline ──────────────────────── */
.hero__apoio {
  margin-top: var(--s-4);
  font-size: var(--t-pequeno);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tinta-2);
}

/* ── Tese: fecho em destaque ─────────────────────────────────────── */
.tese__fecho {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linha-forte);
  font-size: var(--t-titulo-menor);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* ── As cinco decisões ───────────────────────────────────────────── */
.decisoes__abertura { max-width: 46rem; }

/* Seis colunas, cada card ocupando duas. A largura do card é a mesma
   de antes (um terço), mas a grade agora tem resolução para posicionar
   a segunda fileira: com dois cards ela é centrada, em vez de encostar
   à esquerda e deixar o canto inferior direito parecendo um card que
   faltou. */
.decisoes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
  margin-top: var(--s-7);
}
.decisao { grid-column: span 2; }
.decisao:nth-child(4) { grid-column: 2 / span 2; }
.decisao:nth-child(5) { grid-column: 4 / span 2; }

/* Dois por fileira: o quinto fica sozinho e também é centrado. */
@media (max-width: 62rem) { /* 992px */
  .decisoes { grid-template-columns: repeat(4, 1fr); }
  .decisao:nth-child(4) { grid-column: auto / span 2; }
  .decisao:nth-child(5) { grid-column: 2 / span 2; }
}

/* Elevação declarada uma vez: só o fio. Sem sombra sob borda. */
/* O card é papel sob luz, não um retângulo branco. Em repouso, uma
   inclinação de claridade quase invisível dá direção à luz (de cima);
   sob o ponteiro, uma segunda fonte acende de onde ele está. Nenhuma
   sombra entra: a elevação continua declarada só pelo fio de 1px. */
.decisao {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  /* O gradiente de repouso passou a ser translúcido nas duas pontas para
     a cor de base atravessar. É o que permite recuar o card inteiro
     animando só background-color, sem tocar na opacidade do texto. */
  background:
    linear-gradient(177deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(27, 29, 33, 0.02) 100%),
    var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  transition: background-color 0.4s var(--curva), border-color 0.4s var(--curva);
}

/* Camada 1 · a penumbra. Transparente exatamente onde o ponteiro está
   e fechando em 5% de grafite nas bordas: o efeito é a ausência de véu
   sob a luz, não um brilho aplicado por cima. Sem deslocamento de cor,
   porque a paleta é monocromática. */
.decisao::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(16rem 16rem at var(--luz-x, 50%) var(--luz-y, 0%),
    rgba(27, 29, 33, 0) 0%,
    rgba(27, 29, 33, 0.013) 56%,
    rgba(27, 29, 33, 0.024) 100%);
  opacity: 0;
  transition: opacity 0.45s var(--curva);
  pointer-events: none;
}

/* Camada 2 · o fio que pega a luz. A moldura de 1px é recortada por
   máscara e recebe o metal escuro só perto do ponteiro, como o fio
   metálico do resto da página reagindo à incidência. */
.decisao::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(13rem 13rem at var(--luz-x, 50%) var(--luz-y, 0%),
    var(--metal-escuro) 0%,
    rgba(110, 115, 124, 0.35) 34%,
    rgba(110, 115, 124, 0) 64%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--curva);
  pointer-events: none;
}

/* Sem recorte por máscara o fio viraria uma mancha cheia sobre o card.
   Nesse caso a luz interna basta, e o fio fica como sempre foi. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .decisao::after { display: none; }
}

/* Só onde existe ponteiro de verdade. No toque o card fica como está:
   o gradiente de repouso já carrega o acabamento. */
@media (hover: hover) and (pointer: fine) {
  .decisao:hover::before,
  .decisao:hover::after { opacity: 1; }

  /* A lanterna. O card sob o ponteiro mantém o papel branco e o fio
     nítido; os outros quatro afundam na direção do off-white da seção
     e perdem o contorno. O recuo é no fundo e na borda, nunca na
     opacidade do card: o texto continua com o mesmo contraste, porque
     dimensionar legibilidade por hover seria trocar clareza por efeito. */
  .decisoes:has(.decisao:hover) .decisao:not(:hover) {
    background-color: color-mix(in srgb, var(--off) 62%, var(--cinza-100));
    /* Não usar var(--linha) aqui: dentro de .secao--off ela vale o mesmo
       que --linha-forte, e a borda não mudaria nada. */
    border-color: color-mix(in srgb, var(--linha-forte) 42%, var(--off));
  }
  .decisoes:has(.decisao:hover) .decisao:not(:hover) .decisao__num {
    color: color-mix(in srgb, var(--metal-escuro) 52%, var(--off));
  }
}

@media (prefers-reduced-motion: reduce) {
  .decisao,
  .decisao::before,
  .decisao::after,
  .decisao__num { transition: none; }
}

.decisao__num {
  display: block;
  font-size: 2.25rem;
  font-weight: 200;
  line-height: 1;
  color: var(--metal-escuro);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--curva);
}

.decisao__nome {
  margin-top: var(--s-4);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* A decisão que a etapa produz. É o que separa o método de uma lista
   de serviços: cada card diz o que sai dele, não só o que se olha. */
.decisao__saida {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--linha);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tinta);
}

/* A primeira frase é a tese do card: peso e tinta cheia. O resto é a
   explicação, no cinza de corpo. Um degrau dentro do parágrafo, sem
   virar uma segunda linha de título. */
.decisao__tese {
  font-weight: 600;
  color: var(--tinta);
}

/* Rótulo da decisão. Distingue por cor, não por peso: a linha inteira
   continua em 600, como estava. */
.decisao__rotulo { color: var(--tinta-3); }

/* 15px em vez de 14 e entrelinha um pouco mais aberta: o corpo do card
   é o único texto da página lido em coluna estreita, e a 14px ele ficava
   denso, sobretudo no celular. */
.decisao__texto {
  margin-bottom: auto;
  margin-top: var(--s-4);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tinta-2);
}

/* Bloco do sexto passo, fechando a seção */
.sexto-bloco {
  margin-top: var(--s-7);
  background: var(--grafite);
  color: var(--branco);
  border-radius: var(--raio);
  padding: var(--s-6);
}
.sexto-bloco__titulo {
  font-size: var(--t-titulo-menor);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-4);
}
.sexto-bloco .texto { color: var(--cinza-300); }
/* Seletor duplo de propósito: .sexto-bloco .texto pinta o corpo de
   cinza com especificidade maior, e sem isto o branco declarado aqui
   nunca chegava a valer. O fecho é o único que volta à tinta cheia. */
.sexto-bloco .texto.sexto-bloco__honesto {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--cinza-700);
  font-weight: 500;
  color: var(--branco);
}


/* ── Entregáveis dos quinze dias ─────────────────────────────────── */
/* 49rem e não 46: o título desta seção mede 758px na linha "Antes da
   primeira mensalidade," e, num limite de 736px, a quebra partia o
   sujeito em "primeira / mensalidade". O parágrafo abaixo continua na
   medida de leitura, limitado pelos 65ch do próprio .texto. */
.entregaveis__abertura { max-width: 49rem; }

/* ── Trilho das entregas ─────────────────────────────────────────
   Rolagem nativa com encaixe. No toque o dedo já arrasta sem uma
   linha de JS; o autoplay apenas empurra a rolagem, e a barra abaixo
   é o polegar real dessa rolagem, redesenhado no material da casa. */
.trilha { margin-top: var(--s-6); }

.trilha__pista {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: 3px;          /* respiro para o anel de foco */

  /* As bordas dissolvem em vez de cortar. A largura de cada lado é
     proporcional ao quanto ainda há para rolar naquela direção, então
     a fatia do próximo card lê como continuação e não como corte. */
  --fade-esq: 56px;
  --fade-dir: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0,
    #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0,
    #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
}
.trilha__pista::-webkit-scrollbar { display: none; }
.trilha__pista:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }

/* Off-white sobre a seção branca: o inverso dos cinco cards, que são
   brancos sobre off-white. Mesmo material, papel virado. */
.entrega {
  flex: 0 0 20rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--off);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
}

.entrega__num {
  display: block;
  font-size: 2.25rem;
  font-weight: 200;
  line-height: 1;
  color: var(--metal-escuro);
  font-variant-numeric: tabular-nums;
}

.entrega__nome {
  margin-top: var(--s-3);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Dois parágrafos só existem no card 01; o intervalo entre eles é o
   mesmo do título para o corpo, para o bloco não abrir demais. */
.entrega__texto + .entrega__texto { margin-top: var(--s-3); }

.entrega__texto {
  margin-top: var(--s-3);
  font-size: var(--t-pequeno);
  color: var(--tinta-2);
}

/* Ponte para a contratação. */
.quinze__fecho {
  margin-top: var(--s-7);
  max-width: var(--container-texto);
  font-size: var(--t-pequeno);
  color: var(--tinta-2);
}

@media (prefers-reduced-motion: reduce) {
  .trilha__pista { scroll-behavior: auto; }
}

/* ── Prova ───────────────────────────────────────────────────────── */

/* ── Para quem: fecho abaixo das colunas ─────────────────────────── */
/* ── metodo.html: link de retorno ────────────────────────────────── */
.voltar { margin-bottom: var(--s-6); }
.voltar a {
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: none;
  border-bottom: 1px solid var(--linha-forte);
}
@media (hover: hover) { .voltar a:hover { color: var(--tinta); border-color: var(--tinta); } }

/* ══════════════════════ O SEXTO PASSO ══════════════════════ */
.secao--sexto { overflow-x: clip; }

.sexto {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: center;
}

.sexto__texto { grid-column: 1 / 8; }

.sexto__conceito {
  margin-block: var(--s-5) var(--s-6);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.sexto__conceito-forte { display: block; font-weight: 700; }
.sexto__conceito-leve { display: block; font-weight: 200; color: var(--tinta-2); }

.sexto__honesto {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linha-forte);
  font-weight: 500;
}

.sexto__num {
  grid-column: 8 / -1;
  font-size: clamp(10rem, 24vw, 20rem);
  font-weight: 200;
  line-height: 0.85;
  color: var(--metal);
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin-right: calc((min(100vw, var(--container)) - 100vw) / 2 - var(--gutter));
  transform: translateX(0.06em);
  user-select: none;
}

/* ══════════════════════ OPERAÇÃO ══════════════════════ */
.operacao__abertura { max-width: 46rem; }

.fase {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--linha-forte);
  position: relative;
}

.fase::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--fio-metal);
}

.fase__cabeca { grid-column: 1 / 5; }
.fase__corpo { grid-column: 6 / -1; }

.fase__indice {
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--metal-escuro);
}

.fase__nome {
  font-size: var(--t-titulo-menor);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: var(--s-2);
}

.fase__prazo {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 0.125rem var(--s-2);
  color: var(--tinta-2);
}

.fase__midia { margin-top: var(--s-6); }

/* Cadeia de chips da Fase 1 */
.cadeia-fase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-5);
}

.cadeia-fase__item {
  font-size: var(--t-pequeno);
  font-weight: 500;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 0.25rem var(--s-3);
  background: var(--branco);
}

.cadeia-fase__item--prep {
  background: var(--off);
  color: var(--tinta-2);
}

.cadeia-fase__seta { color: var(--metal-escuro); font-weight: 300; }

.cadeia-fase__par { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-3); }

/* Diagrama do ciclo (SVG próprio) */
.ciclo {
  margin-top: var(--s-6);
  max-width: 36rem;
}

.ciclo svg { width: 100%; height: auto; font-family: var(--fonte); }

.ciclo__entrada rect {
  fill: var(--off);
  stroke: var(--linha-forte);
  stroke-width: 1;
}

.ciclo__entrada text,
.ciclo__no text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--tinta);
}

.ciclo__linha {
  stroke: var(--metal-escuro);
  stroke-width: 1.2;
  color: var(--metal-escuro);
}

.ciclo__arcos path {
  fill: none;
  stroke: var(--metal);
  stroke-width: 1.2;
  color: var(--metal-escuro);
}

.ciclo__no rect {
  fill: var(--branco);
  stroke: var(--linha-forte);
  stroke-width: 1;
}

.ciclo__no--trafego rect { fill: var(--grafite); stroke: var(--grafite); }
.ciclo__no--trafego text { fill: var(--branco); }

.ciclo__centro {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  fill: var(--tinta-3);
}

.ciclo__centro--forte { font-weight: 600; fill: var(--tinta-2); }

.ciclo__legenda {
  margin-top: var(--s-3);
  font-size: var(--t-pequeno);
  color: var(--tinta-2);
}

/* Ciclo — representação mobile (cadeia vertical + colchete de retorno) */
.ciclo-m { display: none; }

/* ══════════════════════ PROVAS ══════════════════════ */
.provas__abertura { max-width: 46rem; }

.prova__tipo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  margin-top: var(--s-3);
}

/* ── Carrossel de depoimentos em vídeo ───────────────────────────── */
/* Card de vídeo */
.vcard {
  transition: opacity 0.45s var(--curva), transform 0.45s var(--curva);
  opacity: 0.45;
  transform: scale(0.97);
}

/* A capa vazia é grafite, não papel: enquanto o arquivo real não
   existe, o card já se parece com o que vai ser. Um retângulo
   off-white com um fio na diagonal lê como bloco pendente, e era isso
   que tirava a cara de vídeo da seção. */
.vcard__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: var(--raio-midia);
  background: var(--grafite);
  cursor: pointer;
  overflow: hidden;
}
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Capa real. Um véu discreto no centro sustenta o botão de play sobre
   qualquer enquadramento, sem escurecer o rosto nas bordas. */
.vcard__capa { position: absolute; inset: 0; }
.vcard__thumb:has(.vcard__capa)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 22% at 50% 50%,
    rgba(11, 12, 14, 0.34) 0%,
    rgba(11, 12, 14, 0.14) 55%,
    rgba(11, 12, 14, 0) 100%);
  pointer-events: none;
}

/* Etiqueta do arquivo pendente. Some assim que a capa real existir. */
/* Etiqueta do arquivo pendente: discreta, para o desenvolvedor, não
   para o visitante. Some assim que a capa real existir. */
.vcard__ph {
  position: absolute;
  inset-inline: 0;
  bottom: var(--s-3);
  text-align: center;
  /* Discreta pela cor, não pelo tamanho: a 10px o texto reprovava no
     piso de legibilidade de interface. */
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--cinza-500);
  padding-inline: var(--s-4);
  word-break: break-word;
}

.vcard__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.25rem;
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--branco) 94%, transparent);
  color: var(--preto);
  border-radius: 50%;
  transition: transform 0.3s var(--curva);
}
.vcard__play svg { transform: translateX(1px); }
@media (hover: hover) {
  .vcard__thumb:hover .vcard__play { transform: scale(1.06); }
}
.vcard__thumb:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* Vídeo dentro do card */
.vcard__video {
  position: absolute;
  inset: 0;
  border-radius: var(--raio-midia);
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--preto);
}

.vcard--tocando .vcard__ph,
.vcard--tocando .vcard__play { visibility: hidden; }

/* Carregando: um fio de metal percorrendo o topo do card. Só isso — o
   estado é passageiro e não merece uma peça de interface. Existe para
   que a espera do buffer nunca seja confundida com um erro. */
.vcard__thumb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  height: 2px;
  width: 40%;
  border-radius: var(--raio-midia) var(--raio-midia) 0 0;
  background: var(--fio-metal);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}
.vcard--carregando .vcard__thumb::after {
  opacity: 1;
  animation: vcard-carrega 1.1s var(--curva) infinite;
}
@keyframes vcard-carrega {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .vcard--carregando .vcard__thumb::after {
    animation: none;
    width: 100%;
    transform: none;
    opacity: 0.7;
  }
}

.vcard__fechar {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cinza-700);
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--preto) 72%, transparent);
  color: var(--branco);
  cursor: pointer;
  transition: background 0.25s var(--curva);
}
@media (hover: hover) {
  .vcard__fechar:hover { background: var(--grafite); }
}
.vcard__fechar:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; }

.vcard__pendente {
  position: absolute;
  inset: 0;
  border-radius: var(--raio-midia);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-5);
  background: var(--grafite);
  color: var(--cinza-300);
  font-size: var(--t-pequeno);
  line-height: 1.5;
}
.vcard__pendente code { color: var(--branco); font-weight: 600; font-family: inherit; word-break: break-all; }


/* Abertura da prova: medida de leitura, ancorada no eixo da página. */
/* Só o título vive aqui, e ele encosta na esteira: o respiro grande
   fica acima da seção, não entre a linha e a prova. */
.prova__abertura > * { max-width: var(--container-texto); margin-bottom: 0; }

/* ── Esteira dos depoimentos ─────────────────────────────────────
   Mesma mecânica da esteira das entregas: rolagem nativa, clones no
   fim e avanço por quadro. O que muda é o foco: cada card recebe
   --foco pela distância até o centro da janela, então o do meio fica
   cheio e os das pontas recuam, sem tirar a leitura de nenhum. */
.stories { margin-top: var(--s-6); }

.stories__pista {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-block: 3px;
  --fade-esq: 64px;
  --fade-dir: 64px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0,
    #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0,
    #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
}
.stories__pista::-webkit-scrollbar { display: none; }
.stories__pista:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }

.stories__item { flex: 0 0 20rem; }

.vcard {
  opacity: calc(0.55 + 0.45 * var(--foco, 1));
  transform: scale(calc(0.97 + 0.03 * var(--foco, 1)));
  transition: opacity 0.25s linear, transform 0.25s linear;
}
.vcard--tocando { opacity: 1; transform: none; }

/* Enquanto o dedo arrasta, sem transição. O foco é reescrito a cada
   evento de scroll, e com 0,25s de transição cada reescrita começava
   uma animação nova por cima da anterior: sessenta animações por
   segundo perseguindo um alvo que já mudou. O olho lê isso como
   piscada. Sem transição o valor acompanha o dedo quadro a quadro,
   que é justamente o que a esteira lenta não pode fazer. */
.stories--arrastando .vcard { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .vcard { opacity: 1; transform: none; transition: none; }
}

/* Prova inline — pequena citação redistribuída pela narrativa */
.prova-inline {
  margin-top: var(--s-8);
  max-width: 44rem;
  border-top: 1px solid var(--linha);
  padding-top: var(--s-5);
}

.prova-inline__citacao {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.prova-inline__autor {
  margin-top: var(--s-3);
  font-size: var(--t-pequeno);
  color: var(--tinta-2);
}

/* A prova no meio dos pilares respira mais que as demais: ela existe
   para interromper o ritmo dos cinco blocos idênticos. */
.prova-inline--pilares {
  margin-block: var(--s-9);
  border-top-color: var(--linha-forte);
}

/* ══════════════════════ OFERTA ══════════════════════ */
.oferta__abertura { max-width: 52rem; }

.oferta__tese {
  margin-top: var(--s-6);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.oferta__tese strong { font-weight: 700; }

.oferta__explica { margin-top: var(--s-5); }

/* Linha do tempo da condição: dois segmentos, uma seta */
.condicao {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--grid-gap);
  align-items: stretch;
}

.condicao__etapa {
  display: flex;
  flex-direction: column;
  background: var(--off);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: var(--s-6);
}

/* As duas etapas têm alturas diferentes de conteúdo. Ancorando a placa
   e a nota no rodapé de cada card, a condição comercial e o compromisso
   caem na mesma linha, que é como a seção precisa ser escaneada. */
.condicao__etapa--escura .condicao__lista { margin-bottom: auto; }

.condicao__etapa--escura {
  background: var(--grafite);
  border-color: var(--grafite);
  color: var(--branco);
}

.condicao__rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
}
.condicao__etapa--escura .condicao__rotulo { color: var(--cinza-500); }

.condicao__nome {
  margin-top: var(--s-2);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.condicao__itens {
  margin-top: var(--s-2);
  font-size: var(--t-pequeno);
  color: var(--tinta-2);
}
.condicao__etapa--escura .condicao__itens { color: var(--cinza-300); }

.condicao__nota {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--linha-forte);
  font-size: var(--t-pequeno);
  font-weight: 600;
}

/* A ponte entre as duas etapas: o marco de 15 dias e a microcopy que
   diz o que muda depois dele. Substitui a seta solta, que sinalizava
   a passagem sem nomear o que acontece nela. */
/* A ponte precisa ler como a descida de uma etapa para a outra, e não
   como uma legenda solta entre dois cards. Os dois fios verticais fazem
   esse trabalho: material da casa, presença sem estardalhaço. */
.condicao__ponte {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  max-width: 12.5rem;
  text-align: center;
  text-wrap: balance;
}
.condicao__ponte::before,
.condicao__ponte::after {
  content: '';
  width: 1px;
  height: 2.5rem;
  background: var(--fio-metal-v);
}
.condicao__marco {
  font-size: var(--t-pequeno);
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinta-2);
}
.condicao__marco-prazo {
  display: block;
  font-size: var(--t-corpo);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.condicao__marco-estado { display: block; }
/* Empilhada, a seta horizontal não aponta para lugar nenhum: quem
   indica a direção passa a ser o fio vertical. */
.condicao__seta { display: none; }
.condicao__micro {
  margin-top: var(--s-2);
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
}

/* A razão do modelo. Um degrau abaixo do h2 e um acima do corpo: alto
   o bastante para ser lido como justificativa, baixo o bastante para não
   disputar o título. Mesmo fio do fecho da tese. */
.contratacao__principio {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--linha-forte);
  max-width: 40rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-wrap: balance;
}

/* ── Ledger da estruturação ──────────────────────────────────────
   A ancoragem é uma conta, não um anúncio de liquidação: entrega à
   esquerda, valor riscado à direita em numeral tabular, fio fino entre
   as linhas. É o mesmo vocabulário do "roteiro conhecido" lá em cima,
   e é o que separa isto de um card de infoproduto. */
.condicao__entregas {
  margin-top: var(--s-5);
  border-top: 1px solid var(--linha-forte);
}

.condicao__entrega {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--linha);
}

.condicao__entrega-nome {
  font-size: var(--t-pequeno);
  font-weight: 500;
  line-height: 1.4;
  color: var(--tinta);
}

/* Riscado em metal, nunca em vermelho: o valor sai de cena sem virar
   etiqueta de promoção. Tabular para as casas alinharem na coluna. */
.condicao__valor {
  font-size: var(--t-pequeno);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  white-space: nowrap;
}
.condicao__valor s {
  text-decoration: line-through;
  text-decoration-color: var(--metal);
  text-decoration-thickness: 1px;
}

.condicao__soma {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--linha-forte);
}
.condicao__soma-rotulo {
  font-size: var(--t-rotulo);
  font-weight: 600;
  color: var(--tinta-3);
}
.condicao__soma .condicao__valor { font-size: var(--t-corpo); font-weight: 600; }

/* Papel virado: painel branco dentro do card off-white, como os cards
   de entrega fazem o inverso. O peso vem da escala do número. */
.condicao__investimento {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
}
.condicao__investimento-rotulo {
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--tinta-3);
}
.condicao__preco {
  margin-top: var(--s-2);
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.condicao__micro--card {
  margin-top: auto;              /* ancora no pé, alinhando com a nota
                                    do card escuro ao lado */
  padding-top: var(--s-5);
  line-height: 1.5;
}

/* Mensalidade: o outro número da seção. Mesma escala do R$ 0 para os
   dois lerem como par, com a unidade em peso e corpo menores. */
.condicao__mensalidade {
  margin-top: var(--s-4);
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
}
.condicao__mensalidade-un {
  font-size: 0.36em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cinza-300);
}

/* Lista da gestão: fio metálico da casa como marcador, nunca um bullet. */
.condicao__lista { margin-top: var(--s-4); }
.condicao__lista li {
  position: relative;
  padding-left: var(--s-5);
  padding-block: 0.1875rem;
  font-size: var(--t-pequeno);
  font-weight: 500;
}
.condicao__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.625rem;
  height: 1px;
  background: var(--metal);
}

/* A abertura da seção mede como as outras: bloco editorial no eixo. */
.contratacao__abertura > * { max-width: var(--container-texto); }

.oferta__acao { margin-top: var(--s-7); }

/* ══════════════════════ CTA FINAL ══════════════════════ */
.secao--cta { text-align: left; }

/* ── Sangria para cima ───────────────────────────────────────────
   A placa escura sobe como fumaça sobre o fim da seção anterior, em
   vez de encostar nela com um corte reto. Vive na folga inferior da
   seção de cima (medida: 100 a 121px), então nunca toca conteúdo.

   As paradas não são lineares de propósito: a subida é lenta no
   começo e fecha rápido no fim. É o que faz ler como dissipação e o
   que evita o bandeamento de um degradê de duas paradas. */
.sangra-cima { position: relative; }

.sangra-cima::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: clamp(4.5rem, 8vh, 5.5rem);
  background: linear-gradient(180deg,
    rgba(11, 12, 14, 0)    0%,
    rgba(11, 12, 14, 0.02) 26%,
    rgba(11, 12, 14, 0.08) 45%,
    rgba(11, 12, 14, 0.22) 63%,
    rgba(11, 12, 14, 0.48) 80%,
    rgba(11, 12, 14, 0.78) 91%,
    rgba(11, 12, 14, 1)  100%);
  pointer-events: none;
}

/* Um parágrafo só, entre a headline e o botão. */
.cta-final__sub {
  margin-top: var(--s-5);
  max-width: 34rem;
  color: var(--tinta-2);
}

.diagnostico {
  margin-top: var(--s-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

.cta-final__micro { font-size: var(--t-pequeno); color: var(--cinza-500); }

/* ── Barra fixa de ação, apenas no celular ───────────────────────── */
.cta-fixo { display: none; }

@media (max-width: 48rem) {
  .cta-fixo {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    padding: var(--s-3) var(--gutter);
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--branco) 94%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
    border-top: 1px solid var(--linha-forte);
    transform: translateY(110%);
    transition: transform 0.35s var(--curva);
  }
  .cta-fixo[hidden] { display: block; }      /* controlado por classe, não por hidden */
  .cta-fixo.visivel { transform: none; }
  .cta-fixo .btn { width: 100%; }

  /* Um depoimento tocando esconde a barra: ela cobria justamente a faixa
     dos controles do vídeo, que ficam na base do card. Ganha de .visivel
     por especificidade (0,2,1 contra 0,2,0) e desliza pela transição que
     a própria barra já declara. */
  body.video-tocando .cta-fixo { transform: translateY(110%); }

  /* Sem reserva de espaço no body. A barra só existe entre a contratação
     e o fecho, e some quando #cta-final entra na tela — ou seja, no fim
     da rolagem ela já não está lá para cobrir nada. O padding que ficava
     aqui era permanente e deixava 76px de branco embaixo do rodapé preto,
     que é a última coisa que a página mostrava. Tirar o padding é o que
     não gera salto: mexer nele junto com a barra encurtaria a página no
     meio da rolagem do visitante. */
}

@media (prefers-reduced-motion: reduce) {
  .cta-fixo { transition: none; }
}

/* ── 9 · Rodapé ──────────────────────────────────────────────────── */
.rodape {
  background: var(--preto);
  color: var(--cinza-300);
  padding-block: var(--s-7);
  border-top: 1px solid var(--cinza-900);
}

.rodape__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}


.rodape__descritor { font-size: var(--t-pequeno); color: var(--cinza-500); }

.rodape__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

.rodape__link {
  font-size: var(--t-pequeno);
  color: var(--cinza-300);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--curva), border-color 0.25s var(--curva);
}

.rodape__base {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--cinza-900);
}

.rodape__nota { font-size: var(--t-pequeno); color: var(--cinza-500); }

/* ── 10 · Movimento ──────────────────────────────────────────────── */
/* Visível por padrão; o JS ativa o estado inicial só quando pode animar */
.js-anima .revela {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.js-anima .revela[data-atraso="1"] { transition-delay: 0.1s; }
.js-anima .revela[data-atraso="2"] { transition-delay: 0.2s; }
.js-anima .revela[data-atraso="3"] { transition-delay: 0.3s; }
.js-anima .revela[data-atraso="4"] { transition-delay: 0.4s; }

.js-anima .revela.visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stories__pista { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ── 11 · Breakpoints (desktop-first) ────────────────────────────── */

/* Laptop */
@media (max-width: 68rem) { /* 1088px */
  .hero__texto { grid-column: 1 / 7; }
  .hero__midia { grid-column: 7 / -1; --campo-d: 27.5rem; }

  .problema__texto { grid-column: 1 / 7; }
  .problema__ledger { grid-column: 7 / -1; }

  .revelacao__cadeia { grid-column: 1 / 8; }
  .revelacao__midia { grid-column: 8 / -1; }
}

/* Tablet */
@media (max-width: 48rem) { /* 768px */
  .nav { display: none; }

  .grid { grid-template-columns: 1fr; }
  .col-5, .col-6, .col-7 { grid-column: 1 / -1; }

  /* Hero: texto primeiro, campo centrado abaixo — sem sangria lateral,
     porque cortado pela metade o portal viraria só uma mancha na borda */
  .hero { grid-template-columns: 1fr; }
  .hero__texto {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-bottom: 0;
  }
  .hero__midia {
    --campo-y: 0px;          /* empilhado, o campo já preenche a coluna */
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--s-8);
    margin-right: 0;
    min-height: min(23rem, 48vh);
    --campo-d: min(24rem, 82vw);
  }
  /* campo centrado; a figura mantém a compensação óptica (o -50% de
     antes anulava o ajuste e jogava a pessoa 19px para a direita) */
  .campo { transform: translate(-50%, -50%); }
  .hero__figura { transform: translate(-58.8%, -61%); }

  /* tablet: quatro marcas; o Google Ads sai para o conjunto não apertar */
  .orb__tile { --orb-d: 2.9rem; }
  .orb--googleads { display: none; }
  .eco__faisca--3 { display: none; }

  .secao--hero { padding-top: calc(4.5rem + var(--s-7)); }

  /* Trilho: 2 colunas; o 06 fecha sozinho a última linha */
  .rail { margin-top: var(--s-7); }
  .rail__lista { grid-template-columns: repeat(2, 1fr); }
  .rail__item { padding: var(--s-3) var(--s-3) 0 0; }
  .rail__item--trafego {
    grid-column: 1 / -1;
    border-top: 1px solid var(--linha);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
  }

  /* Problema: texto → ledger */
  .problema__texto { grid-column: 1 / -1; }
  .problema__ledger { grid-column: 1 / -1; }
  .problema__conclusao { margin-top: var(--s-6); }

  /* Revelação: cadeia primeiro, foto depois (a sequência manda) */
  .revelacao__cadeia { grid-column: 1 / -1; }
  .revelacao__midia {
    grid-column: 1 / -1;
    position: static;
    max-width: 26rem;
  }

}

/* Mobile */
@media (max-width: 30rem) { /* 480px */
  /* O descritor sai onde o header disputa espaço com o CTA. Na landing,
     que já não tem nem CTA nem navegação, ele fica: é o header inteiro. */
  .marca__descritor { display: none; }
  .marca__fio { display: none; }
  .header--marca .marca__descritor,
  .header--marca .marca__fio { display: block; }
  .header--marca .marca__descritor { font-size: 0.75rem; }

  .display__abre { font-size: 0.68em; max-width: none; }

  /* A faixa das cinco decisões sai do hero no celular. No desktop ela
     fecha o primeiro viewport, que era a função dela; empilhada em cinco
     linhas ela cai fora da dobra, custa quase 200px e nomeia os cinco
     pilares sem nenhum contexto — a seção 04 entrega os mesmos cinco
     nomes com o significado junto. Tablet e desktop seguem iguais. */
  .rail { display: none; }

  /* ── A composição, na direção da referência ─────────────────────
     O campo sangra até as duas bordas da tela: preso ao gutter ele
     lia como um selo pequeno no meio do papel. Em largura total a
     bruma encosta nas laterais e a figura passa a ocupar a cena. */
  .hero__midia {
    margin-top: var(--s-5);
    margin-inline: calc(var(--gutter) * -1);
    min-height: min(21.5rem, 47vh);
    --campo-d: min(23.5rem, 104vw);
    --fig-p: 0.66;               /* a figura cresce dentro do campo */
    --campo-y: 0.5rem;
  }

  /* Ordem de pintura explícita. O .campo__massa cria contexto de
     empilhamento próprio (tem filter), e depender de z-index:auto para
     mantê-lo atrás da figura é frágil: basta o renderizador promover a
     camada para a foto sumir dentro da bruma. Zero atrás, dois na
     frente, sem ambiguidade. */
  .campo { z-index: 0; }
  .ecossistema { z-index: 1; }

  /* Sem respiro no pé: a bruma desce até a borda da seção e a faixa
     escura começa onde ela termina. Era o vão branco entre as duas
     que fazia a arte parecer solta. */
  .secao--hero { padding-bottom: 0; }

  /* A emenda com a seção escura. Um degradê curto na base do hero,
     na mesma tinta da seção seguinte, apaga a linha reta entre o
     papel e o grafite: a composição desagua na próxima seção em vez
     de ser cortada por ela. */
  .secao--hero::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 5.5rem;
    background: linear-gradient(180deg,
      rgba(27, 29, 33, 0) 0%,
      rgba(27, 29, 33, 0.10) 45%,
      rgba(27, 29, 33, 0.30) 78%,
      rgba(27, 29, 33, 0.55) 100%);
    pointer-events: none;
    z-index: 0;
  }

  /* Bruma mais densa e mais concentrada. O núcleo sobe de opacidade e
     a queda fica mais curta: antes o preto se diluía cedo demais e o
     conjunto lia lavado. */
  .campo__massa {
    background:
      /* O núcleo fica um degrau abaixo do preto absoluto: a camiseta e o
         cabelo dele já são pretos, e num fundo 100% preto o contorno do
         corpo desaparece e sobram rosto e braços flutuando. A ganho vem
         da queda mais curta, não da escuridão total. */
      radial-gradient(44% 42% at 52% 42%,
        rgba(11, 12, 14, 0.97) 0%,
        rgba(14, 16, 19, 0.94) 30%,
        rgba(20, 22, 26, 0.82) 48%,
        rgba(25, 27, 31, 0.58) 63%,
        rgba(27, 29, 33, 0.30) 76%,
        rgba(27, 29, 33, 0.10) 88%,
        rgba(27, 29, 33, 0) 97%),
      radial-gradient(40% 46% at 45% 60%,
        rgba(20, 22, 26, 0.66) 0%,
        rgba(27, 29, 33, 0.30) 48%,
        rgba(27, 29, 33, 0.08) 74%,
        rgba(27, 29, 33, 0) 92%),
      radial-gradient(72% 66% at 55% 52%,
        rgba(27, 29, 33, 0.30) 0%,
        rgba(27, 29, 33, 0.13) 46%,
        rgba(27, 29, 33, 0.04) 72%,
        rgba(27, 29, 33, 0) 92%);
    filter: blur(14px);
  }

  /* A faixa das cinco decisões sai do hero no celular: empilhada em cinco
     linhas ela cai fora da dobra e repete os pilares que a seção 04 já
     entrega com contexto. Tablet e desktop seguem iguais. */
  .rail { display: none; }

  /* ── As quatro marcas, PARADAS ──────────────────────────────────
     Três coisas causavam o tremor, e as três saem aqui:

     1. a órbita em keyframes, que além de mover mantinha cada ícone
        metade do ciclo atrás da figura;
     2. o will-change do .orb, que promove a camada para sempre — puro
        custo depois que a animação some, e cintilância no celular;
     3. o filter: blur() em fração de pixel, que faz o ladrilho vibrar
        entre dois estados de rasterização a cada repaint.

     Restam quatro posições fixas nas bordas do campo, longe do rosto. */
  .orb {
    animation: none;
    will-change: auto;
    filter: none;
  }
  .orb__tile { --orb-d: 2.25rem; }
  .orb__tile svg { width: 19px; height: 19px; }
  .orb--meta { display: none; }

  .orb--instagram,
  .orb--google,
  .orb--googleads,
  .orb--facebook { display: block; }

  /* ── Distribuição em profundidade ───────────────────────────────
     Nas bordas do campo os quatro ladrilhos ficavam alinhados como
     selos numa moldura. Aqui eles orbitam de verdade: dois atrás da
     figura (z-index 1), menores e mais apagados, dois à frente
     (z-index 3), cheios e maiores. Nenhum encosta no rosto — o
     corredor entre 30% e 60% de largura, acima de 35% de altura,
     fica livre. */

  /* atrás: menores, recuados, parcialmente ocultos pela figura */
  .orb--instagram {
    left: 21%; top: 24%; z-index: 1;
    transform: translate(-50%, -50%) scale(0.78);
    opacity: 0.72;
  }
  .orb--google {
    left: 80%; top: 27%; z-index: 1;
    transform: translate(-50%, -50%) scale(0.84);
    opacity: 0.8;
  }

  /* à frente: cheios, nítidos, sobre o torso e o antebraço */
  .orb--facebook {
    left: 81%; top: 55%; z-index: 3;
    transform: translate(-50%, -50%) scale(1.22);
    opacity: 1;
  }
  .orb--googleads {
    left: 19%; top: 63%; z-index: 3;
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 1;
  }

  .eco__faisca { display: none; }

  /* O canvas de feixes repinta a área inteira do hero a 60fps, por trás
     dos ícones. Com a composição parada ele era a última fonte de
     movimento constante, e a textura que ele dá não se lê num campo
     deste tamanho. Desktop segue com ele. */
  .feixes { display: none; }

  /* ── Os trilhos ────────────────────────────────────────────────
     Duas voltas, como antes, mas maiores: elas precisam cruzar a
     figura, não circundá-la de longe. A geometria vem do CSS (rx, ry
     e cy são propriedades de SVG 2), então o desktop segue com a
     medida original. A de trás passa na altura do peito e some atrás
     do ombro; a da frente é mais aberta e cruza na altura do quadril,
     que é onde a referência coloca o anel mais evidente. */
  .eco__trilhos ellipse { opacity: 1; }
  .eco__trilhos .trilho--longe {
    stroke: url(#eco-trilho);
    stroke-width: 0.9;
    cy: 36; rx: 36; ry: 22;
  }
  .eco__trilhos .trilho--perto {
    stroke: url(#eco-trilho-perto);
    stroke-width: 1.5;
    cy: 54; rx: 45; ry: 17;
  }

  .problema__ledger { padding: var(--s-5); }

  .elo:not(:last-child)::before { left: 1.125rem; }
  .elo { grid-template-columns: 3.25rem 1fr; }
  .elo__num { font-size: 1.375rem; width: 2.25rem; }
  .elo--trafego .elo__corpo { margin-left: 0; padding: var(--s-4) var(--s-5); }

  .fecho__frase { font-size: 1.375rem; }

}

/* ── 12 · Responsivo das seções 04–06 ────────────────────────────── */
@media (max-width: 68rem) { /* 1088px */
  .pilarx__cabeca { grid-column: 1 / 5; }
  .pilarx__conteudo { grid-column: 5 / -1; }
  .pilarx--invertido .pilarx__cabeca { grid-column: 9 / -1; }
  .pilarx--invertido .pilarx__conteudo { grid-column: 1 / 9; }

  .sexto__texto { grid-column: 1 / 8; }
  .sexto__num { grid-column: 8 / -1; }

  .fase__cabeca { grid-column: 1 / 5; }
  .fase__corpo { grid-column: 5 / -1; }
}

@media (max-width: 48rem) { /* 768px */
  .pilarx { grid-template-columns: 1fr; margin-top: var(--s-8); }
  .pilarx__cabeca,
  .pilarx__conteudo,
  .pilarx--invertido .pilarx__cabeca,
  .pilarx--invertido .pilarx__conteudo { grid-column: 1 / -1; grid-row: auto; }
  .pilarx__cabeca { position: static; }
  .pilarx__essencia { max-width: none; }

  .sexto { grid-template-columns: 1fr; }
  .sexto__texto { grid-column: 1 / -1; }
  .sexto__num {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: left;
    font-size: clamp(7rem, 26vw, 10rem);
    margin-right: 0;
    transform: none;
    color: var(--metal-escuro);
    margin-bottom: var(--s-4);
  }

  .fase { grid-template-columns: 1fr; }
  .fase__cabeca, .fase__corpo { grid-column: 1 / -1; }
  .fase__midia { max-width: 24rem; }

  /* Diagrama circular sai; entra a cadeia vertical com retorno */
  .ciclo { display: none; }

  .ciclo-m { display: block; margin-top: var(--s-6); }

  .ciclo-m__entrada {
    position: relative;
    display: inline-block;
    font-size: var(--t-pequeno);
    font-weight: 600;
    letter-spacing: 0.06em;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--off);
    padding: 0.25rem var(--s-3);
    margin-bottom: var(--s-4);
    margin-left: var(--s-6);
  }

  .ciclo-m__entrada::after {
    /* conector entrada → tráfego */
    content: '';
    position: absolute;
    left: var(--s-5);
    top: 100%;
    height: var(--s-4);
    width: 1px;
    background: var(--metal);
  }

  .ciclo-m__corpo {
    position: relative;
    padding-left: var(--s-6);
  }

  .ciclo-m__corpo::before {
    /* colchete de retorno: refinamento → volta ao tráfego */
    content: '';
    position: absolute;
    left: 0;
    top: 1.25rem;
    bottom: 1.25rem;
    width: var(--s-4);
    border: 1px solid var(--metal);
    border-right: 0;
    border-radius: var(--raio) 0 0 var(--raio);
  }

  .ciclo-m__corpo::after {
    /* ponta da seta do retorno, apontando para o topo da cadeia */
    content: '';
    position: absolute;
    left: var(--s-4);
    top: 1.25rem;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--metal);
    border-right: 1px solid var(--metal);
    transform: translateY(-3.5px) rotate(45deg);
  }

  .ciclo-m__lista {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    align-items: flex-start;
  }

  .ciclo-m__item {
    font-size: var(--t-pequeno);
    font-weight: 500;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--branco);
    padding: 0.25rem var(--s-3);
    position: relative;
  }

  .ciclo-m__item + .ciclo-m__item { margin-top: var(--s-4); }

  .ciclo-m__item + .ciclo-m__item::before {
    content: '';
    position: absolute;
    left: var(--s-5);
    top: calc(-1 * var(--s-4) - 1px);
    height: var(--s-4);
    width: 1px;
    background: var(--metal);
  }

  .ciclo-m__item--trafego {
    background: var(--grafite);
    border-color: var(--grafite);
    color: var(--branco);
  }

  .ciclo-m__legenda {
    margin-top: var(--s-3);
    font-size: var(--t-pequeno);
    color: var(--tinta-2);
    padding-left: var(--s-6);
  }
}

@media (max-width: 30rem) { /* 480px */
  .matriz__lista { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-4); }
  .saida { padding: var(--s-4) var(--s-5); }
  .sexto__conceito { font-size: 1.5rem; }
}

/* ── 13 · Responsivo das seções 07–10 ────────────────────────────── */
@media (max-width: 68rem) { /* 1088px */
}

@media (max-width: 48rem) { /* 768px */
  /* Um depoimento por vez, com a fatia do próximo à direita dizendo
     que a esteira continua. A pista sangra até a borda da tela. */
  .stories__pista {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    gap: var(--s-4);
    /* Sem máscara no celular. Uma mask no próprio elemento que rola
       obriga o navegador a repintar a camada inteira a cada quadro de
       scroll, e é isso que fazia o card sumir no meio do arrasto. A
       pista já sangra até a borda da tela e a fatia do próximo card
       diz sozinha que a esteira continua: o degradê não estava
       pagando o que custava. */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .stories__item { flex-basis: min(16.25rem, 72vw); }
  .stories { margin-top: var(--s-6); }

  /* O card fora do centro caía a 0,55 de opacidade e, com a máscara
     apagando a mesma borda, o desconto vinha em dobro: lia como
     desaparecer, não como profundidade. No celular o piso sobe. */
  .vcard { opacity: calc(0.82 + 0.18 * var(--foco, 1)); }

  /* Empilhado, a ponte vira a linha que separa as duas etapas. */
  .condicao { grid-template-columns: 1fr; gap: var(--s-5); }
  /* Empilhada, a ponte alinha à esquerda como os cards e os fios
     encurtam: a descida continua legível sem custar meia tela. */
  .condicao__ponte {
    max-width: none;
    text-align: left;
    align-items: flex-start;
    gap: var(--s-2);
  }
  /* Empilhado, o fio de cima é redundante: o card acabou de terminar
     dois dedos acima. Fica o de baixo, que é quem aponta para a gestão. */
  .condicao__ponte::before { display: none; }
  .condicao__ponte::after { height: 1.25rem; }
  .condicao__marco-prazo { font-size: var(--t-pequeno); }
  .contratacao__principio {
    font-size: 1.0625rem;
    margin-top: var(--s-4);
    padding-top: var(--s-3);
  }

  /* O ledger cabe, mas em 350px cada respiro custa uma linha de quebra.
     Os painéis apertam um degrau e a coluna do valor cede espaço para o
     nome da entrega, que é quem precisa da medida. */
  .condicao__etapa { padding: var(--s-5); }
  .condicao__entrega { gap: var(--s-3); padding-block: var(--s-2); }
  .condicao__investimento { padding: var(--s-4) var(--s-5); }
  .condicao__micro--card { padding-top: var(--s-4); }


  .rodape__topo { flex-direction: column; gap: var(--s-4); }
}

@media (max-width: 30rem) { /* 480px */
  .pilares__acao { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .pilares__acao .btn { width: 100%; }
  .diagnostico { flex-direction: column; align-items: stretch; }
  .diagnostico .btn { width: 100%; }
  .rodape__nav { gap: var(--s-4); }

  /* ── Seção 06 · estruturação e gestão, afinada para 390–430px ──────
     O bloco de 768px já empilha os cards; aqui é o ajuste fino de quem
     realmente vê a página no bolso. Três problemas concretos: */
  .condicao { margin-top: var(--s-6); gap: var(--s-4); }

  /* 1) O parágrafo de princípio competia com o corpo acima dele. Um
     degrau de corpo, sem peso, em tinta mais clara: lê como nota de
     rodapé do argumento, não como um segundo parágrafo. */
  .contratacao__principio {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top-color: var(--linha);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--tinta-3);
  }

  .condicao__etapa { padding: var(--s-4); }

  /* 2) Duas entregas têm nome longo e quebravam em duas linhas dentro
     de uma grade "nome / valor" lado a lado; o valor, alinhado à base,
     ficava colado à primeira linha do nome e sobrava vazio embaixo —
     o efeito de tabela quebrada. Empilhado, o nome usa a largura toda
     e quebra de forma simétrica, com o valor logo abaixo dele. */
  .condicao__entrega {
    grid-template-columns: 1fr;
    gap: 0.1875rem;
    padding-block: 0.5rem;
  }
  .condicao__entrega-nome { font-weight: 600; }
  .condicao__entregas { margin-top: var(--s-4); }
  .condicao__soma { margin-top: var(--s-3); padding-top: var(--s-3); }
  .condicao__investimento { margin-top: var(--s-4); padding: var(--s-4); }
  .condicao__micro--card { padding-top: var(--s-3); font-size: 0.8125rem; }

  /* 3) A ponte de dois fios verticais soltos lia como legenda perdida
     entre os cards. Um chip único e centrado — a mesma frase, com
     início e fim visíveis — resolve em menos altura e mais clareza. */
  .condicao__ponte {
    align-self: center;
    display: block;
    max-width: none;
    padding: var(--s-3) var(--s-4);
    background: var(--off);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    text-align: center;
  }
  .condicao__ponte::before,
  .condicao__ponte::after { display: none; }
  .condicao__marco-prazo,
  .condicao__marco-estado { display: inline; }
  .condicao__seta { display: inline; color: var(--metal-escuro); }

  /* Card escuro: a nota final respirava demais em relação à lista. */
  .condicao__nota { margin-top: var(--s-3); padding-top: var(--s-3); }
  .condicao__lista li { padding-block: 0.125rem; }
}

/* ── 14 · Hover apenas onde existe ponteiro ─────────────────────── */
/* Em toque, :hover fica "grudado" após o tap; estas regras ficam
   restritas a dispositivos que realmente têm hover. */
@media (hover: hover) {
  .nav__link:hover { color: var(--tinta); }
  .btn--solido:hover { background: var(--cinza-700); }
  .secao--escura .btn--solido:hover,
  .secao--cta .btn--solido:hover { background: var(--cinza-100); }
  .btn--fantasma:hover { border-color: var(--tinta); }
  .fecho__link:hover { border-color: var(--tinta); }
  .saida__prox a:hover { border-color: var(--tinta); }
  .saida--final .saida__prox a:hover { border-color: var(--branco); }
  .rodape__link:hover { color: var(--branco); border-color: var(--metal); }
}

/* ── 15 · Alvos de toque em ponteiro grosso ──────────────────────── */
/* Aumenta a área tocável sem alterar a composição: o texto fica no
   mesmo lugar, o alvo cresce ao redor dele. */
@media (pointer: coarse) {
  .rodape__nav { gap: var(--s-2) var(--s-5); }
  .rodape__link { display: inline-block; padding-block: 0.75rem; }

  .fecho__link,
  .saida__prox a { display: inline-block; padding-block: 0.75rem; }

  .nav__link { padding-block: 0.75rem; }

  .marca { padding-block: 0.375rem; }
}

/* ── 16 · Áreas seguras (notch, cantos, indicador) ───────────────── */
/* viewport-fit=cover já está no HTML; sem isto, em paisagem o conteúdo
   passa por baixo do notch. */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }

  .rodape { padding-bottom: max(var(--s-7), env(safe-area-inset-bottom)); }
}

/* ── 17 · Paisagem em telas baixas ───────────────────────────────── */
/* Um celular deitado tem ~390px de altura: o ritmo vertical do desktop
   engole a tela inteira. Comprime o respiro e solta os elementos presos. */
@media (orientation: landscape) and (max-height: 30rem) {
  :root { --s-secao: 3.5rem; }

  .secao--hero { padding-top: calc(4.5rem + var(--s-6)); }

  /* Cabeçalho de pilar preso a 104px num viewport de 390px não gruda:
     rola junto, como no mobile retrato. */
  .pilarx__cabeca,
  .revelacao__midia { position: static; }

  .sexto__num { font-size: clamp(6rem, 18vh, 10rem); }
}

/* ── 14 · Responsivo das seções reescritas ───────────────────────── */
@media (max-width: 48rem) { /* 768px */
  /* decisoes e contratacao somavam 36% da altura no celular; o ritmo
     aperta aqui sem mudar a composição */
  .decisoes { grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); }
  .decisao,
  .decisao:nth-child(4),
  .decisao:nth-child(5) { grid-column: auto; }
  .decisao { padding: var(--s-5); }
  .decisao__num { font-size: 1.75rem; }
  .decisao__nome { margin-top: var(--s-3); }
  .decisao__texto { margin-top: var(--s-3); }
  .decisao__saida { margin-top: var(--s-4); padding-top: var(--s-3); }
  .sexto-bloco { margin-top: var(--s-6); }


  /* O trilho sangra até a borda da tela: a fatia do card seguinte é o
     que diz que dá para arrastar, e ela não pode morrer no gutter. */
  .trilha__pista {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    gap: var(--s-4);
  }
  /* Sem a linha de entrega o card ficou curto; o respiro interno
     acompanha, para não sobrar vazio embaixo do texto. */
  .entrega {
    flex-basis: min(18rem, 76vw);
    padding: var(--s-5) var(--s-5) var(--s-4);
  }
  .entrega__num { font-size: 1.875rem; }
  .entrega__nome { margin-top: var(--s-2); font-size: 1.125rem; }
  .entrega__texto { margin-top: var(--s-2); }

}

@media (max-width: 30rem) { /* 480px */
  .hero__apoio { margin-top: var(--s-3); }
  .decisao__num { font-size: 2rem; }
  .sexto-bloco { padding: var(--s-5); }
  .tese__fecho, .problema__conclusao { font-size: 1.375rem; }
}