/* --- Imagen del Pet en el Hero --- */
.pet-hero {
  position: absolute;
  bottom: -33px;
  left: 0;
  width: 290px;       /* 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: 177px;
    left: -32px;
    bottom: -28px;
  }
}


/* --- Imagen del Pet en el Footer --- */
.pet-footer {
  position: absolute;
  bottom: 93px;
  left: 241px;
  width: 301px;       /* 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: 211px;
    left: 198px;
    bottom: 22%;
  }
}

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

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

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

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


/* --- Imagen del Pet en el Portfolio --- */
.pet-portfolio {
  position: absolute;
  bottom: 0px;     /* Ajusta vertical en desktop */
  top: -75px;    /* Ajusta horizontal en desktop */
  width: 380px;    /* Tamaño base desktop */
  z-index: 5;
}

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

/* --- Responsividad --- */

/* Tablets */
@media (max-width: 992px) {
  .pet-portfolio {
    width: 220px;
    right: -30px;
    bottom: 0;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  .pet-portfolio {
    width: 170px;
    right: 0%;
    transform: translateX(50%);
    bottom: -20px;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .pet-portfolio {
    width: 212px;
    right: 21%;
    transform: translateX(50%);
    top: -112px;
  }
}




/* --- Imagen del Pet en Contact --- */
.pet-contact {
  position: absolute;
  top: -83px;     /* Ajusta vertical en desktop */
  left: -51px;     /* Ajusta horizontal en desktop */
  width: 450px;    /* Tamaño base desktop */
  z-index: 5;
}

/* Asegúrate que contact tenga posición relativa */
#contact, #contact_section {
  position: relative;
}

/* --- Responsividad --- */

/* Tablets */
@media (max-width: 992px) {
  .pet-contact {
    width: 220px;
    left: -30px;
    bottom: 0;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  .pet-contact {
    width: 170px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .pet-contact {
    width: 194px;
    left: 50%;
    transform: translateX(-50%);
    top: -108px;
  }
}