/* Seções abaixo da primeira tela: Por que, Como funciona, Preço, Dúvidas e chamada final */

.sec { padding: clamp(80px, 9vw, 136px) 0; }
.sec + .sec { border-top: 1px solid rgba(255, 255, 255, 0.06); }

.sec-titulo { max-width: 19em; font-weight: 800; font-size: min(clamp(2rem, 1.25rem + 2.6vw, 3.25rem), 10.5vw); line-height: 1.08; letter-spacing: -0.03em; color: #fff; text-wrap: balance; overflow-wrap: break-word; }
.sec-titulo em { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -0.01em; color: var(--sky); }
.sec-lede { margin-top: 20px; max-width: 36em; font-size: 1.0625rem; line-height: 1.65; color: var(--text-soft); text-wrap: pretty; }

/* ---------- Por que ter um site: Instagram × site próprio ---------- */
.comparar { margin-top: clamp(40px, 5vw, 64px); }
.comparar-cab { display: none; }
.comparar-lista { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.comparar-linha h3 { font: 700 1.0625rem/1.3 var(--sans); color: #fff; }
.comparar-linha p { font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.rotulo { display: block; margin-bottom: 4px; font: 500 0.75rem/1.4 var(--mono); }
.lado-insta { margin-top: 12px; color: var(--text-soft); }
.lado-insta .rotulo { color: var(--text-faint); }
.lado-site { margin-top: 12px; padding: 16px 18px; border-radius: 12px; background: #1B2739; box-shadow: inset 0 0 0 1px rgba(169, 196, 255, 0.18); color: #fff; }
.lado-site .rotulo { color: var(--mint); }

@media (min-width: 768px) {
  .comparar { display: grid; grid-template-columns: minmax(min(8.5rem, 22%), 0.62fr) minmax(0, 1fr) minmax(0, 1fr); }
  .comparar-cab, .comparar-lista, .comparar-linha { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
  .comparar-lista { gap: 0; }
  .comparar-cab { font: 500 0.8125rem/1.4 var(--mono); color: var(--text-faint); }
  .comparar-cab span { padding: 0 24px 16px; }
  .comparar-cab span:first-child { padding-left: 0; }
  .comparar-cab span:last-child { padding-top: 18px; border-radius: 16px 16px 0 0; background: #1B2739; color: #fff; }
  .comparar-cab b { font-weight: 600; color: var(--mint); }
  .comparar-linha > * { margin: 0; padding: 22px 24px; border-top: 1px solid var(--line); }
  .comparar-linha h3 { padding-left: 0; }
  .lado-site { border-radius: 0; box-shadow: none; border-top-color: rgba(169, 196, 255, 0.14); }
  .comparar-linha:last-child .lado-site { border-radius: 0 0 16px 16px; padding-bottom: 28px; }
  .comparar-linha:first-child .lado-site { border-top-color: transparent; }
  .rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Como funciona: a pilha de 4 camadas guiada pela rolagem ----------
   Sem JS (ou antes dele), tudo aparece montado e legível. Com JS, a seção
   ganha .rolagem e cada etapa de texto controla a sua camada (--p e --e). */
.como { background: radial-gradient(70% 60% at 80% 70%, #16233A 0%, var(--ink) 70%); }
.historia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; margin-top: clamp(24px, 4vw, 56px); }
.palco-wrap { grid-column: 2; grid-row: 1; }
.historia-tela { display: contents; }
.passos { grid-column: 1; grid-row: 1; list-style: none; padding: 0 0 18vh; margin: 0; }

/* Cada etapa ocupa quase uma tela: é a distância de rolagem da sua camada */
.passo { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; max-width: 30em; }
.passo .num { font: 500 0.8rem/1 var(--mono); color: var(--mint); transition: color 300ms ease; }
.passo h3 { margin-top: 14px; font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.1; letter-spacing: -0.025em; color: #fff; text-wrap: balance; overflow-wrap: break-word; transition: color 300ms ease; }
.passo p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.65; color: var(--text-soft); text-wrap: pretty; overflow-wrap: break-word; transition: color 300ms ease; }
.passo strong { color: #fff; font-weight: 700; }
.passo .entrega { margin-top: 18px; padding-left: 14px; font: 500 0.8125rem/1.55 var(--mono); color: var(--text-faint); box-shadow: inset 2px 0 0 var(--line); }
.passo .entrega b { color: var(--text); font-weight: 500; }
.passo .btn { margin-top: 26px; align-self: flex-start; }
/* Etapa fora de foco: mais apagada, mas ainda legível (cores com contraste AA) */
.rolagem .passo:not(.ativo) h3 { color: var(--text-soft); }
.rolagem .passo:not(.ativo) p, .rolagem .passo:not(.ativo) .num { color: var(--text-faint); }

.palco-rolagem { --palco-h: min(600px, calc(100svh - var(--nav-h) - 32px)); position: sticky; top: calc(var(--nav-h) + (100svh - var(--nav-h) - var(--palco-h)) / 2); height: var(--palco-h); perspective: 1900px; }
.como-marcos { position: absolute; top: 8px; left: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 0.75rem/1 var(--mono); color: #fff; }
.como-marcos span { display: inline-flex; align-items: center; gap: 8px; transition: color 300ms ease; }
.como-marcos span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); transition: background-color 300ms ease, opacity 300ms ease; }
.rolagem .como-marcos span:not(.lit) { color: var(--text-faint); }
.rolagem .como-marcos span:not(.lit)::before { background: currentColor; opacity: 0.5; }

/* --g: progresso da seção inteira; a "câmera" gira um pouco */
.pilha { --g: 0; position: absolute; left: 44%; top: 64%; width: 420px; height: 316px; margin: -158px 0 0 -210px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(calc(-40deg + var(--g) * 8deg)); }
/* A camada nasce em cima da anterior (--z0) e sobe até o seu lugar (--z1) */
.camada { position: absolute; inset: 0; border-radius: 14px; opacity: clamp(0, calc(var(--p) * 3), 1); transform: translateZ(calc(var(--z0) + (var(--z1) - var(--z0)) * var(--e))); }
.camada.l0 { --z0: -60px; --z1: 0px; }
.camada.l1 { --z0: 0px; --z1: 75px; }
.camada.l2 { --z0: 75px; --z1: 150px; }
.camada.l3 { --z0: 150px; --z1: 225px; }
/* Movimento reduzido: a camada surge já no lugar, só com opacidade */
.rolagem-reduzida .camada, .rolagem-reduzida .revela, .rolagem-reduzida .chk::after { transition: opacity 300ms ease; }

@media (min-width: 960px) {
  .como-topo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; }
  .como-topo .sec-lede { margin-top: 0; }
}

/* Computador largo, com JS: a tela fica presa e a pilha vai para o centro,
   maior. O título da etapa fica à esquerda e a explicação à direita; ao rolar,
   os textos trocam no lugar. A altura de .historia é a distância de rolagem. */
@media (min-width: 1100px) {
  .rolagem .historia { display: block; height: calc(100svh - var(--nav-h) + 4 * 75svh); }
  .rolagem .historia-tela { --centro: min(600px, 48%); position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: grid; grid-template-columns: minmax(0, 1fr) var(--centro) minmax(0, 1fr); }
  .rolagem .palco-wrap { grid-column: 2; grid-row: 1; }
  .rolagem .palco-rolagem { position: relative; top: 0; height: 100%; }
  .rolagem .como-marcos { left: 50%; top: 24px; transform: translateX(-50%); flex-wrap: nowrap; white-space: nowrap; }
  .rolagem .pilha { left: 50%; top: 58%; transform: rotateX(56deg) rotateZ(calc(-40deg + var(--g) * 8deg)) scale(var(--escala, 1)); }
  .rolagem .passos { grid-column: 1 / -1; grid-row: 1; position: relative; padding: 0; }
  .rolagem .passo { position: absolute; inset: 0; min-height: 0; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) var(--centro) minmax(0, 1fr); align-items: center; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
  /* Troca de texto: o antigo sai rápido para cima; o novo espera um instante e
     sobe linha a linha. Etapas já passadas (.antes) ficam acima, as próximas abaixo. */
  .rolagem .passo.ativo { opacity: 1; pointer-events: auto; transition: opacity 450ms ease 120ms; }
  .rolagem .passo-esq { grid-column: 1; margin-right: 32px; }
  .rolagem .passo-dir { grid-column: 3; margin-left: 32px; display: flex; flex-direction: column; }
  .rolagem .passo-esq > *, .rolagem .passo-dir > * { transform: translateY(18px); filter: blur(4px); transition: transform 240ms ease, filter 240ms ease; }
  .rolagem .passo.antes .passo-esq > *, .rolagem .passo.antes .passo-dir > * { transform: translateY(-12px); }
  .rolagem .passo.ativo .passo-esq > *, .rolagem .passo.ativo .passo-dir > * { transform: none; filter: none; transition: transform 650ms var(--ease-out), filter 450ms ease; transition-delay: calc(120ms + var(--i, 0) * 55ms); }
  .rolagem .passo-esq > :nth-child(2), .rolagem .passo-dir > :nth-child(1) { --i: 1; }
  .rolagem .passo-dir > :nth-child(2) { --i: 2; }
  .rolagem .passo-dir > :nth-child(3) { --i: 3; }
  .rolagem .passo h3 { font-size: clamp(1.9rem, 0.9rem + 1.9vw, 2.75rem); }
  .rolagem .passo-dir p:first-child { margin-top: 0; }
  /* Fora de foco o texto some (não fica apagado): as cores voltam ao normal */
  .rolagem .passo:not(.ativo) h3 { color: #fff; }
  .rolagem .passo:not(.ativo) p { color: var(--text-soft); }
  .rolagem .passo:not(.ativo) .num { color: var(--mint); }
  .rolagem .passo:not(.ativo) .entrega { color: var(--text-faint); }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .rolagem .pilha { --escala: 0.86; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  .rolagem .passo-esq > *, .rolagem .passo-dir > * { transform: none !important; filter: none !important; }
}

/* Celular: o palco fica preso logo abaixo do menu e o texto passa por baixo */
@media (max-width: 960px) {
  .historia { display: block; }
  .palco-wrap { position: sticky; top: var(--nav-h); z-index: 2; height: min(46svh, 380px); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); background: linear-gradient(var(--ink) 84%, rgba(11, 17, 28, 0)); }
  .palco-rolagem { position: relative; top: 0; height: 100%; }
  .como-marcos { top: 12px; gap: 6px 14px; font-size: 0.6875rem; }
  .pilha { left: 50%; top: 73%; transform: rotateX(56deg) rotateZ(calc(-40deg + var(--g) * 8deg)) scale(0.47); }
  .passo { min-height: 70svh; justify-content: flex-start; padding-top: 4svh; }
  .passos { padding-bottom: 24svh; }
}
@media (max-width: 359px) {
  .pilha { scale: 0.9; }
}

/* ---------- Preço: um cartão só ---------- */
.cartao { margin-top: clamp(36px, 4.5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 20px; background: #0F1726; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, 0.8); overflow: hidden; }
.cartao-valor { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 24px; background: radial-gradient(120% 90% at 0% 0%, #1E2D45 0%, #141E31 70%); }
.selo { display: inline-flex; align-items: center; gap: 8px; font: 500 0.8125rem/1.4 var(--mono); color: var(--mint); }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.valor { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.valor s { font: 600 1.25rem/1 var(--sans); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.valor strong { font: 800 min(clamp(3rem, 2.2rem + 3vw, 4.5rem), 19vw)/1 var(--sans); letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; }
.valor-nota { margin-top: 14px; font-size: 1rem; line-height: 1.6; color: var(--text-soft); }
.cartao-valor .btn { margin-top: 28px; }

.cartao-detalhe, .cartao-tempo { padding: 32px 24px 36px; }
.cartao-tempo { border-top: 1px solid var(--line); }
.cartao h3 { font: 700 1.0625rem/1.3 var(--sans); color: #fff; }
.cartao h3 + * { margin-top: 18px; }
.cartao-valor, .cartao-detalhe, .cartao-tempo { min-width: 0; overflow-wrap: break-word; }

.incluso { list-style: none; padding: 0; display: grid; gap: 12px; }
.incluso li { position: relative; padding-left: 30px; font-size: 1rem; line-height: 1.55; color: var(--text); }
.incluso li::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 11px; height: 6px; border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint); transform: rotate(-45deg); }
.incluso strong { font-weight: 700; }

/* Linha do tempo do custo: contínua até os 12 meses, tracejada depois (é escolha do cliente) */
.linha-tempo { list-style: none; padding: 0; display: grid; }
.linha-tempo li { position: relative; padding: 0 0 26px 30px; }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); }
.linha-tempo li::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 1px; background: var(--mint); opacity: 0.5; }
.linha-tempo li:nth-child(2)::after { background: repeating-linear-gradient(to bottom, var(--text-faint) 0 4px, transparent 4px 8px); opacity: 1; }
.linha-tempo li:last-child::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-faint); }
.linha-tempo li:last-child::after { display: none; }
.quando { font: 600 0.8125rem/1.4 var(--mono); color: var(--mint); }
.linha-tempo li:last-child .quando { color: var(--sky); }
.quando + p { margin-top: 4px; font-size: 1rem; line-height: 1.6; color: var(--text-soft); text-wrap: pretty; }
.quando + p strong { color: #fff; font-weight: 700; white-space: nowrap; }

@media (min-width: 960px) {
  .cartao { grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr); }
  .cartao-valor { padding: 48px 44px; }
  .cartao-detalhe { padding: 48px 48px 52px; }
  .cartao-tempo { grid-column: 1 / -1; padding: 40px 44px 48px; }
  .cartao-tempo .linha-tempo { margin-top: 26px; }
  .linha-tempo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
  .quando + p { max-width: 32ch; }
  .linha-tempo li { padding: 26px 0 0; }
  .linha-tempo li::before { left: 0; top: 0; }
  .linha-tempo li::after { left: 17px; right: -28px; top: 4px; bottom: auto; width: auto; height: 1px; }
  .linha-tempo li:nth-child(2)::after { background: repeating-linear-gradient(to right, var(--text-faint) 0 4px, transparent 4px 8px); }
}

/* ---------- Dúvidas ---------- */
.duvidas-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.link-wa { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; overflow-wrap: anywhere; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 18px 0; font: 600 1.0625rem/1.4 var(--sans); color: #fff; cursor: pointer; list-style: none; border-radius: 4px; -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
/* Sinal de + desenhado; vira × quando a pergunta está aberta */
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; color: var(--text-faint); background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform 200ms var(--ease-out), color 200ms ease; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--mint); }
.faq details p { max-width: 62ch; padding: 0 36px 24px 0; font-size: 1rem; line-height: 1.65; color: var(--text-soft); text-wrap: pretty; }
.faq details p strong { color: var(--text); font-weight: 700; }

@media (hover: hover) and (pointer: fine) {
  .faq summary:hover::after { color: var(--mint); }
  .link-wa:hover { text-decoration-thickness: 2.5px; }
}

@media (min-width: 960px) {
  .duvidas-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .duvidas-topo { position: sticky; top: calc(var(--nav-h) + 40px); }
}

/* ---------- Chamada final ---------- */
.contato { background: radial-gradient(60% 70% at 50% 18%, #1A2840 0%, var(--ink) 72%); }
.final { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.final .sec-titulo, .final .sec-lede { margin-inline: auto; }
.final-url { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 10px 10px 10px 18px; border-radius: 12px; background: #fff; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.7); }
.final-url .url { flex: 0 1 auto; min-width: 0; margin: 0; height: auto; padding: 0; background: none; box-shadow: none; font: 500 clamp(1rem, 0.85rem + 0.8vw, 1.375rem)/1.2 var(--sans); color: #6B625A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.final-url .url b { color: #2A211B; }
.final .sec-titulo { margin-top: 36px; max-width: 14em; font-size: min(clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem), 11vw); }
.final-acao { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.final-oferta { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; font: 500 0.8125rem/1.4 var(--mono); color: var(--text-faint); }
.final-oferta s { font-family: var(--sans); font-size: 1rem; }
.final-oferta strong { font: 800 1.5rem/1 var(--sans); letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- Revelação ao rolar (só com JS; sem JS tudo já aparece) ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media print {
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}