/* Bloques con imagen de fondo — adaptación en tablet y móvil (carga al final) */

.hero-image-card,
.image-frame,
.intro-image,
.impact-image,
.hero-portrait,
.experience-photo,
.map-visual,
.gallery-item,
.mosaic-img,
.service-card[class*="img-"],
.training-visual {
  width: 100%;
  max-width: 100%;
}

.image-frame,
.intro-image,
.impact-image,
.hero-portrait,
.experience-photo,
.map-visual,
.gallery-item,
.mosaic-img,
.service-card[class*="img-"],
.training-visual {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.hero-image-card {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.image-frame,
.hero-portrait,
.intro-image,
.impact-image {
  background-position: center 22%;
}

.book-cover:not(:has(img)) {
  width: 100%;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-color: var(--bg-2);
}

.book-cover img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.gallery-item.large,
.gallery-large {
  background-position: center 30%;
}

@media (max-width: 980px) {
  .hero-image-card {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .image-frame,
  .intro-image,
  .impact-image,
.hero-portrait,
.experience-photo,
.map-visual,
.global-image,
.training-visual {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .gallery-item,
  .gallery-large {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .gallery-item.large {
    aspect-ratio: 16 / 10;
    min-height: 0;
    grid-row: auto;
  }

  .book-cover:not(:has(img)) {
    aspect-ratio: 3 / 4;
    min-height: 0;
  }

  .service-card {
    aspect-ratio: 3 / 4;
    min-height: 0;
    max-height: 420px;
  }

  body[data-page="cegaho"] .image-mosaic {
    grid-template-rows: auto;
    width: 100%;
  }

  body[data-page="cegaho"] .mosaic-img {
    aspect-ratio: 1 / 1;
    min-height: 0;
    width: 100%;
  }

  body[data-page="cegaho"] .mosaic-img:nth-child(1) {
    aspect-ratio: 4 / 3;
    grid-row: auto;
  }

  body[data-page="cegaho"] .mosaic-img:nth-child(4) {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .hero-image-card {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .image-frame,
  .intro-image,
  .impact-image,
.hero-portrait,
.experience-photo,
.map-visual,
.global-image,
.training-visual {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  .gallery-item,
  .gallery-item.large,
  .gallery-large {
    aspect-ratio: 16 / 10;
    min-height: 0;
    grid-column: span 1;
  }

  .book-cover:not(:has(img)) {
    aspect-ratio: 2 / 3;
    min-height: 0;
  }

  .service-card {
    aspect-ratio: 3 / 4;
    min-height: 280px;
    max-height: none;
  }

  body[data-page="cegaho"] .image-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 0.75rem;
    max-width: none;
    width: 100%;
  }

  body[data-page="cegaho"] .mosaic-img:nth-child(1) {
    grid-column: span 2;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  body[data-page="cegaho"] .mosaic-img:nth-child(4) {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}