/* Keep every photo's natural proportions.
   HTML width/height attributes otherwise lock height while max-width
   shrinks the width, and the browser stretches the bitmap (object-fit: fill). */
img{max-width:100%;height:auto}
/* Framed crops: the box has the aspect ratio; the photo fills it without distortion. */
.hero-img img,
.hero-ed .hero-photo img,
.bleed-pair img,
.compare img,
.gal-item img,
.ba-frame img,
.pair img,
.feat img,
.trat-ed .feat img,
.ph,
.karen-foto,
.karen .ph,
.offer .pic img,
.kitg img,
.gal img,
.card > img,
.card picture img{
  width:100%;
  object-fit:cover;
  object-position:center 20%;
}

/* --- Before/after: Resultados reales (both options) --- */
.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  width:100%;
  margin-top:28px;
}
.compare figure{
  margin:0;
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#eee;
}
.compare img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  max-height:none;
  min-height:0;
}
.compare .tag{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:1;
}

/* --- Option B full-bleed band --- */
.bleed-band{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
  box-sizing:border-box;
}
.bleed-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  min-height:0;
  width:100%;
}
.bleed-pair figure{
  margin:0;
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  min-height:0;
  background:#2B2B2B;
}
.bleed-pair img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  min-height:0 !important;
  max-height:none !important;
}

/* Soy Karen portrait */
.karen-foto,
.karen .ph{
  display:block;
  width:100%;
  max-width:420px;
  aspect-ratio:4/5;
  height:auto;
  object-fit:cover;
  object-position:center 20%;
}

/* Hero A: honor 3/4–4/5 crop, never the raw 960px attribute */
.hero-img img{
  aspect-ratio:4/5;
  height:auto;
  object-fit:cover;
  object-position:center 20%;
}

/* Featured treatment photo */
.feat img,
.trat-ed .feat img{
  aspect-ratio:4/5;
  height:auto;
  min-height:0;
  max-height:none;
  object-fit:cover;
  object-position:center 20%;
}

/* Fill-the-frame thumbs already have a container aspect-ratio */
.gal-item img,
.ba-frame img,
.pair img,
.kitg img{
  height:100%;
  max-height:none;
}

@media(max-width:860px){
  .trat-ed .feat img{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    aspect-ratio:4/5;
    height:auto;
  }
}