/* =====================================================================
   Fluidez e acabamento (06/10/2026). Carregado por último.
   Aviso de cookies novo, rolagem estável no celular, bússola presa na
   tela em "Como nós trabalhamos", roda de serviços sem desfoque no
   celular e animações que param fora da tela.
   A janela do teste fica em css/momento.css.
   ===================================================================== */

/* ---------- Rolagem estável no celular ----------
   dvh muda quando a barra de endereço do celular aparece ou some. Nas seções
   altas (início e roda de serviços, de 3 a 4 telas de altura) isso fazia tudo
   abaixo pular uns 200px no meio da rolagem. svh não muda. */
@supports (height: 1svh) {
  .HomeHero { height: 300svh; }
  .HomeHero__ancora { top: 145svh; }
  .Frentes { height: calc(100svh + var(--n) * 55svh); }
  @media (min-width: 768px) {
    .HomeHero { height: 340svh; }
    .HomeHero__ancora { top: 172svh; }
    .Frentes { height: calc(100svh + var(--n) * 62svh); }
  }
}
/* o 3D do início ocupa a altura maior da tela: a barra do celular indo e vindo não
   obriga a refazer o canvas (o palco corta o que sobra) */
@supports (height: 1lvh) {
  .HomeHero__canvasWrap { bottom: auto; height: 100lvh; }
}
/* a barra de rolagem não some ao abrir a janela do teste (a página não "pula" para o lado) */
html { scrollbar-gutter: stable; }
html.teste-aberto, html.teste-aberto.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Menos trabalho para a placa de vídeo no celular ----------
   Desfoque de fundo (backdrop-filter) por cima de coisas que se mexem é refeito a
   cada quadro. Nas telas de toque, fundos sólidos com o mesmo tom. */
@media (hover: none) {
  [data-nav-theme="light"] .Header__bar { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.MobileMenu.Menu2 { -webkit-backdrop-filter: none; backdrop-filter: none; }
.Frentes__chip { background: rgba(20, 7, 61, .62); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Roda de serviços no tablet e no celular: o cartão do texto fica sólido. Translúcido,
   a imagem que passa por trás aparecia fatiada na borda dele. */
@media (max-width: 1023px) {
  .Frentes__infos {
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: #ECE8F8;
    box-shadow: 0 28px 56px -30px rgba(47, 28, 106, .5), 0 2px 8px rgba(47, 28, 106, .06);
  }
}

/* Rodapé no celular: o brilho em volta do cartão fica menor e cabe no espaço acima dele
   (o maior era cortado na divisa com a faixa roxa) */
@media (max-width: 760px) { .Rodape__cartao { box-shadow: 0 -18px 50px -26px rgba(140, 109, 240, .55); } }

/* ---------- Animações sem fim param quando saem da tela (js/main.js marca .is-pausado) ---------- */
.is-pausado, .is-pausado *, .is-pausado *::before, .is-pausado *::after { animation-play-state: paused !important; }

/* ---------- Como nós trabalhamos: bússola presa no topo no tablet e no celular ----------
   No computador ela já acompanha a rolagem ao lado das etapas. Aqui ela fica numa faixa
   no topo enquanto as etapas passam, e a agulha aponta para a do meio da área livre. */
@media (max-width: 899px) {
  .Metodo__corpo { gap: 0; }
  .Metodo__bussola {
    position: sticky; z-index: 3; top: calc(var(--altura-header, 64px) + 2px);
    margin: 0 -1.5rem 6px; padding: 8px 0 22px;
    pointer-events: none;
    transition: top .35s ease;
  }
  /* a faixa clara atrás da bússola só aparece quando ela está presa (js/main.js marca .is-presa);
     solta, ela fica sobre o fundo da seção, sem retângulo em volta */
  .Metodo__bussola::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .98) 72%, rgba(255, 255, 255, 0) 100%);
    opacity: 0; transition: opacity .25s ease;
  }
  .Metodo__bussola.is-presa::before { opacity: 1; }
  html.header-oculto .Metodo__bussola { top: 0; }
  .Metodo__compass { width: 112px; }
}
@media (max-width: 899px) and (max-height: 560px) { .Metodo__compass { width: 84px; } }

/* ---------- Aviso de cookies: cartão flutuante ---------- */
.CookieBanner {
  position: fixed; z-index: 150; left: 24px; bottom: 24px;
  width: min(420px, calc(100vw - 48px));
  padding: 20px 20px 16px;
  font-family: var(--in-font, "Poppins", system-ui, sans-serif); color: #1D1E20;
  background: #fff; border: 1px solid #ECE8F8; border-radius: 22px;
  box-shadow: 0 30px 70px -30px rgba(20, 7, 61, .5), 0 2px 8px rgba(20, 7, 61, .06);
  opacity: 0; transform: translate3d(0, 18px, 0) scale(.98);
  transition: opacity .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.CookieBanner.is-visivel { opacity: 1; transform: none; }
.CookieBanner[hidden], .CookieBanner__tela[hidden] { display: none; }
.CookieBanner__topo { display: flex; align-items: flex-start; gap: 14px; padding-right: 28px; }
.CookieBanner__icone { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #673DE6; background: #F4F1FF; }
.CookieBanner__icone svg { width: 22px; height: 22px; }
.CookieBanner__text { margin: 0; font-size: 14px; line-height: 1.55; color: #4a4a55; }
.CookieBanner__text a { color: #5025D1; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.CookieBanner__text a:hover { color: #673DE6; }
.CookieBanner__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.CookieBanner__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s;
}
.CookieBanner__btn svg { flex: 0 0 auto; width: 14px; height: 14px; }
.CookieBanner__btn--primary { color: #fff; border: 0; background: linear-gradient(90deg, #497DF7, #673DE6); box-shadow: 0 12px 24px -14px rgba(80, 37, 209, .85); }
.CookieBanner__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(80, 37, 209, .95); }
.CookieBanner__btn--ghost { color: #5025D1; background: #fff; border: 1px solid rgba(103, 61, 230, .35); }
.CookieBanner__btn--ghost:hover { border-color: #673DE6; background: #F7F5FF; }
.CookieBanner__btn--texto {
  grid-column: 1 / -1; min-height: 34px; color: #6D6E78; background: none; border: 0;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
}
.CookieBanner__btn--texto:hover { color: #5025D1; text-decoration-color: currentColor; }
.CookieBanner__btn:active { transform: scale(.98); }
.CookieBanner__btn:focus-visible, .CookieBanner__close:focus-visible, .CookieBanner__chave:focus-visible, .CookieBanner__text a:focus-visible { outline: 2px solid #673DE6; outline-offset: 3px; }
.CookieBanner__close {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; color: #6D6E78; background: transparent; cursor: pointer; transition: background .2s, color .2s;
}
.CookieBanner__close:hover { color: #1D1E20; background: #F4F1FF; }
.CookieBanner__close svg { width: 14px; height: 14px; }

/* segunda tela: categorias */
.CookieBanner__titulo { margin: 0 0 4px; padding-right: 36px; font-size: 16px; font-weight: 600; line-height: 1.3; color: #1D1E20; }
.CookieBanner__lista { margin: 0; padding: 0; list-style: none; }
.CookieBanner__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #F0ECFA; }
.CookieBanner__item:last-child { border-bottom: 0; }
.CookieBanner__desc { display: grid; gap: 2px; cursor: pointer; }
div.CookieBanner__desc { cursor: default; }
.CookieBanner__desc strong { font-size: 14px; font-weight: 600; color: #1D1E20; }
.CookieBanner__desc span { font-size: 12.5px; line-height: 1.45; color: #6D6E78; }
.CookieBanner__sempre { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #2E9E6A; }
.CookieBanner__chave {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; position: relative; width: 44px; height: 26px; margin: 0;
  border-radius: 999px; background: #DCD6EF; cursor: pointer; transition: background .25s;
}
.CookieBanner__chave::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(20, 7, 61, .25); transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.CookieBanner__chave:checked { background: #673DE6; }
.CookieBanner__chave:checked::after { transform: translateX(18px); }
.CookieBanner [data-cookie-tela="prefs"] .CookieBanner__buttons { margin-top: 10px; }

/* celular: cartão de ponta a ponta, acima da área do gesto do sistema */
@media (max-width: 640px) {
  .CookieBanner {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto;
    padding: 16px 14px 10px; border-radius: 20px;
  }
  .CookieBanner__topo { gap: 12px; }
  .CookieBanner__icone { width: 36px; height: 36px; border-radius: 10px; }
  .CookieBanner__icone svg { width: 20px; height: 20px; }
  .CookieBanner__text { font-size: 13.5px; line-height: 1.5; }
  .CookieBanner__buttons { margin-top: 14px; }
  .CookieBanner__btn { padding: 0 10px; }
  /* o botão do WhatsApp sai enquanto o aviso está na tela (ficavam um por cima do outro) */
  html.cookie-aberto .WaFlutuante { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 360px) { .CookieBanner__btn { font-size: 13px; } }

/* ---------- Celular: "Continue arrastando" ----------
   Nas partes em que a tela fica parada enquanto a animação acontece (início e roda de
   serviços), um aviso pequeno embaixo (js/main.js marca .is-visivel). Só em telas de toque. */
.Arraste {
  position: fixed; z-index: 58; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 8px; padding: 9px 16px 9px 13px; border-radius: 999px;
  font-family: var(--in-font, "Poppins", system-ui, sans-serif); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: #fff; background: rgba(20, 7, 61, .82);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(213, 200, 255, .22);
  opacity: 0; transform: translate3d(-50%, 14px, 0); pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), color .3s, background .3s;
}
.Arraste svg { flex: 0 0 auto; width: 15px; height: 15px; animation: arrasteSeta 1.5s ease-in-out infinite; }
.Arraste.is-visivel { opacity: 1; transform: translate3d(-50%, 0, 0); }
/* sobre fundo claro (roda de serviços) */
.Arraste--claro { color: #4A27C4; background: rgba(255, 255, 255, .95); box-shadow: 0 12px 30px -14px rgba(47, 28, 106, .45), inset 0 0 0 1px rgba(103, 61, 230, .16); }
@media (hover: none) and (pointer: coarse) { .Arraste { display: inline-flex; } }
@keyframes arrasteSeta { 0%, 100% { transform: translateY(-2px); opacity: .55; } 50% { transform: translateY(3px); opacity: 1; } }
/* na roda de serviços o cartão do texto sobe para o aviso caber embaixo dele */
@media (hover: none) and (pointer: coarse) and (max-width: 1023px) {
  .Frentes__infos { bottom: calc(clamp(1.5rem, 6vh, 4rem) + 34px + env(safe-area-inset-bottom)); }
}
html.teste-aberto .Arraste, html.lenis-stopped .Arraste { display: none; }
@media (prefers-reduced-motion: reduce) { .Arraste { transition: opacity .2s; } .Arraste svg { animation: none; } }

/* janela do teste aberta: nada flutua por cima dela */
html.teste-aberto .WaFlutuante, html.teste-aberto .CookieBanner { opacity: 0; visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .CookieBanner, .CookieBanner__chave, .CookieBanner__chave::after, .CookieBanner__btn { transition: none; }
  .Metodo__bussola { transition: none; }
}