/* ═════════════════════ Exata RH — animações SVG ═════════════════════ */
:root{--logo-main:#1115ff;--logo-rh:#2b518b;--ease-out:cubic-bezier(.2,.8,.2,1);--ease-back:cubic-bezier(.34,1.56,.64,1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--logo-main:#fff;--logo-rh:#fff}}
:root[data-theme="dark"]{--logo-main:#fff;--logo-rh:#fff}

/* Logo inline: X aparece e o check "carimba" */
.logo-svg{height:34px;width:auto;display:block;overflow:visible}
.logo-svg .lg-m{fill:var(--logo-main)}.logo-svg .lg-r{fill:var(--logo-rh)}.logo-svg .lg-c{fill:#1115ff}
.site-footer .logo-svg{--logo-main:#fff;--logo-rh:#fff;height:32px;margin-bottom:16px}
.logo-svg .lg-x{opacity:0;animation:lgFade .5s .15s var(--ease-out) forwards}
.logo-svg .lg-c{transform-box:fill-box;transform-origin:20% 80%;transform:scale(0) rotate(-25deg);animation:lgCheck .7s .45s var(--ease-back) forwards}
.brand:hover .lg-c{animation:lgWiggle .6s var(--ease-back)}
@keyframes lgFade{to{opacity:1}}
@keyframes lgCheck{to{transform:scale(1) rotate(0)}}
@keyframes lgWiggle{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}

/* Ícones que se desenham quando entram na tela */
.icon svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-out) .15s}
.in .icon svg [pathLength],.icon.in svg [pathLength]{stroke-dashoffset:0}
.card:hover .icon{animation:iconPop .5s var(--ease-back)}
@keyframes iconPop{40%{transform:scale(1.12) rotate(-4deg)}}

/* Revelação ao rolar */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-reveal].in{opacity:1;transform:none}
.grid>[data-reveal]:nth-child(4n+2){--i:1}.grid>[data-reveal]:nth-child(4n+3){--i:2}.grid>[data-reveal]:nth-child(4n+4){--i:3}

.btn svg{transition:transform .25s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}

/* Fitas de crachá (lanyard) */
.lanyard-svg{position:absolute;pointer-events:none;width:320px;height:auto;z-index:0;overflow:visible}
.lanyard-svg.tr{top:-30px;right:-70px;transform-origin:80% 0;animation:sway 7s ease-in-out infinite}
.lanyard-svg.bl{bottom:-40px;left:-80px;transform-origin:0 100%;animation:sway 8s ease-in-out infinite reverse}
.lanyard-svg .strap{fill:none;stroke:#1d3fd8;stroke-width:26;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s .3s var(--ease-out) forwards}
.lanyard-svg .stitch{fill:none;stroke:#6f8bff;stroke-width:2;stroke-dasharray:5 5;opacity:0;animation:lgFade .6s 1.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(2.5deg)}}
@media (max-width:720px){.lanyard-svg{width:170px}.lanyard-svg.tr{right:-60px}}
.hero .wrap{position:relative;z-index:1}

/* Retrato com órbita e selos flutuantes */
.portrait-stage{position:relative;width:min(440px,84vw);margin:48px auto 0}
@media (min-width:980px){.portrait-stage{margin-top:0}}
.portrait-stage .portrait{margin:0 auto;width:100%}
.orbit{position:absolute;left:-8%;top:-8%;width:116%;height:116%;pointer-events:none;overflow:visible}
.orbit .ring{fill:none;stroke:var(--brand-cyan);stroke-width:1.5;stroke-dasharray:4 8;transform-origin:50% 50%;animation:spin 40s linear infinite}
.orbit .dot{fill:var(--brand-blue)}
.orbit .dot.c{fill:var(--brand-cyan)}
.orbit .spin{transform-origin:50% 50%;animation:spin 14s linear infinite}
.orbit .spin.rev{animation-duration:22s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.chip{position:absolute;display:flex;align-items:center;gap:10px;background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-full);padding:9px 16px 9px 9px;box-shadow:var(--shadow-card);font:600 13.5px/1.25 var(--font-sans);color:var(--ink);white-space:nowrap;opacity:0;animation:chipIn .7s var(--ease-back) forwards,float 5s ease-in-out infinite;z-index:2;text-align:left}
.chip .ck{width:30px;height:30px;border-radius:50%;background:var(--brand-blue);display:grid;place-items:center;flex:none}
.chip .ck svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chip .ck svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .6s forwards}
.chip small{display:block;font-weight:400;color:var(--ink-muted);font-size:12px}
.chip.c1{top:10%;left:-10%;animation-delay:.9s,1.6s}.chip.c1 .ck path{animation-delay:1.3s}
.chip.c2{top:44%;right:-12%;animation-delay:1.3s,2.1s}.chip.c2 .ck path{animation-delay:1.7s}
.chip.c3{bottom:24%;left:-14%;animation-delay:1.7s,2.6s}.chip.c3 .ck path{animation-delay:2.1s}
@keyframes chipIn{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:560px){.chip{font-size:12px;padding:7px 12px 7px 7px}.chip .ck{width:24px;height:24px}.chip.c1{left:-4%}.chip.c2{right:-4%}.chip.c3{left:-2%}.chip small{display:none}}

/* Divisor tracejado com fluxo */
.dash-svg{display:block;width:60%;height:6px;margin:16px auto;overflow:visible}
.dash-svg line{stroke:var(--brand-cyan);stroke-width:3;stroke-dasharray:10 6;animation:dashFlow 1.6s linear infinite}
@keyframes dashFlow{to{stroke-dashoffset:-32}}

/* Funil "do volume à precisão" */
.funnel-wrap{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.funnel-wrap{grid-template-columns:1.1fr .9fr}}
.funnel{width:100%;max-width:560px;margin:0 auto;display:block;overflow:visible}
.funnel .shape{fill:color-mix(in srgb,var(--brand-blue) 6%,transparent);stroke:var(--brand-blue);stroke-width:2;stroke-linejoin:round}
.funnel .gate{stroke:var(--brand-cyan);stroke-width:2;stroke-dasharray:6 6;animation:dashFlow 2s linear infinite}
.funnel .lbl{font:600 14px var(--font-sans);fill:var(--ink)}
.funnel .lbl-n{font:800 14px var(--font-display);fill:var(--accent-text)}
.funnel .p{fill:var(--brand-navy)}
.funnel .p.win{fill:var(--brand-blue)}
.funnel .badge circle{fill:var(--brand-blue)}
.funnel .badge path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.funnel .badge{transform-box:fill-box;transform-origin:center;animation:badgePulse 3s ease-in-out infinite}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Linha que conecta os passos */
.steps-wrap{position:relative}
.steps-line{display:none}
@media (min-width:900px){
  .steps-wrap{padding-top:34px}
  .steps-line{display:block;position:absolute;left:0;top:0;width:100%;height:24px;overflow:visible}
  .steps-line path{fill:none;stroke:var(--brand-cyan);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--ease-out)}
  .in .steps-line path{stroke-dashoffset:0}
  .steps-line circle{fill:var(--brand-blue);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s var(--ease-back)}
  .in .steps-line circle{transform:scale(1)}
  .in .steps-line circle:nth-of-type(1){transition-delay:.2s}.in .steps-line circle:nth-of-type(2){transition-delay:.7s}
  .in .steps-line circle:nth-of-type(3){transition-delay:1.2s}.in .steps-line circle:nth-of-type(4){transition-delay:1.7s}
}

/* Anel de 90 dias da garantia */
.guarantee-ring{width:min(300px,72vw);margin:0 auto;display:block;overflow:visible}
.guarantee-ring .track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:14}
.guarantee-ring .bar{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:150px 150px;transition:stroke-dashoffset 2.2s var(--ease-out)}
.in .guarantee-ring .bar{stroke-dashoffset:0}
.guarantee-ring .num{font:800 72px var(--font-display);fill:#fff}
.guarantee-ring .unit{font:600 14px var(--font-sans);fill:#e6e7ff;letter-spacing:.14em}
.guarantee-ring .tick{fill:#44bde7}
.guarantee-ring .mk{fill:#fff;font:600 12px var(--font-sans)}
.guarantee-ring .head{fill:#44bde7;transform-origin:150px 150px;transform:rotate(-90deg);transition:transform 2.2s var(--ease-out)}
.in .guarantee-ring .head{transform:rotate(270deg)}

/* Decoração do topo das páginas internas */
.page-hero{position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:1}
.hero-deco{position:absolute;right:max(16px,calc((100vw - 1180px)/2));top:50%;width:300px;height:300px;transform:translateY(-50%);pointer-events:none;display:none}
@media (min-width:1180px){.hero-deco{display:block}.page-hero h1,.page-hero .lead{max-width:760px}}
.hero-deco .grid-dots circle{fill:var(--border)}
.hero-deco .xs{fill:none;stroke:var(--brand-navy);stroke-width:14;stroke-linecap:round;opacity:.3;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s .2s var(--ease-out) forwards}
.hero-deco .ck{fill:none;stroke:var(--brand-blue);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s .9s var(--ease-out) forwards}
.hero-deco .orb{fill:none;stroke:var(--brand-cyan);stroke-width:1.5;stroke-dasharray:3 7;transform-origin:150px 150px;animation:spin 50s linear infinite}
.hero-deco .sat{transform-origin:150px 150px;animation:spin 16s linear infinite}
.hero-deco .sat circle{fill:var(--brand-blue)}

/* Capas SVG do blog */
.post-card .thumb{padding:0;background:var(--brand-blue);overflow:hidden;display:block}
.post-card .thumb::after{display:none}
.cover{width:100%;height:100%;display:block}
.cover .r1,.cover .r2{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;transform-origin:330px 80px;transition:transform 1.2s var(--ease-out)}
.cover .r2{stroke:#44bde7;stroke-dasharray:6 8}
.post-card:hover .cover .r1{transform:rotate(25deg) scale(1.06)}
.post-card:hover .cover .r2{transform:rotate(-40deg)}
.cover .ic{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cover .t{font:800 20px var(--font-display);fill:#fff}
.cover .dl{stroke:#44bde7;stroke-width:3;stroke-dasharray:9 6;animation:dashFlow 1.6s linear infinite}
.cover .ig{transform-box:fill-box;transform-origin:center;transition:transform .6s var(--ease-back)}
.post-card:hover .cover .ig{transform:scale(1.12) rotate(-6deg)}

/* WhatsApp com pulso */
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand-blue);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
.stat b{font-variant-numeric:tabular-nums}

/* 404: lupa procurando */
.lupa{width:170px;margin:0 auto 24px;display:block;overflow:visible}
.lupa g{transform-origin:85px 85px;animation:search 4s ease-in-out infinite}
.lupa circle{fill:none;stroke:var(--brand-blue);stroke-width:10}
.lupa path{stroke:var(--brand-navy);stroke-width:14;stroke-linecap:round}
@keyframes search{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(18px,-8px) rotate(8deg)}50%{transform:translate(0,10px)}75%{transform:translate(-18px,-6px) rotate(-8deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-reveal]{opacity:1;transform:none}
}