/* --- Imagen del Pet en el Hero --- */
.pet-hero {
  position: absolute;
  bottom: -106%;
  left: 78%;
  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: 200px;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .pet-hero {
    width: 198px;
    left: 51%;
    bottom: -94%;
  }
}


/* --- 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-project {
  position: fixed;
  left: 78%;     /* Ajusta vertical en desktop */
  top:  41%;    /* 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;
}





/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .pet-project {
    top: -40%;     /* Ajusta altura */
    left: 57%;   /* Ajusta posición */
    width: 182px;   /* Tamaño móvil */
  }
}

/* EXTRA SMALL DEVICES */
@media (max-width: 480px) {
  .pet-project {
    top: 40%;
    left: 57%;
    width: 182px;
  }
}







/* --- 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;
    left: 22%;
    transform: translateX(50%);
    top: -112px;
  }
}




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

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



/*contact*/
.pet-contact {
  position: absolute;
  top: 50%;
  left: -17px;
  width: 313px;
  z-index: 5;
}

/* TABLETS */
@media (max-width: 768px) {
  .pet-contact {
    top: 65%;
    left: -10px;
    width: 200px;
  }
}

/* MOBILE */
@media (max-width: 480px) {
  .pet-contact {
    top: 187%;
    left: 63%;
    width: 150px;
  }
}