/* Claude Edita · landing page v3
   Sistema (DNA das 3 referências: Blue Growth, Trader Sniper, Alan Nicolas)
   Cores: fundo #0A0D14 / #0B0F17, texto #F2F4F8 / #A9B0BF, azul #1A4BFF > #5C8DFF,
          prata #BFC3C9 > #FFFFFF. Botão principal prata com seta azul.
   Tipos: Geist 300 + 600 no mesmo título, caixa normal, entrelinha 1,04, tracking negativo.
          Geist Mono em caixa alta SÓ nas pílulas de seção. Rótulos em Geist 500, caixa normal.
   Ritmo: seções alternam fundo liso, faixa com painéis de luz, pessoa com vidro e uma faixa clara.
   Motion: só transform e opacity. Título sobe 60 px em 7 quadros (233 ms) com uma
          cópia desfocada que some junto. prefers-reduced-motion: tudo parado. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/Geist-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/Geist-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/GeistMono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/GeistMono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #0A0D14;
  --bg-2: #0B0F17;
  --bg-3: #0E1422;
  --linha: rgba(255, 255, 255, .08);
  --linha-2: rgba(255, 255, 255, .14);
  --tx: #F2F4F8;
  --tx-2: #A9B0BF;
  --tx-3: #8A93A6;
  --az-1: #1A4BFF;
  --az-2: #5C8DFF;
  --az-tx: #8FB0FF;
  --az-grad: linear-gradient(120deg, #1A4BFF 0%, #5C8DFF 100%);
  --prata-grad: linear-gradient(160deg, #BFC3C9 0%, #E9EBEE 55%, #FFFFFF 100%);
  --claro: #EEF1F6;
  --pend: #F2C46D;
  --raio: 18px;
  --ct: 1200px;
  --lado: 16px;
  --f: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fm: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sobe: cubic-bezier(.22, .8, .3, 1);
  --t7: 233ms;
  --gab-mascara: url(/lp/img/gabriel-720.webp);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --lado: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 20px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
::selection { background: rgba(92, 141, 255, .45); color: #fff; }
:focus-visible { outline: 2px solid var(--az-tx); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; color: #0A0D14; padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }
.icone { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* grão sutil de filme por cima de tudo */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ct { width: 100%; max-width: calc(var(--ct) + var(--lado) * 2); margin: 0 auto; padding: 0 var(--lado); position: relative; }
.mono { font-family: var(--fm); letter-spacing: .02em; }

/* ---------- tipografia ---------- */
.h1, .h2, .h3 { letter-spacing: -.035em; line-height: 1.04; font-weight: 400; color: #E6EAF2; }
.h1 b, .h2 b, .h3 b { font-weight: 600; color: #fff; }
.h1 { font-size: clamp(34px, 9.2vw, 36px); }
.h2 { font-size: clamp(31px, 7.6vw, 40px); text-wrap: balance; }
.h3 { font-size: 21px; line-height: 1.15; letter-spacing: -.02em; font-weight: 500; }
@media (min-width: 900px) {
  .h1 { font-size: clamp(50px, 4.4vw, 64px); }
  .topo-titulo { max-width: 640px; }
  .h2 { font-size: clamp(40px, 3.5vw, 54px); }
  .h3 { font-size: 23px; }
}
.sub { color: var(--tx-2); font-size: 17px; line-height: 1.6; max-width: 640px; }
@media (min-width: 900px) { .sub { font-size: 18px; } }
.sub b, .sub strong { color: var(--tx); }

/* selo-pílula de seção: único lugar com mono em caixa alta */
.pilula {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1px solid var(--linha-2); background: rgba(255, 255, 255, .035);
  font-family: var(--fm); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #C9D0DE; line-height: 1.35;
}
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--az-2); box-shadow: 0 0 0 3px rgba(92, 141, 255, .18), 0 0 12px 2px rgba(92, 141, 255, .8); flex: none; display: inline-block; }
.pilula .barras { color: var(--tx-3); }

/* rótulo dos cartões: Geist, caixa normal */
.rotulo { font-family: var(--f); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--az-tx); line-height: 1.4; }

/* marcador pendente (trocar antes de publicar) */
.pend {
  font-family: var(--fm); font-size: .82em; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--pend); border: 1px dashed rgba(242, 196, 109, .55); border-radius: 5px; padding: 0 .35em; white-space: normal;
  background: rgba(242, 196, 109, .07);
}

/* ---------- botões ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 58px; padding: 7px 7px 7px 24px; border-radius: 14px; border: 0; cursor: pointer;
  text-decoration: none; color: #0A0D14; font-size: 17px; font-weight: 400; letter-spacing: -.01em; line-height: 1.2;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6E9EF 55%, #CBD1DB 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(10, 13, 20, .12), 0 0 0 1px rgba(255, 255, 255, .35), 0 14px 34px -12px rgba(40, 90, 255, .75);
  transition: transform .25s var(--ease);
}
.btn b { font-weight: 600; }
.btn::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px rgba(143, 176, 255, .9), 0 18px 48px -10px rgba(60, 110, 255, .95);
  transition: opacity .3s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { opacity: 1; }
.btn:active { transform: translateY(1px); }
.btn-seta {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--az-grad); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px -4px rgba(26, 75, 255, .9);
}
.btn-seta .icone { transition: transform .3s var(--ease); }
.btn:hover .btn-seta .icone { transform: translateX(3px); }
.btn-largo { width: 100%; }
.btn-texto {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px; color: var(--tx-2); text-decoration: none; font-size: 16px;
  transition: color .2s;
}
.btn-texto .icone { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn-texto:hover { color: #fff; }
.btn-texto:hover .icone { transform: translateY(3px); }
.btn-borda {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--linha-2);
  text-decoration: none; font-size: 14px; color: var(--tx); background: rgba(255, 255, 255, .03); white-space: nowrap; transition: border-color .2s, background .2s;
}
.btn-borda:hover { border-color: rgba(143, 176, 255, .6); background: rgba(92, 141, 255, .08); }

/* ---------- vidro, barrinha ---------- */
.vidro {
  position: relative; border-radius: var(--raio);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .016) 58%, rgba(40, 95, 255, .1) 100%);
  border: 1px solid var(--linha);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(110, 155, 255, .45), 0 18px 40px -22px rgba(26, 75, 255, .45), 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.barrinha::before {
  content: ""; position: absolute; top: -2px; left: 28px; width: 76px; height: 4px; border-radius: 4px;
  background: var(--az-grad); box-shadow: 0 0 16px 2px rgba(60, 110, 255, .85);
}

/* ---------- seções ---------- */
.sec { position: relative; padding: 80px 0; isolation: isolate; overflow-x: clip; background: var(--bg); }
.sec-alt { background: var(--bg-2); }
@media (min-width: 900px) { .sec { padding: 112px 0; } }
.sec-cab { display: grid; gap: 18px; justify-items: start; margin-bottom: 44px; }
.sec-cab.centro { justify-items: center; text-align: center; }
.sec-cab.centro .sub { margin: 0 auto; }
@media (min-width: 900px) { .sec-cab { margin-bottom: 64px; } }

/* monograma gigante apagado */
.monograma { position: absolute; z-index: -1; pointer-events: none; color: rgba(160, 190, 255, .07); width: 900px; max-width: none; fill: none; stroke: currentColor; stroke-width: .45; }

/* divisória curva com brilho (Trader) */
.curva { position: relative; height: 90px; margin: -1px 0; pointer-events: none; overflow: hidden; }
.curva svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.curva path { fill: none; stroke: rgba(143, 176, 255, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.curva .curva-fundo { fill: var(--bg-2); stroke: none; }
.curva-baixo { background: var(--bg); }
.curva-brilho { position: absolute; left: 25%; right: 25%; top: 10px; height: 80px; border-radius: 50%; background: radial-gradient(50% 60% at 50% 30%, rgba(60, 110, 255, .55), rgba(26, 75, 255, 0) 70%); }

/* painéis verticais de luz (Blue Growth) */
.paineis { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.paineis i {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w);
  background: linear-gradient(90deg, rgba(26, 75, 255, 0) 0%, rgba(26, 75, 255, .05) 55%, rgba(70, 120, 255, .16) 100%);
  border-right: 1px solid rgba(150, 185, 255, calc(var(--a) * .55));
  opacity: var(--a);
  animation: respira var(--d, 7s) ease-in-out infinite alternate;
}
.paineis i::before, .paineis i::after {
  content: ""; position: absolute; right: -40px; width: calc(100% + 80px); height: 34%;
  background: radial-gradient(42% 46% at 72% 0%, rgba(150, 185, 255, 1), rgba(60, 110, 255, .45) 35%, transparent 72%);
}
.paineis i::before { top: -2px; }
.paineis i::after { bottom: -2px; transform: scaleY(-1); opacity: .75; }
@keyframes respira { from { opacity: calc(var(--a) * .55); } to { opacity: var(--a); } }

/* ---------- entradas no scroll ---------- */
.js [data-revela] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-revela].is-in { opacity: 1; transform: none; }
.t-caixa { display: block; position: relative; }
.t-borrado { position: absolute; inset: 0; pointer-events: none; filter: blur(9px); opacity: 0; }
.js [data-titulo] .t-caixa { transform: translateY(60px); }
.js [data-titulo] .t-nitido { opacity: 0; }
.js [data-titulo] .t-borrado { opacity: 1; }
.js [data-titulo].is-in .t-caixa { transform: none; transition: transform var(--t7) var(--sobe); transition-delay: var(--atraso, 0ms); }
.js [data-titulo].is-in .t-nitido { opacity: 1; transition: opacity var(--t7) var(--sobe); transition-delay: var(--atraso, 0ms); }
.js [data-titulo].is-in .t-borrado { opacity: 0; transition: opacity var(--t7) var(--sobe); transition-delay: var(--atraso, 0ms); }
.sem-motion [data-revela], .sem-motion [data-titulo] .t-caixa, .sem-motion [data-titulo] .t-nitido, .sem-motion .num dt { opacity: 1 !important; transform: none !important; transition: none !important; }
.sem-motion [data-titulo] .t-borrado { opacity: 0 !important; }

/* ---------- foto com a cor da página (as cenas Muse são quentes: esfria só por CSS) ---------- */
.foto-fria { position: relative; isolation: isolate; overflow: hidden; }
.foto-fria img { filter: saturate(.9) contrast(1.04); }
.foto-fria::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #0C1A4A; mix-blend-mode: lighten; opacity: .55; }
.foto-fria::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, #1A4BFF, #5C8DFF) 24px 0 / 76px 3px no-repeat,
    radial-gradient(60% 50% at 100% 0%, rgba(70, 120, 255, .28), transparent 70%),
    radial-gradient(120% 95% at 50% 42%, transparent 55%, rgba(4, 7, 16, .6) 100%);
  box-shadow: inset 0 1px 0 rgba(143, 176, 255, .55), inset -1px 0 0 rgba(143, 176, 255, .25);
}
.foto-fria figcaption { z-index: 2; }

/* ---------- Gabriel recortado dentro da cena: esfria, escurece a jaqueta e acende o contorno ---------- */
.gab-corpo {
  position: relative;
  filter: drop-shadow(-3px 0 0 rgba(120, 170, 255, .9)) drop-shadow(0 0 40px rgba(26, 75, 255, .6));
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%); mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
}
.gab-corpo img { width: 100%; filter: saturate(.8) contrast(1.05) brightness(.94); }
.gab-tinta {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--gab-mascara) 0 0 / 100% 100% no-repeat; mask: var(--gab-mascara) 0 0 / 100% 100% no-repeat;
}
.gab-frio { background: linear-gradient(180deg, #4A78FF 0%, #1C3FB4 100%); mix-blend-mode: soft-light; opacity: .55; }
.gab-cor { background: linear-gradient(180deg, transparent 27%, #1E3270 42%, #14224F 100%); mix-blend-mode: color; opacity: .6; }
.gab-sombra {
  background:
    linear-gradient(180deg, transparent 29%, rgba(8, 16, 50, .62) 40%, rgba(6, 12, 38, .88) 58%, rgba(4, 9, 28, .97) 82%),
    linear-gradient(90deg, rgba(6, 14, 46, .5), transparent 34%, transparent 66%, rgba(6, 14, 46, .5));
  mix-blend-mode: multiply; opacity: .74;
}
.gab-rim { background: linear-gradient(180deg, #CFDDFF 0%, #7FA5FF 38%, rgba(70, 120, 255, .55) 70%, transparent 96%); mix-blend-mode: screen; }
.gab-rim-e {
  -webkit-mask-image: var(--gab-mascara), var(--gab-mascara); -webkit-mask-position: 0 0, 5px 3px; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-out;
  mask-image: var(--gab-mascara), var(--gab-mascara); mask-position: 0 0, 5px 3px; mask-size: 100% 100%; mask-repeat: no-repeat; mask-composite: subtract;
  opacity: .95;
}
.gab-rim-d {
  -webkit-mask-image: var(--gab-mascara), var(--gab-mascara); -webkit-mask-position: 0 0, -5px 3px; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-out;
  mask-image: var(--gab-mascara), var(--gab-mascara); mask-position: 0 0, -5px 3px; mask-size: 100% 100%; mask-repeat: no-repeat; mask-composite: subtract;
  opacity: .32;
}

/* ================================================================ */
/* TOPO: faixa de oferta (só com prazo real) + barra + palco do loop  */
/* ================================================================ */
.topo-wrap { position: relative; padding-top: var(--cabeca-h, 64px); background: radial-gradient(60% 60% at 74% 56%, rgba(26, 75, 255, .26), rgba(26, 75, 255, 0) 70%), var(--bg); overflow: hidden; isolation: isolate; }
.topo-wrap::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none; background: linear-gradient(180deg, rgba(10, 13, 20, 0), var(--bg)); }
.cabeca { position: absolute; z-index: 6; top: 0; left: 0; right: 0; }
.barra { position: relative; border-bottom: 1px solid var(--linha); }
.barra-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.marca { display: block; flex: none; }
.marca img { height: 20px; width: auto; }
.barra-nav { display: none; gap: 30px; }
.barra-nav a { font-size: 14px; color: #B9C1D0; text-decoration: none; padding: 6px 0; transition: color .2s; }
.barra-nav a:hover { color: #fff; }
.sep { color: var(--tx-3); margin: 0 6px; }
@media (min-width: 900px) {
  :root { --cabeca-h: 72px; }
  .barra-in { height: 72px; }
  .marca img { height: 22px; }
  .barra-nav { display: flex; }
}

/* faixa de oferta: vermelha, fina, acima da barra; só prazo e percentual, nunca valor em reais */
.faixa-oferta { position: relative; overflow: hidden; color: #fff; background: linear-gradient(90deg, #FF4D00, #FF7A00 50%, #FF4D00); border-bottom: 1px solid rgba(0, 0, 0, .25); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .18); }
.fo-trilho { display: flex; width: max-content; animation: fo-passa 60s linear infinite; }
.faixa-oferta:hover .fo-trilho { animation-play-state: paused; }
.fo-grupo { display: flex; flex: none; }
.fo-item { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 22px; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; letter-spacing: -.005em; }
.fo-item b { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }
.fo-item::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .55); margin-left: 12px; }
.fo-raio { width: 15px; height: 15px; fill: #FFE14D; filter: drop-shadow(0 0 6px rgba(255, 225, 77, .8)); }
.fo-pct { padding: 3px 8px; border-radius: 6px; background: #fff; color: #C23A00; font-weight: 800; font-size: 12.5px; letter-spacing: .01em; }
.fo-tempo { font-family: var(--fm); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; padding: 3px 8px; border-radius: 6px; background: rgba(70, 18, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
@keyframes fo-passa { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fo-trilho { animation: none; justify-content: center; width: auto; } .fo-grupo + .fo-grupo, .fo-grupo .fo-item:not(:first-child) { display: none; } }
@media (max-width: 420px) { .fo-item { font-size: 12.5px; gap: 8px; padding: 0 16px; } }
.preco-de { margin: 0 0 4px; font-size: 15px; color: var(--tx-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.preco-de s { color: var(--tx-3); text-decoration-thickness: 1.5px; }
.preco-off { padding: 3px 8px; border-radius: 6px; background: linear-gradient(90deg, #FF4D00, #FF7A00); color: #fff; font-weight: 700; font-size: 12.5px; }

.topo { position: relative; }
.topo-paineis { mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 20%, rgba(0, 0, 0, .12) 38%, rgba(0, 0, 0, .2) 52%, #000 78%); -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 20%, rgba(0, 0, 0, .12) 38%, rgba(0, 0, 0, .2) 52%, #000 78%); }
@media (max-width: 899px) {
  .topo-paineis { -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 14%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .3) 86%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 14%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .3) 86%, #000 100%); }
}
/* celular: pílula, título, o loop e o botão na primeira tela; o subtítulo logo abaixo */
.topo-grade {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "pil" "tit" "palco" "acoes" "mais" "sub";
  padding-top: 14px; padding-bottom: 28px; row-gap: 14px;
}
.topo-grade > :not(.palco) { position: relative; z-index: 4; }
.pilula-topo { grid-area: pil; justify-self: start; }
.topo-titulo { grid-area: tit; }
.palco { grid-area: palco; }
.topo-sub { grid-area: sub; }
.topo-acoes { grid-area: acoes; }
.so-pc { display: none; }
@media (min-width: 900px) {
  .so-pc { display: inline; }
  .topo-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 0;
    grid-template-areas: ". palco" "pil palco" "tit palco" "sub palco" "acoes palco" ". palco";
    grid-template-rows: 1fr auto auto auto auto 1.1fr;
    min-height: clamp(660px, calc(100svh - var(--cabeca-h, 72px)), 880px); padding-top: 0; padding-bottom: 0;
  }
  .topo-titulo { margin-top: 26px; }
  .topo-sub { margin-top: 24px; }
  .topo-acoes { margin-top: 34px; }
}

/* pílula do topo: chip + texto, Geist em caixa normal (Trader) */
.pilula-topo {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 4px 14px 4px 4px; border-radius: 999px;
  border: 1px solid var(--linha-2); background: rgba(255, 255, 255, .035); font-size: 13.5px; color: #D5DBE6; line-height: 1.3;
}
.pil-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(92, 141, 255, .16); color: #fff; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .35); }
.pil-chip .ponto { width: 6px; height: 6px; }
.topo-titulo .l { display: block; }
.topo-titulo .l-leve { color: #E6EAF2; font-weight: 400; }
.topo-titulo b.l { text-wrap: balance; }
.topo-sub { color: var(--tx-2); font-size: 16px; line-height: 1.5; max-width: 520px; }
.topo-sub strong { color: var(--tx); font-weight: 500; }
@media (min-width: 900px) { .topo-sub { font-size: 19px; line-height: 1.55; } }
.topo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
@media (max-width: 899px) {
  .pilula-topo { font-size: 12.5px; }
  .pil-chip { padding: 3px 9px; }
  .topo-acoes { display: contents; }
  .topo-acoes .btn { grid-area: acoes; justify-self: stretch; position: relative; z-index: 4; animation: sobeLeve .7s var(--ease) both .38s; }
  .topo-acoes .btn-texto { grid-area: mais; justify-self: center; position: relative; z-index: 4; padding: 2px 4px; font-size: 15px; margin-top: -8px; }
  .topo-sub { margin-top: 4px; }
}

/* entrada do topo (sem esperar o JS) */
@keyframes sobe7 { from { transform: translateY(60px); } to { transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes some { from { opacity: 1; } to { opacity: 0; } }
@keyframes sobeLeve { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sobeFoto { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.topo-titulo .t-caixa { animation: sobe7 var(--t7) var(--sobe) both; animation-delay: var(--atraso, 0ms); }
.topo-titulo .t-nitido { animation: aparece var(--t7) var(--sobe) both; animation-delay: var(--atraso, 0ms); }
.topo-titulo .t-borrado { opacity: 1; animation: some var(--t7) var(--sobe) both; animation-delay: var(--atraso, 0ms); }
.pilula-topo, .topo-sub, .topo-acoes { animation: sobeLeve .7s var(--ease) both; }
.pilula-topo { animation-delay: 40ms; }
.topo-sub { animation-delay: 300ms; }
.topo-acoes { animation-delay: 380ms; }

/* palco: o símbolo 3D inteiro atrás, à direita; a tela 9:16 de vidro na frente cobre só o começo das barras,
   então o fim delas (a do meio mais curta) continua lendo como o logo. Duas cópias pequenas e desfocadas. */
.palco {
  /* celular: a tela encolhe com a altura da tela para caber com o título e o botão */
  --tw: clamp(150px, calc((100svh - var(--cabeca-h, 64px) - 344px) * .5625 + 14px), 232px);
  --th: calc((var(--tw) - 14px) * 16 / 9 + 14px);
  --ls: calc(var(--tw) * 1.9);
  --fx: 37%;
  position: relative; height: var(--th); margin: 0 calc(var(--lado) * -1);
}
@media (min-width: 900px) {
  .palco {
    --tw: clamp(236px, 18.6vw, 276px);
    --ls: clamp(500px, 41vw, 590px);
    --fx: calc(100% - var(--ls) * .7);
    --ft: calc(var(--ls) * .42);
    --comp: calc(var(--ft) + var(--th));
    height: auto; margin: 0; min-height: calc(var(--comp) + 60px);
  }
}
.palco-simbolo { position: absolute; z-index: 0; width: var(--ls); aspect-ratio: 1; left: calc(var(--fx) - var(--ls) * .25); top: calc(50% - var(--ls) / 2); pointer-events: none; will-change: transform; mix-blend-mode: screen; }
.palco-simbolo img { width: 100%; height: 100%; animation: gira 14s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@media (min-width: 900px) { .palco-simbolo { left: auto; right: 0; top: calc((100% - var(--comp)) / 2 - 10px); } }
@keyframes gira { from { transform: perspective(1200px) rotateY(-6deg) rotateZ(-1deg) translateY(0); } to { transform: perspective(1200px) rotateY(6deg) rotateZ(1deg) translateY(-10px); } }

/* um único arco pontilhado em volta da tela */
.palco-arco { position: absolute; z-index: 0; left: var(--fx); top: -14px; width: calc(var(--tw) * 1.62); height: calc(var(--th) + 14px); transform: translateX(-50%); color: #8FB0FF; opacity: .55; pointer-events: none; }
.palco-arco path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 11; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(92, 141, 255, .9)); }
@media (min-width: 900px) { .palco-arco { top: calc((100% - var(--comp)) / 2 + var(--ft) - 70px); height: calc(var(--th) + 70px); width: calc(var(--tw) * 1.7); opacity: .6; } }
.palco-base { display: none; }

.telas { position: absolute; z-index: 1; left: var(--fx); top: 0; width: var(--tw); height: var(--th); margin-left: calc(var(--tw) / -2); }
@media (min-width: 900px) { .telas { top: calc((100% - var(--comp)) / 2 + var(--ft)); } }
.tela-pos { position: absolute; will-change: transform; }
.tela-pos-f { inset: 0; z-index: 2; }
.tela { position: relative; height: 100%; border-radius: calc(var(--tw) * .1); }

/* tela da frente: vidro com bisel, brilho azul e o loop real do kit */
.tela-frente {
  margin: 0; padding: 7px; border-radius: calc(var(--tw) * .12);
  background: linear-gradient(155deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .07) 28%, rgba(120, 160, 255, .06) 62%, rgba(143, 176, 255, .4) 100%);
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(143, 176, 255, .2), 0 0 0 1px rgba(5, 8, 16, .7), 0 34px 80px -22px rgba(26, 75, 255, .9), 0 0 110px -16px rgba(60, 110, 255, .7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: sobeFoto .9s var(--ease) both .12s;
}
.tela-tela { position: relative; height: 100%; border-radius: calc(var(--tw) * .12 - 7px); overflow: hidden; background: #05070C; isolation: isolate; }
.loop-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #05070C; }
.tela-brilho { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 40%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); border-radius: inherit; }
.loop-rotulo { position: absolute; z-index: 3; left: 9px; top: 9px; height: 26px; margin: 0; pointer-events: none; }
.lr { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.lr i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.lr-bruto { background: rgba(10, 13, 20, .78); border: 1px solid rgba(255, 255, 255, .24); color: #E6E9EF; }
.lr-bruto i { background: #A9B0BF; }
.lr-editado { background: var(--az-grad); color: #fff; box-shadow: 0 6px 18px -6px rgba(26, 75, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .35); }
.lr-editado i { background: #fff; box-shadow: 0 0 8px #fff; }
[data-fase="bruto"] .lr-editado, [data-fase="editado"] .lr-bruto { opacity: 0; transform: translateY(-5px); }
@media (max-width: 899px) { .lr { font-size: 11px; padding: 3px 8px 3px 7px; } }
.loop-pausa { position: absolute; z-index: 4; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; border: 1px solid rgba(255, 255, 255, .26); background: rgba(10, 13, 20, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: .8; transition: background .2s, border-color .2s, opacity .2s; }
.loop-pausa:hover, .loop-pausa:focus-visible { opacity: 1; background: rgba(26, 75, 255, .55); border-color: rgba(143, 176, 255, .8); }
.loop-pausa .icone { width: 12px; height: 12px; stroke-width: 2.4; }
.loop-pausa .i-play { display: none; fill: currentColor; stroke: none; margin-left: 2px; }
.loop-pausa[aria-pressed="true"] .i-pausa { display: none; }
.loop-pausa[aria-pressed="true"] .i-play { display: block; }
/* selo pequeno dentro da tela, no canto de baixo à esquerda */
.loop-selo { position: absolute; z-index: 3; left: 9px; bottom: 10px; max-width: calc(100% - 52px); font-size: 10.5px; line-height: 1.3; color: #D5DBE6; padding: 3px 7px; border-radius: 6px; background: rgba(10, 13, 20, .66); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (min-width: 900px) { .loop-selo { left: 15px; bottom: 16px; font-size: 11.5px; } .loop-pausa { right: 14px; bottom: 14px; } }

.flut { position: absolute; pointer-events: none; will-change: transform; z-index: 3; mix-blend-mode: screen; }
.flut img { width: 100%; animation: flutua var(--d, 9s) ease-in-out infinite alternate; animation-delay: var(--atraso, 0s); }
.flut.atras { z-index: 0; }
.flut.desf img { filter: blur(var(--b, 4px)); }
@keyframes flutua {
  from { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
  to { transform: translate3d(var(--fx-f, 6px), var(--fy, -18px), 0) rotate(calc(var(--r, 0deg) + var(--rr, 6deg))); }
}
/* as duas cópias do topo: pequenas, desfocadas, longe do símbolo grande */
.palco .flut.f2 { width: 64px; left: 4%; top: 4%; --r: 18deg; --d: 10s; --atraso: -3s; --fy: 14px; --b: 3px; opacity: .8; }
.palco .flut.f3 { width: 96px; right: 2%; bottom: -4%; --r: -12deg; --d: 12s; --b: 6px; opacity: .5; }
@media (max-width: 899px) { .palco .flut.f2 { width: 46px; left: 3%; top: auto; bottom: 18%; } .palco .flut.f3 { display: none; } }
@media (min-width: 900px) { .palco .flut.f2 { left: 0; top: 8%; width: 70px; } .palco .flut.f3 { bottom: 4%; right: 6%; width: 104px; } }

/* pílula da VSL: pequena, no canto de baixo à esquerda do palco */
.vsl-abrir {
  position: absolute; z-index: 5; left: 16px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); cursor: pointer;
  background: rgba(10, 13, 20, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 13px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8);
}
.vsl-abrir .play { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--az-1); position: relative; }
.vsl-abrir .play::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); animation: pulso 2.4s ease-out infinite; }
@keyframes pulso { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.vsl-abrir .play .icone { width: 12px; height: 12px; fill: currentColor; stroke: none; margin-left: 2px; }
@media (min-width: 900px) { .vsl-abrir { left: 0; bottom: 64px; } }

/* player da VSL (abre no próprio palco) */
.vsl { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; padding: 12px; }
.vsl::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(10, 13, 20, .55), rgba(10, 13, 20, .9)); }
.vsl-moldura { position: relative; height: min(96%, 720px); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; border: 1px solid rgba(143, 176, 255, .45); background: #05070C; box-shadow: 0 0 0 6px rgba(255, 255, 255, .04), 0 0 60px rgba(40, 95, 255, .55); animation: sobeLeve .35s var(--ease) both; }
.vsl-moldura video { width: 100%; height: 100%; object-fit: cover; background: #05070C; }
.vsl-aviso { position: absolute; left: 12px; right: 12px; bottom: 64px; background: rgba(10, 13, 20, .8); border: 1px solid var(--linha-2); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--tx-2); }
.vsl-fechar { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(10, 13, 20, .7); cursor: pointer; display: grid; place-items: center; color: #fff; }

/* ================================================================ */
/* 2 · faixa reta de prova                                          */
/* ================================================================ */
.faixa-reta { position: relative; z-index: 3; border-top: 1px solid rgba(143, 176, 255, .28); border-bottom: 1px solid rgba(143, 176, 255, .28); background: rgba(10, 13, 20, .92); overflow: hidden; }
.faixa-trilho { display: flex; width: max-content; animation: corre 60s linear infinite; }
.faixa-reta:hover .faixa-trilho { animation-play-state: paused; }
.faixa-itens { display: flex; flex: none; align-items: center; }
.faixa-itens li { display: block; white-space: nowrap; padding: 16px 0; font-size: 15.5px; color: #C4CBD8; }
.faixa-itens li b { color: #fff; font-weight: 600; }
.faixa-reta li::after { content: ""; display: inline-block; vertical-align: 3px; width: 6px; height: 6px; margin: 0 28px; border-radius: 50%; background: var(--az-2); box-shadow: 0 0 10px 2px rgba(92, 141, 255, .8); }
@keyframes corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.prova-linha { text-align: center; color: var(--tx-2); font-size: 15px; padding: 26px 0 0; max-width: 760px; margin: 0 auto; }
.prova-linha b { color: #fff; font-weight: 500; }

/* ================================================================ */
/* 3 · antes e depois                                                */
/* ================================================================ */
.quadro916 { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #0D1220; border: 1px solid var(--linha-2); }
.quadro916 > img, .quadro916 > video, .quadro916 > picture, .quadro916 > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quadro-tag { position: absolute; z-index: 3; left: 8px; top: 8px; font-size: 12px; font-weight: 500; color: #fff; background: rgba(10, 13, 20, .72); border: 1px solid rgba(255, 255, 255, .16); padding: 2px 8px; border-radius: 6px; line-height: 1.5; }
.quadro-tag.az { background: var(--az-grad); border-color: transparent; }
.antes-img { filter: grayscale(.85) contrast(.92) brightness(.82); }

.ad { padding: 16px; display: grid; gap: 26px; }
@media (min-width: 980px) { .ad { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); padding: 40px 44px; gap: 52px; align-items: center; } }
.ad-player { display: grid; justify-items: center; gap: 14px; }
.ad-abas { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linha); max-width: 100%; }
.ad-abas button { border: 0; background: none; cursor: pointer; padding: 8px 14px; border-radius: 9px; font-size: 14px; color: var(--tx-2); white-space: nowrap; }
.ad-abas button[aria-pressed="true"] { background: rgba(92, 141, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .45); }
.ad-quadros { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.ad-quadros figure[data-painel] { display: none; }
.ad[data-ativo="edit"] figure[data-painel="edit"], .ad[data-ativo="tela"] figure[data-painel="tela"] { display: block; }
.ad-seta { position: absolute; z-index: 4; left: 50%; top: 40%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--az-grad); box-shadow: 0 0 0 4px rgba(10, 13, 20, .8), 0 0 18px rgba(60, 110, 255, .8); }
.ad-seta .icone { width: 16px; height: 16px; stroke-width: 2.2; }
.ad-legenda { margin-top: 10px; font-size: 12px; line-height: 1.45; color: #B9C1D0; text-align: center; }
.ad-aviso { font-size: 12.5px; line-height: 1.5; text-align: center; max-width: 520px; }
@media (min-width: 980px) {
  .ad-quadros { grid-template-columns: 1fr 44px 1fr; gap: 0; align-items: center; }
  .ad-quadros .ad-antes { grid-column: 1; grid-row: 1; }
  .ad-quadros figure[data-painel] { grid-column: 3; grid-row: 1; }
  .ad-seta { position: static; margin: 0 auto; grid-column: 2; grid-row: 1; width: 30px; height: 30px; box-shadow: 0 0 18px rgba(60, 110, 255, .8); }
}
.ad-lista h3 { margin-bottom: 16px; }
.ad-lista ul { display: grid; }
.ad-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha); font-size: 15px; color: #CBD2DE; line-height: 1.5; }
.ad-lista li:last-child { border-bottom: 1px solid var(--linha); }
.ad-lista li .icone { color: var(--az-tx); width: 18px; height: 18px; margin-top: 2px; }
.ressalva { margin-top: 16px; color: var(--tx-3); font-size: 14px; line-height: 1.55; }

/* ================================================================ */
/* 4 · como funciona (faixa de luz + linha do tempo)                 */
/* ================================================================ */
.sec-luz { background: var(--bg-2); }
.paineis-faixa { bottom: auto; height: 900px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent); }
.paineis-faixa::after { content: ""; position: absolute; inset: 0; background: radial-gradient(38% 44% at 50% 26%, rgba(11, 15, 23, .9), transparent 80%); }
.faixa-fina { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; max-width: 880px; margin: 0 auto 52px; font-size: 15.5px; color: #CBD2DE; }
.faixa-fina .rotulo { flex: none; padding-top: 1px; }
.faixa-fina code { font-family: var(--fm); font-size: .92em; color: #fff; background: rgba(92, 141, 255, .14); border: 1px solid rgba(143, 176, 255, .3); padding: 1px 6px; border-radius: 5px; }
@media (max-width: 640px) { .faixa-fina { flex-direction: column; gap: 6px; } }
.lt-wrap { position: relative; }
.lt { position: relative; display: grid; gap: 36px; padding-left: 34px; }
.lt-fio { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--linha-2); }
.lt-fio-cheio { position: absolute; inset: 0; background: linear-gradient(180deg, #5C8DFF, #1A4BFF); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); box-shadow: 0 0 10px rgba(92, 141, 255, .9); }
.lt-fio::after { content: ""; position: absolute; left: -6px; bottom: -10px; width: 13px; height: 13px; border-right: 1.5px solid var(--az-tx); border-bottom: 1.5px solid var(--az-tx); transform: rotate(45deg); }
.lt-passo { position: relative; display: grid; gap: 16px; }
.lt-no { position: absolute; left: -36px; top: 24px; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid rgba(143, 176, 255, .8); background: var(--bg-2); display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(92, 141, 255, .08); }
.lt-no::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--az-grad); opacity: .3; transition: opacity .4s; }
.lt-passo.aceso .lt-no { box-shadow: 0 0 0 4px rgba(92, 141, 255, .12), 0 0 18px 2px rgba(92, 141, 255, .7); }
.lt-passo.aceso .lt-no::after { opacity: 1; }
.lt-cartao { padding: 26px 22px 24px; }
.lt-num { display: block; font-size: 56px; line-height: .9; font-weight: 600; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px rgba(143, 176, 255, .75); margin-bottom: 16px; }
.lt-cartao .rotulo { display: block; margin-bottom: 6px; }
.lt-cartao p { color: var(--tx-2); margin-top: 10px; font-size: 16px; }
.lt-midia { border-radius: var(--raio); border: 1px solid var(--linha); }
.lt-midia img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; object-position: 50% 28%; }
.lt-midia figcaption { position: absolute; left: 12px; bottom: 12px; font-size: 12px; color: #fff; background: rgba(10, 13, 20, .72); padding: 3px 9px; border-radius: 6px; }
.pedido { padding: 22px; font-family: var(--fm); font-size: 14.5px; line-height: 1.65; color: #DDE3EE; border-radius: var(--raio); background: linear-gradient(180deg, #0F1526, #0B0F1A); border: 1px solid rgba(143, 176, 255, .25); box-shadow: 0 0 0 6px rgba(92, 141, 255, .05), 0 30px 60px -30px rgba(26, 75, 255, .6); }
.pedido-topo { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--tx-3); font-family: var(--f); font-size: 12.5px; }
.pedido-topo i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.pedido-topo span { margin-left: 8px; }
.pedido-texto .p { opacity: .14; transition: opacity .18s linear; transition-delay: calc(var(--k) * 55ms); }
.pedido.is-in .pedido-texto .p, .sem-motion .pedido-texto .p { opacity: 1; }
.pedido-cursor { display: inline-block; width: 8px; height: 1.1em; vertical-align: -.18em; background: var(--az-2); margin-left: 3px; animation: pisca 1s steps(2) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.pedidos-ajuste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pedidos-ajuste span { font-family: var(--fm); font-size: 12.5px; color: #DDE3EE; padding: 5px 10px; border-radius: 8px; background: rgba(92, 141, 255, .1); border: 1px solid rgba(143, 176, 255, .25); }
@media (min-width: 900px) {
  .lt { padding-left: 0; gap: 64px; }
  .lt-fio { left: 50%; }
  .lt-passo { grid-template-columns: 1fr 1fr; column-gap: 112px; align-items: center; }
  .lt-no { left: calc(50% - 10px); top: 50%; margin-top: -10px; }
  .lt-passo:nth-child(odd) .lt-cartao { order: 2; }
  .lt-passo:nth-child(odd) .lt-lado { order: 1; }
  .lt-cartao { padding: 34px 32px 30px; }
}
.lt-fecho { margin-top: 56px; padding: 24px 26px; display: grid; gap: 10px; }
.lt-fecho p { color: #CBD2DE; font-size: 15.5px; }
@media (min-width: 900px) { .lt-fecho { grid-template-columns: 150px 1fr; gap: 32px; align-items: start; padding: 28px 34px; } .lt-fecho .rotulo { padding-top: 2px; } }

/* ================================================================ */
/* 5 · os 2 formatos (alturas iguais, "Bom para" preso no pé)        */
/* ================================================================ */
.formatos { display: grid; gap: 22px; align-items: stretch; }
@media (min-width: 1000px) { .formatos { grid-template-columns: 1fr 1fr; gap: 24px; } }
.formato { padding: 22px; display: grid; gap: 22px; align-content: start; }
@media (min-width: 640px) {
  .formato { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "quadro texto" "nota texto"; padding: 28px; gap: 18px 26px; align-content: stretch; }
  .formato-quadro { grid-area: quadro; }
  .formato-texto { grid-area: texto; }
  .formato-nota { grid-area: nota; align-self: start; border-top: 1px dashed var(--linha-2); }
}
.formato-quadro { width: 100%; max-width: 240px; justify-self: center; align-self: start; }
.formato-quadro figcaption { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--tx-3); text-align: center; }
.formato-texto { display: flex; flex-direction: column; min-width: 0; }
.formato .rotulo { display: block; margin-bottom: 6px; }
.formato-linha { color: var(--tx-2); margin: 10px 0 16px; font-size: 16px; }
.checks { display: grid; gap: 9px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.45; color: #D2D8E3; }
.checks .icone { width: 16px; height: 16px; margin-top: 3px; color: var(--az-tx); stroke-width: 2.2; }
.bom-para { margin-top: auto; padding-top: 16px; font-size: 15px; color: var(--tx-2); }
.bom-para::before { content: ""; display: block; height: 1px; background: var(--linha); margin-bottom: 14px; margin-top: 4px; }
.bom-para span { font-size: 13px; font-weight: 500; color: var(--az-tx); display: block; margin-bottom: 3px; }
.formato-nota { font-size: 13px; color: var(--tx-3); line-height: 1.55; padding-top: 12px; border-top: 1px dashed var(--linha-2); }
.formatos-linha { text-align: center; margin-top: 28px; color: var(--tx-2); font-size: 15.5px; }

/* Tela Dividida: painel de cima de cada estilo (real, da galeria do kit) sobre o quadro de baixo */
.td-cima { position: absolute; left: 0; right: 0; top: 0; height: 50%; overflow: hidden; }
.td-cima img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s var(--ease); }
.td-baixo { position: absolute !important; inset: auto 0 0 0 !important; height: 50% !important; }
.td-baixo img { width: 100%; height: 100%; object-fit: cover; }
.td-quadro::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .35); z-index: 2; }
[data-estilo="0"] .td-cima .e0, [data-estilo="1"] .td-cima .e1, [data-estilo="2"] .td-cima .e2, [data-estilo="3"] .td-cima .e3, [data-estilo="4"] .td-cima .e4 { opacity: 1; }
.estilo-chip { position: absolute; z-index: 4; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #fff; background: rgba(10, 13, 20, .8); border-radius: 8px; padding: 5px 8px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.estilo-chip i { width: 10px; height: 10px; border-radius: 3px; flex: none; position: relative; }
.estilo-cor { position: absolute; inset: 0; border-radius: 3px; opacity: 0; transition: opacity .5s var(--ease); }
.estilo-cor.e0 { background: linear-gradient(90deg, #FF5A1F, #2A4BFF); }
.estilo-cor.e1 { background: #C6FF3D; }
.estilo-cor.e2 { background: #C0522E; }
.estilo-cor.e3 { background: #2457FF; }
.estilo-cor.e4 { background: #FF3EA5; }
[data-estilo="0"] .estilo-cor.e0, [data-estilo="1"] .estilo-cor.e1, [data-estilo="2"] .estilo-cor.e2, [data-estilo="3"] .estilo-cor.e3, [data-estilo="4"] .estilo-cor.e4 { opacity: 1; }

/* ================================================================ */
/* 6 · o método em números                                          */
/* ================================================================ */
.metodo-cab { display: grid; gap: 28px; margin-bottom: 44px; }
.metodo-cab .sec-cab { margin-bottom: 0; }
.metodo-foto { border-radius: 20px; border: 1px solid var(--linha-2); aspect-ratio: 16 / 10; box-shadow: 0 40px 80px -40px rgba(26, 75, 255, .6); }
.metodo-foto picture { position: absolute; inset: 0; }
.metodo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: saturate(.9) contrast(1.04) brightness(.92); }
.metodo-foto figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: #fff; background: rgba(10, 13, 20, .72); padding: 3px 9px; border-radius: 6px; }
@media (min-width: 960px) { .metodo-cab { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; margin-bottom: 64px; } }
.regra-micro { font-family: var(--fm); font-size: 12.5px; color: var(--tx-3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.regra-micro button { border: 1px solid rgba(143, 176, 255, .4); background: rgba(92, 141, 255, .08); color: var(--az-tx); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-family: var(--f); font-size: 12.5px; }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; margin: 0; }
.num { background: var(--bg-2); padding: 24px 16px 22px; display: grid; align-content: start; gap: 10px; }
.num dt { font-size: 36px; line-height: 1; font-weight: 300; letter-spacing: -.04em; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.num dt small { font-family: var(--fm); font-size: 14px; letter-spacing: .02em; color: var(--az-tx); margin-left: 6px; font-weight: 400; }
.num dt .q { display: block; margin: 12px 0 0; font-family: var(--f); font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.num dd { margin: 0; color: var(--tx-2); font-size: 14.5px; line-height: 1.5; }
.num-heroi { grid-column: 1 / -1; background: radial-gradient(70% 90% at 0% 100%, rgba(26, 75, 255, .3), transparent 70%), var(--bg-2); padding: 30px 22px; }
.num.num-heroi dt { font-size: clamp(88px, 24vw, 168px); font-weight: 200; letter-spacing: -.06em; }
.num-heroi dt small { font-size: 20px; }
.num-heroi dt .q { font-size: 14px; margin: 16px 0 0 4px; }
.num-heroi dd { font-size: 16px; max-width: 420px; color: #CBD2DE; }
.num-fecho { background: var(--bg-3); padding: 24px 22px; display: grid; align-content: center; gap: 10px; }
.num-fecho p { color: #CBD2DE; font-size: 15px; }
.num-fecho b { color: #fff; }
.js .num dt { opacity: 0; transform: translateY(14px); }
.js .num.is-in dt { opacity: 1; transform: none; transition: transform 66ms steps(2, end), opacity 66ms; transition-delay: var(--d, 0ms); }
@media (min-width: 900px) {
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .num { padding: 32px 24px 28px; }
  .num dt { font-size: 46px; }
  .num-heroi { grid-column: 1 / 3; grid-row: 1 / 3; padding: 44px 36px; display: grid; align-content: end; }
}

/* ================================================================ */
/* 7 · o que você recebe (cartões curtos + Gabriel com vidro)        */
/* ================================================================ */
.recebe { background: radial-gradient(50% 60% at 85% 55%, rgba(26, 75, 255, .2), transparent 70%), var(--bg); }
.recebe-grade { display: grid; gap: 28px; }
@media (min-width: 1080px) { .recebe-grade { grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); gap: 40px; align-items: center; } }
.itens { display: grid; gap: 14px; }
@media (min-width: 640px) { .itens { grid-template-columns: 1fr 1fr; gap: 16px; } }
.item { padding: 26px 22px 18px; display: flex; flex-direction: column; gap: 8px; }
.item-ic { width: 24px; height: 24px; color: #fff; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; filter: drop-shadow(0 0 8px rgba(143, 176, 255, .55)); }
.item .rotulo { color: var(--tx-3); }
.item .h3 { font-size: 20px; }
.item .h3 b { font-weight: 600; }
.item-frase { color: var(--tx-2); font-size: 15px; line-height: 1.5; }
.item-mais { margin-top: auto; padding-top: 6px; }
.item-mais summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; color: var(--az-tx); font-size: 13.5px; font-weight: 500; border-radius: 6px; }
.item-mais summary .icone { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.item-mais[open] summary .icone { transform: rotate(180deg); }
.item-mais p { color: var(--tx-2); font-size: 14.5px; line-height: 1.55; margin-top: 6px; }
.item-mais[open] > p { animation: sobeLeve .35s var(--ease) both; }
.item .resolve { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); color: #CBD2DE; }
.item .resolve span { font-size: 13px; font-weight: 500; color: var(--az-tx); display: block; margin-bottom: 2px; }
.item code { font-size: .86em; color: #fff; background: rgba(92, 141, 255, .12); border: 1px solid rgba(143, 176, 255, .25); padding: 0 5px; border-radius: 5px; white-space: nowrap; letter-spacing: 0; }
.conta { font-variant-numeric: lining-nums tabular-nums; }

.recebe-palco { position: relative; height: 470px; margin: 0 calc(var(--lado) * -1); overflow: hidden; pointer-events: none; }
@media (min-width: 640px) { .recebe-palco { height: 560px; } }
@media (min-width: 1080px) { .recebe-palco { height: 720px; margin: 0 -56px 0 -20px; overflow: visible; } }
.recebe-palco .palco-arco { width: 78%; top: 3%; height: 97%; opacity: .55; }
.recebe-simbolo { position: absolute; left: 50%; top: 0; width: min(88%, 440px); aspect-ratio: 1; transform: translateX(-50%); mix-blend-mode: screen; }
.recebe-simbolo img { width: 100%; animation: gira 16s ease-in-out infinite alternate; }
.recebe-gab { position: absolute; left: 50%; bottom: 0; width: min(100%, 400px); transform: translateX(-50%); aspect-ratio: 1408 / 1500; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent); mask-image: linear-gradient(180deg, #000 74%, transparent); }
@media (min-width: 1080px) { .recebe-gab { width: 520px; } .recebe-simbolo { top: 2%; } }
.recebe-gab .gab-corpo { -webkit-mask-image: none; mask-image: none; }
.flut.r1 { width: 21%; left: 2%; top: 30%; --r: -14deg; --d: 8s; z-index: 3; }
.flut.r2 { width: 16%; right: 2%; top: 10%; --r: 16deg; --d: 10s; --atraso: -4s; --fy: 14px; z-index: 3; }
.flut.r3 { width: 13%; right: 6%; top: 56%; --r: -22deg; --d: 7s; --b: 3px; opacity: .85; z-index: 3; }

/* ================================================================ */
/* 8 · junto no kit (vidro escuro, cartões curtos)                 */
/* ================================================================ */
.junto { display: grid; gap: 14px; }
@media (min-width: 720px) { .junto { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1080px) { .junto { grid-template-columns: repeat(4, 1fr); } }
.junto > div { padding: 26px 22px 22px; display: grid; gap: 6px; align-content: start; }
.junto .idx { font-family: var(--fm); font-size: 13px; color: var(--az-tx); letter-spacing: .02em; }
.junto h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.junto p { color: var(--tx-2); font-size: 15px; line-height: 1.5; }
.junto-fecho { text-align: center; margin-top: 28px; color: var(--tx-2); }
.junto-fecho b { color: #fff; }

/* faixas inclinadas cruzando (Trader): metade clara, metade escura */
.cruzadas { position: relative; height: 200px; overflow: hidden; margin: 0; pointer-events: none; background: var(--bg); }
.cruzada { position: absolute; left: -10%; right: -10%; top: 50%; overflow: hidden; }
.cruzada .faixa-trilho { animation-duration: 48s; }
.cruzada li { display: block; white-space: nowrap; padding: 15px 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: inherit; }
.cruzada li::after { content: ""; display: inline-block; vertical-align: -5px; width: 24px; height: 22px; margin: 0 24px; background: url(img/simbolo3d-alfa-48.webp) center / contain no-repeat; }
.cruzada-az { transform: translateY(-62%) rotate(-3.2deg); background: var(--az-grad); color: #fff; box-shadow: 0 20px 50px -20px rgba(26, 75, 255, .9); z-index: 2; }
.cruzada-az li::after { content: "/"; width: auto; height: auto; vertical-align: 0; background: none; font-weight: 300; color: rgba(255, 255, 255, .55); margin: 0 26px; }
.cruzada-pr { transform: translateY(-38%) rotate(2.4deg); background: var(--prata-grad); color: #0A0D14; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .5); }
.cruzada-pr .faixa-trilho { animation-direction: reverse; }

/* ================================================================ */
/* 9 · para quem é                                                  */
/* ================================================================ */
.paraquem { overflow: hidden; }
.paraquem .paineis { mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.serve { display: grid; gap: 18px; max-width: 960px; margin: 0 auto; }
@media (min-width: 860px) { .serve { grid-template-columns: 1fr 1fr; gap: 24px; } }
.serve-cartao { position: relative; border-radius: 20px; padding: 32px 26px 28px; }
.serve-cartao h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.025em; font-weight: 400; margin-bottom: 20px; text-align: center; }
.serve-cartao h3 b { font-weight: 600; }
.serve-cartao ul { display: grid; gap: 12px; }
.serve-cartao li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.serve-cartao li .icone { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.4; }
.serve-nao { background: var(--prata-grad); color: #11151F; box-shadow: inset 0 1px 0 #fff, 0 30px 60px -30px rgba(0, 0, 0, .9); }
.serve-nao li .icone { color: #11151F; }
.serve-sim { background: linear-gradient(160deg, #1A4BFF 0%, #3366FF 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 30px 70px -24px rgba(26, 75, 255, .85); }
.serve-sim li { font-weight: 450; }
.serve-cartao::before { content: ""; position: absolute; top: -2px; left: 50%; width: 64px; height: 3px; margin-left: -32px; border-radius: 3px; background: var(--az-grad); box-shadow: 0 0 14px rgba(60, 110, 255, .9); }
.serve-sim::before { background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .9); }

/* ================================================================ */
/* 10 · quem fez                                                     */
/* ================================================================ */
.quem { display: grid; gap: 44px; align-items: center; }
@media (min-width: 960px) { .quem { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } }
.quem-foto { position: relative; }
.quem-foto .moldura { border-radius: 22px; aspect-ratio: 3 / 4; border: 1px solid var(--linha-2); box-shadow: 0 0 0 8px rgba(255, 255, 255, .025), 0 40px 80px -30px rgba(26, 75, 255, .55); }
.quem-foto .moldura img { width: 100%; height: 100%; object-fit: cover; }
.quem-foto .moldura::after {
  background:
    linear-gradient(90deg, #1A4BFF, #5C8DFF) 24px 0 / 76px 3px no-repeat,
    linear-gradient(180deg, transparent 55%, rgba(10, 13, 20, .88) 100%),
    radial-gradient(120% 95% at 50% 42%, transparent 60%, rgba(4, 7, 16, .5) 100%);
}
.flut.q1 { width: 28%; right: -9%; top: -7%; --r: 14deg; --d: 9s; z-index: 3; }
.quem-nome { position: absolute; z-index: 2; left: 18px; bottom: 34px; font-size: clamp(64px, 19vw, 150px); line-height: .84; letter-spacing: -.055em; color: #fff; white-space: nowrap; pointer-events: none; }
.quem-nome span { display: block; font-weight: 200; }
.quem-nome b { display: block; font-weight: 700; background: linear-gradient(100deg, #fff 30%, #9DB8FF 75%, #5C8DFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .12em; }
.quem-foto figcaption { margin-top: 12px; font-size: 12.5px; color: var(--tx-3); }
.quem-texto { display: grid; gap: 18px; justify-items: start; }
.quem-texto p:not(.pilula) { color: var(--tx-2); font-size: 16.5px; line-height: 1.65; }
.quem-texto p strong { color: #fff; font-weight: 500; }
.quem-opiniao { color: #fff !important; font-size: 19px !important; line-height: 1.45 !important; letter-spacing: -.01em; padding-left: 18px; border-left: 2px solid var(--az-2); }
.autoridade { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); margin: 6px 0; }
.autoridade div { padding: 16px 14px 14px 0; display: grid; gap: 4px; }
.autoridade div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--linha); }
.autoridade div:nth-child(n+3) { border-top: 1px solid var(--linha); }
.autoridade b { font-size: 30px; font-weight: 300; letter-spacing: -.035em; line-height: 1.05; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.autoridade div > span { font-size: 13.5px; color: var(--tx-2); line-height: 1.4; }
@media (min-width: 640px) {
  .autoridade { grid-template-columns: repeat(4, 1fr); }
  .autoridade div { padding: 16px 16px 14px; border-left: 1px solid var(--linha); border-top: 0 !important; }
  .autoridade div:first-child { padding-left: 0; border-left: 0; }
}
.assinatura { font-family: var(--fm); font-size: 13px; color: var(--tx-3); }
.assinatura b { color: #fff; font-family: var(--f); font-size: 16px; font-weight: 500; margin-right: 6px; }

/* ================================================================ */
/* 11 · antes de comprar (lista em sanfona + coluna fixa)            */
/* ================================================================ */
.req { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .req { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 44px; } }
.req-lista { border-radius: var(--raio); border: 1px solid var(--linha); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); padding: 4px 18px; }
.req-item + .req-item { border-top: 1px solid var(--linha); }
.req-item summary { display: grid; grid-template-columns: 34px 1fr 18px; gap: 14px; align-items: center; padding: 14px 0; cursor: pointer; border-radius: 8px; }
.req-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--az-tx); background: rgba(92, 141, 255, .08); border: 1px solid rgba(143, 176, 255, .22); }
.req-ic .icone { width: 17px; height: 17px; }
.req-item h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: #fff; }
.req-seta { width: 18px; height: 18px; color: var(--tx-3); transition: transform .3s var(--ease); }
.req-item[open] .req-seta { transform: rotate(180deg); color: var(--az-tx); }
.req-item p { padding: 0 0 16px 48px; margin-top: -4px; color: var(--tx-2); font-size: 14.5px; line-height: 1.6; }
.req-lado { display: grid; gap: 16px; }
@media (min-width: 1000px) { .req-lado { position: sticky; top: 96px; } }
.serve-pc { padding: 24px 22px; }
.serve-pc .rotulo { display: block; margin-bottom: 4px; }
.serve-pc h3 { margin-bottom: 4px; }
.serve-pc .passo { margin-top: 16px; }
.serve-pc .passo p { font-size: 14.5px; color: #CBD2DE; margin-bottom: 10px; }
.serve-pc .passo small { display: block; margin-top: 8px; font-size: 13px; color: var(--tx-3); }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes button { border: 1px solid var(--linha-2); background: rgba(255, 255, 255, .03); border-radius: 10px; padding: 10px 14px; cursor: pointer; font-size: 14.5px; color: var(--tx); transition: border-color .2s, background .2s; }
.opcoes button:hover { border-color: rgba(143, 176, 255, .6); }
.opcoes button[aria-pressed="true"] { border-color: var(--az-2); background: rgba(92, 141, 255, .16); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .5); }
.resposta { margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; }
.resposta .icone { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.2; }
.resposta.sim { background: rgba(92, 141, 255, .14); border: 1px solid rgba(143, 176, 255, .45); color: #fff; }
.resposta.nao { background: rgba(255, 255, 255, .06); border: 1px solid var(--linha-2); color: #E6E9EF; }
.custos { padding: 6px 22px 20px; }
.custos table { width: 100%; border-collapse: collapse; font-size: 14px; }
.custos caption { text-align: left; padding: 18px 0 6px; }
.custos th, .custos td { text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--linha); vertical-align: top; line-height: 1.45; }
.custos thead th { font-size: 12.5px; color: var(--tx-3); font-weight: 500; }
.custos tbody th { font-weight: 500; color: #fff; }
.custos td { color: var(--tx-2); }
.custos .obrig { color: var(--az-tx); font-weight: 600; }
.custo-min { margin-top: 14px; font-size: 15px; color: #fff; }
.custo-min span { color: var(--tx-2); }

/* ================================================================ */
/* 12 · oferta: comparação branca ao lado do preço; o checkout       */
/*      continua o cartão de preço na mesma superfície de vidro      */
/* ================================================================ */
.oferta { overflow: clip; }
.oferta-brilho { position: absolute; z-index: -1; left: 50%; top: 200px; width: 1200px; height: 1000px; margin-left: -200px; background: radial-gradient(45% 45% at 50% 40%, rgba(26, 75, 255, .3), transparent 70%); pointer-events: none; }
.oferta-par { display: grid; gap: 20px; max-width: 960px; margin: 0 auto; }
.preco-col { position: relative; display: grid; }
@media (min-width: 900px) {
  .oferta-par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
}
/* símbolo inteiro atrás do cartão de preço, longe do título */
.preco-simbolo { position: absolute; z-index: -1; left: 24%; top: 8%; width: 104%; aspect-ratio: 1; mix-blend-mode: screen; opacity: .55; pointer-events: none; }
.preco-simbolo img { width: 100%; animation: gira 18s ease-in-out infinite alternate; }
@media (max-width: 899px) { .preco-simbolo { left: 30%; top: 2%; width: 90%; } }
.checkout-faixa { max-width: 640px; margin: 40px auto 0; }
@media (min-width: 900px) { .checkout-faixa { margin-top: 64px; } }
.comparacao { position: relative; z-index: 1; background: #fff; color: #0F131C; border-radius: 22px; padding: 30px 26px 24px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); display: flex; flex-direction: column; color-scheme: light; }
.comparacao .rotulo { color: #1A4BFF; }
.comparacao h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin: 6px 0 16px; color: #0A0D14; }
.comparacao :focus-visible { outline-color: #1A4BFF; }
.comp-linha { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 15px 0; border-top: 1px solid #E7EAF0; flex: 1 0 auto; align-content: center; }
.comp-linha strong { font-weight: 600; font-size: 15.5px; }
.comp-linha .custo { text-align: right; font-size: 14px; font-weight: 600; max-width: 190px; line-height: 1.4; }
.comp-linha small { grid-column: 1 / -1; font-size: 13px; color: #59627A; line-height: 1.45; }
.comparacao .pend { color: #8A5A00; border-color: rgba(138, 90, 0, .45); background: rgba(242, 196, 109, .2); }
.comp-nos { margin-top: 6px; margin-bottom: 4px; border-radius: 14px; padding: 15px; border: 0; background: linear-gradient(120deg, rgba(26, 75, 255, .1), rgba(92, 141, 255, .16)); box-shadow: inset 0 0 0 1px rgba(26, 75, 255, .28); }
.comp-nos strong, .comp-nos .custo { color: #1A3FD6; }
.comp-frase { margin-top: 6px; padding-top: 12px; font-size: 14.5px; color: #2B3245; line-height: 1.5; }
.comp-fontes { margin-top: 10px; font-size: 12px; color: #6A7389; line-height: 1.5; }

.preco-cartao {
  position: relative; border-radius: 22px; padding: 30px 24px 26px; scroll-margin-top: 16px;
  background: linear-gradient(180deg, rgba(20, 30, 58, .9) 0%, rgba(11, 15, 26, .96) 26%, rgba(11, 15, 26, .97) 100%);
  border: 1px solid rgba(143, 176, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 6px rgba(92, 141, 255, .05), 0 40px 90px -30px rgba(26, 75, 255, .7);
  display: flex; flex-direction: column; gap: 16px; height: 100%;
}
@media (min-width: 640px) { .preco-cartao { padding: 34px 32px 30px; } }
.preco-cartao::before { content: ""; position: absolute; top: -2px; left: 32px; width: 96px; height: 4px; border-radius: 4px; background: var(--az-grad); box-shadow: 0 0 18px 3px rgba(60, 110, 255, .9); }
.preco-cartao .marca-preco img { height: 30px; width: auto; }
.preco-desc { font-size: 13px; color: #B9C1D0; line-height: 1.5; }
.preco-linha { color: #CBD2DE; font-size: 15.5px; }
.preco-cartao .checks li { font-size: 14.5px; }
.preco-caixa { border-radius: 16px; padding: 20px; text-align: center; background: radial-gradient(70% 90% at 50% 0%, rgba(92, 141, 255, .24), transparent 70%), rgba(255, 255, 255, .03); border: 1px solid var(--linha-2); }
.preco-valor { display: flex; align-items: flex-start; justify-content: center; gap: 4px; line-height: 1; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.preco-valor .moeda { font-size: 22px; font-weight: 400; margin-top: 12px; }
.preco-valor .inteiro { font-size: 92px; font-weight: 600; letter-spacing: -.05em; }
.preco-valor .cent { font-size: 22px; font-weight: 400; margin-top: 12px; color: var(--tx-2); }
.preco-parc { margin-top: 10px; font-size: 13.5px; color: var(--tx-2); line-height: 1.5; }
.preco-prazo { margin: 12px auto 0; max-width: 420px; font-size: 13.5px; line-height: 1.45; color: #FFE6D6; padding: 8px 12px; border-radius: 10px; background: rgba(255, 106, 0, .14); border: 1px solid rgba(255, 106, 0, .55); }
.preco-apoio { display: grid; gap: 6px; font-size: 13px; color: #B9C1D0; }
.preco-apoio li { display: flex; gap: 8px; align-items: flex-start; }
.preco-apoio li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; margin-top: 7px; background: var(--az-2); box-shadow: 0 0 8px rgba(92, 141, 255, .9); }

/* checkout dentro do cartão de preço */
.checkout-painel { position: relative; display: grid; gap: 14px; padding: 26px 18px 22px; border-radius: 22px; scroll-margin-top: 16px;
  background: linear-gradient(180deg, rgba(20, 30, 58, .85) 0%, rgba(11, 15, 26, .96) 22%); border: 1px solid rgba(143, 176, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 90px -40px rgba(26, 75, 255, .6); }
.checkout-painel::before { content: ""; position: absolute; top: -2px; left: 28px; width: 76px; height: 4px; border-radius: 4px; background: var(--az-grad); box-shadow: 0 0 16px 2px rgba(60, 110, 255, .85); }
@media (min-width: 640px) { .checkout-painel { padding: 32px 30px 26px; } }
.checkout-cab { display: grid; gap: 4px; }
.antes-pagar { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: #CBD2DE; padding: 14px; border-radius: 14px; background: rgba(92, 141, 255, .08); border: 1px solid rgba(143, 176, 255, .25); }
.antes-pagar .icone { color: var(--az-tx); margin-top: 2px; }
.antes-pagar a { color: var(--az-tx); text-underline-offset: 3px; }
.confianca { display: grid; gap: 8px; }
.confianca li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 13px; color: var(--tx-3); line-height: 1.5; }
.confianca .icone { width: 16px; height: 16px; color: var(--az-tx); margin-top: 2px; }

/* componente de checkout (classes ck-* de /js/checkout.js): só visual, superfície de vidro escuro */
.checkout-superficie {
  --cartao: rgba(255, 255, 255, .03); --texto: #F2F4F8; --texto-suave: #A9B0BF; --borda: rgba(255, 255, 255, .1); --destaque: #5C8DFF; --destaque-texto: #fff;
  --sucesso: #B9C8EA; --erro: #FF9A8F; --bump: rgba(92, 141, 255, .07); --bump-borda: rgba(143, 176, 255, .45); --raio-ck: 14px;
  color: var(--texto); font-size: 16px; line-height: 1.5; scroll-margin-top: 16px;
}
.checkout-superficie a { color: var(--az-tx); }
.checkout-superficie h2 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 10px; color: var(--texto); }
.ck { display: grid; gap: 12px; }
.checkout-superficie #checkout { display: grid; gap: 12px; }
.ck-bloco { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-ck); padding: 18px; }
@media (min-width: 640px) { .ck-bloco { padding: 20px 22px; } }
.ck-carregando { color: var(--texto-suave); text-align: center; padding: 24px 0; }
.ck-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ck-resumo .ck-linha strong { font-variant-numeric: lining-nums tabular-nums; }
.ck-bumps { display: grid; gap: 10px; margin: 16px 0; }
.ck-bump { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px; border: 1.5px dashed var(--bump-borda); background: var(--bump); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.ck-bump.marcado { border-style: solid; border-color: #5C8DFF; background: rgba(92, 141, 255, .14); box-shadow: 0 0 0 3px rgba(92, 141, 255, .18); }
.ck-bump input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #5C8DFF; }
.ck-bump-texto { display: grid; gap: 3px; }
/* bumps com nome de rascunho no catálogo: escondidos até terem nome (lp.js); com ?pendentes=1, aparecem marcados */
.ck-bump.ck-bump-rascunho, .ck-bumps.ck-bumps-vazio { display: none; }
.ck-bump.pend-bump { outline: 1px dashed var(--pend); outline-offset: 3px; }
.ck-bump-texto strong { font-size: 15px; }
.ck-bump-texto span { color: var(--texto-suave); font-size: 14px; }
.ck-bump-preco { font-weight: 700; white-space: nowrap; color: var(--az-tx); }
@media (max-width: 520px) { .ck-bump { grid-template-columns: auto 1fr; } .ck-bump-preco { grid-column: 2; } }
.ck-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; font-size: 16px; }
.ck-total-valor { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.ck-parcelas { margin: 4px 0 0; text-align: right; color: var(--texto-suave); font-size: 14px; }
.ck-garantia { margin: 8px 0 0; text-align: right; color: var(--sucesso); font-size: 13.5px; }
.ck-campo label { display: block; font-weight: 500; font-size: 14.5px; margin: 14px 0 6px; color: var(--texto); }
.ck-campo input { width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(5, 8, 16, .65); color: #fff; transition: border-color .2s, box-shadow .2s; }
.ck-campo input::placeholder { color: var(--tx-3); }
.ck-campo input:hover { border-color: rgba(143, 176, 255, .4); }
.ck-campo input:focus { outline: none; border-color: #5C8DFF; box-shadow: 0 0 0 4px rgba(92, 141, 255, .25); }
.ck-campo input[aria-invalid] { border-color: var(--erro); }
.ck-campo small { display: block; color: var(--texto-suave); font-size: 13px; margin-top: 5px; }
.ck-erro { display: block; color: var(--erro); font-size: 13.5px; min-height: 1em; margin-top: 4px; }
.ck-lgpd { font-size: 13px; color: var(--texto-suave); margin: 16px 0; line-height: 1.55; }
.ck-msg { color: var(--erro); font-weight: 600; min-height: 1em; margin: 12px 0 0; font-size: 14.5px; }
.ck-msg:empty { display: none; }
.ck-resumo-dados { margin: 0; color: var(--texto-suave); font-size: 14px; overflow-wrap: anywhere; }
/* o Payment Brick do Mercado Pago é claro: fica num cartão branco dentro do vidro */
.ck-brick { margin-top: 12px; min-height: 120px; background: #fff; color: #0F131C; border-radius: 12px; padding: 6px; color-scheme: light; }
.ck-brick .ck-carregando, .ck-brick .ck-msg { color: #4F586C; }
.ck-salvar-cartao { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--texto-suave); margin-top: 12px; }
.ck-salvar-cartao input { accent-color: #5C8DFF; margin-top: 3px; }
.ck-selo { font-size: 12.5px; color: var(--texto-suave); text-align: center; margin: 14px 0 0; }
.ck-termos { font-size: 13px; color: var(--texto-suave); margin: 14px 0 0; }
.ck-turnstile:empty { display: none; }
.ck-turnstile { margin: 12px 0; }
.ck-sugestao { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14px; background: var(--bump); border: 1px solid rgba(143, 176, 255, .25); border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
.ck-analise { text-align: center; }
.ck-pix { text-align: center; }
.ck-pix-valor { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.ck-qr { display: block; margin: 0 auto 12px; width: 220px; height: 220px; image-rendering: pixelated; border: 8px solid #fff; border-radius: 12px; background: #fff; box-sizing: content-box; }
.ck-passos { text-align: left; color: var(--texto-suave); font-size: 14.5px; padding-left: 20px; list-style: decimal; display: grid; gap: 4px; margin: 0 0 14px; }
.ck-copiacola { width: 100%; font: 13px/1.4 var(--fm); padding: 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; resize: none; margin-bottom: 10px; background: rgba(5, 8, 16, .65); color: #fff; }
.ck-pix .botao { width: 100%; }
.ck-tempo { color: var(--texto-suave); margin: 10px 0; }
.ck-aguardando { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--texto-suave); font-size: 14.5px; }
.ck-girando { width: 14px; height: 14px; border: 2px solid var(--borda); border-top-color: var(--destaque); border-radius: 50%; animation: ck-gira 1s linear infinite; }
@keyframes ck-gira { to { transform: rotate(360deg); } }
.ck-expirado { background: rgba(255, 120, 110, .08); border: 1px solid rgba(255, 154, 143, .35); border-radius: 10px; padding: 12px; margin-top: 12px; }
.checkout-superficie .botao { display: inline-flex; align-items: center; justify-content: center; appearance: none; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font: inherit; font-weight: 600; font-size: 16px; padding: 14px 20px; border-radius: 12px; color: #0A0D14;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6E9EF 55%, #CBD1DB 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(10, 13, 20, .12), 0 14px 30px -12px rgba(40, 90, 255, .75); transition: filter .2s, box-shadow .2s; }
.checkout-superficie .botao:hover { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(143, 176, 255, .9), 0 18px 40px -10px rgba(60, 110, 255, .95); }
.checkout-superficie .botao:disabled { opacity: .6; cursor: wait; }
.checkout-superficie .botao-grande { width: 100%; min-height: 56px; font-size: 17px; margin-top: 4px; }
.checkout-superficie .link { appearance: none; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; color: var(--az-tx); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.checkout-superficie .pend { color: var(--pend); }

/* aviso de cookies (o componente põe no fim do body): compacto, colado no pé; a barra fixa sobe por cima dele */
.ck-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: rgba(13, 18, 34, .97); color: var(--tx); border-top: 1px solid rgba(143, 176, 255, .35); box-shadow: 0 -20px 50px rgba(0, 0, 0, .5); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); font-size: 12.5px; line-height: 1.45; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ck-cookies p { margin: 0; color: #CBD2DE; flex: 1 1 260px; }
.ck-cookies a { color: var(--az-tx); }
.ck-cookies-acoes { display: flex; gap: 8px; flex: none; }
.ck-cookies .botao { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; padding: 9px 16px; border-radius: 10px; color: #0A0D14; background: linear-gradient(180deg, #fff, #D5DAE3); }
.ck-cookies .botao-secundario { color: var(--tx); background: transparent; box-shadow: inset 0 0 0 1px var(--linha-2); }
@media (min-width: 900px) { .ck-cookies { left: 16px; right: auto; bottom: 16px; max-width: 620px; border: 1px solid rgba(143, 176, 255, .35); border-radius: 16px; padding: 14px 18px; } }

/* ================================================================ */
/* 13 · garantia                                                     */
/* ================================================================ */
.garantia { text-align: center; padding-top: 72px; }
.medalha-wrap { position: relative; width: 264px; margin: 0 auto 30px; }
.medalha-wrap::before { content: ""; position: absolute; left: -45%; right: -45%; top: -20%; bottom: -5%; background: radial-gradient(45% 45% at 50% 42%, rgba(40, 95, 255, .55), transparent 70%); z-index: -1; }
.medalha-wrap::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -14px; height: 34px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(70, 120, 255, .75), rgba(26, 75, 255, 0) 70%); filter: blur(4px); z-index: -1; }
.medalha { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); }
.medalha-wrap > .medalha { animation: flutua 6s ease-in-out infinite alternate; --fx-f: 0px; --fy: -8px; --rr: 0deg; }
.garantia .sec-cab { margin-bottom: 24px; }
.garantia-texto { max-width: 720px; margin: 0 auto; color: #CBD2DE; font-size: 17px; line-height: 1.65; }
.garantia-pequena { max-width: 720px; margin: 20px auto 0; display: grid; gap: 6px; font-size: 14px; color: var(--tx-2); }
.garantia-pequena li::before { content: "· "; color: var(--az-tx); }
.redes { margin: 44px auto 0; max-width: 960px; display: grid; gap: 14px; text-align: left; }
.redes > p { text-align: center; color: #fff; font-weight: 500; margin-bottom: 4px; }
.redes-grade { display: grid; gap: 14px; }
@media (min-width: 860px) { .redes-grade { grid-template-columns: repeat(2, 1fr); } }
.redes-grade div { padding: 22px; font-size: 15px; color: var(--tx-2); }
.redes-grade .rotulo { display: block; margin-bottom: 6px; }

/* ================================================================ */
/* 14 · perguntas frequentes (linhas com seta, Blue Growth)          */
/* ================================================================ */
.faq { display: grid; gap: 0; align-items: start; max-width: 960px; margin: 0 auto; }
@media (min-width: 980px) { .faq { grid-template-columns: 1fr 1fr; gap: 0 48px; } }
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.faq-item summary { cursor: pointer; display: grid; grid-template-columns: 1fr 18px; gap: 16px; align-items: center; padding: 16px 2px; font-size: 15.5px; font-weight: 500; color: #E9EDF4; line-height: 1.4; letter-spacing: -.01em; transition: color .2s; }
.faq-item summary:hover { color: #fff; }
.faq-item summary .icone { width: 18px; height: 18px; color: var(--az-tx); transition: transform .3s var(--ease); }
.faq-item[open] summary .icone { transform: rotate(180deg); }
.faq-item[open] summary { color: #fff; }
.faq-item summary:focus-visible { outline-offset: 2px; border-radius: 6px; }
.faq-r { padding: 0 2px 18px; color: var(--tx-2); font-size: 15px; line-height: 1.65; }
.faq-r a { color: var(--az-tx); }
.faq-item[open] .faq-r { animation: sobeLeve .35s var(--ease) both; }

/* ================================================================ */
/* 15 · fechamento                                                   */
/* ================================================================ */
.fecho { text-align: center; overflow: hidden; padding: 130px 0 140px; }
.fecho-simbolo { position: absolute; z-index: -1; left: 50%; top: 50%; width: 820px; margin: -410px 0 0 -410px; opacity: .3; pointer-events: none; mix-blend-mode: screen; }
.fecho-simbolo img { width: 100%; animation: gira 16s ease-in-out infinite alternate; }
.fecho::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(34% 40% at 50% 46%, rgba(10, 13, 20, .7), rgba(10, 13, 20, .25) 70%, transparent); }
.fecho .h2 { font-size: clamp(38px, 9vw, 76px); max-width: 960px; margin: 0 auto; }
@media (min-width: 1200px) { .fecho .h2 { font-weight: 300; } }
.fecho .sub { margin: 24px auto 32px; text-align: center; }
.fecho .micro { margin-top: 18px; font-size: 13.5px; color: #B9C1D0; }
.fecho .micro a { color: var(--az-tx); text-underline-offset: 3px; }

/* ================================================================ */
/* 16 · rodapé                                                       */
/* ================================================================ */
.rodape-lp { border-top: 1px solid var(--linha); background: #080B11; padding: 56px 0 120px; font-size: 13.5px; line-height: 1.6; color: var(--tx-2); }
@media (min-width: 900px) { .rodape-lp { padding-bottom: 60px; } }
.rodape-marca img { height: 22px; width: auto; margin-bottom: 22px; opacity: .9; }
.rodape-destaque { color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -.005em; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--linha); max-width: 820px; }
.rodape-destaque span { display: block; margin-top: 6px; color: var(--tx-2); font-size: 13.5px; font-weight: 400; }
.rodape-grade { display: grid; gap: 24px; }
@media (min-width: 900px) { .rodape-grade { grid-template-columns: repeat(2, 1fr); gap: 28px 56px; } }
.rodape-grade h2 { font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: #fff; margin-bottom: 6px; }
.rodape-links { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--linha); display: grid; gap: 8px; }
.rodape-lp .rodape { padding: 0; text-align: left; color: var(--tx-2); font-size: 13.5px; }
.rodape-lp .rodape p { margin: 4px 0; }
.rodape-lp .rodape strong { color: #fff; font-weight: 500; }
.rodape-lp a { color: #CBD2DE; text-underline-offset: 3px; }
.rodape-final { margin-top: 24px; color: var(--tx-3); font-size: 12.5px; }

/* ================================================================ */
/* 17 · barra fixa no celular                                       */
/* ================================================================ */
.barra-fixa { position: fixed; z-index: 85; left: 0; right: 0; bottom: var(--ck-cookies-h, 0px); min-height: 68px; height: auto; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(11, 14, 20, .94); border-top: 1px solid rgba(143, 176, 255, .28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateY(calc(110% + var(--ck-cookies-h, 0px))); transition: transform .35s var(--ease); }
.barra-fixa.visivel { transform: none; }
.com-cookies .barra-fixa { padding-bottom: 10px; }
.barra-fixa .bf-nome { display: grid; line-height: 1.2; }
.barra-fixa .bf-nome b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.barra-fixa .bf-nome span { font-size: 12px; color: var(--tx-3); white-space: nowrap; }
.barra-fixa .btn { min-height: 48px; padding: 5px 5px 5px 18px; font-size: 15.5px; gap: 12px; border-radius: 12px; white-space: nowrap; flex: none; }
.barra-fixa .btn-seta { width: 38px; height: 38px; border-radius: 9px; }
@media (min-width: 900px) { .barra-fixa { display: none; } }

/* ---------- reduzir movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-revela], .js [data-titulo] .t-caixa, .js [data-titulo] .t-nitido, .js .num dt { opacity: 1 !important; transform: none !important; }
  .js [data-titulo] .t-borrado, .topo-titulo .t-borrado { opacity: 0 !important; }
  .pedido-texto .p { opacity: 1 !important; }
  .faixa-trilho { transform: none !important; }
}

/* ---------- celular: menos rolagem sem tirar conteúdo ---------- */
@media (max-width: 639px) {
  .item { padding: 22px 18px 10px; gap: 6px; }
  .item-ic { position: absolute; right: 18px; top: 22px; margin: 0; }
  .item .rotulo { padding-right: 36px; }
  .formato-quadro { max-width: 200px; }
  .lt-midia img { aspect-ratio: 16 / 10; }
  .lt-num { font-size: 44px; margin-bottom: 12px; }
  .lt { gap: 30px; }
  .metodo-cab { margin-bottom: 32px; }
  .custos { padding: 4px 16px 18px; }
  .custos table { font-size: 13.5px; }
  .custos th, .custos td { padding: 9px 6px 9px 0; }
}

/* ---------- "Ver detalhes" dos formatos e dos custos ---------- */
.fmt-mais, .custos-mais { margin-top: 10px; }
.fmt-mais summary, .custos-mais summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; color: var(--az-tx); font-size: 13.5px; font-weight: 500; border-radius: 6px; }
.fmt-mais summary .icone, .custos-mais summary .icone { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.fmt-mais[open] summary .icone, .custos-mais[open] summary .icone { transform: rotate(180deg); }
.fmt-mais .checks { margin-top: 8px; }
.fmt-mais .formato-nota { margin-top: 12px; }
.custos .rotulo { display: block; padding-top: 18px; }
.custos .custo-min { margin-top: 6px; }
.custos-mais table { margin-top: 6px; }

/* ---------- celular: comparação em uma coluna, quadros menores, seções mais curtas ---------- */
@media (max-width: 639px) {
  .sec { padding: 64px 0; }
  .comp-linha { grid-template-columns: 1fr; gap: 2px; }
  .comp-linha .custo { text-align: left; max-width: none; font-weight: 500; }
  .formato .formato-quadro { max-width: 150px; }
}

/* ================================================================ */
/* topo claro (?topo=claro, Trader): mesmo conteúdo, fundo prata     */
/* claro; o símbolo troca para a versão com alfa (sem blend)         */
/* ================================================================ */
.marca-clara, .simb-alfa { display: none; }
.palco-simbolo .simb-alfa { position: absolute; inset: 0; }
[data-topo="claro"] .marca-escura { display: none; }
[data-topo="claro"] .marca-clara { display: block; }
[data-topo="claro"] .barra { border-bottom-color: rgba(10, 13, 20, .08); }
[data-topo="claro"] .barra-nav a { color: #4B5466; }
[data-topo="claro"] .barra-nav a:hover { color: #0A0D14; }
[data-topo="claro"] .barra .btn-borda { color: #0A0D14; border-color: rgba(10, 13, 20, .16); background: rgba(255, 255, 255, .6); }
[data-topo="claro"] .topo-wrap { background: radial-gradient(55% 60% at 74% 52%, rgba(26, 75, 255, .16), rgba(26, 75, 255, 0) 70%), linear-gradient(180deg, #F7F8FB 0%, #ECEFF5 100%); color-scheme: light; }
[data-topo="claro"] .topo-wrap::after { height: 90px; background: linear-gradient(180deg, rgba(236, 239, 245, 0), #ECEFF5); }
[data-topo="claro"] .topo-paineis { opacity: .28; }
[data-topo="claro"] .topo-titulo .l-leve { color: #2B3245; }
[data-topo="claro"] .topo-titulo b, [data-topo="claro"] .topo-titulo b.l { color: #0A0D14; }
[data-topo="claro"] .topo-sub { color: #4B5466; }
[data-topo="claro"] .topo-sub strong { color: #0A0D14; }
[data-topo="claro"] .pilula-topo { color: #3B4252; border-color: #D7DDE8; background: #fff; box-shadow: 0 6px 18px -10px rgba(26, 75, 255, .35); }
[data-topo="claro"] .pil-chip { color: #1A3FD6; background: rgba(26, 75, 255, .1); box-shadow: inset 0 0 0 1px rgba(26, 75, 255, .25); }
[data-topo="claro"] .topo .btn { color: #fff; background: linear-gradient(180deg, #1B2233 0%, #0A0D14 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 34px -12px rgba(26, 75, 255, .6); }
[data-topo="claro"] .topo .btn-texto { color: #3B4252; }
[data-topo="claro"] .topo .btn-texto:hover { color: #0A0D14; }
[data-topo="claro"] .topo :focus-visible { outline-color: #1A4BFF; }
[data-topo="claro"] .palco-simbolo { mix-blend-mode: normal; }
[data-topo="claro"] .palco-simbolo picture { display: none; }
[data-topo="claro"] .palco-simbolo .simb-alfa { display: block; filter: drop-shadow(0 30px 40px rgba(26, 75, 255, .35)); }
[data-topo="claro"] .palco-arco { color: #1A4BFF; opacity: .45; }
[data-topo="claro"] .palco .flut { display: none; }
[data-topo="claro"] .faixa-reta { border-top-color: rgba(26, 75, 255, .2); }
@media (max-width: 899px) { .loop-selo { font-size: 9.5px; padding: 2px 6px; max-width: calc(100% - 46px); text-wrap: balance; } .loop-pausa { width: 28px; height: 28px; } }

/* Última chance do checkout (janela por cima) */
.ck-uc-fundo { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(3, 5, 10, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ck-uc-entra .2s ease-out; }
.ck-uc { width: min(440px, 100%); display: grid; gap: 10px; padding: 26px 22px 18px; border-radius: 20px; text-align: center; color: #F2F4F8; background: #11161F; border: 1px solid rgba(255, 122, 0, .55); box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 106, 0, .18); animation: ck-uc-sobe .28s cubic-bezier(.2, .8, .2, 1); }
.ck-uc-chip { justify-self: center; margin: 0; padding: 5px 12px; border-radius: 99px; background: linear-gradient(90deg, #FF4D00, #FF7A00); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.ck-uc h2 { margin: 4px 0 0; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.ck-uc-de { margin: 0; font-size: 15px; color: #A9B0BF; }
.ck-uc-de s { color: #7E8696; }
.ck-uc-de strong { color: #FFB27A; font-size: 18px; }
.ck-uc-desc { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: #A9B0BF; }
.ck-uc .botao { width: 100%; min-height: 52px; }
.ck-uc-nao { justify-self: center; margin-top: 2px; padding: 8px; background: none; border: 0; color: #A9B0BF; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@keyframes ck-uc-entra { from { opacity: 0; } }
@keyframes ck-uc-sobe { from { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .ck-uc-fundo, .ck-uc { animation: none; } }
.ck-uc .botao { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; cursor: pointer; font: 700 16px/1.2 inherit; font-family: inherit; color: #fff; background: linear-gradient(90deg, #FF4D00, #FF7A00); box-shadow: 0 14px 34px -10px rgba(255, 106, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ck-uc .botao:hover { filter: brightness(1.06); }

/* ---------- topo com a VSL horizontal 16:9 (13/10/2026) ----------
   A tela de vidro fica larga, o símbolo 3D inteiro atrás aparece acima dela (as barras saem por cima e pelos lados)
   e quatro cópias pequenas flutuam em profundidades diferentes: duas nítidas na frente, duas desfocadas atrás. */
.palco-largo {
  --tw: calc(100vw - var(--lado) * 2);
  --th: calc((var(--tw) - 14px) * 9 / 16 + 14px);
  --ls: calc(var(--tw) * 1.06);
  --ft: calc(var(--ls) * .2);
  height: calc(var(--ft) + var(--th) + 22px); margin: 0;
}
@media (min-width: 900px) {
  .palco-largo {
    --tw: clamp(420px, 41vw, 590px);
    --ls: calc(var(--tw) * 1.22);
    --ft: calc(var(--ls) * .21);
    --comp: calc(var(--ft) + var(--th));
    height: auto; min-height: calc(var(--comp) + 120px);
  }
}
.palco-largo .telas { left: 50%; top: var(--ft); width: var(--tw); height: var(--th); margin-left: calc(var(--tw) / -2); }
@media (min-width: 900px) { .palco-largo .telas { top: calc((100% - var(--comp)) / 2 + var(--ft)); } }
.palco-largo .palco-simbolo { left: 50%; right: auto; margin-left: calc(var(--ls) / -2); top: calc(var(--ft) - var(--ls) * .36); }
@media (min-width: 900px) { .palco-largo .palco-simbolo { top: calc((100% - var(--comp)) / 2 + var(--ft) - var(--ls) * .36); } }
.palco-largo .palco-arco { display: none; }
.palco-largo .tela-frente { border-radius: calc(var(--tw) * .045); }
.palco-largo .tela-tela { border-radius: calc(var(--tw) * .045 - 7px); }
.palco-largo .loop-video { object-fit: cover; }
.palco-largo .vsl-ouvir { top: auto; bottom: 7%; transform: translateX(-50%); }
@media (max-width: 899px) {
  .palco-largo .vsl-ouvir { padding: 10px 14px; gap: 3px; }
  .palco-largo .vsl-ouvir-ic { width: 30px; height: 30px; }
  .palco-largo .vsl-ouvir b { font-size: 14px; }
}

/* cópias flutuantes */
.palco-largo .flut.f2 { width: 58px; left: 1%; top: 6%; right: auto; bottom: auto; --r: 18deg; --d: 9s; --atraso: -3s; --fy: 14px; opacity: .95; }
.palco-largo .flut.f4 { width: 46px; right: 0; top: 16%; left: auto; --r: -16deg; --d: 7.5s; --atraso: -1s; --fy: -16px; --rr: -8deg; opacity: .95; }
.palco-largo .flut.f3 { width: 92px; right: 3%; bottom: 2%; left: auto; top: auto; --r: -12deg; --d: 12s; --b: 5px; opacity: .55; }
.palco-largo .flut.f5 { width: 60px; left: 4%; bottom: 8%; top: auto; --r: 24deg; --d: 11s; --atraso: -5s; --b: 3px; opacity: .6; }
@media (max-width: 899px) {
  .palco-largo .flut.f2 { width: 34px; left: 0; top: 2%; }
  .palco-largo .flut.f4 { width: 28px; right: 0; top: 10%; }
  .palco-largo .flut.f3, .palco-largo .flut.f5 { display: none; }
}
@media (min-width: 900px) {
  .palco-largo .flut.f2 { left: -2%; top: 14%; width: 64px; }
  .palco-largo .flut.f4 { right: -3%; top: 20%; width: 50px; }
}
@media (prefers-reduced-motion: reduce) { .palco-largo .flut img { animation: none; } }
/* computador: a tela fica à esquerda do palco e o símbolo à direita, maior; o fim das três barras
   aparece fora da tela e o logo continua legível */
@media (min-width: 900px) {
  .palco-largo { --tw: clamp(380px, 33vw, 500px); --ls: calc(var(--tw) * 1.18); --ft: calc(var(--ls) * .12); }
  .palco-largo .telas { left: 0; margin-left: 0; }
  .palco-largo .palco-simbolo { left: auto; right: -14%; margin-left: 0; top: calc((100% - var(--comp)) / 2 + var(--ft) + var(--th) / 2 - var(--ls) / 2 - var(--ls) * .06); }
}
.palco-largo .loop-rotulo { display: none; }
/* celular: a tela um pouco mais estreita à esquerda e o símbolo à direita, para o fim das barras aparecer */
@media (max-width: 899px) {
  .palco-largo { --tw: calc(100vw - var(--lado) * 2 - 46px); --ls: calc(var(--tw) * 1.12); --ft: calc(var(--ls) * .1); height: calc(var(--ft) + var(--th) + 40px); }
  .palco-largo .telas { left: 0; margin-left: 0; }
  .palco-largo .palco-simbolo { left: auto; right: -20%; margin-left: 0; top: calc(var(--ft) + var(--th) / 2 - var(--ls) / 2 - var(--ls) * .06); }
  .palco-largo .flut.f2 { left: auto; right: 4%; top: 0; }
  .palco-largo .flut.f4 { right: 1%; top: auto; bottom: 0; }
}
@media (max-width: 899px) {
  .palco-largo { --ft: calc(var(--ls) * .16); }
  .palco-largo .palco-simbolo { top: calc(var(--ft) + var(--th) / 2 - var(--ls) / 2 + var(--ls) * .02); }
  .palco-largo .flut.f2 { right: auto; left: -1%; top: auto; bottom: 2px; width: 30px; }
}

/* preço e garantia logo abaixo do botão do topo (13/10/2026) */
.topo-preco { flex-basis: 100%; margin: 6px 0 0; font-size: 14px; color: var(--tx-3); }
.topo-preco span { color: var(--tx); font-weight: 600; }
@media (max-width: 899px) {
  .topo-grade { grid-template-areas: "pil" "tit" "palco" "acoes" "preco" "mais" "sub"; }
  .topo-preco { grid-area: preco; justify-self: center; text-align: center; margin: -4px 0 0; position: relative; z-index: 4; }
}