/* Guia Completo do Time Comercial: versão escura.
   Fundo quase preto, cards grafite com borda fina, Geist. Azul só em detalhes e sempre com brilho.
   Movimento: entrada das seções ao rolar (app.js), mockup flutuando, reflexo no botão, letreiro.
   Ordem das dobras: KN.LAB "Low ao High" (12 dobras, sem botão na primeira). */
:root {
  --bg: #060708;
  --panel: #0c0e11;
  --panel-border: rgba(255, 255, 255, .07);
  --card: #121418;
  --tile: #181b20;
  --fg: #f4f5f7;
  --soft: #a9adb5;
  --muted: #7b7f88;
  --line: rgba(255, 255, 255, .09);
  --rowline: rgba(255, 255, 255, .07);
  --azul: #3b82f6;
  --navy: #8fb8ff;                      /* azul claro dos detalhes (texto, ícones, números) */
  --navy-escuro: #0a1220;
  --navy-g: linear-gradient(180deg, #4a8cff 0%, #2563eb 55%, #1d3f9e 100%);
  --navy-suave: rgba(59, 130, 246, .12);
  --brilho: 0 0 0 1px rgba(147, 197, 253, .22) inset, 0 10px 34px -8px rgba(59, 130, 246, .6);
  --brilho-txt: 0 0 22px rgba(59, 130, 246, .55);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -26px rgba(0, 0, 0, .9);
  --shadow-hi: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -28px rgba(0, 0, 0, .95);
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 14px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 var(--font); letter-spacing: -.01em; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font: 12px ui-monospace, Menlo, monospace; background: var(--tile); padding: 1px 5px; border-radius: 6px; }
::selection { background: #2563eb; color: #fff; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: var(--bg); }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.estreito { max-width: 760px; margin-left: auto; margin-right: auto; }
.centro { text-align: center; }
.nw { white-space: nowrap; }

.pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--fg); color: #fff; padding: 10px 16px; border-radius: 999px; }
.pular:focus { left: 8px; }

.aviso-dev {
  position: relative; z-index: 60; background: #241c06; color: #f3d27a; border-bottom: 1px solid #4a3a10;
  font-size: 13px; text-align: center; padding: 8px 16px;
}
.aviso-dev code { background: rgba(255, 255, 255, .08); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--navy-g); color: #fff; text-decoration: none; font-weight: 600; letter-spacing: -.01em;
  border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 0 0 1px rgba(147, 197, 253, .3), 0 12px 36px -8px rgba(59, 130, 246, .7);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%); animation: reflexo 3.8s ease-in-out infinite;
}
.btn { animation: pulso 2.6s ease-in-out infinite; }
.btn:hover { animation-play-state: paused; }
@keyframes pulso {
  0%, 100% { transform: scale(1); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 0 0 1px rgba(147, 197, 253, .3), 0 12px 36px -8px rgba(59, 130, 246, .7); }
  50% { transform: scale(1.025); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 0 0 1px rgba(147, 197, 253, .5), 0 14px 50px -6px rgba(59, 130, 246, .95); }
}
@keyframes reflexo { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 0 0 1px rgba(147, 197, 253, .45), 0 16px 46px -8px rgba(59, 130, 246, .85); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-lg { min-height: 58px; padding: 14px 28px; font-size: 17px; text-align: center; }
.btn-bloco { width: 100%; }
.btn.pendente { cursor: not-allowed; }

.micro { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* ---------- Topo (só a marca) ---------- */
.topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(6, 7, 8, .72);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.topo.rolou { border-bottom-color: var(--line); }
.topo-in { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.marca img { width: 76px; }
.topo-tag { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.topo-btn { height: 38px; padding: 0 16px; font-size: 13.5px; gap: 6px; }
.topo-btn svg { width: 15px; height: 15px; }

/* Faixa da promoção (congelada junto com o topo) */
.marca-topo { padding: 20px 0 8px; }
.marca-topo .wrap { display: flex; justify-content: center; }
.topo { background: linear-gradient(90deg, rgba(255, 77, 79, .14), rgba(59, 130, 246, .12) 70%, rgba(255, 77, 79, .08)), rgba(6, 7, 8, .8); border-top: 1px solid rgba(255, 255, 255, .05); }
.urgencia-in { min-height: 54px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding-top: 8px; padding-bottom: 8px; }
.urg-txt { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; font-size: 13px; color: var(--soft); text-align: center; line-height: 1.3; }
.urg-txt > b { color: #fff; font-weight: 600; }
.urg-ponto { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 0 rgba(255, 77, 79, .7); animation: urg 1.6s ease-out infinite; }
@keyframes urg { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 79, .7); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 77, 79, 0); } }
.urg-de s { color: var(--muted); }
.urg-de b { color: var(--navy); text-shadow: var(--brilho-txt); }
.urg-tempo b { color: #ff7a7c; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Pop-up de compra */
.modal { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid rgba(143, 184, 255, .25); border-radius: var(--r-xl); background: var(--card); color: var(--fg); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .9), 0 0 70px -20px rgba(59, 130, 246, .55); overflow: auto; }
.modal::backdrop { background: rgba(3, 4, 6, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[open] { animation: modal-entra .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-form { position: relative; display: grid; gap: 14px; padding: 30px 24px 24px; text-align: center; }
.modal-fechar { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--tile); color: var(--soft); cursor: pointer; }
.modal-fechar:hover { color: var(--fg); }
.modal-capa { width: 92px; margin: 0 auto -4px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 24px rgba(59, 130, 246, .35)); }
.modal .eyebrow { margin: 0 auto; }
.modal h2 { font-size: 1.45rem; }
.modal-sub { margin-top: -6px; font-size: 14.5px; color: var(--soft); }
.modal-sub b { color: var(--fg); }
.campo { display: grid; gap: 6px; text-align: left; font-size: 13px; font-weight: 500; color: var(--soft); }
.campo input { height: 50px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: 500 16px var(--font); outline: none; transition: border-color .15s, box-shadow .15s; }
.campo input::placeholder { color: #4d5159; }
.campo input:focus { border-color: rgba(143, 184, 255, .6); box-shadow: 0 0 0 3px rgba(59, 130, 246, .2); }
.campo input[aria-invalid="true"] { border-color: rgba(255, 77, 79, .7); }
.modal-erro { font-size: 13.5px; color: #ff7a7c; }
.modal-form .btn { margin-top: 4px; }
.modal-pe { display: flex; gap: 8px; align-items: flex-start; justify-content: center; font-size: 12px; color: var(--muted); line-height: 1.45; text-align: left; }
.modal-pe svg { width: 14px; height: 14px; margin-top: 1px; color: var(--navy); }
body.com-modal { overflow: hidden; }

/* ---------- Tipografia de seção ---------- */
.secao { padding: 72px 0; }
.secao-curta { padding-bottom: 0; }
.secao-painel { padding: 24px 0; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--navy); letter-spacing: .02em; margin-bottom: 14px; text-shadow: var(--brilho-txt); }
h2 { font-size: clamp(1.75rem, 5.4vw, 2.6rem); }
h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.lead { margin-top: 18px; font-size: 1.08rem; color: var(--soft); }

/* ---------- Painel cinza (moldura do Voss) ---------- */
.painel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--r-xl); }
.painel-pad { padding: 56px 16px; }

/* ---------- 1. Promessa (painel escuro) ---------- */
.hero { padding: 12px 0 0; }
.hero-painel {
  position: relative; border-radius: var(--r-xl); padding: 36px 18px 32px; color: #fff; overflow: hidden;
  background: radial-gradient(55% 60% at 78% 42%, rgba(59, 130, 246, .28), transparent 70%), radial-gradient(40% 40% at 10% 0%, rgba(59, 130, 246, .12), transparent 70%), #0a0c10;
  border: 1px solid rgba(255, 255, 255, .08);
}
.hero-painel::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 184, 255, .7), transparent); }
.hero-grid { display: grid; gap: 28px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-txt { text-align: center; }
.condicao {
  display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--navy-g); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.produto-nome {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 13.5px; font-weight: 600; color: var(--fg);
}
.hero-autor { display: flex; align-items: center; justify-content: center; gap: 12px; }
.hero-av { width: 58px; height: 58px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0c0e11, 0 0 0 3.5px rgba(143, 184, 255, .6), 0 0 26px rgba(59, 130, 246, .6); }
.hero .produto-nome { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); box-shadow: none; color: #fff; }
.hero .condicao { background: #fff; color: #1d4ed8; }
.hero h1 { margin-top: 18px; font-size: clamp(1.85rem, 6.4vw, 2.9rem); letter-spacing: -.04em; line-height: 1.07; color: #fff; }
/* Logos das empresas (brancas e discretas) */
.logo { display: inline-flex; align-items: center; gap: 8px; flex: none; color: #fff; opacity: .62; white-space: nowrap; }
.logo img { height: 22px; width: auto; filter: brightness(0) invert(1); }
.logo b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.logo-rd img { height: 20px; }
.logo-g4 { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.04em !important; }
.hero-logos {
  margin-top: 18px; display: flex; overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-logos-trilho { display: flex; flex: none; align-items: center; gap: 40px; padding-right: 40px; animation: letreiro 22s linear infinite; }
.hero-logos .logo { opacity: .78; filter: drop-shadow(0 0 10px rgba(59, 130, 246, .45)); }
.hero-bullets { margin-top: 18px; display: grid; gap: 10px; text-align: left; max-width: 560px; margin-left: auto; margin-right: auto; }
.hero-bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: clamp(1rem, 2.4vw, 1.08rem); line-height: 1.5; color: rgba(255, 255, 255, .78); }
.hero-bullets b { color: #fff; font-weight: 600; }
.hero-bullets svg { width: 20px; height: 20px; margin-top: 2px; padding: 3px; border-radius: 50%; background: rgba(59, 130, 246, .2); color: var(--navy); stroke-width: 2.6; box-shadow: 0 0 14px rgba(59, 130, 246, .55); }
.sub { margin: 18px auto 0; max-width: 560px; font-size: clamp(1.05rem, 2.6vw, 1.15rem); color: rgba(255, 255, 255, .74); }
.sub strong { color: #fff; font-weight: 600; }
.diferenciais { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .88); }
.diferenciais li { display: flex; align-items: center; gap: 6px; }
.diferenciais svg { width: 16px; height: 16px; stroke-width: 2.4; }
.rolar { margin-top: 22px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .6); text-decoration: none; }
.rolar svg { width: 16px; height: 16px; animation: desce 1.8s ease-in-out infinite; }
.rolar:hover { color: #fff; }
@keyframes desce { 50% { transform: translateY(3px); } }

/* Letreiro de diferenciais */
.letreiro {
  display: flex; overflow: hidden; margin-top: 12px; padding: 14px 0; border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.letreiro-trilho { display: flex; flex: none; animation: letreiro 40s linear infinite; }
.letreiro-trilho li { display: flex; align-items: center; gap: 18px; padding-left: 18px; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--soft); }
.letreiro-trilho li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 10px 2px rgba(59, 130, 246, .7); }
@keyframes letreiro { to { transform: translateX(-100%); } }

/* Mocap do produto (img/mocap.webp, gerado por mockups/render.sh) */
.mocap { position: relative; margin: 0 -2%; width: 104%; max-width: 760px; justify-self: center; }
.mocap-img { width: 100%; position: relative; animation: flutua 7s ease-in-out infinite; }
.mocap::before { content: ""; position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(59, 130, 246, .45), transparent); filter: blur(30px); animation: pulsa 7s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-10px); } }
@keyframes pulsa { 50% { opacity: .55; transform: scale(.94); } }
/* Entrada da dobra 1 */
.hero-txt > * { animation: sobe .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-txt > :nth-child(2) { animation-delay: .08s; } .hero-txt > :nth-child(3) { animation-delay: .16s; }
.hero-txt > :nth-child(4) { animation-delay: .24s; } .hero-txt > :nth-child(5) { animation-delay: .32s; }
.mocap { animation: sobe 1s .2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sobe { from { opacity: 0; transform: translateY(22px); } }
/* Entrada ao rolar (classe posta pelo app.js) */
.mov { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.mov.vis { opacity: 1; transform: none; }

/* ---------- 2. Depoimentos (config.js), sempre um embaixo do outro ---------- */
.depos { margin-top: 32px; display: grid; gap: 14px; }
.depo { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px 22px; }
.depo p { color: var(--soft); }
.depo footer { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.depo footer b { display: block; color: var(--fg); font-size: 14.5px; }
.cases { margin-top: 32px; display: grid; gap: 16px; }
.case { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px; }
.case-topo { display: flex; gap: 14px; align-items: center; }
.case-topo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.case-topo b { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--fg); }
.case-topo span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.case-prints { margin-top: 14px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: #2a2d33 transparent; }
.zoom { flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; scroll-snap-align: start; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s; }
.zoom:hover { box-shadow: 0 0 0 1px rgba(143, 184, 255, .5), 0 0 24px -6px rgba(59, 130, 246, .7); }
.zoom img { height: 220px; width: auto; max-width: none; }
.zoom-caixa { padding: 0; border: 0; background: transparent; max-width: min(92vw, 620px); max-height: 92dvh; overflow: visible; cursor: zoom-out; }
.zoom-caixa::backdrop { background: rgba(3, 4, 6, .88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.zoom-caixa img { max-height: 90dvh; width: auto; margin: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); }
.cem { margin-top: 28px; text-align: center; }
.cem-tit { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--navy); }
.cem ul { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cem li { display: grid; justify-items: center; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 8px; }
.cem img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.cem b { font-size: 13px; line-height: 1.25; }
.cem span { font-size: 12px; color: var(--muted); }
.mais-cases { margin-top: 30px; display: grid; justify-items: center; gap: 10px; }
.alunos { position: relative; width: min(100%, 340px); }
.alunos img { width: 100%; }
/* bolinha azul no lugar do "+700" cinza, que foi apagado da imagem */
.alunos-mais { position: absolute; left: 86.8%; top: 49.5%; width: 12%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--navy-g); color: #fff; font-weight: 600; font-size: 18px; box-shadow: 0 0 0 2px var(--bg), 0 0 14px rgba(59, 130, 246, .6); }
.mais-cases p { font-size: 1.1rem; color: var(--soft); }
.mais-cases b { font-size: 2.2rem; font-weight: 600; letter-spacing: -.04em; color: var(--navy); text-shadow: var(--brilho-txt); margin-right: 4px; }
.cases-aviso { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ---------- Prints (imagem real ou espaço reservado) ---------- */
.print { position: relative; background: var(--tile); border-radius: var(--r-md); overflow: hidden; }
.print img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.print-vazio { display: none; }
.print.vazio img { display: none; }
.print.vazio .print-vazio {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px;
  text-align: center; color: var(--muted); font-size: 13px;
  background: repeating-linear-gradient(135deg, var(--tile) 0 12px, #1c1f24 12px 24px);
}
.print-vazio svg { width: 26px; height: 26px; color: var(--muted); }
.print-vazio b { color: var(--soft); font-weight: 600; }

/* ---------- 3. Aperta na pedra ---------- */
.vozes { margin: 36px 0 44px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 34px 10px; }
.vozes li {
  position: relative; width: 88%; padding: 36px 46px 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 140' preserveAspectRatio='none'%3E%3Cpath d='M52 118C30 120 14 106 20 88C4 80 6 56 26 52C20 32 40 18 60 26C68 8 98 4 112 20C124 4 156 4 166 22C184 12 210 22 208 44C230 48 236 74 220 86C234 102 216 124 194 116C184 132 156 134 146 120C134 134 104 134 96 122C84 132 60 130 52 118Z' fill='%23121418' stroke='rgba(255,255,255,.16)' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); font: 400 1.04rem/1.55 "Gloria Hallelujah", "Comic Sans MS", cursive; letter-spacing: 0; color: var(--fg); text-align: center;
}
.vozes li::before, .vozes li::after { content: ""; position: absolute; border-radius: 50%; background: var(--card); border: 1px solid rgba(255, 255, 255, .16); }
.vozes li::before { width: 14px; height: 14px; left: 24%; bottom: -12px; }
.vozes li::after { width: 8px; height: 8px; left: calc(24% - 12px); bottom: -24px; }
/* Embaralhadas: cada nuvem com tamanho, giro e deslocamento próprios */
.vozes li:nth-child(odd) { margin-right: 10%; }
.vozes li:nth-child(even) { margin-left: 10%; }
.vozes li:nth-child(even)::before { left: auto; right: 24%; }
.vozes li:nth-child(even)::after { left: auto; right: calc(24% - 12px); }
.vozes li:nth-child(1) { rotate: -2.5deg; }
.vozes li:nth-child(2) { rotate: 2deg; }
.vozes li:nth-child(3) { rotate: 1deg; }
.vozes li:nth-child(4) { rotate: -2deg; }
.vozes li:nth-child(5) { rotate: 2.5deg; }
.vozes li:nth-child(6) { rotate: -1.5deg; }
.fecho { margin-top: 32px; font-size: 1.15rem; font-weight: 500; color: var(--fg); padding-left: 18px; border-left: 3px solid var(--azul); box-shadow: -8px 0 18px -10px rgba(59, 130, 246, .8); }

/* ---------- 4. Dor e solução / estrutura 2+1 ---------- */
.estrutura { margin: 0 auto; max-width: 880px; text-align: center; }
.estrutura-sub { margin: 10px auto 0; max-width: 560px; color: var(--soft); font-size: 15px; }
.no {
  width: 100%; max-width: 300px; display: grid; justify-items: center; gap: 4px; padding: 16px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
}
.no b { font-size: 15px; }
.fluxo { margin-top: 28px; display: grid; justify-items: center; gap: 6px; }
.fluxo > li { width: 100%; display: flex; justify-content: center; }
.fluxo-par { gap: 10px; }
.fluxo-par .no { flex: 1; max-width: 240px; }
.fluxo-seta { flex-direction: column; align-items: center; color: var(--muted); font-size: 12px; padding: 2px 0; }
.fluxo-seta svg { width: 18px; height: 18px; color: var(--navy); filter: drop-shadow(0 0 6px rgba(59, 130, 246, .6)); }
.no span:last-child { font-size: 13px; color: var(--muted); line-height: 1.4; }
.no-ic { width: 36px; height: 36px; border-radius: 12px; background: var(--panel); display: grid; place-items: center; margin-bottom: 4px; color: var(--fg); }
.no-destaque { background: radial-gradient(80% 90% at 50% 0%, rgba(59, 130, 246, .22), transparent 70%), #0d1220; border-color: rgba(143, 184, 255, .45); color: #fff; box-shadow: 0 0 40px -12px rgba(59, 130, 246, .75); }
.no-destaque span:last-child { color: rgba(255, 255, 255, .72); }
.no-destaque .no-ic { background: rgba(59, 130, 246, .18); color: var(--navy); box-shadow: 0 0 18px rgba(59, 130, 246, .5); }
.razoes { margin-top: 28px; display: grid; gap: 10px; }
.razoes li {
  display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; font-size: 15.5px; font-weight: 500; color: var(--fg); line-height: 1.45;
}
.razoes svg { width: 20px; height: 20px; margin-top: 1px; color: var(--muted); stroke-width: 2.2; }
svg.rab { width: 26px; height: 26px; margin-top: -2px; stroke-width: 2; }
svg.rab-x { color: #ff4d4f; filter: drop-shadow(0 0 6px rgba(255, 77, 79, .45)); }
svg.rab-ok { color: #34d27b; filter: drop-shadow(0 0 6px rgba(52, 210, 123, .4)); }
.mov svg.rab { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.6, 0, .3, 1) .3s; }
.mov.vis svg.rab { stroke-dashoffset: 0; }
.razoes + .lead { margin-top: 28px; }
.grandes { margin: 0 auto; max-width: 820px; }
.grandes .eyebrow { margin-bottom: 8px; }
.grandes-tit { font-size: clamp(1.5rem, 4.6vw, 2.2rem); }
.grandes-logos { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.grandes-logos .logo { opacity: .5; }
.grandes-logos .logo img { height: 18px; } .grandes-logos .logo b { font-size: 15px; } .grandes-logos .logo-g4 { font-size: 19px !important; } .grandes-logos .logo-rd img { height: 17px; }
.grandes-lista { margin-top: 20px; display: grid; gap: 0; }
.grandes-lista li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--rowline); }
.grandes-lista b { font-size: 15.5px; font-weight: 600; color: var(--fg); }
.grandes-lista span { font-size: 14.5px; color: var(--soft); line-height: 1.5; }
.grandes-pe { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rowline); font-size: 12.5px; color: var(--muted); }
.ideia-fecho { margin: 36px auto 0; max-width: 760px; text-align: center; font-size: clamp(1.3rem, 3.6vw, 1.7rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--navy); text-wrap: balance; text-shadow: var(--brilho-txt); }

.conta { margin: 32px auto 0; max-width: 820px; display: grid; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 28px 20px; }
.conta h3 { margin-bottom: 10px; }
.conta-txt p + p { margin-top: 10px; }
.conta-txt p { color: var(--soft); font-size: 15px; }
.numeros { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numeros div { background: var(--tile); border-radius: var(--r-md); padding: 14px 10px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; text-align: center; }
.numeros dd { margin: 0; font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; color: var(--navy); line-height: 1.1; text-shadow: var(--brilho-txt); }
.numeros dt { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* ---------- 5. Passo a passo ---------- */
.passos { margin-top: 36px; display: grid; gap: 12px; max-width: 980px; margin-left: auto; margin-right: auto; }
.passos li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px 22px; }
.passo-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-g); color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 14px; box-shadow: var(--brilho); }
.passos p { margin-top: 8px; color: var(--soft); font-size: 15px; }
.passos li { display: flex; flex-direction: column; }
.passo-img { margin-top: auto; padding-top: 16px; width: 100%; border-radius: var(--r-md); }

/* ---------- 6. O que você encontra: lista com foto + seta pontilhada até o carrinho ---------- */
.ent-qtd { display: inline-block; margin-bottom: 12px; padding: 4px 11px; border-radius: 999px; background: var(--navy-g); color: #fff; box-shadow: var(--brilho); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.itens { margin: 36px auto 0; max-width: 920px; display: grid; gap: 16px; }
.item { display: grid; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 12px; }
.item-foto { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: #0d0f13; }
.item-foto img { width: 100%; height: 100%; object-fit: cover; }
.item-txt { padding: 4px 8px 10px; }
.item-txt h3 { font-size: 1.2rem; }
.item-txt p { margin-top: 8px; font-size: 15px; color: var(--soft); }
.ir-carrinho { margin-top: 10px; display: grid; justify-items: center; gap: 6px; }
.seta-pontos { width: 24px; height: 96px; color: var(--navy); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(59, 130, 246, .6)); }
.seta-linha { stroke-dasharray: 2 7; animation: pontos 1.2s linear infinite; }
@keyframes pontos { to { stroke-dashoffset: -9; } }
.carrinho { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-g); color: #fff; box-shadow: 0 0 0 1px rgba(147, 197, 253, .35), 0 12px 40px -8px rgba(59, 130, 246, .9); animation: pulso 2.6s ease-in-out infinite; transition: filter .18s; }
.carrinho:hover { filter: brightness(1.12); animation-play-state: paused; }
.carrinho svg { width: 30px; height: 30px; stroke-width: 1.7; }
.carrinho-txt { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--fg); }
.dispositivos { margin-top: 20px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 14px; color: var(--soft); text-align: center; }
.dispositivos svg { color: var(--navy); }

.por-dentro { margin-top: 0; }
.selo-claro { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--navy-suave); color: var(--navy); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.por-dentro-tit { margin-top: 14px; }
.video { margin: 28px auto 0; max-width: 900px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-hi); }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--navy-escuro); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play {
  position: absolute; inset: 0; width: 100%; border: 0; background: radial-gradient(80% 80% at 50% 40%, #17416f, var(--navy-escuro));
  color: #fff; display: grid; place-content: center; justify-items: center; gap: 14px; font-weight: 600; font-size: 15px; cursor: pointer;
}
.play-bola { width: 72px; height: 72px; border-radius: 50%; background: #fff; color: #1d4ed8; display: grid; place-items: center; box-shadow: 0 0 40px rgba(59, 130, 246, .6); transition: transform .2s; }
.play-bola svg { width: 26px; height: 26px; fill: currentColor; stroke: none; margin-left: 3px; }
.video-play:hover .play-bola { transform: scale(1.06); }

/* Cards: borda acende em azul ao passar o mouse */
.item, .passos li, .case, .vozes li, .razoes li, .pq-sim { transition: border-color .25s, box-shadow .25s, transform .25s; }
@media (hover: hover) {
  .item:hover, .passos li:hover, .case:hover, .pq-sim:hover { border-color: rgba(143, 184, 255, .35); box-shadow: var(--shadow), 0 0 40px -18px rgba(59, 130, 246, .7); }
}

/* ---------- 7. Para quem é ---------- */
.paraquem { margin-top: 36px; display: grid; gap: 14px; max-width: 920px; margin-left: auto; margin-right: auto; }
.pq { border-radius: var(--r-lg); padding: 26px 22px; }
.pq h3 { margin-bottom: 16px; }
.pq ul { display: grid; gap: 12px; }
.pq li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--soft); }
.pq-sim { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-hi); }
.pq-nao { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-hi); }
.incluso svg, .ancora svg { width: 20px; height: 20px; margin-top: 2px; color: var(--navy); stroke-width: 2.2; }
.pq-fecho { margin-top: 28px; font-size: 15.5px; color: var(--soft); }
.pq-fecho b { color: var(--fg); font-weight: 600; }

/* ---------- 8. Ancoragem ---------- */
.ancora { margin: 36px auto 0; max-width: 900px; display: grid; gap: 14px; }
.ancora-col { border-radius: var(--r-lg); padding: 26px 22px; }
.ancora-rot { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.ancora ul { margin-top: 18px; display: grid; gap: 12px; }
.ancora li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--soft); }
.ancora-caro { background: var(--tile); border: 1px solid var(--line); }
.ancora-caro svg { color: var(--muted); }
.ancora-valor { margin-top: 10px; font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 600; letter-spacing: -.03em; color: var(--soft); line-height: 1.1; }
.ancora-leg { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.ancora-certo { background: var(--card); box-shadow: var(--shadow-hi), 0 -12px 30px -18px rgba(59, 130, 246, .8); border-top: 2px solid var(--azul); }
.ancora-certo .ancora-rot { color: var(--navy); }
.ancora-fecho { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rowline); font-weight: 600; color: var(--fg); }

/* ---------- 9. Oferta (painel escuro em destaque) ---------- */
.painel-escuro { background: radial-gradient(60% 50% at 50% 30%, rgba(59, 130, 246, .26), transparent 70%), #0a0c10; border-color: rgba(143, 184, 255, .18); color: #fff; position: relative; overflow: hidden; }
.painel-escuro::before { content: ""; position: absolute; left: 15%; right: 15%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 184, 255, .8), transparent); }
.painel-escuro .eyebrow { color: rgba(255, 255, 255, .7); }
.oferta { margin: 28px auto 0; max-width: 520px; }
.oferta-mock { width: 112%; max-width: none; margin: 0 -6% -28px; position: relative; z-index: 1; filter: drop-shadow(0 0 50px rgba(59, 130, 246, .28)); animation: flutua 7s ease-in-out infinite; }
.oferta-capa { width: 62%; max-width: 260px; margin: -10px auto -34px; position: relative; z-index: 1; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(59, 130, 246, .35)); animation: flutua 7s ease-in-out infinite; }
.final-mock { width: 112%; max-width: none; margin: 0 -6% 8px; filter: drop-shadow(0 0 50px rgba(59, 130, 246, .28)); animation: flutua 7s ease-in-out infinite; }
.obg-capa { width: 40%; max-width: 190px; margin: -8px auto 4px; }
.oferta-card { background: var(--card); color: var(--fg); border-radius: var(--r-xl); border: 1px solid rgba(143, 184, 255, .22); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(59, 130, 246, .45); padding: 30px 22px; position: relative; }
.oferta-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.oferta-nome { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.incluso { margin-top: 18px; display: grid; gap: 0; }
.incluso li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--rowline); font-size: 15px; color: var(--soft); }
.preco-de { color: var(--muted); font-size: 14px; }
.preco-de s { text-decoration-thickness: 1.5px; }
.oferta-card .preco-de { margin-top: 20px; text-align: center; }
.oferta-card .preco { justify-content: center; flex-wrap: wrap; }
.oferta-card .preco-legenda { flex-basis: 100%; margin: 6px 0 0; padding: 0; text-align: center; }
.oferta-card .parcelas { margin: -6px 0 20px; text-align: center; font-size: 16px; font-weight: 500; color: var(--fg); }
.preco { margin: 6px 0 20px; display: flex; align-items: flex-end; gap: 6px; }
.oferta-card .preco-de[hidden] + .preco { margin-top: 24px; }
.preco-moeda { font-size: 1.3rem; font-weight: 600; padding-bottom: 10px; }
.preco-valor { font-size: 4.2rem; font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.preco-legenda { margin-left: 10px; padding-bottom: 6px; font-size: 13px; color: var(--muted); line-height: 1.35; }
.parcelas { margin: -8px 0 18px; font-size: 14px; color: var(--soft); }
.selos { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13px; font-weight: 500; color: var(--soft); }
.selos li { display: flex; align-items: center; gap: 6px; }
.selos svg { width: 16px; height: 16px; color: var(--navy); }
.como { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.como li { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; background: var(--tile); border-radius: var(--r-md); font-size: 12.5px; color: var(--soft); text-align: center; line-height: 1.3; }
.como b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-g); color: #fff; font-size: 12px; }
.garantia { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--soft); background: var(--tile); border-radius: var(--r-md); padding: 14px; }
.garantia svg { width: 22px; height: 22px; color: var(--navy); }
.garantia b { color: var(--fg); }

/* ---------- 10. Preço de ficar parado ---------- */
.chat { margin: 28px auto 0; max-width: 520px; display: flex; align-items: flex-end; gap: 10px; text-align: left; }
.chat-av { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(143, 184, 255, .4); }
.perguntas { display: grid; justify-items: start; gap: 6px; }
.perguntas li {
  position: relative; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 20px 20px 20px 6px;
  padding: 11px 16px; font-size: clamp(1rem, 2.8vw, 1.12rem); font-weight: 500; color: var(--fg); line-height: 1.4;
}
.perguntas li:first-child { border-top-left-radius: 20px; }
.perguntas li:last-child { border-bottom-left-radius: 4px; }
.parado .lead { margin-top: 28px; }
.parado-fecho { margin-top: 14px; font-size: clamp(1.3rem, 3.8vw, 1.7rem); font-weight: 600; letter-spacing: -.02em; color: var(--navy); text-shadow: var(--brilho-txt); }
.parado .btn { margin-top: 28px; }

/* ---------- 11. Autoridade (foto pequena) ---------- */
.autor { max-width: 1000px; margin: 0 auto; display: grid; gap: 28px; }
.autor-txt .eyebrow { margin-bottom: 6px; }
.autor-foto { margin: 0 auto; width: 100%; max-width: 340px; aspect-ratio: 3 / 4; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(143, 184, 255, .35), 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 50px -10px rgba(59, 130, 246, .5); }
.autor-foto .print-vazio b { font-size: 20px; color: var(--navy); }
.autor h2 { font-size: clamp(1.4rem, 4.2vw, 2rem); }
.autor-txt > p { margin-top: 16px; color: var(--soft); }
.citacao { margin: 20px 0 0; padding: 16px 18px; background: var(--tile); border-radius: var(--r-md); }
.citacao p { font-size: 1.05rem; color: var(--fg); font-weight: 500; }
.fatos { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.fatos li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--soft); }

/* ---------- 12. Repetir + FAQ ---------- */
.final .produto-nome { margin-top: 0; }
.final h2 { margin-top: 18px; }
.final-preco { margin: 26px 0 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px; color: var(--muted); font-size: 14px; }
.final-preco b { font-size: 2.4rem; font-weight: 600; letter-spacing: -.04em; color: var(--fg); line-height: 1; }
.faq { margin-top: 36px; display: grid; gap: 8px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: rgba(143, 184, 255, .3); box-shadow: 0 0 30px -16px rgba(59, 130, 246, .7); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; letter-spacing: -.015em; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details p { padding: 0 20px 20px; color: var(--soft); font-size: 15px; }

/* ---------- Página de obrigado ---------- */
.obg-topo { text-align: center; }
.obg-topo .produto-nome svg { width: 16px; height: 16px; stroke-width: 2.4; }
.obg-topo h1 { max-width: 760px; margin-left: auto; margin-right: auto; font-size: clamp(1.8rem, 6vw, 2.8rem); }
.obg-passos { max-width: 640px; margin: 28px auto 0; }
.obg-topo .como li { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .86); font-size: 13.5px; padding: 14px 8px; }
.obg-topo .como b { background: #fff; color: #1d4ed8; }
.obg-tit { margin-top: 14px; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.obg-texto { margin: 28px 0; display: grid; gap: 14px; font-size: 1.05rem; color: var(--soft); }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--line); padding: 32px 0 110px; font-size: 13px; color: var(--muted); }
.rodape-in { display: grid; gap: 10px; justify-items: center; text-align: center; }
.rodape-in img { width: 72px; opacity: .5; }
.rodape-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.rodape-links a { text-decoration: none; }
.rodape-links a:hover { color: var(--fg); }
.rodape-legal { max-width: 620px; font-size: 12px; }


/* ---------- Telas maiores ---------- */
@media (min-width: 640px) {
  .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .paraquem { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .ancora { grid-template-columns: 1fr 1.1fr; align-items: stretch; }
  .painel-pad { padding: 72px 40px; }
  .hero-painel { padding: 56px 40px 48px; }
  .vozes li { margin: 0 !important; }
  .vozes li:nth-child(1) { width: 330px; translate: 0 10px; }
  .vozes li:nth-child(2) { width: 300px; translate: 14px -16px; }
  .vozes li:nth-child(3) { width: 360px; translate: -20px 4px; }
  .vozes li:nth-child(4) { width: 300px; translate: 10px 22px; }
  .vozes li:nth-child(5) { width: 340px; translate: -4px -6px; }
  .vozes li:nth-child(6) { width: 330px; translate: 20px 14px; }
  .conta { padding: 32px; }
  .grandes-lista li { grid-template-columns: 130px 1fr; gap: 16px; align-items: baseline; }
  .oferta-card { padding: 36px 34px; }
}
@media (min-width: 900px) {
  .hero { padding: 20px 0 0; }
  .hero-painel { padding: 64px 56px; }
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 32px; }
  .hero h1 { font-size: 2.6rem; }
  .hero-txt { text-align: left; }
  .diferenciais { justify-content: flex-start; }
  .sub { margin-left: 0; }
  .secao { padding: 104px 0; }
  .secao-curta { padding-bottom: 0; }
  .secao-painel { padding: 32px 0; }
  .passos { grid-template-columns: repeat(4, 1fr); max-width: 1120px; }
  .hero-bullets { margin-left: 0; }
  .conta { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 28px; }
  .numeros { grid-template-columns: 1fr; }
  .numeros div { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; text-align: left; padding: 12px 16px; }
  .numeros dd { min-width: 64px; order: -1; }
  .item { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 28px; padding: 16px; }
  .autor { grid-template-columns: minmax(280px, 380px) 1fr; gap: 48px; align-items: center; }
  .autor-foto { margin: 0; max-width: none; }
  .hero-autor { justify-content: flex-start; }
  .oferta { max-width: 560px; }
  .oferta-mock { width: 150%; margin: 0 -25% -48px; }
  .final-mock { width: 130%; margin: 0 -15% 8px; }
  .rodape { padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}