:root{
  --preto:#0b0908;
  --ouro:#c9a44c;
  --ouro-claro:#e8ce8e;
  --ouro-escuro:#9c7c36;
  --creme:#f6f0e4;
  --texto-claro:#e9e3d7;
  --texto-suave:#bdb5a5;
  --texto-escuro:#2a2520;
  --linha-ouro:rgba(201,164,76,.35);
  --grad-ouro:linear-gradient(100deg,#b8945a 0%,#e8ce8e 45%,#c9a44c 100%);
  --raio:clamp(14px,1.1vw,22px);

  /* largura de conteúdo mais contida + margens laterais generosas em telas grandes */
  --largura:min(1240px, 100% - clamp(32px,7vw,120px));
  --pad-card:clamp(26px,3vw,56px);
  --gap-blocos:clamp(20px,2.2vw,40px);
  --medida-texto:62ch;   /* comprimento de linha confortável para leitura */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{
  background:var(--preto);
  color:var(--texto-claro);
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(15px,.95vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}

img{display:block;max-width:100%}

h1,h2,h3{
  font-family:'Montserrat',sans-serif;
  text-transform:uppercase;
  line-height:1.12;
}
.ouro{color:var(--ouro-claro)}

.faixa{width:100%}
.container{width:var(--largura);margin-inline:auto}

/* ---------- barra superior ---------- */
.barra-topo{
  background:var(--grad-ouro);
  color:#1d1508;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,1vw,18px);
  padding:clamp(10px,.9vw,16px) 16px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:clamp(11px,.95vw,15px);
  letter-spacing:.13em;
  text-transform:uppercase;
  text-align:center;
  flex-wrap:wrap;
}
.barra-topo .ponto{opacity:.55}
.barra-topo svg{flex:none;width:clamp(17px,1.5vw,24px);height:auto}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(56vw 66vh at 80% 42%, rgba(201,164,76,.22), transparent 60%),
    radial-gradient(40vw 40vh at 8% 0%, rgba(201,164,76,.07), transparent 60%),
    var(--preto);
}
.hero .container{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(20px,3vw,60px);
  align-items:stretch;
  padding-block:clamp(16px,1.6vw,28px) 0;
  min-height:clamp(340px,42vh,480px);
}
.hero-texto{align-self:center;padding-bottom:clamp(24px,3vw,48px)}

.selo{
  display:inline-block;
  border:1px solid var(--linha-ouro);
  border-radius:6px;
  padding:clamp(7px,.6vw,11px) clamp(14px,1.2vw,22px);
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:clamp(11px,.85vw,14px);
  letter-spacing:.16em;
  color:var(--ouro-claro);
  text-transform:uppercase;
  margin-bottom:clamp(16px,1.6vw,28px);
}

.hero h1{
  font-weight:800;
  font-size:clamp(27px,3.3vw,46px);
  letter-spacing:-.01em;
  line-height:1.04;
  color:#fff;
  max-width:13em;
}

.hero .sub{
  margin-top:clamp(14px,1.3vw,22px);
  max-width:34ch;
  font-size:clamp(14px,1.05vw,18px);
  font-weight:300;
  color:var(--texto-suave);
  line-height:1.6;
}
.hero .sub b{color:var(--ouro-claro);font-weight:600}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:clamp(9px,.8vw,14px);
  background:var(--grad-ouro);
  color:#1d1508;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:clamp(14px,1.15vw,20px);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:clamp(15px,1.3vw,24px) clamp(24px,2vw,40px);
  border-radius:clamp(9px,.7vw,14px);
  border:1px solid rgba(255,236,190,.5);
  box-shadow:0 10px 26px rgba(201,164,76,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(201,164,76,.3);filter:brightness(1.04)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--ouro-claro);outline-offset:4px}
.btn svg{flex:none;width:clamp(18px,1.4vw,24px);height:auto}

.hero .btn{margin-top:clamp(16px,1.5vw,26px);width:auto;max-width:100%}

.aviso{
  margin-top:clamp(11px,1vw,18px);
  font-size:clamp(12.5px,.9vw,16px);
  color:var(--texto-suave);
}

.chip-data{
  margin-top:clamp(14px,1.2vw,20px);
  display:inline-flex;align-items:center;
  gap:clamp(9px,.8vw,15px);
  border:1px solid var(--linha-ouro);
  border-radius:clamp(9px,.7vw,14px);
  padding:clamp(11px,1vw,18px) clamp(18px,1.6vw,30px);
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:clamp(14px,1.05vw,19px);
  color:#fff;
}
.chip-data span{font-weight:500;color:var(--texto-claro)}
.chip-data .div{color:var(--ouro);opacity:.7}
.chip-data svg{flex:none;width:clamp(18px,1.4vw,24px);height:auto}

/* foto do hero */
.hero-foto{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(240px,30vw,430px);
}
.arcos{
  position:absolute;
  right:clamp(-60px,-4vw,-20px);
  top:6%;
  width:clamp(300px,34vw,620px);
  height:clamp(300px,34vw,620px);
  pointer-events:none;
}
.foto-slot{
  position:relative;z-index:2;
  width:100%;height:100%;
  min-height:inherit;
  background:#15120e center center/cover no-repeat;
  border:1px dashed rgba(201,164,76,.4);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:rgba(201,164,76,.65);
  font-size:clamp(11px,.8vw,14px);
  letter-spacing:.1em;text-transform:uppercase;
  font-family:'Montserrat',sans-serif;padding:16px;
}
/* com a foto: sem moldura, proporção da própria imagem (sem corte), altura limitada e bordas dissolvidas no fundo */
.foto-slot.preenchida{
  border:none;border-radius:0;background-color:transparent;box-shadow:none;
  width:auto;
  min-height:0;
  height:100%;
  max-width:100%;
  aspect-ratio:1040 / 1271;
  margin-inline:auto;
  background-size:cover;
  background-position:center;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 90%, transparent 100%);
  mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.foto-slot.preenchida span{display:none}

/* ---------- blocos ---------- */
main{padding-top:var(--gap-blocos)}
.bloco{margin-bottom:var(--gap-blocos)}

.card-creme{
  background:var(--creme);
  color:var(--texto-escuro);
  border-radius:var(--raio);
  padding:var(--pad-card);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.card-escuro{
  background:linear-gradient(180deg,#141110,#0d0b09);
  border:1px solid rgba(201,164,76,.28);
  border-radius:var(--raio);
  padding:var(--pad-card);
  box-shadow:0 18px 50px rgba(0,0,0,.3);
}

/* dor */
.dor{display:flex;gap:clamp(18px,2vw,40px);align-items:center}
.icone-circulo{
  flex:none;
  width:clamp(74px,6.6vw,124px);
  aspect-ratio:1;
  border-radius:50%;
  background:#12100d;
  border:1.5px solid var(--ouro);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 clamp(5px,.5vw,9px) rgba(201,164,76,.08);
}
.icone-circulo svg{width:52%;height:auto}
.dor h2{
  font-size:clamp(18px,1.95vw,34px);
  font-weight:700;color:#1c1814;
  margin-bottom:clamp(9px,.8vw,16px);
  line-height:1.22;
}
.dor p{
  font-size:clamp(13.5px,1vw,18px);
  color:#4a423a;line-height:1.65;max-width:64ch;
}

/* mercado */
.mercado h2{
  text-align:center;
  font-size:clamp(17px,1.75vw,30px);
  font-weight:700;color:#fff;
  margin-bottom:clamp(20px,2vw,38px);
}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.col-mercado{
  padding:0 clamp(18px,2.2vw,44px);
  text-align:center;
  border-left:1px solid rgba(201,164,76,.22);
}
.col-mercado:first-child{border-left:none}
.col-mercado .ico{
  height:clamp(56px,5.2vw,104px);
  display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:clamp(13px,1.2vw,24px);
}
.col-mercado .ico svg{width:clamp(48px,4.8vw,96px);height:auto}
.col-mercado p{
  font-size:clamp(13px,.95vw,17px);
  color:var(--texto-suave);line-height:1.6;font-weight:300;
}

/* workshop + descobrir */
.duas-colunas{
  display:grid;
  grid-template-columns:minmax(0,.83fr) minmax(0,1fr);
  gap:var(--gap-blocos);
}
.cabecalho-card{display:flex;align-items:center;gap:clamp(13px,1.2vw,24px);margin-bottom:clamp(14px,1.3vw,24px)}
.mini-icone{
  width:clamp(50px,4.2vw,80px);
  aspect-ratio:1;
  border-radius:50%;
  border:1.5px solid var(--ouro-escuro);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.mini-icone svg{width:46%;height:auto}
.cabecalho-card h3{
  font-size:clamp(17px,1.6vw,29px);
  font-weight:700;color:#1c1814;line-height:1.2;
}
.risco{width:clamp(34px,3vw,58px);height:2px;background:var(--ouro);margin-top:10px;border-radius:2px}
.card-creme .corpo{font-size:clamp(13.5px,1vw,18px);color:#4a423a;line-height:1.7}

.lista{list-style:none;display:grid;gap:clamp(10px,.9vw,18px)}
.lista li{
  display:flex;gap:clamp(10px,.9vw,16px);align-items:flex-start;
  font-size:clamp(13.5px,1vw,18px);
  color:#3d362f;line-height:1.45;
}
.lista li svg{flex:none;width:clamp(15px,1.1vw,20px);height:auto;margin-top:.25em}

/* autoridade */
.autoridade{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(22px,2.6vw,54px);
  align-items:center;
  background:
    radial-gradient(38vw 40vh at 88% 50%, rgba(201,164,76,.10), transparent 65%),
    linear-gradient(180deg,#141110,#0d0b09);
}
.foto-retrato{
  width:100%;
  aspect-ratio:4/5;
  border-radius:10px;
  background:#15120e center/cover no-repeat;
  border:1px dashed rgba(201,164,76,.4);
  display:flex;align-items:center;justify-content:center;
  color:rgba(201,164,76,.65);
  font-size:clamp(11px,.8vw,13px);
  letter-spacing:.1em;text-transform:uppercase;
  font-family:'Montserrat',sans-serif;text-align:center;padding:12px;
}
.foto-retrato.preenchida{border:1px solid rgba(201,164,76,.3);box-shadow:0 20px 50px rgba(0,0,0,.45);}
.foto-retrato.preenchida span{display:none}

.autoridade .rotulo{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(12px,1vw,17px);font-weight:600;letter-spacing:.14em;
  color:#fff;text-transform:uppercase;
}
.autoridade h2{
  font-size:clamp(27px,3.3vw,56px);font-weight:800;
  color:var(--ouro-claro);margin:.05em 0 .3em;
}
.autoridade .creds{font-size:clamp(12.5px,.95vw,17px);color:var(--texto-claro);font-weight:500;line-height:1.7}
.autoridade .bio{
  margin-top:clamp(12px,1.1vw,22px);
  font-size:clamp(12.5px,.92vw,17px);
  color:var(--texto-suave);font-weight:300;line-height:1.7;max-width:44ch;
}
.provas{display:grid;gap:clamp(18px,1.7vw,34px)}
.prova{display:flex;gap:clamp(12px,1.1vw,20px);align-items:center}
.prova svg{flex:none;width:clamp(28px,2.4vw,46px);height:auto}
.prova .txt{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(11px,.85vw,15px);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--texto-claro);line-height:1.45;
}

/* fechamento */
.fechamento{position:relative;overflow:hidden;text-align:center}
.fechamento .container{padding-block:clamp(36px,4vw,84px) clamp(46px,5vw,104px);position:relative;z-index:2}
.ondas{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(150px,20vw,340px);pointer-events:none}
.fechamento h2{font-size:clamp(22px,3.1vw,52px);font-weight:800;color:#fff;line-height:1.2}
.fechamento p{
  margin:clamp(14px,1.3vw,26px) auto 0;
  max-width:58ch;
  font-size:clamp(13.5px,1.02vw,19px);
  color:var(--texto-suave);font-weight:300;line-height:1.65;
}
.fechamento .btn{margin-top:clamp(22px,2.2vw,40px);width:min(100%,44ch)}
.rodape-info{
  margin-top:clamp(13px,1.2vw,24px);
  display:inline-flex;align-items:center;gap:clamp(8px,.7vw,14px);
  flex-wrap:wrap;justify-content:center;
  font-size:clamp(12.5px,.92vw,17px);color:var(--texto-suave);
}
.rodape-info .div{color:var(--ouro);opacity:.7}
.rodape-info svg{flex:none;width:clamp(16px,1.2vw,21px);height:auto}

/* ---------- barra fixa de CTA no mobile ---------- */
.cta-fixo{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(11,9,8,.4),rgba(11,9,8,.96) 40%);
  display:none;
  transition:transform .3s ease, opacity .3s ease;
}
.cta-fixo .btn{width:100%;font-size:14px;padding:15px 18px}

/* ---------- responsivo ---------- */
@media (max-width:960px){
  .hero .container{grid-template-columns:1fr;min-height:0;padding-bottom:0}
  .hero h1{max-width:100%}
  .hero .sub{max-width:100%}
  .hero .btn{width:100%}
  .hero-texto{padding-bottom:0}
  /* foto ocupa a largura toda, como uma faixa, sem sobrar espaço nas laterais */
  .hero-foto{min-height:0;margin-top:clamp(14px,3vw,26px)}
  .foto-slot.preenchida{
    width:100%;
    height:clamp(360px,72vw,560px);
    aspect-ratio:auto;
    margin-inline:0;
    background-position:center 22%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 11%, #000 85%, transparent 100%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(to bottom, transparent 0, #000 11%, #000 85%, transparent 100%);
    mask-composite:add;
  }
  .hero-foto::before{inset:2% -3% -2% -3%}
  .arcos{display:none}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,34px) 0}
  .col-mercado:nth-child(3){border-left:none}
  .duas-colunas{grid-template-columns:1fr}
  .autoridade{grid-template-columns:1fr;text-align:center}
  .autoridade .bio{max-width:100%;margin-inline:auto}
  .foto-retrato{max-height:340px;margin-inline:auto;width:min(100%,300px)}
  .provas{justify-items:center}
  .prova{max-width:300px;width:100%}
}
@media (max-width:620px){
  .barra-topo{letter-spacing:.08em}
  .dor{flex-direction:column;text-align:center}
  .grid-4{grid-template-columns:1fr}
  .col-mercado{border-left:none;padding:0}
  .cta-fixo{display:block}
  .fechamento .container{padding-bottom:100px}
}

/* =====================================================================
   ANIMAÇÕES
   ===================================================================== */

/* entrada por scroll: elementos sobem e aparecem */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visivel{opacity:1;transform:none}
/* atraso em cascata para filhos (colunas, itens da lista, provas) */
.stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.stagger.visivel > *{opacity:1;transform:none}
.stagger.visivel > *:nth-child(1){transition-delay:.05s}
.stagger.visivel > *:nth-child(2){transition-delay:.13s}
.stagger.visivel > *:nth-child(3){transition-delay:.21s}
.stagger.visivel > *:nth-child(4){transition-delay:.29s}
.stagger.visivel > *:nth-child(5){transition-delay:.37s}

/* entrada do hero no carregamento */
@keyframes surgir{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes surgirFoto{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.anim-hero > *{opacity:0;animation:surgir .8s cubic-bezier(.2,.7,.2,1) forwards}
.anim-hero > .selo{animation-delay:.05s}
.anim-hero > h1{animation-delay:.15s}
.anim-hero > .sub{animation-delay:.3s}
.anim-hero > .btn{animation-delay:.45s}
.anim-hero > .aviso{animation-delay:.55s}
.anim-hero > .chip-data{animation-delay:.65s}
.hero-foto{opacity:0;animation:surgirFoto 1s cubic-bezier(.2,.7,.2,1) .3s forwards}

/* brilho ambiente pulsante atrás da foto do hero */
.hero-foto::before{
  content:"";position:absolute;z-index:0;inset:-6% -18% -4% -12%;
  background:
    radial-gradient(78% 70% at 58% 44%, rgba(201,164,76,.34), rgba(184,148,90,.12) 46%, transparent 74%),
    radial-gradient(120% 90% at 50% 50%, rgba(122,92,40,.22), transparent 70%);
  filter:blur(42px);
  animation:respirar 6s ease-in-out infinite;
}
@keyframes respirar{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}

/* varredura de brilho no botão principal */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);
  animation:brilhoBtn 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes brilhoBtn{0%,72%{left:-120%}86%{left:130%}100%{left:130%}}

/* leve destaque no CTA final para chamar atenção */
.fechamento .btn{animation:pulsarCta 2.8s ease-in-out infinite}
@keyframes pulsarCta{0%,100%{box-shadow:0 10px 26px rgba(201,164,76,.18)}50%{box-shadow:0 14px 40px rgba(201,164,76,.42)}}

/* micro-hover nos cards */
.card-creme,.card-escuro{transition:transform .3s ease, box-shadow .3s ease}
.card-creme:hover,.card-escuro:hover{transform:translateY(-3px)}

/* pulso "ao vivo" no ícone da barra */
.barra-topo svg{animation:aoVivo 2s ease-in-out infinite}
@keyframes aoVivo{0%,100%{opacity:1}50%{opacity:.55}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal,.stagger > *,.anim-hero > *,.hero-foto{opacity:1!important;transform:none!important}
  .hero-foto::before,.btn::after{display:none}
}