/* Landing: camadas de animação sobre os estilos de entrada.css (GSAP + three.js). */
#cena{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.l-cabeca,main,.l-rodape{position:relative;z-index:1}
.l-progresso{position:fixed;inset:0 0 auto 0;height:3px;z-index:20;background:transparent}
.l-progresso i{display:block;height:100%;width:100%;background:var(--ouro);transform:scaleX(0);transform-origin:left}

.l-cabeca{position:sticky;top:0;max-width:none;padding:14px max(20px,calc((100vw - 1080px)/2));backdrop-filter:blur(10px);background:linear-gradient(180deg,rgb(8 20 15 / .7),rgb(8 20 15 / 0))}

/* Herói: ocupa a primeira tela inteira e deixa a casa 3D aparecer ao lado do texto. */
.l-heroi{min-height:calc(100svh - 76px);align-content:center;padding-block:40px 90px;position:relative}
.l-heroi h1{font-size:clamp(2.3rem,7vw,4.6rem);max-width:12ch;text-wrap:balance}
.l-heroi .acoes .btn.sec{color:#fff;border-color:rgb(255 255 255 / .45)}
.l-heroi .acoes .btn.sec:hover{background:rgb(255 255 255 / .1)}
.l-selo{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#e4cb8a;border:1px solid rgb(228 203 138 / .4);border-radius:999px;padding:6px 14px;background:rgb(8 20 15 / .35)}
.l-selo::before{content:"";width:6px;height:6px;border-radius:50%;background:#e4cb8a;box-shadow:0 0 0 0 rgb(228 203 138 / .7);animation:pulso 2s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 8px rgb(228 203 138 / 0)}100%{box-shadow:0 0 0 0 rgb(228 203 138 / 0)}}
.p{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.p-i{display:inline-block;will-change:transform}
.l-rolar{position:absolute;left:20px;bottom:28px;width:26px;height:42px;border:2px solid rgb(246 241 225 / .55);border-radius:14px;display:block}
.l-rolar span{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#e4cb8a;animation:rolar 1.8s ease-in-out infinite}
@keyframes rolar{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Faixa de palavras correndo. */
.l-faixa{overflow:hidden;border-block:1px solid rgb(228 203 138 / .25);background:rgb(8 20 15 / .55);backdrop-filter:blur(6px);padding:14px 0}
.l-faixa-trilho{display:flex;gap:44px;width:max-content;animation:faixa 32s linear infinite;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:1.3rem;color:#f6f1e1}
.l-faixa-trilho span::after{content:"✦";margin-left:44px;color:#c6a456}
@keyframes faixa{to{transform:translateX(-50%)}}

/* Vitrine: texto de um lado, ilustração do outro, alternando. */
.l-vitrine{max-width:1080px;margin:0 auto;padding:60px 20px 20px;display:grid;gap:clamp(56px,10vw,120px)}
.l-linha{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,64px);align-items:center}
.l-linha.inv{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.l-linha.inv .l-texto{order:2}
.l-texto{display:grid;gap:14px;justify-items:start;color:#f6f1e1}
.l-kicker{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#e4cb8a}
.l-texto h2{font-size:clamp(1.6rem,3.6vw,2.4rem);color:#fff;text-wrap:balance}
.l-texto p{opacity:.9}
.l-texto ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.l-texto li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.l-texto li::before{content:"";flex:none;margin-top:.45em;width:8px;height:8px;border-radius:50%;background:var(--ouro)}
.l-imagem{perspective:1100px}
.l-imagem img{display:block;width:100%;height:auto;will-change:transform;transform-style:preserve-3d}

.l-card{transition:box-shadow .3s}
.l-card:hover{box-shadow:0 30px 50px -22px rgb(2 14 10 / .9),0 0 0 1px rgb(198 164 86 / .6)}

/* Números. */
.l-numeros{max-width:1080px;margin:0 auto;padding:36px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.l-numeros div{display:grid;gap:4px;padding:26px 22px;border-radius:16px;background:rgb(8 20 15 / .55);backdrop-filter:blur(8px);border:1px solid rgb(228 203 138 / .25)}
.l-numeros b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;background:var(--ouro);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.l-numeros span{color:#f6f1e1;opacity:.85;font-size:.92rem}

/* Passos com linha que se desenha na rolagem. */
.l-passos{position:relative;display:grid;gap:18px;padding-left:58px}
.l-trilha{position:absolute;left:16px;top:17px;bottom:17px;width:2px;background:rgb(246 241 225 / .2);border-radius:1px}
.l-trilha i{display:block;width:100%;height:100%;background:var(--ouro);transform:scaleY(0);transform-origin:top}
.l-passo{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--surface);color:var(--ink);border-radius:16px;padding:18px 20px;box-shadow:0 20px 40px -24px rgb(2 14 10 / .8)}
.l-passo .num{position:absolute;left:-58px;top:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ouro);color:var(--on-gold);font-weight:700;box-shadow:0 0 0 6px rgb(8 20 15 / .6)}
.l-passo h3{font-size:1.05rem;margin-bottom:4px}
.l-passo p{color:var(--muted);font-size:.93rem}

.l-fim .cartao{position:relative;overflow:hidden}
.l-fim .cartao::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgb(228 203 138 / .22) 50%,transparent 65%);transform:translateX(-120%);animation:brilho 5s ease-in-out infinite;pointer-events:none}
@keyframes brilho{40%,100%{transform:translateX(120%)}}

/* Estado inicial só quando o JS vai animar (classe .anima, ausente com movimento reduzido). */
.anima [data-entra],.anima .l-card,.anima .l-texto>*,.anima .l-imagem,.anima .l-numeros div,.anima .l-passo,.anima .l-fim .cartao{opacity:0}
.anima .p-i{transform:translateY(110%)}
.anima.sem-gsap [data-entra],.anima.sem-gsap .l-card,.anima.sem-gsap .l-texto>*,.anima.sem-gsap .l-imagem,.anima.sem-gsap .l-numeros div,.anima.sem-gsap .l-passo,.anima.sem-gsap .l-fim .cartao{opacity:1}
.anima.sem-gsap .p-i{transform:none}

@media (max-width:820px){
  .l-linha,.l-linha.inv{grid-template-columns:1fr}
  .l-linha.inv .l-texto{order:0}
  .l-heroi{align-content:end;padding-bottom:90px}
  .l-heroi h1{max-width:14ch}
}
@media (prefers-reduced-motion:reduce){
  .l-faixa-trilho,.l-selo::before,.l-rolar span,.l-fim .cartao::after{animation:none}
}