@charset "UTF-8";
/* ==========================================================
   CARCAÇAS JOINVILLE · camada de acabamento e movimento (v3.1)
   Tudo aqui é sutil e respeita prefers-reduced-motion.
   ========================================================== */

/* ---------- base: seleção, foco, âncora com folga da nav ---------- */
html{scroll-padding-top:84px}
::selection{background:var(--amarelo); color:#161206}
a:focus-visible, summary:focus-visible{outline:2px solid var(--amarelo); outline-offset:3px; border-radius:6px}

/* ---------- grão fino por cima de tudo (textura de chapa) ---------- */
body::before{content:""; position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px}

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

/* ---------- nav: afina ao rolar + sublinhado que entra por um lado e sai pelo outro ---------- */
.nav .wrap{transition:height .3s cubic-bezier(.2,.7,.2,1)}
.nav .brand img{transition:height .3s cubic-bezier(.2,.7,.2,1)}
header.nav.scrolled .wrap{height:60px}
header.nav.scrolled .brand img{height:32px}
.nav .links a:not(.btn-wa){position:relative; padding:4px 0; transition:color .2s}
.nav .links a:not(.btn-wa)::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--amarelo); transform:scaleX(0); transform-origin:100% 50%; transition:transform .38s cubic-bezier(.65,0,.35,1)}
.nav .links a:not(.btn-wa):hover::after, .nav .links a.active::after{transform:scaleX(1); transform-origin:0 50%}
.nav .links a.active{color:#fff}

/* ---------- hero: entrada escalonada, foto com zoom lento, selo flutuando, marca d'água ---------- */
.js .hero .reveal:first-child{opacity:1; transform:none}
.js .hero .reveal:first-child>*{opacity:0; transform:translateY(18px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1)}
.js .hero .reveal:first-child.in>*{opacity:1; transform:none}
.js .hero .reveal:first-child.in>:nth-child(1){transition-delay:.05s}
.js .hero .reveal:first-child.in>:nth-child(2){transition-delay:.16s}
.js .hero .reveal:first-child.in>:nth-child(3){transition-delay:.28s}
.js .hero .reveal:first-child.in>:nth-child(4){transition-delay:.40s}
.js .hero .reveal:first-child.in>:nth-child(5){transition-delay:.52s}
.js .hphoto.reveal{transition-delay:.25s; transition-duration:.9s}
.hphoto img{translate:0 var(--py,0px); transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.js .hphoto.reveal img{transform:scale(1.05)}
.js .hphoto.reveal.in img{transform:scale(1)}
.hbadge{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
.hero .wm{position:absolute; right:-1vw; bottom:-.12em; z-index:0; font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(96px,17vw,240px); line-height:1; letter-spacing:.03em; color:transparent; -webkit-text-stroke:1px rgba(244,194,12,.11); pointer-events:none; user-select:none; white-space:nowrap}
.hero .wrap{z-index:1}
@media(max-width:920px){ .hero .wm{right:-4vw; -webkit-text-stroke-color:rgba(244,194,12,.08)} }

/* ---------- botões: brilho que atravessa + ícone que anda ---------- */
.b-primary, .b-dark, .btn-wa{position:relative; overflow:hidden; isolation:isolate}
.b-primary::before, .b-dark::before, .btn-wa::before{content:""; position:absolute; top:-20%; bottom:-20%; left:-70%; width:45%; z-index:-1; transform:skewX(-20deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent); transition:left .7s cubic-bezier(.2,.7,.2,1); pointer-events:none}
.b-dark::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent)}
.b-primary:hover::before, .b-dark:hover::before, .btn-wa:hover::before{left:125%}
.b-primary svg, .b-dark svg, .btn-wa svg{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.b-primary:hover svg, .b-dark:hover svg, .btn-wa:hover svg{transform:translateX(2px) rotate(-6deg)}
.b-ghost{position:relative; overflow:hidden; isolation:isolate}
.b-ghost::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(244,194,12,.1); transform:translateY(101%); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.b-ghost:hover{background:transparent}
.b-ghost:hover::before{transform:translateY(0)}

/* ---------- reveal com escalonamento entre irmãos (JS define --d) ---------- */
.js .reveal{transition-delay:var(--d,0ms)}

/* ---------- cabeçalho de seção: linha que cresce a partir do número ---------- */
.shead{position:relative; padding-bottom:20px}
.shead::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--amarelo) 0,rgba(244,194,12,.4) 28%,var(--linha) 62%,transparent 100%);
  transform:scaleX(0); transform-origin:0 50%; transition:transform 1s cubic-bezier(.2,.7,.2,1) .25s}
.shead.in::after, html:not(.js) .shead::after{transform:scaleX(1)}
.shead .n{transition:background .4s, color .4s, border-color .4s}
.shead.in .n{background:var(--amarelo); color:#161206; border-color:var(--amarelo)}

/* ---------- cards: foco de luz que acompanha o mouse (só em quem tem mouse) ---------- */
@media(hover:hover){
  .spot{position:relative; isolation:isolate}
  .spot::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(244,194,12,.11), transparent 62%)}
  .spot:hover::before{opacity:1}
}
.bpc, .step, .pitem, .recitem, .sig, .vstat{transition:transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s}
.bpc:hover, .step:hover, .pitem:hover, .recitem:hover, .sig:hover{transform:translateY(-3px); border-color:rgba(244,194,12,.45)}

/* ---------- stats: fio amarelo que cresce embaixo de cada número ---------- */
.vstat{position:relative; overflow:hidden}
.vstat::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--amarelo),transparent); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .35s}
.vstats.in .vstat::after, html:not(.js) .vstat::after{transform:scaleX(1)}
.vstats.in .vstat:nth-child(2)::after{transition-delay:.5s}
.vstats.in .vstat:nth-child(3)::after{transition-delay:.65s}
.vstats.in .vstat:nth-child(4)::after{transition-delay:.8s}

/* ---------- esquema do cardan: traço que se desenha, marcadores que pousam, card ↔ ponto ---------- */
.bp svg .draw{transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1), fill-opacity .8s ease}
.js .bp:not(.drawn) svg .draw{fill-opacity:0}
.bp svg .mk{transform-box:fill-box; transform-origin:center; transition:transform .55s cubic-bezier(.34,1.4,.64,1), filter .25s}
.js .bp:not(.drawn) svg .mk{transform:scale(0)}
.bp svg .mk.hi{transform:scale(1.22); filter:drop-shadow(0 0 7px rgba(244,194,12,.95))}
.bp svg circle.mk{cursor:pointer}
.bpc.hi{transform:translateY(-3px); border-color:var(--amarelo); box-shadow:0 10px 26px rgba(244,194,12,.12)}

/* ---------- processo: linha que liga os 5 passos (desktop) ---------- */
.steps{position:relative}
.step{z-index:1}
@media(min-width:901px){
  .steps::before{content:""; position:absolute; left:16px; right:16px; top:41px; height:2px; z-index:0;
    background:linear-gradient(90deg,var(--amarelo),rgba(244,194,12,.35));
    transform:scaleX(0); transform-origin:0 50%; transition:transform 1.5s cubic-bezier(.2,.7,.2,1) .3s}
  .steps.in::before, html:not(.js) .steps::before{transform:scaleX(1)}
}
.step .sn{transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.step:hover .sn{transform:rotate(-6deg) scale(1.08)}

/* ---------- marcas: pausa ao passar o mouse ---------- */
.marquee:hover .mtrack{animation-play-state:paused}
.chip{transition:color .2s, border-color .2s, transform .2s}
.chip:hover{color:var(--amarelo); border-color:rgba(244,194,12,.45); transform:translateY(-2px)}

/* ---------- fotos e fundo: leve paralaxe (JS escreve --py) ---------- */
.recphoto img{translate:0 var(--py,0px)}
.pledge .bg{translate:0 var(--py,0px); transform:scale(1.12)}

/* ---------- time: avatar ganha respiro ---------- */
.tcard .av, .tcard .mono{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s}
.tcard:hover .av, .tcard:hover .mono{transform:scale(1.04); box-shadow:0 0 0 6px rgba(244,194,12,.1)}

/* ---------- FAQ: resposta entra suave ---------- */
.qa{transition:border-color .25s}
.qa:hover{border-color:rgba(244,194,12,.35)}
.qa[open] .ans{animation:faqin .38s cubic-bezier(.2,.7,.2,1)}
@keyframes faqin{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ---------- CTA final: listras andando bem devagar ---------- */
.final::before{animation:stripes 22s linear infinite}
@keyframes stripes{to{background-position:31.113px -31.113px}}

/* ---------- rodapé: links com sublinhado deslizante ---------- */
footer ul a{position:relative; transition:color .2s}
footer ul a::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:var(--amarelo); transform:scaleX(0); transform-origin:100% 50%; transition:transform .3s cubic-bezier(.65,0,.35,1)}
footer ul a:hover::after{transform:scaleX(1); transform-origin:0 50%}

/* ---------- WhatsApp flutuante: entra depois que a pessoa começa a ler ---------- */
.js .wafab{opacity:0; transform:translateY(24px) scale(.9); transition:opacity .45s ease, transform .45s cubic-bezier(.34,1.3,.64,1)}
.js .wafab.on{opacity:1; transform:none}
.js .wafab.on:hover{transform:translateY(-2px)}

/* ---------- movimento reduzido: tudo estático ---------- */
@media(prefers-reduced-motion:reduce){
  .progress{display:none}
  .hbadge, .final::before{animation:none}
  .js .hero .reveal:first-child>*{opacity:1; transform:none; transition:none}
  .js .hphoto.reveal img{transform:none}
  .shead::after, .vstat::after, .steps::before{transform:scaleX(1); transition:none}
  .js .bp:not(.drawn) svg .draw{fill-opacity:1}
  .js .bp:not(.drawn) svg .mk{transform:none}
  .bp svg .draw{stroke-dasharray:none !important; stroke-dashoffset:0 !important}
  .hphoto img, .recphoto img, .pledge .bg{translate:0 0}
  .js .wafab{opacity:1; transform:none}
  .qa[open] .ans{animation:none}
}