/* --- Imagen del Pet en el Hero --- */
.pet-hero {
  position: absolute;
  bottom: 0;
/*  left: 1293px;*/
	left: 771px;
  width: 521px;       /* tamaño base para desktop */
  z-index: 5;         /* que quede visible sobre el fondo */
}

/* Asegúrate de que el hero tenga posición relativa */
#hero_section, #hero {
  position: relative;
}

/* --- Responsividad --- */

/* Tablets */
@media (max-width: 992px) {
  .pet-hero {
    width: 240px;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  .pet-hero {
    width: 185px;
    left: 10px;
    bottom: 5px;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .pet-hero {
    width: 125px;
    left: 255px;
    bottom: 0;
  }
}


/* --- Imagen del Pet en el Footer --- */
.pet-footer {
  position: absolute;
  bottom: 0;
  right: -147px;
  width: 475px;       /* tamaño base para desktop */
  z-index: 5;         /* que quede visible sobre el fondo */
}

/* Asegúrate de que el footer tenga posición relativa */
#footer_section, #footer {
  position: relative;
}

/* --- Responsividad --- */

/* Tablets */
@media (max-width: 992px) {
  .pet-footer {
    width: 240px;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  .pet-footer {
    width: 190px;
    right: 5px;
    bottom: 0;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .pet-footer {
    width: 184px;
    right: -63px;
    bottom: 0;
  }
}

/* Posición para desktop */
#mascota {
    position: absolute; /* o fixed si quieres que siempre esté visible al hacer scroll */
    top: 150px; /* ajusta según la posición que quieres */
    left: -335px; /* ajusta según la posición que quieres */
    width: 310px; /* ajusta tamaño */
    height: auto;
    z-index: 10; /* para que esté sobre otros elementos */
}

/* Posición para mobile */
@media screen and (max-width: 768px) {
    #mascota {
        top: -155px; /* nueva posición en mobile */
        left: 195px; /* nueva posición en mobile */
        width: 130px; /* ajustar tamaño si es necesario */
    }
}







#home_content {
    position: relative; /* Necesario para que la imagen absoluta se ubique dentro */
}

#pet-image {
    position: absolute;
    left: -238px;  
    bottom: 0;
    z-index: 10;      /* Por encima del contenido de la sección */
}

#pet-image img {
    width: 427px;     /* Tamaño inicial, ajustable */
    height: auto;
}

/* Ajustes para pantallas pequeñas */
@media screen and (max-width: 768px) {
    #pet-image {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        text-align: center;  /* Centrar la imagen en móvil */
        margin-bottom: 20px;
    }

    #pet-image img {
        width: 345px;   /* Tamaño más pequeño en móvil */
    }
}

#pet-image2 {
    position: absolute;
    left: -598px;  
    bottom: 29px;
    z-index: 10;      /* Por encima del contenido de la sección */
}

#pet-image2 img {
    width: 427px;     /* Tamaño inicial, ajustable */
    height: auto;
}

/* Ajustes para pantallas pequeñas */
@media screen and (max-width: 768px) {
    #pet-image2 {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        text-align: center;  /* Centrar la imagen en móvil */
        margin-bottom: 20px;
    }

    #pet-image2 img {
        width: 345px;   /* Tamaño más pequeño en móvil */
    }
}

#pet-image3 {
    position: absolute;
    left: 890px;  
    bottom: -979px;
    z-index: 10;      /* Por encima del contenido de la sección */
}

#pet-image3 img {
    width: 547px;     /* Tamaño inicial, ajustable */
    height: auto;
}

/* Ajustes para pantallas pequeñas */
@media screen and (max-width: 768px) {
    #pet-image3 {
        position: relative;
        left: auto;
        top: 0px;
        transform: none;
        text-align: center;  /* Centrar la imagen en móvil */
        margin-bottom: 20px;
    }

    #pet-image3 img {
        width: 425px;   /* Tamaño más pequeño en móvil */
    }
}






#pet-image4 {
    position: absolute;
    left: 890px;  
    bottom: -246px;
    z-index: 10;      /* Por encima del contenido de la sección */
}

#pet-image4 img {
    width: 481px;     /* Tamaño inicial, ajustable */
    height: auto;
}

/* Ajustes para pantallas pequeñas */
@media screen and (max-width: 768px) {
    #pet-image4 {
        position: relative;
        left: auto;
        top: 0px;
        transform: none;
        text-align: center;  /* Centrar la imagen en móvil */
        margin-bottom: 20px;
    }

    #pet-image4 img {
        width: 425px;   /* Tamaño más pequeño en móvil */
    }
}