/* ═══════════════════════════════════════════════════════════════════
   Vistoria 360 — noir técnico
   Direção: instrumento óptico de precisão. Fundo de sala escura, luz
   âmbar de lente, tipografia serifada de alto contraste contra mono.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --vazio:    #07090c;
  --breu:     #0b0e13;
  --tinta:    #11151d;
  --fumaca:   #1b2029;
  --nevoa:    #7d8798;
  --osso:     #ece7dd;
  --ambar:    #e9a63f;
  --ambar-cl: #f6c877;
  --menta:    #63cfa2;
  --coral:    #e2604f;
  --petroleo: #123240;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Archivo", "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --borda: 1px solid rgb(236 231 221 / .09);
  --raio: 3px;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --max: 1320px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

/* `clip` em vez de `hidden`: não cria contexto de rolagem, então position:fixed
   da nav e do grão continua se comportando. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--vazio);
  color: var(--osso);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--ambar); color: var(--vazio); }

/* Foco visível de verdade — o tema é escuro, o anel precisa gritar. */
:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── atmosfera ─────────────────────────────────────────────────── */

.grao {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 9999;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: tremula 6s steps(5) infinite;
}
@keyframes tremula {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-2%, 1%) }
  40% { transform: translate(1%, -2%) }
  60% { transform: translate(-1%, -1%) }
  80% { transform: translate(2%, 1%) }
}

/* grade de retícula, como papel milimetrado de laboratório */
.reticula {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgb(236 231 221 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(236 231 221 / .035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 5%, transparent 75%);
}

/* ── navegação ─────────────────────────────────────────────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem var(--gutter);
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgb(7 9 12 / .92), rgb(7 9 12 / .55));
  border-bottom: 1px solid transparent;
  transition: border-color .4s, padding .4s var(--ease);
}
.nav.encolhida { padding-block: .7rem; border-bottom-color: rgb(236 231 221 / .08); }

.marca { display: flex; align-items: center; gap: .7rem; }
.marca__glifo {
  position: relative; width: 22px; height: 22px; flex: none;
  transform-style: preserve-3d;
  animation: gira-glifo 14s linear infinite;
}
.marca__glifo span {
  position: absolute; inset: 0;
  border: 1px solid var(--ambar);
  border-radius: 50%;
}
.marca__glifo span:nth-child(1) { transform: rotateY(0deg); }
.marca__glifo span:nth-child(2) { transform: rotateY(60deg); opacity: .6; }
.marca__glifo span:nth-child(3) { transform: rotateY(120deg); opacity: .35; }
@keyframes gira-glifo { to { transform: rotateY(360deg) } }

.marca__texto {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.marca__texto em {
  font-style: normal; color: var(--ambar);
  font-variation-settings: "SOFT" 40;
}

.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--nevoa);
  position: relative; padding-block: .3rem;
  transition: color .3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ambar);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__links a:hover { color: var(--osso); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 900px) { .nav__links { display: none } }

/* ── botões ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .06em;
  padding: .78rem 1.35rem;
  border-radius: var(--raio);
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background-color .35s, color .35s, border-color .35s, box-shadow .35s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--solido {
  background: var(--ambar); color: var(--vazio); font-weight: 500;
  box-shadow: 0 0 0 0 rgb(233 166 63 / .5);
}
.btn--solido:hover {
  background: var(--ambar-cl);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -12px rgb(233 166 63 / .55);
}

.btn--vazado { border-color: rgb(236 231 221 / .2); color: var(--osso); }
.btn--vazado:hover { border-color: var(--ambar); color: var(--ambar); transform: translateY(-2px); }

.btn--fino { border: 1px solid rgb(233 166 63 / .45); color: var(--ambar); padding: .55rem 1.05rem; font-size: .72rem; }
.btn--fino:hover { background: var(--ambar); color: var(--vazio); }

.btn--grande { padding: 1.05rem 2rem; font-size: .85rem; }

/* ── hero ──────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 100svh;
  padding: 9rem var(--gutter) 5rem;
  max-width: var(--max); margin-inline: auto;
  overflow: clip; /* a aura estoura de propósito; o corte fica aqui */
}

.hero__aura {
  position: absolute; top: 12%; right: -10%;
  width: min(70vw, 780px); aspect-ratio: 1;
  background: radial-gradient(circle, rgb(233 166 63 / .13), rgb(18 50 64 / .12) 42%, transparent 68%);
  filter: blur(30px);
  pointer-events: none;
  animation: pulsa-aura 9s ease-in-out infinite;
}
@keyframes pulsa-aura {
  0%,100% { transform: scale(1); opacity: .9 }
  50% { transform: scale(1.09); opacity: 1 }
}

.etiqueta {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .73rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--nevoa);
  margin: 0 0 1.8rem;
}
.etiqueta__ponto {
  width: 6px; height: 6px; border-radius: 50%; background: var(--menta);
  box-shadow: 0 0 0 0 rgb(99 207 162 / .7);
  animation: pisca 2.4s ease-out infinite;
}
@keyframes pisca {
  0% { box-shadow: 0 0 0 0 rgb(99 207 162 / .6) }
  70% { box-shadow: 0 0 0 9px rgb(99 207 162 / 0) }
  100% { box-shadow: 0 0 0 0 rgb(99 207 162 / 0) }
}

.hero__titulo {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.028em;
  margin: 0 0 1.9rem;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.hero__titulo .linha { display: block; }
.hero__titulo em {
  font-style: italic;
  color: var(--ambar);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

.hero__sub {
  max-width: 46ch;
  color: var(--nevoa);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  margin: 0 0 2.6rem;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 3.4rem; }

.hero__marcas {
  display: flex; flex-wrap: wrap; gap: 2.6rem;
  margin: 0; padding-top: 1.9rem;
  border-top: var(--borda);
}
.hero__marcas dt {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--nevoa); margin-bottom: .3rem;
}
.hero__marcas dd {
  margin: 0; font-family: var(--serif);
  font-size: 1.28rem; color: var(--osso);
}

/* ── lente 3D ──────────────────────────────────────────────────── */

.lente {
  position: relative;
  display: grid; place-items: center;
  min-height: min(60vw, 520px);
  perspective: 1100px;
}

.lente__palco {
  position: relative;
  width: min(46vw, 420px); aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(64deg) rotateZ(0deg);
  animation: roda-palco 34s linear infinite;
}
@keyframes roda-palco { to { transform: rotateX(64deg) rotateZ(360deg) } }

.anel {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(233 166 63 / .3);
  transform-style: preserve-3d;
}
.anel--1 { inset: 0;   border-color: rgb(233 166 63 / .42); animation: sobe 7s ease-in-out infinite alternate; }
.anel--2 { inset: 11%; border-color: rgb(236 231 221 / .16); transform: translateZ(26px); animation: sobe 9s ease-in-out infinite alternate-reverse; }
.anel--3 { inset: 23%; border-color: rgb(233 166 63 / .28); transform: translateZ(54px); animation: sobe 11s ease-in-out infinite alternate; }
.anel--4 {
  inset: 35%; border-color: rgb(99 207 162 / .3);
  transform: translateZ(84px);
  border-style: dashed;
  animation: contra-gira 18s linear infinite;
}
@keyframes sobe { to { transform: translateZ(var(--z, 40px)) } }
@keyframes contra-gira { to { transform: translateZ(84px) rotate(-360deg) } }

.nucleo {
  position: absolute; inset: 41%;
  border-radius: 50%;
  /* contra-rotaciona o tombo do palco: sem isso a esfera vira elipse */
  transform: translateZ(120px) rotateX(-64deg);
  background: radial-gradient(circle at 35% 30%, var(--ambar-cl), var(--ambar) 45%, #a35f10 100%);
  box-shadow:
    0 0 40px rgb(233 166 63 / .55),
    0 0 120px rgb(233 166 63 / .28),
    inset 0 0 18px rgb(255 255 255 / .35);
  overflow: hidden;
}
.nucleo__brilho {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .8), transparent 45%);
}
.nucleo__varredura {
  position: absolute; left: -50%; right: -50%; height: 30%;
  background: linear-gradient(to bottom, transparent, rgb(255 255 255 / .55), transparent);
  animation: varre 3.2s ease-in-out infinite;
}
@keyframes varre {
  0%,100% { transform: translateY(-160%) }
  50% { transform: translateY(260%) }
}

.orbita { position: absolute; inset: 0; transform-style: preserve-3d; }
.orbita i {
  position: absolute; top: 50%; left: 50%;
  width: 7px; height: 7px; margin: -3.5px;
  border-radius: 50%;
  background: var(--osso);
  box-shadow: 0 0 12px rgb(236 231 221 / .8);
  transform: rotate(var(--a)) translateX(min(23vw, 210px)) translateZ(60px);
  animation: pulsa-satelite 4s ease-in-out infinite;
  animation-delay: calc(var(--a) / 90deg * -1s);
}
@keyframes pulsa-satelite { 50% { opacity: .25 } }

.lente__base {
  position: absolute; bottom: 8%;
  width: min(44vw, 400px); height: 60px;
  background: radial-gradient(ellipse, rgb(233 166 63 / .22), transparent 70%);
  filter: blur(18px);
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 7.5rem; }
  .lente { order: -1; min-height: 300px; }
  .lente__palco { width: min(70vw, 300px); }
  .orbita i { transform: rotate(var(--a)) translateX(min(35vw, 150px)) translateZ(40px); }
}

/* ── faixa corrida ─────────────────────────────────────────────── */

.faixa {
  position: relative; z-index: 2;
  border-block: var(--borda);
  background: rgb(11 14 19 / .6);
  overflow: hidden;
  padding-block: .95rem;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.faixa__trilho {
  display: flex; align-items: center; gap: 1.6rem;
  width: max-content;
  animation: corre 46s linear infinite;
}
.faixa:hover .faixa__trilho { animation-play-state: paused; }
.faixa__trilho span {
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--nevoa);
}
.faixa__trilho i { color: var(--ambar); font-style: normal; font-size: .5rem; }
@keyframes corre { to { transform: translateX(-50%) } }

/* ── seções ────────────────────────────────────────────────────── */

.secao {
  position: relative; z-index: 2;
  max-width: var(--max); margin-inline: auto;
  padding: clamp(4rem, 7.5vw, 6.5rem) var(--gutter);
}

/* halo frio ao fundo de algumas seções, para o miolo não virar um vão preto */
.secao--halo::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 8%; translate: -50% 0;
  width: min(100%, 1000px); aspect-ratio: 3 / 1;
  background: radial-gradient(ellipse, rgb(18 50 64 / .55), transparent 68%);
  filter: blur(50px); pointer-events: none;
}

.secao__cabeca { max-width: 62ch; margin-bottom: clamp(3rem, 6vw, 4.5rem); }

.olho {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 1.1rem;
}

.titulo {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.04; letter-spacing: -.022em;
  margin: 0 0 1.4rem;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.titulo em { font-style: italic; color: var(--ambar); }
.titulo--sm { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }

.chamada { color: var(--nevoa); max-width: 56ch; margin: 0; font-size: 1.04rem; }

.mini-olho {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--nevoa); margin: 0 0 .8rem;
}

/* ── dossiê ────────────────────────────────────────────────────── */

.dossie__palco {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.folhas {
  position: relative;
  aspect-ratio: 4 / 3;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.folha {
  position: absolute;
  border-radius: 6px;
  border: var(--borda);
  background: linear-gradient(155deg, rgb(27 32 41 / .96), rgb(11 14 19 / .97));
  padding: 1.5rem;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .9);
  transition: transform .8s var(--ease), box-shadow .6s;
  transform-style: preserve-3d;
}
.folha header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem;
}
.folha__tag {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ambar);
}
.folha__doc { font-family: var(--mono); font-size: .78rem; color: var(--nevoa); }

.folha--1 { inset: 16% 2% 0 12%; z-index: 3; transform: translateZ(60px); }
.folha--2 { inset: 7% 14% 16% 2%; z-index: 2; transform: translateZ(20px) rotate(-4deg); opacity: .9; }
.folha--3 { inset: 0 24% 30% 0;   z-index: 1; transform: translateZ(-20px) rotate(-8deg); opacity: .66; }

.folhas:hover .folha--1 { transform: translateZ(90px) translateY(-6px); }
.folhas:hover .folha--2 { transform: translateZ(30px) rotate(-6deg) translateX(-14px); }
.folhas:hover .folha--3 { transform: translateZ(-10px) rotate(-11deg) translateX(-26px); }

.folha__linhas { display: grid; gap: .55rem; }
.folha__linhas i {
  height: 7px; border-radius: 99px;
  background: linear-gradient(90deg, rgb(236 231 221 / .16), rgb(236 231 221 / .04));
}

.medidor { margin-bottom: 1.3rem; }
.medidor__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: .55rem;
}
.medidor__topo span { font-size: .82rem; color: var(--nevoa); }
.medidor__topo strong {
  font-family: var(--serif); font-size: 2rem; font-weight: 400;
  color: var(--coral); line-height: 1;
}
.barra { height: 5px; border-radius: 99px; background: rgb(236 231 221 / .08); overflow: hidden; }
.barra i {
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--coral), var(--ambar));
  transition: width 1.6s var(--ease);
}
.barra.ativa i { width: var(--p); }
.medidor__nota { font-size: .74rem; color: var(--nevoa); margin: .55rem 0 0; }

.grade-dados {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .55rem; margin-bottom: 1.1rem;
}
.grade-dados > div {
  border: var(--borda); border-radius: 4px;
  padding: .65rem .7rem;
  background: rgb(236 231 221 / .022);
}
/* `> div > span` de propósito: o span do valor mora dentro do <strong> e não
   pode herdar o estilo de rótulo. */
.grade-dados > div > span {
  display: block;
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--nevoa);
  margin-bottom: .25rem;
}
.grade-dados strong {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 400;
  white-space: nowrap;
}
.grade-dados .destaque {
  grid-column: 1 / -1;
  border-color: rgb(233 166 63 / .3);
  background: rgb(233 166 63 / .06);
}
.grade-dados .destaque strong { color: var(--ambar); }

.alertas { display: flex; flex-wrap: wrap; gap: .45rem; }
.pill {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .05em;
  padding: .28rem .65rem; border-radius: 99px;
  border: 1px solid currentColor;
}
.pill--ok { color: var(--menta); }
.pill--risco { color: var(--coral); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chips--grade { margin-bottom: 0; }
.chip {
  font-family: var(--mono); font-size: .66rem;
  padding: .3rem .6rem; border-radius: 3px;
  border: var(--borda); color: var(--nevoa);
  background: rgb(236 231 221 / .025);
}
.chip--alerta { color: var(--coral); border-color: rgb(226 96 79 / .34); background: rgb(226 96 79 / .07); }

.dossie__notas { display: grid; gap: 1.5rem; }
.dossie__notas li {
  padding-left: 1.4rem; position: relative;
  color: var(--nevoa); font-size: .98rem;
}
.dossie__notas li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px;
  border: 1px solid var(--ambar);
  transform: rotate(45deg);
}
.dossie__notas b { color: var(--osso); font-weight: 500; }

@media (max-width: 900px) {
  .dossie__palco { grid-template-columns: 1fr; }
  .folhas { aspect-ratio: 4 / 4.4; }
}

/* ── cartas ────────────────────────────────────────────────────── */

/* 2×2 + a larga ocupando a faixa inteira. Com auto-fit, as 4 cartas caíam
   3+1 e deixavam um buraco na grade. */
.cartas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 760px) { .cartas { grid-template-columns: 1fr } }

.carta {
  position: relative;
  overflow: hidden;
  border: var(--borda); border-radius: 8px;
  padding: 2rem 1.8rem;
  background: linear-gradient(165deg, rgb(27 32 41 / .55), rgb(11 14 19 / .8));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
  will-change: transform;
}
.carta:hover {
  border-color: rgb(233 166 63 / .32);
  box-shadow: 0 30px 70px -34px rgb(0 0 0 / .95);
}
.carta--larga { grid-column: 1 / -1; }

/* brilho que segue o cursor */
.carta__brilho {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .45s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(233 166 63 / .1), transparent 62%);
}
.carta:hover .carta__brilho { opacity: 1; }

.carta__num {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .16em; color: var(--ambar);
  display: block; margin-bottom: 1.1rem;
}
.carta h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.62rem; line-height: 1.12; letter-spacing: -.015em;
  margin: 0 0 .7rem;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.carta__resumo { color: var(--nevoa); font-size: .94rem; margin: 0 0 1.5rem; }

/* align-content: start — sem isso o grid estica as linhas para preencher a
   altura da coluna irmã e a lista fica com vãos enormes entre os itens. */
.carta ul { display: grid; gap: .7rem; align-content: start; }
.carta li {
  position: relative; padding-left: 1.25rem;
  font-size: .93rem; color: rgb(236 231 221 / .8);
}
.carta li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 1px; background: var(--ambar);
}
.carta li b { color: var(--osso); font-weight: 500; }

/* Os chips são lista também: precisam vencer `.carta ul` e `.carta li`,
   senão viram blocos de largura total com o traço da lista. */
.carta .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.carta .chip { padding: .3rem .65rem; font-size: .7rem; color: var(--nevoa); }
.carta .chip::before { content: none; }
/* `.carta li` também vencia a cor do chip de alerta */
.carta .chip--alerta { color: var(--coral); }

.carta__duas {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
@media (max-width: 780px) { .carta__duas { grid-template-columns: 1fr } }

.janelas { display: flex; gap: .5rem; }
.janelas span {
  flex: 1; text-align: center;
  font-family: var(--mono); font-size: .72rem;
  padding: .6rem .2rem; border-radius: 4px;
  border: var(--borda); color: var(--nevoa);
  background: linear-gradient(to top, rgb(233 166 63 / .1), transparent);
}
.carta__nota { font-size: .82rem; color: var(--nevoa); margin: .9rem 0 0; }

/* ── passos ────────────────────────────────────────────────────── */

.passos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: rgb(236 231 221 / .09);
  border: var(--borda); border-radius: 8px; overflow: hidden;
}
.passo {
  background: var(--breu);
  padding: 2.4rem 1.9rem;
  transition: background .5s;
}
.passo:hover { background: var(--tinta); }
.passo__n {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 1.4rem;
  border: 1px solid rgb(233 166 63 / .4); border-radius: 50%;
  font-family: var(--mono); font-size: .85rem; color: var(--ambar);
  transition: background .5s, color .5s;
}
.passo:hover .passo__n { background: var(--ambar); color: var(--vazio); }
.passo h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.35rem;
  margin: 0 0 .6rem;
}
.passo p { color: var(--nevoa); font-size: .93rem; margin: 0; }

/* ── públicos ──────────────────────────────────────────────────── */

.publicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; }
.publico {
  border-left: 2px solid rgb(233 166 63 / .3);
  padding: .3rem 0 .3rem 1.5rem;
  transition: border-color .5s, transform .5s var(--ease);
}
.publico:hover { border-left-color: var(--ambar); transform: translateX(5px); }
.publico h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.3rem;
  margin: 0 0 .55rem;
}
.publico p { color: var(--nevoa); font-size: .93rem; margin: 0; }

/* ── confiança ─────────────────────────────────────────────────── */

.confianca__caixa {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  border: var(--borda); border-radius: 10px;
  padding: clamp(2rem, 5vw, 3.4rem);
  background:
    radial-gradient(ellipse 70% 100% at 0% 0%, rgb(18 50 64 / .5), transparent 70%),
    rgb(11 14 19 / .7);
}
@media (max-width: 860px) { .confianca__caixa { grid-template-columns: 1fr } }

.regras { display: grid; gap: 1.15rem; align-content: center; }
.regras li {
  position: relative; padding-left: 1.7rem;
  color: var(--nevoa); font-size: .96rem;
}
.regras li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--menta); font-size: .85rem;
}
.regras b { color: var(--osso); font-weight: 500; }

/* ── cta ───────────────────────────────────────────────────────── */

.cta {
  position: relative;
  text-align: center;
  padding-block: clamp(6rem, 13vw, 10rem);
}
.cta__aura {
  position: absolute; left: 50%; top: 40%;
  translate: -50% -50%;
  width: min(90vw, 900px); aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse, rgb(233 166 63 / .14), transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.cta .olho { color: var(--nevoa); }
.cta__titulo {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.04; letter-spacing: -.025em;
  margin: 0 0 1.3rem;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.cta__titulo em { font-style: italic; color: var(--ambar); }
.cta__sub { color: var(--nevoa); max-width: 52ch; margin: 0 auto 2.6rem; }
.cta__acoes { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ── rodapé ────────────────────────────────────────────────────── */

.rodape {
  position: relative; z-index: 2;
  border-top: var(--borda);
  padding: 3rem var(--gutter);
  max-width: var(--max); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.5rem;
}
.rodape__marca { display: flex; align-items: center; gap: .7rem; }
.rodape p { margin: 0; color: var(--nevoa); font-size: .85rem; }
.rodape__mini { margin-left: auto !important; font-family: var(--mono); font-size: .72rem !important; }

/* ── revelações ────────────────────────────────────────────────── */

/* O gate `.js` garante que nada fique escondido se o script não rodar. */
.js .reveal {
  opacity: 0; transform: translateY(26px);
  animation: entra .95s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes entra { to { opacity: 1; transform: none } }

.js .reveal-s {
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal-s.visivel { opacity: 1; transform: none; }

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