:root{
  --marinho:#0A1628;--aco:#3E5C91;--aco-claro:#8FA8D4;--nevoa:#E3E9F3;--apoio:#4A5A73;--gelo:#F3F5F8;--cartao:#13233D;
  /* Marcaí em Lima só nesta prévia: nos sites e nas logos ele segue âmbar até a troca de cores (?cor=b|c mostra as opções) */
  --marcai:#A8CF2E;--on-marcai:var(--marinho);--consultai:#00CDB5;--divulgai:#8FA8D4;--contai:#E89B0C;
  --tx:var(--marinho);--tx2:var(--apoio);--bg:var(--gelo);
  --sai:cubic-bezier(.16,1,.3,1);
  /* mola em CSS: passa um pouco do ponto e assenta */
  --mola:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
}
/* sobre o marinho: texto gelo, apoio em aço claro, e os recortes do símbolo ficam marinho */
body.escuro{--tx:var(--gelo);--tx2:var(--aco-claro);--bg:var(--marinho)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{font-size:clamp(16px,.62vw + 8px,20px)}
body{font-family:"Red Hat Text",system-ui,sans-serif;background:var(--gelo);color:var(--tx);line-height:1.4;overflow-x:hidden}
h1,h2,.grande,.nome{font-family:"Red Hat Display",sans-serif;letter-spacing:-.03em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--tx);outline-offset:3px;border-radius:.4rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* o marinho nasce no balão e se espalha; sobre ele, só a cor do produto */
.lav{position:fixed;inset:0;z-index:0;pointer-events:none}
.lav>div{position:absolute;inset:0;background:var(--marinho)}

.pagina{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100svh;padding:0 1rem .6rem;max-width:96rem;margin:0 auto;transition:opacity .3s}
body.saindo .pagina{opacity:0}
header{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;flex:none}
.logo{position:relative;display:block}
.logo svg{display:block;height:2.1rem;width:auto;transition:opacity .25s .12s}
.logo .ng{position:absolute;inset:0;opacity:0}
body.escuro .logo .ng{opacity:1}body.escuro .logo .cl{opacity:0}
.zap{font-size:.82rem;color:var(--tx2);text-decoration:underline;text-underline-offset:.2em;min-height:40px;padding:0 .6rem;display:inline-flex;align-items:center;white-space:nowrap}
.volta{display:none;font-size:.82rem;color:var(--tx2);text-decoration:underline;text-underline-offset:.2em;min-height:40px;padding:0 .6rem}
body.aberto .volta{display:inline-block}

.tela{flex:1;min-height:0;display:flex;flex-direction:column}

/* topo: o título e, com um produto em foco, a frase dele no mesmo lugar */
.tit{position:relative;z-index:3;display:grid;text-align:center;padding-top:.5rem;flex:none}
.tit>*{grid-area:1/1}
/* quem sai some rápido, quem entra vem depois: as duas frases nunca aparecem por cima uma da outra */
.tit-0{transition:opacity .24s .1s,transform .36s var(--sai) .1s}
body.aberto .tit-0{opacity:0;transform:translateY(-12px);transition:opacity .12s,transform .12s}
.tit-p{opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .12s,transform .12s}
.tit-p[data-on]{opacity:1;transform:none;transition:opacity .24s .1s,transform .36s var(--sai) .1s}
.grande{max-width:min(100%,58rem);margin-inline:auto;text-wrap:balance;font-weight:900;line-height:1.04;font-size:clamp(1.8rem,3.2vw,2.75rem);transition:color .25s .14s}
.orienta{font-size:1.08rem;font-weight:500;margin-top:.5rem;transition:color .25s .14s}
.mouse{display:none}
@media (hover:hover) and (pointer:fine){.mouse{display:inline}.toque{display:none}}

/* palco: o símbolo grande; parado, com a hora e o número embaixo; aberto, de lado e maior, com a prévia ao lado */
.palco{position:relative;flex:1;min-height:0}
.simbolo{--s:min(36vh,24rem);position:absolute;left:50%;top:0;width:var(--s);height:var(--s);margin-left:calc(var(--s)/-2);perspective:900px}
.olhar{width:100%;height:100%}
.stage{width:100%;height:100%}
.stage svg{width:100%;height:100%;display:block;overflow:visible}
.pc{transition:fill .28s,stroke .2s}

.vivo{position:absolute;left:0;right:0;top:var(--vivo-top,70%);text-align:center;transition:opacity .22s,transform .34s var(--sai)}
body.aberto .vivo{opacity:0;transform:translateY(16px);pointer-events:none}
.hora{font-size:1.08rem;line-height:1.35;margin-bottom:.25rem}
.num{font-size:1.08rem}
.num b{font-family:"Red Hat Display",sans-serif;font-weight:900;font-size:2.9rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;vertical-align:-.08em;margin-right:.1rem}
.fonte{font-size:.85rem;color:var(--tx2)}

/* prévia: a conversa aparece mensagem por mensagem; o texto entra em cascata */
.paineis{position:absolute;left:calc(50% + 1.8rem);top:0;bottom:0;width:min(25rem,calc(50% - 2.2rem));display:grid;align-content:safe center;pointer-events:none}
.paineis article{grid-area:1/1;align-self:safe center;opacity:0;transform:translateX(18px);transition:opacity .18s,transform .18s}
.paineis article[data-on]{opacity:1;transform:none;pointer-events:auto;transition:opacity .24s .1s,transform .4s var(--sai) .1s}
/* só o painel ativo define a altura da grade; os outros não empurram o ativo para baixo */
@media (min-width:1100px){.paineis article:not([data-on]){position:absolute;left:0;right:0;top:50%;translate:0 -50%}}
.chat{display:grid;gap:.42rem;padding:.75rem .85rem .6rem;background:var(--cartao);border-radius:1.1rem;margin-bottom:.85rem}
.cab{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;color:var(--aco-claro);padding-bottom:.2rem}
.cab b{font-family:"Red Hat Display",sans-serif;font-size:.95rem;color:var(--gelo)}
.linha{display:grid;min-height:1.95rem}
.linha>*{grid-area:1/1}
.linha.eu{justify-items:end}.linha.bot{justify-items:start}
.msg{max-width:88%;padding:.42rem .75rem;border-radius:1rem 1rem 1rem .25rem;font-size:.93rem;line-height:1.3;background:var(--c);color:var(--on);opacity:0;transform:scale(.94) translateY(6px);transform-origin:0 100%}
.linha.eu .msg{background:var(--nevoa);color:var(--marinho);border-radius:1rem 1rem .25rem 1rem;transform-origin:100% 100%}
.linha.ve .msg{opacity:1;transform:none;transition:opacity .14s,transform .36s var(--mola)}
.digita{display:inline-flex;gap:.26rem;align-items:center;align-self:end;padding:.56rem .7rem;background:#1E3350;border-radius:1rem 1rem 1rem .25rem;opacity:0;transform:scale(.92);transform-origin:0 100%}
.linha.pensa .digita{opacity:1;transform:none;transition:opacity .12s,transform .3s var(--mola)}
.digita i{width:.42rem;height:.42rem;border-radius:50%;background:var(--aco-claro);animation:digita 1s ease-in-out infinite}
.digita i:nth-child(2){animation-delay:.15s}.digita i:nth-child(3){animation-delay:.3s}
@keyframes digita{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.ilustra{font-size:.7rem;color:var(--aco-claro);text-align:center;padding-top:.15rem}
.curto{font-size:1.2rem;line-height:1.45;font-weight:500;margin-bottom:.8rem}
.canais{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.canais li{padding:.26rem .7rem;border-radius:999px;background:var(--cartao);color:var(--gelo);font-size:.86rem;font-weight:500;opacity:0;transform:translateY(8px)}
article[data-on] .canais li{opacity:1;transform:none;transition:opacity .2s,transform .4s var(--mola);transition-delay:calc(.26s + var(--i,0)*50ms)}
.canais li:nth-child(2){--i:1}.canais li:nth-child(3){--i:2}.canais li:nth-child(4){--i:3}.canais li:nth-child(5){--i:4}.canais li:nth-child(6){--i:5}
.dica{font-size:.98rem;font-weight:700;color:var(--c)}
/* encaixe por altura (home.js): c1 tira número, rótulo e cabeçalho da conversa; c2 tira a conversa e os canais */
.c1 .num-p,.c1 .ilustra,.c1 .chat .cab{display:none}
.c1 .chat{padding:.5rem .65rem;gap:.28rem;margin-bottom:.55rem}
.c2 .chat,.c2 .canais{display:none}
.lg-p{font-size:1.2rem;line-height:1.35;font-weight:700;margin-bottom:.7rem}
.num-p{font-size:.95rem;color:var(--tx2);margin:-.25rem 0 .75rem}
.num-p b{font-family:"Red Hat Display",sans-serif;font-weight:900;font-size:1.7rem;color:var(--c);margin-right:.25rem;font-variant-numeric:tabular-nums;vertical-align:-.06em}
.acao{min-height:46px;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .22s,transform .45s var(--mola)}
article[data-pronto] .acao{opacity:1;transform:none;pointer-events:auto}
.breve{display:inline-block;padding:.22rem .75rem;border-radius:999px;background:var(--c);color:var(--on);font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}

/* animações próprias de cada símbolo; todas têm pausa no ciclo e param com "Pausar movimento" */
.respira #pv{animation:subida 7s ease-in-out 2s infinite}
@keyframes subida{0%,72%,100%{translate:0 0}80%{translate:0 -4px}88%{translate:0 .8px}94%{translate:0 0}}
.onda{fill:none;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.onda.vai{animation:onda .8s var(--sai) forwards}
@keyframes onda{from{opacity:.75;transform:scale(.55)}to{opacity:0;transform:scale(1.45)}}
/* Marcaí: a sombra recolhe atrás do ✓ e volta pra fora, com uma sobra */
.sombra #pernas{animation:sombra 4.6s cubic-bezier(.45,0,.2,1) 1s infinite}
@keyframes sombra{0%,46%{transform:translateX(0)}56%{transform:translateX(10px)}64%{transform:translateX(10px)}76%{transform:translateX(-2.5px)}84%,100%{transform:translateX(0)}}
/* Consultaí: o traço corre pela linha e, quando passa pelo pico, o pulso bate */
.ecg{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:.16 1;stroke-dashoffset:.16;opacity:0}
.bate .ecg{animation:ecg 2.8s linear infinite}
@keyframes ecg{0%{stroke-dashoffset:.16;opacity:0}5%{opacity:.95}60%{stroke-dashoffset:-1;opacity:.95}66%,100%{stroke-dashoffset:-1;opacity:0}}
.bate .pecas{animation:bate 2.8s ease-in-out infinite;transform-box:view-box;transform-origin:50% 50%}
@keyframes bate{0%,20%,100%{transform:scale(1)}27%{transform:scale(1.09)}35%{transform:scale(.98)}43%,100%{transform:scale(1)}}
/* Divulgaí: o pino dá um pulinho e o sinal se espalha pelo chão */
.anel{fill:none;stroke:var(--divulgai);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.ecoa .anel{animation:anel 3.8s ease-out infinite}.ecoa .anel+.anel{animation-delay:.42s}
@keyframes anel{0%{opacity:.85;transform:scale(.3)}38%,100%{opacity:0;transform:scale(1.55)}}
.ecoa #pd,.ecoa #pv{animation:pino 3.8s 1s ease-in-out infinite}
@keyframes pino{0%,62%{translate:0 0}70%{translate:0 -7px}78%{translate:0 0}83%{translate:0 -2px}88%,100%{translate:0 0}}
/* Contaí: o V sai, volta de cima e entra na nota; as moedinhas caem junto e a nota assenta */
.nota #pv{transform-box:fill-box;transform-origin:center;animation:entra 4s ease-in-out .6s infinite}
@keyframes entra{0%,44%{translate:0 0;scale:1;opacity:1}52%,56%{translate:0 -46px;scale:2.1;opacity:0}70%{translate:0 2px;scale:.88;opacity:1}78%{translate:0 0;scale:1.1;opacity:1}86%,100%{translate:0 0;scale:1;opacity:1}}
.moeda{fill:var(--contai);opacity:0}
.nota .moeda{animation:moeda 4s ease-in .6s infinite}
.nota .moeda:nth-of-type(2){animation-delay:.72s}.nota .moeda:nth-of-type(3){animation-delay:.84s}
@keyframes moeda{0%,54%{opacity:0;transform:translateY(-12px)}60%{opacity:1}72%{opacity:1;transform:translateY(20px)}76%,100%{opacity:0;transform:translateY(24px)}}
.nota #pd,.nota #pe,.nota #ex{animation:assenta 4s ease-in-out .6s infinite}
@keyframes assenta{0%,68%{translate:0 0}73%{translate:0 3px}82%,100%{translate:0 0}}
body.pausado *,body.pausado *::before,body.pausado *::after{animation-play-state:paused!important}

/* produtos: balões redondos, só com símbolo e nome; legenda e botão vêm no painel, depois do toque */
.produtos{flex:none;display:flex;justify-content:center;gap:var(--gap-b,1.1rem);padding-top:.6rem}
.bal{--f:var(--c);--d:var(--db,5rem);position:relative;flex:none;width:var(--d);height:var(--d);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--d)*.03);padding:0 0 calc(var(--d)*.04);
  background:var(--f);color:var(--on);border-radius:50% 50% 50% 18%;cursor:pointer;transition:opacity .3s,box-shadow .3s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
body.aberto .bal:not([data-ativo]){opacity:.55}
.bal[data-ativo]{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--c)}
.bal:focus-visible{outline:3px solid var(--tx);outline-offset:6px}
.bal svg{width:calc(var(--d)*.4);height:calc(var(--d)*.4);flex:none;overflow:visible}
.bal .nome{font-weight:800;font-size:calc(var(--d)*.15);line-height:1.1}
.bal .selo{position:absolute;top:calc(var(--d)*-.07);right:calc(var(--d)*-.1);padding:.08rem .42rem;border-radius:999px;background:var(--marinho);color:var(--nevoa);font-family:"Red Hat Text",sans-serif;font-size:max(.5rem,calc(var(--d)*.095));font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;white-space:nowrap;box-shadow:0 0 0 2px var(--bg)}
/* o ícone não troca: só um detalhe dele faz um gesto enquanto o balão está ativo */
.bal svg g,.bal svg polygon,.bal svg polyline{transform-box:fill-box;transform-origin:center}
.bal[data-ativo] .g-sombra{animation:g-sombra 2.4s cubic-bezier(.45,0,.2,1) infinite}
@keyframes g-sombra{0%,8%{transform:translateX(0)}30%,42%{transform:translateX(10px)}62%{transform:translateX(-2px)}74%,100%{transform:translateX(0)}}
.bal[data-ativo] .g-pulso{animation:g-pulso 1.5s ease-in-out infinite}
@keyframes g-pulso{0%,45%,100%{transform:scale(1)}58%{transform:scale(1.2)}72%{transform:scale(.95)}86%{transform:scale(1)}}
.bal[data-ativo] .g-pino{animation:g-pino 2.1s ease-in-out infinite}
@keyframes g-pino{0%,18%{transform:translateY(0)}32%{transform:translateY(-10px)}46%{transform:translateY(0)}54%{transform:translateY(-3px)}64%,100%{transform:translateY(0)}}
.bal[data-ativo] .g-visto{animation:g-visto 2.6s ease-in-out infinite}
@keyframes g-visto{0%{transform:translateY(-34px) scale(1.9);opacity:0}30%{transform:translateY(2px) scale(.9);opacity:1}42%{transform:translateY(0) scale(1.1)}55%,100%{transform:translateY(0) scale(1);opacity:1}}
.g-moeda{opacity:0}
.bal[data-ativo] .g-moeda{animation:g-moeda 2.6s ease-in infinite}
.bal[data-ativo] .g-moeda:nth-of-type(2){animation-delay:.1s}.bal[data-ativo] .g-moeda:nth-of-type(3){animation-delay:.2s}
@keyframes g-moeda{0%,24%{opacity:0;transform:translateY(-14px)}32%{opacity:1}46%{opacity:1;transform:translateY(16px)}54%,100%{opacity:0;transform:translateY(20px)}}

.rodape{flex:none;display:flex;justify-content:center;flex-wrap:wrap;column-gap:.4rem}
.pausa{font-size:.82rem;color:var(--tx2);text-decoration:underline;text-underline-offset:.2em;min-height:40px;padding:0 .6rem;transition:color .25s .14s}

.zona{display:contents}
:root{--db:clamp(6.2rem,11.5vh,8rem)}

/* tela baixa de notebook: tudo encolhe um pouco para caber sem rolar */
@media (min-width:1100px) and (max-height:760px){
  header{padding:.5rem 0}
  .grande{font-size:clamp(1.6rem,2.8vw,2.3rem)}.orienta{font-size:1rem;margin-top:.3rem}
  .hora,.num{font-size:.98rem}.num b{font-size:2.3rem}.fonte{font-size:.78rem}
  .simbolo{--s:min(32vh,21rem)}
  .lg-p{font-size:1.05rem;margin-bottom:.45rem}.num-p,.ilustra{display:none}
  .chat{padding:.55rem .7rem;gap:.3rem;margin-bottom:.6rem}.linha{min-height:1.75rem}
  .rodape .pausa{min-height:30px}
}
/* notebook bem baixo (até ~620 px): balões e título menores para o painel caber */
@media (min-width:1100px) and (max-height:620px){
  :root{--db:clamp(4.6rem,10vh,5.4rem)}
  .grande{font-size:clamp(1.4rem,2.4vw,1.9rem)}
  .lg-p{font-size:1rem}
}
@media (min-width:1100px){
  body.home{overflow:hidden}
  .pagina{position:fixed;inset:0;min-height:0;padding:0 2.5rem .5rem}
  .produtos{padding-bottom:.4rem}
}

/* celular e tablet: título curto, símbolo, os 4 balões redondos; o texto e o botão vêm num painel embaixo, depois do toque */
@media (max-width:1099px){
  :root{--db:min(4.9rem,21.5vw);--gap-b:.5rem}
  .tit{text-align:center}
  .grande{font-size:clamp(1.45rem,6.2vw,2.1rem)}
  .tit-p{display:none}
  .orienta{font-size:.98rem;margin-top:.35rem}
  .palco{display:contents}
  .simbolo{--s:min(22vh,11.5rem);position:relative;left:auto;top:auto;margin:.6rem auto .5rem;order:1}
  .produtos{order:2}
  .zona{order:3;display:grid;margin-top:.7rem}
  .zona>*{grid-area:1/1}
  .rodape{order:4;flex-wrap:nowrap;column-gap:0}
  .rodape button,.rodape .zap{font-size:.76rem;min-height:34px;padding:0 .45rem}
  .vivo{position:relative;top:auto;text-align:center;align-self:start}
  .num,.fonte{display:none}
  .paineis{position:static;width:auto;max-width:34rem;margin:0 auto;transform:none;display:block}
  .paineis article{display:none;transform:none}
  .paineis article[data-on]{display:block;border-top:3px solid var(--c);padding-top:.7rem}
  body.aberto .tit{display:none}
  body.aberto .simbolo{--s:min(16vh,8.5rem)}
  body.aberto .vivo{display:none}
  .lg-p{font-size:1.02rem}
  .curto{font-size:1rem}
  .canal{display:none}
  header{gap:.5rem}
  .logo svg{height:1.85rem}
}
@media (min-width:640px) and (max-width:1099px){
  :root{--db:6.6rem;--gap-b:1.1rem}
  .simbolo{--s:min(24vh,15rem)}
  body.aberto .simbolo{--s:min(17vh,11rem)}
  .paineis{max-width:30rem}
}
/* celular baixo: só o que cabe */
@media (max-width:1099px) and (max-height:760px){
  .lg-p{margin-bottom:.45rem}
  .num-p,.ilustra,.cab{display:none}
  .chat{padding:.5rem .6rem;gap:.28rem;margin-bottom:.5rem}
  .linha{min-height:1.7rem}.msg{font-size:.86rem;padding:.34rem .65rem}
  .canais{display:none}
  body.aberto .simbolo{--s:min(13vh,6.5rem)}
  .simbolo{--s:min(17vh,9rem)}
}

/* sem movimento: a mesma página, parada e completa */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .msg{opacity:1;transform:none}
  .digita{display:none}
  .canais li{opacity:1;transform:none}
  .acao{opacity:1;transform:none;pointer-events:auto}
}

/* Ícone de WhatsApp no cabeçalho da home (só ícone, sem Voltar). Acrescentado no vertical-site, não está em previas\home-v10. */
.zapi{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;border-radius:50%;color:#0A1628}
.zapi svg{width:26px;height:26px;padding:5px;box-sizing:border-box;border-radius:50%;background:#0A1628;fill:none;stroke:#F3F5F8;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.zapi:hover svg{background:#3E5C91}
.zapi:focus-visible{outline:2px solid #3E5C91;outline-offset:1px}
body.escuro .zapi svg{background:#F3F5F8;stroke:#0A1628}
body.escuro .zapi:hover svg{background:#E3E9F3}
body.escuro .zapi:focus-visible{outline-color:#F3F5F8}