/* Página de captura de móveis planejados (lp.scopeagencia.online). Visual: scope/marca/design-guide.md
   (meia-noite e vidro), com uma fonte de leitura só (Inter). Storyboard aprovado em 2026-11-02. */
@font-face { font-family: "Inter"; src: url("/fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --meia-noite: #05060f;
  --gelo: #d8ecf8;
  --nevoa: #c7d3ea;
  --veu: #9da7ba;
  --acao: #027dea;
  --verde: #5fd39a;
  --vermelho: #ff7a70;
  --estrela: #fbbc04;
  --madeira: #8a6239;
  --vidro: rgba(186,214,247,.03);
  --vidro-2: rgba(186,214,247,.06);
  --vidro-3: rgba(199,211,234,.12);
  --fio: rgba(186,215,247,.12);
  --fio-forte: rgba(186,215,247,.26);
  --f: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--meia-noite); color: var(--nevoa); font-family: var(--f); font-size: 17px; line-height: 1.55; }
img { max-width: 100%; }
a { color: var(--gelo); }
h1, h2, h3 { margin: 0; color: var(--gelo); font-weight: 500; text-wrap: balance; line-height: 1.15; }
h1 { font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -.01em; }
h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -.01em; }
h3 { font-size: 20px; }
p { margin: 0; }
.centro { text-align: center; }
.ceu { background: linear-gradient(0deg, #98c0ef 0%, #d8ecf8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faixa { position: relative; padding: 88px 20px; overflow: hidden; }
.dentro { max-width: 1120px; margin: 0 auto; position: relative; display: grid; gap: 32px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--acao); color: #fff; font: 600 18px var(--f); padding: 18px 28px; border-radius: 14px; border: 0; cursor: pointer; text-decoration: none; box-shadow: 0 10px 40px rgba(2,125,234,.35); transition: transform .2s, box-shadow .2s, opacity .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(2,125,234,.5); }
.btn:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--gelo); outline-offset: 3px; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

/* entrada ao rolar: o conteúdo já está visível; só ganha o movimento quando entra na tela */
.anima.vista { animation: sobe .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes sobe { from { transform: translateY(26px); filter: blur(4px); } to { transform: none; filter: none; } }

/* barra do topo */
.barra-topo { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 18px 20px; }
.barra-topo .dentro { display: flex; align-items: center; gap: 10px; color: var(--gelo); font-size: 16px; }
.barra-topo b { font-weight: 600; }

/* 1 hero */
.hero { padding-top: 110px; background:
  radial-gradient(ellipse at 72% 10%, rgba(2,125,234,.26), transparent 50%),
  radial-gradient(ellipse at 85% 95%, rgba(196,140,80,.30), transparent 55%),
  linear-gradient(180deg, #070812, #0b0a10); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: repeating-linear-gradient(97deg, rgba(138,98,57,.10) 0 2px, transparent 2px 9px), linear-gradient(90deg, rgba(5,6,15,1) 30%, rgba(5,6,15,0)); }
.hero .dentro { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; }
.hero-txt { display: grid; gap: 22px; }
.selo { justify-self: start; font-size: 14px; color: var(--gelo); background: var(--vidro-2); box-shadow: inset 0 0 0 1px var(--fio); padding: 6px 14px; border-radius: 99px; display: inline-flex; gap: 8px; align-items: center; }
.selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); animation: pulsa 2s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(95,211,154,.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(95,211,154,0); } }
.hero .sub { font-size: 19px; max-width: 54ch; }
.hero .btn { justify-self: start; }

.cel { justify-self: center; width: 300px; background: #0b0d18; border-radius: 36px; padding: 14px; box-shadow: inset 0 0 0 1px var(--fio-forte), 0 40px 80px rgba(0,0,0,.65); display: grid; gap: 10px; animation: flutua 6s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-10px); } }
.busca { background: #fff; color: #202124; border-radius: 24px; padding: 10px 14px; font-size: 14px; display: flex; gap: 2px; align-items: center; min-height: 41px; }
.busca .cursor { width: 1px; height: 16px; background: #202124; animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.lista { position: relative; height: 336px; }
.ficha { position: absolute; left: 0; right: 0; height: 74px; background: #fff; color: #202124; border-radius: 12px; padding: 10px 12px; font-size: 13px; display: grid; gap: 1px; transition: top .9s cubic-bezier(.5,0,.2,1), opacity .6s, box-shadow .6s; }
.ficha b { font-weight: 600; font-size: 14px; }
.ficha .est { color: #70757a; } .ficha .est span { color: var(--estrela); }
.ficha.sua { opacity: .35; }
.depois .ficha.sua { opacity: 1; box-shadow: 0 0 0 3px var(--verde), 0 10px 30px rgba(95,211,154,.35); }
.cel-pe { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--veu); padding: 0 4px; }
#momento { color: var(--gelo); font-weight: 600; }
.depois #momento { color: var(--verde); }

/* 2 a dor */
.dor { background: linear-gradient(180deg, #0b0a10, #0a0c18); }
.dor .dentro { grid-template-columns: .9fr 1.1fr; align-items: center; }
.dor-txt { display: grid; gap: 18px; }
.dor-txt p { font-size: 19px; }
.meses { display: grid; gap: 10px; background: var(--vidro); box-shadow: inset 0 0 0 1px var(--fio); border-radius: 20px; padding: 24px; }
.barras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; height: 220px; }
.barra { border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--madeira), #4a321c); height: 8%; transition: height 1s cubic-bezier(.3,.8,.3,1); }
.barra.fraco { background: linear-gradient(180deg, rgba(255,122,112,.75), rgba(255,122,112,.25)); }
.vista .barra { height: var(--h); }
.rotulos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; font-size: 13px; color: var(--veu); text-align: center; }
.legenda-g { font-size: 13px; color: var(--veu); }
.baloes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.balao { background: var(--vidro-2); box-shadow: inset 0 0 0 1px var(--fio); border-radius: 16px 16px 16px 4px; padding: 16px; font-size: 16px; }
.balao b { display: block; color: var(--gelo); font-weight: 600; margin-bottom: 4px; }

/* 3 avenida */
.avenida-f { background: #070912; }
.ruas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rua { position: relative; height: 260px; border-radius: 22px; overflow: hidden; padding: 22px; display: grid; align-content: space-between; }
.rua.sem { background: linear-gradient(180deg, #0d0f1a, #090a12); box-shadow: inset 0 0 0 1px var(--fio); }
.rua.av { background: radial-gradient(ellipse at 50% 120%, rgba(2,125,234,.45), transparent 60%), linear-gradient(180deg, #0c1530, #0a1024); box-shadow: inset 0 0 0 1px rgba(2,125,234,.5); }
.rua h3 { font-size: 24px; }
.rua p { font-size: 15px; color: var(--veu); max-width: 30ch; }
.asfalto { position: absolute; left: 0; right: 0; bottom: 70px; height: 46px; background: rgba(255,255,255,.04); }
.asfalto::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 24px, transparent 24px 48px); }
.pessoa { position: absolute; bottom: 82px; left: -20px; width: 12px; height: 12px; border-radius: 50%; background: var(--gelo); box-shadow: 0 0 12px var(--gelo); animation: anda linear infinite; }
@keyframes anda { from { left: -20px; } to { left: 105%; } }
.loja { position: absolute; right: 22px; top: 22px; width: 64px; height: 50px; border-radius: 8px; background: linear-gradient(180deg, var(--madeira), #4a321c); box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.av .loja { box-shadow: 0 0 30px rgba(245,198,107,.5), 0 0 0 2px rgba(245,198,107,.6); }
.frase-grande { font-size: clamp(22px, 3vw, 32px); color: var(--gelo); text-align: center; text-wrap: balance; }
.frase-grande em { font-style: normal; color: var(--verde); }

/* 4 google x instagram */
.duelo { background: linear-gradient(180deg, #090a12, #05060f); }
.duelo .dentro { justify-items: center; }
.celulares { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center; width: 100%; max-width: 860px; }
.mini { background: #0b0d18; border-radius: 28px; padding: 12px; box-shadow: inset 0 0 0 1px var(--fio-forte); height: 340px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; }
.mini .tit { font-size: 13px; color: var(--veu); padding: 2px 6px; }
.feed { overflow: hidden; }
.feed-rolo { display: grid; gap: 8px; animation: rola 9s linear infinite; }
@keyframes rola { to { transform: translateY(-50%); } }
.post { height: 92px; border-radius: 12px; background: var(--vidro-3); display: grid; place-items: center; font-size: 13px; color: var(--veu); }
.post.seu { background: linear-gradient(135deg, rgba(138,98,57,.6), rgba(74,50,28,.6)); color: var(--gelo); }
.rodape-mini { font-size: 14px; padding: 6px; border-radius: 10px; text-align: center; }
.ig .rodape-mini { background: rgba(255,122,112,.12); color: var(--vermelho); }
.gg .rodape-mini { background: rgba(95,211,154,.12); color: var(--verde); }
.gg .pesq { background: #fff; color: #202124; border-radius: 18px; padding: 8px 12px; font-size: 13px; }
.gg .res { display: grid; gap: 8px; align-content: start; }
.gg .res div:not(.pesq) { background: #fff; border-radius: 10px; height: 52px; color: #202124; font-size: 12px; padding: 8px 10px; }
.gg .res div:nth-child(2) { box-shadow: 0 0 0 3px var(--verde); }
.vs { font-size: 15px; color: var(--veu); }
.duelo-txt { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; width: 100%; }
.duelo-txt div { font-size: 16px; }
.duelo-txt b { color: var(--gelo); font-weight: 600; display: block; margin-bottom: 4px; }

/* 5 calculadora */
.calcf { background: radial-gradient(ellipse at 50% 100%, rgba(95,211,154,.14), transparent 60%), #05060f; }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; background: var(--vidro); box-shadow: inset 0 0 0 1px var(--fio); border-radius: 24px; padding: 34px; }
.controle { display: grid; gap: 26px; }
.controle label { display: grid; gap: 12px; font-size: 17px; color: var(--nevoa); }
.controle .valor { font-size: 28px; color: var(--gelo); font-weight: 600; font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 99px; background: var(--vidro-3); cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; background: var(--acao); box-shadow: 0 0 0 6px rgba(2,125,234,.25); }
input[type=range]::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--acao); box-shadow: 0 0 0 6px rgba(2,125,234,.25); }
.resultado { text-align: center; display: grid; gap: 8px; }
.resultado .grande { font-size: clamp(44px, 6vw, 72px); font-weight: 700; color: var(--verde); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 0 40px rgba(95,211,154,.35); }
.resultado span { color: var(--veu); font-size: 16px; }

/* 6 como funciona */
.passosf { background: #070912; }
.trilho { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trilho::before, .trilho::after { content: ""; position: absolute; top: 31px; left: 8%; height: 3px; }
.trilho::before { right: 8%; background: var(--vidro-3); }
.trilho::after { width: 0; background: linear-gradient(90deg, var(--acao), var(--verde)); transition: width 1.8s ease; }
.trilho.vista::after { width: 84%; }
.etapa { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; }
.bola { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 600; color: #fff; background: #0c1530; box-shadow: inset 0 0 0 2px rgba(2,125,234,.6); z-index: 1; }
.etapa:last-child .bola { box-shadow: inset 0 0 0 2px var(--verde); }
.etapa p { max-width: 28ch; font-size: 16px; }
.trinta { justify-self: center; font-size: 15px; color: var(--gelo); background: rgba(2,125,234,.14); box-shadow: inset 0 0 0 1px rgba(2,125,234,.45); padding: 8px 16px; border-radius: 99px; }

/* 7 o que o google olha */
.olhaf { background: linear-gradient(180deg, #05060f, #0a0c18); }
.olha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fator { background: var(--vidro); box-shadow: inset 0 0 0 1px var(--fio); border-radius: 22px; padding: 26px; display: grid; gap: 12px; align-content: start; transition: transform .25s, box-shadow .25s; }
.fator:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--fio-forte), 0 20px 40px rgba(0,0,0,.4); }
.icone { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(2,125,234,.14); position: relative; }
.icone svg { width: 28px; height: 28px; stroke: var(--gelo); fill: none; stroke-width: 1.8; }
.icone::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 1px solid rgba(2,125,234,.5); animation: anel 2.8s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes anel { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.fator p { font-size: 16px; }

/* 8 formulário */
.formf { background: radial-gradient(ellipse at 50% 0%, rgba(2,125,234,.22), transparent 55%), #05060f; }
.caixa { max-width: 760px; margin: 0 auto; width: 100%; background: rgba(12,14,26,.92); box-shadow: inset 0 0 0 1px var(--fio-forte), 0 40px 80px rgba(0,0,0,.5); border-radius: 26px; padding: 38px; display: grid; gap: 24px; }
.caixa .intro { font-size: 17px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: grid; gap: 8px; }
.campo.cheio { grid-column: 1 / -1; }
.campo > span, .campo > label { font-size: 17px; color: var(--gelo); font-weight: 500; }
.campo input { font: 400 19px var(--f); color: #fff; background: var(--vidro-2); border: 0; box-shadow: inset 0 0 0 1px var(--fio); border-radius: 14px; padding: 18px; width: 100%; transition: box-shadow .2s, background .2s; }
.campo input::placeholder { color: rgba(157,167,186,.7); }
.campo input:focus { box-shadow: inset 0 0 0 2px var(--acao); background: rgba(2,125,234,.08); outline: 0; }
.campo.falta input, .campo.falta .chips { box-shadow: inset 0 0 0 2px rgba(255,122,112,.7); border-radius: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font: 500 17px var(--f); color: var(--nevoa); background: var(--vidro-2); border: 0; box-shadow: inset 0 0 0 1px var(--fio); padding: 15px 20px; border-radius: 14px; cursor: pointer; transition: transform .15s, background .2s, box-shadow .2s; }
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: rgba(2,125,234,.25); color: #fff; box-shadow: inset 0 0 0 2px var(--acao); }
.escondido { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.erro-form { color: var(--vermelho); text-align: center; min-height: 0; }
.erro-form:empty { display: none; }
.enviar { width: 100%; font-size: 20px; padding: 20px; }
.obrigado { display: none; text-align: center; gap: 16px; justify-items: center; padding: 10px 0; outline: 0; }
.caixa.enviado .campos, .caixa.enviado .enviar, .caixa.enviado .intro, .caixa.enviado .erro-form { display: none; }
.caixa.enviado .obrigado { display: grid; animation: sobe .6s both; }
.check { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: rgba(95,211,154,.16); box-shadow: inset 0 0 0 2px var(--verde); }
.check svg { width: 36px; height: 36px; stroke: var(--verde); fill: none; stroke-width: 3; stroke-dasharray: 40; stroke-dashoffset: 40; }
.enviado .check svg { animation: risca .6s .3s forwards; }
@keyframes risca { to { stroke-dashoffset: 0; } }
.zap { background: #1fa855; box-shadow: 0 10px 40px rgba(31,168,85,.35); }
.zap:hover { box-shadow: 0 16px 50px rgba(31,168,85,.5); }

/* 9 perguntas */
.faqf { background: #070912; }
.faq { max-width: 820px; margin: 0 auto; width: 100%; display: grid; gap: 12px; }
details { background: var(--vidro); box-shadow: inset 0 0 0 1px var(--fio); border-radius: 16px; padding: 20px 22px; transition: background .2s; }
details[open] { background: var(--vidro-2); }
summary { cursor: pointer; color: var(--gelo); font-size: 19px; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--acao); transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 10px; font-size: 17px; }

/* rodapé */
.rod { padding: 34px 20px 110px; box-shadow: inset 0 1px 0 var(--fio); }
.rod .dentro { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; color: var(--veu); }
.rod a { color: var(--veu); }

/* botão fixo no celular */
.fixo { display: none; }
@media (max-width: 860px) {
  .hero .dentro, .dor .dentro, .calc { grid-template-columns: 1fr; }
  .baloes, .olha, .ruas, .trilho, .celulares, .duelo-txt { grid-template-columns: 1fr; }
  .trilho::before, .trilho::after { display: none; }
  .vs { display: none; }
  .hero { padding-top: 84px; }
  .fixo { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 10; transition: transform .3s, opacity .3s; }
  .fixo.some { transform: translateY(120%); opacity: 0; pointer-events: none; }
}
@media (max-width: 560px) {
  .campos { grid-template-columns: 1fr; }
  .caixa, .calc { padding: 24px 18px; }
  .faixa { padding: 64px 16px; }
  .hero { padding-top: 80px; }
  .cel { width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .barra { height: var(--h); }
  .trilho::after { width: 84%; }
  .check svg { stroke-dashoffset: 0; }
}