/*
  POMELO · LANDING DE DEMONSTRAÇÃO (pomelocrm.com.br)

  Página estática, sem framework. Tokens copiados do DESIGN.md v2 do
  rd360-track (paleta oficial, Fraunces 300 nos títulos, Archivo na interface,
  pílula nos botões, cartão de 20px, sombra sussurro). Light-only.
  As fontes são servidas daqui (fonts/), sem chamada a terceiros.
*/

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/fraunces-300-latin.woff2') format('woff2');
}

:root {
  --casca: #2E3B2C;
  --casca-hover: #243023;
  --pomelo: #C3CF52;
  --pomelo-hover: #B4C044;
  --pomelo-suave: #E7EBBA;
  --branco: #FFFFFF;
  --area: #F7F8F3;
  --placa: #EEF0E6;
  --borda: #E3E6DC;
  --br2: #D5D8CE;
  --texto-forte: #46523F;
  --texto-2: #5F6B5C;
  --polpa: #E8908C;
  --flor: #FFDEDC;
  --casca-texto: #E9EDE0;
  --claro-hover: rgba(233, 237, 224, .08);

  --f: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ls-display: -0.02em;

  --rr: 10px;
  --rr-md: 14px;
  --rr-lg: 20px;
  --rr-xl: 24px;
  --rr-pill: 9999px;

  --sh: 46, 59, 44;
  --el-1: rgba(var(--sh), .40) 0 0 1px 0, rgba(var(--sh), .04) 0 1px 1px 0, rgba(var(--sh), .04) 0 2px 4px 0;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --foco: 0 0 0 4px rgba(195, 207, 82, .35);

  --pg: 1120px;
  --pg-ar: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--branco); color: var(--texto-forte);
  font-family: var(--f); font-size: 16px; line-height: 1.55; letter-spacing: .01em;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--casca); }
:focus-visible { outline: 2px solid var(--casca); outline-offset: 3px; border-radius: 4px; }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--casca); color: var(--branco);
  padding: 10px 16px; border-radius: var(--rr-pill); font-weight: 500; text-decoration: none;
}
.pular:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cont { max-width: var(--pg); margin: 0 auto; padding-left: var(--pg-ar); padding-right: var(--pg-ar); }

/* ── Topo ──────────────────────────────────────────────────────────────── */
.topo { border-bottom: 1px solid var(--borda); }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.topo-marca { display: inline-flex; border-radius: 6px; }
.topo-marca img { width: 127px; height: 40px; }

/* ── Botões (pílula) ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  font-family: var(--f); font-weight: 500; font-size: 15px; letter-spacing: .01em; line-height: 1.2;
  border-radius: var(--rr-pill); padding: 12px 24px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; text-align: center;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: scale(.97); }
.btn-principal { background: var(--casca); color: var(--branco); }
.btn-principal:hover { background: var(--casca-hover); }
.btn-destaque { background: var(--pomelo); color: var(--casca); }
.btn-destaque:hover { background: var(--pomelo-hover); }
.btn-p { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--branco), 0 0 0 4px var(--casca); }
.btn svg { flex: none; }

/* ── Herói ─────────────────────────────────────────────────────────────── */
.heroi { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 56px; }
.rotulo {
  display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2);
}
.h1 {
  font-family: var(--f-titulo); font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 1.04;
  letter-spacing: var(--ls-display); color: var(--casca); margin-top: 14px; text-wrap: balance;
}
.lead { max-width: 540px; margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--texto-forte); }
.heroi-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.heroi-nota { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--texto-2); max-width: 520px; }
.heroi-txt > *, .heroi-app { animation: sobe 420ms var(--curva) both; }
.heroi-txt > :nth-child(2) { animation-delay: 70ms; }
.heroi-txt > :nth-child(3) { animation-delay: 140ms; }
.heroi-txt > :nth-child(4) { animation-delay: 210ms; }
.heroi-txt > :nth-child(5) { animation-delay: 280ms; }
.heroi-app { animation-delay: 200ms; min-width: 0; }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── Seções ────────────────────────────────────────────────────────────── */
.secao { padding-top: 72px; padding-bottom: 72px; }
.faixa { background: var(--area); }
.h2 {
  font-family: var(--f-titulo); font-weight: 300; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1;
  letter-spacing: var(--ls-display); color: var(--casca); margin-top: 12px; text-wrap: balance;
}
.texto { max-width: 520px; margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--texto-forte); }
.nota { max-width: 520px; margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--texto-2); }

.bloco { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.bloco-inv { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.bloco-inv > :first-child { order: 2; }
.bloco-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bloco-n { font-family: var(--f-titulo); font-weight: 300; font-size: 28px; line-height: 1; color: var(--casca); font-variant-numeric: tabular-nums; }
.lista { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--texto-forte); }
.lista svg { flex: none; margin-top: 4px; color: var(--casca); }

/* Revela ao rolar (só com JS e movimento ligado) */
.js .revela { opacity: 0; transform: translateY(16px); transition: opacity 420ms var(--curva), transform 420ms var(--curva); }
.js .revela.visto { opacity: 1; transform: none; }

/* ── Para quem (faixa escura) ──────────────────────────────────────────── */
.escuro { background: var(--casca); color: var(--casca-texto); }
.escuro .rotulo { color: var(--pomelo); }
.escuro .h2 { color: var(--branco); }
.escuro .texto { color: var(--casca-texto); max-width: 620px; }
.quem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.quem-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quem-lista li {
  background: var(--claro-hover); border: 1px solid rgba(233, 237, 224, .14); border-radius: var(--rr-lg);
  padding: 20px; display: flex; flex-direction: column; gap: 6px;
}
.quem-lista b { font-family: var(--f-titulo); font-weight: 300; font-size: 24px; line-height: 1.17; letter-spacing: var(--ls-display); color: var(--branco); }
.quem-lista span { font-size: 13px; line-height: 1.5; color: var(--casca-texto); }

/* ── Formulário da demonstração ────────────────────────────────────────── */
.demo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.form { display: flex; flex-direction: column; gap: 16px; background: var(--area); border-radius: var(--rr-xl); padding: 28px; }
.faixa .form, .faixa .sucesso { background: var(--branco); border: 1px solid var(--borda); }
.form-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label { font-size: 13px; font-weight: 500; color: var(--casca); }
.campo input, .campo select {
  font: inherit; font-size: 15px; color: var(--casca); background: var(--branco);
  border: 1px solid var(--br2); border-radius: var(--rr); padding: 10px 12px; min-height: 44px; width: 100%;
  transition: border-color .15s, box-shadow .2s;
}
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E3B2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.campo input::placeholder { color: #7C857A; }
.campo input:focus-visible, .campo select:focus-visible { outline: none; border-color: var(--casca); box-shadow: var(--foco); }
.campo [aria-invalid="true"] { border-color: #B5524D; }
.campo-erro { font-size: 13px; line-height: 1.45; color: #8F2F2A; }
.campo-erro:empty { display: none; }
.aceite { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--texto-forte); cursor: pointer; }
.aceite input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--casca); cursor: pointer; }
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { align-self: flex-start; }
.form .btn:disabled { opacity: .6; cursor: default; }
.form-aviso { font-size: 14px; line-height: 1.5; color: var(--casca); background: var(--flor); border-radius: var(--rr-md); padding: 12px 14px; }
.form-aviso a { font-weight: 600; }
.form-pe { font-size: 13px; line-height: 1.55; color: var(--texto-2); }
.sucesso {
  background: var(--area); border-radius: var(--rr-xl); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px;
  animation: sobe 420ms var(--curva) both;
}
.sucesso:focus { outline: none; }
.sucesso-ic { width: 44px; height: 44px; border-radius: var(--rr-pill); background: var(--pomelo); color: var(--casca); display: inline-flex; align-items: center; justify-content: center; }
.sucesso h3 { font-family: var(--f-titulo); font-weight: 300; font-size: 28px; line-height: 1.12; letter-spacing: var(--ls-display); color: var(--casca); }
.sucesso p { font-size: 15px; line-height: 1.6; color: var(--texto-forte); }

/* ── A dor (Você se reconhece?) ────────────────────────────────────────── */
.dores { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dores li {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--rr-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.dores b { font-family: var(--f-titulo); font-weight: 300; font-size: 22px; line-height: 1.2; letter-spacing: var(--ls-display); color: var(--casca); }
.dores span { font-size: 14px; line-height: 1.55; color: var(--texto-forte); }

/* ── Como funciona ─────────────────────────────────────────────────────── */
.como-topo { padding-top: 72px; }
.como-topo + .passo { padding-top: 40px; }
.passo + .passo { border-top: 1px solid var(--borda); }

/* ── Ilustração: consultas de hoje (wireframe da tela Hoje) ────────────── */
.il {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--rr-lg); box-shadow: var(--el-1);
  padding: 20px; max-width: 520px; width: 100%; margin: 0 auto;
}
.il-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.il-cab b { font-family: var(--f-titulo); font-weight: 300; font-size: 22px; line-height: 1.2; color: var(--casca); }
.il-cab span { font-size: 13px; color: var(--texto-2); }
.il-linha { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 8px; margin: 0 -8px; border-bottom: 1px solid var(--borda); }
.il-linha:last-child { border-bottom: 0; }
.il-hora { font-size: 14px; font-weight: 500; color: var(--casca); font-variant-numeric: tabular-nums; }
.il-quem { display: flex; flex-direction: column; min-width: 0; }
.il-quem b { font-size: 15px; font-weight: 500; color: var(--casca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-quem small { font-size: 13px; color: var(--texto-2); }
.pilula {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 1.4;
  padding: 3px 10px; border-radius: var(--rr-pill); color: var(--casca); background: var(--pomelo-suave); border: 1px solid transparent;
}
.pilula-ok { background: var(--pomelo); }
.pilula-conf { background: var(--branco); border: 1px dashed var(--polpa); }
.pilula-placa { background: var(--placa); }
/* "Compareceu, num clique": a pílula troca de estado quando a ilustração aparece. */
.il-troca { display: inline-grid; justify-items: end; }
.il-troca > * { grid-area: 1 / 1; }
.il-troca .depois { opacity: 0; }
.js .visto .il-troca .antes { animation: some 300ms var(--curva) 1400ms forwards; }
.js .visto .il-troca .depois { animation: aparece 360ms var(--curva) 1500ms forwards; }
.js .visto .il-alvo { animation: alvo 1400ms var(--curva) 900ms 1; }
@keyframes some { to { opacity: 0; transform: scale(.92); } }
@keyframes aparece { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes alvo { 0%, 100% { background: transparent; } 40% { background: var(--area); } }
.il-nota { margin-top: 10px; text-align: center; font-size: 12px; color: var(--texto-2); }

/* ── A jornada do paciente (linha do tempo ilustrada) ──────────────────── */
.jornada { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.jor-cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--rr-lg); box-shadow: var(--el-1); padding: 22px; max-width: 560px; width: 100%; margin: 0 auto; }
.jor-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; }
.jor-cab b { font-family: var(--f-titulo); font-weight: 300; font-size: 22px; line-height: 1.2; color: var(--casca); }
.jor-cab span { font-size: 13px; color: var(--texto-2); }
.jor { display: flex; flex-direction: column; padding: 0; list-style: none; }
.jor li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
.jor li:last-child { padding-bottom: 0; }
.jor li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--borda); }
.jor-ic { width: 32px; height: 32px; border-radius: var(--rr-pill); background: var(--placa); color: var(--casca); display: inline-flex; align-items: center; justify-content: center; }
.jor-trouxe .jor-ic { background: var(--pomelo); }
.jor-venda .jor-ic { background: var(--casca); color: var(--pomelo); }
.jor-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 4px; }
.jor-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jor-quando { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.jor-corpo b { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--casca); }
.jor-o { font-size: 14px; line-height: 1.5; color: var(--texto-forte); }
.js .jor-cartao.revela .jor li { opacity: 0; }
.js .jor-cartao.revela.visto .jor li { animation: sobe 420ms var(--curva) 200ms forwards; }
.js .jor-cartao.revela.visto .jor li:nth-child(2) { animation-delay: 750ms; }
.js .jor-cartao.revela.visto .jor li:nth-child(3) { animation-delay: 1300ms; }
.js .jor-cartao.revela.visto .jor li:nth-child(4) { animation-delay: 1850ms; }

/* ── Pacote: entra, não entra, entrega ─────────────────────────────────── */
.pacote { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; }
.pacote-col { background: var(--area); border: 1px solid var(--borda); border-radius: var(--rr-lg); padding: 24px; }
.pacote-col h3 { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.pacote-col .lista { margin-top: 14px; }
.pacote-col .pacote-h2 { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--borda); }
.pacote-entrega { margin-top: 10px; font-family: var(--f-titulo); font-weight: 300; font-size: 22px; line-height: 1.25; letter-spacing: var(--ls-display); color: var(--casca); }

/* ── Quem decide e quem usa (dentro da faixa escura) ───────────────────── */
.papeis { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(233, 237, 224, .14); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.papeis li { display: flex; flex-direction: column; gap: 6px; }
.papeis b { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--pomelo); }
.papeis span { font-size: 15px; line-height: 1.55; color: var(--casca-texto); }

/* ── Prova ─────────────────────────────────────────────────────────────── */
.prova { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; max-width: 860px; }
.prova-n { font-family: var(--f-titulo); font-weight: 300; font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: var(--ls-display); color: var(--casca); }
.prova-n span { color: var(--texto-2); }
.prova-l { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--texto-forte); max-width: 340px; }
.prova-seg { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--borda); max-width: 760px; font-size: 15px; line-height: 1.6; color: var(--texto-forte); }
.prova-seg b { font-weight: 600; color: var(--casca); }

/* ── Ilustração: conversa com o rascunho da Cléo ───────────────────────── */
.conv { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.balao { max-width: 82%; font-size: 14px; line-height: 1.5; padding: 10px 14px; border-radius: 16px; }
.balao-in { align-self: flex-start; background: var(--area); color: var(--casca); border-bottom-left-radius: 6px; }
.rascunho {
  align-self: flex-end; max-width: 92%; background: var(--branco); border: 1.5px dashed var(--pomelo-hover);
  border-radius: 16px; border-bottom-right-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.rascunho-rot { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.rascunho p { font-size: 14px; line-height: 1.5; color: var(--casca); }
.rascunho-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-btn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; border-radius: var(--rr-pill);
  font-size: 13px; font-weight: 500; color: var(--casca); background: var(--branco); border: 1px solid var(--br2);
}
.mini-btn-principal { background: var(--casca); color: var(--branco); border-color: var(--casca); }
.js .il-conv .balao-in, .js .il-conv .rascunho { opacity: 0; }
.js .visto .il-conv .balao-in { animation: sobe 420ms var(--curva) 200ms forwards; }
.js .visto .il-conv .rascunho { animation: sobe 420ms var(--curva) 1000ms forwards; }
.js .visto .il-conv .mini-btn-principal { animation: toque 900ms var(--curva) 2000ms 2; }
@keyframes toque { 0%, 100% { box-shadow: 0 0 0 0 rgba(195, 207, 82, 0); } 50% { box-shadow: 0 0 0 6px rgba(195, 207, 82, .55); } }

/* ── Ilustração: de onde vem quem fecha (por campanha) ─────────────────── */
.org-cab, .org-linha { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .7fr)) minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.org-cab { padding: 12px 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.org-cab span:not(:first-child) { text-align: right; }
.org-linha { padding: 12px 8px; margin: 0 -8px; border-top: 1px solid var(--borda); }
.org-nome { display: flex; flex-direction: column; min-width: 0; }
.org-nome b { font-size: 15px; font-weight: 500; color: var(--casca); }
.org-nome small { font-size: 12px; color: var(--texto-2); }
.org-n { text-align: right; font-size: 14px; color: var(--casca); font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-barra { grid-column: 1 / -1; height: 6px; background: var(--placa); border-radius: var(--rr-pill); overflow: hidden; }
.org-barra i { display: block; height: 100%; width: 0; background: var(--br2); border-radius: inherit; }
.org-destaque { background: var(--area); }
.org-destaque .org-barra i { background: var(--pomelo); }
.org-barra .w-100 { width: 100%; }
.org-barra .w-18 { width: 18%; }
.org-barra .w-5 { width: 5%; }
.js .il-origem .org-barra i { transform-origin: left; transform: scaleX(0); }
.js .visto .il-origem .org-barra i { animation: cresce 900ms var(--curva) 400ms forwards; }
@keyframes cresce { to { transform: scaleX(1); } }

.prova-n-txt { font-size: clamp(36px, 4.2vw, 52px); line-height: 1.05; }

/* ── Rodapé ────────────────────────────────────────────────────────────── */
.rodape { border-top: 1px solid var(--borda); padding-top: 40px; padding-bottom: 40px; }
.rodape-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px 56px; }
.rodape img { width: 114px; height: 36px; }
.rodape p { font-size: 14px; line-height: 1.6; color: var(--texto-2); }
.rodape-marca p { margin-top: 12px; }
.rodape a { font-weight: 500; text-underline-offset: 3px; }
.rodape-priv h2 { font-size: 13px; font-weight: 500; color: var(--casca); margin-bottom: 6px; }
.rodape-ano { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--borda); font-size: 13px !important; }

/* ── Vitrine de tela (moldura de app com os prints da Demo) ────────────── */
.vt { width: 100%; max-width: 920px; margin: 0 auto; }
.vt-moldura { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--rr-lg); box-shadow: var(--el-1); overflow: hidden; }
.vt-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--area); border-bottom: 1px solid var(--borda); }
.vt-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--br2); flex: none; }
.vt-endereco { margin-left: 8px; font-size: 11px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-quadros { position: relative; overflow: hidden; background: var(--area); isolation: isolate; aspect-ratio: 1600 / 784; }
.vt-camada { position: absolute; inset: 0; transform-origin: 0 0; opacity: 0; transition: opacity 700ms var(--curva); }
.vt-camada-atual { opacity: 1; z-index: 1; will-change: transform; }
.vt-camada img { width: 100%; height: 100%; object-fit: cover; }
.vt-anel {
  position: absolute; pointer-events: none; border: calc(2px / var(--z, 1)) solid var(--pomelo); border-radius: calc(10px / var(--z, 1));
  opacity: 0; animation: anel-acende 360ms var(--curva) 1500ms forwards;
}
.vt-anel::after {
  content: ""; position: absolute; inset: calc(-5px / var(--z, 1)); border-radius: inherit;
  border: calc(5px / var(--z, 1)) solid var(--pomelo); opacity: 0; animation: anel-pulsa 1100ms var(--curva) 1700ms 2;
}
@keyframes anel-acende { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes anel-pulsa { 0% { opacity: .45; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
.vt-nota {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; max-width: calc(100% - 28px);
  padding: 6px 12px; border-radius: var(--rr-pill); background: var(--casca); color: var(--branco);
  font-size: 13px; font-weight: 500; line-height: 1.3; box-shadow: var(--el-1);
  opacity: 0; animation: nota-entra 320ms var(--curva) 1300ms forwards;
}
@keyframes nota-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vt-parado .vt-anel, .vt-parado .vt-nota { animation-delay: 0ms; }
.vt-legenda { margin-top: 10px; text-align: center; font-size: 12px; color: var(--texto-2); }

/* ── Página de obrigado ────────────────────────────────────────────────── */
.obrigado { min-height: calc(100vh - 73px); display: flex; align-items: center; }
.obrigado-in { max-width: 620px; padding-top: 72px; padding-bottom: 72px; }
.obrigado .texto { max-width: 560px; }

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .quem { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 980px) {
  .heroi, .bloco, .bloco-inv, .demo, .quem, .pacote, .jornada { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .heroi { padding-top: 48px; }
  .bloco-inv > :first-child { order: 0; }
  .texto, .lead, .nota { max-width: 640px; }
}
@media (max-width: 1100px) {
  .dores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rodape-in { grid-template-columns: minmax(0, 1fr); }
  .papeis { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 620px) {
  :root { --pg-ar: 20px; }
  .secao { padding-top: 52px; padding-bottom: 52px; }
  .heroi { padding-top: 36px; padding-bottom: 44px; }
  .lead { font-size: 17px; }
  .heroi-cta .btn, .form .btn { width: 100%; }
  .form-linha { grid-template-columns: minmax(0, 1fr); }
  .form { padding: 20px; }
  .quem-lista { grid-template-columns: minmax(0, 1fr); }
  .dores { grid-template-columns: minmax(0, 1fr); }
  .dores b { font-size: 20px; }
  .como-topo { padding-top: 52px; }
  .como-topo + .passo { padding-top: 28px; }
  .prova { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .il, .jor-cartao { padding: 16px; }
  .il-linha { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .org-cab, .org-linha { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .6fr)) minmax(0, 1fr); gap: 4px 8px; }
  .org-n { font-size: 13px; }
  .balao { max-width: 92%; }
  .pacote-col { padding: 20px; }
  .topo-in { min-height: 64px; }
  .topo-marca img { width: 108px; height: 34px; }
  .vt-nota { left: 8px; bottom: 8px; padding: 4px 10px; font-size: 12px; }
  .vt-barra { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .heroi-txt > *, .heroi-app, .sucesso { animation: none; }
  .btn, .campo input, .campo select, .vt-camada { transition: none; }
  .btn:active { transform: none; }
  .js .revela { opacity: 1; transform: none; transition: none; }
  .vt-anel, .vt-nota { animation: none; opacity: 1; }
  .vt-anel::after { animation: none; }
  .js .visto .il-troca .antes, .js .visto .il-troca .depois, .js .visto .il-alvo { animation: none; }
  .il-troca .antes { opacity: 0; }
  .il-troca .depois { opacity: 1; }
  .js .jor-cartao.revela .jor li, .js .jor-cartao.revela.visto .jor li { opacity: 1; animation: none; }
  .js .il-conv .balao-in, .js .il-conv .rascunho, .js .visto .il-conv .balao-in, .js .visto .il-conv .rascunho { opacity: 1; animation: none; }
  .js .visto .il-conv .mini-btn-principal { animation: none; }
  .js .il-origem .org-barra i, .js .visto .il-origem .org-barra i { transform: none; animation: none; }
}