/* --- Imagen del Pet en el Hero --- */
.pet-hero {
  position: absolute;
  bottom: -17px;
  left: -9px;
  width: 546.7;       /* 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: 185px;
    left: 5px;
    bottom: 0;
  }
}


/* --- Imagen del Pet en el Footer --- */
.pet-footer {
  position: absolute;
  bottom: 0;
  right: 80px;
  width: 400px;       /* 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: 190px;
    right: 5px;
    bottom: 70px;
  }
}

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

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