/* HERENCIA general */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #222;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}

/* SELECTOR de ID */
#titulo {
  text-align: center;
  color: #006400;
  text-shadow: 1px 1px #ccc;
}

/* SELECTOR de CLASE */
.sticky-header {
  background-color: #d4edda;
  padding: 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 3px solid #28a745;
}

/* SELECTOR de ELEMENTO */
img {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.4s ease;
}

/* PSEUDOCLASE */
img:hover {
  transform: scale(1.05);
}

/* PSEUDOELEMENTO */
h2::before {
  content: "🐾 ";
  color: #ff5733;
}

/* POSICIONAMIENTO RELATIVO */
.animal-card {
  position: relative;
  margin: 20px auto;
  max-width: 500px;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* POSICIONAMIENTO ABSOLUTO (solo como ejemplo decorativo) */
.animal-card::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 10px;
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  opacity: 0.3;
}

/* PIE DE PÁGINA FIJO */
.pie {
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* ANIMACIONES */
@keyframes entrada {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animal-card {
  animation: entrada 1s ease forwards;
}

/* TRANSICIÓN en el título */
#titulo {
  transition: color 0.3s;
}

#titulo:hover {
  color: #2e8b57;
}