/* Arlen · LPs projetos-complementares · camada de movimento e interação (rodada de ajustes 04/11/2026).
   Compartilhada pelas 4 LPs + política + 404. Só tokens (tokens.css), sem hex.
   Fail-safe: os estados "antes da animação" só valem com html.fx, que o fx.js liga. Sem o JS, tudo aparece parado.
   A tela de carregamento sai sozinha pelo CSS, mesmo sem JS. */

/* ---------- Tela de carregamento: skyline da marca sobe, nome entra, cortina sobe em duas camadas ---------- */
.ldr,.ldr__cur{position:fixed;inset:0;pointer-events:none}
.ldr{z-index:1000;display:grid;place-items:center;background:var(--c-dark);clip-path:inset(0 0 0 0);animation:ldr-out .85s cubic-bezier(.77,0,.18,1) 1.45s forwards}
.ldr__cur{z-index:999;background:var(--c-primary);clip-path:inset(0 0 0 0);animation:ldr-out .85s cubic-bezier(.77,0,.18,1) 1.6s forwards}
.ldr__in{display:flex;flex-direction:column;align-items:center;gap:18px}
.ldr__ico{width:clamp(88px,9vw,116px);height:auto;clip-path:inset(100% 0 0 0);animation:ldr-rise 1s cubic-bezier(.65,0,.35,1) .05s forwards}
.ldr__nome{width:clamp(120px,12vw,156px);height:auto;opacity:0;translate:0 10px;animation:ldr-in .6s var(--ease) .65s forwards}
.ldr__bar{position:relative;width:clamp(120px,12vw,156px);height:2px;background:color-mix(in srgb,var(--c-white) 14%,transparent);overflow:hidden}
.ldr__bar i{position:absolute;inset:0;background:var(--c-accent);transform:scaleX(0);transform-origin:left;animation:ldr-bar 1.25s cubic-bezier(.65,0,.35,1) .1s forwards}
.ldr.is-leaving,.ldr.is-leaving+.ldr__cur{animation:ldr-cover .42s cubic-bezier(.77,0,.18,1) forwards;pointer-events:auto}
.ldr.is-leaving .ldr__ico{clip-path:none;animation:none}
.ldr.is-leaving .ldr__nome{opacity:1;translate:none;animation:none}
.ldr.is-leaving .ldr__bar i{animation:none;transform:none}
@keyframes ldr-out{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes ldr-cover{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ldr-rise{to{clip-path:inset(0 0 0 0)}}
@keyframes ldr-in{to{opacity:1;translate:none}}
@keyframes ldr-bar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .ldr,.ldr__cur{animation:ldr-fade .3s linear .25s forwards}
  .ldr__ico,.ldr__nome,.ldr__bar i{animation:none;clip-path:none;opacity:1;translate:none;transform:none}
  @keyframes ldr-fade{to{opacity:0;visibility:hidden}}
}

/* ---------- Barra de progresso da leitura (sob o header) ---------- */
.fx-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--c-primary);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ---------- CTA: preenchimento a partir do cursor, texto que rola, seta que troca, botão magnético ---------- */
.btn--fx{position:relative;isolation:isolate;overflow:hidden;gap:14px;padding:0 8px 0 26px;translate:var(--tx,0) var(--ty,0);transition:translate .5s cubic-bezier(.2,.8,.2,1),color .35s var(--ease),box-shadow .45s var(--ease),scale .2s var(--ease);will-change:translate}
.btn--fx:hover,.btn--fx:focus-visible{transform:none}
.btn--fx:active{scale:.97}
.btn--fx .btn__fill{position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,50%);width:var(--d,240px);height:var(--d,240px);border-radius:50%;translate:-50% -50%;scale:0;transition:scale .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.btn--fx:hover .btn__fill,.btn--fx:focus-visible .btn__fill{scale:1}
.btn--fx .btn__lbl{position:relative;display:block;overflow:hidden;line-height:1.25;padding-block:.05em}
.btn--fx .btn__t{display:block;transition:translate .55s cubic-bezier(.7,0,.2,1)}
.btn--fx .btn__t--2{position:absolute;inset:0;translate:0 110%}
.btn--fx:hover .btn__t,.btn--fx:focus-visible .btn__t{translate:0 -110%}
.btn--fx:hover .btn__t--2,.btn--fx:focus-visible .btn__t--2{translate:0 0}
.btn--fx .btn__ic{position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;overflow:hidden;transition:background .4s var(--ease),rotate .5s cubic-bezier(.2,.8,.2,1)}
.btn--fx .btn__ic svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .5s cubic-bezier(.7,0,.2,1)}
.btn--fx .btn__ic svg+svg{translate:-150% 150%}
.btn--fx:hover .btn__ic svg,.btn--fx:focus-visible .btn__ic svg{translate:150% -150%}
.btn--fx:hover .btn__ic svg+svg,.btn--fx:focus-visible .btn__ic svg+svg{translate:0 0}
/* primário (verde da marca): enche de verde-escuro, chip vira branco */
.btn--primary.btn--fx{background:var(--c-primary);color:var(--c-white);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--c-primary) 70%,transparent)}
.btn--primary.btn--fx:hover{background:var(--c-primary);box-shadow:0 18px 34px -16px color-mix(in srgb,var(--c-primary-dark) 80%,transparent)}
.btn--primary.btn--fx .btn__fill{background:var(--c-dark)}
.btn--primary.btn--fx .btn__ic{background:color-mix(in srgb,var(--c-white) 16%,transparent);color:var(--c-white)}
.btn--primary.btn--fx:hover .btn__ic,.btn--primary.btn--fx:focus-visible .btn__ic{background:var(--c-accent);color:var(--c-dark)}
/* sobre grafite: verde-claro que enche de branco, chip grafite */
.btn--on-dark.btn--fx{background:var(--c-accent);color:var(--c-dark);box-shadow:0 12px 30px -14px color-mix(in srgb,var(--c-accent) 60%,transparent)}
.btn--on-dark.btn--fx:hover{background:var(--c-accent)}
.btn--on-dark.btn--fx .btn__fill{background:var(--c-white)}
.btn--on-dark.btn--fx .btn__ic{background:var(--c-dark);color:var(--c-accent)}
.btn--on-dark.btn--fx:hover .btn__ic,.btn--on-dark.btn--fx:focus-visible .btn__ic{background:var(--c-primary);color:var(--c-white)}
/* tamanhos */
.btn--sm.btn--fx{padding:0 6px 0 18px;gap:10px}
.btn--sm.btn--fx .btn__ic{width:32px;height:32px}
.btn--sm.btn--fx .btn__ic svg{width:14px;height:14px}
.btn--lg.btn--fx{padding:0 9px 0 30px}
.btn--lg.btn--fx .btn__ic{width:42px;height:42px}
/* brilho que atravessa os CTAs grandes de tempos em tempos (para no hover) */
.btn--lg.btn--fx::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--c-white) 38%,transparent) 50%,transparent 70%);translate:-120% 0;animation:btn-brilho 5.5s var(--ease) 2.6s infinite;pointer-events:none}
.btn--lg.btn--fx:hover::after{animation:none;opacity:0}
@keyframes btn-brilho{0%{translate:-120% 0}22%,100%{translate:120% 0}}
@media (max-width:560px){.btn--fx{padding:0 7px 0 20px}.btn--sm.btn--fx{padding:0 5px 0 14px}.btn--sm.btn--fx .btn__ic{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){.btn--fx,.btn--fx *{transition:none!important}.btn--lg.btn--fx::after{animation:none;display:none}}

/* ---------- HERO (hx): foto nítida em painel, texto no grafite, marcas de corte e cota de projeto ---------- */
#hero.hx{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;padding-top:var(--header-h);display:flex;align-items:stretch;background:var(--c-dark);color:var(--c-white)}
.hx__media{position:absolute;top:var(--header-h);right:0;bottom:0;width:50vw;z-index:0}
.hx__frame{position:absolute;inset:0;overflow:hidden;background:var(--c-dark-2)}
.hx__par{position:absolute;inset:-4%;will-change:translate}
.hx__img{width:100%;height:100%;object-fit:cover;object-position:var(--hx-pos,50% 50%)}
.hx__shade{position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c-dark) 62%,transparent));pointer-events:none}
.hx__mk{position:absolute;z-index:2;width:22px;height:22px;border:0 solid var(--c-accent);pointer-events:none}
.hx__mk--tl{top:18px;left:18px;border-top-width:2px;border-left-width:2px}
.hx__mk--tr{top:18px;right:18px;border-top-width:2px;border-right-width:2px}
.hx__mk--bl{bottom:18px;left:18px;border-bottom-width:2px;border-left-width:2px}
.hx__mk--br{bottom:18px;right:18px;border-bottom-width:2px;border-right-width:2px}
.hx__cap{position:absolute;z-index:2;left:clamp(20px,2.4vw,32px);bottom:clamp(20px,2.6vw,34px);right:72px;display:flex;align-items:center;gap:12px;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-on-dark)}
.hx__cap::before{content:"";width:28px;height:2px;background:var(--c-accent);flex:0 0 auto}
.hx__cota{position:absolute;z-index:1;top:calc(var(--header-h) + 18px);bottom:18px;left:calc(50vw - 30px);width:12px;pointer-events:none}
.hx__cota i{position:absolute;left:5px;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--c-white) 34%,transparent);transform-origin:top}
.hx__cota::before,.hx__cota::after{content:"";position:absolute;left:0;width:12px;height:1px;background:color-mix(in srgb,var(--c-white) 55%,transparent);rotate:-45deg}
.hx__cota::before{top:0}.hx__cota::after{bottom:0}
.hx__grid{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(36px,5vh,64px);padding-block:clamp(40px,7vh,88px) clamp(32px,5vh,56px)}
.hx__txt{max-width:calc(50vw - max(var(--px),calc((100vw - var(--container)) / 2 + var(--px))) - 72px)}
.hx .h1{color:var(--c-white);font-size:clamp(2.25rem,3.7vw,3.5rem);line-height:1.06;letter-spacing:-.025em}
.hx__apoio{margin-top:clamp(18px,2.4vh,26px);max-width:46ch;font-size:var(--fs-lead);line-height:1.55;color:var(--c-on-dark)}
.hx__cta{margin-top:clamp(26px,3.6vh,40px)}
.hx .btn--lg{min-height:58px;font-size:1.0625rem}
.hx__idx{display:grid;grid-template-columns:1fr 1fr;max-width:calc(50vw - max(var(--px),calc((100vw - var(--container)) / 2 + var(--px))) - 72px);border-top:1px solid color-mix(in srgb,var(--c-white) 16%,transparent)}
.hx__idx a{position:relative;display:flex;align-items:baseline;gap:12px;padding:16px 16px 16px 0;font-family:var(--font-display);font-weight:500;font-size:.9375rem;line-height:1.3;color:var(--c-on-dark);transition:color var(--dur-fast) var(--ease)}
.hx__idx a::after{content:"";position:absolute;left:0;right:16px;bottom:-1px;height:2px;background:var(--c-accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hx__idx a:hover,.hx__idx a:focus-visible{color:var(--c-white)}
.hx__idx a:hover::after,.hx__idx a:focus-visible::after{transform:scaleX(1)}
.hx__idx a{border-bottom:1px solid color-mix(in srgb,var(--c-white) 16%,transparent)}
.hx__n{font-family:var(--font-body);font-size:.75rem;font-weight:500;color:var(--c-accent);font-variant-numeric:tabular-nums}
.hx__rolar{position:absolute;z-index:2;left:max(var(--px),calc((100vw - var(--container)) / 2 + var(--px)));bottom:0;width:1px;height:clamp(36px,6vh,64px);background:color-mix(in srgb,var(--c-white) 18%,transparent);overflow:hidden}
.hx__rolar i{position:absolute;left:0;top:0;width:1px;height:40%;background:var(--c-accent);animation:hx-rolar 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes hx-rolar{0%{translate:0 -100%}100%{translate:0 260%}}
@media (max-width:1024px){
  #hero.hx{display:block;min-height:0}
  .hx__media{position:relative;top:auto;width:100%;height:min(58svh,560px);min-height:300px}
  .hx__cota,.hx__rolar{display:none}
  .hx__grid{padding-block:clamp(32px,6vw,48px) clamp(40px,7vw,64px)}
  .hx__txt,.hx__idx{max-width:640px}
}
@media (max-width:560px){
  .hx__media{height:46svh;min-height:260px}
  .hx .h1{font-size:clamp(1.875rem,8.4vw,2.25rem)}
  .hx .btn--lg{width:100%;justify-content:space-between}
  .hx__idx{display:none}
  .hx__cap{right:44px;font-size:.6875rem}
  .hx__mk{width:16px;height:16px}
  .hx__mk--tl,.hx__mk--tr{top:12px}.hx__mk--bl,.hx__mk--br{bottom:12px}.hx__mk--tl,.hx__mk--bl{left:12px}.hx__mk--tr,.hx__mk--br{right:12px}
}
/* intro do hero: começa quando a cortina sobe (html.fx-pronto) */
@media (prefers-reduced-motion:no-preference){
  .fx .hx__frame{clip-path:inset(0 0 0 100%);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
  .fx .hx__img{scale:1.22;transition:scale 2s cubic-bezier(.16,1,.3,1)}
  .fx .hx__mk{opacity:0;scale:.4;transition:opacity .5s var(--ease),scale .7s cubic-bezier(.2,.8,.2,1)}
  .fx .hx__mk--tl{transition-delay:.7s}.fx .hx__mk--tr{transition-delay:.78s}.fx .hx__mk--br{transition-delay:.86s}.fx .hx__mk--bl{transition-delay:.94s}
  .fx .hx__cap{opacity:0;translate:-16px 0;transition:opacity .6s var(--ease) 1s,translate .8s cubic-bezier(.2,.8,.2,1) 1s}
  .fx .hx__cota i{transform:scaleY(0);transition:transform 1.4s cubic-bezier(.77,0,.18,1) .3s}
  .fx .hx__cota::before,.fx .hx__cota::after{opacity:0;transition:opacity .4s var(--ease) 1.2s}
  .fx .hx__apoio,.fx .hx__cta{opacity:0;translate:0 18px;transition:opacity .7s var(--ease),translate .9s cubic-bezier(.2,.8,.2,1)}
  .fx .hx__apoio{transition-delay:.55s}.fx .hx__cta{transition-delay:.7s}
  .fx .hx__idx a{opacity:0;translate:0 12px;transition:opacity .6s var(--ease) calc(.85s + var(--k,0) * 80ms),translate .7s cubic-bezier(.2,.8,.2,1) calc(.85s + var(--k,0) * 80ms),color var(--dur-fast) var(--ease)}
  .fx.fx-pronto .hx__frame{clip-path:inset(0 0 0 0)}
  .fx.fx-pronto .hx__img{scale:1}
  .fx.fx-pronto .hx__mk{opacity:1;scale:1}
  .fx.fx-pronto .hx__cap{opacity:1;translate:none}
  .fx.fx-pronto .hx__cota i{transform:none}
  .fx.fx-pronto .hx__cota::before,.fx.fx-pronto .hx__cota::after{opacity:1}
  .fx.fx-pronto .hx__apoio,.fx.fx-pronto .hx__cta,.fx.fx-pronto .hx__idx a{opacity:1;translate:none}
  @media (max-width:1024px){.fx .hx__frame{clip-path:inset(0 0 100% 0)}}
}

/* ---------- Títulos: palavras sobem de dentro de uma máscara ---------- */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.fx-wi{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .fx .fx-split[data-reveal],.fx .fx-split{opacity:1;transform:none}
  .fx .fx-split .fx-wi{translate:0 108%;rotate:4deg;transform-origin:left bottom;transition:translate .95s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 38ms),rotate .95s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 38ms)}
  .fx .fx-split.is-in .fx-wi,.fx.fx-pronto .hx .fx-split .fx-wi{translate:0 0;rotate:0deg}
  .fx .hx .fx-split .fx-wi{transition-delay:calc(.15s + var(--i,0) * 45ms)}
}

/* ---------- Frase que acende palavra por palavra conforme a rolagem ---------- */
.fx .fx-lit .fx-l{opacity:var(--o,.16);transition:opacity .25s linear}
.bg-dark .fx-lit .fx-l{opacity:var(--o,.22)}

/* ---------- Fotos: máscara que abre de baixo para cima + paralaxe dentro da moldura ---------- */
@media (prefers-reduced-motion:no-preference){
  .fx [data-fx-clip]{clip-path:inset(100% 0 0 0);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1) calc(var(--i,0) * 110ms)}
  .fx [data-fx-clip].is-in{clip-path:inset(0 0 0 0)}
  .fx [data-fx-clip] img{scale:1.18;transition:scale 1.6s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 110ms)}
  .fx [data-fx-clip].is-in img{scale:1}
  .fx [data-fx-clip][data-fx-px].is-in img{scale:1.12}
  .fx [data-fx-px] img{translate:0 var(--py,0)}
}

/* ---------- Seções de contraste se abrem de cartão para a largura toda ---------- */
@media (prefers-reduced-motion:no-preference){
  .fx [data-fx-abre]{clip-path:inset(0 var(--ab-x,0px) round var(--ab-r,0px))}
}

/* ---------- Seção travada (data-pin): no desktop a rolagem passa pelos passos com a seção parada ---------- */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .fx [data-pin]{padding-block:0}
  .fx [data-pin] .pin__track{height:calc(100vh + var(--n,4) * 55vh)}
  .fx [data-pin] .pin__pin{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));min-height:600px;display:flex;align-items:center}
  .fx [data-pin] .pin__pin>.container{width:100%}
}

/* ---------- Números de fundo e marcas que andam em velocidade diferente ---------- */
.fx [data-fx-vel]{translate:0 var(--vy,0)}