/* Página de vendas · direção "estúdio noturno": a mesma linguagem dos anúncios V4
   (Archivo condensada + Instrument Serif itálica + JetBrains Mono; tinta, creme e um laranja só).
   Movimento como sistema: 3 durações (150 / 300 / 600 ms) e uma curva (--saida). Só transform e opacity. */
:root {
  --tinta: #0e0e10; --tinta-2: #151517; --tinta-3: #1d1d20; --linha-escura: rgba(246, 243, 236, .14);
  --papel: #f6f3ec; --creme: #f1e8da; --creme-2: #e7dcc9; --linha-clara: rgba(23, 19, 15, .16);
  --laranja: #ff5a2e; --laranja-tinta: #b93a14; --marca: #f0b9a6; --cinza: #a7a29a; --cinza-escuro: #5e574d; --ok: #3fb27a;
  --display: 'Archivo', system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --saida: cubic-bezier(.16, 1, .3, 1); --rapido: 150ms; --normal: 300ms; --revela: 600ms;
  --raio: 22px; --raio-p: 999px;
  --gutter: clamp(18px, 5vw, 56px);
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--tinta); color: var(--papel); font: 400 17px/1.6 var(--display); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1200px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.005em; }

/* tipografia: 5 tamanhos */
h2 { font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(40px, 7.6vw, 92px); line-height: .92; letter-spacing: -.015em; text-wrap: balance; max-width: 15ch; }
h2 em { color: var(--laranja); font-size: 1.04em; line-height: .9; }
h3 { font-weight: 800; font-stretch: 80%; font-size: 24px; line-height: 1.15; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--cinza); max-width: 54ch; margin-top: 22px; text-wrap: pretty; }
.rotulo { color: var(--marca); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.rotulo::before { content: ''; width: 22px; height: 2px; background: currentColor; }
.nota { font-size: 13.5px; color: var(--cinza); margin-top: 22px; max-width: 70ch; }

/* botões */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px;
  border-radius: var(--raio-p); border: 0; font: 800 17px/1 var(--display); font-stretch: 88%; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform var(--rapido) var(--saida), background var(--normal) var(--saida), box-shadow var(--normal) var(--saida); }
.btn:active { transform: scale(.97); }
.btn--compra { background: var(--laranja); color: #160a06; box-shadow: 0 14px 40px -14px rgba(255, 90, 46, .75); }
.btn--compra:hover { background: #ff6d45; box-shadow: 0 18px 48px -12px rgba(255, 90, 46, .9); }
.btn--compra .seta { transition: transform var(--normal) var(--saida); }
.btn--compra:hover .seta { transform: translateX(4px); }
.btn--fantasma { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 1.5px var(--linha-escura); }
.btn--fantasma:hover { box-shadow: inset 0 0 0 1.5px var(--papel); }
.btn--produto { background: var(--papel); color: var(--tinta); }
.btn--produto:hover { background: #fff; }
.btn--bloco { width: 100%; }
.onda { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); pointer-events: none; animation: onda .6s var(--saida) forwards; }
@keyframes onda { to { transform: scale(2.6); opacity: 0; } }

/* barra de progresso de leitura */
.progresso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progresso span { display: block; height: 100%; background: var(--laranja); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* topo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(14, 14, 16, .72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent; transition: border-color var(--normal); }
.topo.rolou { border-bottom-color: var(--linha-escura); }
.topo__linha { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca__icone { width: 30px; height: 30px; flex: none; }
.marca__nome { font-weight: 800; font-stretch: 80%; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.marca__nome em { color: var(--marca); font-size: 1.1em; text-transform: none; }
.topo__nav { display: none; gap: 26px; }
.topo__nav a, .topo__link { font: 600 14px/1 var(--display); text-decoration: none; color: var(--cinza); transition: color var(--rapido); }
.topo__nav a:hover, .topo__link:hover { color: var(--papel); }
.topo__link { color: var(--papel); padding: 11px 16px; border-radius: var(--raio-p); box-shadow: inset 0 0 0 1.5px var(--linha-escura); }
.topo__acoes { display: flex; gap: 8px; }
.topo__link--area { background: var(--papel); color: var(--tinta); box-shadow: none; }
@media (min-width: 900px) { .topo__nav { display: flex; } }

/* ============ 1. HERO ============ */
.hero { position: relative; overflow: hidden; padding: clamp(28px, 6vw, 72px) 0 clamp(48px, 7vw, 96px); isolation: isolate; }
.hero__luz { position: absolute; inset: -20% -10% auto auto; width: 90vw; height: 90vw; max-width: 1100px; max-height: 1100px; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 90, 46, .28), rgba(255, 90, 46, .06) 55%, transparent 72%); filter: blur(10px); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .07; pointer-events: none; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%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"); }
.hero__grade { display: grid; gap: 40px; align-items: center; }
.hero__grade > *, .video > *, .conversa > *, .ad > *, .final__grade > *, .faq-grade > * { min-width: 0; }
.hero__rotulo { color: var(--marca); display: flex; align-items: center; gap: 10px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(63, 178, 122, .2); }
.hero__titulo { margin-top: 18px; font-weight: 900; font-stretch: 68%; text-transform: uppercase; font-size: clamp(52px, 12.4vw, 128px); line-height: .88; letter-spacing: -.02em; }
.hero__titulo .linha { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.hero__titulo .linha > span { display: block; }
.hero__titulo .linha--serif em { color: var(--laranja); font-size: .8em; line-height: .95; display: inline-block; text-wrap: balance; }
@media (min-width: 980px) { .hero__titulo .linha--serif em { font-size: .74em; } }
.hero__lead { margin-top: 22px; font-size: clamp(17px, 1.6vw, 20px); color: var(--cinza); max-width: 46ch; }
.ramos { margin-top: 26px; }
.ramos__titulo { color: var(--papel); }
.ramos__titulo span { color: var(--cinza); font-weight: 500; letter-spacing: .06em; text-transform: none; font-family: var(--display); font-size: 14px; margin-left: 6px; }
.ramos__lista { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
.ramos__lista::-webkit-scrollbar { display: none; }
.ramo { flex: none; min-height: 42px; padding: 0 16px; border-radius: var(--raio-p); border: 0; background: var(--tinta-3); color: var(--papel);
  box-shadow: inset 0 0 0 1px var(--linha-escura); font: 600 15px/1 var(--display); cursor: pointer; transition: background var(--normal) var(--saida), color var(--normal), transform var(--rapido) var(--saida); }
.ramo:hover { box-shadow: inset 0 0 0 1px var(--papel); }
.ramo:active { transform: scale(.95); }
.ramo[aria-pressed="true"] { background: var(--laranja); color: #160a06; box-shadow: none; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero__preco { margin-top: 16px; font-size: 15px; color: var(--cinza); }
.hero__preco strong { color: var(--papel); font-weight: 800; }
.provas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14px; color: var(--papel); }
.provas li { display: flex; align-items: center; gap: 7px; }
.provas i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(63, 178, 122, .18); color: var(--ok); }

.hero__palco { position: relative; display: grid; justify-items: center; padding: 10px 0 0; perspective: 1600px; }
.cel3d { width: clamp(236px, 64vw, 340px); transform-style: preserve-3d; transform: rotateY(-10deg) rotateX(5deg) rotateZ(1deg); transition: transform var(--revela) var(--saida); }
.cel3d__corpo { position: relative; border-radius: 48px; padding: 11px; background: linear-gradient(145deg, #2a2a2e, #050505 30%);
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .9), 0 30px 60px -30px rgba(255, 90, 46, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.cel3d__tela { position: relative; aspect-ratio: 780 / 1688; border-radius: 38px; overflow: hidden; background: #fff; }
.cel3d__tela img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.cel3d__tela img.rolando { animation: rolar 22s cubic-bezier(.65, 0, .35, 1) 1.2s infinite alternate; }
@keyframes rolar { to { transform: translateY(calc(-100% + var(--alt-tela, 100%))); } }
.cel3d__ilha { position: absolute; left: 50%; top: 21px; width: 30%; height: 24px; margin-left: -15%; border-radius: 20px; background: #000; z-index: 2; }
.cel3d__brilho { position: absolute; inset: 11px; border-radius: 38px; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .06)); }
.cel3d.trocando .cel3d__tela img { animation: troca var(--revela) var(--saida); }
@keyframes troca { from { opacity: 0; transform: translateY(40px) scale(1.04); } }
.ficha { position: relative; z-index: 2; width: min(330px, 92%); margin-top: -64px; padding: 18px 20px; border-radius: 18px; background: var(--creme); color: #17130f;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); transform: rotate(-2deg); }
.ficha__rot { color: var(--laranja-tinta); font-size: 11px; }
.ficha__nome { margin-top: 6px; font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: 30px; line-height: .95; }
.ficha__lin { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha-clara); font-size: 14px; }
.ficha__lin .mono { font-size: 10.5px; color: var(--cinza-escuro); }
.ficha__lin b { font-weight: 700; text-align: right; }
.ficha__cores { display: flex; gap: 5px; }
.ficha__cores i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.ficha__nota { margin-top: 12px; font-size: 10px; color: var(--cinza-escuro); letter-spacing: .1em; }
.ficha.trocando { animation: ficha var(--revela) var(--saida); }
@keyframes ficha { from { opacity: 0; transform: rotate(-2deg) translateY(16px); } }

@media (min-width: 980px) {
  .hero { min-height: calc(100svh - 64px); display: grid; align-items: center; }
  .hero__grade { grid-template-columns: 1.08fr .92fr; gap: 56px; }
  .hero__titulo { font-size: clamp(64px, 5.9vw, 92px); }
  .ramos__lista { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 2px 0; -webkit-mask: none; mask: none; }
  .hero__palco { justify-items: end; padding-right: 40px; }
  .ficha { position: absolute; left: -10px; bottom: 34px; margin: 0; width: 300px; }
  .cel3d { transform: rotateY(-16deg) rotateX(6deg) rotateZ(1.5deg); }
}
/* entrada coreografada do topo (o estado parado já é legível) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__titulo .linha > span { animation: sobe .9s var(--saida) both; }
  .js .hero__titulo .linha:nth-child(2) > span { animation-delay: .08s; }
  .js .hero__titulo .linha:nth-child(3) > span { animation-delay: .16s; }
  .js .hero__lead, .js .ramos, .js .hero__acoes, .js .hero__preco, .js .provas { animation: aparece .8s var(--saida) both; animation-delay: .3s; }
  .js .ramos { animation-delay: .38s; } .js .hero__acoes { animation-delay: .46s; } .js .hero__preco, .js .provas { animation-delay: .54s; }
  .js .cel3d { animation: chega 1.3s var(--saida) .15s both; }
  .js .ficha { animation: aparece .9s var(--saida) .7s both; }
  .cel3d__corpo { animation: flutua 7s ease-in-out 1.6s infinite alternate; }
}
@keyframes sobe { from { transform: translateY(105%); } }
@keyframes aparece { from { opacity: 0; transform: translateY(18px); } }
@keyframes chega { from { opacity: 0; transform: translateY(120px) rotateY(-34deg) rotateX(24deg) rotateZ(6deg); } }
@keyframes flutua { to { transform: translateY(-10px) rotateZ(-.6deg); } }

/* régua de paletas: as cores reais de cada site, lado a lado */
.paletas { padding: 8px 0 0; }
.paletas__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
.paletas__cab .mono { color: var(--marca); }
.paletas__sub { font-size: 13.5px; color: var(--cinza); }
.paletas__regua { display: flex; height: 96px; gap: 3px; padding: 0 var(--gutter); }
@media (min-width: 1200px) { .paletas__regua { padding-inline: calc((100vw - 1200px) / 2 + var(--gutter)); } }
.paleta { position: relative; flex: 1 1 0; min-width: 0; display: flex; border-radius: 12px; overflow: hidden; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(246, 243, 236, .1); transition: flex-grow var(--revela) var(--saida), transform var(--normal) var(--saida); }
.paleta i { flex: 1; }
.paleta__nome { position: absolute; left: 10px; bottom: 9px; padding: 5px 8px; border-radius: 6px; background: rgba(14, 14, 16, .82); color: var(--papel);
  font-size: 10.5px; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity var(--normal), transform var(--normal) var(--saida); }
.paleta:hover, .paleta:focus-visible, .paleta.escolhida { flex-grow: 3.2; }
.paleta:hover .paleta__nome, .paleta:focus-visible .paleta__nome, .paleta.escolhida .paleta__nome { opacity: 1; transform: none; }
.paleta.escolhida { box-shadow: 0 0 0 2px var(--laranja); }
@media (max-width: 700px) {
  .paletas__regua { height: 76px; gap: 2px; }
  .paleta { border-radius: 8px; }
  .paleta.escolhida, .paleta:focus-visible { flex-grow: 6; }
  .paleta__nome { left: 6px; bottom: 6px; font-size: 9.5px; padding: 4px 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .paletas__regua .paleta { animation: paleta .8s var(--saida) both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
}
@keyframes paleta { from { transform: scaleY(.2); transform-origin: 50% 100%; opacity: 0; } }

/* seções */
.secao { position: relative; padding: clamp(72px, 11vw, 140px) 0; }
.secao--creme { background: var(--creme); color: #17130f; }
.secao--creme .lead, .secao--creme .nota { color: var(--cinza-escuro); }
.secao--creme .rotulo { color: var(--laranja-tinta); }
.secao--creme h2 em { color: var(--laranja-tinta); }
.secao--tinta { background: radial-gradient(70% 60% at 85% 0%, rgba(255, 90, 46, .16), transparent 70%), #08080a; }
.cabeca { display: grid; gap: 10px; align-items: end; }
@media (min-width: 900px) { .cabeca { grid-template-columns: 1.2fr .8fr; gap: 48px; } .cabeca .lead { margin-top: 0; } }

/* revelar ao rolar */
.js .surge { opacity: 0; transform: translateY(24px); transition: opacity var(--revela) var(--saida), transform var(--revela) var(--saida); }
.js .surge.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .surge { opacity: 1; transform: none; transition: none; } }

/* 2. vídeo */
.video { display: grid; gap: 40px; align-items: center; }
.video__texto .btn { margin-top: 28px; }
.video__quadro { position: relative; width: min(360px, 100%); justify-self: center; border-radius: 28px; overflow: hidden; background: #000;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--linha-escura); aspect-ratio: 9 / 16; }
.video__quadro video { width: 100%; height: 100%; object-fit: cover; }
.video__som { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); min-height: 44px; padding: 0 18px; border-radius: var(--raio-p); border: 0;
  background: rgba(14, 14, 16, .78); color: var(--papel); font: 700 14px/1 var(--display); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; }
.video__som[aria-pressed="true"] { background: var(--laranja); color: #160a06; }
@media (min-width: 900px) { .video { grid-template-columns: 1fr auto; gap: 80px; } }

/* 3. conversa */
.conversa { display: grid; gap: 40px; margin-top: 44px; align-items: start; }
.chat { display: grid; gap: 12px; max-width: 560px; }
.msg { padding: 16px 18px; border-radius: 20px; font-size: 16px; line-height: 1.5; max-width: 88%; }
.msg--voce { justify-self: end; background: var(--papel); color: #17130f; border-bottom-right-radius: 6px; }
.msg--ia { background: var(--tinta-3); box-shadow: inset 0 0 0 1px var(--linha-escura); border-bottom-left-radius: 6px; }
.msg__anexo { display: block; width: fit-content; margin-bottom: 8px; padding: 6px 10px; border-radius: 8px; background: var(--creme-2); font: 600 12px/1.2 var(--mono); }
.msg--arquivo b { display: block; font: 600 14px/1.3 var(--mono); color: var(--laranja); margin-bottom: 4px; }
.js .chat[data-animar] .msg { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s var(--saida), transform .5s var(--saida); }
.js .chat[data-animar] .msg.dito { opacity: 1; transform: none; }
.digitando { display: inline-flex; gap: 5px; padding: 16px 18px; border-radius: 20px; background: var(--tinta-3); width: fit-content; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--cinza); animation: pula 1s infinite ease-in-out; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 40% { transform: translateY(-5px); opacity: .5; } }
.conversa__resultado { display: grid; justify-items: center; gap: 14px; }
.cel-plano { width: min(300px, 80%); padding: 10px; border-radius: 42px; background: #050505; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.cel-plano__tela { aspect-ratio: 390 / 844; border-radius: 33px; overflow: hidden; position: relative; }
.cel-plano__tela img { position: absolute; inset: 0 0 auto 0; width: 100%; }
@media (prefers-reduced-motion: no-preference) { .conversa.pronta .cel-plano__tela img { animation: rolar 16s cubic-bezier(.65, 0, .35, 1) .6s infinite alternate; --alt-tela: 32.5%; } }
.conversa__legenda { color: var(--marca); }
@media (min-width: 900px) { .conversa { grid-template-columns: 1.2fr .8fr; gap: 72px; } }

/* 4. antes × depois */
.ad { display: grid; gap: 44px; align-items: center; }
.ad__lista { display: grid; gap: 14px; margin-top: 26px; max-width: 52ch; }
.ad__lista li { padding: 16px 18px; border-radius: 16px; background: rgba(23, 19, 15, .05); box-shadow: inset 0 0 0 1px var(--linha-clara); font-size: 15.5px; }
.ad__lista b { display: block; font: 600 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.ad__lista li:first-child b { color: #6d3fc0; } .ad__lista li:last-child b { color: var(--laranja-tinta); }
.comparador { position: relative; width: min(380px, 100%); justify-self: center; aspect-ratio: 390 / 844; border-radius: 34px; overflow: hidden;
  box-shadow: 0 50px 90px -40px rgba(23, 19, 15, .7), 0 0 0 10px #0b0b0c; }
.comparador > img, .comparador__antes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.comparador__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparador__linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--papel); pointer-events: none; }
.comparador__linha b { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--laranja); color: #160a06; font-size: 20px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); }
.comparador input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparador__rot { position: absolute; top: 14px; padding: 6px 10px; border-radius: var(--raio-p); font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.comparador__rot--antes { left: 14px; background: #6d3fc0; color: #fff; }
.comparador__rot--depois { right: 14px; background: var(--tinta); color: var(--papel); }
@media (min-width: 900px) { .ad { grid-template-columns: 1fr 380px; gap: 90px; } }

/* 5. vitrine */
.vitrine { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 44px var(--gutter) 22px; scrollbar-width: thin; scrollbar-color: var(--laranja) transparent;
  scroll-padding-inline: var(--gutter); }
@media (min-width: 1200px) { .vitrine { padding-inline: calc((100vw - 1200px) / 2 + var(--gutter)); scroll-padding-inline: calc((100vw - 1200px) / 2 + var(--gutter)); } }
.site { flex: none; width: clamp(230px, 64vw, 290px); scroll-snap-align: start; text-decoration: none; color: inherit; display: grid; gap: 16px; }
.site__cel { border-radius: 34px; padding: 8px; background: #050505; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); transition: transform var(--revela) var(--saida); }
.site__cel div { aspect-ratio: 780 / 1688; border-radius: 27px; overflow: hidden; background: #222; }
.site__cel img { width: 100%; transition: transform 2.4s var(--saida); }
@media (hover: hover) { .site:hover .site__cel { transform: translateY(-8px) rotate(-1deg); } .site:hover .site__cel img { transform: translateY(-14%); } }
.site__ficha { padding: 14px 16px; border-radius: 16px; background: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-escura); display: grid; gap: 8px; }
.site__topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.site__topo .mono { color: var(--marca); font-size: 10.5px; }
.site__abrir { font: 700 12px/1 var(--display); color: var(--laranja); }
.site__nome { font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: 24px; line-height: .95; }
.site__fontes { font-size: 13px; color: var(--cinza); }
.site__cores { display: flex; gap: 4px; }
.site__cores i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.site.escolhido .site__cel { box-shadow: 0 0 0 3px var(--laranja); }
.site.escolhido .site__topo .mono::after { content: ' · o seu ramo'; color: var(--laranja); }

/* 6. números */
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 48px; background: var(--linha-escura); border-radius: var(--raio); overflow: hidden; }
.numeros li { background: #0b0b0d; padding: 26px 20px; display: grid; gap: 6px; }
.numeros b { font-weight: 900; font-stretch: 68%; font-size: clamp(56px, 9vw, 104px); line-height: .85; color: var(--papel); font-variant-numeric: tabular-nums; }
.numeros li:nth-child(odd) b { color: var(--laranja); }
.numeros span { color: var(--cinza); font-size: 15px; }
@media (min-width: 900px) { .numeros { grid-template-columns: repeat(3, 1fr); } .numeros li { padding: 36px 32px; } }

/* 7. passos */
.passos { display: grid; gap: 16px; margin-top: 48px; counter-reset: p; }
.passo { position: relative; padding: 28px 24px 30px; border-radius: var(--raio); background: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-escura); overflow: hidden; }
.passo__n { color: var(--marca); }
.passo h3 { margin-top: 16px; font-weight: 900; font-stretch: 68%; text-transform: uppercase; font-size: clamp(56px, 14vw, 92px); line-height: .86; }
@media (min-width: 900px) { .passo h3 { font-size: clamp(52px, 4.6vw, 70px); } }
.passo:nth-child(1) h3 { color: var(--laranja); }
.passo p { margin-top: 14px; color: var(--cinza); max-width: 40ch; }
.frase { display: inline-block; margin-top: 4px; padding: 3px 9px; border-radius: 7px; background: var(--creme); color: #17130f; font: 600 13.5px/1.5 var(--mono); }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(3, 1fr); } }

/* 8. objeções */
.objecoes { display: grid; gap: 14px; margin-top: 44px; }
.objecao { padding: 24px; border-radius: var(--raio); background: #fbf6ee; box-shadow: inset 0 0 0 1px var(--linha-clara); }
.objecao__fala { font: italic 400 30px/1.05 var(--serif); color: var(--laranja-tinta); margin-bottom: 10px; }
.objecao p:last-child { color: #3d362d; font-size: 16px; }
@media (min-width: 700px) { .objecoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .objecoes { grid-template-columns: repeat(3, 1fr); } }

/* 9. preços */
.bonus { margin-top: 34px; padding: 20px 22px; border-radius: 18px; background: rgba(63, 178, 122, .1); box-shadow: inset 0 0 0 1px rgba(63, 178, 122, .4); max-width: 820px; }
.bonus .mono { color: var(--ok); margin-bottom: 8px; }
.bonus p:last-child { font-size: 15.5px; color: var(--papel); }
.precos { display: grid; gap: 18px; margin-top: 34px; align-items: start; }
.preco { position: relative; padding: 28px 24px; border-radius: 26px; background: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-escura); display: grid; gap: 16px; }
.preco--destaque { background: var(--creme); color: #17130f; box-shadow: 0 50px 100px -40px rgba(255, 90, 46, .45); }
.preco__topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.preco__topo .mono { font-size: 11px; color: var(--cinza); }
.preco--destaque .preco__topo .mono { color: var(--cinza-escuro); }
.selo { padding: 7px 12px; border-radius: var(--raio-p); background: var(--laranja); color: #160a06; font: 700 12px/1 var(--display); }
.selo--linha { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 1px var(--linha-escura); }
.preco__nome { font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(30px, 4vw, 40px); line-height: .95; }
.preco__nome em { color: var(--laranja); }
.preco--destaque .preco__nome em { color: var(--laranja-tinta); }
.preco__para { color: var(--cinza); font-size: 15.5px; }
.preco--destaque .preco__para { color: var(--cinza-escuro); }
.preco__valor { display: grid; gap: 4px; }
.preco__valor > span { font-weight: 900; font-stretch: 70%; font-size: clamp(56px, 8vw, 76px); line-height: .9; letter-spacing: -.02em; }
.preco__valor small { font-size: 14px; color: var(--cinza); }
.preco--destaque .preco__valor small { color: var(--cinza-escuro); }
.preco__detalhes ul { display: grid; gap: 10px; }
.preco__detalhes li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.45; }
.preco__detalhes li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 11px;
  background: rgba(63, 178, 122, .18); color: var(--ok); }
.preco--destaque .preco__detalhes li::before { background: #1f6f4a; color: #fff; }
.preco__nota { font-size: 13.5px; color: var(--cinza); margin-top: 12px; }
.preco--destaque .preco__nota { color: var(--cinza-escuro); }
.extras { margin-top: 6px; display: grid; gap: 8px; }
.extra { display: flex; gap: 10px; align-items: center; font-size: 14.5px; }
.extra i { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .5; flex: none; }
.preco__seguro { font-size: 13px; color: var(--cinza); text-align: center; }
.preco--destaque .preco__seguro { color: var(--cinza-escuro); }
.preco__ver { display: none; }
.lite-linha { margin-top: 22px; font-size: 15px; color: var(--cinza); }
.lite-linha a { color: var(--papel); }
@media (min-width: 900px) { .precos { grid-template-columns: 1.1fr .9fr; gap: 22px; } .preco { padding: 36px 34px; } }
@media (max-width: 767px) {
  .precos--compactos .preco__ver { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 0 16px;
    border: 0; border-radius: 14px; background: rgba(127, 127, 127, .1); color: inherit; font: 700 15px/1 var(--display); cursor: pointer; }
  .precos--compactos .preco__ver span { font-size: 22px; font-weight: 400; }
  .precos--compactos .preco__detalhes { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--saida); }
  .precos--compactos .preco__detalhes > div { overflow: hidden; min-height: 0; }
  .precos--compactos .preco--aberto .preco__detalhes { grid-template-rows: 1fr; }
  .precos--compactos .preco:not(.preco--aberto) .preco__detalhes > div { visibility: hidden; transition: visibility 0s .35s; }
  .precos--compactos .preco:not(.preco--aberto) .preco__detalhes { margin-top: -16px; }
}
.garantia { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-top: 54px; padding: 26px; border-radius: 26px;
  background: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-escura); max-width: 860px; }
.garantia__selo { width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--laranja); color: #160a06;
  box-shadow: 0 0 0 6px rgba(255, 90, 46, .2); }
.garantia__selo b { font-weight: 900; font-stretch: 70%; font-size: 48px; line-height: .8; }
.garantia__selo span { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.garantia__titulo { font-weight: 900; font-stretch: 74%; font-size: clamp(24px, 3vw, 32px); line-height: 1; text-transform: uppercase; margin-bottom: 8px; }
.garantia__titulo em { color: var(--laranja); }
.garantia p:last-child { color: var(--cinza); font-size: 15.5px; }
.garantia .rotulo { margin-bottom: 8px; }
@media (max-width: 520px) { .garantia { grid-template-columns: 1fr; } }

/* 10. para quem */
.para-quem { display: grid; gap: 16px; margin-top: 44px; }
.para-quem > div { padding: 28px 26px; border-radius: var(--raio); background: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-escura); }
.para-quem ul { display: grid; gap: 12px; margin-top: 16px; }
.para-quem li { position: relative; padding-left: 30px; color: var(--cinza); }
.para-quem li::before { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.para-quem__sim li::before { content: '✓'; background: rgba(63, 178, 122, .18); color: var(--ok); }
.para-quem__nao li::before { content: '✕'; background: rgba(255, 90, 46, .14); color: var(--laranja); }
@media (min-width: 800px) { .para-quem { grid-template-columns: 1fr 1fr; } }

/* 11. perguntas */
.faq-grade { display: grid; gap: 34px; }
@media (min-width: 960px) { .faq-grade { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; } .faq-grade > div:first-child { position: sticky; top: 100px; } }
.faq { border-top: 1.5px solid #17130f; }
.faq details { border-bottom: 1px solid var(--linha-clara); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 52px 22px 0; position: relative; font: 700 18px/1.3 var(--display); transition: color var(--rapido), padding var(--normal) var(--saida); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 12px; top: 50%; width: 16px; height: 2px; background: currentColor; transition: transform var(--normal) var(--saida), opacity var(--normal); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary { color: var(--laranja-tinta); }
.faq details[open] summary::before { transform: rotate(180deg); }
.faq details[open] summary::after { transform: rotate(180deg); opacity: 0; }
.faq details.fechando summary { color: inherit; }
.faq details.fechando summary::after { transform: rotate(90deg); opacity: 1; }
@media (hover: hover) { .faq summary:hover { padding-left: 6px; color: var(--laranja-tinta); } }
.faq details > div { overflow: hidden; }
.faq details > div p { padding-bottom: 22px; color: #3d362d; max-width: 62ch; }

/* 12. final */
.final { position: relative; overflow: hidden; padding: clamp(80px, 12vw, 150px) 0; background: radial-gradient(60% 70% at 80% 50%, rgba(255, 90, 46, .22), transparent 70%), var(--tinta); }
.final__grade { display: grid; gap: 50px; align-items: center; }
.final__titulo { max-width: 13ch; font-size: clamp(46px, 8.6vw, 110px); }
.final .btn { margin-top: 30px; }
.final__mosaico { position: relative; height: 420px; }
.final__mosaico img { position: absolute; width: 190px; border-radius: 26px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 7px #050505; }
.final__mosaico img:nth-child(1) { left: 6%; top: 40px; transform: rotate(-8deg); }
.final__mosaico img:nth-child(2) { left: 34%; top: 0; z-index: 2; transform: rotate(2deg); }
.final__mosaico img:nth-child(3) { left: 62%; top: 60px; transform: rotate(9deg); }
@media (min-width: 900px) { .final__grade { grid-template-columns: 1.1fr .9fr; } .final__mosaico { height: 520px; } .final__mosaico img { width: 230px; } }

/* rodapé, barra fixa, consentimento */
.rodape { padding: 48px 0 120px; background: #08080a; color: var(--cinza); font-size: 13.5px; border-top: 1px solid var(--linha-escura); }
.rodape .wrap { display: grid; gap: 14px; }
.rodape b { color: var(--papel); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rodape nav a { min-height: 32px; display: inline-flex; align-items: center; }
.barra-compra { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 20px; background: rgba(21, 21, 23, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--linha-escura); transform: translateY(140%); transition: transform .45s var(--saida); }
.barra-compra.visivel { transform: none; }
.barra-compra__txt { min-width: 0; line-height: 1.25; margin-right: auto; }
.barra-compra__txt b { display: block; font-weight: 800; font-stretch: 80%; font-size: 15px; text-transform: uppercase; }
.barra-compra__txt span { font-size: 12.5px; color: var(--cinza); }
.barra-compra .btn { min-height: 48px; padding: 0 20px; font-size: 16px; flex: none; }
@media (min-width: 900px) { .barra-compra { left: auto; right: 20px; bottom: 20px; width: 440px; } }
@media (prefers-reduced-motion: reduce) { .barra-compra { transition: none; } }
.consentimento { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 55; padding: 18px; border-radius: 18px; background: var(--creme); color: #17130f; font-size: 14.5px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); max-width: 520px; }
.consentimento p { margin-bottom: 12px; }
.consentimento__acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.consentimento .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.consentimento .btn--fantasma { color: #17130f; box-shadow: inset 0 0 0 1.5px rgba(23, 19, 15, .3); }