/* ═════════════════ Exata RH — FX: fotos, rede, mapa, scanner, parallax ═════════════════ */

/* Barra de progresso de leitura */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan));transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:80;pointer-events:none}

/* Títulos: palavras sobem em cascata */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;transform:translateY(105%);animation:wordUp .9s var(--ease-out) forwards;animation-delay:calc(var(--w) * 70ms + 80ms)}
@keyframes wordUp{to{transform:none}}

/* Cards com holofote que segue o cursor */
.card{position:relative;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand-blue) 9%,transparent),transparent 45%);opacity:0;transition:opacity .3s;z-index:-1;pointer-events:none}
.card:hover::before{opacity:1}

/* Imagens com duotone da marca */
.duo{position:relative;overflow:hidden;background:#0b0f24}
.duo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease-out)}
.duo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(17,21,255,.0) 40%,rgba(17,21,255,.35));mix-blend-mode:multiply;pointer-events:none}

/* ── Moldura "scanner" das páginas internas ── */
.page-hero.has-photo .hero-grid{display:grid;gap:40px;align-items:center}
@media (min-width:980px){.page-hero.has-photo .hero-grid{grid-template-columns:1.08fr .92fr}.page-hero.has-photo .hero-deco{display:none}}
.scan{position:relative;margin:0;border-radius:var(--radius-lg);aspect-ratio:4/3.4;max-height:520px;width:100%}
.scan .duo{position:absolute;inset:0;border-radius:var(--radius-lg)}
.scan .duo img{transform:scale(1.08)}
.scan.in .duo img{transform:scale(1)}
.scan-ring{position:absolute;inset:-18px;width:calc(100% + 36px);height:calc(100% + 36px);pointer-events:none;overflow:visible}
.scan-ring rect{fill:none;stroke:var(--brand-cyan);stroke-width:1.5;stroke-dasharray:6 10;animation:dashFlow 3s linear infinite}
.scan-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.scan-br{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.scan-br .br{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease-out)}
.scan.in .scan-br{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.scan-br .br{stroke-dashoffset:0}
.scan.in .scan-br .br:nth-of-type(2){transition-delay:.15s}.scan.in .scan-br .br:nth-of-type(3){transition-delay:.3s}.scan.in .scan-br .br:nth-of-type(4){transition-delay:.45s}
.scan-svg .line{fill:url(#scanGrad);opacity:0}
.scan.in .scan-svg .line{animation:scanY 3.6s 1s ease-in-out infinite}
@keyframes scanY{0%{transform:translateY(0);opacity:0}10%{opacity:1}50%{transform:translateY(calc(var(--h,400px) - 60px));opacity:1}60%,100%{opacity:0;transform:translateY(calc(var(--h,400px) - 60px))}}
.scan-svg .pt{fill:#fff;opacity:0}
.scan.in .scan-svg .pt{animation:ptBlink 3.6s ease-in-out infinite}
@keyframes ptBlink{0%,100%{opacity:0;transform:scale(.4)}40%,60%{opacity:.95;transform:scale(1)}}
.scan-svg .pt{transform-box:fill-box;transform-origin:center}
.scan .chip{animation-delay:1.4s,2.2s}
.scan .chip.s1{left:-22px;bottom:12%}
.scan .chip.s2{right:-18px;top:10%;animation-delay:1.9s,2.8s}
.scan .chip .ck path{animation-delay:1.8s}
.scan .chip.s2 .ck path{animation-delay:2.3s}
@media (max-width:560px){.scan .chip.s1{left:-6px;bottom:8%}.scan .chip.s2{right:-6px;top:auto;bottom:-16px}.scan{aspect-ratio:4/3.6;margin-bottom:12px}}
.scan .tag-live{position:absolute;left:18px;top:18px;display:flex;gap:8px;align-items:center;background:rgba(11,15,36,.65);backdrop-filter:blur(6px);color:#fff;font:600 12px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:999px;z-index:2}
.scan .tag-live i{width:8px;height:8px;border-radius:50%;background:#44bde7;box-shadow:0 0 0 0 rgba(68,189,231,.7);animation:live 1.6s infinite}
@keyframes live{70%{box-shadow:0 0 0 10px rgba(68,189,231,0)}100%{box-shadow:0 0 0 0 rgba(68,189,231,0)}}

/* ── Rede de candidatos atrás do retrato (home) ── */
.net{position:absolute;left:-22%;top:-18%;width:144%;height:136%;z-index:0;pointer-events:none;overflow:visible}
.portrait-stage>.portrait,.portrait-stage>.chip{position:relative;z-index:1}
.portrait-stage>.chip{position:absolute}
.net .ln{fill:none;stroke:var(--brand-blue);stroke-opacity:.22;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s var(--ease-out) forwards}
.net .nd{fill:var(--surface-card);stroke:var(--brand-navy);stroke-width:2}
.net .nd-g{transform-box:fill-box;transform-origin:center;opacity:0;animation:ndIn .6s var(--ease-back) forwards}
@keyframes ndIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.net .av{fill:var(--brand-navy);opacity:.55}
.net .pulse{fill:var(--brand-cyan)}
.net .sel circle.nd{stroke:var(--brand-blue);stroke-width:3;animation:selStroke 4.8s ease-in-out infinite}
.net .sel .ring{fill:none;stroke:var(--brand-blue);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:selRing 2.4s ease-out infinite}
@keyframes selRing{from{transform:scale(1);opacity:.9}to{transform:scale(2.4);opacity:0}}
@keyframes selStroke{0%,100%{stroke:var(--brand-navy)}30%,70%{stroke:var(--brand-blue)}}
@media (max-width:720px){.net{display:none}}

/* ── Faixa de fotos em movimento ── */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee+.marquee{margin-top:20px}
.marquee .track{display:flex;gap:20px;width:max-content;animation:marq 60s linear infinite}
.marquee.rev .track{animation-direction:reverse;animation-duration:70s}
.marquee:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - 10px))}}
.ph{position:relative;flex:none;width:300px;height:220px;border-radius:24px;overflow:hidden;margin:0}
.ph.tall{width:220px}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.ph:hover img{transform:scale(1.07)}
.ph figcaption{position:absolute;left:12px;bottom:12px;right:12px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);color:#212121;border-radius:999px;padding:7px 12px 7px 7px;font:600 13px var(--font-sans);transform:translateY(8px);opacity:.96;transition:transform .4s var(--ease-out)}
.ph:hover figcaption{transform:none}
.ph figcaption b{width:22px;height:22px;border-radius:50%;background:#1115ff;display:grid;place-items:center;flex:none}
.ph figcaption b svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* ── Mapa/rede Brasil ── */
.brasil{position:relative;overflow:hidden;color:#fff;background:#070b2a}
.brasil .bg{position:absolute;inset:-12% 0;z-index:0}
.brasil .bg img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.7)}
.brasil .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(17,21,255,.55),rgba(7,11,42,.92) 70%)}
.brasil .wrap{position:relative;z-index:1}
.brasil h2,.brasil p,.brasil li{color:#fff}
.brasil p{color:#d7dafc}
.brasil-grid{display:grid;gap:40px;align-items:center}
@media (min-width:980px){.brasil-grid{grid-template-columns:.9fr 1.1fr}}
.map{width:100%;max-width:560px;margin:0 auto;display:block;overflow:visible}
.map .dot{fill:rgba(160,175,255,.34)}
.map .arc{fill:none;stroke:url(#arcGrad);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out)}
.in .map .arc{stroke-dashoffset:0}
.map .city{fill:#fff;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s var(--ease-back)}
.in .map .city{transform:scale(1)}
.map .halo{fill:none;stroke:#44bde7;stroke-width:1.2;transform-box:fill-box;transform-origin:center;opacity:0}
.in .map .halo{animation:halo 3s ease-out infinite}
@keyframes halo{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.map .hub{fill:#44bde7}
.map .hub-ring{fill:none;stroke:#44bde7;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:halo 2.2s ease-out infinite}
.map .lb{font:600 10px var(--font-sans);fill:#cfd3ff;opacity:0;transition:opacity .6s}
.in .map .lb{opacity:1}
.map .lb.hub-lb{font:800 12px var(--font-display);fill:#fff}
.map .tr{fill:#fff}
.brasil .kpis{display:flex;flex-wrap:wrap;gap:28px;margin:24px 0}
.brasil .kpis b{display:block;font:800 40px/1 var(--font-display);color:#fff}
.brasil .kpis span{font-size:14px;color:#c9cdfb}

/* ── Cards com foto (setores) ── */
.card.has-img{padding:0;overflow:hidden}
.card.has-img .duo{height:170px}
.card.has-img .body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.card.has-img:hover .duo img{transform:scale(1.06)}
.card.has-img .icon{margin-top:-52px;position:relative;z-index:2;background:var(--surface-card);box-shadow:var(--shadow-card);border:1px solid var(--border)}

/* ── Capas do blog com foto ── */
.post-card .thumb{position:relative}
.post-card .thumb .duo{position:absolute;inset:0}
.post-card .thumb .duo img{opacity:1}
.post-card .thumb .duo::after{background:linear-gradient(115deg,rgba(17,21,255,.9) 30%,rgba(17,21,255,.35) 75%,rgba(17,21,255,.15));mix-blend-mode:normal}
.post-card .thumb .cover{position:relative;z-index:1}
.post-card:hover .thumb .duo img{transform:scale(1.08)}

/* Faixa com foto de fundo + parallax (bloco de CTA) */
.band{position:relative;overflow:hidden;color:#fff}
.band .bg{position:absolute;inset:-15% 0;z-index:0}
.band .bg img{width:100%;height:100%;object-fit:cover}
.band .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(17,21,255,.94) 30%,rgba(17,21,255,.7))}
.band .wrap{position:relative;z-index:1}

/* Linha do tempo com progresso pelo scroll (como funciona) */
.prose h2{position:relative}

@media (prefers-reduced-motion:reduce){
  .w>span{transform:none!important;animation:none!important}
  .marquee .track{animation:none!important}
  .scan .duo img{transform:none!important}
  .progress{display:none}
}