/* assets/css/vendas.css — landing de vendas do AUTOMULTAS (app/saas/automultas.php).
   Parte 1: a página (tema escuro, um acento: azul-céu). Parte 2: a animação do hero
   (vinda de prototipos/animacao-hero.html), em cqw do .mundo. */

:root{
  --fundo:#071426; --sup:#0b1f3a; --sup-2:#0d2442; --linha:rgba(148,163,184,.16);
  --texto:#e2e8f0; --suave:#9fb0c6; --ceu:#38bdf8; --ceu-claro:#7dd3fc; --ceu-escuro:#0369a1;
  --navy:#0b1f3a; --navy-2:#0a1830; --tinta:#1f2430;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--fundo);color:var(--texto);font:400 16px/1.6 'DM Sans','Segoe UI',Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ceu);outline-offset:3px;border-radius:6px}
.material-symbols-outlined,.ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;line-height:1;
  letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased}
.wrap{width:min(100% - 48px,1200px);margin-inline:auto}

/* ── Botões: pílula (cards e campos usam 16px/10px) ─────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:999px;
  font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:background-color .2s,border-color .2s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-cta{background:var(--ceu);color:#04121f;font-family:inherit}
.btn-cta:hover{background:var(--ceu-claro)}
.btn-sec{border-color:rgba(148,163,184,.35);color:var(--texto)}
.btn-sec:hover{border-color:var(--ceu)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}

/* ── Topo ───────────────────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:10;background:rgba(7,20,38,.82);border-bottom:1px solid var(--linha);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;
  width:min(100% - 32px,1200px);margin-inline:auto}
.marca-txt{font-size:19px;font-weight:700;letter-spacing:.04em;text-decoration:none}
.marca-txt span{color:var(--ceu)}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{padding-top:72px}
.hero-txt{max-width:760px}
.hero h1{font-size:clamp(2.2rem,4.8vw,3.7rem);line-height:1.06;letter-spacing:-.025em;font-weight:700}
.hero-txt p{max-width:52ch;margin:20px 0 32px;font-size:1.15rem;color:var(--suave)}
.hero-acoes{display:flex;flex-wrap:wrap;gap:12px}
.hero-anim{max-width:1100px;margin:56px auto 0;display:grid;gap:20px}

/* ── Seções ─────────────────────────────────────────────────────────── */
section h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.15;letter-spacing:-.02em;font-weight:700}
.ganhos,.telas,.leis,.pagina,.facil,.conta,.teste{padding-top:112px}

/* CTB e Manual sempre à mão / Landing page pronta: ilustração grande + texto, sem cartão
   (na landing page a ilustração fica à direita) */
.leis-in,.pagina-in{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:56px}
.pagina-in{grid-template-columns:1fr auto}
.leis .ilustra,.pagina .ilustra{width:240px;height:auto;aspect-ratio:120/100;stroke-width:1.1}
.leis-in p,.pagina-in p{max-width:58ch;margin-top:14px;font-size:1.1rem;color:var(--suave)}

/* O que você ganha: fluxograma. 6 etapas em linha ligadas por setas (vertical abaixo
   de 1100px) + uma faixa tracejada de apoio que vale para todas. */
.ganhos h2{margin-bottom:40px}
.fluxo{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.etapa{position:relative;display:grid;align-content:start;gap:10px}
.etapa h3{font-size:1.05rem;line-height:1.3;font-weight:700}
.etapa p{font-size:15px;line-height:1.5;color:var(--suave)}
/* seta até a próxima etapa: linha + ponta (borda girada) */
.etapa:not(:last-child)::after{content:"";position:absolute;top:35px;left:84px;right:-14px;height:2px;
  background:linear-gradient(90deg,rgba(56,189,248,.2),var(--ceu))}
.etapa:not(:last-child)::before{content:"";position:absolute;top:32px;right:-14px;width:8px;height:8px;
  border:solid var(--ceu);border-width:2px 2px 0 0;transform:rotate(45deg)}
.fluxo-apoio{display:flex;align-items:center;gap:16px;margin-top:40px;padding:20px 24px;
  border:1px dashed rgba(56,189,248,.4);border-radius:16px;color:var(--suave)}
.fluxo-apoio strong{color:var(--texto)}
.fluxo-apoio .ilustra{width:64px;height:auto;aspect-ratio:120/100;stroke-width:2.4}
/* Ilustrações em traço fino com cor pastel deslocada; traço claro por causa do fundo escuro */
.ilustra{width:72px;height:72px;flex:0 0 auto;fill:none;stroke:#fbe3ea;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ilustra .f{stroke:none}
.ilustra .am{fill:#fde047} .ilustra .rs{fill:#f9a8d4} .ilustra .az{fill:#93d7f5} .ilustra .vd{fill:#a7f3c0}
@media (max-width:1100px){
  .fluxo,.fluxo-apoio{max-width:640px}
  .fluxo{grid-template-columns:1fr;gap:28px}
  .etapa{grid-template-columns:72px 1fr;column-gap:18px;row-gap:4px}
  .etapa .ilustra{grid-row:1/3}
  .etapa:not(:last-child)::after{top:80px;bottom:-22px;left:35px;right:auto;width:2px;height:auto;
    background:linear-gradient(rgba(56,189,248,.2),var(--ceu))}
  .etapa:not(:last-child)::before{top:auto;bottom:-22px;left:32px;right:auto;transform:rotate(135deg)}
}

/* Por dentro do sistema: réplica das telas do painel (claras, como no painel) com dados de
   exemplo. A barra da aba ativa enche em 7s e, ao terminar, o vendas.js passa para a
   próxima. Clicou numa aba (.manual), para de avançar; fora da tela (.parado), pausa. */
.telas>p{max-width:60ch;margin-top:14px;font-size:1.1rem;color:var(--suave)}
.telas-in{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;align-items:start;margin-top:40px}
.telas-abas{display:grid;gap:8px}
.aba{position:relative;display:grid;gap:4px;padding:16px 18px;overflow:hidden;border:1px solid transparent;border-radius:16px;
  background:none;color:var(--suave);font:inherit;text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s}
.aba:hover{background:rgba(148,163,184,.07)}
.aba strong{font-size:1.05rem;color:var(--texto)}
.aba span{font-size:14px;line-height:1.45}
.aba[aria-selected="true"]{border-color:var(--linha);background:var(--sup)}
.aba[aria-selected="true"] strong{color:#fff}
.aba i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ceu);transform:scaleX(0);transform-origin:0 50%}
.aba[aria-selected="true"] i{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){
  .telas:not(.manual) .aba[aria-selected="true"] i{animation:enche 7s linear}
  .telas.parado .aba i{animation-play-state:paused}
}
@keyframes enche{from{transform:scaleX(0)}}

.janela{overflow:hidden;border:1px solid var(--linha);border-radius:16px;background:#f3f5f8;
  box-shadow:0 30px 60px -20px rgba(2,8,23,.6)}
.janela-barra{display:flex;justify-content:center;padding:9px 12px;background:var(--navy-2);border-bottom:1px solid var(--linha)}
.janela-barra span{max-width:100%;overflow:hidden;padding:3px 14px;border-radius:999px;background:rgba(148,163,184,.12);
  color:var(--suave);font-size:12.5px;white-space:nowrap;text-overflow:ellipsis}
.pv-palco{display:grid;grid-template-columns:56px minmax(0,1fr);height:540px;color:#1f2a37;font-size:13px;line-height:1.4}
.pv-rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;background:linear-gradient(180deg,#0f1e38,#091326)}
.pv-rail .ms{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;font-size:21px;color:#7f91ab;
  transition:background-color .3s,color .3s}
.janela[data-tela="inicio"] [data-r="inicio"],.janela[data-tela="processos"] [data-r="processos"],
.janela[data-tela="fichas"] [data-r="fichas"],.janela[data-tela="modelos"] [data-r="modelos"]{
  background:rgba(56,189,248,.16);color:var(--ceu-claro)}
/* telas empilhadas na mesma célula: a nova entra por cima e a anterior só some depois */
.pv-tela{grid-area:1/2;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#f3f5f8;
  visibility:hidden;opacity:0;transition:opacity 0s .4s,visibility 0s .4s}
.pv-tela.ativa{z-index:1;visibility:visible;opacity:1;transition:opacity .4s}
.pv-topo{display:flex;align-items:center;gap:12px;flex:0 0 auto;height:56px;padding:0 20px;color:#fff;
  background:linear-gradient(95deg,#17325b 0%,#0f1e38 38%,#091326 70%,#050b16 100%)}
.pv-topo>.ms{font-size:24px}
.pv-topo b{display:block;font-size:16px;line-height:1.2}
.pv-topo small{font-size:11.5px;color:#b3c1d4}
.pv-corpo{position:relative;flex:1;min-height:0;padding:18px 20px;overflow:hidden}
.pv-corte{-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}

/* Início */
.pv-ola{margin-bottom:14px;color:#64748b}
.pv-ola b{color:#334155}
.pv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.pv-card{overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e3e8ee,0 2px 6px rgba(15,30,56,.06)}
.pv-card-topo{display:flex;align-items:center;gap:8px;padding:11px 14px;background:linear-gradient(100deg,#0f1e38,#091326);
  color:#fff;font-size:14px;font-weight:700}
.pv-card-topo .ms{font-size:20px}
.pv-rosa{color:#fb7185} .pv-card-topo .pv-azul{color:#60a5fa} .pv-amarelo,.pv-postit-ico{color:#facc15}
.pv-conta{margin-left:auto;min-width:26px;padding:1px 8px;border-radius:999px;background:#e11d48;font-size:12px;text-align:center}
.pv-conta-az{background:#2563eb}
.pv-postit-ico{margin-left:auto}
.pv-lista{padding:2px 12px}
.pv-li{display:flex;align-items:center;gap:8px;padding:8px 2px}
.pv-li+.pv-li{border-top:1px solid #eef2f7}
.pv-li>div{flex:1;min-width:0}
.pv-li b,.pv-li small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pv-li b{font-size:13px;color:#111827}
.pv-li small{font-size:11.5px;color:#6b7280}
.pv-tag{flex:0 0 auto;padding:2px 8px;border-radius:999px;background:#dcfce7;color:#166534;font-size:11px;font-weight:700}
.pv-tag.venc{background:#fee2e2;color:#b91c1c}
.pv-card-pe{padding:9px 14px 11px;border-top:1px solid #eef2f7;text-align:right;font-size:12.5px;font-weight:500;color:#0f1e38}
.pv-lembretes{display:grid;gap:12px;padding:16px 14px 18px}
.pv-postit{padding:12px 14px;border-radius:3px;background:#fef08a;color:#422006;font-size:12.5px;
  box-shadow:0 6px 12px -6px rgba(113,63,18,.45);transform:rotate(-1.5deg)}
.pv-postit+.pv-postit{background:#fde68a;transform:rotate(1.2deg)}

/* Processos */
.pv-novo{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:6px 14px 6px 10px;border-radius:999px;
  background:linear-gradient(135deg,#3b82f6,#0ea5e9);font-size:13px;font-weight:700}
.pv-novo .ms{font-size:18px}
.pv-filtros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding:14px;border-radius:12px;
  background:linear-gradient(90deg,#1e3a8a,#0ea5e9,#38bdf8) top/100% 3px no-repeat,#fff;box-shadow:0 0 0 1px #e3e8ee}
.pv-filtros small{display:block;margin-bottom:4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#334155}
.pv-inp{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;overflow:hidden;border:1px solid #d6dde6;border-radius:8px;
  font-size:12px;color:#8a98ab;white-space:nowrap}
.pv-inp .ms{font-size:17px;color:#0ea5e9}
.pv-inp .pv-seta{margin-left:auto;color:#475569}
.pv-colunas{display:inline-flex;align-items:center;gap:6px;align-self:end;justify-self:end;height:32px;padding:0 14px;border-radius:8px;
  background:#0f1e38;color:#fff;font-size:12.5px;font-weight:700}
.pv-colunas .ms{font-size:17px;color:var(--ceu)}
.pv-info{display:flex;align-items:center;justify-content:space-between;margin:12px 2px 10px;font-size:12px;color:#64748b}
.pv-info span{padding:2px 10px;border:1px solid #d6dde6;border-radius:6px;background:#fff;color:#334155}
.pv-tabela{overflow:auto;border-radius:10px;box-shadow:0 0 0 1px #e3e8ee}
.pv-tab{width:100%;border-collapse:collapse;background:#fff;font-size:12.5px;white-space:nowrap}
.pv-tab th{padding:7px 8px;background:#0f1e38;color:#fff;font-size:12px;font-weight:700;text-align:left}
.pv-tab thead tr+tr th{background:#1b2c4b;font-weight:500}
.pv-tab td{padding:7px 8px;border-top:1px solid #eef2f7;color:#374151}
.pv-tab tbody tr:nth-child(even){background:#f8fafc}
.pv-tab .pv-c{text-align:center}
.pv-av{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;border-radius:50%;
  font-size:10.5px;font-weight:700;vertical-align:middle}
.pv-av0{background:#e0f2e9;color:#2f6b4f} .pv-av1{background:#fde7e7;color:#b24545}
.pv-av2{background:#f5ecdf;color:#9a6b2f} .pv-av3{background:#ece8f6;color:#6b4fa3}
.pv-art{display:inline-block;padding:2px 9px;border:1px solid;border-radius:999px;font-size:11px;font-weight:700}
.pv-art.media{background:#fef9c3;border-color:#fde047;color:#854d0e}
.pv-art.grave{background:#ffedd5;border-color:#fdba74;color:#9a3412}
.pv-art.gravissima{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
.pv-acoes .ms{margin:0 2px;font-size:18px;color:#334155}
.pv-acoes .pv-roxo{color:#7c3aed} .pv-acoes .pv-verde{color:#16a34a}
.pv-acoes .pv-azul{color:#2563eb} .pv-acoes .pv-verm{color:#dc2626}

/* Fichas: a ficha aberta por cima da lista (desfocada e escurecida) */
.pv-ficha{padding:0}
.pv-ficha::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(9,19,38,.55)}
.pv-fundo{display:grid;padding:16px 20px;filter:blur(1.5px)}
.pv-fundo p{display:flex;gap:14px;padding:10px 12px;border-bottom:1px solid #e3e8ee;background:#fff}
.pv-fundo b{color:#0f1e38}
.pv-modal{position:absolute;top:16px;left:6%;right:6%;bottom:0;z-index:2;overflow:hidden;border-radius:14px 14px 0 0;
  background:#f8fafc;box-shadow:0 24px 50px rgba(2,8,23,.4);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 64px),transparent);mask-image:linear-gradient(#000 calc(100% - 64px),transparent)}
.pv-modal-topo{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#fff;
  background:linear-gradient(95deg,#17325b,#0f1e38 45%,#091326)}
.pv-modal-topo b{display:block;font-size:15px}
.pv-modal-topo small{font-size:11.5px;color:#b3c1d4}
.pv-modal-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#3b82f6,#0ea5e9);font-size:20px}
.pv-x{display:grid;place-items:center;width:30px;height:30px;margin-left:auto;border-radius:8px;background:rgba(255,255,255,.1);font-size:18px}
.pv-modal-corpo{display:grid;gap:9px;padding:14px 16px}
.pv-g4,.pv-g2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.pv-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pv-box{padding:8px 12px;border:1px solid #e5e9f0;border-radius:10px;background:#fff;font-size:12.5px}
.pv-box small{display:block;margin-bottom:3px;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#64748b}
.pv-box b{color:#111827}
.pv-pill{display:inline-block;padding:1px 9px;border-radius:999px;background:#fee2e2;color:#b91c1c;font-size:11.5px;font-weight:700}
.pv-sec{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#64748b}
.pv-sec::after{content:"";flex:1;height:1px;background:#e3e8ee}
.pv-quando{border-left:3px solid #22c55e}
.pv-quando small{color:#15803d}
.pv-quando ol{display:grid;gap:4px;padding-left:18px}
.pv-quando li::marker{font-weight:700}

/* Modelos */
.pv-intro{max-width:62ch;color:#475569}
.pv-intro b{color:#1f2a37}
.pv-grupo{display:flex;align-items:baseline;gap:8px;margin:16px 0 10px;padding-bottom:7px;border-bottom:1px solid #e3e8ee;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1e3a5f}
.pv-grupo small{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:#94a3b8}
.pv-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pv-mod{display:grid;grid-template-columns:40px 1fr;align-content:start;gap:2px 12px;padding:14px 14px 12px;border-radius:14px;
  background:#fff;box-shadow:0 0 0 1px #e3e8ee,0 2px 6px rgba(15,30,56,.05)}
.pv-mod-ico{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#e8edf3;
  color:#1a3a5c;font-size:22px}
.pv-mod b{font-size:14px;color:#111827}
.pv-mod p{font-size:12px;color:#64748b}
.pv-mod-pe{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px;border-top:1px dashed #e2e8f0;
  font-size:12px;font-weight:600;color:#475569}
.pv-padrao{padding:1px 8px;border:1px solid #fcd34d;border-radius:999px;background:#fef3c7;color:#92400e;font-size:11px;font-weight:700}
.pv-mod-pe .ms{margin-left:auto;font-size:17px;color:#94a3b8}

@media (max-width:1000px){
  .telas-in{grid-template-columns:minmax(0,1fr)}
  .telas-abas{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:700px){
  .telas-abas{grid-template-columns:1fr 1fr}
  .aba{padding:12px 14px}
  .aba span{font-size:13px}
  .pv-palco{grid-template-columns:minmax(0,1fr);height:520px}
  .pv-rail{display:none}
  .pv-tela{grid-area:1/1}
  .pv-topo{padding:0 14px}
  .pv-corpo{padding:14px}
  .pv-ficha{padding:0}
  .pv-cards,.pv-mods{grid-template-columns:minmax(0,1fr)}
  .pv-filtros{grid-template-columns:1fr 1fr}
  .pv-g4{grid-template-columns:1fr 1fr}
  .pv-modal{top:10px;left:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){.pv-tela,.pv-tela.ativa{transition:none}}

/* Fácil de verdade */
.facil-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;padding:48px;border:1px solid var(--linha);
  border-radius:20px;background:radial-gradient(60% 120% at 100% 50%,rgba(56,189,248,.14),transparent 70%),var(--sup)}
.facil-in p{max-width:60ch;margin-top:14px;font-size:1.1rem;color:var(--suave)}
.facil-icone{font-size:120px;color:rgba(56,189,248,.45)}

/* Faça a conta */
.conta-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:56px;padding:48px;
  border:1px solid var(--linha);border-radius:20px;background:var(--sup)}
.preco{display:grid}
.preco strong{font-size:clamp(3rem,7vw,5rem);line-height:1;letter-spacing:-.03em;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums}
.preco span{margin-top:6px;color:var(--suave)}
.conta-card p:not(.preco){max-width:56ch;margin-top:14px;font-size:1.1rem;color:var(--suave)}

/* Teste 7 dias grátis */
.teste{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;padding-bottom:112px}
.teste-txt p{margin-top:14px;font-size:1.1rem;color:var(--suave)}
.teste-lista{list-style:none;display:grid;gap:12px;margin-top:28px}
.teste-lista li{display:flex;align-items:center;gap:12px}
.teste-lista li::before{content:"";flex:0 0 auto;width:7px;height:13px;margin:0 6px 4px 4px;border:solid var(--ceu);
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.form{position:relative;display:grid;gap:18px;padding:32px;border:1px solid var(--linha);border-radius:20px;background:var(--sup)}
.campo-f label{display:block;margin-bottom:6px;font-size:14px;font-weight:700}
.campo-f input{width:100%;height:48px;padding:0 14px;border:1px solid rgba(148,163,184,.32);border-radius:10px;
  background:#081a31;color:var(--texto);font:inherit}
.campo-f input::placeholder{color:#7b8aa0}
.campo-f input:focus{outline:2px solid var(--ceu);outline-offset:1px;border-color:var(--ceu)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.prefixo{display:flex}
.prefixo span{display:flex;align-items:center;padding:0 12px;border:1px solid rgba(148,163,184,.32);border-right:0;
  border-radius:10px 0 0 10px;background:var(--sup-2);color:var(--suave);font-size:15px;white-space:nowrap}
.prefixo input{border-radius:0 10px 10px 0;min-width:0}
.ajuda{margin-top:6px;font-size:13px;color:var(--suave)}
.erros{display:grid;gap:4px;padding:12px 14px;border:1px solid rgba(248,113,113,.45);border-radius:10px;
  background:rgba(127,29,29,.28);color:#fecaca;font-size:14px}
.form .btn{width:100%;height:54px;font-size:17px}
.aviso{font-size:13px;color:var(--suave);text-align:center}
.isca{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Rodapé */
.rodape{border-top:1px solid var(--linha)}
.rodape-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:32px 0}
.rodape img{height:52px;width:auto}
.rodape p{font-size:14px;color:var(--suave)}

@media (max-width:900px){
  .teste,.conta-card{grid-template-columns:1fr}
  .conta-card{gap:20px}
}
@media (max-width:640px){
  .hero{padding-top:44px}
  .dupla{grid-template-columns:1fr}
  .facil-in{grid-template-columns:1fr;padding:32px}
  .facil-icone{display:none}
  .conta-card,.form{padding:28px 22px}
  .ganhos,.telas,.leis,.pagina,.facil,.conta,.teste{padding-top:80px}
  .leis-in,.pagina-in{grid-template-columns:1fr;gap:24px}
  .leis .ilustra,.pagina .ilustra{width:170px}
  .pagina .ilustra{order:-1}
  .rodape-in{flex-direction:column;text-align:center}
  .btn-sm{padding:0 14px;font-size:13px}
  .marca-txt{font-size:17px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ════════════════════════════════════════════════════════════════════
   ANIMAÇÃO DO HERO. Celular e cliente são fotos de assets/img/vendas;
   documento, contrato e o resto são HTML + CSS (sem SVG) e o GSAP só move.
   No desktop a cena escala com a largura; no celular o .mundo fica em
   tamanho de projeto e uma "câmera" enquadra só a ação da vez.
   ════════════════════════════════════════════════════════════════════ */
.cena{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:18px;background:var(--navy-2);
  border:1px solid var(--linha)}
/* camada ambiente: luz difusa que respira devagar (transform, não repinta) */
.cena::before{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(40% 45% at 30% 30%,rgba(56,189,248,.14),transparent 70%),
             radial-gradient(35% 40% at 75% 75%,rgba(20,184,166,.10),transparent 70%);
  animation:respira 18s ease-in-out infinite alternate}
@keyframes respira{to{transform:translate3d(6%,-4%,0) scale(1.08)}}

.mundo{position:absolute;left:0;top:0;width:100%;height:100%;container-type:inline-size;transform-origin:0 0}
.grupo{position:absolute;inset:0}

/* celular.jpg (896x1200): corpo em x 256-640, y 191-1006 (384x815 px), raio ~40px;
   tela em x 268-627, y 205-986. Escala: 22cqw / 384px = .0573cqw por px. */
.celular{position:absolute;left:39cqw;top:7.9cqw;width:22cqw;height:46.7cqw;padding:.8cqw .74cqw 1.15cqw .69cqw;
  border-radius:2.29cqw;box-shadow:0 2.4cqw 5cqw rgba(2,8,23,.55);
  background:url(../img/vendas/celular.jpg) -14.67cqw -10.94cqw/51.33cqw auto no-repeat}
.tela{position:relative;height:100%;overflow:hidden;border-radius:1.6cqw}
.app{position:absolute;inset:0;background:#f4f7fb;color:var(--navy)}
.furo{position:absolute;top:.9cqw;left:50%;width:1cqw;height:1cqw;margin-left:-.5cqw;border-radius:50%;background:#05070a}
.status{display:flex;justify-content:space-between;align-items:center;padding:.75cqw 1.7cqw 0;font-size:.78cqw;font-weight:700}
.bateria{display:inline-block;width:1.5cqw;height:.75cqw;margin-left:.3cqw;padding:.08cqw;vertical-align:middle;
  border:.1cqw solid currentColor;border-radius:.2cqw}
.bateria::before{content:"";display:block;width:80%;height:100%;border-radius:.08cqw;background:currentColor}
.app-topo{padding:1.9cqw 1.6cqw .4cqw}
.app-topo strong{display:block;font-size:1.2cqw}
.app-topo small{font-size:.78cqw;color:#64748b}
.visor{position:relative;height:17cqw;margin:.8cqw 1.2cqw;overflow:hidden;border-radius:1.4cqw;background:#0f172a}
.visor p{position:absolute;left:0;right:0;bottom:1cqw;text-align:center;font-size:.72cqw;color:#94a3b8}
.canto{position:absolute;width:2cqw;height:2cqw;border:.22cqw solid var(--ceu)}
.c1{top:1cqw;left:1cqw;border-right:0;border-bottom:0;border-top-left-radius:.5cqw}
.c2{top:1cqw;right:1cqw;border-left:0;border-bottom:0;border-top-right-radius:.5cqw}
.c3{bottom:1cqw;left:1cqw;border-right:0;border-top:0;border-bottom-left-radius:.5cqw}
.c4{bottom:1cqw;right:1cqw;border-left:0;border-top:0;border-bottom-right-radius:.5cqw}
.lista{display:grid;gap:.6cqw;margin:1cqw 1.2cqw 0}
.item{display:flex;justify-content:space-between;align-items:center;padding:.9cqw 1cqw;border-radius:.9cqw;
  background:#fff;font-size:.85cqw;font-weight:700;box-shadow:0 .2cqw .6cqw rgba(15,23,42,.06)}
.estado{display:inline-grid;font-size:.7cqw;font-weight:500}
.estado span{grid-area:1/1;padding:.2cqw .6cqw;border-radius:99px;background:#f1f5f9;color:#64748b;text-align:center}
.estado .ok{visibility:hidden;background:#e0f2fe;color:var(--ceu-escuro)}
.obturador{position:absolute;left:50%;bottom:2.2cqw;display:grid;place-items:center;width:4.2cqw;height:4.2cqw;
  margin-left:-2.1cqw;border:.3cqw solid var(--navy);border-radius:50%}
.obturador::after{content:"";width:3cqw;height:3cqw;border-radius:50%;background:var(--navy)}
.flash{position:absolute;left:39.69cqw;top:8.7cqw;width:20.57cqw;height:44.75cqw;border-radius:1.6cqw;
  background:#fff;visibility:hidden;opacity:0}

/* Documento: habilitação de exemplo nas cores da CNH */
.doc{position:absolute;left:6cqw;top:21cqw;width:30cqw;height:19.4cqw;padding:.35cqw;border-radius:1cqw;
  background:linear-gradient(135deg,#e6f5ec,#cbe7df);box-shadow:0 1.6cqw 3.2cqw rgba(2,8,23,.5)}
.doc-miolo{position:relative;display:grid;grid-template-columns:7.4cqw 1fr;grid-template-rows:auto 1fr;column-gap:1.3cqw;
  height:100%;padding:1.1cqw 1.3cqw;overflow:hidden;border-radius:.7cqw;color:#10231a;
  box-shadow:inset 0 0 0 .08cqw rgba(255,255,255,.6);
  background:repeating-linear-gradient(170deg,rgba(255,255,255,.35) 0 .08cqw,transparent .08cqw .5cqw),
             radial-gradient(120% 90% at 85% 15%,#f0f9f0 0,transparent 60%),
             linear-gradient(160deg,#e2f2e4,#cbe8dc 55%,#bde1e2)}
.doc-topo{grid-column:1/-1;display:flex;align-items:center;
  margin-bottom:.9cqw;padding-bottom:.6cqw;border-bottom:.1cqw solid rgba(15,106,58,.3)}
.doc-topo strong{font-size:1.05cqw;letter-spacing:.1em;color:#0f6a3a}
.doc-topo small{margin:0 .8cqw 0 auto;font-size:.55cqw;letter-spacing:.08em;color:#2f6b4f}
.br{padding:.12cqw .45cqw;border-radius:.15cqw;background:#f2d31b;color:#0f5132;
  font-size:.7cqw;font-weight:800;letter-spacing:.04em}
/* retrato 3x4 da mesma cliente do final (cliente.jpg 768x1376, recorte ~x130-670 y260-980) */
.foto{align-self:start;aspect-ratio:3/4;border:.1cqw solid rgba(28,102,70,.3);border-radius:.4cqw;
  background:url(../img/vendas/cliente.jpg) 57% 40%/142% auto no-repeat}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:.75cqw 1cqw;align-content:start}
.campo{display:grid;gap:.15cqw}
.campo.largo{grid-column:1/-1}
.campo small{font-size:.55cqw;letter-spacing:.08em;text-transform:uppercase;color:#2f6b4f}
.xis{grid-column:1/-1;margin-top:.2cqw;padding:.35cqw .5cqw;overflow:hidden;white-space:nowrap;
  border:.08cqw solid rgba(15,106,58,.35);border-radius:.2cqw;background:rgba(255,255,255,.35);
  font:500 .6cqw/1.35 'Courier New',monospace;letter-spacing:.12em;color:#3d7a5c}
.campo b{justify-self:start;margin-left:-.2cqw;padding:.05cqw .2cqw;border-radius:.2cqw;white-space:nowrap;
  font-size:.92cqw;letter-spacing:.02em;background:rgba(56,189,248,0)}
.scan{position:absolute;left:0;right:0;top:0;height:.18cqw;visibility:hidden;background:var(--ceu);
  box-shadow:0 0 1.2cqw .3cqw rgba(56,189,248,.45)}

/* Contrato e recurso (papel em CSS) */
.contrato{position:absolute;left:58cqw;top:7cqw;width:32cqw;height:45cqw;padding:2.6cqw 2.5cqw;border-radius:.35cqw;
  background:#fbfaf6;color:var(--tinta);font-family:Georgia,'Times New Roman',serif;
  box-shadow:0 1.8cqw 3.6cqw rgba(2,8,23,.5)}
.contrato h2{font-size:1.25cqw;line-height:1.3;letter-spacing:.04em;text-align:center}
.contrato .sub{margin:.4cqw 0 1.8cqw;font-size:.78cqw;font-style:italic;text-align:center;color:#5b6270}
.linha{display:flex;align-items:flex-end;gap:.6cqw;margin-bottom:1.1cqw;font-size:.78cqw;font-weight:700}
.lacuna{flex:1;min-height:1.6cqw;padding-bottom:.15cqw;border-bottom:.1cqw solid #9aa1ad}
.slot,.voo{display:inline-block;font-family:Georgia,'Times New Roman',serif;font-size:1cqw;font-weight:400;
  line-height:1.3;white-space:nowrap;color:var(--tinta)}
.slot{opacity:0}
/* cópia que voa até a lacuna; o "pill" é box-shadow pra não mexer na geometria */
.voo{position:absolute;left:0;top:0;z-index:5;visibility:hidden;border-radius:.25em;
  background:rgba(56,189,248,.22);box-shadow:0 0 0 .3em rgba(56,189,248,.22);color:var(--navy)}
.clausula{margin-top:1.4cqw;font-size:.72cqw;font-weight:700;letter-spacing:.04em}
.texto{display:grid;gap:.5cqw;margin-top:.6cqw}
.texto i{display:block;height:.42cqw;border-radius:.2cqw;background:#dcdfe5}
.texto i:nth-child(2){width:94%} .texto i:nth-child(3){width:86%} .texto i:nth-child(4){width:64%}
.valor{margin-top:.7cqw;font-size:.8cqw}
.valor b{font-size:.95cqw}
.assina{position:absolute;left:2.5cqw;right:2.5cqw;bottom:2.4cqw}
.assinatura-nome{display:block;height:2.4cqw;padding-left:1cqw;font-family:'Segoe Script','Brush Script MT',cursive;
  font-size:1.5cqw;color:#1e3a8a;clip-path:inset(0 100% 0 0)}
.assina hr{border:0;border-top:.1cqw solid #6b7280}
.assina small{display:block;margin-top:.4cqw;font-family:'DM Sans',sans-serif;font-size:.62cqw;letter-spacing:.1em;color:#5b6270}
.carimbo,.protocolo{position:absolute;right:0;bottom:3.4cqw;visibility:hidden;padding:.5cqw .8cqw;border:.18cqw solid var(--ceu-escuro);
  border-radius:.4cqw;color:var(--ceu-escuro);font:700 .66cqw/1.25 'DM Sans',sans-serif;letter-spacing:.06em;text-align:center}
.recurso{position:absolute;left:42cqw;top:8cqw;width:30cqw;height:43cqw;padding:2cqw 2.3cqw;visibility:hidden;
  border-top:.7cqw solid var(--navy);border-radius:.35cqw;background:#fbfaf6;color:var(--tinta);
  font-family:Georgia,'Times New Roman',serif;box-shadow:0 1.8cqw 3.6cqw rgba(2,8,23,.5)}
.recurso .orgao{margin-bottom:.8cqw;font-size:.7cqw;letter-spacing:.06em;color:#5b6270}
.recurso h2{margin-bottom:1.6cqw;font-size:1.2cqw;line-height:1.3;letter-spacing:.04em}
.protocolo{right:2cqw;bottom:2.2cqw}

/* Cliente (foto): começa em cinza e "acende" quando o recurso é protocolado */
.cliente{position:absolute;left:75cqw;top:15cqw;width:20cqw;display:grid;justify-items:center;gap:1cqw;
  padding:1.8cqw 1.4cqw 1.6cqw;visibility:hidden;border-radius:1.2cqw;background:#f8fafc;color:var(--navy);
  text-align:center;box-shadow:0 1.8cqw 3.6cqw rgba(2,8,23,.5)}
.cliente strong{font-size:.95cqw}
.cliente .estado{font-size:.75cqw}
.cliente-foto{width:11cqw;height:11cqw;border-radius:50%;box-shadow:0 0 0 .3cqw #fff,0 0 0 .55cqw rgba(56,189,248,.35);
  background:url(../img/vendas/cliente.jpg) 56% 32%/154% auto no-repeat;filter:grayscale(1) brightness(.9)}

/* Honorário: recibo e chuva de dinheiro (money-rain.png, 3 camadas mais largas que a
   cena; a máscara esmaece só em cima e embaixo, por onde as bordas retas passam) */
.recibo{position:absolute;left:60cqw;top:19cqw;width:27cqw;padding:2cqw 2.2cqw;visibility:hidden;border-radius:1.2cqw;
  background:#f8fafc;color:var(--navy);box-shadow:0 1.8cqw 3.6cqw rgba(2,8,23,.5)}
.recibo small{font-size:.9cqw;color:#64748b}
.recibo-valor{display:block;margin:.4cqw 0 .6cqw;font-size:3cqw;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.recibo p{font-size:.82cqw;color:#475569}
.pix{display:inline-flex;align-items:center;gap:.6cqw;margin-top:1.1cqw;padding:.4cqw .9cqw;border-radius:99px;
  background:#e0f2fe;color:var(--ceu-escuro);font-size:.75cqw;font-weight:700}
.pix::before{content:"";width:.4cqw;height:.75cqw;border:solid currentColor;border-width:0 .16cqw .16cqw 0;
  transform:rotate(45deg) translateY(-.1cqw)}
.chuva{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.maco{position:absolute;left:0;top:0;width:var(--lado);height:var(--lado);visibility:hidden;
  background:url(../img/vendas/money-rain.png?v=2) center/contain no-repeat;
  -webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.m1{--lado:112cqw} .m2{--lado:120cqw} .m3{--lado:104cqw}

/* Fecho: a marca (logo-holyfs.png, fundo escuro transparente pelo brilho) */
.marca{position:absolute;left:30cqw;top:22.45cqw;width:40cqw;aspect-ratio:750/330;visibility:hidden;
  background:url(../img/vendas/logo-holyfs.png) center/contain no-repeat}

/* Legenda dentro da cena: texto da etapa (os 5 empilhados, o GSAP mostra um) sobre
   um degradê que garante leitura */
.legenda{position:absolute;left:0;right:0;bottom:0;z-index:6;display:grid;padding:36px 28px 20px;
  background:linear-gradient(rgba(10,24,48,0),rgba(10,24,48,.92) 40%)}
.legenda p{grid-area:1/1;max-width:72ch;font-size:15px;line-height:1.45;color:var(--texto)}
.legenda p+p{visibility:hidden}   /* sem GSAP fica só a primeira */
.legenda strong{color:#fff}
/* celular: palco mais alto e mundo em tamanho de projeto (a câmera enquadra) */
@media (max-width:700px){
  .cena{aspect-ratio:2/3}.mundo{width:960px;height:600px}
  .legenda{padding:36px 18px 16px}
  .legenda p{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.cena::before{animation:none}}