/*
 * Página /vender nova (14/10/2026): posicionamento "plataforma completa de quem vive
 * de artesanato". Prévia com ?vender=nova até o dono aprovar; a chave vender_nova = 1
 * liga para todos. Prefixo vn-. O Tailwind do site é purgado: classe nova não existe
 * lá, por isso tudo o que é novo mora aqui. Ao mudar, suba o ?v= na view (a Cloudflare
 * guarda por muito tempo). Celular primeiro: 1 coluna, margem de 16 px, nada estoura.
 *
 * Pesponto dourado (a costura tracejada, assinatura da página) só em 4 lugares:
 * etiqueta do topo, fio dos 3 passos, varal da divulgação e cartão de preço (com o eco
 * dele na borda de cima da barra fixa do celular). Marca-texto só no h1 e no h2 das
 * ferramentas. Letra manuscrita (--vn-mao) só nas notas "exemplo", no fecho da
 * divulgação e na assinatura da carta.
 * Nada fica parado em opacity 0: animação só de transform, desligada em
 * prefers-reduced-motion. NÃO trocar o overflow-x: clip do .vn por overflow: hidden:
 * hidden cria um contêiner de rolagem e a barra fixa (sticky) do celular deixa de funcionar.
 */
.vn {
    --vn-noite: #102e00; --vn-verde: #1f5e00; --vn-verde2: #287a00; --vn-menta: #eef5e6;
    --vn-ouro: #E8AF18; --vn-papel: #FFF8ED;
    --vn-tinta: #1c1917; --vn-suave: #66615a; --vn-rotulo: #6b655d; --vn-linha: rgba(28, 25, 23, .09);
    --vn-r1: 10px; --vn-r2: 16px; --vn-r3: 24px;
    --vn-mao: Caveat, 'Bradley Hand', Noteworthy, 'Segoe Print', cursive;
    --vn-sombra: 0 1px 2px rgba(16, 46, 0, .06), 0 12px 32px -12px rgba(16, 46, 0, .22);
    color: var(--vn-tinta);
    background: #fff;
    overflow-x: clip;
}
.vn *, .vn *::before, .vn *::after { box-sizing: border-box; }
:where(.vn) a { color: inherit; text-decoration: none; }
/* Foco: anel escuro com halo dourado. Sem border-radius aqui (o botão em pílula perdia o
   999px ao receber foco). Nos fundos verde-noite o anel fica branco, senão some no fundo. */
:where(.vn) a:focus-visible, :where(.vn) button:focus-visible, :where(.vn) summary:focus-visible {
    outline: 3px solid var(--vn-noite); outline-offset: 2px; box-shadow: 0 0 0 5px var(--vn-ouro);
}
:where(.vn) :is(.vn-sec--noite, .vn-preco, .vn-barra, .vn-fim) :is(a, button, summary):focus-visible { outline-color: #fff; }
.vn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vn-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.vn-sec { padding: 48px 0; }
.vn-sec--papel { background: var(--vn-papel); }
.vn-sec--noite { background: var(--vn-noite); color: #f4f1ea; }
/* Âncoras: o cabeçalho fixo tem 116 px no computador e 172 px no celular (logo, busca e
   categorias); a folga do celular fica no fim do arquivo. */
.vn #como-funciona, .vn #ferramentas, .vn #calculadora, .vn #divulgacao, .vn #fundador { scroll-margin-top: 80px; }

/* O layout põe .reveal (opacity 0) em toda "main section" por JavaScript: aqui nada fica
   escondido esperando animação, e o topo não pisca. */
.vn .reveal { opacity: 1; transform: none; transition: none; }

/* A barra "Baixe o app" do layout sai desta página: empurrava o h1 e disputava com o
   teste grátis. O definitivo é pôr 'vender' no $barraAppFora (partials/barra-app) e
   apagar esta regra; este arquivo só carrega na /vender nova, então não vaza. */
#ba-appbar { display: none !important; }

/* Tipografia. Corpo em 12, 14, 15, 17 e 20 px; títulos com clamp. */
.vn-kicker { display: inline-flex; align-items: center; gap: 8px; font-family: Poppins, Inter, system-ui, sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--vn-verde2); }
.vn-kicker::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--vn-ouro); border: 0; }
.vn-sec--noite .vn-kicker { color: var(--vn-ouro); }
.vn-h1, .vn-h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
.vn-h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.08; }
.vn-h2 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.45rem); line-height: 1.12; margin-top: 10px; }
.vn-h2--menor { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); line-height: 1.18; }
/* Marca-texto: só no h1 e no h2 das ferramentas (os outros títulos não têm em). */
.vn-h1 em, .vn-h2 em { font-style: normal; color: var(--vn-verde2); background: linear-gradient(transparent 62%, rgba(232, 175, 24, .38) 62%); padding: 0 .06em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vn-sec--noite .vn-h2 em { color: var(--vn-ouro); background: none; padding: 0; }
.vn-lead { font-size: 17px; line-height: 1.6; color: var(--vn-suave); max-width: 62ch; margin: 14px 0 0; }
.vn-sec--noite .vn-lead { color: rgba(244, 241, 234, .78); }
.vn-centro { text-align: center; }
.vn-centro .vn-lead { margin-left: auto; margin-right: auto; }
/* Cabeçalho dividido (ferramentas e divulgação): título à esquerda, abertura à direita. */
.vn-cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vn-cab .vn-h2 { margin-top: 0; }
.vn-cab .vn-kicker + .vn-h2 { margin-top: 10px; }
.vn-cab .vn-lead { margin-top: 0; }
/* Nota manuscrita: no máximo 4 na página (3 "exemplo" e o fecho da divulgação). */
.vn-mao { font-family: var(--vn-mao); font-size: 22px; font-weight: 600; line-height: 1; color: var(--vn-verde); display: inline-block; transform: rotate(-4deg); }

/* Botões */
.vn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px;
    font-weight: 700; font-size: 17px; line-height: 1.2; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; cursor: pointer; border: 0; text-align: center; }
.vn-btn--cheio { background: var(--vn-verde2); color: #fff; box-shadow: 0 10px 24px -10px rgba(40, 122, 0, .7); }
.vn-btn--cheio:hover { background: var(--vn-verde); transform: translateY(-1px); }
.vn-btn--linha { background: #fff; color: var(--vn-verde); border: 1.5px solid rgba(31, 94, 0, .28); }
.vn-btn--linha:hover { border-color: var(--vn-verde2); background: var(--vn-menta); }
.vn-btn--ouro { background: var(--vn-ouro); color: var(--vn-noite); }
.vn-btn--ouro:hover { background: #f3c03a; }
.vn-btn--claro { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
.vn-btn--claro:hover { background: rgba(255, 255, 255, .08); }
.vn-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vn-nota { font-size: 14px; color: var(--vn-suave); margin: 12px 0 0; }


/* ========== 1. Topo ========== */
.vn-topo { background: radial-gradient(1200px 520px at 85% -10%, #f6ecd6 0%, transparent 60%), var(--vn-papel); padding: 24px 0 40px; border-bottom: 1px solid var(--vn-linha); }
.vn-topo__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.vn-topo .vn-h1 { margin-top: 0; }
.vn-topo .vn-lead { margin-top: 16px; }
.vn-topo .vn-acoes { margin-top: 24px; }
.vn-topo__preco { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--vn-tinta); }
.vn-topo__preco b { color: var(--vn-verde); }
/* Comissão zero no topo (17/10/2026): selo redondo + frase, com atalho para a calculadora. */
.vn-zero { display: flex; align-items: center; gap: 14px; max-width: 540px; margin: 18px 0 0; padding: 12px 16px 6px 12px; border-radius: var(--vn-r2);
    background: #fff; border: 1px solid rgba(31, 94, 0, .18); box-shadow: var(--vn-sombra); }
.vn-zero__selo { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--vn-noite); color: var(--vn-ouro);
    font-family: Fraunces, Georgia, serif; font-size: 21px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 4px rgba(232, 175, 24, .3); }
.vn-zero p { margin: 0; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--vn-suave); }
.vn-zero b { display: block; font-size: 17px; line-height: 1.3; color: var(--vn-tinta); }
.vn-zero a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--vn-verde); text-decoration: underline; text-underline-offset: 3px; }
.vn-zero a i { font-size: 12px; }

/* Celular com a conversa do direct (decorativo; a descrição vai em texto para leitores de tela).
   A tela do celular tem a sua própria escala miúda, como num aparelho de verdade. */
.vn-fone-cena { position: relative; display: flex; justify-content: center; padding: 20px 0 26px; }
.vn-fone-cena > .vn-mao { position: absolute; top: -4px; left: max(4px, calc(50% - 178px)); z-index: 1; transform: rotate(-6deg); }
.vn-fone { position: relative; width: min(330px, 100%); border-radius: 38px; background: #0f0f0f; padding: 11px; box-shadow: 0 30px 60px -24px rgba(16, 46, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.vn-fone__tela { border-radius: 29px; background: #fbfaf8; overflow: hidden; display: flex; flex-direction: column; min-height: 480px; }
.vn-fone__barra { display: flex; justify-content: space-between; padding: 10px 22px 4px; font-size: 11px; font-weight: 600; color: #222; }
.vn-fone__topo { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.vn-fone__av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff;
    background: linear-gradient(135deg, #c2410c, #e8af18); }
.vn-fone__nome { font-size: 14px; font-weight: 700; line-height: 1.2; }
.vn-fone__sub { font-size: 11px; color: var(--vn-rotulo); }
.vn-fone__msgs { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 16px; }
.vn-msg { max-width: 82%; margin: 0; padding: 9px 12px; border-radius: 18px; font-size: 13px; line-height: 1.38; }
.vn-msg--ela { align-self: flex-start; background: #efedea; color: #1c1917; border-bottom-left-radius: 6px; }
.vn-msg--eu { align-self: flex-end; background: var(--vn-verde2); color: #fff; border-bottom-right-radius: 6px; }
.vn-cartao-link { align-self: flex-end; width: 82%; border-radius: var(--vn-r2); overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .3); }
/* A mesma "mesa" da peça da faixa de segurança: caneca azul sobre a madeira clara. */
.vn-cartao-link__img { height: 84px; display: grid; place-items: center; font-size: 36px; color: #2b6f97;
    background: radial-gradient(ellipse 30% 8% at 50% 82%, rgba(40, 25, 10, .26), transparent 70%), linear-gradient(#f1e6d4 0 66%, #dcc6a3 66%); }
.vn-cartao-link__img i { transform: translateY(6px); }
.vn-cartao-link__corpo { padding: 9px 11px 11px; }
.vn-cartao-link__url { font-size: 11px; color: var(--vn-rotulo); }
.vn-cartao-link__nome { font-size: 13px; font-weight: 700; margin-top: 2px; }
.vn-cartao-link__preco { font-size: 13px; font-weight: 700; color: var(--vn-verde); }
.vn-digitando { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 18px; background: #efedea; }
.vn-digitando span { width: 6px; height: 6px; border-radius: 50%; background: #a8a29e; animation: vn-pulo 1.2s infinite ease-in-out; }
.vn-digitando span:nth-child(2) { animation-delay: .15s; }
.vn-digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes vn-pulo { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
.vn-aviso { position: absolute; left: 50%; bottom: 0; width: min(300px, 92%); transform: translateX(-50%); display: flex; align-items: center; gap: 11px; padding: 11px 14px;
    border-radius: var(--vn-r2); background: #fff; box-shadow: 0 18px 40px -14px rgba(16, 46, 0, .45); border: 1px solid rgba(31, 94, 0, .14);
    animation: vn-chega .7s cubic-bezier(.2, .8, .2, 1) .5s both; }
.vn-aviso__ic { flex: none; width: 36px; height: 36px; border-radius: var(--vn-r1); display: grid; place-items: center; background: var(--vn-verde2); color: #fff; font-size: 15px; }
.vn-aviso__t { font-size: 14px; font-weight: 700; line-height: 1.2; }
.vn-aviso__s { font-size: 12px; color: var(--vn-suave); margin-top: 2px; }
@keyframes vn-chega { from { transform: translate(-50%, 14px); } to { transform: translate(-50%, 0); } }

/* ========== 2. Caderno x loja, linha a linha ========== */
.vn-ad { margin-top: 28px; }
.vn-ad__ex { margin: 0 0 10px; padding-left: 10px; }
.vn-ad__cab { display: none; }
.vn-ad__pares { display: grid; gap: 12px; }
.vn-par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
/* Cada anotação é uma linha do caderno: pauta azul embaixo e a margem vermelha à esquerda. */
.vn-par__antes { margin: 0; padding: 8px 14px 6px 40px; font-family: var(--vn-mao); font-size: 21px; font-weight: 500; line-height: 30px; color: #2d3a6b;
    background: linear-gradient(90deg, transparent 26px, rgba(220, 38, 38, .35) 26px 27.5px, transparent 27.5px), #fffdf7;
    border: 1px solid rgba(28, 25, 23, .08); border-bottom: 1px solid rgba(37, 99, 235, .18); border-radius: var(--vn-r1) var(--vn-r1) 0 0; }
.vn-par__seta { display: flex; justify-content: center; color: var(--vn-verde2); font-size: 12px; line-height: 1; padding: 2px 0; }
.vn-par__seta i { transform: rotate(90deg); }
.vn-par__depois { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 10px 14px; background: #fff;
    border: 1px solid rgba(31, 94, 0, .16); border-radius: var(--vn-r1); }
.vn-par__ic { grid-row: span 2; width: 36px; height: 36px; border-radius: var(--vn-r1); display: grid; place-items: center; background: var(--vn-menta); color: var(--vn-verde2); font-size: 15px; }
.vn-par__depois b { font-size: 15px; line-height: 1.35; }
.vn-par__depois > span:last-child { font-size: 14px; line-height: 1.45; color: var(--vn-suave); }
.vn-pilula { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--vn-verde2); color: #fff; font-size: 12px; font-style: normal;
    font-weight: 700; line-height: 1.4; vertical-align: 2px; }

/* ========== 3. Segurança para quem compra (faixa escura) ========== */
.vn-seg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.vn-seg__lista { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.vn-seg__lista li { display: flex; gap: 14px; align-items: flex-start; }
.vn-seg__ic { flex: none; width: 42px; height: 42px; border-radius: var(--vn-r1); display: grid; place-items: center; background: rgba(232, 175, 24, .14); color: var(--vn-ouro); font-size: 17px; }
.vn-seg__ic i { display: block; line-height: 1; }
.vn-seg__lista b { display: block; font-size: 17px; line-height: 1.35; color: #fff; }
.vn-seg__lista div > span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: rgba(244, 241, 234, .74); }
.vn-peca { position: relative; width: min(380px, 100%); margin: 0 auto; border-radius: var(--vn-r3); background: #fff; color: var(--vn-tinta); overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); }
.vn-peca > .vn-mao { position: absolute; top: 10px; left: 14px; z-index: 1; color: var(--vn-verde); }
/* "Foto" da peça só com CSS: caneca sobre uma mesa clara, com sombra no tampo. */
.vn-peca__img { height: 130px; display: grid; place-items: center; font-size: 64px; color: #2b6f97;
    background: radial-gradient(ellipse 34% 7% at 50% 80%, rgba(40, 25, 10, .28), transparent 70%), linear-gradient(#f1e6d4 0 66%, #dcc6a3 66%); }
.vn-peca__img i { transform: translateY(8px); }
.vn-peca__corpo { padding: 16px 18px 18px; }
.vn-peca__loja { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--vn-suave); }
.vn-peca__verif { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--vn-verde2); }
.vn-peca__nome { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; margin: 8px 0 0; }
.vn-peca__estrelas { margin: 4px 0 0; font-size: 12px; color: var(--vn-suave); }
.vn-peca__estrelas i { color: var(--vn-ouro); font-size: 12px; }
.vn-peca__preco { margin: 12px 0 0; font-family: Fraunces, Georgia, serif; font-size: 1.9rem; font-weight: 600; color: var(--vn-verde); line-height: 1; }
.vn-peca__cond { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #57534e; }
.vn-peca__cond b { color: #15803d; }
.vn-peca__btn { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 999px; background: var(--vn-verde2);
    color: #fff; font-weight: 700; font-size: 15px; }
.vn-peca__rodape { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--vn-suave); }
.vn-peca__rodape i { color: var(--vn-verde2); margin-right: 4px; }

/* ========== 4. Como funciona: 3 passos no fio costurado (pesponto 2 de 4) ========== */
.vn-passos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.vn-passo { position: relative; padding: 0 0 0 68px; }
/* O fio vai do centro de um número ao centro do seguinte; o anel cor de papel do número o interrompe. */
.vn-passo:not(:last-child)::before { content: ''; position: absolute; left: 23px; top: 24px; bottom: -48px; border-left: 2px dashed var(--vn-ouro); }
.vn-passo__n { position: absolute; left: 0; top: 0; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: var(--vn-noite); color: var(--vn-ouro); font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 22px; line-height: 1;
    box-shadow: 0 0 0 6px var(--vn-papel); }
.vn-passo h3 { font-family: Fraunces, Georgia, serif; font-size: 1.3rem; font-weight: 600; line-height: 1.25; margin: 8px 0 0; }
.vn-passo p { margin: 8px 0 0; color: var(--vn-suave); line-height: 1.6; font-size: 15px; }
/* Notas do rodapé dos passos: identidade (quando vale para todas) e Elo7. Lado a lado
   no computador, empilhadas no celular; os três passos ficam com a mesma altura. */
.vn-notas { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.vn-nota-passo { margin: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 16px 18px; border-radius: var(--vn-r2);
    background: #fff; border: 1px solid var(--vn-linha); font-size: 15px; line-height: 1.5; color: var(--vn-tinta); }
.vn-nota-passo i { color: var(--vn-verde2); margin-top: 4px; }
.vn-elo7 { margin: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 16px 18px; border-radius: var(--vn-r2);
    background: var(--vn-menta); border: 1px solid rgba(31, 94, 0, .2); font-size: 15px; line-height: 1.5; scroll-margin-top: 128px; }
.vn-elo7 i { color: var(--vn-verde2); margin-top: 4px; }
.vn-elo7 a { grid-column: 2; display: inline-flex; align-items: center; justify-self: start; min-height: 44px; font-weight: 700; color: var(--vn-verde); text-decoration: underline; text-underline-offset: 3px; }
.vn-meio { display: none; }

/* ========== 5. Ferramentas ========== */
.vn-grupos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
.vn-grupo { border-radius: var(--vn-r2); background: #fff; padding: 16px 16px 14px; border: 1px solid var(--vn-linha); }
.vn-grupo__cab { display: flex; align-items: center; gap: 12px; }
.vn-grupo__ic { flex: none; width: 40px; height: 40px; border-radius: var(--vn-r1); display: grid; place-items: center; background: var(--vn-noite); color: var(--vn-ouro); font-size: 15px; }
.vn-grupo h3 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; }
.vn-grupo__n { margin-left: auto; min-width: 32px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--vn-menta); color: var(--vn-verde);
    font: 700 14px/28px Poppins, Inter, sans-serif; text-align: center; }
.vn-grupo ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.vn-grupo li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 15px; line-height: 1.4; }
.vn-grupo li i { flex: none; width: 16px; text-align: center; color: var(--vn-verde2); font-size: 12px; }
/* "Ver mais" sem JavaScript: checkbox escondido (sem opacity 0) + label. Só no celular.
   O label nunca some (é o foco visível de quem usa teclado): aberto, vira "Ver menos". */
.vn-mais__ck { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vn-grupo .vn-extra { display: none; }
.vn-mais__ck:checked ~ ul .vn-extra { display: flex; }
.vn-mais__fechar { display: none; }
.vn-mais__ck:checked ~ .vn-mais .vn-mais__abrir { display: none; }
.vn-mais__ck:checked ~ .vn-mais .vn-mais__fechar { display: inline; }
.vn-mais { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; border-radius: var(--vn-r1); font-weight: 700; font-size: 14px;
    color: var(--vn-verde); background: var(--vn-menta); cursor: pointer; text-align: center; padding: 0 12px; }
.vn-mais__ck:focus-visible ~ .vn-mais { outline: 3px solid var(--vn-noite); outline-offset: 2px; }
.vn-app { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; font-size: 15px; line-height: 1.5; color: var(--vn-suave); text-align: center; }
.vn-app i { color: var(--vn-tinta); font-size: 18px; }

/* Cartão de preço com "Sem taxa escondida" (pesponto 3 de 4) */
.vn-preco { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 20px; border-radius: var(--vn-r3); background: var(--vn-noite); color: #fff;
    outline: 1.5px dashed rgba(232, 175, 24, .8); outline-offset: -8px; }
.vn-preco__rot, .vn-preco__tit { margin: 0; font-family: Poppins, Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vn-ouro); }
.vn-preco__valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 0; }
.vn-preco__valor b { font-family: Fraunces, Georgia, serif; font-size: 2.6rem; font-weight: 600; line-height: 1; color: #fff; }
.vn-preco__valor span { font-size: 15px; color: rgba(255, 255, 255, .8); }
.vn-preco__sub { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .8); margin: 10px 0 0; }
.vn-preco .vn-btn { margin-top: 20px; width: 100%; }
.vn-taxas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.vn-taxas li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.vn-taxas i { color: var(--vn-ouro); margin-top: 3px; text-align: center; }
.vn-taxas b { display: block; color: #fff; font-size: 15px; line-height: 1.4; }
.vn-taxas span { display: block; margin-top: 2px; color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.5; }

/* ========== 5b. Comissão zero: a calculadora (17/10/2026) ==========
   Celular: tudo numa coluna. A partir de 640 px, campos e resultados lado a lado. Os
   números longos quebram (overflow-wrap) em vez de estourar a largura. Campo com 20 px
   de fonte: abaixo de 16 px o iPhone dá zoom ao tocar. */
.vn-sec--menta { background: var(--vn-menta); }
.vn-calc { max-width: 920px; margin: 28px auto 0; padding: 20px 16px; border-radius: var(--vn-r3); background: #fff; border: 1px solid rgba(31, 94, 0, .14); box-shadow: var(--vn-sombra); }
.vn-calc__campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.vn-calc__campo { min-width: 0; }
.vn-calc__campo label { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--vn-tinta); }
.vn-calc__campo label span { font-weight: 400; color: var(--vn-suave); }
.vn-calc__valor { margin-top: 8px; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 16px; border-radius: var(--vn-r1); background: #fff;
    border: 1.5px solid rgba(28, 25, 23, .22); }
/* Foco no campo: o mesmo anel escuro com halo dourado dos botões, na caixa inteira. */
.vn-calc__valor:focus-within { border-color: var(--vn-verde2); outline: 3px solid var(--vn-noite); outline-offset: 2px; box-shadow: 0 0 0 5px var(--vn-ouro); }
.vn-calc__valor > span { flex: none; font-size: 18px; font-weight: 700; color: var(--vn-suave); }
.vn-calc__valor input { flex: 1; min-width: 0; width: 100%; padding: 12px 0; border: 0; outline: 0; background: transparent; box-shadow: none;
    font-family: Fraunces, Georgia, serif; font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--vn-tinta); }
.vn-calc__valor input::placeholder { color: #a8a29e; }
.vn-calc__dica { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--vn-rotulo); }
.vn-calc__res { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vn-calc__lado { min-width: 0; padding: 16px; border-radius: var(--vn-r2); background: #faf8f5; border: 1px solid var(--vn-linha); }
.vn-calc__lado--ba { background: var(--vn-menta); border-color: rgba(31, 94, 0, .28); }
.vn-calc__rot { margin: 0; font: 600 12px/1.35 Poppins, Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--vn-rotulo); }
.vn-calc__lado--ba .vn-calc__rot { color: var(--vn-verde2); }
.vn-calc__frase { margin: 8px 0 0; font-size: 14px; color: var(--vn-suave); }
.vn-calc__num { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.vn-calc__num b { min-width: 0; overflow-wrap: anywhere; font-family: Fraunces, Georgia, serif; font-size: 1.9rem; font-weight: 600; line-height: 1.1; color: var(--vn-tinta); }
.vn-calc__lado--ba .vn-calc__num b { color: var(--vn-verde); }
.vn-calc__num > span { font-size: 15px; color: var(--vn-suave); }
.vn-calc__ano { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--vn-suave); overflow-wrap: anywhere; }
.vn-calc__dif { margin-top: 12px; padding: 18px 16px; border-radius: var(--vn-r2); background: var(--vn-noite); color: #fff; text-align: center; }
.vn-calc__dif p { margin: 0; }
.vn-calc__dif p:empty { display: none; }
.vn-calc__dif-t { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.vn-calc__dif .vn-calc__dif-n { margin-top: 4px; overflow-wrap: anywhere; font-family: Fraunces, Georgia, serif; font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 600;
    line-height: 1.15; color: var(--vn-ouro); }
.vn-calc__dif .vn-calc__dif-s { margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.vn-calc__ponto { margin: 16px 0 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: var(--vn-tinta); }
.vn-calc__ponto i { margin-top: 4px; color: var(--vn-verde2); text-align: center; }
.vn-calc__acao { margin-top: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vn-calc__acao .vn-btn { width: 100%; max-width: 420px; }
.vn-calc__nota { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--vn-linha); font-size: 12px; line-height: 1.5; color: var(--vn-rotulo); text-align: center; }
@media (min-width: 640px) {
    .vn-calc { padding: 28px; }
    .vn-calc__campos, .vn-calc__res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .vn-calc { margin-top: 36px; padding: 36px 40px; }
    .vn-calc__acao .vn-btn { width: auto; }
}

/* ========== 6. Divulgação: etiquetas de feira num varal (pesponto 4 de 4) ========== */
/* Um varal só, no alto; as etiquetas das fileiras de baixo ficam presas, pelo barbante,
   à etiqueta de cima. A sombra vai no pai porque o clip-path corta o box-shadow. */
.vn-varal { --vn-fio: 24px; list-style: none; margin: 28px 0 0; padding: var(--vn-fio) 0 0; border-top: 2px dashed var(--vn-ouro);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vn-fio) 12px; filter: drop-shadow(0 8px 14px rgba(16, 46, 0, .12)); }
.vn-varal li { position: relative; }
.vn-varal li::before { content: ''; position: absolute; left: 50%; top: calc(-1 * var(--vn-fio)); z-index: 1; height: calc(var(--vn-fio) + 9px);
    border-left: 1.5px dashed var(--vn-ouro); transform: translateX(-50%); }
.vn-tag { position: relative; height: 100%; background: #fff; padding: 26px 12px 14px; text-align: center; transform-origin: 50% 0;
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px); }
.vn-varal li:nth-child(odd) .vn-tag { transform: rotate(-1.2deg); }
.vn-varal li:nth-child(even) .vn-tag { transform: rotate(1deg); }
/* O furo da etiqueta, onde o barbante passa. */
.vn-tag::before { content: ''; position: absolute; top: 8px; left: 50%; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--vn-ouro);
    background: var(--vn-papel); transform: translateX(-50%); }
.vn-tag i { font-size: 20px; color: var(--vn-verde2); }
.vn-tag .fa-pinterest { color: #bd081c; }
.vn-tag h3 { margin: 8px 0 0; font-family: Inter, system-ui, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; }
.vn-tag p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--vn-suave); }
.vn-varal__nota { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: var(--vn-rotulo); max-width: 70ch; }
.vn-divulga__fecho { margin-top: 24px; text-align: center; }
.vn-divulga__fecho .vn-mao { margin: 0; font-size: 26px; transform: rotate(-2deg); }
.vn-divulga__fecho p:not(.vn-mao) { margin: 12px auto 0; max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--vn-suave); }

/* ========== Barra fixa do celular (eco do pesponto na borda de cima) ========== */
.vn-barra { display: none; }

/* ========== 7. Planos (partial de sempre, só o visual igualado aqui) ========== */
.vn #planos { background: #fff; border-color: var(--vn-linha); }
.vn #planos .kicker::before { width: 6px; height: 6px; border-radius: 50%; }
.vn #planos .u-brush { background-image: none; padding-bottom: 0; }

/* ========== 8. Carta do fundador ========== */
.vn-carta__topo { margin-bottom: 24px; }
.vn-carta { position: relative; max-width: 820px; margin: 0 auto; border-radius: var(--vn-r1) var(--vn-r3) var(--vn-r3) var(--vn-r1); background: #fffdf8; padding: 28px 20px 24px;
    box-shadow: var(--vn-sombra); border: 1px solid rgba(28, 25, 23, .07); }
.vn-carta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: var(--vn-r1) 0 0 var(--vn-r1); background: var(--vn-ouro); }
.vn-carta__cab { display: flex; align-items: center; gap: 16px; }
.vn-carta__foto { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--vn-ouro); }
.vn-carta__quem b { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.25rem; font-weight: 600; }
.vn-carta__quem span { display: block; font-size: 14px; color: var(--vn-suave); margin-top: 2px; line-height: 1.4; }
.vn-carta__destaque { margin: 22px 0 0; font-family: Fraunces, Georgia, serif; font-size: 1.5rem; line-height: 1.25; font-weight: 600; color: var(--vn-verde); text-wrap: balance; }
.vn-carta__destaque span { display: block; }
.vn-carta__texto { margin-top: 18px; }
.vn-carta__texto p { margin: 0 0 14px; font-size: 1rem; line-height: 1.65; color: #33302c; }
.vn-carta__ass { font-family: var(--vn-mao); font-size: 34px; font-weight: 600; color: var(--vn-verde); margin: 6px 0 0; line-height: 1; }

/* ========== 9. Perguntas ========== */
.vn-faq { max-width: 860px; margin: 28px auto 0; display: grid; gap: 10px; }
.vn-faq__rot { margin: 0 0 2px; font: 600 12px/1.2 Poppins, Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--vn-rotulo); }
.vn-faq details { border-radius: var(--vn-r2); background: #fff; border: 1px solid var(--vn-linha); }
.vn-faq details[open] { border-color: rgba(31, 94, 0, .3); box-shadow: var(--vn-sombra); }
.vn-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 14px 18px; cursor: pointer;
    font-weight: 600; font-size: 15px; line-height: 1.4; }
.vn-faq summary::-webkit-details-marker { display: none; }
.vn-faq summary i { flex: none; color: var(--vn-verde2); transition: transform .2s ease; }
/* Só o ícone da pergunta aberta gira (com o "Ver mais" aberto, as de dentro ficam quietas). */
.vn-faq details[open] > summary i { transform: rotate(45deg); }
.vn-faq details p { margin: 0; padding: 0 18px 18px; color: var(--vn-suave); line-height: 1.65; font-size: 15px; }
.vn-faq__link { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 18px 10px; font-weight: 700; font-size: 15px; color: var(--vn-verde);
    text-decoration: underline; text-underline-offset: 3px; }
.vn-faq .vn-faq__mais, .vn-faq .vn-faq__mais[open] { border: 0; background: none; box-shadow: none; }
.vn-faq__mais > summary { justify-content: center; min-height: 48px; border-radius: var(--vn-r2); background: var(--vn-menta); color: var(--vn-verde); font-weight: 700; text-align: center; }
.vn-faq__mais[open] > summary { margin-bottom: 10px; }
.vn-faq__lista { display: grid; gap: 10px; }

/* ========== 10. Fechamento ========== */
.vn-fim { background: radial-gradient(900px 400px at 50% 120%, rgba(232, 175, 24, .22), transparent 60%), var(--vn-noite); color: #fff; text-align: center; padding: 56px 0; }
.vn-fim .vn-h2 { color: #fff; }
.vn-fim p { margin: 14px auto 0; max-width: 56ch; font-size: 17px; color: rgba(255, 255, 255, .8); line-height: 1.6; }
.vn-fim .vn-acoes { justify-content: center; }
.vn-fim .vn-fim__contato { margin: 16px auto 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); }

/* ========== Celular e tablet (até 899 px) ========== */
@media (max-width: 899px) {
    /* Um só botão cheio no topo; o segundo vira link de texto. */
    .vn-topo .vn-acoes { flex-direction: column; align-items: stretch; gap: 4px; }
    .vn-topo .vn-btn--cheio { width: 100%; }
    .vn-topo .vn-btn--linha, .vn-topo .vn-btn--linha:hover { background: none; border: 0; min-height: 44px; padding: 0 12px; box-shadow: none;
        text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
    .vn #planos { padding-top: 48px; padding-bottom: 48px; }
    .vn-fim .vn-acoes { flex-direction: column; align-items: center; }
    .vn-fim .vn-btn { width: 100%; max-width: 360px; }
    /* Barra fixa: aparece enquanto o trilho está na tela. O padding da direita deixa livre o
       botão flutuante do WhatsApp (bottom/right 20 px, 56 px) com 8 px de folga entre os dois
       alvos de toque; o aviso de cookies (z 80) cobre. A linha do preço pode quebrar (um preço
       mais longo ou outra fonte não encosta no botão); o botão fica inteiro. */
    .vn-barra { display: flex; position: sticky; bottom: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 10px;
        padding: 10px 84px calc(10px + env(safe-area-inset-bottom)) 16px; background: var(--vn-noite); color: #fff; border-top: 2px dashed var(--vn-ouro); }
    .vn-barra p { margin: 0; display: grid; min-width: 0; font-size: 14px; line-height: 1.25; }
    .vn-barra b { white-space: nowrap; }
    .vn-barra span { font-size: 12px; color: rgba(255, 255, 255, .75); }
    .vn-barra .vn-btn { flex: none; min-height: 44px; padding: 0 14px; font-size: 15px; }
    /* O navegador não desconta a barra sticky ao rolar até o foco: folga embaixo. */
    html { scroll-padding-bottom: 80px; }
}
@media (max-width: 767px) {
    /* Cabeçalho fixo de 172 px no celular: as âncoras param abaixo dele. */
    .vn #como-funciona, .vn #ferramentas, .vn #calculadora, .vn #divulgacao, .vn #fundador { scroll-margin-top: 140px; }
    .vn-elo7 { scroll-margin-top: 188px; }
}
@media (max-width: 399px) {
    /* Android comum (360 a 399 px): botão um pouco mais justo. */
    .vn-barra .vn-btn { padding: 0 12px; font-size: 14px; }
}
@media (max-width: 359px) {
    .vn-varal { grid-template-columns: minmax(0, 1fr); }
}

/* ========== Telas maiores ========== */
@media (min-width: 640px) {
    .vn-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .vn-carta { padding: 40px 44px 36px; }
    .vn-carta__texto p { font-size: 17px; line-height: 1.75; }
}
@media (min-width: 900px) {
    .vn-sec { padding: 88px 0; }
    .vn-fim { padding: 72px 0; }
    .vn-ad { margin-top: 36px; }
    .vn-ad__pares { gap: 0; }
    .vn-grupos { gap: 16px; margin-top: 36px; }
    .vn-grupo { padding: 22px 20px 18px; }
    .vn-grupo ul { margin-top: 12px; }
    .vn-peca__corpo { padding: 18px 20px 20px; }
    .vn-varal { margin-top: 36px; }
    .vn-cartao-link__img { height: 96px; }
    .vn-topo { padding: 56px 0 80px; }
    .vn-topo__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; }
    .vn-fone__tela { min-height: 560px; }
    .vn-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 32px; }

    /* Caderno contínuo à esquerda, painel contínuo à direita, seta no meio. */
    .vn-ad { max-width: 980px; margin-inline: auto; }
    .vn-ad__cab { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); margin-bottom: 10px;
        font: 600 12px/1.2 Poppins, Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--vn-rotulo); }
    .vn-ad__cab span:last-child { grid-column: 3; }
    .vn-par { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 0; align-items: stretch; }
    .vn-par__antes { display: flex; align-items: center; border-radius: 0; border-top: 0; }
    .vn-par:first-child .vn-par__antes { border-top: 1px solid rgba(28, 25, 23, .08); border-radius: var(--vn-r1) var(--vn-r1) 0 0; }
    .vn-par:last-child .vn-par__antes { border-radius: 0 0 var(--vn-r1) var(--vn-r1); }
    .vn-par__seta { align-items: center; }
    .vn-par__seta i { transform: none; }
    .vn-par__depois { border-radius: 0; border-top: 0; }
    .vn-par:first-child .vn-par__depois { border-top: 1px solid rgba(31, 94, 0, .16); border-radius: var(--vn-r1) var(--vn-r1) 0 0; }
    .vn-par:last-child .vn-par__depois { border-radius: 0 0 var(--vn-r1) var(--vn-r1); }

    .vn-seg { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; }
    .vn-peca__img { height: 200px; font-size: 84px; }

    /* Passos em 3 colunas, fio na horizontal de um número ao outro. */
    .vn-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
    .vn-passo { padding: 72px 0 0; text-align: center; }
    .vn-passo:not(:last-child)::before { left: 50%; top: 23px; bottom: auto; width: calc(100% + 32px); border-left: 0; border-top: 2px dashed var(--vn-ouro); }
    .vn-passo__n { left: 50%; transform: translateX(-50%); }
    .vn-elo7 { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; }
    .vn-elo7 i { margin-top: 0; }
    .vn-elo7 a { grid-column: auto; }
    .vn-meio { display: flex; flex-direction: column; align-items: center; margin-top: 32px; }

    /* Todas as ferramentas à vista; duas colunas equilibradas (Vender + Entregar | Organizar + Decidir). */
    .vn-grupos { grid-auto-flow: column; grid-template-rows: auto auto; align-items: stretch; }
    .vn-grupo .vn-extra { display: flex; }
    .vn-mais, .vn-mais__ck { display: none; }

    .vn-preco { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: 40px 44px; gap: 44px; align-items: center; }
    .vn-preco .vn-btn { width: auto; }

    .vn-varal { --vn-fio: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    /* O layout liga a rolagem suave em todo o site; aqui ela respeita quem pediu menos movimento. */
    html { scroll-behavior: auto; }
    .vn-digitando span, .vn-aviso { animation: none; }
    .vn-btn, .vn-faq summary i { transition: none; }
}

/* Duas notas lado a lado no computador: o link do Elo7 desce para baixo do texto. */
@media (min-width: 900px) {
    .vn-notas--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .vn-notas--duas .vn-elo7 { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
    .vn-notas--duas .vn-elo7 i { margin-top: 4px; }
    .vn-notas--duas .vn-elo7 a { grid-column: 2; }
}

/* Vídeo do app do artesão (16/10/2026): 16:9 no computador, em pé no celular. */
.vn-sec--video .vn-lead { margin-bottom: 28px; }
.vn-video { position: relative; margin: 0 auto; border-radius: var(--vn-r3); overflow: hidden; background: var(--vn-noite); box-shadow: var(--vn-sombra); }
.vn-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vn-video--h { display: none; max-width: 920px; aspect-ratio: 16 / 9; }
.vn-video--v { max-width: 340px; aspect-ratio: 9 / 16; }
@media (min-width: 640px) { .vn-video--h { display: block; } .vn-video--v { display: none; } }
.vn-video__play { position: absolute; inset: 0; margin: auto; width: 80px; height: 80px; border: 0; border-radius: 50%;
    background: var(--vn-ouro); color: var(--vn-noite); font-size: 26px; cursor: pointer; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: transform .15s; }
.vn-video__play i { margin-left: 4px; }
.vn-video__play:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .vn-video__play { transition: none; } }

/* Atalho da /vender para a página de arquivos digitais (17/10/2026), entre as ferramentas
   e o cartão de preço. Mesmo desenho da nota do Elo7. */
.vn-dig { margin: 20px 0 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 16px 18px; border-radius: var(--vn-r2);
    background: var(--vn-menta); border: 1px solid rgba(31, 94, 0, .2); font-size: 15px; line-height: 1.5; }
.vn-dig > i { color: var(--vn-verde2); margin-top: 4px; }
.vn-dig > a { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; font-weight: 700; color: var(--vn-verde);
    text-decoration: underline; text-underline-offset: 3px; }
.vn-dig > a i { font-size: 12px; }
@media (min-width: 900px) {
    .vn-dig { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; }
    .vn-dig > i { margin-top: 0; }
    .vn-dig > a { grid-column: auto; }
}

/* ==========================================================================
   /vender/arquivos-digitais (17/10/2026). Os componentes são os da /vender (topo,
   passos, faixa escura, calculadora, planos, perguntas, fechamento); aqui só o que
   é novo: o e-mail no celular do topo, os tipos de arquivo, as datas, a planilha do
   cadastro em lote e as regras. Letra manuscrita só nos dois "exemplo".
   ========================================================================== */
.vn #tipos, .vn #lote, .vn #regras { scroll-margin-top: 80px; }
@media (max-width: 767px) { .vn #tipos, .vn #lote, .vn #regras { scroll-margin-top: 140px; } }

/* E-mail "produto digital liberado" na tela do celular do topo. */
.vn-fone__av--ba { background: linear-gradient(135deg, var(--vn-verde2), var(--vn-ouro)); }
.vn-mail { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 70px; }
.vn-mail p { margin: 0; }
.vn-mail__assunto { font-size: 15px; font-weight: 700; line-height: 1.3; }
.vn-mail__oi { font-size: 13px; line-height: 1.45; color: #44403c; }
.vn-mail__item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--vn-r1); background: #fff; border: 1px solid rgba(0, 0, 0, .08); }
.vn-mail__capa { flex: none; width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; font-size: 24px; color: #c2410c;
    background: linear-gradient(#fdf2e4, #f6d9b8); }
.vn-mail__corpo { min-width: 0; }
.vn-mail__nome { font-size: 13px; font-weight: 700; line-height: 1.3; }
.vn-mail__tipo { margin-top: 2px; font-size: 11px; color: var(--vn-rotulo); }
.vn-mail__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 999px; background: var(--vn-verde2);
    color: #fff; font-size: 14px; font-weight: 700; }
.vn-mail__nota { font-size: 11px; line-height: 1.4; color: var(--vn-rotulo); text-align: center; }

/* O que dá para vender: lista no celular, 2 colunas a partir de 560 px, 5 no computador. */
.vn-tipos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.vn-tipo { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 14px; border-radius: var(--vn-r2); background: #fff;
    border: 1px solid var(--vn-linha); }
.vn-tipo__ic { grid-row: span 2; width: 40px; height: 40px; border-radius: var(--vn-r1); display: grid; place-items: center; background: var(--vn-menta); color: var(--vn-verde2);
    font-size: 17px; }
.vn-tipo h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.vn-tipo p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--vn-suave); }
.vn-datas { margin-top: 20px; padding: 20px 18px; border-radius: var(--vn-r2); background: var(--vn-papel); border: 1px solid rgba(232, 175, 24, .4); }
.vn-datas h3 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.vn-datas ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vn-datas li { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(31, 94, 0, .18);
    font-size: 14px; font-weight: 600; color: var(--vn-verde); }
.vn-datas p { margin: 12px 0 0; max-width: 72ch; font-size: 15px; line-height: 1.55; color: var(--vn-suave); }
.vn-datas a, .vn-regras__nota a, .vn-faq__outras a { font-weight: 700; color: var(--vn-verde); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 560px) { .vn-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
    .vn-tipos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
    .vn-tipo { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 16px; }
    .vn-tipo__ic { grid-row: auto; margin-bottom: 8px; }
    .vn-datas { margin-top: 24px; padding: 24px 28px; }
}

/* Planilha do cadastro em lote (cartão branco na faixa escura, como a peça da /vender). */
.vn-plan { position: relative; width: min(420px, 100%); margin: 0 auto; border-radius: var(--vn-r3); background: #fff; color: var(--vn-tinta); overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); }
.vn-plan > .vn-mao { position: absolute; top: 9px; right: 16px; z-index: 1; }
.vn-plan__barra { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #f3f1ec; border-bottom: 1px solid var(--vn-linha); font-size: 13px;
    font-weight: 600; color: var(--vn-suave); }
.vn-plan__barra i { color: var(--vn-verde2); }
.vn-plan__grade { display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr); font-size: 12px; line-height: 1.3; }
.vn-plan__grade span { padding: 9px 10px; border-bottom: 1px solid var(--vn-linha); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-plan__grade span:nth-child(3n+2) { text-align: right; font-variant-numeric: tabular-nums; border-left: 1px solid var(--vn-linha); border-right: 1px solid var(--vn-linha); }
.vn-plan__grade .vn-plan__cab { background: #faf8f5; font: 600 11px/1.3 Poppins, Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--vn-rotulo); }
.vn-plan__grade .vn-plan__link { color: #1d4ed8; }
.vn-plan__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; font-size: 13px; color: var(--vn-suave); }
.vn-plan__fotos { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--vn-menta); color: var(--vn-verde); font-weight: 700; }

/* Regras simples: 1 coluna no celular, 2 a partir de 640 px. */
.vn-regras { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vn-regras li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 18px 16px; border-radius: var(--vn-r2); background: #fff;
    border: 1px solid var(--vn-linha); }
.vn-regras__ic { grid-row: span 2; width: 40px; height: 40px; border-radius: var(--vn-r1); display: grid; place-items: center; background: var(--vn-noite); color: var(--vn-ouro); font-size: 16px; }
.vn-regras b { font-size: 16px; line-height: 1.35; }
.vn-regras li > span:last-child { font-size: 15px; line-height: 1.55; color: var(--vn-suave); }
.vn-regras__nota { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: var(--vn-rotulo); text-align: center; }
.vn-faq__outras { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--vn-suave); text-align: center; }
@media (min-width: 640px) { .vn-regras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .vn-regras { gap: 16px; margin-top: 36px; } .vn-regras li { padding: 22px 20px; } }
@media (max-width: 359px) {
    /* Celular de 320 px: "14 dias grátis" encostava 2 px no botão da barra fixa (medido em 17/10/2026). */
    .vn-barra b { font-size: 13px; }
    .vn-barra .vn-btn { padding: 0 10px; }
}