/* VELARIOQ: peças de movimento compartilhadas por todas as páginas (par do js/movimento.js).
   Usa as cores de cada página (--ink, --mut, --brand, --linha, --card, --bg) com reserva. */
@font-face{font-family:"Bricolage";src:url("/fontes/bricolage.woff") format("woff");font-weight:400 800;font-display:swap}

h1,h2,.display{font-family:"Bricolage",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-optical-sizing:auto;letter-spacing:-.025em}
::selection{background:var(--brand,#2f35c9);color:var(--on-brand,#fff)}
html{accent-color:var(--brand,#2f35c9)}
a{text-underline-offset:.18em;text-decoration-thickness:1.5px}

/* título palavra por palavra: a palavra sobe por dentro de uma máscara */
.pw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.32em;margin-bottom:-.32em}
.pw-i{display:inline-block;will-change:transform}
.js [data-palavras]{visibility:hidden;animation:mv-aparece 0s 2.5s forwards}
@keyframes mv-aparece{to{visibility:visible}}
/* traço feito à mão embaixo de uma palavra */
.marca{position:relative;display:inline-block;white-space:nowrap}
.marca svg{position:absolute;left:0;width:100%;bottom:-.24em;height:.42em;overflow:visible;pointer-events:none}
.marca path{fill:none;stroke:var(--acc,#0b6f61);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* texto que acende com a rolagem */
.dw{display:inline}
.dw-i{display:inline}

/* carrossel */
.carrossel{position:relative}
.car-trilho{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;
  padding:26px 16px 34px;margin:0 -16px;list-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.car-trilho::-webkit-scrollbar{display:none}
.car-trilho.arrastando{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.car-trilho.arrastando *{user-select:none}
.car-trilho:focus-visible{outline:3px solid var(--foco,#2f35c9);outline-offset:-3px;border-radius:18px}
.car-item{flex:0 0 min(82vw,440px);scroll-snap-align:center;
  transform:translateY(calc(var(--pa,0) * 22px)) rotate(calc(var(--p,0) * 2.2deg)) scale(calc(1 - var(--pa,0) * .05));
  transform-origin:50% 100%;transition:transform .12s linear}
/* |--p| sem JS de cálculo: max(-x,x) */
.car-item{--pa:max(var(--p,0),calc(var(--p,0) * -1))}
.car-ctrl{display:flex;align-items:center;gap:14px;margin-top:2px}
.car-btn{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--linha,rgba(18,24,50,.2));
  background:var(--card,#fff);color:var(--ink,#121832);cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.car-btn:hover:not(:disabled){border-color:var(--ink,#121832)}
.car-btn:active:not(:disabled){transform:scale(.94)}
.car-btn:disabled{opacity:.38;cursor:default}
.car-btn:focus-visible{outline:3px solid var(--foco,#2f35c9);outline-offset:3px}
.car-btn svg{width:20px;height:20px}
.car-barra{flex:1;height:3px;border-radius:3px;background:var(--linha,rgba(18,24,50,.14));overflow:hidden}
.car-barra span{display:block;height:100%;background:var(--ink,#121832);transform-origin:0 50%;transform:scaleX(.06);transition:transform .15s linear}
.car-pos{font-variant-numeric:tabular-nums;font-size:15px;color:var(--mut,#464e6e);min-width:4.5em;text-align:right}

/* passos com linha de progresso */
[data-passos]{position:relative}
.passos-linha{display:block;list-style:none;margin:0;padding:0;position:absolute;left:19px;top:20px;bottom:20px;width:3px;border-radius:3px;background:var(--linha,rgba(18,24,50,.14));overflow:hidden}
.passos-linha span{display:block;width:100%;height:100%;background:var(--brand,#2f35c9);transform-origin:50% 0}
[data-passos] > li{transition:opacity .35s,transform .35s}
[data-passos] > li .num{transition:background .3s,color .3s,box-shadow .3s}
[data-passos] > li.ativo .num,[data-passos].todos-ativos > li .num,.sem-movimento [data-passos] > li .num{background:var(--brand,#2f35c9);color:var(--on-brand,#fff);border-color:var(--brand,#2f35c9)}
@media(min-width:900px){
  .passos-linha{left:20px;right:20px;top:19px;bottom:auto;width:auto;height:3px}
  .passos-linha span{transform-origin:0 50%}
}

/* vídeo com botão de tocar */
.tocar{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);color:#121832;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.tocar:hover{transform:scale(1.06)}
.tocar:focus-visible{outline:3px solid #fff;outline-offset:4px}
.tocar svg{width:28px;height:28px;margin-left:4px}
.tocar[hidden]{display:none}

/* cabeçalho fixo: sombra depois que rola */
[data-topo]{transition:box-shadow .3s}
[data-topo].rolou{box-shadow:0 6px 18px rgba(18,24,50,.07)}

footer nav a{min-height:44px;display:inline-flex;align-items:center}
.logo{min-height:44px}
.js .zapfixo{opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.js .zapfixo.mostra{opacity:1;transform:none;pointer-events:auto}
.js .zapfixo:focus-visible{opacity:1;transform:none}

/* menu: links no computador, painel que desce no celular (mesmo menu em todas as páginas) */
.menu{display:none}
.menu a{position:relative;padding:8px 2px;margin:0 12px;color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease,cubic-bezier(.16,1,.3,1))}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.menu a[aria-current="page"]{color:var(--brand,#2f35c9)}
.abre-menu{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--linha,rgba(18,24,50,.14));background:var(--card,#fff);color:var(--ink);font:inherit;font-weight:650;font-size:15px;cursor:pointer}
.abre-menu i{display:grid;gap:4px;width:16px}
.abre-menu i::before,.abre-menu i::after{content:"";height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease,cubic-bezier(.16,1,.3,1))}
.abre-menu[aria-expanded="true"] i::before{transform:translateY(3px) rotate(45deg)}
.abre-menu[aria-expanded="true"] i::after{transform:translateY(-3px) rotate(-45deg)}
.painel-menu{position:fixed;inset:64px 0 0;z-index:49;background:var(--bg);padding:20px var(--gutter,16px) 40px;overflow:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s var(--ease,cubic-bezier(.16,1,.3,1)),visibility 0s .45s}
.painel-menu.aberto{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease,cubic-bezier(.16,1,.3,1))}
.painel-menu a.item{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--linha,rgba(18,24,50,.14));
  font-family:"Bricolage",system-ui,sans-serif;font-size:clamp(30px,9vw,44px);font-weight:700;letter-spacing:-.025em;color:var(--ink);text-decoration:none}
.painel-menu a.item small{font-family:system-ui,sans-serif;font-size:15px;font-weight:500;color:var(--mut);letter-spacing:0}
.painel-menu a.item[aria-current="page"]{color:var(--brand,#2f35c9)}
.painel-menu .btn{margin-top:26px;width:100%}
@media(prefers-reduced-motion:reduce){.painel-menu,.painel-menu.aberto{transition:none}}
.topo-acoes{display:flex;align-items:center;gap:8px}
/* página de produto com barra de compra embaixo: no celular o botão de compra fica só na barra */
@media(max-width:899px){body:has(.barra) .topo-acoes .btn{display:none}}
@media(min-width:900px){.menu{display:flex}.abre-menu,.painel-menu{display:none}}

/* entrada suave para texto longo (privacidade e termos): só opacidade, sem deslocar */
.suave{animation:mv-suave .6s cubic-bezier(.16,1,.3,1) both}
.suave > *{animation:mv-suave-sub .7s cubic-bezier(.16,1,.3,1) both}
.suave > *:nth-child(2){animation-delay:.05s}.suave > *:nth-child(3){animation-delay:.1s}.suave > *:nth-child(n+4){animation-delay:.15s}
@keyframes mv-suave{from{opacity:0}to{opacity:1}}
@keyframes mv-suave-sub{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .car-item{transform:none;transition:none}
  [data-topo]{transition:none}
  .suave,.suave > *{animation:none}
  .js [data-palavras]{visibility:visible;animation:none}
}