/* O Hub da ArqRede (a identidade de outubro de 2026: o balão, a paleta 01 e a Outfit): a página de vendas, o Entrar, o Obrigada e o Reembolso.
   Fica fora do HTML de propósito: o WhatsApp só lê o começo da página para montar a prévia do link.
   Mudou este arquivo? Suba o ?v= nas páginas (o /css fica 30 dias em cache).
   Primeiro o celular; as telas maiores ganham colunas. */

:root {
  /* a marca (paleta 01: petróleo, marfim, sálvia e grafite). Os nomes antigos ficaram para não mexer em todo o CSS:
     --verde é o petróleo, --terra é a cor de ação (também o petróleo) e --terra-claro é a sálvia sobre o petróleo. */
  --verde: #0C3E49;        /* petróleo: o balão, os fundos escuros, os destaques */
  --tinta: #252B2D;        /* grafite: o nome e os títulos */
  --terra: #0C3E49;        /* ações: botões, links, ícones */
  --terra-esc: #082E36;    /* o botão sob o mouse */
  --terra-claro: #9CB2A2;  /* sálvia: o destaque sobre o petróleo (5:1) */
  --areia: #E2E9E3;        /* sálvia clara: fundos de seção e apoio */
  --cal: #F5F3EC;          /* marfim: o fundo de tudo */
  --carvao: #2F3538;       /* o texto corrido */
  /* apoio */
  --cinza: #5A6265;        /* texto secundário: 6:1 no marfim, 5:1 na sálvia clara */
  --papel: #FDFCF8;        /* cartões e documentos */
  --linha: #D5DCD5;
  --sobre-verde: rgba(245, 243, 236, .78); /* texto secundário no petróleo: 8:1 */
  --g: clamp(16px, 4vw, 40px);
  --sombra: 0 30px 60px -30px rgba(12, 40, 46, .38);
  --fios: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13' fill='none' stroke='%230C3E49' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M1.5 1.5A10.5 3.2 0 0 0 22.5 1.5'/%3E%3Cpath d='M1.5 1.5A10.5 6.6 0 0 0 22.5 1.5'/%3E%3Cpath d='M1.5 1.5A10.5 10 0 0 0 22.5 1.5'/%3E%3C/svg%3E");
  --fios-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13' fill='none' stroke='%239CB2A2' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M1.5 1.5A10.5 3.2 0 0 0 22.5 1.5'/%3E%3Cpath d='M1.5 1.5A10.5 6.6 0 0 0 22.5 1.5'/%3E%3Cpath d='M1.5 1.5A10.5 10 0 0 0 22.5 1.5'/%3E%3C/svg%3E");
  --visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C3E49' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  --visto-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CB2A2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px }
body { margin: 0; font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; color: var(--carvao); background: var(--cal); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip }
img, svg { max-width: 100%; display: block }
img { height: auto }
a { color: inherit }
p { margin: 0 }
ul, ol { margin: 0; padding: 0; list-style: none }
button, input, select, textarea { font: inherit }
[hidden] { display: none !important }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--g) }
section { padding: clamp(64px, 9vw, 120px) 0; position: relative }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px }
.pular { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--verde); color: var(--cal); padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none }
.pular:focus { top: 12px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---------- letra: Outfit, o título em SemiBold grafite e a segunda linha em Light petróleo ---------- */
h1, h2, h3, h4 { margin: 0; color: var(--tinta); font-weight: 600; letter-spacing: -.02em; line-height: 1.1 }
h1 { font-size: clamp(36px, 2.9vw + 24px, 64px); line-height: 1.04 }
h2 { font-size: clamp(30px, 1.9vw + 21px, 48px); line-height: 1.06 }
h1 span, h2 span { display: block; font-weight: 300; letter-spacing: -.02em; color: var(--verde) }
h2 span { font-weight: 300 }
.olho { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--verde); margin-bottom: 16px }
.lead { font-size: clamp(16.5px, .35vw + 15.3px, 19px); line-height: 1.65; max-width: 620px }
.cab { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 52px) }
.cab .lead { color: var(--carvao) }
.cab-centro { text-align: center; justify-items: center }
.cab-centro .olho { justify-content: center }

/* ---------- botões ---------- */
/* o botão petróleo: marfim sobre petróleo tem 11:1 */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border-radius: 999px; border: 0; background: var(--terra); color: var(--cal); font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-decoration: none; text-align: center; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s }
.bt:hover { background: var(--terra-esc); transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(12, 62, 73, .6) }
.bt:disabled { opacity: .65; cursor: default; transform: none }
/* sobre o petróleo, o botão inverte: marfim com o texto em petróleo */
.final .bt, .plano.destaque .bt, .como .bt { background: var(--cal); color: var(--verde) }
.final .bt:hover, .plano.destaque .bt:hover, .como .bt:hover { background: #fff; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .35) }
.bt-p { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s }
.bt-verde { background: var(--verde); color: var(--cal) }
.bt-verde:hover { background: #145262 }
.bt-linha { background: transparent; color: var(--verde); box-shadow: inset 0 0 0 1.5px var(--verde) }
.bt-linha:hover { background: var(--verde); color: var(--cal) }
.bt-linha-g { background: transparent; color: var(--verde); box-shadow: inset 0 0 0 2px var(--verde); font-size: 17px }
.bt-linha-g:hover { background: var(--verde); color: var(--cal); box-shadow: none }
.lnk { color: var(--verde); font-weight: 600; text-decoration: underline; text-decoration-color: var(--terra); text-decoration-thickness: 2px; text-underline-offset: 5px }
.lnk:hover { text-decoration-color: var(--verde) }
.acoes .lnk, .calma-nota .lnk, .volta { display: inline-flex; align-items: center; min-height: 44px }

/* revelar ao rolar (só com JS) */
.js [data-r] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1) }
.js [data-r].in { opacity: 1; transform: none }
.js [data-r="2"] { transition-delay: .1s } .js [data-r="3"] { transition-delay: .2s }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 30; background: rgba(245, 243, 236, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s }
.topo.sombra { border-color: var(--linha) }
.topo .wrap { height: 64px; display: flex; align-items: center; gap: 14px }
.topo .logo { display: flex; align-items: center; min-height: 44px; margin-right: auto }
.topo .logo img { height: 22px; width: auto }
.topo nav, .so-grande { display: none }
.topo nav ul { display: flex; gap: 28px; font-size: 15px; font-weight: 500 }
.topo nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--carvao) }
.topo nav a:hover { color: var(--verde); text-decoration: underline; text-decoration-color: var(--terra); text-decoration-thickness: 2px; text-underline-offset: 6px }

/* ---------- hero ---------- */
.hero { padding: 36px 0 64px; overflow: hidden }
.hero .wrap { display: grid; gap: 44px }
.hero .lead { margin-top: 22px }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 30px }
.acoes .bt { width: 100% }
.miudo { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--cinza) }
.miudo li { display: inline-flex; align-items: center; gap: 8px }
.miudo li::before { content: ""; width: 14px; height: 14px; background: var(--visto) center / contain no-repeat }

/* a tela do Hub (escala pela largura, como uma imagem) */
.palco { container-type: inline-size; position: relative; margin: 0; width: 100%; max-width: 620px; justify-self: center; aspect-ratio: 1 / .92 }
.palco::before { content: ""; position: absolute; left: 14cqw; right: 14cqw; top: 0; height: 74cqw; background: var(--areia); border-radius: 9cqw 9cqw 0 0 }
.palco::after { content: ""; position: absolute; left: 8cqw; right: 8cqw; top: -5cqw; height: 79cqw; border: 1.5px solid var(--terra); border-bottom: 0; border-radius: 12cqw 12cqw 0 0; opacity: .3 }
.tela { position: absolute; left: 3cqw; top: 15cqw; width: 94cqw; aspect-ratio: 16 / 10.4; z-index: 1; background: var(--papel); border-radius: 2.2cqw; overflow: hidden; box-shadow: 0 6cqw 10cqw -5cqw rgba(12, 40, 46, .45), 0 0 0 1px rgba(12, 40, 46, .06); display: flex; flex-direction: column; font-size: 1.9cqw; line-height: 1.35; color: var(--carvao) }
.tela-barra { flex: none; height: 5.4cqw; display: flex; align-items: center; gap: 1cqw; padding: 0 2.4cqw; background: #ECEFEA; border-bottom: 1px solid #DCE2DB }
.tela-barra i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #C3CCC4 }
.tela-barra span { margin: 0 auto; transform: translateX(-2cqw); background: var(--papel); border-radius: 99px; padding: .5cqw 6cqw; font-size: 1.6cqw; font-weight: 600; color: var(--cinza) }
.tela-corpo { flex: 1; display: grid; grid-template-columns: 22cqw minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0 }
.tela-lado { background: var(--verde); color: var(--sobre-verde); padding: 2.6cqw 1.6cqw 2.2cqw 2.4cqw; display: flex; flex-direction: column; font-size: 1.75cqw; font-weight: 500; min-height: 0; overflow: hidden }
.tela-lado img { width: 5.6cqw; height: 5.6cqw; margin-bottom: 2cqw }
.tela-lado li { padding: .8cqw 1.2cqw; border-radius: 1cqw; margin-left: -1.2cqw; white-space: nowrap }
.tela-lado li.on { background: rgba(245, 243, 236, .1); color: var(--cal); box-shadow: inset .5cqw 0 0 var(--terra-claro) }
.tela-lado p { margin-top: auto; border-top: 1px solid rgba(245, 243, 236, .15); padding-top: 1.6cqw }
.tela-main { padding: 2.6cqw 3.2cqw 2.4cqw; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden }
.tela-main small { font-size: 1.45cqw; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--cinza) }
.tela-main > b { font-size: 3.3cqw; color: var(--tinta); letter-spacing: -.02em; margin-top: .4cqw }
.tela-chips { display: flex; flex-wrap: wrap; gap: .9cqw; margin-top: 1.8cqw }
.tela-chips span { font-size: 1.6cqw; font-weight: 500; padding: .6cqw 1.5cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--linha); background: #fff }
.tela-chips .on { background: var(--verde); color: var(--cal); box-shadow: none }
.prev { margin-top: 2cqw; flex: 1; min-height: 0; display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border-radius: 1.2cqw; overflow: hidden; background: #F8F3EA; box-shadow: 0 0 0 1px #E7DDCF }
.prev-foto { position: relative; overflow: hidden }
.prev-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45% }
.prev > div { padding: 2cqw 2.4cqw; display: flex; flex-direction: column; gap: .6cqw; min-width: 0; min-height: 0; overflow: hidden }
.prev-marca { display: flex; align-items: center; gap: .8cqw; font-size: 1.35cqw; letter-spacing: .14em; text-transform: uppercase; color: #34493B; font-weight: 600 }
.prev-marca i { font-style: normal; width: 3.4cqw; height: 3.4cqw; flex: none; border: 1px solid #34493B; border-radius: 50%; display: grid; place-items: center; font-size: 1.3cqw; letter-spacing: 0 }
.prev-olho { margin-top: 1cqw; font-size: 1.25cqw; letter-spacing: .2em; text-transform: uppercase; color: #B5835A; font-weight: 600 }
.prev-tit { font-size: 3.2cqw; line-height: 1; font-weight: 300; color: #34493B; letter-spacing: -.02em }
.prev-tit b { display: block; font-weight: 700 }
.prev-l { height: .7cqw; border-radius: 1cqw; background: #E6DCCD; margin-top: .6cqw }
.prev-l.curta { width: 62% }
.prev-inv { margin-top: auto; border-top: 1px solid #B5835A; padding-top: 1cqw; font-size: 1.3cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw }
.prev-inv b { font-size: 2.2cqw; letter-spacing: -.01em; color: #34493B }
.tela-bt { flex: none; align-self: flex-end; margin-top: 1.6cqw; background: var(--terra); color: #fff; font-weight: 700; font-size: 1.7cqw; padding: 1cqw 2.6cqw; border-radius: 99px }
.flutua { position: absolute; z-index: 2; background: var(--papel); box-shadow: 0 5cqw 9cqw -4cqw rgba(12, 40, 46, .5), 0 0 0 1px rgba(12, 40, 46, .05) }
.f-salvo { right: 1cqw; top: 9.5cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 1.5cqw 2.6cqw 1.5cqw 1.6cqw; border-radius: 99px; font-size: 2.2cqw; font-weight: 600; color: var(--verde) }
.f-salvo i { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F3EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat }
.f-brief { left: 0; bottom: 0; width: 46cqw; padding: 3cqw 3.2cqw 2.8cqw; border-radius: 2.4cqw; display: flex; flex-direction: column; gap: 1.1cqw; font-size: 2.1cqw; line-height: 1.3 }
.f-brief small { font-size: 1.45cqw; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--cinza) }
.f-brief b { font-size: 2.6cqw; color: var(--verde); letter-spacing: -.01em; margin-bottom: .6cqw }
.op { display: flex; align-items: center; gap: 1.4cqw; padding: 1cqw 1.4cqw; border-radius: 1cqw; box-shadow: inset 0 0 0 1px var(--linha); color: var(--carvao) }
.op::before { content: ""; flex: none; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #AEB9B1 }
.op.on { box-shadow: inset 0 0 0 1.5px var(--verde); color: var(--verde); font-weight: 600 }
.op.on::before { box-shadow: inset 0 0 0 .7cqw var(--verde) }
.f-brief em { font-style: normal; margin-top: .8cqw; font-size: 1.7cqw; color: var(--cinza); display: flex; align-items: center; gap: 1cqw }
.f-brief em::before { content: ""; width: 2.4cqw; height: 2.4cqw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C3E49' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E") center / contain no-repeat }
@media (prefers-reduced-motion: no-preference) {
  .f-salvo { animation: aparece .7s .9s cubic-bezier(.2, .7, .2, 1) backwards }
  .f-brief { animation: aparece .8s .5s cubic-bezier(.2, .7, .2, 1) backwards }
  .tela { animation: aparece .9s .1s cubic-bezier(.2, .7, .2, 1) backwards }
  @keyframes aparece { from { opacity: 0; transform: translateY(4cqw) } }
}

/* ---------- a ArqRede ---------- */
.faixa-rede { background: var(--verde); color: var(--sobre-verde); padding: clamp(64px, 9vw, 112px) 0 clamp(96px, 12vw, 150px); overflow: hidden }
.faixa-rede .wrap { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start }
.faixa-logo { height: 26px; width: auto; opacity: .9 }
.faixa-rede h2 { color: var(--cal); font-size: clamp(38px, 4vw + 22px, 76px); line-height: 1.02 }
.faixa-rede h2 span { font-weight: 300; color: var(--terra-claro) }
.faixa-rede p { font-size: clamp(16.5px, .35vw + 15.3px, 19px); max-width: 640px; color: var(--sobre-verde) }
.fios { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 12vw, 170px); fill: none; stroke: var(--terra-claro); stroke-width: 1.5; opacity: .55; pointer-events: none }
.fios path { vector-effect: non-scaling-stroke }

/* ---------- o que há de novo ---------- */
.bento { display: grid; gap: 16px }
.nv { background: var(--papel); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(12, 40, 46, .06) }
.nv-vis { height: 244px; position: relative; overflow: hidden; background: var(--areia); display: grid; place-items: center; padding: 18px }
.nv-tx { padding: 22px 22px 26px }
.nv .mod { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza) }
.nv h3 { font-size: 21px; line-height: 1.2; margin: 8px 0 10px }
.nv-tx > p:last-child { font-size: 15.5px; line-height: 1.6 }

/* o formulário do briefing */
.form-c { width: 100%; max-width: 300px; background: var(--papel); border-radius: 14px; padding: 13px 14px 12px; display: grid; gap: 6px; font-size: 13px; box-shadow: 0 20px 34px -18px rgba(12, 40, 46, .45) }
.form-topo { display: flex; justify-content: space-between; gap: 8px }
.form-topo small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--cinza) }
.form-c > b { font-size: 15px; line-height: 1.25; color: var(--verde); margin: 1px 0 2px }
.form-c .op { padding: 6px 10px; border-radius: 8px; gap: 9px }
.form-c .op::before { width: 14px; height: 14px }
.form-c .op.on::before { box-shadow: inset 0 0 0 4.5px var(--verde) }
.form-link { margin-top: 3px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cinza) }
.form-link i { width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C3E49' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E") center / contain no-repeat }
.form-link em { font-style: normal; margin-left: auto; background: var(--verde); color: var(--cal); border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 600 }

/* os seis estilos de proposta */
.estilos { display: grid; grid-template-columns: repeat(3, 92px); gap: 14px 12px }
.es { display: grid; gap: 6px; justify-items: center }
.es i { width: 92px; height: 66px; border-radius: 5px; display: flex; align-items: flex-end; padding: 7px 8px; font-style: normal; font-size: 9.5px; line-height: 1.1; box-shadow: 0 10px 18px -10px rgba(12, 40, 46, .5); overflow: hidden; position: relative }
.es small { font-size: 11px; font-weight: 600; color: var(--verde) }
.es.on i { outline: 2.5px solid var(--terra); outline-offset: 3px }
.es-sof i { background: #2B2B29; color: #EADCCB; font-family: Georgia, serif; font-size: 11px; letter-spacing: .02em }
.es-sof i::before { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 1px; background: #B89A6A }
.es-mod i { background: #fff; color: #111; font-weight: 700; font-size: 10px; letter-spacing: .04em; align-items: flex-start }
.es-mod i::after { content: ""; position: absolute; right: 0; bottom: 0; width: 42%; height: 58%; background: #C86B4B }
.es-tec i { background: #fff repeating-linear-gradient(0deg, transparent 0 9px, #E3E7EA 9px 10px), #fff; background-image: repeating-linear-gradient(0deg, transparent 0 9px, #E3E7EA 9px 10px), repeating-linear-gradient(90deg, transparent 0 9px, #E3E7EA 9px 10px); color: #2B3A44; font-size: 9px; font-weight: 600; letter-spacing: .06em }
.es-ele i { background: #EADCCB; color: #1F2F28; font-family: Georgia, serif; font-style: italic; font-size: 11.5px; justify-content: center; align-items: center }
.es-ele i::before { content: ""; position: absolute; left: 30%; right: 30%; bottom: 15px; height: 1px; background: #1F2F28; opacity: .5 }
.es-min i { background: #FBFBF9; color: #555; font-size: 8.5px; letter-spacing: .12em; box-shadow: 0 10px 18px -10px rgba(12, 40, 46, .4), inset 0 0 0 1px #ECE8E0 }
.es-lud i { background: #F6D7CF; color: #2F3B8C; font-weight: 700; font-size: 10.5px; align-items: flex-start }
.es-lud i::before { content: ""; position: absolute; right: 9px; bottom: 9px; width: 20px; height: 20px; background: #6A7BD1; border-radius: 4px; transform: rotate(14deg) }
.es-lud i::after { content: ""; position: absolute; right: 30px; bottom: 8px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 15px solid #F0A04B }

/* o guia de especificação */
.guia-c { width: 100%; max-width: 330px; background: var(--papel); border-radius: 12px; padding: 10px 12px 12px; font-size: 11.5px; line-height: 1.3; box-shadow: 0 20px 34px -18px rgba(12, 40, 46, .45) }
.guia-cab, .guia-l { display: grid; grid-template-columns: minmax(0, 1fr) 52px 62px; gap: 8px; align-items: center }
.guia-cab { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--cinza); padding: 2px 0 7px; border-bottom: 1px solid var(--linha) }
.guia-cab span:nth-child(n+2), .guia-l > span:nth-child(n+3) { text-align: right }
.guia-l { grid-template-columns: 34px minmax(0, 1fr) 52px 62px; padding: 8px 0; border-bottom: 1px solid #E6EAE5 }
.guia-cab { grid-template-columns: minmax(0, 1fr) 52px 62px }
.guia-l img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover }
.guia-l b { display: block; color: var(--verde); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.guia-l small { display: block; color: var(--cinza); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.guia-l > span:nth-child(3) { color: var(--carvao); font-weight: 500 }
.guia-l > span:nth-child(4) { color: var(--verde); font-weight: 600 }
.guia-l .cotar { justify-self: end; font-size: 10px; font-weight: 600; color: var(--verde); box-shadow: inset 0 0 0 1px var(--terra); border-radius: 99px; padding: 1px 7px; white-space: nowrap }
.guia-tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; font-size: 10.5px; color: var(--cinza) }
.guia-tot b { font-size: 15px; color: var(--verde) }

/* o render */
.v-render { padding: 0 }
.v-render img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62% }
.render-c { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(255, 253, 249, .95); border-radius: 12px; padding: 9px; display: grid; gap: 7px; justify-items: start; box-shadow: 0 14px 26px -14px rgba(12, 40, 46, .55); font-size: 11.5px }
.r-seg { display: inline-flex; background: #E6EAE5; border-radius: 99px; padding: 3px; gap: 2px; max-width: 100% }
.r-seg > * { padding: 3px 10px; border-radius: 99px; white-space: nowrap; color: var(--cinza); font-weight: 500 }
.r-seg b { background: var(--verde); color: var(--cal); font-weight: 600 }
.render-bt { position: absolute; right: 9px; top: 9px; background: var(--terra); color: #fff; font-weight: 700; border-radius: 99px; padding: 5px 12px; font-size: 11.5px }

/* o carrossel */
.car { position: relative; width: 236px; height: 186px }
.car span { position: absolute; width: 168px; height: 168px; border-radius: 8px; background: center / cover; box-shadow: 0 16px 28px -14px rgba(12, 40, 46, .55) }
.car-c { left: 68px; top: 18px; transform: rotate(7deg); opacity: .8 }
.car-b { left: 40px; top: 10px; transform: rotate(3deg) }
.car-a { left: 0; top: 4px; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; color: #fff; overflow: hidden; z-index: 1 }
.car-a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 40, 46, 0) 30%, rgba(12, 40, 46, .85)) }
.car-a b, .car-a small, .car-a em { position: relative }
.car-a b { font-size: 16px; line-height: 1.1; letter-spacing: -.01em }
.car-a small { font-size: 10.5px; margin-top: 3px; opacity: .92 }
.car-a em { position: absolute; top: 9px; right: 9px; font-style: normal; font-size: 10px; font-weight: 600; background: rgba(12, 40, 46, .7); padding: 2px 7px; border-radius: 99px }

/* tudo salvo */
.salvos { width: 100%; max-width: 320px; display: grid; gap: 8px }
.salvos li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--papel); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.25; box-shadow: 0 12px 22px -16px rgba(12, 40, 46, .5) }
.salvos i { width: 30px; height: 36px; border-radius: 3px; background: #EEF1EC; box-shadow: inset 0 0 0 1px var(--linha); position: relative }
.salvos i::before { content: ""; position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: var(--terra); box-shadow: 0 5px 0 #D2D9D2, 0 10px 0 #D2D9D2, 0 15px 0 #D2D9D2 }
.salvos b { display: block; color: var(--verde); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.salvos small { color: var(--cinza); font-size: 11.5px }
.salvos em { font-style: normal; font-size: 11px; color: var(--cinza) }

/* ---------- os cinco módulos ---------- */
.modulos { background: var(--areia) }
.modulo { background: var(--cal); border-radius: 24px; padding: 26px 20px 22px; display: grid; gap: 22px; margin-top: 16px }
.mod-n { font-size: 30px; font-weight: 200; line-height: 1; color: var(--terra); letter-spacing: -.02em }
.mod-lado h3 { font-size: clamp(26px, 1.4vw + 20px, 36px); margin-top: 6px }
.mod-res { margin-top: 8px; font-size: 16.5px; color: var(--carvao) }
.vitrine { position: relative; height: 170px; margin-top: 22px; border-radius: 16px; background: var(--areia); overflow: hidden; container-type: inline-size }
.fl { position: absolute; width: 30cqw; max-width: 132px; aspect-ratio: 400 / 566; left: 50%; top: 24px; border-radius: 3px; background: #fff; box-shadow: 0 2px 4px rgba(12, 40, 46, .12), 0 20px 30px -14px rgba(12, 40, 46, .5); transition: transform .6s cubic-bezier(.2, .7, .2, 1) }
.fl.f1 { transform: translateX(-118%) rotate(-7deg) }
.fl.f2 { transform: translateX(18%) rotate(6deg) }
.fl.f3 { transform: translateX(-50%) translateY(-6px); z-index: 1 }
.dois .fl.f1 { transform: translateX(-96%) rotate(-6deg) }
.dois .fl.f3 { transform: translateX(-8%) rotate(3deg) translateY(-4px) }
.v-foto .foto { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%; width: 44cqw; max-width: 200px; transform: translateX(-50%) translateY(18px) rotate(-2deg); z-index: 1; border: 4px solid #fff; border-radius: 3px }
@media (hover: hover) {
  .modulo:hover .fl.f1 { transform: translateX(-126%) rotate(-10deg) }
  .modulo:hover .fl.f2 { transform: translateX(26%) rotate(9deg) }
  .modulo:hover .fl.f3 { transform: translateX(-50%) translateY(-12px) }
}
.ferramentas { border-top: 1px solid var(--linha) }
.ferramentas li { padding: 16px 0; border-bottom: 1px solid var(--linha) }
.ferramentas h4 { font-size: 18px; letter-spacing: -.015em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px }
.ferramentas p { margin-top: 5px; font-size: 15.5px; line-height: 1.6 }
.novo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); padding: 3px 10px 3px 8px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--terra); line-height: 1.3 }
.novo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terra) }
.mod-pe { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px }
.mod-pe p { display: grid; font-size: 13.5px; line-height: 1.35; color: var(--cinza) }
.mod-pe p b { font-size: 24px; color: var(--verde); letter-spacing: -.02em; line-height: 1.1 }

/* ---------- como funciona e a sua marca ---------- */
.como { background: var(--verde); color: var(--sobre-verde); overflow: hidden }
.como .wrap { display: grid; gap: 48px }
.como h2, .como h3 { color: var(--cal) }
.como h2 span { color: var(--terra-claro) }
.como .olho { color: var(--cal) }
.passos { margin-top: 34px; display: grid; gap: 26px; counter-reset: p }
.passos li { counter-increment: p; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; border-top: 1px solid rgba(245, 243, 236, .16); padding-top: 20px }
.passos li::before { content: counter(p); grid-row: 1 / 3; font-size: 42px; line-height: .9; font-weight: 200; color: var(--terra-claro) }
.passos h3 { font-size: 19.5px; letter-spacing: -.015em }
.passos p { margin-top: 6px; font-size: 15.5px; color: var(--sobre-verde) }
.como-doc { width: 100%; max-width: 440px; justify-self: center }
.marcas { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(245, 243, 236, .08); margin-bottom: 22px }
.marcas button { flex: 1; min-height: 44px; font-size: 13.5px; font-weight: 500; color: var(--sobre-verde); background: transparent; border: 0; border-radius: 99px; padding: 0 8px; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s }
.marcas button[aria-pressed="true"] { background: var(--cal); color: var(--verde); font-weight: 600 }
.marcas button:focus-visible { outline-color: var(--terra-claro) }
.marcas-nota { margin-top: 16px; font-size: 13.5px; color: var(--sobre-verde) }

/* o documento (escala pela largura) */
.doc { container-type: inline-size; position: relative; aspect-ratio: 210 / 297; border-radius: 5px; overflow: hidden; background: var(--d-bg); color: var(--d-ink); font-family: var(--d-fb); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); transition: background .5s, color .5s }
.doc[data-marca="af"] { --d-bg: #fff; --d-ink: #23343A; --d-tit: #0C3E49; --d-acc: #A8823E; --d-mut: #5E6E72; --d-line: #E7E1D8; --d-fh: Montserrat, sans-serif; --d-wh: 700; --d-fb: Montserrat, sans-serif }
.doc[data-marca="alameda"] { --d-bg: #F3F0E8; --d-ink: #2F3A2B; --d-tit: #2F3A2B; --d-acc: #6F7D4A; --d-mut: #5f6656; --d-line: #DAD6C7; --d-fh: Georgia, "Times New Roman", serif; --d-wh: 400; --d-fb: Georgia, serif }
.doc[data-marca="norte"] { --d-bg: #2A2522; --d-ink: #F5EBDD; --d-tit: #F5EBDD; --d-acc: #E0805F; --d-mut: #bdb1a3; --d-line: rgba(245, 235, 221, .16); --d-fh: Montserrat, sans-serif; --d-wh: 700; --d-fb: Montserrat, sans-serif }
.d { position: absolute; inset: 0; padding: 9cqw 8.5cqw 7.5cqw; display: flex; flex-direction: column; font-size: 2.9cqw; line-height: 1.4; transition: opacity .2s }
.doc.troca .d { opacity: 0 }
.d-top { display: flex; justify-content: space-between; align-items: flex-start; min-height: 12cqw; position: relative; z-index: 1 }
.d-num { font-size: 2.2cqw; letter-spacing: .2em; color: var(--d-mut); text-transform: uppercase }
.lg { display: none; align-items: center; gap: 1.6cqw }
.lg-af img { height: 12.5cqw; width: auto }
.lg-al { font-family: Georgia, serif; font-size: 5.2cqw; color: #2F3A2B }
.lg-no { font-weight: 700; font-size: 3.8cqw; letter-spacing: .14em; color: #F5EBDD }
.lg svg { width: 5.4cqw; height: 5.4cqw }
.doc[data-marca="af"] .lg-af, .doc[data-marca="alameda"] .lg-al, .doc[data-marca="norte"] .lg-no { display: flex }
.dec { display: none; position: absolute; pointer-events: none }
.doc[data-marca="alameda"] .dec-al, .doc[data-marca="norte"] .dec-no { display: block }
.dec-al { left: 8.5cqw; right: 8.5cqw; top: 27cqw; height: 1px; background: #6F7D4A; opacity: .5 }
.dec-no { right: 0; top: 0; bottom: 0; width: 5cqw; background: #C8644A }
.d-olho { margin-top: 15cqw; font-size: 2.2cqw; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; color: var(--d-acc); position: relative }
.d-tit { font-family: var(--d-fh); font-weight: var(--d-wh); font-size: 7.6cqw; line-height: 1.04; letter-spacing: -.02em; margin-top: 2cqw; color: var(--d-tit); position: relative }
.d-sub { font-size: 2.8cqw; color: var(--d-mut); margin-top: 1.8cqw }
.d-sec { margin-top: 8cqw; font-size: 2.2cqw; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--d-acc); border-bottom: 1px solid var(--d-line); padding-bottom: 1.8cqw }
.d-et { counter-reset: e }
.d-et li { display: grid; grid-template-columns: 7cqw 1fr auto; align-items: baseline; padding: 2.1cqw 0; border-bottom: 1px solid var(--d-line); counter-increment: e }
.d-et li::before { content: "0" counter(e); font-family: var(--d-fh); color: var(--d-acc); font-weight: 500; font-size: 2.6cqw }
.d-et b { font-weight: 600; color: var(--d-tit) }
.d-et span { color: var(--d-mut); font-size: 2.6cqw }
.d-inv { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; border-top: 2px solid var(--d-acc); padding-top: 3cqw }
.d-inv span { font-size: 2.2cqw; letter-spacing: .24em; text-transform: uppercase; color: var(--d-mut) }
.d-inv b { font-family: var(--d-fh); font-weight: var(--d-wh); font-size: 6.6cqw; color: var(--d-tit); line-height: 1; display: block; text-align: right }
.d-inv small { display: block; text-align: right; font-size: 2.4cqw; color: var(--d-mut); margin-top: 1.2cqw }
.d-pe { margin-top: 4cqw; font-size: 2cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--d-mut) }

/* ---------- planos (como na Origamid: três lado a lado, o vitalício no meio) ---------- */
.planos-g { display: grid; gap: 16px; max-width: 460px; margin: 0 auto }
.plano { background: var(--papel); border-radius: 24px; padding: 30px 24px 26px; display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--linha); position: relative }
.plano h3 { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600 }
.preco { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; color: var(--verde); line-height: 1 }
.preco small { font-size: 20px; font-weight: 500; margin-top: 8px }
.preco b { font-size: clamp(54px, 2vw + 46px, 68px); font-weight: 700; letter-spacing: -.04em }
.preco-sub { margin-top: 10px; font-size: 15px; color: var(--cinza) }
.inclui { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--linha); display: grid; gap: 11px }
.inclui li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15.5px; line-height: 1.45 }
.inclui li::before { content: ""; width: 18px; height: 18px; margin-top: 1px; background: var(--visto) center / contain no-repeat }
.plano-nota { margin: 20px 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--cinza); flex: 1 }
.plano .bt { width: 100% }
.plano.destaque { background: var(--verde); color: var(--sobre-verde); box-shadow: 0 30px 60px -30px rgba(12, 40, 46, .6); padding-top: 50px; margin-top: 14px }
.plano.destaque h3, .plano.destaque .preco { color: var(--cal) }
.plano.destaque .preco-sub, .plano.destaque .plano-nota { color: var(--sobre-verde) }
.plano.destaque .inclui { border-color: rgba(245, 243, 236, .16) }
.plano.destaque .inclui li { color: var(--cal) }
.plano.destaque .inclui li::before { background-image: var(--visto-claro) }
.plano.destaque .bt:focus-visible { outline-color: var(--cal) }
.fita { position: absolute; top: 0; left: 24px; transform: translateY(-50%); background: var(--terra-claro); color: var(--verde); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 99px; padding: 7px 14px }
.planos-pe { margin-top: 28px; text-align: center; font-size: 14.5px; color: var(--cinza) }

/* ---------- ou monte do seu jeito ---------- */
.monte { background: var(--areia) }
.mods-g { display: grid; gap: 12px }
.mod-c { background: var(--cal); border-radius: 18px; padding: 20px 20px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start }
.mod-c h3 { font-size: 20px }
.mod-c > p:not(.mod-c-vl) { grid-column: 1 / -1; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--cinza); flex: 1 }
.mod-c-vl { grid-column: 2; grid-row: 1; display: flex; align-items: flex-start; gap: 4px; margin: 0; color: var(--verde); line-height: 1 }
.mod-c-vl small { font-size: 14px; font-weight: 500; margin-top: 4px }
.mod-c-vl b { font-size: 34px; letter-spacing: -.03em }
.mod-c .bt-p { grid-column: 1 / -1; width: 100%; padding: 0 12px; margin-top: 14px }
.avulsa { margin-top: 16px; background: var(--papel); border-radius: 24px; padding: 26px 20px; display: grid; gap: 22px; grid-template-areas: "tx" "ferr" "acao" }
.avulsa-tx { grid-area: tx }
.ferr { grid-area: ferr }
.avulsa-acao { grid-area: acao }
.avulsa h3 { font-size: 26px }
.avulsa .preco { margin-top: 10px }
.avulsa .preco b { font-size: 48px }
.avulsa-desc { margin: 0 0 18px; font-size: 15px; line-height: 1.55; min-height: 3.1em }
.avulsa-desc b { color: var(--verde) }
.avulsa .bt { width: 100% }
.ferr { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px }
.ferr legend { padding: 0; margin-bottom: 14px; font-size: 16px; font-weight: 700; color: var(--verde) }
.ferr-g { display: flex; flex-wrap: wrap; gap: 8px }
.ferr-g p { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza) }
.chip { position: relative; display: inline-flex }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; font-size: 14.5px; font-weight: 500; color: var(--carvao); box-shadow: inset 0 0 0 1.5px var(--linha); background: var(--cal); transition: background .2s, color .2s, box-shadow .2s; cursor: pointer }
.chip:hover span { box-shadow: inset 0 0 0 1.5px var(--verde) }
.chip input:checked + span { background: var(--verde); color: var(--cal); box-shadow: none; font-weight: 600 }
.chip input:focus-visible + span { outline: 3px solid var(--terra); outline-offset: 2px }

/* ---------- teste de 48 horas e garantia ---------- */
.calma-g { display: grid; gap: 16px; max-width: 980px; margin: 0 auto }
.calma-c { background: var(--papel); border-radius: 24px; padding: 30px 24px; box-shadow: 0 0 0 1px var(--linha) }
.grande { font-size: 26px; font-weight: 300; color: var(--terra); line-height: 1; letter-spacing: -.02em }
.grande b { font-size: 76px; font-weight: 200; letter-spacing: -.05em; margin-right: 4px }
.calma-c h3 { font-size: 22px; margin: 18px 0 10px }
.calma-c > p:not(.grande) { font-size: 15.5px }
.calma-nota { margin-top: 14px; color: var(--cinza); font-size: 14.5px !important }

/* ---------- quem fez ---------- */
.quem { background: var(--areia) }
.quem .wrap { display: grid; gap: 48px; align-items: center }
.arco-foto { position: relative; width: calc(100% - 16px); max-width: 320px; justify-self: center; margin: 16px 16px 0 0 }
.arco-foto::before { content: ""; position: absolute; inset: -14px -14px 14px 14px; border: 1.5px solid var(--terra); border-radius: 40px 40px 6px 40px; opacity: .5; pointer-events: none }
.arco-foto img { position: relative; width: 100%; border-radius: 36px 36px 4px 36px; aspect-ratio: 3 / 4.1; object-fit: cover; object-position: 50% 18% }
.quem .lead { margin-top: 18px }
.pessoas { margin-top: 30px; display: grid; gap: 22px }
.pessoas div { border-top: 1px solid var(--linha-esc, #C3CDC5); padding-top: 18px }
.pessoas h3 { font-size: 19px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px }
.pessoas small { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza) }
.pessoas p { margin-top: 6px; font-size: 15.5px }

/* ---------- perguntas frequentes (pergunta curta, resposta direta) ---------- */
.faq { max-width: 1040px; margin: 0 auto }
.faq-i { break-inside: avoid; padding: 20px 0 22px; border-top: 1px solid var(--linha) }
.faq-i h3 { font-size: 17.5px; letter-spacing: -.015em; line-height: 1.3 }
.faq-i p { margin-top: 8px; font-size: 15.5px; line-height: 1.6 }

/* ---------- final ---------- */
.final { background: var(--verde); color: var(--sobre-verde); overflow: hidden; text-align: center; padding-top: clamp(124px, 15vw, 228px) }
.final::before { content: ""; position: absolute; left: 50%; bottom: 0; top: 32px; width: min(calc(100% - 2 * var(--g)), 1000px); transform: translateX(-50%); border: 1.5px solid var(--terra-claro); border-bottom: 0; border-radius: 80px 80px 0 0; opacity: .35; pointer-events: none }
.final::after { content: ""; position: absolute; left: 50%; bottom: 0; top: 68px; width: min(calc(100% - 2 * var(--g) - 72px), 928px); transform: translateX(-50%); border: 1.5px solid var(--cal); border-bottom: 0; border-radius: 64px 64px 0 0; opacity: .1; pointer-events: none }
.final .wrap { position: relative; z-index: 1; display: grid; justify-items: center }
.final .olho { color: var(--cal) }
.final h2 { color: var(--cal); max-width: 900px; font-size: clamp(30px, 1.6vw + 22px, 44px) }
.final h2 span { color: var(--terra-claro) }
.final .lead { margin-top: 22px; color: var(--sobre-verde) }
.final .acoes { justify-content: center; width: 100% }
.final .lnk { color: var(--cal); text-decoration-color: var(--terra-claro) }
.final :focus-visible, .rodape :focus-visible, .como :focus-visible { outline-color: var(--cal) }

/* ---------- rodapé ---------- */
.rodape { background: var(--verde); color: var(--sobre-verde); padding: 0 0 calc(40px + env(safe-area-inset-bottom)); font-size: 14px }
.rodape .wrap { position: relative; padding-top: 34px; display: grid; gap: 22px }
.rodape .wrap::before { content: ""; position: absolute; top: 0; left: var(--g); right: var(--g); height: 1px; background: rgba(245, 243, 236, .14) }
.rodape-marca img { height: 26px; width: auto }
.rodape-marca p { margin-top: 10px; color: var(--terra-claro); font-weight: 500 }
.rodape-links { display: flex; flex-wrap: wrap; gap: 0 22px }
.rodape-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cal); text-decoration: none; font-weight: 500 }
.rodape-links a:hover { text-decoration: underline; text-decoration-color: var(--terra-claro); text-underline-offset: 5px }
.rodape-pe { color: var(--sobre-verde) }

/* ---------- a compra (no celular, sobe de baixo) ---------- */
.compra { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: none; max-height: 100dvh; overflow: auto; border-radius: 22px 22px 0 0; background: var(--cal); color: var(--carvao); box-shadow: 0 -20px 60px rgba(0, 0, 0, .25) }
.compra::backdrop { background: rgba(12, 40, 46, .6) }
.compra:target:not([open]) { display: block; position: fixed; inset: auto 0 0 0; z-index: 50 }
.compra form { padding: 26px var(--g) calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 14px; position: relative }
.compra .olho { margin-bottom: 0 }
.compra h2 { font-size: 25px; letter-spacing: -.02em; padding-right: 48px }
.fechar { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--areia); color: var(--verde); font-size: 24px; line-height: 1; display: grid; place-items: center; text-decoration: none }
.compra-vl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: -4px }
.compra-vl b { font-size: 28px; color: var(--verde); letter-spacing: -.02em }
.compra-vl span#compra-prazo { font-size: 14.5px; color: var(--cinza) }
.compra label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--verde) }
.compra input, .compra select { width: 100%; min-height: 52px; border: 1.5px solid var(--linha); border-radius: 12px; padding: 0 14px; font-size: 16.5px; color: var(--carvao); background: var(--papel) }
.compra select { appearance: none; -webkit-appearance: none; padding-right: 42px; background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252B2D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; text-overflow: ellipsis }
.compra input:focus, .compra select:focus { outline: 3px solid var(--verde); outline-offset: 1px; border-color: transparent }
.compra .nota-e { font-size: 13.5px; color: var(--cinza); margin-top: -2px }
.compra .bt { width: 100%; margin-top: 4px }
.compra .seg { text-align: center; font-size: 13.5px; color: var(--cinza) }
.compra .miudinho { font-size: 12px; margin-top: -6px }

/* ---------- a barra fixa (celular) ---------- */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--papel); box-shadow: 0 -10px 30px rgba(12, 40, 46, .16); padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 14px; transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .7, .2, 1) }
.barra:not(.on) { visibility: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s .35s }
.barra.on { transform: none }
.barra div { line-height: 1.25 }
.barra small { display: block; font-size: 12.5px; color: var(--cinza) }
.barra b { color: var(--verde); font-size: 17px }
.barra .bt { min-height: 50px; padding: 0 22px; font-size: 18.7px }

/* ---------- as páginas pequenas: entrar, obrigada, reembolso ---------- */
.pag { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column }
.pag-topo { padding: 16px var(--g); display: flex; align-items: center; justify-content: space-between; gap: 12px }
.pag-topo .logo { display: flex; align-items: center; min-height: 44px }
.pag-topo .logo img { height: 22px; width: auto }
.pag-main { flex: 1; position: relative; padding: 120px var(--g) 56px; overflow: hidden }
.pag-main::before { content: ""; position: absolute; left: 50%; bottom: 0; top: 64px; width: min(calc(100% - 2 * var(--g)), 700px); transform: translateX(-50%); background: var(--areia); border-radius: 64px 64px 0 0; opacity: .75; pointer-events: none }
.pag-main::after { content: ""; position: absolute; left: 50%; bottom: 0; top: 24px; width: min(calc(100% - 2 * var(--g) + 32px), 780px); transform: translateX(-50%); border: 1.5px solid var(--terra); border-bottom: 0; border-radius: 80px 80px 0 0; opacity: .25; pointer-events: none }
.cartao section { padding: 0 }
#com-link:not([hidden]) + #pedir { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--linha) }
.cartao { position: relative; z-index: 1; background: var(--papel); border-radius: 20px; padding: 30px 22px 32px; box-shadow: var(--sombra) }
.cartao h1 { font-size: clamp(30px, 2vw + 24px, 42px); margin-bottom: 18px }
.cartao h1 span { font-weight: 300 }
.texto { font-size: 16.5px }
.cartao form { display: grid; gap: 14px; margin-top: 22px }
.cartao label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--verde) }
.cartao label small { font-weight: 400; color: var(--cinza) }
.cartao input, .cartao select, .cartao textarea { width: 100%; min-height: 52px; border: 1.5px solid var(--linha); border-radius: 12px; padding: 12px 14px; font-size: 16.5px; color: var(--carvao); background: #fff }
.cartao select { appearance: none; -webkit-appearance: none; padding-right: 42px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252B2D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat }
.cartao textarea { min-height: 110px; resize: vertical }
.cartao input:focus, .cartao select:focus, .cartao textarea:focus { outline: 3px solid var(--verde); outline-offset: 1px; border-color: transparent }
.cartao .bt { width: 100% }
.erro { color: #A33A2A; font-size: 15px; font-weight: 500 }
.erro:empty { display: none }
.nota { font-size: 14.5px; color: var(--cinza); margin-top: 18px }
.nota a, .miudo-p a { color: var(--verde); font-weight: 600; text-decoration-color: var(--terra); text-underline-offset: 4px }
.miudo-p { margin-top: 18px; font-size: 14.5px; color: var(--cinza) }
.volta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px }
.regras { margin: 20px 0 4px; padding: 16px 18px; background: var(--cal); border-radius: 14px; display: grid; gap: 10px; font-size: 15px }
.regras p { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px }
.regras p::before { content: ""; width: 18px; height: 18px; margin-top: 2px; background: var(--visto) center / contain no-repeat }
.dupla { display: grid; gap: 14px }
.escondido { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.botoes { display: grid; gap: 10px; margin-top: 24px }
.botoes .bt-p { min-height: 54px; font-size: 16px }
.comeco { margin-top: 26px; border-top: 1px solid var(--linha); padding-top: 18px }
.comeco h2 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 12px }
.comeco ol { counter-reset: i; display: grid; gap: 10px }
.comeco li { counter-increment: i; display: grid; grid-template-columns: 30px minmax(0, 1fr); font-size: 15.5px }
.comeco li::before { content: counter(i); font-size: 24px; line-height: 1.05; font-weight: 200; color: var(--terra) }
.girando { display: inline-block; width: 18px; height: 18px; border: 2.5px solid var(--areia); border-top-color: var(--terra); border-radius: 50%; animation: gira .9s linear infinite; vertical-align: -3px; margin-right: 8px }
@keyframes gira { to { transform: rotate(360deg) } }
.pag-rodape { background: var(--verde); color: var(--sobre-verde); padding: 22px var(--g) calc(22px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px }
.pag-rodape img { height: 22px; width: auto }
.pag-rodape p { color: var(--terra-claro); font-weight: 500 }
@media (prefers-reduced-motion: no-preference) {
  .cartao { animation: sobe .7s cubic-bezier(.2, .7, .2, 1) both }
  @keyframes sobe { from { opacity: 0; transform: translateY(14px) } }
}

/* ======================================================================= telas maiores */
@media (min-width: 560px) {
  .acoes .bt { width: auto }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .mods-g { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .calma-g { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dupla { grid-template-columns: 1fr 1fr }
  .botoes { grid-template-columns: 1fr 1fr }
  .faq { columns: 2; column-gap: 48px }
}
@media (min-width: 720px) {
  .pag-topo { padding: 24px 40px }
  .pag-topo .logo img, .pag-rodape img { height: 26px }
  .pag-main { display: flex; align-items: center; justify-content: center; padding: 200px 40px 80px }
  .cartao { width: 100%; max-width: 560px; padding: 46px 48px 44px; border-radius: 24px }
  .pag-rodape { padding: 24px 40px }
  .modulo { padding: 34px 32px 28px }
  .avulsa { padding: 34px 32px }
  .calma-c { padding: 38px 36px }
  .compra { margin: auto; max-width: 480px; border-radius: 24px; max-height: calc(100dvh - 32px) }
  .compra:target:not([open]) { inset: 50% auto auto 50%; transform: translate(-50%, -50%) }
  .compra form { padding: 34px 34px 30px }
}
@media (min-width: 960px) {
  .topo .wrap { height: 76px; gap: 28px }
  .topo .logo img { height: 27px }
  .topo nav { display: block }
  .so-grande { display: inline-flex }
  .topo .entrar { margin-left: 4px }
  .hero { padding: 64px 0 104px }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: center; gap: 56px }
  .palco { justify-self: end }
  .cab:not(.cab-centro) { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: end; gap: 56px }
  .cab:not(.cab-centro) .lead { justify-self: end }
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
  .nv-tx { padding: 24px 26px 30px }
  .modulo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; padding: 44px 48px 40px; margin-top: 20px }
  .vitrine { height: 230px; margin-top: 28px }
  .fl { top: 30px }
  .ferramentas li { padding: 20px 0 }
  .ferramentas h4 { font-size: 19.5px }
  .como .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 80px; align-items: center }
  .planos-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr); max-width: none; align-items: stretch; gap: 20px; padding: 26px 0 }
  .plano { padding: 36px 30px 30px }
  .plano.destaque { padding: 60px 34px 40px; margin: -26px 0 }
  .plano.destaque .preco b { font-size: 76px }
  .mods-g { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  .mod-c { display: flex; flex-direction: column; padding: 22px 20px 20px }
  .mod-c-vl { margin: 16px 0 14px }
  .mod-c .bt-p { margin-top: 0 }
  .avulsa { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "tx ferr" "acao ferr"; grid-template-rows: auto 1fr; gap: 20px 56px; padding: 44px 48px; align-items: start }
  .quem .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 96px }
  .arco-foto { max-width: 400px }
  .rodape .wrap { grid-template-columns: auto 1fr auto; align-items: center; gap: 40px }
  .rodape-links { justify-content: center }
  .barra { display: none }
}
@media (min-width: 1200px) {
  .faq { column-gap: 72px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
  .js [data-r] { opacity: 1; transform: none }
}