/* Site público da Dominus (www.dominussistemas.com.br). CSS escrito à mão, SEM Tailwind; tokens
   copiados do painel (tailwind.config.js). Tema único, claro. Fontes locais (LGPD), servidas de
   app/static/fonts em /fonts pelo serviço `landing` do docker-compose; títulos na fonte do logo. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations")}

:root{
  --navy:#14213d; --navy-800:#16233f; --navy-900:#0e1729; --navy-100:#e6eaf0;
  --gold:#b99a61; --gold-claro:#cdb078; --gold-escuro:#7a5c29;
  --canvas:#f6f7f9; --bg:#ffffff; --fg:#0b0e14; --muted:#667080; --border:#e6e7eb;
  --success:#16a34a; --warning:#d97706; --danger:#dc2626;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-lg:.5rem; --r-xl:.75rem; --r-2xl:14px;
  --sh-panel:0 1px 3px 0 rgb(16 24 40/.06),0 1px 2px -1px rgb(16 24 40/.04);
  --sh-tela:0 18px 40px -14px rgb(14 23 41/.35);
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
  --display:"Schibsted Grotesk",var(--font); --d-peso:700; --d-esp:-.025em; --faixa:#f5efe3; --faixa-forte:#e6d9bd;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.12;text-wrap:balance;font-family:var(--display);font-weight:var(--d-peso);letter-spacing:var(--d-esp)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--navy-800);outline-offset:2px}
/* em fundo navy o contorno navy some: dourado claro */
.hero :focus-visible,.conexoes :focus-visible,.zz-item.escuro :focus-visible,.contab :focus-visible,.rodape :focus-visible{outline-color:var(--gold-claro)}
.wrap{max-width:1120px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-escuro)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.icones{display:none}
svg.i{width:1.1rem;height:1.1rem;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.75rem;padding:0 1.15rem;border-radius:var(--r-lg);font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:filter .15s,background .15s}
.btn-gold{background:linear-gradient(90deg,var(--gold-claro),var(--gold));color:var(--navy)}
.btn-gold:hover{filter:brightness(1.05)}
.btn-primary{background:var(--navy-800);color:#fff}
.btn-primary:hover{background:#1b2a4a}
.btn-outline{border-color:var(--border);background:var(--bg);color:var(--fg)}
.btn-outline:hover{background:var(--canvas)}
.btn-lg{height:3.1rem;padding:0 1.5rem;font-size:1rem}
.link-seta{font-weight:600;font-size:.95rem;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.link-seta:hover{text-decoration:underline}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:#fff}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgb(255 255 255/.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;gap:1.5rem;height:4.25rem}
.logo{display:block;width:150px;flex:none}
.logo img{display:block;width:100%;height:auto}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;font-size:.92rem;font-weight:500}
.nav-links a{text-decoration:none;color:var(--muted)}
.nav-links a:hover{color:var(--fg)}
.nav-cta{display:flex;gap:.9rem;align-items:center}
.nav-cta .entrar{font-size:.92rem;font-weight:500;text-decoration:none}
@media (max-width:860px){.nav-links{display:none}.nav-cta{margin-left:auto}.logo{width:118px}.nav .wrap{gap:.8rem}}
@media (max-width:420px){.nav-cta .btn{padding:0 .75rem;font-size:.86rem;height:2.5rem}}

/* hero */
/* foto da mesa (Pexels, Pavel Danilyuk) sob o degradê: navy firme atrás do texto, a foto aparece à direita; o navy-900 cobre enquanto ela carrega */
.hero{background:linear-gradient(90deg,rgb(14 23 41/.97),rgb(14 23 41/.9) 40%,rgb(14 23 41/.5) 75%,rgb(14 23 41/.3)),url("/img/topo-mesa.jpg") 65% center/cover var(--navy-900);color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;padding-block:4.5rem 4.5rem}
.hero h1{font-size:clamp(2.3rem,4.8vw,3.6rem);margin-top:.9rem}
.hero h1 em{font-style:normal;color:var(--gold-claro);display:block}
.hero .eyebrow{color:var(--gold-claro)}
.checks{display:grid;gap:.7rem;margin-top:1.6rem;font-size:1.06rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start}
.checks svg{width:1.3rem;height:1.3rem;flex:none;color:var(--gold-claro);margin-top:.12rem}
.hero .ctas{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:2rem}
.hero .requisito{font-size:.85rem;opacity:.7;margin-top:1rem}
.seta-baixo{position:absolute;left:50%;bottom:.9rem;translate:-50% 0;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid rgb(255 255 255/.3);display:grid;place-items:center;color:rgb(255 255 255/.75)}
@media (max-width:900px){.hero{background:linear-gradient(180deg,rgb(14 23 41/.95),rgb(14 23 41/.88) 55%,rgb(14 23 41/.6)),url("/img/topo-mesa-1200.jpg") center/cover var(--navy-900)}.hero .wrap{grid-template-columns:1fr;gap:2.6rem;padding-block:3rem 4rem}}

/* tela ilustrativa do painel (HTML, sem imagem) */
.tela{background:#fff;color:var(--fg);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-tela);overflow:hidden;overflow:clip;min-width:0;position:relative}
.tela-barra{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:var(--canvas);border-bottom:1px solid var(--border)}
.tela-barra i{width:.55rem;height:.55rem;border-radius:50%;background:#d6d9df}
.tela-barra span{margin-left:.6rem;font:500 .7rem var(--mono);color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:999px;padding:.12rem .6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tela-corpo{padding:1rem 1.1rem 1.1rem;font-size:.84rem}
.tela-cab{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:.8rem}
.tela-cab b{font-size:.95rem;font-family:var(--display);font-weight:600;letter-spacing:0}
.saldo{font-size:.75rem;color:var(--muted);background:var(--canvas);border:1px solid var(--border);border-radius:999px;padding:.15rem .6rem;white-space:nowrap}
.saldo b{font-family:var(--mono);color:var(--fg);font-size:.78rem}
.linhas{display:grid}
.linha{display:grid;grid-template-columns:3.4rem 1fr auto auto;gap:.8rem;align-items:center;padding:.55rem 0;border-top:1px solid var(--border)}
.linha .num{font-family:var(--mono);color:var(--muted);font-size:.78rem}
.linha .quem{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.linha .val{font-family:var(--mono);font-size:.8rem}
.pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.16rem .55rem;font-size:.7rem;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor}
.pill-ok{background:#e8f7ee;color:#15803d}
.pill-and{background:#fff4e0;color:#b45309}
.pill-erro{background:#fdecec;color:#b91c1c}
.pill-neutra{background:var(--navy-100);color:var(--navy-800)}
.legenda-ilus{font-size:.74rem;opacity:.65;margin-top:.7rem;text-align:right}
.hero-visual{position:relative;min-width:0}
.chip{position:absolute;left:-1rem;bottom:-1.2rem;background:var(--navy);color:#fff;border:1px solid var(--gold);border-radius:999px;padding:.45rem .85rem;font-size:.8rem;font-weight:500;box-shadow:var(--sh-panel);display:inline-flex;gap:.45rem;align-items:center;z-index:2}
.chip svg{width:1rem;height:1rem;color:var(--gold-claro)}
@media (max-width:900px){.chip{position:static;margin-top:.8rem}.hero .legenda-ilus{text-align:left}}
@media (max-width:480px){.linha{grid-template-columns:1fr auto}.linha .num,.linha .val{display:none}}

/* seções */
.secao{padding-block:5rem}
.secao.faixa{background:var(--faixa)}
/* muted padrão sobre areia fica em 4,4:1; um tom mais escuro passa de 4,5:1 */
.secao.faixa,.pacote.volume{--muted:#5a6473}
.cab-centro{text-align:center;max-width:42rem;margin:0 auto 3rem;display:grid;gap:.8rem;justify-items:center}
.cab-centro h2,.secao h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.cab-centro p{color:var(--muted);font-size:1.06rem}
@media (max-width:860px){.secao{padding-block:3.5rem}}

/* diferença */
.dif-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.dif{text-align:center;display:grid;gap:.55rem;justify-items:center;min-width:0}
.dif-ico{width:4.2rem;height:4.2rem;border-radius:50%;background:var(--faixa);border:1px solid var(--faixa-forte);display:grid;place-items:center;color:var(--navy-800);margin-bottom:.4rem}
.dif-ico svg{width:1.9rem;height:1.9rem}
.dif h3{font-size:1.12rem}
.dif p{color:var(--muted);font-size:.93rem;max-width:16rem}
@media (max-width:900px){.dif-grid{grid-template-columns:1fr 1fr;row-gap:2.5rem}}
@media (max-width:480px){.dif-grid{grid-template-columns:1fr}}

/* faixa "conectado direto a" (no lugar do "featured in") */
.conexoes{background:var(--navy-900);color:#fff}
.conexoes .wrap{padding-block:2rem;display:grid;gap:1rem;justify-items:center;text-align:center}
.conexoes .eyebrow{color:var(--gold-claro)}
.marcas{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2.6rem}
.marcas li{font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:-.01em;color:rgb(255 255 255/.9);display:flex;gap:.5rem;align-items:center}
.marcas li svg{width:1.1rem;height:1.1rem;color:var(--gold-claro)}

/* zig-zag */
.zz{display:grid;gap:5rem}
.zz-item{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
.zz-item.inverso .zz-visual{order:2}
.zz-visual{position:relative;padding:1.8rem 0 0 1.8rem;min-width:0}
.zz-visual::before{content:"";position:absolute;inset:0 2.4rem 2.4rem 0;background:var(--faixa);border:1px solid var(--faixa-forte);border-radius:var(--r-2xl)}
.zz-item.inverso .zz-visual{padding:1.8rem 1.8rem 0 0}
.zz-item.inverso .zz-visual::before{inset:0 0 2.4rem 2.4rem}
.zz-texto{min-width:0;display:grid;gap:.7rem;justify-items:start}
.zz-texto h3{font-size:clamp(1.55rem,2.8vw,2.1rem)}
.zz-texto .preco-linha{font-size:.85rem;color:var(--muted);margin-top:-.2rem}
.zz-texto .preco-linha b{color:var(--fg);font-weight:600}
.zz-texto>p{color:var(--muted);font-size:1.02rem;max-width:30rem}
.mini-checks{display:grid;gap:.45rem;margin:.3rem 0 .6rem;font-size:.95rem}
.mini-checks li{display:flex;gap:.55rem;align-items:flex-start}
.mini-checks svg{width:1.05rem;height:1.05rem;flex:none;color:var(--success);margin-top:.2rem}
.zz-item.escuro{background:linear-gradient(160deg,var(--navy-800),var(--navy-900));color:#fff;border-radius:var(--r-2xl);padding:3rem}
.zz-item.escuro .zz-visual::before{display:none}
.zz-item.escuro .zz-visual{padding:0}
.zz-item.escuro .zz-texto>p,.zz-item.escuro .preco-linha{color:rgb(255 255 255/.75)}
.zz-item.escuro .preco-linha b{color:#fff}
.zz-item.escuro .eyebrow{color:var(--gold-claro)}
.zz-item.escuro .mini-checks svg{color:var(--gold-claro)}
@media (max-width:900px){
  .zz{gap:3.5rem}
  .zz-item{grid-template-columns:1fr;gap:2rem}
  .zz-item.inverso .zz-visual{order:0}
  .zz-item.escuro{padding:1.6rem 1.2rem}
  .zz-visual,.zz-item.inverso .zz-visual{padding:1.1rem 0 0 1.1rem}
  .zz-item.escuro .zz-visual{padding:0}
  .zz-visual::before,.zz-item.inverso .zz-visual::before{inset:0 1.4rem 1.4rem 0}
}

/* conteúdo das telas do zig-zag */
.blocos{display:grid;gap:.6rem}
.bloco{display:grid;grid-template-columns:1.6rem 1fr;gap:.7rem;align-items:start;border:1px solid var(--border);border-radius:var(--r-lg);padding:.65rem .75rem}
.bloco .n{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--navy-800);color:var(--gold-claro);display:grid;place-items:center;font:600 .74rem var(--mono)}
.bloco b{display:block;font-size:.8rem;color:var(--muted);font-weight:500}
.bloco span{display:block;font-weight:500;min-width:0;overflow-wrap:anywhere}
.bloco .ok{color:#15803d;font-size:.75rem;font-weight:600}
.valores{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.2rem}
.valores div{background:var(--canvas);border-radius:6px;padding:.35rem .5rem;min-width:0}
.valores small{display:block;color:var(--muted);font-size:.68rem}
.valores span{font-family:var(--mono);font-size:.78rem}
.tela-acao{display:flex;justify-content:flex-end;margin-top:.8rem}
.tela-acao .btn{height:2.2rem;font-size:.82rem;padding:0 .9rem}
.andamento{display:grid;gap:.4rem;margin-bottom:.8rem}
.andamento-topo{display:flex;justify-content:space-between;font-size:.8rem}
.andamento-topo b{font-family:var(--mono)}
.barra{height:.5rem;border-radius:999px;background:var(--navy-100);overflow:hidden;overflow:clip}
.barra i{display:block;height:100%;width:76%;background:linear-gradient(90deg,var(--gold-claro),var(--gold));border-radius:999px}
.contagem{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.4rem}
.motivo{font-size:.75rem;color:#b91c1c}
.recebida{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.75rem;align-items:center;padding:.6rem;border:1px solid var(--border);border-radius:var(--r-lg)}
.recebida+.recebida{margin-top:.5rem}
.ladrilho{width:2.6rem;height:2.6rem;border-radius:8px;display:grid;place-items:center;font:700 .66rem var(--mono);background:var(--navy-100);color:var(--navy-800)}
.ladrilho.servico{background:#f5efe3;color:var(--gold-escuro)}
.recebida .quem{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recebida small{display:block;color:var(--muted);font-size:.74rem}
.recebida .dir{text-align:right;display:grid;gap:.25rem;justify-items:end}
.recebida .val{font-family:var(--mono);font-size:.8rem}
@media (max-width:480px){.recebida{grid-template-columns:2.6rem 1fr}.recebida .dir{grid-column:2;justify-items:start;text-align:left}}
.entregas{display:grid;gap:.5rem;margin-bottom:.9rem}
.entrega{display:flex;gap:.6rem;align-items:center;font-size:.8rem;border:1px solid var(--border);border-radius:var(--r-lg);padding:.5rem .65rem;min-width:0}
.entrega svg{width:1rem;height:1rem;color:var(--navy-800)}
.entrega span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entrega .pill{margin-left:auto}
.pacote-mes{background:var(--navy-800);color:#fff;border-radius:var(--r-lg);padding:.9rem 1rem;display:grid;gap:.6rem}
.pacote-mes b{font-family:var(--display);font-weight:600;letter-spacing:0}
.pacote-mes .nums{display:flex;gap:1.2rem;font-size:.78rem;color:rgb(255 255 255/.75);flex-wrap:wrap}
.pacote-mes .nums span b{font-family:var(--mono);color:#fff;font-size:.95rem;display:block}
.pacote-mes .btn{height:2.1rem;font-size:.8rem;justify-self:start}

/* comparação */
.tabela-wrap{overflow-x:auto;max-width:50rem;margin:0 auto}
table.compara{width:100%;min-width:30rem;border-collapse:separate;border-spacing:0;font-size:.95rem}
.compara th,.compara td{padding:.85rem 1rem;text-align:center;vertical-align:middle}
.compara thead th{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:0}
.compara tbody td{border-top:1px solid var(--faixa-forte)}
.compara td:first-child,.compara th:first-child{text-align:left;color:var(--fg)}
.compara .col-d{background:#fff;border-left:2px solid var(--navy-800);border-right:2px solid var(--navy-800);width:9.5rem}
.compara thead .col-d{border-top:2px solid var(--navy-800);border-radius:10px 10px 0 0;color:var(--navy-800)}
.compara tbody tr:last-child .col-d{border-bottom:2px solid var(--navy-800);border-radius:0 0 10px 10px}
.compara .col-o{width:11rem;color:var(--muted)}
.compara svg{width:1.25rem;height:1.25rem;color:var(--navy-800);vertical-align:middle}
.compara .nao{color:var(--muted);font-size:1.2rem}
.compara .txt{font-size:.82rem}
.compara-nota{text-align:center;color:var(--muted);font-size:.82rem;margin-top:1.2rem}

/* preços: a quantidade de cartões vem do banco (pacotes.js). Teto de 16rem para caberem 4 numa
   linha de 1120px (3 pacotes + "Alto volume") sem um cartão sozinho embaixo; com 2, centraliza. */
/* ponytail: 3 por linha (3×18,5rem + 2 vãos); com 4 ou 5 pacotes a última linha sobra à esquerda */
.pacotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),18.5rem));justify-content:center;gap:1rem;max-width:57.5rem;margin-inline:auto}
.pacote{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-panel);padding:1.6rem}
.pacote .nome{font-size:.8rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.pacote .qtd{font-family:var(--display);font-size:2.4rem;font-weight:var(--d-peso);letter-spacing:-.02em;margin-top:.5rem;font-variant-numeric:tabular-nums}
.pacote .qtd small{font-family:var(--font);font-size:1rem;font-weight:500;color:var(--muted);letter-spacing:0}
.pacote .preco{margin-top:.5rem;font-size:1.2rem;font-weight:600}
.pacote .unit{font-size:.86rem;color:var(--muted);margin-top:.15rem}
.pacote ul{margin:1.1rem 0 1.4rem;font-size:.88rem;color:var(--muted);display:grid;gap:.45rem}
.pacote li{display:flex;gap:.5rem;align-items:flex-start}
.pacote li svg{width:1rem;height:1rem;flex:none;color:var(--success);margin-top:.2rem}
.pacote .btn{margin-top:auto}
.pacote.volume{background:var(--faixa);border-color:var(--faixa-forte);border-style:dashed}
.pratica{margin:2.2rem auto 0;max-width:56rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pratica div{border-top:2px solid var(--gold);padding-top:.8rem;font-size:.92rem;min-width:0}
.pratica b{display:block;font-weight:600;margin-bottom:.2rem}
.pratica span{color:var(--muted)}
@media (max-width:860px){.pratica{grid-template-columns:1fr}}

/* atendimento (no lugar do "Meet your expert") */
.atende .wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:4rem;align-items:center}
.foto{position:relative;max-width:20rem;width:100%;justify-self:center}
.foto-vaga{aspect-ratio:4/5;border-radius:var(--r-2xl);background:linear-gradient(160deg,var(--navy-800),var(--navy-900));display:grid;place-items:center;max-width:100%}
.foto-vaga img{width:42%;height:auto;opacity:.95}
.foto figcaption{margin-top:.7rem;font-size:.88rem}
.foto figcaption b{display:block;font-family:var(--display);font-weight:600;letter-spacing:0}
.foto figcaption span{color:var(--muted)}
.atende-texto{display:grid;gap:1rem;justify-items:start;min-width:0}
.atende-texto>p{color:var(--muted);font-size:1.05rem;max-width:34rem}
.atende-ctas{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.atende-ctas .email{font-family:var(--mono);font-size:.88rem}
@media (max-width:860px){.atende .wrap{grid-template-columns:1fr;gap:2.2rem}.foto{max-width:14rem;justify-self:start}}

/* contabilidades */
.contab{background:linear-gradient(160deg,var(--navy-800),var(--navy-900));color:#fff}
.contab .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;padding-block:5rem}
.contab .eyebrow{color:var(--gold-claro)}
.contab h2{margin-top:.7rem}
.contab .lead{color:rgb(255 255 255/.8);margin-top:1rem;font-size:1.05rem}
.contab .btn{margin-top:1.6rem}
.contab ul{display:grid;gap:.9rem}
.contab li{display:flex;gap:.8rem;align-items:flex-start;background:rgb(255 255 255/.06);border:1px solid rgb(255 255 255/.12);border-radius:var(--r-lg);padding:.95rem 1rem}
.contab li svg{width:1.2rem;height:1.2rem;flex:none;color:var(--gold-claro);margin-top:.1rem}
.contab li span{color:rgb(255 255 255/.88)}
@media (max-width:860px){.contab .wrap{grid-template-columns:1fr;gap:2rem;padding-block:3.5rem}}

/* FAQ em duas colunas */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}
.faq-lado{position:sticky;top:6rem;display:grid;gap:1rem;justify-items:start}
.faq-lado p{color:var(--muted)}
.faq-lado .email{font-family:var(--mono);font-size:.88rem;color:var(--fg)}
.faq details{border-top:1px solid var(--border);padding:1.05rem 0}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--muted);font-size:1.35rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin-top:.6rem}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr;gap:2rem}.faq-lado{position:static}}

/* final */
.final .wrap{display:grid;grid-template-columns:auto 1fr;gap:3.5rem;align-items:center;max-width:58rem}
.final-ilus{width:10rem;height:auto;color:var(--navy-800)}
.final-texto{display:grid;gap:.9rem;justify-items:start}
.final-texto p{color:var(--muted)}
@media (max-width:640px){.final .wrap{grid-template-columns:1fr;gap:1.6rem}.final-ilus{width:6.5rem}}

/* rodapé */
.rodape{background:var(--navy-900);color:rgb(255 255 255/.75);font-size:.88rem}
.rodape .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem;padding-block:3rem 2rem}
.rodape .logo{width:170px}
.rodape .desc{margin-top:.8rem;max-width:22rem}
.rodape h4{margin:0 0 .7rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-claro)}
.rodape ul{display:grid;gap:.45rem}
.rodape a{text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape .legal{border-top:1px solid rgb(255 255 255/.12);padding-block:1.2rem;font-size:.8rem;color:rgb(255 255 255/.55);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
@media (max-width:760px){.rodape .wrap{grid-template-columns:1fr;gap:1.6rem}}


/* herdado das páginas de termos/privacidade e do pacotes.js */
.nav-cta.solta{margin-left:auto}
.secao-cab{max-width:40rem;margin-bottom:2.4rem}
.secao-cab h1,.secao-cab h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin-top:.6rem}
.secao-cab p{margin-top:.8rem;color:var(--muted);font-size:1.05rem}
.pacote.destaque{border-color:var(--gold);box-shadow:0 0 0 3px rgb(185 154 97/.18),var(--sh-panel)}
.pacote .selo{position:absolute;top:-.8rem;left:1.25rem;background:linear-gradient(90deg,var(--gold-claro),var(--gold));color:var(--navy);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:.25rem .65rem}
/* páginas legais (termos, privacidade): coluna de leitura */
.legal-texto{max-width:46rem;margin-bottom:2.4rem}
.legal-texto h2{font-size:1.15rem;font-weight:600;margin:2rem 0 .6rem}
.legal-texto p,.legal-texto li{line-height:1.65}
.legal-texto p+p{margin-top:.7rem}
.legal-texto ul{margin:.4rem 0 0;padding-left:1.2rem;display:grid;gap:.45rem}
.legal-texto a{color:var(--navy-800);text-decoration:underline}
.aviso-provisorio{background:#fff7e6;color:#92400e;border:1px solid #f5d79a;border-radius:var(--r-lg);padding:.7rem .9rem;font-size:.9rem}
.legenda-zz{text-align:center;color:var(--muted);font-size:.8rem;margin-top:2.5rem}

/* celular: a página não pode crescer demais em relação à v1 (9.110 px). "A diferença" vira lista
   com o ícone ao lado; o botão de cada bloco do zig-zag sai (a barra fixa já tem "Criar conta
   grátis"); as telas mais longas mostram uma linha a menos. */
@media (max-width:600px){
  .dif-grid{grid-template-columns:1fr;gap:1.5rem}
  .dif{grid-template-columns:3rem 1fr;column-gap:1rem;row-gap:.15rem;justify-items:start;align-items:start;text-align:left}
  .dif-ico{grid-row:span 2;width:3rem;height:3rem;margin:0}
  .dif-ico svg{width:1.4rem;height:1.4rem}
  .dif p{max-width:none}
  .zz-texto .btn{display:none}
  .tela .linha:nth-child(n+4),.recebida:last-child{display:none}
  table.compara{min-width:0;font-size:.85rem}
  .compara th,.compara td{padding:.7rem .45rem}
  .compara .col-d{width:5.5rem}
  .compara .col-o{width:6.5rem}
}

/* animação ao rolar (PLANO_LANDING_V2, Fase 6). A rolagem só anima com animation-timeline
   (Chrome/Edge 115+, Safari 26+); sem ele a página fica parada, como antes. A abertura do topo é
   por tempo e vale em qualquer navegador. prefers-reduced-motion (no topo) desliga tudo. */
/* o translate lateral do zig-zag abriria rolagem de lado entre 901 e ~1150px; clip não cria contêiner de rolagem, e o sticky do FAQ segue */
main{overflow-x:clip}
@keyframes surge{from{opacity:0;translate:0 32px}}
@keyframes da-esq{from{opacity:0;translate:-64px 0}}
@keyframes da-dir{from{opacity:0;translate:64px 0}}
@keyframes chega{from{opacity:0;translate:0 -10px}}
@keyframes cresce{from{opacity:0;scale:.3}}
@keyframes enche{from{scale:0 1}}
@keyframes le{to{scale:1 1}}
@keyframes carimbo{0%{opacity:0;scale:2.4}70%{opacity:1;scale:.9}to{opacity:1;scale:1}}
@keyframes sombra{to{box-shadow:0 8px 24px -12px rgb(14 23 41/.3)}}
@keyframes pulsa{50%{opacity:.3}}
.hero .tela{animation:da-dir .8s cubic-bezier(.2,.7,.2,1) .1s both}
.hero .linha{animation:chega .45s ease-out both}
.hero .linha:nth-child(1){animation-delay:.55s}
.hero .linha:nth-child(2){animation-delay:.7s}
.hero .linha:nth-child(3){animation-delay:.85s}
.hero .linha:nth-child(4){animation-delay:1s}
.hero .chip{animation:surge .5s ease-out 1.3s both}
.hero .pill-and::before{animation:pulsa 1.6s ease-in-out infinite}
@supports (animation-timeline:view()){
  /* blocos sobem ao entrar na tela; --i atrasa o vizinho da mesma linha (escada) */
  :is(.cab-centro,.dif,.marcas li,.zz-texto,.zz-visual,.tabela-wrap,.compara-nota,.legenda-zz,.pacote,.pratica div,.foto,.atende-texto,.contab .wrap>div,.contab li,.faq-lado,.faq details,.final-ilus,.final-texto){animation:surge linear both;animation-timeline:view();animation-range:cover calc(var(--i,0) * 5%) cover calc(22% + var(--i,0) * 5%)}
  /* menu: sombra ao sair do topo e barra de leitura (parada em scale 0: some sem animação) */
  .nav{animation:sombra linear both;animation-timeline:scroll(root);animation-range:0 200px}
  .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--gold-claro),var(--gold));scale:0 1;transform-origin:left;animation:le linear both;animation-timeline:scroll(root)}
  @media (min-width:901px){
    :is(.dif,.marcas li,.pacote,.pratica div):nth-child(2),.zz-texto{--i:1}
    :is(.dif,.marcas li,.pacote,.pratica div):nth-child(3){--i:2}
    :is(.dif,.marcas li,.pacote):nth-child(4){--i:3}
    .marcas li:nth-child(5){--i:4}
    .zz-item:not(.inverso) .zz-visual{animation-name:da-esq}
    .zz-item.inverso .zz-visual{animation-name:da-dir}
  }
  /* telas do zig-zag: as linhas chegam e a barra do lote enche (pede .tela e .barra em overflow:clip) */
  .zz :is(.linha,.bloco,.recebida,.entrega,.pacote-mes,.andamento,.contagem,.tela-acao){animation:chega linear both;animation-timeline:view();animation-range:cover 12% cover 30%}
  .zz .barra i{transform-origin:left;animation:enche linear both;animation-timeline:view();animation-range:cover 15% cover 45%}
  /* ✓ da tabela em escada; a linha do tempo é a da .tabela-wrap, porque ela rola de lado */
  .tabela-wrap{view-timeline:--tabela}
  .compara tbody svg{animation:cresce linear both;animation-timeline:--tabela;animation-range:cover calc(14% + var(--i,0) * 3%) cover calc(22% + var(--i,0) * 3%)}
  .compara tbody tr:nth-child(2) svg{--i:1}
  .compara tbody tr:nth-child(3) svg{--i:2}
  .compara tbody tr:nth-child(4) svg{--i:3}
  .compara tbody tr:nth-child(5) svg{--i:4}
  .compara tbody tr:nth-child(6) svg{--i:5}
  /* carimbo do selo na ilustração final */
  .final-ilus{view-timeline:--final}
  .final-ilus :is(circle,path:last-child){transform-box:fill-box;transform-origin:center;animation:carimbo linear both;animation-timeline:--final;animation-range:cover 25% cover 45%}
}