/**
 * Landing Durazno — index.php (body.page-index2.page-index3)
 * Hero compuesto: fondos por breakpoint + rebanada solo en escritorio (>1024px).
 *
 * Assets (colocar en assets/images/):
 *   fondo-playa-durazno.jpg       — 1920×922
 *   fondo-playa-durazno-1440.jpg — 1440×900 (solo bajo 1400px de ancho; 1536 usa el 1920)
 *   fondo-playa-durazno-768.jpg  — 768×1024
 *   fondo-playa-durazno-1080.jpg — 1080×1920
 */

.page-index3__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Escritorio ancho: 1920×922 */
.page-index3 .hero-durazno__bg {
  background-image: url("../images/fondo-playa-durazno.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*
 * Laptop estrecha / 1366: evitar subir de escala el 1440px en pantallas ~1400–1920 (p. ej. 1536).
 * Si el arte aún no encaja, valorar un JPG dedicado 1536×~737 (misma proporción que 1920×922).
 */
@media (max-width: 1399px) {
  .page-index3 .hero-durazno__bg {
    background-image: url("../images/fondo-playa-durazno-1440.jpg");
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .page-index3 .hero-durazno__bg {
    background-image: url("../images/fondo-playa-durazno-768.jpg");
    background-position: center center;
  }

  .page-index3__fruit-anchor {
    display: none;
  }
}

/* Móvil (retrato) */
@media (max-width: 767px) {
  .page-index3 .hero-durazno__bg {
    background-image: url("../images/fondo-playa-durazno-1080.jpg");
    background-position: center center;
  }
}

.page-index3 .hero-durazno--composite .hero-durazno__inner {
  position: relative;
  flex: 1;
  min-height: 0;
  pointer-events: none;
}

/* Rebanada: solo >1024px (en tablet/móvil va en el JPG) */
.page-index3__fruit-anchor {
  position: absolute;
  top: clamp(6.05rem, 17.75vh, 9.35rem);
  left: 50%;
  transform: translateX(calc(-50% - clamp(0.35rem, 1.1vw, 0.65rem)));
  width: min(92vw, 400px);
  height: clamp(6.5rem, 18vw, 10.5rem);
  pointer-events: none;
}

.page-index3__fruit-img {
  position: absolute;
  right: clamp(0, 0.35vw, 0.35rem);
  bottom: 0;
  width: min(112px, 34vw);
  max-width: none;
  height: auto;
}

/* Escritorio ancho (≥1500px, p. ej. 1920): rebanada algo más pequeña */
@media (min-width: 1500px) {
  .page-index3__fruit-img {
    width: min(94px, 22vw);
  }

  .page-index3__fruit-anchor {
    height: clamp(5.85rem, 15vw, 9.15rem);
  }
}

/* Laptops ~1440 (1280–1499px): rebanada un poco más abajo y a la derecha */
@media (min-width: 1280px) and (max-width: 1499px) {
  .page-index3__fruit-anchor {
    top: clamp(7.95rem, 22.5vh, 11.6rem);
    transform: translateX(calc(-50% + clamp(0.85rem, 2.35vw, 1.55rem)));
  }

  .page-index3__fruit-img {
    right: clamp(-0.35rem, -0.5vw, 0);
  }
}