/* Fotografías reales de HS. Las imágenes se generan con scripts/build_images.py
   ya recortadas a su proporción; object-fit solo ajusta el encuadre final. */
.photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: #e5edf3; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vídeo integrado: proporción original 9:16, sin recortes ni bandas laterales. */
.hero-video { position: relative; margin: 0; width: min(100%, 292.5px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius); background: var(--navy); align-self: center; justify-self: center; }
.hero-video video { display: block; width: 100%; height: 100%; object-fit: contain; }
.professional-layout.professional-layout-text { grid-template-columns: 1fr; }
.professional-layout-text .professional-copy { max-width: 760px; }

/* Portada */
.hero-photo.photo { min-height: 0; aspect-ratio: 4 / 5; max-height: 720px; align-self: center; }
.home-study-photo.photo { min-height: 0; aspect-ratio: 4 / 5; max-height: 620px; justify-self: end; width: 100%; }
.biomechanics-photo.photo { min-height: 0; aspect-ratio: 1; background: #254967; }
.portrait.photo { min-height: 0; padding: 0; aspect-ratio: 5 / 4; }

/* Galería de la clínica: gabinete en vertical y dos fotos cuadradas */
.clinic-photos { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 15px; }
.clinic-photos .photo { min-height: 0; aspect-ratio: 1; }
.clinic-photos .clinic-photo-main { grid-row: 1 / 3; aspect-ratio: auto; min-height: 100%; }

/* Contacto */
.location-photo.photo { min-height: 0; aspect-ratio: 4 / 5; max-height: 600px; justify-self: end; width: 100%; }

/* Páginas de tratamiento */
.treatment-hero-photo.photo { min-height: 0; aspect-ratio: 3 / 4; max-height: 680px; align-self: center; }
.professional-photo.photo { min-height: 0; aspect-ratio: 4 / 5; }
.treatment-photo { aspect-ratio: 4 / 5; margin-top: 40px; max-width: 440px; }
.photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.photo-gallery .photo { aspect-ratio: 4 / 5; }

@media (max-width: 750px) {
  .hero-video { order: -1; width: min(100%, 202.5px); }
  .hero-photo.photo, .home-study-photo.photo, .location-photo.photo, .treatment-hero-photo.photo { aspect-ratio: 4 / 3; max-height: none; }
  .biomechanics-photo.photo { aspect-ratio: 4 / 3; }
  .treatment-photo { aspect-ratio: 4 / 3; max-width: none; margin-top: 28px; }
  .photo-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  .photo-gallery .photo:first-child { grid-column: 1 / 3; aspect-ratio: 4 / 3; }
  .clinic-photos { gap: 10px; }
}