/* ============================================================
   WEBNAMORADA · Página de vendas
   Design tokens fiéis ao Manual de Marca Oficial v2.0

   Duas regras governam este arquivo:
   1. Só as cores oficiais do manual, mais neutros derivados com viés
      quente puxado para o ouro. Cinza neutro puro entrega design não
      pensado; cinza com o mesmo viés do acento lê como escolhido.
   2. O manual proíbe "estética típica de sites adultos". Como a copy é
      direta em vários pontos, o peso de sustentar o registro premium é
      todo do design. Daí tipografia leve em corpo grande, muito preto,
      filete dourado no lugar de caixa, e nenhum rosa em lugar nenhum.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Montserrat-var.woff2') format('woff2');
}

:root {
  /* ---- Paleta oficial ---- */
  --gold:        #D4AF37;   /* Premium Gold   */
  --gold-light:  #F4D35E;   /* Light Gold     */
  --black:       #0D0D0D;   /* Deep Black     */
  --graphite:    #1A1A1A;   /* Graphite       */
  --warm-white:  #FFF8E7;   /* Warm White     */

  /* ---- Neutros derivados (viés quente, puxados para o ouro) ---- */
  --surface:     #121110;
  --surface-2:   #171614;
  --text:        var(--warm-white);
  --text-mid:    #B3AA97;   /* 7.4:1 sobre o preto */
  --text-dim:    #8A8272;   /* 4.9:1, só para texto de apoio */
  --line:        rgba(212, 175, 55, .16);
  --line-soft:   rgba(255, 248, 231, .09);

  /* ---- Brilhos ---- */
  --glow-gold:   rgba(212, 175, 55, .13);

  /* ---- Tipografia ---- */
  --font: 'Montserrat', system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(2.4rem, 6.4vw, 5rem);
  --fs-disp:  clamp(1.9rem, 4.2vw, 3.4rem);
  --fs-h3:    clamp(1.15rem, 1.9vw, 1.5rem);
  --fs-lede:  clamp(1rem, 1.35vw, 1.175rem);
  --fs-body:  clamp(.95rem, 1.15vw, 1.05rem);
  --fs-small: clamp(.8rem, 1vw, .875rem);
  --fs-micro: clamp(.7rem, .85vw, .78rem);

  /* ---- Geometria ---- */
  --wrap:     1200px;
  --measure:  62ch;
  --gutter:   clamp(1.25rem, 5vw, 4rem);
  --sec-y:    clamp(4.5rem, 10vw, 9rem);
  --radius:   4px;   /* sistema de raio único: quase reto, editorial */

  /* ---- Curvas (as nativas do CSS são fracas demais) ---- */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--gold); color: var(--black); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--black);
  padding: .75rem 1.25rem; font-weight: 600; font-size: var(--fs-small);
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); position: relative; }
.center { text-align: center; }
.measure { max-width: var(--measure); }
.measure-mid { max-width: 46rem; margin-inline: auto; }
.gold { color: var(--gold); }

/* ========================= TIPOGRAFIA =========================
   O contraste vem de peso e itálico dentro da mesma família, não de
   uma segunda fonte. O manual recomenda Montserrat, e trocar de
   família aqui seria desviar da marca sem necessidade.            */

h1, h2, h3 { font-weight: 300; letter-spacing: -.022em; margin: 0; text-wrap: balance; }

h1 {
  font-size: var(--fs-hero);
  line-height: 1.05;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.display {
  font-size: var(--fs-disp);
  line-height: 1.14;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Ênfase dourada em itálico.
   line-height e padding-bottom existem por um motivo específico:
   sem eles o itálico corta a perna do "p" e do "g" em palavras como
   "esperando" e "pergunta". */
.accent {
  display: block;
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
  line-height: 1.16;
  padding-bottom: .12em;
}
h2 .accent, .display .accent { display: inline; }

.eyebrow {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--text-mid);
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  text-wrap: pretty;
}
/* preto sobre ouro: 8.9:1 { background: var(--gold); color: var(--black); box-shadow: 0 0 0 rgba(212,175,55,0); }

/* ========================= CABEÇALHO =========================
   Some ao descer, volta ao subir. O translate é o único valor
   animado, então roda na GPU e não força layout.                */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: rgba(13, 13, 13, .72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transform: translateY(0);
  transition: transform 320ms var(--ease-out), opacity 200ms var(--ease-out);
}
.site-head[data-hidden="true"] { transform: translateY(-100%); opacity: 0; }
/* no topo da página o cabeçalho some no fundo, sem borda nem blur */
.site-head[data-top="true"] {
  background: transparent; border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.head-in {
  max-width: var(--wrap); margin-inline: auto;
  padding: .85rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wordmark {
  color: var(--gold); text-decoration: none;
  font-weight: 600;                 /* peso 600 conforme o manual */
  font-size: clamp(.82rem, 1.5vw, 1rem);
  letter-spacing: .2em;
}

/* ============================ HERO ============================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }

/* Escurecimento pesado. Três camadas em vez de um overlay chapado:
   vinheta radial, degradê vertical para emendar na dobra seguinte e
   um véu quente que tira o azul da imagem e puxa para o ouro.      */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 85% at 68% 38%, rgba(13,13,13,.15), rgba(13,13,13,.88) 68%),
    linear-gradient(180deg, rgba(13,13,13,.92) 0%, rgba(13,13,13,.55) 32%, rgba(13,13,13,.94) 88%, var(--black) 100%),
    linear-gradient(115deg, rgba(212,175,55,.10), transparent 52%);
}

.hero-in {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  /* o padding inferior reserva o espaço da faixa de rostos, que é
     absoluta e passa por cima em vez de empurrar a hero para baixo */
  padding: clamp(5rem, 10vh, 7rem) var(--gutter) clamp(7rem, 14vh, 9rem);
  width: 100%;
}
.hero-in h1, .hero-in .lede, .hero-in .microtrust { max-width: 34ch; }
.hero-in .lede { max-width: 46ch; }

.microtrust {
  list-style: none; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-size: var(--fs-micro); color: var(--text-dim);
  letter-spacing: .06em; text-transform: uppercase;
}
.microtrust li { position: relative; }
.microtrust li + li::before {
  content: ""; position: absolute; left: -.75rem; top: 50%;
  width: 3px; height: 3px; border-radius: 50%; background: var(--gold);
  transform: translateY(-50%); opacity: .6;
}

/* ---- Faixa de rostos: prova imediata em dose pequena ---- */
.hero-strip {
  position: absolute; inset: auto 0 0; z-index: 1;
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.strip-track { display: flex; gap: clamp(.6rem, 1.4vw, 1rem); width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .strip-track { animation: strip 46s linear infinite; }
  .hero-strip:hover .strip-track { animation-play-state: paused; }
}
@keyframes strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.strip-face {
  flex: none;
  width: clamp(52px, 7vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: grayscale(.35) brightness(.85);
}

/* ==================== FAIXA DE CONFIANÇA ==================== */
.band { border-block: 1px solid var(--line); background: var(--surface); }
.band-grid {
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  background: var(--line);
}
.band-item {
  margin: 0; background: var(--surface);
  padding: clamp(1.25rem, 2.6vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
  display: flex; align-items: center; gap: .85rem;
  font-size: var(--fs-small); color: var(--text-mid);
}
@media (min-width: 800px) { .band-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Ícones: traço único, geometria simples ---------- */
.ic {
  flex: none; width: 22px; height: 22px;
  fill: none; stroke: var(--gold); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic-lg { width: 30px; height: 30px; stroke-width: 1.2; }

/* ======================= IDENTIFICAÇÃO =======================
   Escada editorial: cada linha entra um pouco mais, criando um
   ritmo de leitura descendente em vez de uma lista solta.       */
.pains { background: var(--black); }
.pains .display { max-width: 20ch; }
.pain-list {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.4rem);
  max-width: 54ch;
}
.pain-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-lede);
  color: var(--text-mid);
  line-height: 1.55;
}
.pain-list li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 12px; height: 1px; background: var(--gold); opacity: .75;
}
/* A escadinha saiu: o recuo progressivo chamava atenção para si em vez
   de servir a leitura. Alinhamento reto, o peso fica na frase.        */
.pain-close {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  font-weight: 300; line-height: 1.35; letter-spacing: -.015em;
}

/* ======================= COMO FUNCIONA ======================= */
.steps-sec { background: var(--surface); border-block: 1px solid var(--line); }
.steps {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: 0; counter-reset: s;
  display: flex; flex-direction: column;
}
.step {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step-n {
  font-size: var(--fs-small); font-weight: 600; color: var(--gold);
  letter-spacing: .16em; padding-top: .35em;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--fs-h3); font-weight: 400; margin-bottom: .5rem; }
.step p { margin: 0; color: var(--text-mid); max-width: 58ch; }

/* ========================= A DIFERENÇA ========================= */
.diff-sec { background: var(--black); }
.cmp {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cmp-head, .cmp-row { display: grid; grid-template-columns: 1fr 1fr; }
.cmp-head { background: var(--surface-2); }
.cmp-head span {
  padding: clamp(.9rem, 2vw, 1.1rem) clamp(1rem, 2.4vw, 1.6rem);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
}
.cmp-head .is-us { color: var(--gold); }
.cmp-row span {
  padding: clamp(.9rem, 2vw, 1.2rem) clamp(1rem, 2.4vw, 1.6rem);
  font-size: var(--fs-small); color: var(--text-dim);
  border-top: 1px solid var(--line-soft);
}
.cmp-row .is-us {
  color: var(--text);
  background: linear-gradient(90deg, rgba(212,175,55,.07), rgba(212,175,55,.03));
  border-left: 1px solid var(--line);
}
.diff-close {
  margin: clamp(2rem, 4vw, 2.75rem) 0 clamp(2rem, 4vw, 2.75rem);
  font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 300; line-height: 1.45;
}

/* ========================= AS MODELOS =========================
   Trilho horizontal em vez de grade: são 11 cards, e 11 nunca fecha
   uma grade sem sobrar célula órfã. O trilho também é o gesto certo
   para catálogo { background: var(--surface); border-block: 1px solid var(--line); }

/* ========================== A CONVERSA ========================== */
.talk-sec { background: var(--black); }
.talk-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .talk-grid { grid-template-columns: 1.05fr .95fr; } }
.talk-kicker {
  margin: 0; font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 300; line-height: 1.45;
}
.talk-shot {
  margin: 0; position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; max-width: 380px; justify-self: center;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 80px var(--glow-gold);
}

/* ========================= O QUE ELA FAZ ========================= */
.does-sec { background: var(--surface); border-block: 1px solid var(--line); }
.does-grid {
  display: grid; gap: 1px; background: var(--line-soft);
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line-soft);
}
@media (min-width: 780px) { .does-grid { grid-template-columns: 1fr 1fr; } }
.does {
  background: var(--surface);
  padding: clamp(1.75rem, 3.4vw, 2.5rem);
  display: flex; flex-direction: column; gap: .85rem;
}
.does h3 { font-size: var(--fs-h3); font-weight: 400; }
.does p { margin: 0; color: var(--text-dim); font-size: var(--fs-small); line-height: 1.55; }

/* ============================ EM BREVE ============================ */
.soon-sec {
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(212,175,55,.09), transparent 62%),
    var(--black);
}
.soon-note {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  font-size: var(--fs-small); color: var(--text-dim); line-height: 1.65;
}
.soon-note strong { color: var(--text); font-weight: 500; display: block; margin-bottom: .35rem; }

/* ============================ DISCRIÇÃO ============================
   Bloco fechado, com borda dourada, lendo como um cofre. É a dobra que
   responde à maior trava do público, então merece região própria.     */
.vault-sec { background: var(--black); }
.vault {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(212,175,55,.07), transparent 60%),
    var(--surface);
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
}
.vault .display { text-align: center; }
.vault-list {
  margin: clamp(2rem, 4vw, 2.75rem) 0; padding: 0;
  display: grid; gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
@media (min-width: 760px) { .vault-list { grid-template-columns: 1fr 1fr; } }
.vault-list > div { background: var(--surface); padding: clamp(1.25rem, 2.6vw, 1.75rem); }
.vault-list dt {
  font-weight: 500; font-size: var(--fs-body); color: var(--gold);
  margin-bottom: .35rem;
}
.vault-list dd { margin: 0; font-size: var(--fs-small); color: var(--text-dim); line-height: 1.55; }

/* ========================= ANCORAGEM + PREÇO ========================= */
.price-sec { background: var(--surface); border-block: 1px solid var(--line); }
.anchor-list {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) auto; padding: 0;
  max-width: 44rem;
  display: grid; gap: .1rem;
}
.anchor-list li {
  position: relative; padding: .7rem 0 .7rem 2rem;
  font-size: var(--fs-small); color: var(--text-mid);
  border-bottom: 1px solid var(--line-soft);
}
.anchor-list li:last-child { border-bottom: 0; }
.anchor-list li::before {
  content: ""; position: absolute; left: .35rem; top: 1.15em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}

.plans { display: grid; gap: clamp(1rem, 2vw, 1.25rem); margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: center; } }
.plan {
  position: relative; text-align: center;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(1.75rem, 3.4vw, 2.25rem) 1.25rem;
  background: var(--black);
  transition: border-color 260ms var(--ease-out), transform 260ms var(--ease-out);
}
/* o do meio não é "mais um card": tem hierarquia real */
.plan.is-rec {
  border-color: var(--gold);
  background: radial-gradient(100% 140% at 50% 0%, rgba(212,175,55,.12), transparent 65%), var(--black);
  padding-block: clamp(2.25rem, 4.4vw, 3rem);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 60px var(--glow-gold);
}
.plan-tag {
  position: absolute; top: -.72rem; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--black);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .85rem; border-radius: 999px; white-space: nowrap;
}
.plan h3 {
  font-size: var(--fs-small); font-weight: 600; color: var(--text-dim);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .85rem;
}
.plan-price {
  margin: 0; color: var(--gold);
  font-size: clamp(2.1rem, 4.6vw, 3rem); font-weight: 300;
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-price .cur { font-size: .42em; font-weight: 400; margin-right: .18em; vertical-align: .5em; }
.plan-price .cents { font-size: .42em; font-weight: 400; vertical-align: .5em; }
.plan-desc { margin: .85rem 0 0; font-size: var(--fs-small); color: var(--text-dim); }
.price-note { max-width: 40rem; margin-inline: auto; color: var(--text-dim); font-size: var(--fs-small); }

@media (hover: hover) and (pointer: fine) {
  .plan:not(.is-rec):hover { border-color: var(--line); transform: translateY(-3px); }
}
.proof-n {
  margin: 0; color: var(--gold);
  font-size: clamp(3.5rem, 11vw, 7rem); font-weight: 200;
  letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ============================== FAQ ============================== */
.faq-sec { background: var(--surface); border-block: 1px solid var(--line); }
.faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-soft); }
.q { border-bottom: 1px solid var(--line-soft); }
.q summary {
  list-style: none; cursor: pointer;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) 2.5rem clamp(1.1rem, 2.4vw, 1.5rem) 0;
  font-size: var(--fs-body); font-weight: 400; color: var(--text);
  position: relative;
  transition: color 200ms var(--ease-out);
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 260ms var(--ease-out);
}
.q[open] summary { color: var(--gold); }
.q[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.q .a { padding: 0 2.5rem clamp(1.25rem, 2.6vw, 1.6rem) 0; }
.q .a p { margin: 0; color: var(--text-dim); font-size: var(--fs-small); line-height: 1.65; max-width: 62ch; }
@media (hover: hover) and (pointer: fine) { .q summary:hover { color: var(--gold); } }

/* Abrir tem que ser suave; fechar pode ser seco, que é o que o
   usuário espera de um acordeão. */
@media (prefers-reduced-motion: no-preference) {
  .q[open] .a { animation: faq-open 260ms var(--ease-out); }
}
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =========================== FECHAMENTO =========================== */
.close-sec {
  background:
    radial-gradient(75% 110% at 50% 100%, rgba(212,175,55,.12), transparent 62%),
    var(--black);
}
.close-kicker {
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 300; line-height: 1.5;
}
.close-sec .microtrust { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* ============================= RODAPÉ ============================= */
.site-foot {
  background: var(--black);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.foot-age { margin: 0 0 .5rem; font-size: var(--fs-small); color: var(--text-mid); font-weight: 500; }
.foot-ai { margin: 0 auto 1.75rem; font-size: var(--fs-small); color: var(--text-dim); max-width: 52ch; }
.foot-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.75rem; margin-bottom: 1.5rem; }
.foot-nav a {
  color: var(--text-mid); text-decoration: none; font-size: var(--fs-small);
  transition: color 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .foot-nav a:hover { color: var(--gold); } }
.foot-copy { margin: 0 0 1.5rem; font-size: var(--fs-micro); color: var(--text-dim); }
.foot-legal {
  margin: 0 auto; max-width: 68ch;
  font-size: var(--fs-micro); color: #5F594E; line-height: 1.7;
}

/* ============================ MOVIMENTO ============================
   Entrada por scroll via IntersectionObserver, nunca por listener de
   scroll. Só transform e opacity, que rodam fora do main thread.     */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); }
  .reveal.in {
    opacity: 1; transform: none;
    transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
}

/* Notebook de tela baixa: a hero precisa caber na primeira dobra com o
   CTA visível, senão o botão fica abaixo do corte e a página perde o
   clique mais valioso da jornada. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero-in { padding-top: clamp(4rem, 8vh, 5.5rem); }
  .hero-in h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); }
  .hero-in .lede { font-size: 1rem; margin-bottom: 1.4rem; }
  .hero-in .microtrust { margin-top: 1.1rem; }
  .strip-face { width: clamp(44px, 5vw, 56px); }
}

/* ============================ RESPONSIVO ============================ */
@media (max-width: 640px) {
  .hero-in h1, .hero-in .lede, .hero-in .btn { max-width: 100%; }
  .hero-in .btn { width: 100%; }
  .cmp-head span, .cmp-row span { font-size: var(--fs-micro); }
  .plan.is-rec { padding-block: clamp(2rem, 4vw, 2.5rem); }
}

/* ============================================================
   v2 · BOTÃO SHINY, CONVERSA SIMULADA, TABLET E ÓRBITA
   Os componentes vieram do 21st.dev em React + Tailwind +
   framer-motion. Aqui estão portados para CSS e JS puros, porque
   a hospedagem não roda Node. Mesmo efeito, zero dependência.
   ============================================================ */

/* ===================== BOTÃO SHINY =====================
   Porte fiel do shiny-cta, com o azul original trocado pelo
   dourado da marca. @property é o que permite animar um ângulo
   de gradiente: sem ele o conic-gradient não interpola.       */
@property --gradient-angle { syntax: "<angle>";      initial-value: 0deg;  inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>";      initial-value: 0deg;  inherits: false; }
@property --gradient-percent      { syntax: "<percentage>"; initial-value: 5%;    inherits: false; }
@property --gradient-shine        { syntax: "<color>";      initial-value: #FFF8E7; inherits: false; }

.shiny {
  --shiny-bg:            #000000;
  --shiny-bg-subtle:     #1a1818;
  --shiny-fg:            var(--warm-white);
  --shiny-highlight:     var(--gold);
  --shiny-highlight-sub: var(--gold-light);
  --shiny-anim:          gradient-angle linear infinite;
  --shiny-dur:           3s;
  --shadow-size:         2px;
  --shiny-transition:    800ms cubic-bezier(.25, 1, .5, 1);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline-offset: 4px;
  padding: 1.05rem 2.3rem;
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--shiny-fg);
  background:
    linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle);
  transition: var(--shiny-transition);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}
.shiny-sm { padding: .68rem 1.35rem; font-size: var(--fs-micro); }

.shiny::before, .shiny::after, .shiny span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}
.shiny:active { translate: 0 1px; }

/* trama de pontos */
.shiny::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size); height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position),
    var(--warm-white) calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), #000, transparent 10% 90%, #000);
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), #000, transparent 10% 90%, #000);
  border-radius: inherit;
  opacity: .4;
  z-index: -1;
}

/* brilho interno */
.shiny::after {
  --shiny-anim: shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-highlight), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: .6;
}

.shiny span { z-index: 1; position: relative; }
.shiny span::before {
  --size: calc(100% + 1rem);
  width: var(--size); height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-highlight);
  opacity: 0;
  transition: opacity var(--shiny-transition);
  animation: calc(var(--shiny-dur) * 1.5) breathe linear infinite;
}

.shiny, .shiny::before, .shiny::after {
  animation: var(--shiny-anim) var(--shiny-dur),
             var(--shiny-anim) calc(var(--shiny-dur) / .4) reverse paused;
  animation-composition: add;
}
.shiny:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-highlight-sub);
}
.shiny:is(:hover, :focus-visible), .shiny:is(:hover, :focus-visible)::before, .shiny:is(:hover, :focus-visible)::after { animation-play-state: running; }
.shiny:is(:hover, :focus-visible) span::before { opacity: 1; }

@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer        { to { rotate: 360deg; } }
@keyframes breathe        { from, to { scale: 1; } 50% { scale: 1.2; } }

@media (prefers-reduced-motion: reduce) {
  .shiny, .shiny::before, .shiny::after, .shiny span::before { animation: none; }
}

/* ---- CTA com o microtexto do lado de fora ---- */
.cta-row, .cta-block {
  display: flex; align-items: center;
  gap: clamp(.85rem, 2vw, 1.25rem);
  flex-wrap: wrap;
}
.cta-block { justify-content: center; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.cta-left { justify-content: flex-start; }
.cta-aside {
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* ---- Microtexto de confiança: uma linha só ---- */
.microtrust {
  list-style: none; margin: clamp(1.4rem, 2.8vw, 1.9rem) 0 0; padding: 0;
  display: flex; flex-wrap: nowrap;
  gap: clamp(.75rem, 2.2vw, 1.75rem);
  font-size: var(--fs-micro); color: var(--text-dim);
  letter-spacing: .04em; text-transform: uppercase;
}
.microtrust li {
  display: flex; align-items: center; gap: .45rem;
  white-space: nowrap; min-width: 0;
}
.microtrust li::before { content: none; }   /* o ponto dourado saiu, agora tem ícone */
.ic-mt {
  flex: none; width: 15px; height: 15px;
  fill: none; stroke: var(--gold); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 620px) {
  .microtrust { font-size: 9.5px; gap: .6rem; letter-spacing: .02em; }
  .ic-mt { width: 13px; height: 13px; }
}

.chat-phone {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0B0B0B;
  overflow: hidden;
  box-shadow: 0 40px 110px rgba(0,0,0,.65), 0 0 70px rgba(212,175,55,.09);
  justify-self: center;
  width: 100%; max-width: 420px;
}
.chat-head {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.1rem;
  background: #131313;
  border-bottom: 1px solid var(--line-soft);
}
.chat-av {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; background: var(--graphite);
  border: 1px solid var(--line);
}
.chat-av img { width: 100%; height: 100%; object-fit: cover; }
.chat-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-name { font-size: var(--fs-body); font-weight: 500; color: var(--gold); letter-spacing: .01em; }
.chat-status { font-size: var(--fs-micro); color: #4FBF6A; display: flex; align-items: center; gap: .4rem; }
.chat-status i { width: 6px; height: 6px; border-radius: 50%; background: #4FBF6A; flex: none; }

.chat-body {
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: .6rem;
  min-height: 400px;
  justify-content: flex-end;
}
.bubble {
  max-width: 82%;
  padding: .7rem .9rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  border-radius: 14px;
  color: var(--text);
  animation: bubble-in 380ms var(--ease-out) both;
}
.bubble.dela { align-self: flex-start; background: #1C1C1C; border-bottom-left-radius: 5px; }
.bubble.voce { align-self: flex-end; background: #2A2621; border-bottom-right-radius: 5px; color: var(--warm-white); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

.bubble.digitando { display: flex; gap: 4px; padding: .85rem .9rem; }
.bubble.digitando i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim);
  animation: dot 1.2s var(--ease-in-out) infinite;
}
.bubble.digitando i:nth-child(2) { animation-delay: .18s; }
.bubble.digitando i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-input {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  border-top: 1px solid var(--line-soft);
  background: #131313;
}
.chat-field {
  flex: 1; padding: .7rem 1rem;
  background: #1C1C1C; border-radius: 999px;
  font-size: var(--fs-small); color: #6B6459;
}
.chat-send {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); display: grid; place-items: center;
}
.chat-send svg { width: 18px; height: 18px; fill: var(--black); }

@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; }
  .bubble.digitando i { animation: none; opacity: .6; }
}

/* ============ IMAGEM DE FUNDO DA DOBRA "JÁ TENTOU PARECIDO" ============ */
.diff-sec { position: relative; overflow: hidden; }
.diff-sec > .wrap { position: relative; z-index: 1; }
.diff-copy { max-width: 44rem; }

/* ---- marcas da tabela ---- */
.cmp-row span { display: flex; align-items: flex-start; gap: .6rem; }
.cmp-row .mk { font-style: normal; flex: none; font-size: .85em; line-height: 1.5; opacity: .85; }
.cmp-row .is-us .mk { opacity: 1; }

/* ================= AS MODELOS: TABLET COM SCROLL =================
   Porte do container-scroll-animation. O framer-motion original lia
   scrollYProgress; aqui o JS calcula a mesma razão e escreve em duas
   custom properties. Só transform muda, então roda na GPU.          */
.tablet-sec { background: var(--surface); border-block: 1px solid var(--line); }
.tablet-scroll { height: 260vh; position: relative; }
.tablet-sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.25rem, 3vh, 2.25rem);
  padding-block: clamp(2rem, 5vh, 4rem);
  overflow: hidden;
  perspective: 1200px;
}
.tablet-head { transform: translateY(var(--head-y, 0px)); }
.tablet-head .display { margin-bottom: .75rem; }
.tablet-head .lede { margin-bottom: 0; }
.tablet-track {
  display: flex; gap: clamp(.75rem, 1.4vw, 1.1rem);
  padding-inline: clamp(.75rem, 1.4vw, 1.1rem);
  will-change: transform;
  transform: translate3d(var(--track-x, 0px), 0, 0);
}

.tcard {
  flex: none;
  width: clamp(180px, 21vw, 250px);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  background: #0F0F0F;
  display: flex; flex-direction: column;
}
.tcard-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.tcard-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.18); }
.tcard-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(13,13,13,.94));
}
.tcard-body { padding: .8rem .85rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.tcard-name { margin: 0; font-size: var(--fs-body); font-weight: 500; letter-spacing: -.01em; }
.tcard-trait { margin: 0; font-size: 10px; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; }
.tcard-line { margin: .25rem 0 .7rem; font-size: var(--fs-micro); color: var(--text-dim); line-height: 1.45; font-style: italic; }
.tcard-cta {
  margin-top: auto;
  display: block; text-align: center; text-decoration: none;
  padding: .55rem .9rem; border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--gold); background: transparent;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.tcard-cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .tcard-cta:hover { background: var(--gold); color: var(--black); }
}

/* Sem suporte a sticky ou com movimento reduzido, o bloco vira um
   trilho normal em vez de sumir. */
@media (prefers-reduced-motion: reduce) {
  .tablet-scroll { height: auto; }
  .tablet-sticky { position: static; height: auto; }
  .tablet { --tilt: 0deg; --zoom: 1; }
  .tablet-track { overflow-x: auto; transform: none; }
}
@media (max-width: 780px) {
  .tablet-scroll { height: 220vh; }
}

/* ====================== ÓRBITA DO FECHAMENTO ====================== */
.close-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .close-grid { grid-template-columns: 1.05fr .95fr; } }
.close-sec { text-align: left; }
.close-sec .display { text-align: left; }

.orbit-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.orbit {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  display: grid; place-items: center;
}
.orbit-ring {
  position: absolute; inset: 12%;
  border: 1px solid var(--line);
  border-radius: 50%;
  opacity: .55;
}
.orbit-ring-2 { inset: 28%; opacity: .3; }

.orbit-core {
  position: relative; z-index: 2;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #2A2210, #0F0F0F 70%);
  border: 1px solid var(--gold);
  box-shadow: 0 0 44px rgba(212,175,55,.30);
}
.orbit-core-in svg { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round; }

.orbit-item {
  position: absolute; top: 50%; left: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--graphite);
  cursor: pointer; padding: 0;
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1));
  transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.orbit-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.8); transition: filter 300ms var(--ease-out); }
.orbit-item.is-on { border-color: var(--gold); box-shadow: 0 0 22px rgba(212,175,55,.5); }
.orbit-item.is-on img { filter: none; }
@media (hover: hover) and (pointer: fine) {
  .orbit-item:hover { border-color: var(--gold-light); }
  .orbit-item:hover img { filter: none; }
}

@media (max-width: 620px) {
  .orbit { max-width: 300px; }
  .orbit-item { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .orbit-core { width: 66px; height: 66px; }
  .orbit-core-in svg { width: 27px; height: 27px; }
}

/* ---- Anel giratório da órbita ----
   O anel gira e cada rosto contragira na mesma duração, então as
   fotos ficam sempre em pé. Tudo em CSS: nenhum loop de JS rodando
   a cada frame só para uma decoração.                            */
.orbit { container-type: inline-size; }
.orbit-spin { position: absolute; inset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .orbit-spin { animation: orbit-spin 64s linear infinite; }
  .orbit-face { animation: orbit-spin 64s linear infinite reverse; }
  .orbit:hover .orbit-spin, .orbit:hover .orbit-face { animation-play-state: paused; }
}
.orbit-face {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
}
@keyframes orbit-spin { to { rotate: 360deg; } }

/* ============================================================
   v3 · AJUSTES DO LOTE 2
   ============================================================ */

/* ---- Hero: headline quebrada em 4 linhas ---- */
:root { --fs-hero: clamp(1.95rem, 5vw, 3.9rem); }
h1 > span { display: block; }
h1 > span.accent { display: block; }

/* ---- Seta branca em todo CTA ---- */
.shiny span { display: inline-flex; align-items: center; gap: .6rem; }
.ic-arrow {
  flex: none; width: 15px; height: 15px;
  fill: none; stroke: #fff; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 240ms var(--ease-out);
}
.shiny-sm .ic-arrow { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
  .shiny:hover .ic-arrow { transform: translateX(3px); }
}

/* ---- Marca no cabeçalho e no rodapé ---- */
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { width: 34px; height: 34px; flex: none; }
.foot-brand {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none; margin-bottom: 1.5rem;
  color: var(--gold); font-weight: 600; font-size: var(--fs-small); letter-spacing: .22em;
}
.foot-brand img { width: 38px; height: 38px; flex: none; }

/* ---- Microtexto: caixa baixa ocupa menos e respira melhor ---- */
.microtrust {
  text-transform: none;
  letter-spacing: .005em;
  gap: clamp(.9rem, 2.4vw, 2rem);
  font-size: clamp(.72rem, .95vw, .82rem);
}
@media (max-width: 620px) {
  .microtrust { font-size: 10.5px; gap: .85rem; }
  .ic-mt { width: 12px; height: 12px; }
}
@media (max-width: 380px) {
  .microtrust { font-size: 9.5px; gap: .6rem; }
}

/* ============ IDENTIFICAÇÃO + CONVERSA LADO A LADO ============ */
.pains-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 940px) {
  .pains-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
}
.pains .display { max-width: 22ch; }
.pain-list { max-width: none; }

/* ---- Conversa: altura travada e máscara no topo ----
   Antes a seção crescia conforme a conversa andava. Agora o quadro
   tem altura fixa, as mensagens sobem por dentro e as de cima se
   dissolvem na máscara em vez de empurrar o layout.               */
.chat-body {
  height: 400px;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 100%);
}

/* ================= AS MODELOS: TABLET COM PROFUNDIDADE =================
   O trilho não é mais recortado pela moldura. Ele atravessa a cena
   inteira e o JS escreve escala, opacidade e profundidade por card
   conforme a distância até o centro. O resultado é que os cards de
   fora aparecem atrás, menores, e entram em foco ao chegar na
   moldura. Três por vez, para caberem grandes.                      */
.tablet-head { text-align: center; }
.tablet-head .display { margin-inline: auto; max-width: 22ch; }
.tablet-head .lede { margin-inline: auto; max-width: 44rem; }

.tablet-sticky { perspective: 1500px; }

.tablet-stage {
  --frame-w: min(1040px, 92vw);
  --tgap: clamp(.7rem, 1.3vw, 1rem);
  --tpad: 14px;
  position: relative;
  width: 100%;
  transform: rotateX(var(--tilt, 20deg)) scale(var(--zoom, 1.04));
  transform-style: preserve-3d;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.tablet-track {
  display: flex;
  gap: var(--tgap);
  padding-block: 26px;
  padding-left: calc(50% - var(--frame-w) / 2 + var(--tpad));
  transform-style: preserve-3d;
  transform: translate3d(var(--track-x, 0px), 0, 0);
  will-change: transform;
}

.tcard {
  flex: none;
  width: calc((var(--frame-w) - 2 * var(--tgap) - 2 * var(--tpad)) / 3);
  transform: translateZ(var(--z, 0px)) scale(var(--s, 1));
  opacity: var(--o, 1);
  border-radius: 14px;
}
.tcard-line { margin: .3rem 0 .9rem; font-size: var(--fs-small); }
.tcard-name { font-size: var(--fs-h3); }
.tcard-trait { font-size: 11px; }
.tcard-cta { font-size: 11px; padding: .7rem 1rem; }

/* moldura por cima, só o contorno: os cards de fora ficam visíveis */
.tablet-frame {
  position: absolute; inset: 0;
  left: 50%; transform: translateX(-50%);
  width: var(--frame-w);
  border: 4px solid #2E2A22;
  border-radius: 26px;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    0 9px 20px rgba(0,0,0,.29), 0 37px 37px rgba(0,0,0,.26),
    0 84px 50px rgba(0,0,0,.15);
}

@media (max-width: 780px) {
  .tablet-stage { --frame-w: 94vw; }
  .tcard { width: calc((var(--frame-w) - var(--tgap) - 2 * var(--tpad)) / 1.7); }
}
@media (prefers-reduced-motion: reduce) {
  .tablet-stage { transform: none; -webkit-mask-image: none; mask-image: none; }
  .tablet-track { overflow-x: auto; transform: none; padding-left: var(--tpad); }
  .tcard { transform: none; opacity: 1; }
}

/* ===================== ÓRBITA: CLIQUE ABRE =====================
   A escolhida sobe para o topo em destaque, as outras recuam para
   28% de opacidade e o giro pausa. O card abre logo abaixo.       */
.orbit-featured {
  position: absolute; z-index: 5;
  top: -4%; left: 50%;
  width: 88px; height: 88px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 0 44px rgba(212,175,55,.55);
  opacity: 0;
  transform: translateX(-50%) scale(.55);
  transition: opacity 300ms var(--ease-out), transform 440ms var(--ease-out);
  pointer-events: none;
}
.orbit-featured img { width: 100%; height: 100%; object-fit: cover; }
.orbit.is-open .orbit-featured { opacity: 1; transform: translateX(-50%) scale(1); }

.orbit-spin, .orbit-core, .orbit-ring { transition: opacity 320ms var(--ease-out); }
.orbit.is-open .orbit-spin { opacity: .28; animation-play-state: paused; }
.orbit.is-open .orbit-face { animation-play-state: paused; }
.orbit.is-open .orbit-core { opacity: .3; }
.orbit.is-open .orbit-ring { opacity: .18; }

.orbit-card {
  width: min(100%, 380px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  opacity: 0; transform: translateY(10px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  pointer-events: none;
  min-height: 1px;
}
.orbit-card.is-on { opacity: 1; transform: none; pointer-events: auto; }
.orbit-card .oc-trait {
  margin: 0 0 .3rem; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.orbit-card .oc-name { margin: 0 0 .5rem; font-size: var(--fs-h3); font-weight: 400; }
.orbit-card .oc-line { margin: 0 0 1rem; font-size: var(--fs-small); color: var(--text-dim); font-style: italic; line-height: 1.5; }
.orbit-card .oc-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; padding: .6rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--gold); color: var(--gold);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.orbit-card .oc-cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .orbit-card .oc-cta:hover { background: var(--gold); color: var(--black); }
}
.orbit-core-in img { width: 40px; height: 40px; object-fit: contain; }

/* =============== PROVA SOCIAL EM FAIXA, DENTRO DO FAQ =============== */
.proof-box {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.6vw, 2rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(80% 140% at 20% 0%, rgba(212,175,55,.10), transparent 62%), var(--surface-2);
  text-align: left;
}
.proof-box .proof-n {
  flex: none; margin: 0;
  font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 200;
  color: var(--gold); letter-spacing: -.04em; line-height: 1;
}
.proof-box .proof-txt {
  flex: 1 1 240px; margin: 0;
  font-size: var(--fs-small); color: var(--text-mid); line-height: 1.5;
}
@media (max-width: 640px) {
  .proof-box { justify-content: flex-start; }
  .proof-box .shiny-sm { width: 100%; }
}

/* ================== ANCORAGEM CENTRALIZADA ================== */
.anchor-list { max-width: 40rem; }
.anchor-list li {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; padding: .75rem 0; text-align: center;
}
.anchor-list li::before {
  content: ""; position: static; flex: none;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg) translate(1px, -2px);
}

/* ============= HERO EM TELA BAIXA: 4 LINHAS PRECISAM CABER ============= */
@media (min-width: 900px) and (max-height: 860px) {
  .hero-in { padding-top: clamp(3.5rem, 7vh, 5rem); }
  .hero-in h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
  .hero-in .lede { font-size: .98rem; margin-bottom: 1.25rem; }
  .hero-in .microtrust { margin-top: 1rem; }
  .strip-face { width: clamp(42px, 4.6vw, 54px); }
}

/* ---- Microtexto: folga real no celular ----
   Estava com 213, 2px de conteúdo para 213px disponíveis, ou seja, encavalando por 0, 2px. Fonte um pouco maior (9, 5px era ilegível), respiro maior entre os itens e o primeiro rótulo encurtado.     */
@media (max-width: 620px) {
  .microtrust { font-size: 11px; gap: 1rem; }
  .ic-mt { width: 13px; height: 13px; }
}
@media (max-width: 400px) {
  .microtrust { font-size: 10px; gap: .7rem; }
  .ic-mt { width: 12px; height: 12px; }
}

/* ---- Microtexto: nunca esmagar, e versão curta no celular ----
   A causa do encavalamento era dupla: um max-width de 34ch herdado
   da hero e o flex-shrink padrão, que comprimia os itens enquanto o
   nowrap fazia o texto transbordar por cima. Aqui os itens deixam de
   encolher e a copy ganha uma variante curta abaixo de 620px.      */
.hero-in .microtrust { max-width: none; }
.microtrust li { flex: none; }
.mt-short { display: none; }
@media (max-width: 620px) {
  .mt-full { display: none; }
  .mt-short { display: inline; }
  .microtrust { font-size: 11px; gap: .8rem; }
  .ic-mt { width: 13px; height: 13px; }
}

/* Abaixo de 620px o microtexto encolhe e ganha permissão de quebrar.
   Em 375px ou mais ele continua em uma linha; num aparelho estreito
   de verdade (360px e abaixo) ele vai para duas linhas em vez de
   sobrepor. Texto legível vale mais que a linha única a qualquer custo. */
@media (max-width: 620px) {
  .microtrust {
    font-size: 10px;
    column-gap: .6rem;
    row-gap: .45rem;
    flex-wrap: wrap;
  }
  .ic-mt { width: 12px; height: 12px; }
}

/* ============================================================
   v4 · CORREÇÕES DO LOTE 3
   ============================================================ */

/* ---- Bloco amarelo no hover do CTA ----
   O componente original tinha esse brilho em azul, discreto. Em
   dourado e com o mesmo spread ele virava um bloco chapado por
   trás do texto. Aqui vira um brilho baixo, só na base do botão. */
.shiny span::before {
  box-shadow: inset 0 -0.5ex .9rem -.35rem rgba(212, 175, 55, .5);
}
.shiny:is(:hover, :focus-visible) span::before { opacity: .55; }

/* ---- Entrelinha da headline ----
   As duas primeiras linhas usavam a entrelinha do h1 e as duas
   douradas a do .accent, então metade ficava mais colada que a
   outra. Agora todas herdam a mesma, e a folga do descendente
   fica só embaixo do bloco inteiro.                            */
h1 { line-height: 1.12; }
h1 > span, h1 > span.accent { line-height: 1.12; padding-bottom: 0; }
h1 > span:last-child { padding-bottom: .08em; }

/* ---- Como funciona: bloco centralizado, texto à esquerda ---- */
.steps { max-width: 780px; margin-inline: auto; }

/* ============ CARROSSEL: NADA MAIS CORTADO ============
   Dois cortes aconteciam. O título subia 46px por causa de um
   translate decorativo e batia no overflow do sticky. E o card
   tinha altura livre, então o CTA caía fora da tela.
   O translate saiu e o card passou a ter altura relativa à
   viewport, com a foto flexível e o rodapé do card fixo.     */
.tablet-head { transform: none; }

.tablet-sticky {
  justify-content: center;
  gap: clamp(1rem, 2.4vh, 1.75rem);
  padding-block: clamp(1.5rem, 4vh, 3rem);
}
.tablet-head .display { font-size: clamp(1.5rem, 3vw, 2.4rem); margin-bottom: .6rem; }
.tablet-head .lede { font-size: clamp(.9rem, 1.1vw, 1rem); margin-bottom: 0; }

.tablet-track { padding-block: 18px; }

.tcard {
  height: min(52vh, 470px);
  display: flex; flex-direction: column;
}
.tcard-img { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.tcard-body { flex: none; padding: .7rem .8rem .85rem; gap: .2rem; }
.tcard-line {
  margin: .2rem 0 .6rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tcard-cta { padding: .6rem .9rem; }

@media (max-height: 760px) {
  .tablet-head .lede { display: none; }   /* em tela baixa o título já basta */
  .tcard { height: min(56vh, 420px); }
}
/* a folga do descendente era desnecessária: nada recorta o h1, e ela
   deixava a última linha 5px mais alta que as outras */
h1 > span:last-child { padding-bottom: 0; }

/* ============================================================
   v5 · GALERIA NO CARD, LIGHTBOX, ÓRBITA AO CENTRO
   ============================================================ */

/* ============ CARROSSEL DENTRO DO CARD ============ */
.tcard-img { position: relative; cursor: zoom-in; }
.gal-track {
  display: flex; height: 100%;
  transform: translate3d(calc(var(--gi, 0) * -100%), 0, 0);
  transition: transform 420ms var(--ease-out);
}
.gal-track img { flex: none; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .gal-track { transition: none; } }

.gal-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3;
  display: flex; justify-content: center; gap: 5px;
}
.gal-dot {
  width: 5px; height: 5px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,248,231,.35); cursor: pointer;
  transition: background-color 200ms var(--ease-out), width 200ms var(--ease-out);
}
.gal-dot.is-on { background: var(--gold); width: 14px; border-radius: 3px; }

.gal-seta {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: rgba(13,13,13,.55); border: 1px solid var(--line);
  color: var(--gold); cursor: pointer;
  opacity: 0; transition: opacity 220ms var(--ease-out), background-color 200ms var(--ease-out);
}
.gal-seta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gal-ant { left: 7px; }
.gal-prox { right: 7px; }
.gal-lupa {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(13,13,13,.55); border: 1px solid var(--line);
  opacity: 0; transition: opacity 220ms var(--ease-out);
  pointer-events: none;
}
.gal-lupa svg { width: 14px; height: 14px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }

/* no toque as setas ficam sempre visíveis, porque não existe hover */
@media (hover: hover) and (pointer: fine) {
  .tcard-img:hover .gal-seta,
  .tcard-img:hover .gal-lupa { opacity: 1; }
  .gal-seta:hover { background: rgba(13,13,13,.85); }
}
@media (hover: none), (pointer: coarse) {
  .gal-seta, .gal-lupa { opacity: .85; }
}

/* ===================== LIGHTBOX ===================== */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(.75rem, 2vh, 1.25rem);
  padding: clamp(1rem, 4vh, 2.5rem);
  background: rgba(8, 8, 8, .93);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lightbox[hidden] { display: none; }
.lb-palco { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
.lb-img {
  max-width: min(92vw, 620px);
  max-height: 74vh;
  width: auto; height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
.lb-x {
  position: absolute; top: clamp(.75rem, 3vh, 1.5rem); right: clamp(.75rem, 3vw, 1.5rem);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,248,231,.08); border: 1px solid var(--line);
  color: var(--warm-white); font-size: 22px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background-color 200ms var(--ease-out);
}
.lb-nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(13,13,13,.7); border: 1px solid var(--line); color: var(--gold);
  transition: background-color 200ms var(--ease-out);
}
.lb-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lb-ant { left: clamp(-58px, -4vw, -10px); }
.lb-prox { right: clamp(-58px, -4vw, -10px); }
@media (max-width: 720px) { .lb-ant { left: 6px; } .lb-prox { right: 6px; } }
@media (hover: hover) and (pointer: fine) {
  .lb-x:hover, .lb-nav:hover { background: rgba(212,175,55,.2); }
}
.lb-rodape { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.lb-conta { font-size: var(--fs-small); color: var(--text-mid); letter-spacing: .04em; }
.lb-cta {
  display: inline-flex; align-items: center; text-decoration: none;
  padding: .65rem 1.3rem; border-radius: 999px;
  background: var(--gold); color: var(--black);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out);
}
.lb-cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .lb-cta:hover { background: var(--gold-light); } }

/* ============ ÓRBITA: CARD NO MEIO ============
   O card abre no centro do anel, no lugar do coraçãozinho e logo
   abaixo da foto em destaque, em vez de aparecer no fim de tudo. */
.orbit-card {
  position: absolute; z-index: 6;
  top: 52%; left: 50%;
  translate: -50% 0;
  width: min(76%, 300px);
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: rgba(18, 17, 16, .96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  padding: clamp(.9rem, 2vw, 1.15rem);
  text-align: center;
}
.orbit-card .oc-line {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: .8rem;
}
.orbit-card.is-on { translate: -50% 0; }
.orbit.is-open .orbit-core { opacity: 0; }
/* o anel precisa de mais respiro embaixo para o card caber */
.orbit-wrap { gap: 0; }

@media (max-width: 620px) {
  .orbit-card { width: min(88%, 280px); top: 50%; }
}

/* ============ PROVA SOCIAL EM UMA LINHA SÓ ============
   Estava quebrando em duas colunas de texto com o botão sozinho
   embaixo. Agora número, frase e botão dividem a mesma linha.   */
@media (min-width: 760px) {
  .proof-box { flex-wrap: nowrap; text-align: left; }
  .proof-box .proof-txt { flex: 1 1 auto; max-width: none; }
  .proof-box .shiny-sm { flex: none; white-space: nowrap; }
}

/* ============================================================
   v6 · MARQUEE INFINITO DE VERDADE
   O laço morria na metade por causa do `gap`. Com gap, a largura
   total do trilho é 2*conjunto + (2n-1)*espaço, mas a animação vai
   até -50%, que vale conjunto + (n-0, 5)*espaço. Sobra meio espaço
   de diferença e o salto aparece exatamente na emenda.
   Com margem no próprio item, cada um ocupa largura+espaço de forma
   uniforme, o total vira 2*n*(largura+espaço) e -50% cai no ponto
   exato onde a segunda cópia começa. Emenda invisível.
   ============================================================ */
.strip-track { gap: 0; }
.strip-face { margin-inline-end: clamp(.6rem, 1.4vw, 1rem); }

/* ============================================================
   v7 · AJUSTES DO LOTE 4
   ============================================================ */

/* ---- Fecho da tabela centralizado ---- */
.diff-close { text-align: center; margin-inline: auto; max-width: 40ch; }

/* ---- Fogo sobreposto na headline ----
   Margem negativa nos dois lados faz o emoji encostar nas letras em
   vez de ficar entre dois espaços. Rotação leve tira o ar de ícone
   colado e dá movimento. line-height 0 impede que ele empurre a linha. */
.fogo {
  display: inline-block;
  font-style: normal;
  font-size: .82em;
  line-height: 0;
  margin-inline: -.14em;
  transform: rotate(-8deg) translateY(.04em);
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, .55));
  vertical-align: baseline;
}
@media (prefers-reduced-motion: no-preference) {
  .fogo { animation: fogo-pulsa 2.6s var(--ease-in-out) infinite; }
}
@keyframes fogo-pulsa {
  0%, 100% { transform: rotate(-8deg) translateY(.04em) scale(1); }
  50%      { transform: rotate(-5deg) translateY(.02em) scale(1.09); }
}

/* ---- Cards do carrossel mais altos ----
   Estavam cortando no pescoço porque a área da foto era baixa e o
   object-fit: cover comia o resto. Card mais alto, corpo do card mais
   enxuto, e as fotos foram regeradas em 3:4 em vez de 4:5.          */
.tcard { height: min(64vh, 580px); }
.tcard-body { padding: .65rem .8rem .8rem; }
.tcard-line { -webkit-line-clamp: 2; margin: .15rem 0 .55rem; }
@media (max-height: 820px) {
  .tcard { height: min(66vh, 500px); }
}
@media (max-height: 700px) {
  .tcard { height: min(70vh, 430px); }
  .tcard-line { display: none; }        /* em tela baixa a foto vale mais */
}

/* ---- Órbita: card menor para não cobrir as bolinhas ----
   Com 76% de largura ele passava por cima das personagens laterais e
   engolia o clique. Agora sobra anel livre em volta.               */
.orbit-card { width: min(58%, 226px); top: 50%; padding: .8rem .85rem; }
.orbit-card .oc-name { font-size: var(--fs-body); margin-bottom: .4rem; }
.orbit-card .oc-line { -webkit-line-clamp: 2; font-size: var(--fs-micro); margin-bottom: .7rem; }
.orbit-card .oc-cta { padding: .5rem .85rem; font-size: 10px; }
/* as bolinhas ficam sempre acima do card, então nunca perdem o clique */
.orbit-item { z-index: 7; }
.orbit.is-open .orbit-spin { opacity: .55; }   /* .28 escondia demais */
@media (max-width: 620px) {
  .orbit-card { width: min(66%, 200px); }
}

/* ============================================================
   v8 · O CARD PASSA A RESPEITAR A PROPORÇÃO DA FOTO
   O card tinha largura fixa e altura variável, então a área da foto
   virava quase quadrada (0.96) enquanto o arquivo é 3:4 (0.75). O
   object-fit: cover comia topo e base, e por isso as modelos apareciam
   cortadas no pescoço.
   Agora a largura DERIVA da altura disponível, mantendo a área da foto
   sempre perto de 3:4 em qualquer tela. Quantos cards cabem passa a
   variar com a altura da janela, o que é o certo: melhor mostrar dois
   inteiros do que três decapitados.
   ============================================================ */
.tablet-stage {
  --card-h: min(70vh, 640px);
  --card-body: 168px;
  --foto-ar: .78;
}
.tcard {
  height: var(--card-h);
  width: calc((var(--card-h) - var(--card-body)) * var(--foto-ar));
}
.tcard-img { flex: 1 1 auto; min-height: 0; }
.tcard-body { flex: none; height: var(--card-body); overflow: hidden; }
.tcard-line { -webkit-line-clamp: 2; margin: .2rem 0 .6rem; }

@media (max-height: 760px) {
  .tablet-stage { --card-h: min(74vh, 520px); --card-body: 150px; }
  .tcard-line { -webkit-line-clamp: 1; }
}
@media (max-width: 780px) {
  .tablet-stage { --card-h: min(64vh, 480px); --card-body: 150px; }
}

/* ============================================================
   v9 · ÓRBITA: CARD NO CENTRO E BOLINHAS SEMPRE CLICÁVEIS
   Dois problemas somados.

   1. O card usava top:50% sem recuar na vertical, então ele nascia
      no centro e crescia PARA BAIXO, cobrindo as personagens de
      baixo do anel. Agora ele é centrado nos dois eixos.

   2. `opacity` menor que 1 no anel cria contexto de empilhamento.
      Com isso as bolinhas ficavam presas dentro da camada do anel e
      o card, com z-index maior, passava por cima de todas. O anel
      inteiro sobe acima do card para devolver o clique.
   ============================================================ */
.orbit-spin { z-index: 8; }
.orbit-card { top: 50%; translate: -50% -50%; z-index: 6; }
.orbit-card.is-on { translate: -50% -50%; }

/* card enxuto: precisa caber dentro do anel sem encostar nas fotos */
.orbit-card { width: min(52%, 200px); padding: .75rem .8rem; }
.orbit-card .oc-trait { font-size: 9px; letter-spacing: .1em; }
.orbit-card .oc-name { font-size: var(--fs-small); margin-bottom: .35rem; }
.orbit-card .oc-line { -webkit-line-clamp: 2; font-size: 10.5px; margin-bottom: .6rem; line-height: 1.4; }
.orbit-card .oc-cta { padding: .45rem .8rem; font-size: 9.5px; }

/* o destaque sai do topo: com o card no centro ele brigaria por espaço */
.orbit-featured { top: -7%; width: 76px; height: 76px; }

@media (max-width: 620px) {
  .orbit-card { width: min(60%, 176px); }
  .orbit-featured { width: 62px; height: 62px; }
}

/* ============================================================
   v10 · IMAGEM DA HERO, MOLDURA, CARD E ÓRBITA
   ============================================================ */

/* ---- Hero: a foto foi composta com o lado esquerdo escuro para o
   texto e o grupo à direita. O enquadramento respeita isso: ancora
   em 72% da largura para o grupo nunca sair, e o véu é lateral em
   vez de radial, pesado à esquerda e leve à direita.            ---- */
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { object-position: 72% center; }

.hero::after {
  background:
    linear-gradient(90deg,
      rgba(13,13,13,.97) 0%,
      rgba(13,13,13,.90) 26%,
      rgba(13,13,13,.52) 48%,
      rgba(13,13,13,.26) 72%,
      rgba(13,13,13,.34) 100%),
    linear-gradient(180deg,
      rgba(13,13,13,.60) 0%,
      rgba(13,13,13,.10) 26%,
      rgba(13,13,13,.10) 58%,
      rgba(13,13,13,.90) 90%,
      var(--black) 100%),
    linear-gradient(115deg, rgba(212,175,55,.08), transparent 46%);
}
@media (max-width: 760px) {
  /* no retrato o grupo ocupa a tela toda, então o véu precisa ser
     vertical e mais forte para o texto continuar legível */
  .hero-media img { object-position: center 28%; }
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(13,13,13,.92) 0%,
        rgba(13,13,13,.72) 34%,
        rgba(13,13,13,.80) 62%,
        rgba(13,13,13,.96) 88%,
        var(--black) 100%);
  }
}

/* ---- Moldurinha dourada nas fotinhas da faixa ---- */
.strip-face {
  border: 1px solid rgba(212, 175, 55, .55);
  box-shadow: 0 0 0 1px rgba(13,13,13,.6), 0 2px 12px rgba(0,0,0,.5);
  filter: grayscale(.18) brightness(.92);
}

/* ---- Fogo no fim da primeira frase ---- */
.fogo { margin-inline: .12em 0; }

/* ---- Lede da hero com o fecho em negrito ---- */
.hero-in .lede strong { color: var(--warm-white); font-weight: 600; }

/* ============ CARD DO CARROSSEL ============
   Antes a altura do card mandava e a foto era o que sobrava, então
   ao crescer a foto o rodapé com nome e CTA era espremido. Agora a
   ALTURA DA FOTO é a medida de origem: a largura do card vem dela e
   a altura total é foto + rodapé. Assim a foto mantém o tamanho e o
   rodapé nunca perde espaço.                                      */
.tablet-stage {
  --foto-h: clamp(230px, 44vh, 430px);
  --card-body: 172px;
  --foto-ar: .78;
}
.tcard {
  width: calc(var(--foto-h) * var(--foto-ar));
  height: calc(var(--foto-h) + var(--card-body));
}
.tcard-img { flex: none; height: var(--foto-h); }
.tcard-body {
  flex: none; height: var(--card-body);
  display: flex; flex-direction: column;
  padding: .75rem .85rem .9rem;
  overflow: hidden;
}
.tcard-line { -webkit-line-clamp: 2; margin: .2rem 0 .65rem; }
.tcard-cta { margin-top: auto; }

@media (max-height: 780px) {
  .tablet-stage { --foto-h: clamp(200px, 40vh, 340px); --card-body: 150px; }
  .tcard-line { -webkit-line-clamp: 1; }
}
@media (max-width: 780px) {
  .tablet-stage { --foto-h: clamp(220px, 38vh, 360px); --card-body: 156px; }
}

/* ============ ÓRBITA: CARD ABAIXO E CLIQUES LIVRES ============
   O card voltou para fora do anel, como na primeira versão.

   E o motivo dos CTAs não funcionarem: `.orbit-spin` é uma camada
   `inset: 0` que cobre o anel inteiro. Ao subir o z-index dela para
   devolver o clique das bolinhas, ela passou a interceptar tudo que
   estivesse atrás. A camada agora é transparente ao ponteiro e só
   as bolinhas recebem clique.                                     */
.orbit-spin { pointer-events: none; }
.orbit-item { pointer-events: auto; }

.orbit-card {
  position: static;
  translate: none;
  width: min(100%, 340px);
  margin-top: clamp(.75rem, 2vw, 1.1rem);
  padding: clamp(1rem, 2.2vw, 1.3rem);
  text-align: center;
  height: 0; overflow: hidden; border-width: 0; padding-block: 0;
  transition: opacity 260ms var(--ease-out);
}
.orbit-card.is-on {
  height: auto; overflow: visible;
  border-width: 1px;
  padding-block: clamp(1rem, 2.2vw, 1.3rem);
  translate: none;
}
.orbit-card .oc-trait { font-size: 10px; }
.orbit-card .oc-name { font-size: var(--fs-h3); margin-bottom: .45rem; }
.orbit-card .oc-line { -webkit-line-clamp: 3; font-size: var(--fs-small); margin-bottom: .9rem; }
.orbit-card .oc-cta { padding: .6rem 1.1rem; font-size: 11px; }

.orbit-wrap { gap: 0; }
/* com o card fora do anel, o destaque volta para o topo sem disputa */
.orbit-featured { top: -6%; width: 84px; height: 84px; }
.orbit.is-open .orbit-spin { opacity: .5; }

/* ============================================================
   v11 · VÍDEO VERTICAL NA DOBRA "VOCÊ CONTA UMA VEZ"
   Fachada em vez de iframe direto: o player do YouTube custa quase
   1 MB e três conexões de terceiro só para existir na página. Aqui
   entra um poster de 30 KB, e o iframe só é criado no clique.
   ============================================================ */
.talk-shot { max-width: 340px; }
.yt-facade {
  position: relative; display: block; width: 100%; padding: 0;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--black); overflow: hidden; cursor: pointer;
  aspect-ratio: 9 / 16;
  transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; }
.yt-facade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.18), transparent 38%, rgba(13,13,13,.55));
}
.yt-play {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; z-index: 2;
  background: rgba(212,175,55,.94);
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
  transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out);
}
.yt-play svg { width: 26px; height: 26px; fill: var(--black); margin-left: 3px; }
.yt-facade:active .yt-play { transform: translate(-50%,-50%) scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .yt-facade:hover { border-color: var(--gold); box-shadow: 0 0 60px rgba(212,175,55,.18); }
  .yt-facade:hover .yt-play { transform: translate(-50%,-50%) scale(1.08); background: var(--gold-light); }
}
.talk-shot iframe {
  display: block; width: 100%; aspect-ratio: 9 / 16; border: 0;
  border-radius: 14px; background: #000;
}

/* ============================================================
   v12 · AJUSTES DO LOTE 6 + POLIDA
   ============================================================ */

/* ---- Hero: fora o degradê horizontal ----
   A foto já foi composta com o lado esquerdo escuro, então o véu
   lateral era redundante e lavava o grupo. Sobra só o degradê
   vertical, que é estrutural: emenda a hero na dobra seguinte.   */
.hero::after {
  background:
    linear-gradient(180deg,
      rgba(13,13,13,.55) 0%,
      rgba(13,13,13,.06) 24%,
      rgba(13,13,13,.06) 60%,
      rgba(13,13,13,.88) 90%,
      var(--black) 100%);
}
@media (max-width: 760px) {
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(13,13,13,.90) 0%,
        rgba(13,13,13,.70) 34%,
        rgba(13,13,13,.80) 62%,
        rgba(13,13,13,.96) 88%,
        var(--black) 100%);
  }
}

/* ---- Logos borrados na metade da escala, inteiros ----
   Estava em `cover` e cortava. Agora mostra a imagem completa { width: min(30%, 380px); height: auto; top: 6%; right: 3%; opacity: .5; }

/* ---- Fundo da dobra "em breve" ---- */
.soon-sec { position: relative; overflow: hidden; }
.soon-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; }
.soon-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 45%, #000 25%, transparent 78%);
  mask-image: radial-gradient(120% 95% at 50% 45%, #000 25%, transparent 78%);
}
.soon-sec > .wrap { position: relative; z-index: 1; }

/* ---- Barra de rolagem: só o polegar dourado ---- */
html { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 999px;
  border: 3px solid var(--black);   /* afina o polegar sem pintar a calha */
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-light); }

/* ============ POLIDA ============
   Tudo que se aperta precisa responder ao aperto. Faltava feedback
   tátil nestes, que são clicáveis mas não afundavam no toque.    */
.orbit-item { transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out),
                           transform 150ms var(--ease-out); }
.orbit-item:active { transform: translate(var(--x,0), var(--y,0)) scale(.92); }
.gal-dot { transition: background-color 200ms var(--ease-out), width 200ms var(--ease-out),
                           transform 140ms var(--ease-out); }
.gal-dot:active { transform: scale(.8); }
.tcard-img { transition: transform 160ms var(--ease-out); }
.tcard-img:active { transform: scale(.985); }
.q summary { transition: color 200ms var(--ease-out), transform 140ms var(--ease-out); }
.q summary:active { transform: scale(.995); }
.brand, .foot-brand { transition: transform 150ms var(--ease-out), opacity 200ms var(--ease-out); }
.brand:active, .foot-brand:active { transform: scale(.97); }

/* a galeria deslizava em 420ms; acima de ~300ms uma troca de foto
   começa a parecer lenta em vez de suave */
.gal-track { transition: transform 300ms var(--ease-out); }

/* o lightbox aparecia do nada. nada no mundo real surge do zero:
   entra de 0.97 com opacidade, que é o suficiente para ler como
   "veio de algum lugar" sem atrasar a visualização */
@media (prefers-reduced-motion: no-preference) {
  .lightbox:not([hidden]) { animation: lb-fundo 200ms var(--ease-out); }
  .lightbox:not([hidden]) .lb-palco { animation: lb-entra 260ms var(--ease-out); }
}
@keyframes lb-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .orbit-item, .gal-dot, .tcard-img, .q summary, .brand, .foot-brand { transition: none; }
  .orbit-item:active, .gal-dot:active, .tcard-img:active, .q summary:active, .brand:active, .foot-brand:active { transform: none; }
}

/* o rodapé do card precisa de espaço para nome, traço, frase de duas
   linhas e o CTA. A altura da foto agora é calculada em cima disso. */
.tablet-stage { --card-body: 190px; }
.tcard-line { -webkit-line-clamp: 2; }
@media (max-height: 780px) {
  .tablet-stage { --card-body: 178px; }
  .tcard-line { -webkit-line-clamp: 2; }
}

/* ============================================================
   v13 · CORREÇÕES DO LOTE 7
   ============================================================ */

/* ---- Hero: imagem a 70% ---- */
.hero-media { opacity: .7; }

/* ---- Logos de volta à linha do texto ----
   Eu tinha jogado a imagem para o canto superior direito em posição
   absoluta, o que descolou ela do texto e deixou buraco em cima e
   embaixo. Volta a ser uma linha horizontal: texto à esquerda, logos à direita, os dois centrados no mesmo eixo.            */
.diff-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.diff-copy { max-width: 44rem; }
.diff-logos { width: clamp(220px, 26vw, 420px); opacity: .55; }
.diff-logos img {
  width: 100%; height: auto; display: block;
  filter: blur(.5px) grayscale(1) contrast(.95);
  -webkit-mask-image: radial-gradient(88% 88% at 50% 50%, #000 52%, transparent 92%);
  mask-image: radial-gradient(88% 88% at 50% 50%, #000 52%, transparent 92%);
}
@media (max-width: 860px) {
  .diff-topo { grid-template-columns: 1fr; }
  .diff-logos { width: min(70%, 340px); margin-inline: auto; }
}

/* ---- "Em breve": aproxima o bloco de baixo ----
   O respiro entre o fim do texto e o quadro seguinte estava grande
   demais e quebrava a leitura. */
.soon-sec { padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.vault-sec { padding-top: clamp(2rem, 4vw, 3.25rem); }

/* ---- Carrossel: a frase inteira, sem reticências ----
   O line-clamp de 2 linhas literalmente cortava a frase. As mais
   longas têm 90 caracteres e precisam de 4 linhas na largura do
   card. O rodapé cresce para acomodar e a altura da foto se ajusta
   sozinha, porque ela é calculada a partir do que sobra.        */
.tcard-line { -webkit-line-clamp: 4; margin: .25rem 0 .7rem; line-height: 1.4; }
.tablet-stage { --card-body: 224px; }
@media (max-height: 780px) {
  .tablet-stage { --card-body: 210px; }
  .tcard-line { -webkit-line-clamp: 4; }
}

/* ============================================================
   v14 · CORTE SECO DA DOBRA "EM BREVE"
   Não era cor de fundo: soon, vault e body são todos #0D0D0D.

   A caixa da imagem tem proporção 2, 83 e o arquivo 1, 78, então o
   `cover` descartava cerca de 37% da altura, justamente a parte de
   baixo onde estava o degradê feito no arquivo. Sem ele, a imagem
   terminava numa linha reta na borda da seção.

   A máscara vertical resolve por CSS: garante a dissolução no topo
   e na base independente de quanto o `cover` recortar.
   ============================================================ */
.soon-bg img {
  object-position: center 42%;
  -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.55) 14%, #000 34%, #000 62%, rgba(0,0,0,.5) 84%, transparent 100%);
  mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.55) 14%, #000 34%, #000 62%, rgba(0,0,0,.5) 84%, transparent 100%);
}

/* ============================================================
   v15 · AJUSTES DE MOBILE
   ============================================================ */

/* ---- Selo pequeno acima do rótulo, nos dois tamanhos ---- */
.hero-mark {
  width: 46px; height: 46px;
  margin: 0 0 clamp(.9rem, 2vw, 1.15rem);
  opacity: .95;
}

/* ============================================================
   HERO NO CELULAR
   Deixa de ser texto sobre a foto e vira dois blocos: imagem em
   cima, copy embaixo, centralizada e ancorada na base. A foto usa
   um recorte retangular próprio, com o homem no centro.
   ============================================================ */
@media (max-width: 760px) {
  .hero {
    display: flex; flex-direction: column;
    min-height: 100svh;
  }

  .hero-media {
    position: relative; inset: auto;
    flex: none; height: 38svh; min-height: 240px;
    opacity: 1; z-index: 0;
  }
  .hero-media img { object-position: center 32%; }
  /* dissolve a base da foto no fundo, sem linha de corte */
  .hero-media picture, .hero-media img {
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  }
  .hero::after { display: none; }

  .hero-in {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 0 var(--gutter) clamp(6.5rem, 13vh, 8rem);
    margin-top: -6svh;               /* encosta a copy na foto */
  }
  .hero-mark { margin-inline: auto; width: 40px; height: 40px; }
  .hero-in h1, .hero-in .lede { max-width: 100%; }
  .cta-row { flex-direction: column; gap: .7rem; width: 100%; }
  .cta-row .shiny { width: 100%; }
  .microtrust { justify-content: center; }
}

/* ---- Navbar: logo menor para o CTA não quebrar em duas linhas ---- */
@media (max-width: 620px) {
  .brand img { width: 26px; height: 26px; }
  .wordmark { font-size: .68rem; letter-spacing: .12em; }
  .head-in { padding-inline: 1rem; gap: .6rem; }
  .shiny-sm { white-space: nowrap; padding: .58rem 1rem; font-size: 10px; }
  .shiny-sm .ic-arrow { width: 11px; height: 11px; }
}

/* ---- Logos borrados menores no celular ----
   Estavam grandes demais em cima do texto e o borrão comia a leitura
   dos dois. Menor e menos borrado resolve os dois problemas.        */
@media (max-width: 860px) {
  .diff-logos { width: min(48%, 230px); opacity: .4; }
  .diff-logos img { filter: blur(.3px) grayscale(1) contrast(1); }
}

/* ============================================================
   CARROSSEL NO CELULAR: SETA EM VEZ DE SCROLL
   Prender o carrossel ao scroll da página funciona no desktop e
   atrapalha no celular, porque rolar a página e avançar o trilho
   viram o mesmo gesto. Aqui o bloco volta a ser normal e a
   navegação passa a ser por seta.
   ============================================================ */
.tnav { display: none; }

@media (max-width: 900px) {
  .tablet-scroll { height: auto; }
  .tablet-sticky {
    position: static; height: auto;
    perspective: none;
    padding-block: clamp(1.5rem, 5vw, 2.5rem);
  }
  .tablet-stage {
    transform: none;
    -webkit-mask-image: none; mask-image: none;
    --foto-h: clamp(300px, 62vw, 420px) !important;
    --card-body: 214px;
  }
  .tablet-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    transform: none !important;
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .tablet-track::-webkit-scrollbar { display: none; }
  .tcard {
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
  }
  .tablet-frame { display: none; }

  .tnav {
    display: flex; flex-direction: column; align-items: center;
    gap: .7rem; margin-top: clamp(1rem, 3vw, 1.5rem);
  }
  .tnav-linha { display: flex; align-items: center; gap: 1.1rem; }
  .tnav-btn {
    width: 46px; height: 46px; border-radius: 50%; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: transparent; border: 1px solid var(--line); color: var(--gold);
    transition: background-color 200ms var(--ease-out), transform 150ms var(--ease-out);
  }
  .tnav-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
                  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .tnav-btn:active { transform: scale(.92); }
  .tnav-btn[disabled] { opacity: .3; }
  .tnav-conta {
    font-size: var(--fs-small); color: var(--text-mid);
    letter-spacing: .08em; font-variant-numeric: tabular-nums;
    min-width: 4.5em; text-align: center;
  }
  .tnav-dica {
    margin: 0; font-size: var(--fs-micro); color: var(--text-dim);
    letter-spacing: .04em;
  }
  /* no celular as setas da galeria ficam sempre visíveis */
  .gal-seta, .gal-lupa { opacity: .9; }
}

/* ---- "Em breve": a foto sumia no celular ----
   A seção fica bem mais alta no retrato, e a máscara radial em
   percentual espalhava a imagem até quase nada. Máscara vertical e
   opacidade maior devolvem a presença.                            */
@media (max-width: 860px) {
  .soon-bg { opacity: .62; }
  .soon-bg img {
    object-position: center 30%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
  }
}

/* Hero do celular estava 73px acima da dobra. O corte vem da foto, do respiro inferior e do selo, sem mexer no tamanho do texto. */
@media (max-width: 760px) {
  .hero-media { height: 32svh; min-height: 210px; }
  .hero-mark  { width: 34px; height: 34px; margin-bottom: .7rem; }
  .hero-in    { padding-bottom: clamp(5.5rem, 11vh, 6.6rem); margin-top: -7svh; }
  .hero-in .lede { margin-bottom: 1.1rem; }
  .microtrust { margin-top: .9rem; }
}

/* ============================================================
   v16 · IMAGEM PRÓPRIA DE MOBILE E LOGOS MAIORES
   ============================================================ */

/* A arte de mobile já vem com o degradê na base e a proporção 1.8, mais larga que a caixa, então o `cover` corta só as laterais e a
   altura inteira aparece. A máscara que eu tinha posto duplicava
   esse degradê e escurecia demais: sai de cena.                  */
@media (max-width: 760px) {
  .hero-media picture, .hero-media img {
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-media img { object-position: center center; }
  .hero-media { height: 34svh; min-height: 220px; }
}

/* Logos borrados um pouco maiores, preenchendo mais atrás do texto */
.diff-logos { width: clamp(280px, 34vw, 520px); opacity: .58; }
@media (max-width: 860px) {
  .diff-logos { width: min(62%, 300px); opacity: .44; }
}

/* ============================================================
   v17 · TRAVA HORIZONTAL DA MARCA NA HERO
   Não existe arquivo de logo horizontal: o próprio site do cliente
   compõe ícone + palavra ao lado, que é o "logo secundário" descrito
   no manual. Reproduzido aqui, com o peso 600 que o manual pede.
   Se aparecer o SVG horizontal, é só trocar por uma <img> só.
   ============================================================ */
.hero-mark {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 clamp(.9rem, 2vw, 1.2rem);
  opacity: .95;
}
.hero-mark img { width: 44px; height: 44px; flex: none; }
.hero-mark-nome {
  font-weight: 600;
  font-size: clamp(.82rem, 1.5vw, 1.05rem);
  letter-spacing: .2em;
  color: var(--gold);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hero-mark { gap: .5rem; margin-bottom: .7rem; }
  .hero-mark img { width: 34px; height: 34px; }
  .hero-mark-nome { font-size: .76rem; letter-spacing: .16em; }
}
/* a regra antiga do selo travava a caixa em 46x46 e cortava a palavra */
.hero-mark { width: auto; height: auto; }

/* ============================================================
   v18 · AJUSTES FINOS
   ============================================================ */

/* Trava da marca 20% menor, só no desktop (o mobile já estava bom) */
@media (min-width: 761px) {
  .hero-mark { gap: .48rem; }
  .hero-mark img { width: 35px; height: 35px; }
  .hero-mark-nome { font-size: clamp(.66rem, 1.2vw, .84rem); letter-spacing: .18em; }
}

/* Microtexto da hero no celular.
   Os três itens somam 358px com os gaps, e só existem 335px. Caber em
   uma linha exigiria fonte abaixo do legível, então as duas linhas
   passam a ser deliberadas: centralizadas e com respiro de verdade
   entre elas, em vez dos 7px que faziam parecer encavalado.        */
@media (max-width: 620px) {
  .hero-in .microtrust {
    justify-content: center;
    column-gap: .9rem;
    row-gap: .62rem;
    font-size: 10.5px;
  }
  .hero-in .microtrust li { gap: .38rem; }
  /* devolve os poucos pixels que o respiro custou */
  .hero-in { padding-bottom: clamp(5.2rem, 10.4vh, 6.3rem); }
}

/* ============================================================
   v19 · DOBRA DA TABELA COMPARATIVA, NO DESKTOP
   Erro meu: ao tirar a imagem da posição absoluta e colocá-la numa
   coluna do grid, ela passou a roubar largura do texto. Com 490px
   dos 1200px indo para a imagem, sobraram 526px e o título quebrou
   em três linhas.

   Aqui o texto volta a ocupar a largura inteira e a imagem volta a
   ficar ATRÁS dele, encostada à direita e centrada no mesmo eixo.
   A quebra do título passa a ser fixa em duas linhas, na divisa das
   duas frases, em vez de depender da largura que sobrou.
   Só no desktop: o empilhamento do celular continua como estava.
   ============================================================ */
@media (min-width: 861px) {
  .diff-topo { display: block; position: relative; }

  .diff-copy { position: relative; z-index: 1; max-width: none; }
  .diff-copy .lede { max-width: var(--measure); }

  /* duas linhas, quebrando entre as frases */
  #t-diff .accent { display: block; }

  .diff-logos {
    position: absolute; z-index: 0; pointer-events: none;
    right: 0; top: 50%; translate: 0 -50%;
    width: clamp(300px, 31vw, 450px);
    opacity: .5;
  }
}