/* ============================================================================
   CRAFT — a camada de acabamento que os 4 modelos compartilham.
   Nasceu da crítica do Richard em 09/10: "isso tá muito feio ainda".

   O diagnóstico foi: as fotos são JPEG de 640–800px, tiradas de celular, com
   fundo, enquadramento e temperatura de cor DIFERENTES entre si. Numa grade,
   isso é o que grita "amador" — não é a falta de foto cara.

   Então aqui não se tenta "melhorar" cada foto: se UNIFICA todas sob o mesmo
   tratamento (contraste, calor, vinheta) e se dá PROFUNDIDADE e GRÃO à página,
   que é o que o olho lê como caro.
   ========================================================================= */

/* ---------- 1. GRÃO — tira o aspecto "chapado" de tela ---------------------
   Uma única camada fixa, por cima de tudo, com opacidade bem baixa. É o truque
   mais barato que existe para uma página parar de parecer um template.        */
.grao::after{
  content:"";position:fixed;inset:-50%;z-index:999;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23r)'/></svg>");
  background-size:180px 180px;
}
@media(prefers-reduced-motion:no-preference){
  .grao::after{animation:grao 7s steps(6) infinite}
}
@keyframes grao{
  0%{transform:translate(0,0)}      16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-5%)}  50%{transform:translate(-2%,4%)}
  66%{transform:translate(4%,2%)}   83%{transform:translate(-3%,-2%)}
  100%{transform:translate(0,0)}
}

/* ---------- 2. TRATAMENTO DE FOTO — o que unifica o banco de imagem --------
   .trat  = a moldura (recorta, dá profundidade)
   .trat img = a graduação (contraste + calor iguais em todas)
   .trat::after = vinheta quente, que amarra a foto ao fundo da página.        */
.trat{position:relative;overflow:hidden;isolation:isolate;background:#2A1A0E}
.trat img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.1) saturate(1.06) brightness(.98);
  transition:transform .7s cubic-bezier(.2,.7,.25,1), filter .5s;
}
.trat::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 0%, transparent 42%, rgba(42,26,14,.36) 100%),
    linear-gradient(180deg, rgba(90,58,34,.07), rgba(42,26,14,.16));
  mix-blend-mode:multiply;
}
.trat:hover img{transform:scale(1.045)}

/* no modelo escuro a vinheta precisa ser mais funda para a foto não "flutuar" */
.trat.fundo-escuro::after{
  background:
    radial-gradient(125% 95% at 50% 10%, transparent 34%, rgba(14,8,3,.6) 100%),
    linear-gradient(180deg, rgba(232,190,120,.05), rgba(14,8,3,.3));
}

/* ---------- 3. PROFUNDIDADE — sombra em 2 camadas, como objeto real --------
   Uma sombra só, grande e difusa, lê como "caixa flutuando". Duas camadas
   (contato curto + ambiente longo) leem como objeto apoiado.                  */
.prof{
  box-shadow:
    0 1px 2px rgba(58,35,20,.09),
    0 4px 10px rgba(58,35,20,.07),
    0 18px 44px rgba(58,35,20,.10);
}
.prof-forte{
  box-shadow:
    0 2px 4px rgba(26,16,8,.26),
    0 10px 24px rgba(26,16,8,.22),
    0 34px 72px rgba(26,16,8,.26);
}

/* ---------- 4. MOVIMENTO NA ROLAGEM — entra, não aparece -------------------
   Sem biblioteca: IntersectionObserver no final de cada página põe .visivel.  */
.sobe{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.7,.25,1), transform .75s cubic-bezier(.2,.7,.25,1)}
.sobe.visivel{opacity:1;transform:none}
.sobe.d1{transition-delay:.08s}.sobe.d2{transition-delay:.16s}
.sobe.d3{transition-delay:.24s}.sobe.d4{transition-delay:.32s}
.sobe.d5{transition-delay:.40s}.sobe.d6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){
  .sobe{opacity:1;transform:none;transition:none}
}

/* ---------- 5. A LOGO REAL -------------------------------------------------
   O erro da 1ª volta foi usar o glifo ♛ tendo o arquivo dela na pasta.        */
.logo-real{display:block;height:var(--logo-h,46px);width:auto}
.logo-real.clara{filter:brightness(0) saturate(100%) invert(84%) sepia(38%)
  saturate(680%) hue-rotate(338deg) brightness(101%) contrast(92%)}

/* ---------- 6. FILETE DOURADO ---------------------------------------------- */
.fio-ouro{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,rgba(184,137,74,.1) 12%,
    rgba(232,190,120,.75) 50%,rgba(184,137,74,.1) 88%,transparent)}

/* ---------- 7. TIPOGRAFIA — contraste de escala ----------------------------
   Título grande de verdade + entrelinha fechada é metade do que lê como caro. */
.display{line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
.equilibra{text-wrap:balance}
.bonita{text-wrap:pretty}

/* ---------- 8. ETIQUETA DE PREÇO DE EXEMPLO -------------------------------- */
.exemplo{
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:#A8794A;background:rgba(201,138,63,.13);border:1px solid rgba(201,138,63,.3);
  padding:3px 7px;border-radius:4px;vertical-align:middle;white-space:nowrap;
}
.exemplo.no-escuro{color:#E0A94E;background:rgba(232,190,120,.1);border-color:rgba(232,190,120,.3)}