/* ═══ SEÇÕES ════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  min-height:100svh;padding:0;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
}
.hero__fundo{position:absolute;inset:0;overflow:hidden}
.hero__fundo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  opacity:.62;filter:grayscale(.18) contrast(1.04);
}
.hero__fundo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,7,6,.62) 0%, rgba(8,7,6,.14) 30%,
    rgba(8,7,6,.86) 70%, var(--breu) 100%);
}
.hero__marca{
  position:relative;z-index:2;text-align:center;
  padding:30px 20px 0;
  font-size:.64rem;letter-spacing:.32em;color:var(--ouro);font-weight:500;
}
.hero__txt{
  position:relative;z-index:2;width:100%;max-width:var(--col);
  margin:0 auto;padding:0 26px 34px;
}
.hero h1{margin-bottom:22px}
.hero .chamada{margin-bottom:28px}
.hero__nomes{
  display:flex;align-items:flex-start;gap:10px;
  min-height:20px;margin:-4px 0 20px;
  font-size:.79rem;line-height:1.45;color:var(--sussurro);
  opacity:0;transform:translateY(4px);
  transition:opacity .6s var(--resp),transform .6s var(--resp);
}
.hero__nomes.ativo{opacity:1;transform:none}
.hero__nomes i{
  width:6px;height:6px;border-radius:50%;background:var(--ouro);
  flex:none;margin-top:7px;animation:pulso 2.6s ease-in-out infinite;
}
.hero__nomes b{font-weight:500;color:var(--marfim)}
.hero__estrelas{
  color:var(--ouro);font-size:.72rem;letter-spacing:.08em;
  margin:0 2px;white-space:nowrap;
}

/* ── Instagram ───────────────────────────────────────────── */
.insta__grade{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:26px;
}
.insta__grade a{display:block;line-height:0;position:relative}
.insta__grade img{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  background:var(--pedra);opacity:.88;transition:opacity .25s var(--resp);
}
.insta__grade a:hover img{opacity:1}
.insta__botao{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  padding:13px 20px;border:1px solid var(--linha);
  font-size:.86rem;letter-spacing:.02em;color:var(--ouro-claro);
  transition:border-color .2s,background .2s;
}
.insta__botao:hover{border-color:var(--ouro-fosco);background:rgba(198,162,83,.05)}

.hero__rolar{
  display:block;text-align:center;margin-top:26px;
  font-size:.7rem;letter-spacing:.13em;color:var(--murmurio);
}

/* entrada única, lenta — o único movimento não pedido da página */
.revela{opacity:0;transform:translateY(14px);animation:sobe 1.1s var(--resp) forwards}
.revela:nth-child(2){animation-delay:.12s}
.revela:nth-child(3){animation-delay:.24s}
@keyframes sobe{to{opacity:1;transform:none}}

/* ── Três garantias ──────────────────────────────────────── */
.garantias{padding:0;border-block:1px solid var(--linha)}
.garantias li{
  list-style:none;max-width:var(--col);margin:0 auto;
  padding:24px 26px;display:flex;gap:16px;align-items:flex-start;
}
.garantias li+li{border-top:1px solid var(--linha-fina)}
.garantias .mk{color:var(--ouro);flex:none;font-size:.9rem;line-height:1.9}
.garantias b{display:block;font-weight:500;font-size:.96rem;margin-bottom:4px}
.garantias span{display:block;font-size:.87rem;color:var(--sussurro);line-height:1.58}

/* ── Slider antes/depois ─────────────────────────────────── */
.slider{
  position:relative;aspect-ratio:4/5;overflow:hidden;margin:28px 0 12px;
  border:1px solid var(--linha);background:var(--pedra);
  cursor:ew-resize;user-select:none;touch-action:pan-y;
}
.slider img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 34%;pointer-events:none;
}
.slider .depois{clip-path:inset(0 0 0 var(--corte,50%))}
.slider__puxa{
  position:absolute;top:0;bottom:0;left:var(--corte,50%);
  width:1px;background:var(--ouro-claro);pointer-events:none;
}
.slider__puxa::after{
  content:"";position:absolute;top:28%;left:50%;width:48px;height:48px;
  transform:translate(-50%,-50%);border:1px solid var(--ouro-claro);
  border-radius:50%;background:rgba(8,7,6,.42);backdrop-filter:blur(3px);
}
.slider__puxa::before{
  content:"‹  ›";position:absolute;top:28%;left:50%;z-index:2;
  transform:translate(-50%,-56%);color:var(--ouro-claro);
  font-size:1.05rem;letter-spacing:.02em;
}
.slider .selo{
  position:absolute;bottom:14px;z-index:3;pointer-events:none;
  font-size:.62rem;letter-spacing:.19em;color:var(--marfim);
  background:rgba(8,7,6,.66);padding:6px 12px;
}
.slider .selo--a{left:14px}
.slider .selo--d{right:14px}
.dica{text-align:center;font-size:.77rem;color:var(--murmurio)}

/* ── Vídeo do caso ───────────────────────────────────────── */
.video{
  margin:30px 0 0;padding:14px;
  border:1px solid var(--ouro-fosco);
  box-shadow:0 0 0 4px rgba(198,162,83,.05);
  background:linear-gradient(180deg,rgba(198,162,83,.05),transparent 60%);
}
/* a capa é uma imagem real; o vídeo só a cobre se conseguir carregar.
   assim nunca sobra retângulo preto se o mp4 faltar ou falhar. */
.video__palco{position:relative;line-height:0}
.video__palco img{width:100%;height:auto;display:block}
.video__palco video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;transition:opacity .5s var(--resp);
}
.video__palco video.pronto{opacity:1}

/* Só aparece quando o navegador barra a reprodução sozinha —
   iPhone em Modo de Pouca Energia, por exemplo. */
.video__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;
  color:#14100A;padding-left:4px;
  background:linear-gradient(135deg,#E0C583,#C6A253 46%,#A98637);
  box-shadow:0 8px 24px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.4) inset;
  transition:transform .18s var(--resp);
}
.video__play:active{transform:translate(-50%,-50%) scale(.93)}
/* display:flex acima sobrescreve a regra padrao do navegador
   para [hidden], entao o esconder precisa ser explicito */
.video__play[hidden]{display:none}
.video figcaption{
  padding:14px 2px 2px;font-size:.7rem;letter-spacing:.15em;
  text-align:center;color:var(--ouro);
}

/* ── Caso em destaque ────────────────────────────────────── */
.destaque{
  position:relative;margin:34px 0 10px;line-height:0;
  border:1px solid var(--ouro-fosco);
  box-shadow:0 0 0 4px rgba(198,162,83,.06);
}
.destaque img{width:100%;height:auto;display:block}
.destaque__selo{
  position:absolute;left:12px;z-index:2;line-height:1;
  font-size:.62rem;letter-spacing:.19em;color:var(--marfim);
  background:rgba(8,7,6,.7);padding:6px 12px;
}
.destaque__selo--a{top:12px}
.destaque__selo--d{bottom:12px}

/* ── Galeria ─────────────────────────────────────────────── */
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}
.galeria img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--pedra)}
/* antes/depois lado a lado precisa da largura toda para ser legível */
.galeria img.larga{grid-column:1/-1;aspect-ratio:auto;height:auto}

/* ── Vagas ───────────────────────────────────────────────── */
.vagas{background:var(--carvao);border-block:1px solid var(--linha)}
.contador{
  border:1px solid var(--linha);padding:34px 26px;margin-top:30px;text-align:center;
  background:radial-gradient(120% 100% at 50% 0%,rgba(198,162,83,.07),transparent 70%);
}
.contador__n{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(4rem,20vw,6rem);line-height:.9;color:var(--ouro-claro);
  display:block;
}
.contador__leg{
  font-size:.72rem;letter-spacing:.17em;color:var(--ouro);margin-top:12px;
}
.barra-vagas{
  height:2px;background:rgba(198,162,83,.16);margin:22px 0 10px;overflow:hidden;
}
.barra-vagas i{
  display:block;height:100%;background:var(--ouro);
  width:0;transition:width 1.4s var(--resp);
}
.contador__nota{font-size:.79rem;color:var(--sussurro)}

/* ── Retrato de apoio ────────────────────────────────────── */
.retrato{margin:28px 0 4px;border:1px solid var(--linha);overflow:hidden}
.retrato img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;
  filter:grayscale(.1) contrast(1.03);
}

/* ── Passos ──────────────────────────────────────────────── */
.passos{counter-reset:p;margin-top:32px}
.passo{display:flex;gap:20px;padding:22px 0}
.passo+.passo{border-top:1px solid var(--linha-fina)}
.passo::before{
  counter-increment:p;content:counter(p);
  font-family:'Cormorant Garamond',serif;font-size:1.7rem;
  color:var(--ouro);line-height:1;flex:none;width:24px;
}
.passo b{display:block;font-weight:500;font-size:1rem;margin-bottom:6px}
.passo p{font-size:.9rem;color:var(--sussurro);line-height:1.62}

/* ── Dúvidas ─────────────────────────────────────────────── */
.duvidas{margin-top:28px}
.duvida{border-top:1px solid var(--linha-fina)}
.duvida:last-child{border-bottom:1px solid var(--linha-fina)}
.duvida summary{
  padding:20px 34px 20px 0;font-size:.96rem;font-weight:500;
  cursor:pointer;list-style:none;position:relative;
}
.duvida summary::-webkit-details-marker{display:none}
.duvida summary::after{
  content:"";position:absolute;right:4px;top:50%;width:11px;height:11px;
  border-right:1px solid var(--ouro);border-bottom:1px solid var(--ouro);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--resp);
}
.duvida[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.duvida p{padding:0 0 22px;font-size:.89rem;color:var(--sussurro);line-height:1.7}

/* ── Fim e rodapé ────────────────────────────────────────── */
.fim{text-align:center;padding-bottom:88px}
.fim .chamada{margin:0 auto 32px}
.rodape{border-top:1px solid var(--linha-fina);padding:38px 26px 52px;text-align:center}
.rodape a{display:inline-block;padding:12px 18px;color:var(--ouro);font-size:.87rem}
.rodape p{margin:18px auto 0;max-width:42ch}

@media (min-width:760px){
  .hero__txt{padding-bottom:56px}
}