/* ---------- O topo: a barra flutuante (a ilha) ---------- */
/* uma pílula de vidro do tamanho do que ela carrega: a marca, a navegação, um fio e as ações. Sem vão no meio.
   O movimento: ela nasce pequena no centro e se abre; os itens chegam em sequência; ao descer, ela se compacta;
   e na borda de baixo um fio de luz (o sol → a folha) mede o quanto da página já foi lido. */
.topo{--h:64px;position:fixed;z-index:50;top:16px;left:50%;translate:-50% 0;width:max-content;max-width:calc(100% - 24px);
  display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);min-height:var(--h);padding:8px 8px 8px 24px;border-radius:999px;
  background:rgb(18 30 42 / .55);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgb(255 255 255 / .1);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 20px 50px -20px rgb(0 0 0 / .65);
  transition:min-height .5s var(--ease),padding .5s var(--ease),background .5s var(--ease),top .5s var(--ease),gap .5s var(--ease)}
.topo.descido{--h:56px;top:12px;padding:6px 6px 6px 20px;gap:clamp(10px,1.2vw,20px);background:rgb(12 22 32 / .78)}
/* o fio de leitura: preso à parte reta da borda de baixo */
.topo::after{content:"";position:absolute;left:calc(var(--h) / 2);right:calc(var(--h) / 2);bottom:-1px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--sol),var(--folha));box-shadow:0 0 10px rgb(255 198 26 / .55);transform-origin:left;transform:scaleX(var(--lido,0));opacity:.9}
/* a abertura: a ilha nasce do centro e os itens chegam em fila */
.js .topo{animation:t-ilha 1s cubic-bezier(.2,.9,.2,1) .1s backwards}
@keyframes t-ilha{from{clip-path:inset(0 calc(50% - 32px) round 999px);opacity:0}40%{opacity:1}}
.js .topo > :is(.topo__marca,.topo__fio,.topo__acoes),.js .topo__nav a{animation:t-item .7s var(--ease) backwards}
.js .topo__marca{animation-delay:.55s}
.js .topo__nav a:nth-of-type(1){animation-delay:.62s}.js .topo__nav a:nth-of-type(2){animation-delay:.68s}.js .topo__nav a:nth-of-type(3){animation-delay:.74s}.js .topo__nav a:nth-of-type(4){animation-delay:.8s}
.js .topo__fio{animation-delay:.86s}.js .topo__acoes{animation-delay:.92s}
@keyframes t-item{from{opacity:0;translate:0 8px;filter:blur(4px)}}

.topo__marca{display:block;flex:none;border-radius:10px}
.topo__marca img{height:42px;width:auto;display:block;transition:height .5s var(--ease)}
.topo.descido .topo__marca img{height:36px}

/* a navegação: os links claros e a luz de vidro que corre até a seção da vez (e segue o mouse) */
.topo__nav{position:relative;display:flex;align-items:center;gap:2px}
.topo__nav a{position:relative;z-index:1;padding:10px 15px;border-radius:999px;font:500 15px/1 var(--texto);color:rgb(255 255 255 / .66);white-space:nowrap;transition:color .3s var(--ease)}
.topo__nav a:hover,.topo__nav a[aria-current=true]{color:#fff}
.topo__luz{position:absolute;z-index:0;top:0;bottom:0;left:0;width:0;border-radius:999px;background:rgb(255 255 255 / .1);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08);
  opacity:0;transition:translate .55s cubic-bezier(.3,1.3,.4,1),width .55s cubic-bezier(.3,1.3,.4,1),opacity .3s var(--ease)}
.topo__fio{flex:none;width:1px;height:22px;background:rgb(255 255 255 / .14)}

/* as ações: o portal discreto (ícone e texto) e o CTA de sol, com a seta num círculo que gira ao passar o mouse */
.topo__acoes{display:flex;align-items:center;gap:6px}
.topo__portal{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;font:500 15px/1 var(--texto);color:rgb(255 255 255 / .78);white-space:nowrap;transition:color .3s var(--ease),background .3s var(--ease)}
.topo__portal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.topo__portal:hover{color:#fff;background:rgb(255 255 255 / .06)}
.topo__cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 6px 0 20px;border-radius:999px;background:var(--sol);color:#081320;
  font:700 15px/1 var(--texto);white-space:nowrap;box-shadow:0 8px 22px -10px rgb(255 198 26 / .75);transition:min-height .5s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.topo.descido .topo__cta{min-height:42px}
.topo__cta i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#081320;color:var(--sol);transition:transform .45s cubic-bezier(.3,1.5,.5,1),width .5s var(--ease),height .5s var(--ease)}
.topo.descido .topo__cta i{width:30px;height:30px}
.topo__cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* o brilho que atravessa o botão ao passar o mouse */
.topo__cta::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .55) 50%,transparent 70%);translate:-120% 0;transition:translate .7s var(--ease)}
.topo__cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgb(255 198 26 / .9)}
.topo__cta:hover::before{translate:120% 0}
.topo__cta:hover i{transform:rotate(45deg)}
.topo__cta > *{position:relative}

/* o menu do estreito: 2 traços que viram um ×, e a gaveta de vidro que abre embaixo da ilha */
.topo__menu{display:none;position:relative;flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgb(255 255 255 / .1);background:rgb(255 255 255 / .06);cursor:pointer}
.topo__menu i{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#fff;transition:transform .4s var(--ease),top .4s var(--ease)}
.topo__menu i:first-child{top:18px}.topo__menu i:last-child{top:26px}
.topo__menu[aria-expanded=true] i:first-child{top:22px;transform:rotate(45deg)}
.topo__menu[aria-expanded=true] i:last-child{top:22px;transform:rotate(-45deg)}
.topo__gaveta{position:absolute;left:0;right:0;top:calc(100% + 10px);display:grid;padding:10px;border-radius:28px;
  background:rgb(12 22 32 / .94);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgb(255 255 255 / .1);box-shadow:0 30px 60px -20px rgb(0 0 0 / .7);
  transform-origin:top center;animation:t-gaveta .45s cubic-bezier(.3,1.2,.4,1) both}
.topo__gaveta[hidden]{display:none}
@keyframes t-gaveta{from{opacity:0;transform:translateY(-8px) scale(.97)}}
.topo__gaveta a{padding:15px 18px;border-radius:18px;font:600 19px/1.2 var(--manchete);color:#fff;letter-spacing:-.01em;animation:t-item .5s var(--ease) backwards}
.topo__gaveta a:nth-child(2){animation-delay:.04s}.topo__gaveta a:nth-child(3){animation-delay:.08s}.topo__gaveta a:nth-child(4){animation-delay:.12s}.topo__gaveta a:nth-child(5){animation-delay:.16s}
.topo__gaveta a:hover,.topo__gaveta a:focus-visible{background:rgb(255 255 255 / .07)}
.topo__gaveta-portal{display:flex;align-items:center;justify-content:space-between;margin-top:6px;border-top:1px solid rgb(255 255 255 / .08);border-radius:0 0 18px 18px!important;color:var(--sol)!important;font:600 16px/1.2 var(--texto)!important}
.topo__gaveta-portal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

@media (max-width:1180px){.topo__portal{font-size:0;gap:0;padding:11px}.topo__portal svg{width:20px;height:20px}}
@media (max-width:1000px){
  .topo{width:calc(100% - 24px);justify-content:space-between;padding:7px 7px 7px 18px}
  .topo__nav,.topo__fio,.topo__portal{display:none}
  .topo__menu{display:block}
}
@media (max-width:520px){
  .topo{top:10px;--h:58px}
  .topo__marca img{height:36px}
  .topo__cta{min-height:42px;padding:0 5px 0 14px;gap:8px;font-size:14px}
  .topo__cta i{width:30px;height:30px}
}

/* ---------- O WhatsApp flutuante ---------- */
/* o círculo verde no canto, mais contido: o anel respira 3 vezes e para; o rótulo se abre ao passar o mouse (e uma vez, sozinho) */
.zap{position:fixed;z-index:49;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);display:flex;align-items:center;justify-content:flex-end;
  height:54px;border-radius:999px;background:#25d366;color:#fff;box-shadow:0 10px 26px -10px rgb(37 211 102 / .7),0 2px 8px rgb(0 0 0 / .25);
  transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s var(--ease)}
.zap__ic{display:grid;place-items:center;width:54px;height:54px;flex:none}
.zap__ic svg{width:27px;height:27px}
.zap__rotulo{max-width:0;overflow:hidden;white-space:nowrap;font:700 14.5px/1 var(--texto);padding-left:0;opacity:0;transition:max-width .5s var(--ease),padding .5s var(--ease),opacity .3s var(--ease)}
.zap:hover .zap__rotulo,.zap.aberto .zap__rotulo{max-width:170px;padding-left:20px;opacity:1}
.zap:hover{transform:translateY(-2px)}
.zap::before{content:"";position:absolute;right:0;top:0;width:54px;height:54px;border-radius:50%;border:2px solid #25d366;opacity:0;animation:z-anel 2.8s var(--ease) 2s 3;pointer-events:none}
@keyframes z-anel{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.5);opacity:0}}
.js .zap{animation:z-entra .7s cubic-bezier(.3,1.5,.5,1) 1.4s both}
@keyframes z-entra{from{opacity:0;transform:scale(.4) translateY(20px)}}
@media (max-width:520px){.zap{height:52px}.zap__ic{width:52px;height:52px}.zap::before{width:52px;height:52px}}

/* as âncoras: cada dobra ocupa a tela e a ilha flutua por cima, então a parada é no topo da dobra; a viagem é macia (com o movimento liberado) */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.js .topo,.js .topo > :is(.topo__marca,.topo__fio,.topo__acoes),.js .topo__nav a,.js .zap,.zap::before,.topo__gaveta,.topo__gaveta a{animation:none}.topo__luz,.zap__rotulo,.topo,.topo__cta::before{transition:none}}