:root {
  --papel: #f6f3ee; --cartao: #fffdf9; --cartao-2: #f0ebe3; --linha: #e2dace;
  --tinta: #1d2420; --tinta-suave: #5a625d; --tinta-fraca: #6c716c;
  --marca: #1f3a33; --marca-tinta: #f6f3ee; --marca-suave: #e1ebe5;
  --ouro: #a8742a; --perigo: #a33a2a;
  --sombra: 0 30px 80px -30px rgba(31, 58, 51, .35), 0 10px 30px -15px rgba(29, 36, 32, .25);
  --titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --largura: 1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #141816; --cartao: #1c211e; --cartao-2: #232925; --linha: #2f3632;
    --tinta: #ece8e1; --tinta-suave: #a7ada8; --tinta-fraca: #959c97;
    --marca: #9cc7b4; --marca-tinta: #10201a; --marca-suave: #22322b; --ouro: #d9a75c;
    --sombra: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 10px 30px -15px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 17px/1.6 var(--corpo); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); font-optical-sizing: auto; font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 100; background: var(--marca); color: var(--marca-tinta); padding: 10px 16px; border-radius: 10px; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; border-radius: 6px; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; border: 1px solid transparent; white-space: nowrap; }
.botao:hover { transform: translateY(-2px); }
.botao-p { background: var(--marca); color: var(--marca-tinta); box-shadow: 0 8px 20px -10px var(--marca); }
.botao-s { background: var(--cartao); border-color: var(--linha); color: var(--tinta); }
.botao-claro { background: var(--marca-tinta); color: var(--marca); }
.botao-g { min-height: 54px; padding: 0 28px; font-size: 1.02rem; border-radius: 14px; }
.largo { width: 100%; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 50; transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.topo.rolou { background: color-mix(in srgb, var(--papel) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--linha); }
.topo-in { max-width: var(--largura); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titulo); font-weight: 600; font-size: 1.25rem; color: var(--tinta); }
.logo svg { width: 30px; height: 30px; color: var(--marca); }
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { text-decoration: none; color: var(--tinta-suave); font-weight: 500; font-size: .95rem; transition: color .2s; }
.menu a:hover { color: var(--tinta); }
.topo-acoes { display: flex; align-items: center; gap: 18px; }
.link-entrar { text-decoration: none; font-weight: 600; font-size: .95rem; }
@media (max-width: 860px) { .menu { display: none; } .topo-acoes { margin-left: auto; } }
@media (max-width: 400px) { .topo-in { padding: 12px 16px; gap: 12px; } .logo span { font-size: 1.1rem; } .topo-acoes { gap: 12px; } .topo-acoes .botao { padding: 0 14px; } }

/* Herói */
.heroi { position: relative; max-width: var(--largura); margin: 0 auto; padding: 72px 24px 40px; display: grid; grid-template-columns: 1fr; gap: 64px; }
.heroi-fundo { position: absolute; inset: -120px -40vw 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 75% 30%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 70%), radial-gradient(40% 40% at 15% 10%, color-mix(in srgb, var(--ouro) 14%, transparent), transparent 70%); }
.heroi-texto { max-width: 820px; margin: 0 auto; text-align: center; }
.selo { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--marca); background: var(--marca-suave); padding: 6px 12px; border-radius: 99px; margin-bottom: 22px; }
.selo-claro { color: var(--marca-tinta); background: color-mix(in srgb, var(--marca-tinta) 14%, transparent); }
.heroi h1 { font-size: clamp(2.5rem, 6.4vw, 4.9rem); line-height: 1.02; letter-spacing: -.025em; }
.heroi h1 em { font-style: italic; color: var(--marca); font-weight: 500; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--tinta-suave); margin-top: 22px; }
.heroi .lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.heroi-acoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.nota { margin-top: 16px; font-size: .9rem; color: var(--tinta-fraca); }

.heroi-visual { position: relative; max-width: 1060px; margin: 0 auto; width: 100%; perspective: 1600px; }
.heroi-visual .navegador { transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, 0deg)); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.navegador { margin: 0; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); box-shadow: var(--sombra); overflow: hidden; }
.navegador-barra { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: var(--cartao-2); border-bottom: 1px solid var(--linha); }
.navegador-barra i { width: 11px; height: 11px; border-radius: 50%; background: var(--linha); }
.navegador-barra span { margin: 0 auto; font-size: .75rem; color: var(--tinta-fraca); background: var(--cartao); padding: 3px 14px; border-radius: 8px; transform: translateX(-20px); }
.celular { margin: 0; width: 240px; border-radius: 38px; padding: 9px; background: #0f1311; box-shadow: var(--sombra), inset 0 0 0 1.5px #2d332f; }
.celular img { border-radius: 30px; }
.celular-heroi { position: absolute; right: -24px; bottom: -40px; width: 210px; transform: translateY(var(--ty, 0)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.flutua { position: absolute; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--linha); box-shadow: var(--sombra); font-size: .85rem; animation: boiar 6s ease-in-out infinite; }
.flutua b { font-weight: 600; }
.flutua span { color: var(--tinta-suave); font-size: .8rem; }
.flutua-1 { left: -36px; top: 22%; border-left: 4px solid var(--perigo); }
.flutua-2 { left: 8%; bottom: -26px; border-left: 4px solid var(--marca); animation-delay: -3s; }
@keyframes boiar { 50% { transform: translateY(-10px); } }
@media (max-width: 860px) {
  .heroi { padding-top: 40px; gap: 48px; }
  .celular-heroi { width: 128px; right: -6px; bottom: -28px; padding: 5px; border-radius: 22px; }
  .celular-heroi img { border-radius: 18px; }
  .flutua-1 { left: -6px; top: -22px; } .flutua-2 { display: none; }
  .navegador-barra span { display: none; }
}

/* Faixa */
.faixa { margin-top: 72px; border-block: 1px solid var(--linha); overflow: hidden; background: var(--cartao); }
.faixa-trilho { display: flex; width: max-content; animation: correr 40s linear infinite; }
.faixa-trilho span { padding: 18px 28px; font-family: var(--titulo); font-size: 1.1rem; white-space: nowrap; color: var(--tinta-suave); }
.faixa-trilho span::after { content: '✦'; margin-left: 56px; color: var(--ouro); font-size: .8rem; vertical-align: middle; }
@keyframes correr { to { transform: translateX(-50%); } }

/* Seções */
section { scroll-margin-top: 80px; }
.dor, .recursos, .extras, .passos, .planos, .perguntas { max-width: var(--largura); margin: 0 auto; padding: 110px 24px 0; }
.dor h2, .extras h2, .passos h2, .perguntas h2 { max-width: 760px; }
.dor-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.dor-grade article { padding: 30px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); }
.num { display: block; font-family: var(--titulo); font-size: 2.4rem; color: var(--ouro); line-height: 1; margin-bottom: 18px; }
.dor-grade p, .extra p, .passos-lista p { color: var(--tinta-suave); margin-top: 10px; font-size: 1rem; }
@media (max-width: 860px) { .dor-grade { grid-template-columns: 1fr; } }

.secao-cab { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.recurso { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; padding: 70px 0; border-bottom: 1px solid var(--linha); }
.recurso:last-child { border-bottom: 0; }
.recurso.inverte .recurso-texto { order: 2; }
.rotulo { font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro); margin-bottom: 14px; }
.recurso h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.recurso-texto > p:not(.rotulo) { color: var(--tinta-suave); margin-top: 18px; }
.lista-ok { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.lista-ok li { position: relative; padding-left: 32px; }
.lista-ok li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--marca-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%231f3a33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.recurso-img { margin: 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.recurso-img:hover { transform: translateY(-6px); }
.recurso-duplo { position: relative; padding-bottom: 40px; }
.recurso-duplo .celular { position: absolute; right: -20px; bottom: 0; width: 170px; padding: 6px; border-radius: 28px; }
.recurso-duplo .celular img { border-radius: 22px; }
@media (max-width: 860px) {
  .recurso { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
  .recurso.inverte .recurso-texto { order: 0; }
  .recurso-duplo .celular { width: 110px; right: -4px; padding: 4px; border-radius: 18px; }
  .recurso-duplo .celular img { border-radius: 14px; }
}

.extras-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.extra { padding: 26px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); transition: transform .3s, border-color .3s; }
.extra:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--marca) 40%, var(--linha)); }
.extra svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--marca-suave); fill: none; stroke: var(--marca); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.extra h3 { font-size: 1.12rem; }
.extra small { display: inline-block; font-family: var(--corpo); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--ouro) 18%, transparent); color: var(--ouro); vertical-align: middle; margin-left: 4px; }
@media (max-width: 1000px) { .extras-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .extras-grade { grid-template-columns: 1fr; } }

.seguranca { margin-top: 120px; background: #1f3a33; color: #f6f3ee; }
.seguranca-in { max-width: var(--largura); margin: 0 auto; padding: 100px 24px; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }
.seguranca .lead { color: #c9d6cf; }
.seg-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; }
.seg-lista li { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid rgba(246, 243, 238, .18); }
.seg-lista b { font-family: var(--titulo); font-size: 1.2rem; font-weight: 600; }
.seg-lista span { color: #c9d6cf; font-size: .98rem; }
@media (max-width: 860px) { .seguranca-in { grid-template-columns: 1fr; padding: 72px 24px; gap: 40px; } .seg-lista { grid-template-columns: 1fr; } }

.passos-lista { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: p; }
.passos-lista li { position: relative; padding: 30px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); }
.passos-lista li > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--marca); color: var(--marca-tinta); font-family: var(--titulo); font-size: 1.3rem; font-weight: 600; margin-bottom: 20px; }
@media (max-width: 860px) { .passos-lista { grid-template-columns: 1fr; } }

.planos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 24px; margin-top: 40px; }
.plano { position: relative; display: flex; flex-direction: column; padding: 36px; border-radius: 22px; background: var(--cartao); border: 1px solid var(--linha); }
.plano .lista-ok { margin-bottom: 32px; flex: 1; }
.plano-destaque { border: 2px solid var(--marca); box-shadow: var(--sombra); }
.plano-selo { position: absolute; top: -14px; left: 36px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: var(--marca); color: var(--marca-tinta); padding: 5px 12px; border-radius: 99px; }
.plano h3 { font-size: 1.6rem; }
.plano-para { color: var(--tinta-suave); margin-top: 6px; font-size: .98rem; }
.preco { font-family: var(--titulo); font-size: 3.6rem; font-weight: 600; line-height: 1; margin-top: 26px; font-variant-numeric: lining-nums; }
.preco small { font-size: 1.3rem; vertical-align: top; margin-right: 4px; position: relative; top: 8px; }
.preco span { font-family: var(--corpo); font-size: 1rem; font-weight: 500; color: var(--tinta-suave); margin-left: 4px; }
.planos-nota { text-align: center; color: var(--tinta-suave); margin-top: 26px; font-size: .95rem; }
@media (max-width: 760px) { .planos-grade { grid-template-columns: 1fr; } }

.perguntas-lista { margin-top: 40px; max-width: 820px; }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary { cursor: pointer; list-style: none; padding: 24px 44px 24px 0; font-family: var(--titulo); font-size: 1.25rem; font-weight: 600; position: relative; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--corpo); font-weight: 400; font-size: 1.8rem; color: var(--marca); transition: transform .3s; }
.perguntas details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.perguntas details p { padding: 0 44px 24px 0; color: var(--tinta-suave); }

.final { max-width: var(--largura); margin: 110px auto 0; padding: 0 24px; }
.final-in { position: relative; overflow: hidden; text-align: center; padding: 90px 28px; border-radius: 28px; background: #1f3a33; color: #f6f3ee; }
.final-in::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 80% at 50% 0%, rgba(217, 167, 92, .28), transparent 70%); }
.final-in > * { position: relative; }
.final h2 { max-width: 760px; margin: 0 auto; }
.final p { color: #c9d6cf; margin: 18px 0 34px; font-size: 1.1rem; }
.final .botao-claro { background: #f6f3ee; color: #1f3a33; }

.rodape { margin-top: 90px; border-top: 1px solid var(--linha); }
.rodape-in { max-width: var(--largura); margin: 0 auto; padding: 40px 24px 50px; display: grid; gap: 16px; color: var(--tinta-fraca); font-size: .92rem; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.rodape nav a { text-decoration: none; color: var(--tinta-suave); }
.rodape nav a:hover { color: var(--tinta); }

/* Animações de entrada */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--atraso, 0s); }
.js .revelar.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
  .heroi-visual .navegador { transform: none; }
}
.logo { white-space: nowrap; }
@media (max-width: 420px) {
  .topo-in { padding: 12px 16px; gap: 10px; }
  .logo { gap: 8px; font-size: 1.05rem; } .logo svg { width: 26px; height: 26px; }
  .topo-acoes { gap: 12px; } .topo-acoes .botao { padding: 0 12px; min-height: 40px; font-size: .88rem; }
  .link-entrar { font-size: .88rem; }
  .heroi { padding-left: 16px; padding-right: 16px; }
  .dor, .recursos, .extras, .passos, .planos, .perguntas, .final { padding-left: 16px; padding-right: 16px; }
  .plano { padding: 28px 22px; }
}
.entra { animation: entrar .9s cubic-bezier(.2, .7, .2, 1) both; }
.heroi-texto .entra:nth-child(2) { animation-delay: .08s; } .heroi-texto .entra:nth-child(3) { animation-delay: .16s; }
.heroi-texto .entra:nth-child(4) { animation-delay: .24s; } .heroi-texto .entra:nth-child(5) { animation-delay: .3s; }
.heroi-visual.entra { animation-delay: .35s; animation-duration: 1.2s; }
@keyframes entrar { from { opacity: 0; transform: translateY(24px); } }
.implantacao { max-width: 824px; margin: 28px auto 0; padding: 32px; border-radius: 22px; background: var(--cartao); border: 1px solid var(--linha); }
.implantacao h3 { font-size: 1.5rem; }
.impl-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.impl-grade > div { padding: 20px; border-radius: 16px; background: var(--cartao-2); display: grid; gap: 4px; align-content: start; }
.impl-grade b { font-family: var(--titulo); font-size: 1.1rem; font-weight: 600; }
.impl-preco { font-family: var(--titulo); font-size: 1.8rem; font-weight: 600; line-height: 1.2; }
.impl-grade span { color: var(--tinta-suave); font-size: .93rem; }
@media (max-width: 760px) { .impl-grade { grid-template-columns: 1fr; } .implantacao { padding: 24px 20px; } }