/* ================= VERSÃO ANIMADA ================= */
html{scroll-behavior:smooth;scroll-padding-top:90px;scroll-padding-bottom:90px}   /* embaixo: o botão do WhatsApp não cobre o item com foco */

/* barra de progresso de leitura */
.progresso{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),#ff7a80);z-index:100;transition:width .1s linear}

/* cabeçalho encolhe ao rolar */
header{transition:box-shadow .3s ease,background .3s ease}
header .wrap{transition:height .3s ease}
header .logo img{transition:height .3s ease}
header.rolou{box-shadow:0 6px 24px rgba(0,0,0,.08);background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px)}
header.rolou .wrap{height:62px}
header.rolou .logo img{height:46px}

/* links do menu com sublinhado animado */
nav a:not(.btn-nav){position:relative}
nav a:not(.btn-nav)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
nav a:not(.btn-nav):hover::after,nav a.ativo::after{transform:scaleX(1)}

/* hero e cabeçalhos de página com parallax */
.hero,.page-hero{position:relative;overflow:hidden;isolation:isolate}
.hero .wrap,.page-hero .wrap{position:relative;z-index:2}
.parallax-deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.parallax-deco .arc{position:absolute;border-radius:50%;border-style:solid;border-color:transparent;will-change:transform}
.parallax-deco .a1{width:620px;height:620px;right:-160px;top:-60px;border-width:46px;border-top-color:rgba(237,27,36,.55);border-right-color:rgba(237,27,36,.55);transform:rotate(-20deg)}
.parallax-deco .a2{width:520px;height:520px;right:-40px;top:-60px;border-width:40px;border-bottom-color:rgba(255,255,255,.10);border-left-color:rgba(255,255,255,.10);transform:rotate(-20deg)}
.parallax-deco .a3{width:220px;height:220px;right:32%;bottom:-120px;border-width:18px;border-top-color:rgba(255,255,255,.07);border-left-color:rgba(255,255,255,.07)}
.parallax-deco .dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--gold);opacity:.8}
.parallax-deco .d1{left:8%;top:22%}
.parallax-deco .d2{left:46%;top:14%;width:6px;height:6px;opacity:.5}
.parallax-deco .d3{left:58%;bottom:18%;width:8px;height:8px;opacity:.6}
.page-hero .parallax-deco .a1{width:420px;height:420px;top:-150px;right:-80px;border-width:34px}
.page-hero .parallax-deco .a2{width:340px;height:340px;top:-120px;right:10px;border-width:28px}
.page-hero .parallax-deco .a3{display:none}

/* entrada do topo ao carregar */
@keyframes sobe{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero h1,.hero p,.hero .btn,.page-hero h1,.page-hero p,.page-hero .breadcrumb{animation:sobe .8s cubic-bezier(.2,.7,.2,1) both}
.hero p{animation-delay:.15s}
.hero p.assinatura{animation-delay:.3s}
.hero .btn{animation-delay:.45s}
.hero .btn + .btn{animation-delay:.55s}
.page-hero h1{animation-delay:.08s}
.page-hero p{animation-delay:.18s}

/* revelação ao rolar */
[class].rv{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.rv-esq{transform:translateX(-40px)}
.rv.rv-dir{transform:translateX(40px)}
.rv.rv-zoom{transform:scale(.94)}
.rv.visivel{opacity:1;transform:none}

/* linha do tempo "desenhada" */
.timeline::before{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.timeline.visivel::before{transform:scaleX(1)}
.etapa.agora{animation:pulso 2.4s ease-in-out 1.6s infinite}
@keyframes pulso{0%,100%{box-shadow:0 8px 24px rgba(237,27,36,.12)}50%{box-shadow:0 8px 34px rgba(237,27,36,.32)}}

/* cartões com mais vida */
.svc,.tool,.passo,.prazo,.tema,.card,.stat{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease,opacity .7s cubic-bezier(.2,.7,.2,1)}
.passo:hover,.tema:hover,.card:hover,.prazo:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.svc i{transition:transform .35s ease,background .35s ease,color .35s ease}
.svc:hover i{transform:rotate(-8deg) scale(1.08);background:var(--gold);color:#fff}
.btn{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.15)}

/* botão flutuante do WhatsApp com pulso suave */
.whats::before{content:"";position:absolute;inset:0;border-radius:50px;background:#25d366;z-index:-1;animation:onda 2.6s ease-out infinite}
.whats{isolation:isolate}
@keyframes onda{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.35);opacity:0}}

/* botão voltar ao topo */
.topo{position:fixed;left:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;border:0;font-size:1.2rem;cursor:pointer;z-index:20;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.topo.mostra{opacity:1;transform:none;pointer-events:auto}

/* acessibilidade: quem prefere menos movimento não vê animações */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .hero *,.page-hero *{animation:none!important}
  .timeline::before{transform:none!important}
  .parallax-deco .arc{transform:none!important}
  .whats::before,.etapa.agora{animation:none!important}
}
@media (max-width:860px){
  .parallax-deco .a1{width:360px;height:360px;right:-170px;top:-120px;border-width:28px}
  .parallax-deco .a2{width:300px;height:300px;right:-130px;top:-60px;border-width:24px}
  .parallax-deco .a3{display:none}
  .topo{left:14px;bottom:14px;width:42px;height:42px}
}

/* ================= VERSÃO 2 – EFEITOS AVANÇADOS ================= */

/* transição suave entre páginas (View Transitions API – Chrome/Edge/Safari recentes) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-sai .35s ease both}
::view-transition-new(root){animation:vt-entra .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-sai{to{opacity:0;transform:translateY(-12px) scale(.99)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(18px) scale(1.01)}}

/* hero com fundo vivo (gradiente em movimento) e profundidade 3D */
.hero{background:radial-gradient(1200px 600px at var(--mx,70%) var(--my,30%),rgba(237,27,36,.22),transparent 60%),linear-gradient(135deg,#1d1d1d 0%,#2e2e2e 55%,#3b3b3b 100%);perspective:1200px}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  transform:translateY(var(--grid-y,0))}
.parallax-deco{transform-style:preserve-3d}
.parallax-deco .camada{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transition:transform .25s ease-out}
.anel3d{position:absolute;right:6%;top:50%;width:360px;height:360px;margin-top:-180px;transform-style:preserve-3d;animation:gira3d 22s linear infinite}
.anel3d i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.10)}
.anel3d i:nth-child(1){transform:rotateX(70deg)}
.anel3d i:nth-child(2){transform:rotateY(70deg);border-color:rgba(237,27,36,.35)}
.anel3d i:nth-child(3){transform:rotateX(70deg) rotateY(60deg);border-color:rgba(255,255,255,.07)}
.anel3d b{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--gold);box-shadow:0 0 30px 6px rgba(237,27,36,.55)}
@keyframes gira3d{to{transform:rotateX(360deg) rotateY(360deg)}}

/* título do hero entra palavra por palavra, em 3D */
.hero h1{perspective:800px}
.hero h1 .palavra{display:inline-block;transform-origin:50% 100%;animation:palavra3d .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .08s)}
.hero h1{animation:none!important}
.hero h1 > span.palavra{color:inherit}
@keyframes palavra3d{from{opacity:0;transform:translateY(40px) rotateX(-80deg)}to{opacity:1;transform:none}}

/* botões "magnéticos" */
.btn.magnet{will-change:transform}

/* cartões com inclinação 3D e brilho que segue o mouse */
.tilt{transform-style:preserve-3d;will-change:transform;position:relative}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:soft-light;z-index:2}
.tilt:hover::before{opacity:1}
.tilt > *{transform:translateZ(22px)}
.tilt.visivel{transition:transform .15s ease-out,box-shadow .35s ease,border-color .35s ease,opacity .7s}

/* linha do tempo: etapas giram em 3D ao aparecer */
.timeline{perspective:1000px}
.timeline > .etapa.rv{transform:rotateY(-70deg) translateZ(-40px);transform-origin:left center}
.timeline > .etapa.rv.visivel{transform:none}

/* números dos destaques caem em 3D */
.stats{perspective:900px}
.stats > .stat.rv{transform:rotateX(-60deg) translateY(20px);transform-origin:50% 0}
.stats > .stat.rv.visivel{transform:none}

/* faixa infinita de temas (marquee) */
.marquee{overflow:hidden;background:var(--navy);color:#fff;padding:18px 0;margin-top:0;position:relative;border-bottom:1px solid rgba(255,255,255,.08);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-trilho{display:flex;gap:44px;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-trilho{animation-play-state:paused}
.marquee span{font-weight:700;letter-spacing:.5px;white-space:nowrap;font-size:1rem;display:flex;align-items:center;gap:44px}
.marquee span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* carrossel de serviços (página inicial) */
.carrossel{position:relative;margin-top:36px}
.carrossel-trilho{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 4px 26px;scrollbar-width:none;cursor:grab}
.carrossel-trilho::-webkit-scrollbar{display:none}
.carrossel-trilho.arrastando{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carrossel-trilho > .svc{flex:0 0 calc((100% - 44px) / 3);scroll-snap-align:start;user-select:none}
.carrossel-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.carrossel-pontos{display:flex;gap:0}
/* área de toque 24×24 (WCAG 2.5.8); a bolinha visível é o ::before */
.carrossel-pontos button{position:relative;width:24px;height:24px;border:0;background:none;cursor:pointer;transition:width .3s ease;padding:0}
.carrossel-pontos button::before{content:"";position:absolute;inset:7px;border-radius:10px;background:#d5d5d5;transition:background .3s ease}
.carrossel-pontos button.on{width:44px}
.carrossel-pontos button.on::before{background:var(--gold)}
.carrossel-setas{display:flex;gap:10px}
.carrossel-setas button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.2rem;cursor:pointer;color:var(--navy);transition:background .2s,color .2s,transform .2s}
.carrossel-setas button:hover{background:var(--navy);color:#fff;transform:scale(1.06)}
.carrossel-barra{height:3px;background:#e7e7e7;border-radius:3px;overflow:hidden;flex:1;max-width:220px}
.carrossel-barra div{height:100%;width:0;background:var(--gold)}
.carrossel-barra div.corre{animation:barra-auto 5s linear forwards}
@keyframes barra-auto{to{width:100%}}

/* animações guiadas pela rolagem (CSS scroll-driven, navegadores modernos) */
@supports (animation-timeline: view()){
  .page-hero h1{animation:sobe .8s both, afasta linear both;animation-timeline:auto, scroll(root);animation-range:normal, 0 400px}
  /* só esmaece: deslocar o título o jogava por cima do subtítulo */
  @keyframes afasta{to{opacity:.25}}
  section.alt{background-position:center;animation:fundo linear both;animation-timeline:view()}
  @keyframes fundo{from{background-color:#fff}30%{background-color:var(--bg)}}
}

@media (hover:none),(max-width:860px){
  .tilt::before{display:none}
  .tilt > *{transform:none}
  .carrossel-trilho > .svc{flex-basis:84%}
  .anel3d{width:220px;height:220px;margin-top:-110px;right:-40px;opacity:.6}
}
@media (max-width:1100px) and (min-width:861px){.carrossel-trilho > .svc{flex-basis:calc((100% - 22px) / 2)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .anel3d,.marquee-trilho{animation:none!important}
  .hero h1 .palavra{animation:none!important}
  .timeline > .etapa.rv,.stats > .stat.rv{transform:none!important}
  .carrossel-barra div.corre{animation:none}
}

/* ===== ANIMAÇÃO DA MARCA (logo no cabeçalho + anel da marca no topo) ===== */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* logo do cabeçalho, montado em camadas */
.logo-anim{position:relative;aspect-ratio:1100/622;width:103px;flex-shrink:0}
.logo-anim .ly{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.logo-anim .mov{position:absolute;inset:0}
header.rolou .logo-anim{width:82px;transition:width .3s ease}

/* varredura circular que "desenha" os arcos a partir da ponta */
.arc{--a:0deg;-webkit-mask-image:conic-gradient(from var(--de) at 50% 50%,#000 calc(var(--a) - 14deg),transparent var(--a));mask-image:conic-gradient(from var(--de) at 50% 50%,#000 calc(var(--a) - 14deg),transparent var(--a))}
.play .arc{animation:varre 1.3s cubic-bezier(.65,0,.25,1) forwards;animation-delay:var(--dl)}
@keyframes varre{to{--a:175deg}}
.topRed{--de:280deg;--dl:.05s}.botRed{--de:100deg;--dl:.05s}
.topGray{--de:300deg;--dl:.3s}.botGray{--de:100deg;--dl:.3s}

/* nome do logo: cortina da esquerda para a direita */
.logo-anim .txt,.logo-anim .sub{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.logo-anim.play .txt{animation:cortina .9s cubic-bezier(.6,0,.2,1) .7s forwards}
.logo-anim.play .sub{animation:cortina .9s cubic-bezier(.6,0,.2,1) .95s forwards}
@keyframes cortina{to{-webkit-mask-position:0 0;mask-position:0 0}}
.logo-anim .brilho{background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%);background-size:260% 100%;background-position:130% 0;opacity:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;mix-blend-mode:overlay}
.logo-anim.play .brilho{animation:brilho 8s ease-in-out 2.4s infinite}
@keyframes brilho{0%{opacity:1;background-position:130% 0}18%{background-position:-30% 0;opacity:1}19%,100%{opacity:0}}
.logo:hover .logo-anim .anel{transform:rotate(-8deg)}
.logo-anim .anel{position:absolute;inset:0;transition:transform 1s cubic-bezier(.2,.7,.2,1)}

/* anel da marca no topo escuro (substitui os arcos genéricos) */
.hero .parallax-deco,.page-hero .parallax-deco{display:none!important}
.giro{position:absolute;right:7%;top:44%;width:min(420px,36vw);aspect-ratio:1;transform:translateY(-50%);z-index:1;pointer-events:none}
.giro .mov{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.giro .roda{position:absolute;inset:0}
.giro.play .roda{animation:roda 100s linear 1.6s infinite}
@keyframes roda{to{transform:rotate(360deg)}}
.giro .ly{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.giro .cinza{filter:brightness(0) invert(1);opacity:.17}
.giro .vermelho{}
.giro .orbita{position:absolute;left:50%;top:50%;width:66%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(255,255,255,.12);opacity:0;transition:opacity 1.2s ease .9s}
.giro .orbita::after{content:"";position:absolute;top:50%;left:-5px;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#ed1b24;box-shadow:0 0 16px 3px rgba(237,27,36,.7)}
.giro.play .orbita{opacity:1;animation:orbita 26s linear infinite reverse}
@keyframes orbita{to{transform:translate(-50%,-50%) rotate(360deg)}}
.giro .nucleo{position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23% 0 0 -23%;border-radius:50%;background:radial-gradient(closest-side,rgba(237,27,36,.22),transparent);opacity:0;transition:opacity 1.5s ease 1s}
.giro.play .nucleo{opacity:1;animation:pulsa 5s ease-in-out 2s infinite}
@keyframes pulsa{50%{transform:scale(1.15);opacity:.7}}
.page-hero .giro{aspect-ratio:1100/622;width:320px;right:6%;top:50%;opacity:1}
.page-hero .giro .nucleo{width:30%;height:auto;aspect-ratio:1;margin:0;left:50%;top:50%;transform:translate(-50%,-50%)}
.page-hero .giro.play .roda{animation:balanca 9s ease-in-out 1.6s infinite}
@media (max-width:900px){
  .hero .giro{width:120vw;right:-62%;opacity:.35}
  .page-hero .giro{width:240px;right:-40px;opacity:.25}
}
@media (prefers-reduced-motion:reduce){
  .arc,.logo-anim .txt,.logo-anim .sub{-webkit-mask-image:none!important;mask-image:none!important}
  .play .arc,.logo-anim.play *,.giro.play *{animation:none!important}
  .giro .orbita,.giro .nucleo{opacity:1}
}

/* topo principal: logo completo, com o nome em branco para aparecer no fundo escuro */
.hero .giro{aspect-ratio:1100/622;width:min(520px,38vw);right:5%}
.hero .giro .nucleo{width:30%;height:auto;aspect-ratio:1;margin:0;left:50%;top:50%;transform:translate(-50%,-50%)}
.hero .giro.play .roda{animation:balanca 9s ease-in-out 1.6s infinite}
@keyframes balanca{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
.giro .nome{position:absolute;inset:0}
.giro .nome .txt{filter:brightness(0) invert(1)}
.giro .nome .txt,.giro .nome .sub{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.giro.play .nome .txt{animation:cortina 1s cubic-bezier(.6,0,.2,1) .8s forwards}
.giro.play .nome .sub{animation:cortina 1s cubic-bezier(.6,0,.2,1) 1.1s forwards}
.giro .nome .brilho{background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);background-size:260% 100%;background-position:130% 0;opacity:0;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.giro.play .nome .brilho{animation:brilho 8s ease-in-out 2.8s infinite}
@media (max-width:900px){.hero .giro{width:110vw;right:-30%;opacity:.13}}
@media (prefers-reduced-motion:reduce){.giro .nome .txt,.giro .nome .sub{-webkit-mask-image:none!important;mask-image:none!important}}

/* o nome também se move: flutua e acompanha o mouse com profundidade */
.giro .nome{transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.giro .nome .flutua{position:absolute;inset:0}
.giro.play .nome .flutua{animation:flutua 6s ease-in-out 2s infinite}
@keyframes flutua{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.015)}}
.giro{perspective:900px}
@media (prefers-reduced-motion:reduce){.giro.play .nome .flutua{animation:none}}

/* páginas internas com o mesmo fundo da inicial: pontinhos e brilho vermelho que segue o mouse */
.page-hero{background:radial-gradient(900px 420px at var(--mx,70%) var(--my,40%),rgba(237,27,36,.22),transparent 60%),linear-gradient(135deg,#1d1d1d 0%,#2e2e2e 55%,#3b3b3b 100%)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
/* TESTE: logo do topo passeando devagar e em trajetória aleatória, por trás dos textos */
.hero .wrap,.page-hero .wrap{position:relative;z-index:3}
.giro{z-index:1;transition-property:translate,opacity;transition-timing-function:cubic-bezier(.45,0,.55,1),ease;transition-duration:10s,1.6s}
@media (max-width:900px){.giro{transition:none}}

.hero .giro{width:min(470px,34vw)}
.page-hero .giro{width:260px}
.fx-raios{position:absolute;inset:0;z-index:1;pointer-events:none}
@media (hover:hover) and (min-width:901px){.hero,.page-hero{background-image:linear-gradient(135deg,#1d1d1d 0%,#2e2e2e 55%,#3b3b3b 100%)!important}}
@media (max-width:900px),(hover:none){.fx-raios{display:none}.hero,.page-hero{background-image:linear-gradient(135deg,#1d1d1d 0%,#2e2e2e 55%,#3b3b3b 100%)!important}}

/* ================= MODO CLARO / ESCURO ================= */
/* botão de troca de tema */
.tema-bt{flex-shrink:0;width:40px;height:40px;margin-left:14px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,transform .3s}
.tema-bt:hover{border-color:var(--gold);transform:rotate(-15deg)}
.tema-bt svg{width:19px;height:19px}
.tema-bt .lua{display:block}.tema-bt .sol{display:none}
[data-tema="escuro"] .tema-bt .lua{display:none}
[data-tema="escuro"] .tema-bt .sol{display:block}
@media (max-width:860px){.tema-bt{margin-left:auto;margin-right:10px;width:38px;height:38px}}

/* troca suave de cores */
html.tema-transicao,html.tema-transicao *{transition:background-color .35s ease,border-color .35s ease,color .35s ease!important}

/* ---------- paleta do modo escuro ---------- */
:root[data-tema="escuro"]{
  color-scheme:dark;
  --ink:#e7e7e7; --muted:#a6a6a6; --gold-txt:#ff5a60; --line:#2e2e2e; --bg:#161616; --white:#1c1c1c;
}
[data-tema="escuro"] body{background:#111}
[data-tema="escuro"] header{background:#151515;border-bottom-color:#262626}
[data-tema="escuro"] header.rolou{background:rgba(21,21,21,.94)}
[data-tema="escuro"] header .logo-anim .txt{filter:brightness(0) invert(1)}
[data-tema="escuro"] nav{background:#151515}
[data-tema="escuro"] nav a.btn-nav{background:var(--gold)}
[data-tema="escuro"] nav a.btn-nav:hover{background:#c8141c}

/* títulos e textos que usavam o grafite da marca */
[data-tema="escuro"] :is(h2,.stat b,.valores li b,.card h3,.tool b,.links-grid h3,.info-item b,label,.etapa h3,.placar b,.tema h3,.passo h3,
  .pol-box h3,.prazo .data,.prazo h3,.faq summary,.rt-destaque,.logo-tag b,.svc h2,.svc h3,.teaser-lista b,.texto-legal h2,.menu-toggle,.svc-main h2){color:#f2f2f2}

/* cartões e caixas brancas */
[data-tema="escuro"] :is(.toggle,.etapa,.placar,.tema,.pol-box,.prazo,.faq,.svc,.carrossel-setas button,.passo,.stats,.valores li,.card,.tool,form){background:#1c1c1c;border-color:#2e2e2e}
[data-tema="escuro"] .placar{color:var(--ink)}
[data-tema="escuro"] :is(.card h3 i,.prazo .falta){background:#2a2a2a;color:#e7e7e7}
[data-tema="escuro"] .prazo.urgente .falta{background:var(--gold);color:#fff}
[data-tema="escuro"] .svc i{background:rgba(237,27,36,.15)}
[data-tema="escuro"] .barra,[data-tema="escuro"] .carrossel-barra{background:#333}
[data-tema="escuro"] .carrossel-pontos button::before{background:#444}
[data-tema="escuro"] .carrossel-pontos button.on::before{background:var(--gold)}
[data-tema="escuro"] .carrossel-setas button{color:#e7e7e7}
[data-tema="escuro"] .carrossel-setas button:hover{background:var(--gold);color:#fff}
[data-tema="escuro"] .cta-box{background:#161616}
[data-tema="escuro"] .btn-ghost-dark{border-color:#e7e7e7;color:#e7e7e7}
[data-tema="escuro"] .btn-ghost-dark:hover{background:#e7e7e7;color:#111}
[data-tema="escuro"] .toggle button.on{background:var(--gold)}
[data-tema="escuro"] .etapa.agora{border-color:var(--gold)}

/* formulário */
[data-tema="escuro"] :is(input,select,textarea){background:#141414;border-color:#3a3a3a;color:#e7e7e7}
[data-tema="escuro"] :is(input,textarea)::placeholder{color:#777}

/* áreas escuras: um tom abaixo para não sumirem no fundo */
[data-tema="escuro"] footer,[data-tema="escuro"] .marquee{background:#0b0b0b}
[data-tema="escuro"] .check-box,[data-tema="escuro"] .svc-side{background:#262626;border:1px solid #333}
[data-tema="escuro"] .info-item i,[data-tema="escuro"] .topo{background:#2a2a2a}
[data-tema="escuro"] .pendente{background:#4a3b00;color:#ffd666}

/* efeitos de fundo que partiam do branco */
[data-tema="escuro"] section.alt{animation:none!important;background:var(--bg)}
[data-tema="escuro"] .stats{box-shadow:0 10px 30px rgba(0,0,0,.45)}
header .wrap > nav{order:2;margin-left:auto}
header .wrap > .tema-bt{order:3}
header .wrap > .menu-toggle{order:4}
/* ajustes gerais de layout (PC e celular) */
html,body{overflow-x:clip}
@media (min-width:861px){
  header nav{display:flex;align-items:center;flex-wrap:nowrap}
  header nav a{margin-left:18px;font-size:.88rem}
  header nav a.btn-nav{margin-left:20px}
}
@media (min-width:861px) and (max-width:1300px){.logo-tag{display:none}}
/* links de texto legíveis no escuro */
[data-tema="escuro"] :is(.info-item a,.tema a.mais,.tema .base a,.fontes a,.prazo .fonte,.aviso-lgpd a,.texto-legal a,.lead a,.breadcrumb a){color:#ff7a7f}
[data-tema="escuro"] .links-grid a{color:#ff7a7f}
[data-tema="escuro"] .links-grid a:hover{color:#fff!important;text-decoration:underline}
/* faixa de temas: bordas esfumadas na própria cor da faixa (sem "vazar" o fundo claro) */
.marquee{--fx:var(--navy);-webkit-mask-image:none!important;mask-image:none!important}
[data-tema="escuro"] .marquee{--fx:#0b0b0b}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:8%;z-index:3;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--fx),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--fx),transparent)}
.links-grid a{transition:color .2s}.links-grid a:hover{color:var(--gold-txt)!important;text-decoration:underline}

/* ===== PADRÃO ÚNICO AO PASSAR O MOUSE: vermelho da marca ===== */
/* links de texto */
:is(.info-item a,.lead a,.texto-legal a,.prazo .fonte,.tema a.mais,.aviso-lgpd a,.breadcrumb a,.side-tel,.copy a){transition:color .2s}
:is(.info-item a,.lead a,.texto-legal a,.prazo .fonte,.tema a.mais,.aviso-lgpd a,.svc-main a):hover{color:var(--gold-txt)!important;text-decoration:underline}
footer a:hover,.copy a:hover,.breadcrumb a:hover,.side-tel:hover{color:#ff7a7f!important;text-decoration:underline}
.faq summary{transition:color .2s}.faq summary:hover{color:var(--gold-txt)!important}
/* botões escuros e contornados passam a ficar vermelhos */
nav a.btn-nav:hover{background:var(--gold)!important;color:#fff!important}
.btn-ghost-dark:hover,[data-tema="escuro"] .btn-ghost-dark:hover{background:var(--gold)!important;border-color:var(--gold)!important;color:#fff!important}
.btn-ghost:hover{background:var(--gold)!important;border-color:var(--gold)!important;color:#fff!important}
.carrossel-setas button:hover,.topo:hover{background:var(--gold)!important;color:#fff!important;border-color:var(--gold)!important}
.toggle button:not(.on):hover{color:var(--gold-txt)}
/* cartões clicáveis: borda vermelha */
.tool:hover{border-color:var(--gold)!important}
.tool:hover b{color:var(--gold-txt)}
/* bordas dos cartões: todas ficam vermelhas ao passar o mouse */
:is(.svc,.tool,.faq):hover{border-color:var(--gold)!important}
/* o que não é clicável não reage ao mouse */
:is(.passo,.tema,.card,.prazo,.etapa,.valores li,.info-item,.svc-side):hover{transform:none!important}
:is(.passo,.tema,.card,.prazo:not(.urgente)):hover{box-shadow:none!important}
.stats .stat:hover{border-color:var(--line)!important}
.faq{transition:border-color .25s}

/* luz sob o cursor em todos os cartões (visível principalmente no modo escuro) */
.faq.tilt > *{transform:none}

/* ===== CELULAR: logo animado visível (antes ficava quase transparente, como marca-d'água) ===== */
@media (max-width:900px){
  .hero,.page-hero{display:flex;flex-direction:column}
  .hero .giro,.page-hero .giro{position:relative!important;inset:auto!important;right:auto!important;top:auto!important;margin:0 auto;opacity:1!important;translate:none!important;transform:none;flex-shrink:0}
  .hero .giro{width:min(330px,80vw)!important;margin-bottom:26px}
  .hero{padding-top:36px!important}
  .page-hero .giro{width:min(230px,62vw)!important;margin-bottom:18px}
  .page-hero{padding-top:28px!important}
  .giro .orbita{display:block}
}

/* celulares muito estreitos (até 380 px): sem o texto ao lado do logo, para o menu caber */
@media (max-width:380px){.logo-tag{display:none}}

/* ---------- acessibilidade: pausar animações (WCAG 2.2.2) e foco na faixa vermelha ---------- */
[data-tema="escuro"] footer .wrap .foot h2{color:#fff}   /* títulos do rodapé (eram h5) continuam brancos */
.aviso a:focus-visible{outline-color:#fff}
.copy{padding-bottom:72px}   /* a última linha do rodapé fica acima do botão fixo do WhatsApp (WCAG 2.4.11) */
.copy .bt-anim{background:none;border:1px solid rgba(255,255,255,.35);color:inherit;font:inherit;border-radius:20px;padding:2px 12px;min-height:24px;cursor:pointer}
.copy .bt-anim:hover{border-color:#ff7a7f;color:#ff7a7f}
.carrossel-setas .bt-anim svg{display:block;margin:auto}
.anim-pausada .marquee-trilho,.anim-pausada .anel3d,.anim-pausada .giro.play .roda,.anim-pausada .giro.play .orbita,
.anim-pausada .giro.play .nucleo,.anim-pausada .giro.play .nome .brilho,.anim-pausada .giro.play .nome .flutua,
.anim-pausada .logo-anim.play .brilho,.anim-pausada .whats::before,.anim-pausada .etapa.agora{animation-play-state:paused!important}