/* --- Imagen del Pet en el Hero --- */
.pet-hero {
  position: absolute;
  bottom: 101px;
  left: 71%;
  width: 390px;       /* 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: 165px;
    left: 59%;
    bottom: 45%;
  }
}


/* --- Imagen del Pet en el Footer --- */
.pet-footer {
  position: absolute;
  bottom: 37px;
  left: 231px;
  width: 276px;       /* 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: 194px;
    left: 203px;
    bottom: 12;
  }
}

/* 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: 80px;  
    bottom: 0;
    z-index: 10;      /* Por encima del contenido de la sección */
}

#pet-image img {
    width: 300px;     /* 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: 180px;   /* Tamaño más pequeño en móvil */
    }
}