@font-face{font-family:"Archivo";src:url(../fontes/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --preto:#070605;
  --preto-2:#110f0b;
  --ouro:#d4af37;
  --ouro-claro:#f3cf5b;
  --ouro-escuro:#8a6d17;
  --texto:#f6f2e8;
  --texto-2:#b9b2a1;
  --linha:rgba(212,175,55,.22);
  --raio:18px;
  --lado:max(16px,env(safe-area-inset-left));
  --fonte:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:radial-gradient(70% 50% at 50% 35%,#2a210a,transparent 70%),var(--preto);color:var(--texto);font-family:var(--fonte);font-size:17px;line-height:1.55;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
em{font-style:normal;color:var(--ouro-claro)}
::selection{background:var(--ouro);color:var(--preto)}
:focus-visible{outline:3px solid var(--ouro-claro);outline-offset:3px;border-radius:6px}

/* ---------- fundo (shader) ---------- */
.fundo{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:0;transition:opacity 1.4s ease}
.fundo.ligado{opacity:1}
.fundo-sombra{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,6,5,.35),transparent 25%,transparent 65%,rgba(7,6,5,.7))}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:56px var(--lado) 88px;text-align:center}
.hero-selo{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro)}
.hero-nome{position:relative;display:flex;flex-direction:column;align-items:center;font-weight:900;font-stretch:78%;font-size:clamp(84px,27vw,250px);line-height:.8;letter-spacing:-.035em;color:var(--ouro);text-shadow:0 10px 50px rgba(0,0,0,.55)}
.hero-linha{display:block;white-space:nowrap}
.hero-linha:first-child{color:var(--ouro-claro)}
.hero-foto{position:absolute;left:50%;top:50%;z-index:2;width:clamp(52px,14vw,150px);aspect-ratio:3/5;border-radius:999px;overflow:hidden;border:3px solid var(--ouro);box-shadow:0 0 0 6px rgba(7,6,5,.85),0 20px 60px rgba(0,0,0,.7),0 0 60px rgba(212,175,55,.35);transform:translate(-50%,-50%);transition:transform .35s ease}
.hero-foto:hover{transform:translate(-50%,-50%) scale(1.06)}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:42% 28%}
.hero-frase{display:flex;flex-wrap:wrap;justify-content:center;max-width:20ch;font-size:clamp(24px,5.4vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.02em;text-transform:uppercase}
.hero-sub{max-width:46ch;color:var(--texto-2);font-size:clamp(15px,2vw,18px)}

/* letras e palavras animadas (blur) */
.letras .l,.palavras .p{display:inline-block;animation:desfoca .7s ease-out var(--d,0ms) both}
.anima{animation:sobe .8s ease var(--d,0ms) both}
@keyframes desfoca{from{filter:blur(12px);opacity:0;transform:translateY(-22px)}to{filter:blur(0);opacity:1;transform:none}}
@keyframes sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- caminhos (CTAs estilo bio) ---------- */
.caminhos{max-width:560px;margin:0 auto;padding:72px var(--lado) 96px}
.caminhos-titulo{margin-bottom:24px;text-align:center;font-size:clamp(22px,4vw,30px);font-weight:800;letter-spacing:-.01em}
.botoes{display:grid;gap:14px}
/* botões da bio no mesmo estilo 3D dos CTAs: base escura + face dourada */
.botao-bio{--mola:cubic-bezier(.34,1.56,.64,1);position:relative;isolation:isolate;display:block;padding-bottom:6px;border-radius:var(--raio);color:#120e04;text-decoration:none;-webkit-tap-highlight-color:transparent}
.botao-bio::before{content:"";position:absolute;left:0;right:0;top:6px;bottom:0;z-index:-1;border-radius:var(--raio);background:#5c460c;box-shadow:0 12px 26px rgba(0,0,0,.45);transition:transform .22s var(--mola)}
.botao-bio>.bio-face{position:relative;z-index:1;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px;padding:16px 22px;border-radius:var(--raio);background:linear-gradient(180deg,#e9c552,#c9a22c);box-shadow:inset 0 0 0 1px #f6d978,inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(60,40,0,.18);transition:transform .22s var(--mola);will-change:transform;backface-visibility:hidden}
.bio-face::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:60px;margin-left:-30px;border-radius:999px;background:rgba(40,28,0,.2);filter:blur(6px);opacity:0;transform:scaleX(.25);transition:opacity .22s var(--mola),transform .22s var(--mola);pointer-events:none}
.bio-face::after{content:"";position:absolute;top:0;bottom:0;left:0;width:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);opacity:0;transform:translateX(-100%);transition:opacity .22s var(--mola),transform .22s var(--mola);pointer-events:none}
.bio-face>*{position:relative;z-index:1;transition:transform .22s var(--mola)}
.bio-face>span{display:grid;gap:2px;min-width:0}
.botao-bio strong{font-size:17px;font-weight:900;letter-spacing:.01em;text-transform:uppercase;line-height:1.2}
.botao-bio small{font-size:14px;font-weight:500;opacity:.85}
.botao-bio svg{flex:none}
.botao-bio:hover::before{transform:translateY(1px)}
.botao-bio:hover>.bio-face{transform:translateY(-2px)}
.botao-bio:hover .bio-face::before{opacity:.3;transform:scaleX(.45)}
.botao-bio:hover .bio-face::after{opacity:.75;transform:translateX(-35%)}
.botao-bio:hover .bio-face>svg{transform:translateX(4px)}
.botao-bio:active::before{transform:translateY(-1px)}
.botao-bio:active>.bio-face{transform:translateY(6px)}
.botao-bio:active .bio-face::before{opacity:1;transform:scaleX(1)}
.botao-bio:active .bio-face::after{opacity:.9;transform:translateX(82%)}
.provas-rapidas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px}
.provas-rapidas li{min-width:0;padding:14px 10px;border:1px solid var(--linha);border-radius:14px;background:rgba(7,6,5,.6);text-align:center}
.provas-rapidas strong{display:block;color:var(--ouro);font-size:20px;font-weight:900}
.provas-rapidas span{display:block;color:var(--texto-2);font-size:12px;line-height:1.3}

/* ---------- seções ---------- */
.secao{position:relative;padding:72px var(--lado);scroll-margin-top:0;background:linear-gradient(180deg,rgba(7,6,5,.86),rgba(7,6,5,.94))}
.secao::before{content:"";position:absolute;left:var(--lado);right:var(--lado);top:0;height:1px;background:linear-gradient(90deg,transparent,var(--ouro),transparent);opacity:.5}
/* celular: título, foto inteira, texto e botão (nessa ordem) */
.secao-grade{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "fotos" "corpo";gap:24px;max-width:1120px;margin:0 auto}
.secao-grade>*{min-width:0}
.secao-cab{grid-area:cab;display:grid;gap:12px}
.secao-fotos{grid-area:fotos;display:grid;gap:14px}
.secao-corpo{grid-area:corpo;display:grid;gap:20px}
.secao-foto{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--linha);background:var(--preto-2);box-shadow:0 24px 60px rgba(0,0,0,.5)}
/* todas quadradas, com o enquadramento mirando no Kaio */
.secao-foto img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%}
.secao-foto .foco-placa{object-position:50% 80%}
.secao-foto .foco-estande{object-position:50% 92%}
.secao-foto .foco-podcast{object-position:50% 40%}
.secao-foto .foco-placa-fly{object-position:40% 50%}
.secao-foto .foco-equipe{object-position:8% 50%}
.secao-foto figcaption{padding:10px 14px;border-top:1px solid var(--linha);font-size:13px;line-height:1.4;color:var(--texto-2)}
.secao-num{color:var(--ouro);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.secao-titulo{font-size:clamp(32px,6vw,56px);font-weight:900;font-stretch:85%;line-height:1;letter-spacing:-.025em;text-wrap:balance}
.secao-corpo>p{color:var(--texto-2);max-width:52ch}

.prova{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--linha);border-radius:16px;background:rgba(212,175,55,.06)}
.prova img{flex:none;width:64px;height:84px;object-fit:cover;border-radius:10px}
.prova p{display:grid;gap:2px}
.prova strong{color:var(--ouro-claro);font-size:16px;line-height:1.25}
.prova span{color:var(--texto-2);font-size:14px;line-height:1.35}

.fatos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fatos li{min-width:0;padding:16px;border:1px solid var(--linha);border-radius:14px;background:rgba(212,175,55,.05)}
.fatos strong{display:block;color:var(--ouro);font-size:28px;font-weight:900;line-height:1}
.fatos span{color:var(--texto-2);font-size:14px}

.citacao{padding:4px 0 4px 18px;border-left:3px solid var(--ouro)}
.citacao p{font-size:clamp(18px,2.4vw,22px);font-weight:600;line-height:1.35}
.citacao cite{display:block;margin-top:6px;color:var(--ouro);font-size:13px;font-style:normal;letter-spacing:.1em;text-transform:uppercase}

.temas{display:grid;gap:10px;counter-reset:tema}
.temas li{position:relative;display:grid;gap:2px;padding:14px 16px 14px 56px;border:1px solid var(--linha);border-radius:14px;background:rgba(212,175,55,.04);counter-increment:tema}
.temas li::before{content:counter(tema,decimal-leading-zero);position:absolute;left:16px;top:14px;color:var(--ouro);font-weight:900}
.temas strong{font-size:16px}
.temas span{color:var(--texto-2);font-size:14px;line-height:1.4}

.pilares{display:grid;gap:10px}
.pilares li{position:relative;padding-left:30px;font-weight:600}
.pilares li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:5px;background:var(--ouro);transform:rotate(45deg) scale(.7)}

/* ---------- CTA ---------- */
/* botão 3D: base escura embaixo, face dourada em cima que sobe no hover e afunda no toque */
.cta{--mola:cubic-bezier(.34,1.56,.64,1);position:relative;isolation:isolate;display:inline-flex;justify-self:start;padding-bottom:6px;border-radius:999px;color:var(--preto);font-weight:900;font-size:16px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;-webkit-tap-highlight-color:transparent}
.cta::before{content:"";position:absolute;left:0;right:0;top:6px;bottom:0;z-index:-1;border-radius:999px;background:#5c460c;box-shadow:0 10px 22px rgba(212,175,55,.28);transition:transform .22s var(--mola)}
.cta-face{position:relative;z-index:1;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 28px;border-radius:999px;background:linear-gradient(180deg,#e9c552,var(--ouro));box-shadow:inset 0 0 0 1px #f6d978,inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(60,40,0,.18);transition:transform .22s var(--mola);will-change:transform;backface-visibility:hidden}
.cta-face::before{content:"";position:absolute;top:4px;bottom:4px;left:50%;width:40px;margin-left:-20px;border-radius:999px;background:rgba(40,28,0,.22);filter:blur(4px);opacity:0;transform:scaleX(.25);transition:opacity .22s var(--mola),transform .22s var(--mola);pointer-events:none}
.cta-face::after{content:"";position:absolute;top:0;bottom:0;left:0;width:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);opacity:0;transform:translateX(-100%);transition:opacity .22s var(--mola),transform .22s var(--mola);pointer-events:none}
.cta-face>*{position:relative;z-index:1;transition:transform .22s var(--mola)}
.cta:hover::before{transform:translateY(1px)}
.cta:hover .cta-face{transform:translateY(-2px)}
.cta:hover .cta-face::before{opacity:.3;transform:scaleX(.45)}
.cta:hover .cta-face::after{opacity:.75;transform:translateX(-35%)}
.cta:hover .cta-face>*{transform:translateY(-1px)}
.cta:active::before{transform:translateY(-1px)}
.cta:active .cta-face{transform:translateY(6px)}
.cta:active .cta-face::before{opacity:1;transform:scaleX(1)}
.cta:active .cta-face::after{opacity:.9;transform:translateX(82%)}
.cta:active .cta-face>*{transform:translateY(1px)}
.cta-zap{flex:none}
.cta-grande .cta-face{min-height:62px;padding:0 36px;font-size:17px}

/* ---------- faixa e fecho ---------- */
.faixa{padding:80px var(--lado);background:var(--ouro);color:var(--preto);text-align:center}
.faixa-texto{max-width:20ch;margin:0 auto;font-size:clamp(32px,7vw,72px);font-weight:900;font-stretch:80%;line-height:.98;letter-spacing:-.03em;text-transform:uppercase}
.faixa-texto em{color:#fff8df;-webkit-text-stroke:0;background:var(--preto);padding:0 .15em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.fecho{display:grid;justify-items:center;gap:18px;padding:120px var(--lado);text-align:center}
.fecho-titulo{max-width:16ch;font-size:clamp(36px,8vw,80px);font-weight:900;font-stretch:80%;line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.fecho p{max-width:40ch;color:var(--texto-2)}
.fecho .cta{justify-self:center}

.rodape{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding:28px var(--lado) calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--linha);background:var(--preto);color:var(--texto-2);font-size:14px}
.rodape a{color:var(--ouro);text-decoration:none;font-weight:700}

/* revelar ao rolar */
.js .revela{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .revela.visto{opacity:1;transform:none}

@keyframes quica{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@keyframes pulsa{0%{box-shadow:0 0 0 0 rgba(212,175,55,.45),0 14px 34px rgba(212,175,55,.22)}70%,100%{box-shadow:0 0 0 14px rgba(212,175,55,0),0 14px 34px rgba(212,175,55,.22)}}

/* ---------- telas maiores ---------- */
@media (min-width:640px){
  .fatos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .provas-rapidas span{font-size:13px}
}
@media (min-width:900px){
  .secao{padding:140px var(--lado)}
  .secao-grade{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"fotos ." "fotos cab" "fotos corpo" "fotos .";grid-template-rows:1fr auto auto 1fr;column-gap:72px;row-gap:0}
  .secao-inversa .secao-grade{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:". fotos" "cab fotos" "corpo fotos" ". fotos"}
  .secao-cab{margin-bottom:24px}
  .secao-fotos{align-self:center}
  .secao-foto img{max-height:78vh}
  .fatos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .revela{opacity:1;transform:none}
}

/* ---------- rolagem por página: cada seção trava na tela ---------- */
html{scroll-snap-type:y mandatory}
.hero,.caminhos,.secao,.faixa,.fecho{scroll-snap-align:start;scroll-snap-stop:always;min-height:100svh}
.caminhos,.secao,.faixa{display:flex;flex-direction:column;justify-content:center}
.secao-grade,.caminhos>*{width:100%}
.fecho{align-content:center}
.rodape{scroll-snap-align:end}

/* ---------- setinha "role para baixo" no pé de cada página ---------- */
.hero,.caminhos,.secao,.faixa{position:relative;padding-bottom:110px}
.seta{position:absolute;left:50%;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:120px;min-height:56px;padding:4px 10px;color:var(--ouro);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transform:translateX(-50%);animation:quica 2.2s ease-in-out infinite}
.seta svg{display:block}
.faixa .seta{color:var(--preto)}

/* ---------- carrossel de fotos (arrastar pro lado) ---------- */
.carrossel{position:relative;display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:22px}
.carrossel::-webkit-scrollbar{display:none}
.carrossel>.secao-foto{flex:0 0 86%;scroll-snap-align:center}
.carrossel-dica{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ouro);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.carrossel-dica span{display:inline-block;animation:empurra 1.6s ease-in-out infinite}
.carrossel-pontos{display:flex;justify-content:center;gap:4px}
.carrossel-pontos button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.carrossel-pontos button::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--linha);transition:width .25s ease,background .25s ease}
.carrossel-pontos button[aria-current="true"]::before{width:22px;background:var(--ouro)}
@keyframes empurra{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ---------- loading: foto redonda do Kaio que vira a cápsula do hero ---------- */
.loader{display:none}
.js .loader{position:fixed;inset:0;z-index:100;display:block}
.loader::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 50%,#2a210a,transparent 70%),var(--preto);transition:opacity .75s ease .05s}
.loader-lente{position:fixed;left:calc(50% - 66px);top:calc(50% - 66px);width:132px;height:132px;border-radius:50%;padding:6px;transition:padding .85s cubic-bezier(.65,0,.25,1),box-shadow .85s ease;animation:respira 1.6s ease-in-out infinite}
.loader-lente::before{content:"";position:absolute;inset:0;border-radius:inherit;background:conic-gradient(from 0deg,var(--ouro),transparent 35%,transparent 60%,var(--ouro-claro));animation:gira .9s linear infinite}
.loader-lente img{position:relative;display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;object-position:42% 28%;border:3px solid var(--preto);transition:border-width .85s cubic-bezier(.65,0,.25,1)}
.loader-texto{position:absolute;left:0;right:0;top:calc(50% + 92px);text-align:center;color:var(--ouro);font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase}
.loader-texto span{animation:pisca 1.2s infinite}
.loader-texto span:nth-child(2){animation-delay:.2s}
.loader-texto span:nth-child(3){animation-delay:.4s}
.loader.abrindo{pointer-events:none}
.loader.abrindo::before{opacity:0}
.loader.abrindo .loader-texto{opacity:0;transition:opacity .2s}
.loader.abrindo .loader-lente{animation:none;padding:3px;box-shadow:0 0 0 6px rgba(7,6,5,.85),0 20px 60px rgba(0,0,0,.7),0 0 60px rgba(212,175,55,.35)}
.loader.abrindo .loader-lente::before{animation:none;background:var(--ouro)}
.loader.abrindo .loader-lente img{border-width:0}
html.carregando{overflow:hidden}
.carregando .hero *{animation-play-state:paused}
.carregando .hero-foto{visibility:hidden}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes pisca{0%,100%{opacity:.2}50%{opacity:1}}

/* CTA logo abaixo da foto, ocupando a largura dela */
.secao-fotos>.cta{justify-self:stretch;margin-top:4px}

/* ---------- luz dourada na borda que segue o mouse (no celular, acende ao passar pelo meio da tela) ---------- */
.fatos li,.provas-rapidas li,.prova,.temas li,.secao-foto{--borda:2px;--matiz:calc(38 + var(--xp,0) * 16);--luz:200px;position:relative;border:var(--borda) solid rgba(212,175,55,.16);background-color:rgba(212,175,55,.04);background-image:radial-gradient(var(--luz) var(--luz) at calc(var(--gx,-999) * 1px) calc(var(--gy,-999) * 1px),hsl(var(--matiz) 95% 62% / .14),transparent);box-shadow:0 1rem 2rem -1rem #000}
.fatos li,.provas-rapidas li,.temas li{border-radius:16px}
:is(.fatos li,.provas-rapidas li,.prova,.temas li,.secao-foto)::after{content:"";position:absolute;inset:calc(var(--borda) * -1);z-index:3;border:var(--borda) solid transparent;border-radius:inherit;background-repeat:no-repeat;background-image:radial-gradient(calc(var(--luz) * .5) calc(var(--luz) * .5) at calc((var(--gx,-999) + 2) * 1px) calc((var(--gy,-999) + 2) * 1px),hsl(0 0% 100% / .85),transparent 100%),radial-gradient(calc(var(--luz) * .8) calc(var(--luz) * .8) at calc((var(--gx,-999) + 2) * 1px) calc((var(--gy,-999) + 2) * 1px),hsl(var(--matiz) 100% 62%),transparent 100%);pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0)}
/* a foto corta o que passa da borda, então a luz fica por dentro dela */
figure.secao-foto::after{inset:0}