/* ============================================================
   Hero — texto grande à esquerda, palco de fotos à direita
   ============================================================ */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:clamp(38px,5vw,76px);
  min-height:100svh;
  padding:clamp(112px,15vh,168px) var(--respiro-lateral) clamp(84px,10vh,120px);
}

/* ---------- coluna de texto ---------- */
.hero-texto{position:relative;z-index:2}

.hero-rotulo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 18px;
  border-radius:var(--pilula);
  background:var(--cartao);
  box-shadow:var(--sombra-p);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  opacity:0;
}

.hero h2{
  margin:26px 0 0;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(3rem,7.4vw,6.2rem);
  line-height:.96;
  letter-spacing:-.045em;
  color:var(--tinta);
}
/* cor sólida, não degradê: as letras viram inline-block no split
   e o background-clip:text do pai não as alcançaria */
.hero h2 em{
  font-style:normal;
  color:var(--rosa);
}
.hero h2 .palavra{display:inline-block;white-space:nowrap}
.hero h2 .letra{
  display:inline-block;
  opacity:0;
  transform:translateY(70%) rotate(8deg);
}

.hero-sub{
  max-width:44ch;
  margin:24px 0 0;
  font-size:clamp(1rem,1.4vw,1.14rem);
  font-weight:400;
  line-height:1.7;
  color:var(--tinta-suave);
  opacity:0;
}

.hero-acoes{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
  opacity:0;
}

/* --- prova social --- */
.hero-prova{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:36px;
  opacity:0;
}
.hero-prova .caras{display:flex}
.hero-prova .caras img{
  width:44px;height:44px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--papel);
  box-shadow:var(--sombra-p);
  transition:transform .45s var(--ease-pulo);
}
.hero-prova .caras img + img{margin-left:-14px}
.hero-prova:hover .caras img{transform:translateY(-4px)}
.hero-prova .caras img:nth-child(2){transition-delay:.05s}
.hero-prova .caras img:nth-child(3){transition-delay:.1s}
.hero-prova p{
  font-size:.88rem;
  font-weight:500;
  line-height:1.45;
  color:var(--tinta-tenue);
}
.hero-prova b{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:1rem;
  color:var(--tinta);
}

/* ---------- palco de fotos ---------- */
.hero-palco{
  position:relative;
  aspect-ratio:4/4.6;
  border-radius:var(--raio-g);
  overflow:visible;
  opacity:0;
  animation:none;
}
.carregado .hero-palco{animation:entra-palco 1.2s var(--ease) .3s forwards}
@keyframes entra-palco{
  from{opacity:0;transform:translateY(40px) rotate(2deg) scale(.96)}
  to{opacity:1;transform:none}
}

.slides{
  position:absolute;inset:0;
  border-radius:var(--raio-g);
  overflow:hidden;
  box-shadow:var(--sombra-g);
  background:var(--uva-leve);
}
.slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.4s var(--ease-suave);
}
.slide.ativo{opacity:1}
.slide img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.08);
  filter:saturate(1.12) contrast(1.02);
}
.slide.ativo img{animation:kenburns 9s linear forwards}
@keyframes kenburns{
  from{transform:scale(1.02)}
  to{transform:scale(1.14)}
}

/* --- adesivos decorativos sobre o palco --- */
.selo{
  position:absolute;z-index:4;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:var(--pilula);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--tinta);
  background:var(--cartao);
  box-shadow:var(--sombra-m);
}
.selo-topo{
  top:22px;left:-18px;
  transform:rotate(-5deg);
  animation:flutua 5s ease-in-out infinite;
}
.selo-base{
  bottom:-16px;right:-14px;
  background:var(--sol);
  transform:rotate(4deg);
  animation:flutua 6.4s ease-in-out infinite .8s;
}
@keyframes flutua{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}

/* --- paginação dos slides --- */
.hero-indices{
  position:absolute;z-index:4;
  bottom:20px;left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:7px;
  padding:8px;
  border-radius:var(--pilula);
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
}
.hero-indices button{
  position:relative;
  width:30px;height:6px;
  overflow:hidden;
  border-radius:var(--pilula);
  background:rgba(23,18,50,.18);
}
.hero-indices button i{
  position:absolute;inset:0;
  border-radius:var(--pilula);
  background:var(--grad-quente);
  transform:scaleX(0);
  transform-origin:left;
}
.hero-indices button.ativo i{animation:barra 6s linear forwards}
@keyframes barra{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* ---------- entrada (a classe .carregado vem do JS) ---------- */
.carregado .hero-rotulo{animation:surge .9s var(--ease) .2s forwards}
.carregado .hero h2 .letra{
  animation:letra .9s var(--ease-pulo) forwards;
  animation-delay:calc(.34s + var(--i) * .028s);
}
.carregado .hero-sub{animation:surge .9s var(--ease) .8s forwards}
.carregado .hero-acoes{animation:surge .9s var(--ease) .95s forwards}
.carregado .hero-prova{animation:surge .9s var(--ease) 1.1s forwards}

@keyframes letra{to{opacity:1;transform:none}}

/* ---------- indicador de rolagem ---------- */
.rolar{
  position:absolute;bottom:24px;left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 9px 9px 18px;
  border-radius:var(--pilula);
  background:var(--cartao);
  box-shadow:var(--sombra-p);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
}
.rolar i{
  display:grid;place-items:center;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--grad-quente);
  animation:desce 1.8s var(--ease) infinite;
}
.rolar i::after{
  content:"";
  width:6px;height:6px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-1px) rotate(45deg);
}
@keyframes desce{
  0%,100%{translate:0 0}
  50%{translate:0 4px}
}

@media(max-width:980px){
  .hero{
    grid-template-columns:1fr;
    text-align:center;
    padding-top:clamp(104px,14vh,140px);
  }
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-acoes,.hero-prova{justify-content:center}
  .hero-palco{
    aspect-ratio:4/3.4;
    /* largura explícita: o conteúdo é todo absoluto, então a
       margem automática deixaria a caixa com 0 de largura */
    width:min(100%,560px);
    margin:8px auto 0;
    order:2;
  }
  .selo-topo{left:-6px}
  .selo-base{right:-4px}
  .rolar{display:none}
}
@media(max-width:600px){
  .hero-palco{aspect-ratio:4/4.2}
  .selo{font-size:.72rem;padding:10px 14px}
}