/* ===== Foto do hero (desktop) ===== */
.foto{position:relative;justify-self:end;width:400px;perspective:1100px}
.foto::before{content:"";position:absolute;inset:-40px;background:radial-gradient(closest-side,rgba(227,168,59,.18),transparent);z-index:0}
.tilt{position:relative;z-index:1;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.foto.ativo .tilt{transition:transform .08s linear}
.hero-foto{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;border:1px solid rgba(240,232,214,.12);box-shadow:0 30px 60px rgba(0,0,0,.35);transition:border-color .4s}
.foto.ativo .hero-foto{border-color:rgba(227,168,59,.55)}
.tilt::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;background:linear-gradient(transparent 60%,rgba(12,35,26,.55))}
.glare{position:absolute;inset:0;z-index:1;border-radius:18px;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(240,232,214,.22),transparent 60%)}
.foto.ativo .glare{opacity:1}
.badges{position:absolute;z-index:2;left:-48px;bottom:28px;display:flex;flex-direction:column;gap:12px;transform:translateZ(60px)}
.badge{background:#f0e8d6;color:#0c231a;border-radius:12px;padding:12px 16px;box-shadow:0 12px 28px rgba(0,0,0,.35);min-width:200px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.badge small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#4a6155}
.badge strong{display:block;font-weight:500;font-size:16px;margin-top:3px}
.badge .sub{display:block;font-size:12px;color:#4a6155;margin-top:2px}
.bar{display:flex;gap:4px;margin-top:8px}.bar i{height:4px;flex:1;border-radius:2px;background:#cfc7b3}.bar i.on{background:#0c231a}
.foto.ativo .badge:nth-child(1){transform:translateX(-6px)}
.foto.ativo .badge:nth-child(2){transform:translateX(6px)}

/* ===== Avatar (celular) ===== */
.avatar{display:none}
@media (max-width:767px){
  .foto{display:none}
  .avatar{display:block;margin-bottom:26px}
  .avatar img{width:104px;height:104px;border-radius:50%;object-fit:cover;border:2px solid #e3a83b}
}
@media (prefers-reduced-motion:reduce){.tilt{transform:none!important}}


/* ===== Encaixe no layout do site =====
   O topo usa flex (não grid), então a foto é alinhada à direita aqui,
   e a coluna da foto some no celular, onde aparece só o avatar redondo. */
.hero__visual{display:flex;justify-content:flex-end;align-items:center}
/* o atributo height="1000" da imagem ganhava da proporção 4:5; com height:auto a foto fica com 400x500 */
.hero-foto{height:auto}
@media (max-width:767px){
  .hero__visual{display:none}
}