/* Este es el estilo del botón para iconos sociales de antigua cabecera */

button#redes {flex-grow: 0; position:relative; right: 5px; width:auto; height: 80px; border-radius: 40%; overflow: hidden; cursor: pointer; transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
button#redes p {letter-spacing: normal; transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; text-align: center; padding-right: 5px; margin-left: -5px;}
button#redes:hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; flex: 1 0 15%; border-radius: 20%; color: DarkMagenta; background: Indigo;}
button#redes:hover p {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; letter-spacing: -10px; filter: blur(5px);}
div.prueba {position: relative;}
#redes div.prueba a {display: inline-block; position: absolute; opacity: 0; text-decoration: none; width: auto; height: auto; color: white; transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#redes div.prueba a:nth-child(1) {left: -10px; top: -60px;}
#redes:hover a:nth-child(1) {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; transform: translate(30px, 10px) scale(2); opacity: 1;}
#redes div.prueba a:nth-child(1):hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; color: blue; background: white; width: 30px; height: 20px;}
#redes div.prueba a:nth-child(2) {left: -10px; top: 5px;}
#redes:hover a:nth-child(2) {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; transform: translate(30px, -10px) scale(2); opacity: 1;}
#redes div.prueba a:nth-child(2):hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; color: rgba(253, 0, 0, 0.527); background: white; width: 30px; height: 20px;}
#redes div.prueba a:nth-child(3) {right: -10px; top: -60px;}
#redes:hover a:nth-child(3) {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; transform: translate(-30px, 10px) scale(2); opacity: 1;}
#redes div.prueba a:nth-child(3):hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; color: #008bc2; /*color: #0a66c2;*/ background: white; width: 30px; height: 20px;}

#redes div.prueba a i {display: block; font-size: 16px;}

/* ESTILOS GENERALES DEL CONTENIDO */

#pie.active1 {top: 110vh;}

#contenido-mascotas {position: relative; top: 105vh; transition: margin-left 0.5s linear; max-width: 92%; padding-left: 80px; font-size: var(--font-size-base);}

#contenido-mascotas.active {transition: all 0.5s; margin-left: 350px; max-width: 90%;}

#contenido-index, #contenido-razas-gatos, #contenido-exoticos,
#contenido-perros, #contenido-gatos, #contenido-razas-perros,
#contenido-galerias, #contenido-galerias1, #contenido-peces, 
#contenido-pajaros {transition: all 0.5s;}

#contenido-index p, #contenido-razas-gatos p, #contenido-exoticos p,
#contenido-perros p, #contenido-gatos p, #contenido-razas-perros p,
#contenido-galerias p, #contenido-galerias1 p, #contenido-peces p, 
#contenido-pajaros p {
  font-size: calc(var(--font-size-base) * 1.1);
  line-height: var(--line-height-base);
  width: 100%;
  max-width: 95%;
  margin-left: 30px;
  transition: margin-left 0.2s;
}
#contenido-index h1, #contenido-index h2,
#contenido-razas-gatos h1, #contenido-razas-gatos h2,
#contenido-exoticos h1, #contenido-exoticos h2,
#contenido-perros h1, #contenido-perros h2,
#contenido-gatos h1, #contenido-gatos h2,
#contenido-razas-perros h1, #contenido-razas-perros h2,
#contenido-galerias h1, #contenido-galerias h2,
#contenido-galerias1 h1, #contenido-galerias1 h2,
#contenido-peces h1, #contenido-peces h2,
#contenido-pajaros h1, #contenido-pajaros h2 {
  display: inline-block;
  max-width: 95%;  
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
}

#contenido-index h1:hover, #contenido-index h2:hover,
#contenido-razas-gatos h1:hover, #contenido-razas-gatos h2:hover,
#contenido-exoticos h1:hover, #contenido-exoticos h2:hover,
#contenido-perros h1:hover, #contenido-perros h2:hover,
#contenido-gatos h1:hover, #contenido-gatos h2:hover,
#contenido-razas-perros h1:hover, #contenido-razas-perros h2:hover,
#contenido-galerias h1:hover, #contenido-galerias h2:hover,
#contenido-galerias1 h1:hover, #contenido-galerias1 h2:hover,
#contenido-peces h1:hover, #contenido-peces h2:hover,
#contenido-pajaros h1:hover, #contenido-pajaros h2:hover {
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; 
  color: var(--secondary-color); 
  box-shadow: 2px 2px 8px var(--card-shadow);
}

/* ESTILOS PARA LA PÁGINA INDEX MASCOTAS */
/*
.banner {
  position: absolute;
  left: 0;
  top: 15%;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  background-attachment: fixed;
  z-index: 1;
}
*/
.bg-index {background-image: url("/mascotas/imagenes/perro_gato.jpg");} 
.bg-image {
    position: absolute;
    width: 100%;
    height: 100vh;
    /* background: url("https://images.unsplash.com/photo-1709828281351-d65f0c66000a?q=80&w=1438&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");*/
    background-position: center;
    background-attachment: fixed;
    background-size: 120%;
    background-repeat: no-repeat;
}

.bg-image h1 {display: inline-block; width: 100%; max-width: 500px; color: black;margin: 0 300px;font-weight: 800;text-align: center;animation: mov 2s linear .2s forwards, mov1 2s ease 2.3s 3 forwards;}
@keyframes mov {
 from {color: black;transform: none;}
  to {color: maroon; background: yellow; transform: translate(0, 500px) rotate(360deg) skewX(14deg) skewY(14deg);}
}
@keyframes mov1 {
 from {transform: translate(0, 500px) skewX(14deg) skewY(14deg);}
  to {transform: translate(0, 400px) skewX(-14deg) skewY(-14deg);}
}
.bg-image .banner-titulo {position: relative; top: 70vh; width: 100%; max-width: 90%; display: flex; justify-content: space-evenly; cursor: pointer; transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
.bg-image .banner-titulo:hover {transition: .5s .2s; box-shadow: inset 4px 4px 5px rgba(0, 0, 0, .6); border-radius: 30%; border-bottom: 1px solid rgba(0, 0, 0, .6); background: rgba(255, 255, 255, .5);}
.bg-image .banner-titulo h2, .banner .banner-titulo h3 {display: inline-block; position: relative; width: auto; flex-grow: 0; animation: estirar 1s linear .3s infinite alternate paused;}
.bg-image .banner-titulo h2:hover, 
.bg-image .banner-titulo h3:hover {animation-play-state: running; flex-grow: 1;}
@keyframes estirar {
  0% {flex-grow: 0;}
  100% {flex-grow: 1;}
}
.bg-image .banner-titulo h2:active, .banner .banner-titulo h3:active {cursor: pointer; animation: unset;} 
.bg-image .img {position: relative; top: 71vh; width: 0; height: 0; overflow: hidden; transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
.bg-image .img.img-perros {left: 10%; display: flex; justify-content: flex-start; gap: 50px; overflow: hidden;}
.bg-image .img-perros img {position: relative; left: 0; display: block; width: 200px; height: 150px; z-index: 200; animation: fondo-perros 5s linear infinite;}
@keyframes fondo-perros {
    0% {transform: translateX(0); opacity: 1;}
    15% {transform: translateX(-200px); opacity: 1;}
    30% {transform: translateX(-400px); opacity: 1;}
    45% {transform: translateX(-600px); opacity: 1;}
    60% {transform: translateX(-800px); opacity: 1;}
    75% {transform: translateX(-1000px); opacity: 1;}
    76% {opacity: 0; filter: blur(5px);}
    80% {transform: translateX(0); opacity: 0;}
    90% {transform: translateX(0); opacity: 0;}
  100% {transform: translateX(0); opacity: 1;}
}
.bg-image .banner-titulo:hover ~ .img {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; width: 200px; height: 150px; border: 1px solid black; background-color: rgba(255, 255, 255, .6); overflow: hidden;}
/*.banner .banner-titulo:hover ~ .img.img-perros img {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; width: 200px; height: 150px;}*/
.bg-image .img.img-gatos {left: 40%; transform: translateY(-150px); background-image: url(/mascotas/imagenes/gato_quimera.jpg); background-repeat: no-repeat; background-position: 50%; animation: position-center 2s steps(4) infinite alternate;}
@keyframes position-center {
  0% {background-position: 50%;}
  50% {background-position: 500% 50%;}
 100% {background-position: -500% 50%;}
}
.bg-image .img.img-otros {left: 70%; transform: translateY(-300px) rotate(3deg);}
.bg-image .img.img-otros img {display: block; width: 200px; height: 120px; animation: reptar 3s cubic-bezier(0, -0.7, 1, 1.7) .2s infinite alternate;}
@keyframes reptar {
  0% {transform: none; width: 200px; height: 120px;}
  20% {transform: rotate(-3deg) scaleX(1.3) skewX(10deg); height: 140px;}
  40% {transform: rotate(3deg) skewX(-10deg) scaleX(1.5); height: 130px;}
}

#contenido-index .columnas {width: 100%; max-width: 90%;}
#contenido-index .flex {position: relative; width: 100%; max-width: 90%; cursor: pointer; display: flex; justify-content: center; align-items: center;}
#contenido-index .flex h1 {margin: 0 30px;display: inline-block;height: 50%;font-family: impact;background-color: yellow;text-align: center; transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-index .flex h1:hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; font-family: arial; background-color: red; color: white; padding-top: 30px;}
#contenido-index .flex .perro {position: relative; width:350px; height: 300px; background-image:url("/mascotas/imagenes/gato_contenido_2.jpg"); background-size: 350px 300px; background-position: 50%; background-repeat: no-repeat; cursor: pointer; animation: voltereta .7s cubic-bezier(0, -0.7, 1, 1.7) .2s 6 alternate paused;}
#contenido-index .flex .perro:active {cursor: pointer; animation: unset;}
#contenido-index .flex:hover .perro {animation-play-state: running;}
@keyframes voltereta {
  0% {transform: none;}
  100% {transform: translate(0px, 10px) rotateX(180deg);}
}
#contenido-index .flex div a {position: relative; display: block; text-decoration: none; opacity: 0; transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-index .flex .perro a {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-index .flex:hover .perro a {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; opacity: 1; color: var(--primary-color); transform: translate(0px, 50px) scale(1.2);}
#contenido-index .flex .perro1 {width: 350px;height: 300px;background-image:url("/mascotas/imagenes/perro_gato.jpg");background-repeat: no-repeat; background-position: center; background-size: 348px 298px;cursor:pointer;}
#contenido-index .flex .perro1:hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; transform: scale(1.1); border-radius: 20%; box-shadow: 3px 3px 5px var(--card-shadow);}
#contenido-index .flex .perro1 a {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-index .flex .perro1 [data-perro]::before {
  content: attr(data-perro);
  display: block; 
  position: absolute;
  background: rgba(51, 51, 0, .6);
  color: white;
  -webkit-font-smoothing: antialiased;
  width: 250px;
  font-size: var(--font-size-sm);
  padding: 8px;
  height: auto;
  border-radius: 10px;
  filter: drop-shadow(1px 1px 5px #333);
  bottom: -100px;
  left: calc(100% - 90%);
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
}
#contenido-index .flex .perro1 [data-perro]::after {
  content: "";
  height: 1px;
  width: 1px;
  border: 6px solid transparent;
  border-top-color: rgba(51, 51, 0, .6);
  position: absolute;
  bottom: 0px;
  left: 50%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: rotate(180deg);
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
}
#contenido-index .flex:hover .perro1 [data-perro]::before, #contenido-index .flex:hover .perro1 [data-perro]::after {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; opacity: 1;}
#contenido-index .flex:hover .perro1 a {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; color: var(--secondary-color); opacity: 1; transform: translate(30px, 300px);}
#contenido-index .abajo {width: 100%; max-width: 90%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#contenido-index .abajo p {max-width: 50%; text-align: justify;}
#contenido-index .abajo p a span {display: inline-block; width: auto;}
#contenido-index .abajo p a {text-decoration: none; display: inline-block;}
#contenido-index .abajo p a:hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-index .abajo .razaperro {width: 400px; height: 225px; background-image: url("/mascotas/imagenes/razas_perro1.jpg"); cursor: pointer;}
#contenido-index .abajo div a {display: inline-block; text-decoration: none; opacity: 0; transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-index .abajo .razaperro a {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-index .abajo .razaperro:hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; transform-origin: 50% 50%; transform: translate(0, 10px) scale(0.8);}
#contenido-index .abajo .razaperro:hover a {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; font-size: calc(var(--font-size-base) * 1.3); text-align: center; opacity: 1; color: var(--terciary-color); background: var(--bg-color-pre); text-transform:uppercase; transform: translate(10px, 220px);}
#contenido-index .abajo .perro2 {width: 300px; height: 280px; margin-left: 100px; background-image: url("/mascotas/imagenes/Gato_contenido_1.jpg");background-repeat: no-repeat;cursor: pointer;}
#contenido-index .abajo .perro2 a {display:block; transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-index .abajo .perro2:hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; transform-origin: 50% 0%; transform: translate(0, -20px) scale(1.1);}
#contenido-index .abajo .perro2:hover a {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; text-decoration: none; opacity: 1; color: var(--primary-color); text-transform:uppercase; transform: translate(-110px, 20px) rotate(-10deg);}
/*#pie {position: relative; top: 110vh;}*/

/* ESTILO PARA PAGINA LISTA RAZAS DE GATOS */

.bg-razas-gatos {background-image: url("/mascotas/imagenes/grupo-gatos.jpeg");}

#contenido-razas-gatos .gatos-container {
  width: 100%;
  max-width: calc(var(--card-width) * 0.9);
  height: auto;
  margin: 50px auto;
  background-color: var(--bg-color-pre);
}
#contenido-razas-gatos .gatos-container #lista-gatos {
  height: auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-auto-rows: 260px;
  gap: 20px;
  align-items: stretch;
  justify-items: stretch;
}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta {
  position: relative;
  display: grid;
  background-color: var(--body-bg);
  text-align: center;
  cursor: pointer;
  background-size: 180px 220px;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  transform: translate(0px, 10px);
  aspect-ratio: 12 / 16;
  transition: .5s;
}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta span {
  display: block; 
  width: auto; 
  padding: 5px;
  color: var(--secondary-color);
}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:hover {
  transition: .5s;
  background-size: 80px 120px;
  background-position: -100% 50%;
}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:hover > span {
  transition: .5s;
  background-color: rgba(255, 255, 255, .7);
  box-shadow: inset 2px 2px 3px var(--card-shadow);
  text-transform: uppercase;
  font-family: impact; 
  transform: translateY(-25px);
}
[data-gato]::before {
  content: attr(data-gato);
  display: block;
  position: absolute;
  background: rgba(51, 51, 0, .6);
  color: white;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 250px;
  font-size: var(--font-size-sm);
  padding: 8px;
  margin: 0 auto;
  height: auto;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 5px #333);
  opacity: 0;
  z-index: 100;
  transition: 0.6s linear 0.2s;
}
[data-gato]:hover::before {transition: 0.6s linear 0.2s; opacity: 1; z-index: 100;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(1) {background-image: url(/mascotas/imagenes/gato-abisinio.jpg); z-index: 61;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(2) {background-image: url(/mascotas/imagenes/gato-curl-americano.jpg); z-index: 60;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(3) {background-image: url(/mascotas/imagenes/gato-azul-ruso.jpg); z-index: 59;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(4) {background-image: url(/mascotas/imagenes/gato-american-shorthair.jpg); z-index: 58;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(5) {background-image: url(/mascotas/imagenes/gato-american-wirehair.jpg); z-index: 57;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(6) {background-image: url(/mascotas/imagenes/gato-angora-turco.jpg); z-index: 56;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(7) {background-image: url(/mascotas/imagenes/gato-africano-domestico.jpg); z-index: 55;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(8) {background-image: url(/mascotas/imagenes/gato-bengali.jpg); z-index: 54;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(9) {background-image: url(/mascotas/imagenes/gato-bobtail-japones.jpg); z-index: 53;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(10) {background-image: url(/mascotas/imagenes/gato-bombay.jpg); z-index: 52;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(11) {background-image: url(/mascotas/imagenes/gato-bosque-noruega.jpg); z-index: 51;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(12) {background-image: url(/mascotas/imagenes/gato-brazilian-shorthair.jpg); z-index: 50;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(13) {background-image: url(/mascotas/imagenes/gato-british-shorthair.jpg); z-index: 49;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(14) {background-image: url(/mascotas/imagenes/gato-british-longhair.jpg); z-index: 48;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(15) {background-image: url(/mascotas/imagenes/gato-burmes.jpg); z-index: 47;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(16) {background-image: url(/mascotas/imagenes/gato-burmilla.jpg); z-index: 46;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(17) {background-image: url(/mascotas/imagenes/gato-cornish-rex.jpg); z-index: 45;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(18) {background-image: url(/mascotas/imagenes/gato-california-spangled.jpg); z-index: 44;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(19) {background-image: url(/mascotas/imagenes/gato-cymric.jpg); z-index: 43;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(20) {background-image: url(/mascotas/imagenes/gato-chartreux.jpg); z-index: 42;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(21) {background-image: url(/mascotas/imagenes/gato-carey.jpg); z-index: 41;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(22) {background-image: url(/mascotas/imagenes/gato-devon-rex.jpg); z-index: 40;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(23) {background-image: url(/mascotas/imagenes/gato-dorado-africano1.jpg); z-index: 39;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(24) {background-image: url(/mascotas/imagenes/gato-don-sphynx.jpg); z-index: 38;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(25) {background-image: url(/mascotas/imagenes/gato-dragon-li.jpg); z-index: 37;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(26) {background-image: url(/mascotas/imagenes/gato-comun-europeo.jpg); z-index: 36;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(27) {background-image: url(/mascotas/imagenes/gato-europeo-bicolor.jpg); z-index: 35;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(28) {background-image: url(/mascotas/imagenes/gato-exotico.jpg); z-index: 34;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(29) {background-image: url(/mascotas/imagenes/gato-foldex.jpg); z-index: 33;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(30) {background-image: url(/mascotas/imagenes/gato-german-rex.jpg); z-index: 32;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(31) {background-image: url(/mascotas/imagenes/gato-habana-brown.jpg); z-index: 31;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(32) {background-image: url(/mascotas/imagenes/gato-himalayo.jpg); z-index: 30;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(33) {background-image: url(/mascotas/imagenes/gato-korat.jpg); z-index: 29;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(34) {background-image: url(/mascotas/imagenes/gato-khao-manee.jpg); z-index: 28;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(35) {background-image: url(/mascotas/imagenes/gato-manx.jpg); z-index: 27;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(36) {background-image: url(/mascotas/imagenes/gato-mau-egipcio.jpg); z-index: 26;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(37) {background-image: url(/mascotas/imagenes/gato-munchkin.jpg); z-index: 25;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(38) {background-image: url(/mascotas/imagenes/gato-ocicat.jpg); z-index: 24;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(39) {background-image: url(/mascotas/imagenes/gato-oriental.jpg); z-index: 23;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(40) {background-image: url(/mascotas/imagenes/gato-oriental-pelo-largo.jpg); z-index: 22;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(41) {background-image: url(/mascotas/imagenes/gato-persa-puro.jpg); z-index: 21;}
/*#lista-gatos .etiqueta:nth-child(42) {background-image: url(../../../pagina_web/mascotas/imagenes/gato-persa.jpg); z-index: 20;}*/
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(42) {background-image: url(/mascotas/imagenes/gato-peterbald.jpg); z-index: 19;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(43) {background-image: url(/mascotas/imagenes/gato-pixie-bob.jpg); z-index: 18;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(44) {background-image: url(/mascotas/imagenes/gato-rojo.jpg); z-index: 17;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(45) {background-image: url(/mascotas/imagenes/gato-ragdoll.jpg); z-index: 16;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(46) {background-image: url(/mascotas/imagenes/gato-sagrado-birmania.jpg); z-index: 15;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(47) {background-image: url(/mascotas/imagenes/gato-savannah.jpg); z-index: 14;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(48) {background-image: url(/mascotas/imagenes/gato-scottish-fold.jpg); z-index: 13;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(49) {background-image: url(/mascotas/imagenes/gato-selkirk-rex.jpg); z-index: 12;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(50) {background-image: url(/mascotas/imagenes/gato-serengeti.jpg); z-index: 11;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(51) {background-image: url(/mascotas/imagenes/gato-seychellois.jpg); z-index: 10;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(52) {background-image: url(/mascotas/imagenes/gato-siames.jpg); z-index: 9;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(53) {background-image: url(/mascotas/imagenes/gato-siames-moderno.jpg); z-index: 8;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(54) {background-image: url(/mascotas/imagenes/gato-siames-tradicional.jpg); z-index: 7;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(55) {background-image: url(/mascotas/imagenes/gato-siberiano.jpg); z-index: 6;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(56) {background-image: url(/mascotas/imagenes/gato-snowshoe.jpg); z-index: 5;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(57) {background-image: url(/mascotas/imagenes/gato-sphynx.jpg); z-index: 4;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(58) {background-image: url(/mascotas/imagenes/gato-tonkines.jpg); z-index: 3;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(59) {background-image: url(/mascotas/imagenes/gato-toyger.jpg); z-index: 2;}
#contenido-razas-gatos .gatos-container #lista-gatos .etiqueta:nth-child(60) {background-image: url(/mascotas/imagenes/gato-van-turco.jpg); z-index: 1;}

/* ESTILOS PARA LA PAGINA DE EXOTICOS */

.bg-exoticos {background-image: url("/mascotas/imagenes/planeador1.jpg");}
.bg-image.bg-exoticos h1 {margin: 0; color: white; letter-spacing: normal; transform: none; animation: volar 1s cubic-bezier(0, -0.7, 1, 1.7) 1 paused forwards;}
@keyframes volar {
  from {letter-spacing: normal; transform: none;}
   to {letter-spacing: 1em; transform-origin: 0% 0%; transform: translate(300px, -10px) rotate(12deg);}
}
.bg-image.bg-exoticos:hover h1 {animation-play-state: running;}

#contenido-exoticos .galeria_exoticos {position: relative; width: 100%; max-width: var(--card-width); background-color: #e0ffff; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 30px;}
#contenido-exoticos .galeria_exoticos .fotos {position: relative; width: 100%; max-width: var(--card-width); transition: all 1s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-exoticos .galeria_exoticos .fotos h3 {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-exoticos .galeria_exoticos .fotos ol {width: 100%; max-width: var(--card-width); list-style-type: none;display: flex;flex-direction: column; gap: 30px; transition: all 1s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-exoticos .galeria_exoticos .fotos ol li {position: relative; margin: 5px; display: flex; transition: all 1s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-exoticos .galeria_exoticos .fotos ol li a {color: black;text-decoration: none;margin-left: -20px;font-weight: bold; transition: all 1s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-exoticos .galeria_exoticos .fotos p {position: absolute; width: 0; height: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: all 1s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-exoticos .galeria_exoticos .fotos:hover {transition: all 1s cubic-bezier(0, -0.7, 1, 1.7) .2s; width: 100%; max-width: 80%; background: black;}
#contenido-exoticos .galeria_exoticos .fotos:hover a {transition: all 1s cubic-bezier(0, -0.7, 1, 1.7) .2s; color: white; text-decoration: underline;}
#contenido-exoticos .galeria_exoticos .fotos li:hover p {
  display: inline-block;
  transition: all 1s cubic-bezier(0, -0.7, 1, 1.7) .2s;
  transform: translate(140px, -80px);
  width: 100%;
  max-width: 80%;
  height: 100%;
  height: auto;
  font-size: var(--font-size-base);
  padding: 5px;
  opacity: 1;
  visibility: visible;
  background: black;
  color: white;
  text-align: left;
  overflow: visible;
  z-index: 1300; 
}
#contenido-exoticos .galeria_exoticos .fotos .animal {width: 30px;height: 30px;position: relative;top: 15px;left: 15px; transition: all 1s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-exoticos .galeria_exoticos .fotos li:hover .animal {transition: all 1s cubic-bezier(0, -0.7, 1, 1.7) .2s; color: white; transform: translate(-20px, 10px) scale(6); z-index: 10;}

#contenido-exoticos .texto_exoticos {width: 100%; max-width: 95%; margin: 0 auto;}
#contenido-exoticos .texto_exoticos h1, #contenido-exoticos .texto_exoticos h2 {transition: all .6s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-exoticos .texto_exoticos p {font-family: tahoma, verdana; font-size: var(--font-size-base); text-align: justify;}
#contenido-exoticos .texto_exoticos ol {list-style-type: none; width: 100%; max-width: 95%; display: flex; flex-wrap: wrap; justify-content: space-around; row-gap: 50px; column-gap: 150px; transition: all .6s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-exoticos .texto_exoticos ol li {position: relative; display: flex; flex-direction: column; gap: 20px; flex-grow: 0; transition: all .6s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-exoticos .texto_exoticos ol li:hover {transition: all .6s cubic-bezier(0, -0.7, 1, 1.7) .2s; flex-grow: 0.5; z-index: 10;}
#contenido-exoticos .texto_exoticos ol li a[data-plaga]::before {
  content: attr(data-plaga);
  display: inline-block; 
  position: absolute;
  background: rgba(51, 51, 0, .6);
  color: white;
  -webkit-font-smoothing: antialiased;
  width: 0px;
  font-size: 0.8em;
  height: 0px;
  border-radius: 10px;
  filter: drop-shadow(1px 1px 5px #333);
  bottom: 0px;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
}
#contenido-exoticos .texto_exoticos ol li:hover a[data-plaga]::before {transition: all .6s cubic-bezier(0, -0.7, 1, 1.7) .2s; width: 300px; height: auto; padding: 8px; opacity:1; transform: translate(-10px, -30px);}
#contenido-exoticos .texto_exoticos ol li:hover a.card_accion {transition: all .6s cubic-bezier(0, -0.7, 1, 1.7) .2s; background: var(--body-bg-pink); color: black;}
#contenido-exoticos .texto_exoticos ol li:hover img {transition: all .6s cubic-bezier(0, -0.7, 1, 1.7) .2s; width: 300px; height: 200px;}
#contenido-exoticos .texto_exoticos ol li img {position: absolute; top: 2em; width: 0; height: 0; transition: all .6s cubic-bezier(0, -0.7, 1, 1.7) .2s;}

/* ESTILOS PARA LA PÁGINA PERROS */

.bg-perros {
  background-image: url("/mascotas/imagenes/razas_perro1.jpg");
}

.bg-image.bg-perros h1 {margin: 0;display: inline-block;width: auto;animation: derecha 2s linear 0.3s forwards;}
@keyframes derecha {
   0% {letter-spacing:normal; transform: translate(0, 0) scale(1);}
  50% {letter-spacing: 0.7em; transform: translate(200px, 0px) scale(1.5);}
  70% {letter-spacing: 0.9em;}
 100% {letter-spacing: 1.2em; transform: translate(400px, 0px) scale(1);}
}
.bg-image.bg-perros p {margin: 10px 50%; opacity: 0;letter-spacing:normal; transform: translate(35px, 30px) scale(1) rotateY(-10deg) skewY(14deg); animation: ladrido 2s ease 1s 4;}
@keyframes ladrido {
   0% {opacity: 0; letter-spacing:normal; transform: translate(35px, 30px) scale(1) rotateY(-10deg) skewY(14deg);}
  25% {opacity: 0.2; letter-spacing:0.6em;transform: translate(0, 20px) scale(1.2) rotateY(-15deg) skewY(20deg);}
  50% {opacity: 0.5; letter-spacing:1em;transform: translate(-30px, 20px) scale(1.5) rotateY(-20deg) skewY(14deg);}
  65% {opacity: 1; transform: scale(2);}
  85% {opacity: 0.5;transform: scale(1.5);}
 100% {opacity: 0; transform: scale(0.5);}
}

#contenido-perros .flex {width: 100%; max-width: 90%; display: flex; justify-content: space-around;}
#contenido-perros .flex a {display: block; flex-grow: 0; transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;}
#contenido-perros .flex a:hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; flex-grow: 1;}
#contenido-perros img:hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; transform-origin: 50% 50%;transform: scale(1.2) rotate(5deg);}
#contenido-perros ul.fci {list-style-type: none; width: 100%; max-width: 90%; min-height: 150vh; display: flex; align-content: space-around; justify-content: space-around; align-items: center; flex-wrap: wrap; /*transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/}
#contenido-perros ul.fci li {width: 100%; max-width: 40%; padding: 30px; white-space: pre-wrap; box-shadow: 3px 3px 5px var(--card-shadow); cursor: pointer; display: flex; flex-direction: column; flex-grow: 0; /*transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/}
#contenido-perros ul.fci li > p {font-size: var(--font-size-base);}
#contenido-perros ul.fci li > p > span {display: block; font-size: calc(var(--font-size-base) * 1.1); color: var(--primary-color);}
#contenido-perros ul.fci li div.pastor {
 width: 0; 
 height: 0; 
 overflow: hidden; 
 background-image: url("/mascotas/imagenes/pastor-aleman1.png");
 background-size: 25vw 15vh;
 background-repeat: no-repeat;
 background-position: 50%;
 animation: pastor 6s linear infinite paused;
 /*transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/
}
@keyframes pastor {
 0% {background-image: url("/mascotas/imagenes/pastor-aleman1.png");}
 20% {background-image: url("/mascotas/imagenes/pastor-belga1.png");}
 40% {background-image: url("/mascotas/imagenes/pastor-australiano1.png");}
 60% {background-image: url("/mascotas/imagenes/pastor-aleman-blanco1.png");}
 80% {background-image: url("/mascotas/imagenes/pastor-catalan1.png");}
}
#contenido-perros ul.fci li div.pinscher {
 width: 0; 
 height: 0; 
 overflow: hidden; 
 background-image: url("/mascotas/imagenes/san-bernardo1.png");
 background-size: 25vw 15vh;
 background-position: 50%;
 background-repeat: no-repeat;
 animation: pinscher 6s linear infinite paused;
/*transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/
}
@keyframes pinscher {
 0% {background-image: url("/mascotas/imagenes/san-bernardo1.png");}
 20% {background-image: url("/mascotas/imagenes/doberman1.png");}
 40% {background-image: url("/mascotas/imagenes/dogo-argentino1.png");}
 60% {background-image: url("/mascotas/imagenes/schnauzer-estandar1.png");}
 80% {background-image: url("/mascotas/imagenes/rottwailer1.png");}
}
#contenido-perros ul.fci li div.terriers {
 width: 0; 
 height: 0; 
 overflow: hidden; 
 background-image: url("/mascotas/imagenes/fox-terrier1.png");
 background-size: 25vw 15vh;
 background-repeat: no-repeat;
 background-position: 50%;
 animation: terriers 6s linear infinite paused;
/*transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/
}
@keyframes terriers {
 0% {background-image: url("/mascotas/imagenes/fox-terrier1.png");}
 20% {background-image: url("/mascotas/imagenes/white-terrier1.png");}
 40% {background-image: url("/mascotas/imagenes/yorkshire-terrier1.png");}
 60% {background-image: url("/mascotas/imagenes/teddy-terrier1.png");}
 80% {background-image: url("/mascotas/imagenes/manchester-terrier1.png");}
}
#contenido-perros ul.fci li div.teckels {
 width: 0; 
 height: 0; 
 overflow: hidden; 
 background-image: url("/mascotas/imagenes/drever1.png");
 background-size: 25vw 15vh;
 background-repeat: no-repeat;
 background-position: 50%;
 animation: teckels 6s linear infinite paused;
  /*transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/
}
@keyframes teckels {
 0% {background-image: url("/mascotas/imagenes/drever1.png");}
 20% {background-image: url("/mascotas/imagenes/salchicha1.png");}
 40% {background-image: url("/mascotas/imagenes/teckel-pelo-duro1.png");}
 60% {background-image: url("/mascotas/imagenes/teckel-miniatura1.png");}
 80% {background-image: url("/mascotas/imagenes/perro-tejonero-sueco1.png");}
}
#contenido-perros ul.fci li div.spitz {
 width: 0; 
 height: 0; 
 overflow: hidden; 
 background-image: url("/mascotas/imagenes/akita-inu1.png");
 background-size: 25vw 15vh;
 background-repeat: no-repeat;
 background-position: 50%;
 animation: spitz 6s linear infinite paused;
  /*transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/
}
@keyframes spitz {
 0% {background-image: url("/mascotas/imagenes/akita-inu1.png");}
 20% {background-image: url("/mascotas/imagenes/alaskan1.png");}
 40% {background-image: url("/mascotas/imagenes/pomerania1.png");}
 60% {background-image: url("/mascotas/imagenes/podenco1.png");}
 80% {background-image: url("/mascotas/imagenes/husky1.png");}
}
#contenido-perros ul.fci li div.sabueso {
 width: 0; 
 height: 0; 
 overflow: hidden; 
 background-image: url("/mascotas/imagenes/artois-hound1.png");
 background-size: 25vw 15vh;
 background-repeat: no-repeat;
 background-position: 50%;
 animation: sabueso 6s linear infinite paused;
  /*transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/
}
@keyframes sabueso {
 0% {background-image: url("/mascotas/imagenes/artois-hound1.png");}
 20% {background-image: url("/mascotas/imagenes/sabueso-suizo1.png");}
 40% {background-image: url("/mascotas/imagenes/bloodhound1.png");}
 60% {background-image: url("/mascotas/imagenes/chien-saint-hubert1.png");}
 80% {background-image: url("/mascotas/imagenes/perdiguero-burgos1.png");}
}
#contenido-perros ul.fci li div.muestra {
 width: 0; 
 height: 0; 
 overflow: hidden; 
 background-image: url("/mascotas/imagenes/braco-aleman1.png");
 background-size: 25vw 15vh;
 background-repeat: no-repeat;
 background-position: 50%;
 animation: muestra 6s linear infinite paused;
  /*transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/
}
@keyframes muestra {
 0% {background-image: url("/mascotas/imagenes/braco-aleman1.png");}
 20% {background-image: url("/mascotas/imagenes/braco-frances-pirineos1.png");}
 40% {background-image: url("/mascotas/imagenes/braco-hungaro-pelo-duro1.png");}
 60% {background-image: url("/mascotas/imagenes/setter-ingles1.png");}
 80% {background-image: url("/mascotas/imagenes/setter-irlandes1.png");}
}
#contenido-perros ul.fci li div.agua {
 width: 0; 
 height: 0; 
 overflow: hidden; 
 background-image: url("/mascotas/imagenes/golden-retriever1.png");
 background-size: 25vw 15vh;
 background-repeat: no-repeat;
 background-position: 50%;
 animation: agua 6s linear infinite paused;
 /* transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/
}
@keyframes agua {
 0% {background-image: url("/mascotas/imagenes/golden-retriever1.png");}
 20% {background-image: url("/mascotas/imagenes/cobrador-pelo-liso1.png");}
 40% {background-image: url("/mascotas/imagenes/foto23.png");}
 60% {background-image: url("/mascotas/imagenes/labrador-retriever1.png");}
 80% {background-image: url("/mascotas/imagenes/perro-agua-frison1.png");}
}
#contenido-perros ul.fci li div.compañia {
 width: 0; 
 height: 0; 
 overflow: hidden; 
 background-image: url("/mascotas/imagenes/chihuahua1.png");
 background-size: 25vw 15vh;
 background-repeat: no-repeat;
 background-position: 50%;
 animation: compañia 6s linear infinite paused;
 /* transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/
}
@keyframes compañia {
 0% {background-image: url("/mascotas/imagenes/chihuahua1.png");}
 20% {background-image: url("/mascotas/imagenes/bichon-boloñes1.png");}
 40% {background-image: url("/mascotas/imagenes/bulldog-frances1.png");}
 60% {background-image: url("/mascotas/imagenes/chin-japones1.png");}
 80% {background-image: url("/mascotas/imagenes/foto30.png");}
}
#contenido-perros ul.fci li div.galgo {
 width: 0; 
 height: 0; 
 overflow: hidden; 
 background-image: url("/mascotas/imagenes/afgano1.png");
 background-size: 25vw 15vh;
 background-repeat: no-repeat;
 background-position: 50%;
 animation: galgo 6s linear infinite paused;
 /* transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;*/
}
@keyframes galgo {
 0% {background-image: url("/mascotas/imagenes/afgano1.png");}
 20% {background-image: url("/mascotas/imagenes/galgo-español1.png");}
 40% {background-image: url("/mascotas/imagenes/galgo-greyhound1.png");}
 60% {background-image: url("/mascotas/imagenes/galgo-ingles1.png");}
 80% {background-image: url("/mascotas/imagenes/galgo-italiano1.png");}
}
#contenido-perros ul.fci li:hover {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; max-width: 40%; flex-grow: 1; font-weight: bold; box-shadow: none;}
#contenido-perros ul.fci li:hover div {
 position: absolute;
 transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
 width: 40vw;
 height: 40vh;
 overflow: visible;
 background-color: white;
 box-shadow: 4px 5px 6px var(--card-shadow);
 transform: translateX(-130px);
 animation-play-state: running;
}
#contenido-perros ul.fci li:hover div p {transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; font-size: calc(var(--font-size-base) * 0.9); transform: translate(-20px, -150px); background-color: var(--bg-color-pre); padding: 5px; color: white;}

/* ESTILOS PARA LA PAGINA GATOS */

.bg-gatos {background-image: url("/mascotas/imagenes/gato2.jpg");}
.bg-image.bg-gatos h1 {margin: 0;color: white;}

#contenido-gatos .flex {display: flex; justify-content: space-around;}
#contenido-gatos .flex div {position: relative;}
#contenido-gatos .flex div img {display: block; transition: .4s linear;}
#contenido-gatos .flex div span {display: inline-block; position: absolute; left: 100%; top: 20%; width: 0; overflow: hidden; white-space: pre-wrap;}
#contenido-gatos .flex:hover div span {transition: .4s linear; width: 100%; max-width: 250px; overflow: visible;}
#contenido-gatos .flex:hover img {transition: .4s linear; transform: translateX(30px) rotate(-10deg) skewX(-20deg);}
.imagen-gat {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
  display: block;
  margin: 0;
}

.sprite-gatito {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
  top: 0;
  left: -10%;
  background-image: url("/mascotas/imagenes/sprite-gatito2.jpg");
  background-repeat: no-repeat;
} 

/* ESTILO DE LA PAGINA LISTA RAZAS DE PERRO */

.banner-razas-perros {
  position: absolute;
  left: 8%;
  top: 200px;
  width: 85%;
  height: 80vh;
  cursor: pointer;
  z-index: 100;
  background-image: url("/mascotas/imagenes/chihuahua1.png"), url("/mascotas/imagenes/pastor-aleman1.png"), url("/mascotas/imagenes/san-bernardo1.png");
  background-repeat: no-repeat;
  background-position: 10% 0%, 45% 0%, 90% 0%;
  background-size: 300px, 300px, 300px;
  background-attachment: fixed;
  animation: razas 10s ease 0s infinite, sombra 3s ease 0s infinite alternate;
}

.banner-razas-perros .subtitle {display: inline-block; width: auto; height: auto; opacity: 0; overflow: hidden;}
.banner-razas-perros .title {position: absolute; display: inline-block; width: auto; height: auto; padding: 5px; margin: 0; top: 0; left: 0; animation: bajar 2s ease 0.5s 1 forwards;}
@keyframes bajar {
  from {transform: none;}
   to {transform: translate(300px, 420px) scale(1.6); text-transform: uppercase;}
}
@keyframes sombra {
  from {border-bottom: none; box-shadow: none;} 
  to {border-bottom: 2px solid black; box-shadow: 0px 0px 20px lightblue inset;}
}
@keyframes razas {
  0% {background-image: url("/mascotas/imagenes/chihuahua1.png"), url("/mascotas/imagenes/pastor-aleman1.png"), url("/mascotas/imagenes/san-bernardo1.png"); background-position: 10% 30%, 45% 30%, 90% 30%;}
  25% {background-image: url("/mascotas/imagenes/chihuahua1.png"), url("/mascotas/imagenes/pastor-aleman1.png"), url("/mascotas/imagenes/san-bernardo1.png"); background-position: 10% 30%, 45% 30%, 90% 30%; opacity: 0.5;}
  50% {background-image: url("/mascotas/imagenes/bull-terrier-americano1.png"), url("/mascotas/imagenes/husky1.png"), url("/mascotas/imagenes/parti-yorkie1.png"); background-position: 12% 32%, 47% 32%, 92% 32%; opacity: 1;}
  70% {background-image: url("/mascotas/imagenes/bull-terrier-americano1.png"), url("/mascotas/imagenes/husky1.png"), url("/mascotas/imagenes/parti-yorkie1.png"); background-position: 12% 32%, 47% 32%, 92% 32%; opacity: 0.5;}
  80% {background-image: url("/mascotas/imagenes/pastor-mini1.png"), url("/mascotas/imagenes/setter-irlandes1.png"), url("/mascotas/imagenes/teddy-terrier1.png"); background-position: 15% 34%, 50% 34%, 90% 34%; opacity: 1;}
  96% {background-image: url("/mascotas/imagenes/pastor-mini1.png"), url("/mascotas/imagenes/setter-irlandes1.png"), url("/mascotas/imagenes/teddy-terrier1.png"); background-position: 15% 34%, 50% 34%, 90% 34%; opacity: 0.5;}
  98% {background-image: url("/mascotas/imagenes/chihuahua1.png"), url("/mascotas/imagenes/pastor-aleman1.png"), url("/mascotas/imagenes/san-bernardo1.png"); background-position: 10% 30%, 45% 30%, 90% 30%; opacity: 0.5;}
 100% {background-image: url("/mascotas/imagenes/chihuahua1.png"), url("/mascotas/imagenes/pastor-aleman1.png"), url("/mascotas/imagenes/san-bernardo1.png"); background-position: 10% 30%, 45% 30%, 90% 30%; opacity: 1;}
}
.banner-razas-perros:hover {position: absolute; transition: all .1s ease 0s; background: lightgrey; background-repeat: no-repeat; width: 80%;}
.banner-razas-perros:hover .title {max-width: 260px; height: auto; transition: all .3s linear 0s; background: black; color: white; font-size: 0.8em; letter-spacing: 10px; top: 10px; text-align: center;}
.banner-razas-perros:hover .subtitle {transition: all 0.5s linear 0s; opacity: 1; transform: translate(250px, 350px) scale(2); color: white; letter-spacing: 10px;}

/* Estilo del buscador de resultados y clase que se añade y enlace que añado */

#search {
  width: 60%;
  max-width: 300px;
  padding: 10px 20px;
  border: none;
  box-shadow: 0 0 5px rgba(0,0,0,.3);
  border-radius: 5px;
  font-size: var(--font-size-sm);
  color: #333;
  transition: all .3s cubic-bezier(0, -0.7, 1, 1.7);
}

#button_busqueda {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  font-size: var(--font-size-sm);
  box-shadow:  0 0 5px rgba(0,0,0,.3);
  cursor: pointer;
  border-radius: 5px;
  transition: all .3s cubic-bezier(0, -0.7, 1, 1.7);
}

#button_busqueda:hover {
  background-color: #3e8e41;
}

.finded {
  display: inline-block;
  width: auto;height: 
  auto; padding: 3px;
  background: red;
  color: white;
}

.ancla-primero {
  width: 100%;
  height: 70px;
  font-size: var(--font-size-sm);
  display: flex;
  justify-content: center;
  padding: 10px;
  margin-left: 10px;
  color: black;
  text-decoration: none;
  background-image: url(/mascotas/imagenes/down.png);
  background-position: 50% 70%;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%;
  animation: dirigir 1s linear infinite;
}

@keyframes dirigir {
  0% {background-position: 50% 70%;}
  100% {background-position: 50% 100%;}
}

/* Estilo para el menu lista de perros sticky */

#content {max-width: 720px;}

#content h1 {
  display: block;
  text-align: center;
  max-width: 650px;
  background: black;
  color: white;
  position: sticky;
  top: 40px;
  z-index: 1000000;
}

.lista-razas-perros {
  position: sticky; 
  top: 0px; 
  max-width: 720px; 
  z-index: 1000000;
  background: grey;
  margin-left: -35px;
}
.abecedario {list-style: none; padding-left: 0; max-width: 720px; display: flex; flex-wrap: wrap; justify-content: space-around;}
.abecedario li {margin: 6px;}
.abecedario li a {display: inline-block;text-decoration: none;color: white; font-size: var(--font-size-base); padding-inline: 2px;}
.abecedario li a.active {transition: all .3s linear;border: 2px solid black;color: green;;background: lightgrey;transform: scale(1.1);}
.abecedario li a:hover {transition: all .3s cubic-bezier(0, -0.7, 1, 1.7); color: var(--secondary-color); box-shadow: 2px 2px 8px var(--card-shadow);}
.contenedor-pegajoso {max-width: 650px;position: relative;padding-left: 20px;border: 1px solid black; cursor: pointer;}
.contenedor-pegajoso:hover {transition: all .3s linear; border-color: transparent;}
.contenedor-pegajoso:hover .letra-pegajosa {background-color: var(--body-bg-pink);}
.letra-pegajosa {position: sticky;top: 35px; width: 0.8em; text-align: center; color: var(--primary-color); z-index: 1000000;font-size: calc(var(--font-size-base) * 1.8);font-weight: bold; transform: translate(-50px, 5px);}
#contenido-razas-perros article {padding-top: 25px; max-width: 620px;}
#contenido-razas-perros article:hover {border: none;}
#contenido-razas-perros article p {max-width: 500px; line-height: 25px; padding: 20px; border: 1px solid black; opacity: 1; display: grid; grid-template-columns: minmax(470px, 1fr); align-items: center; transition: all .3s linear;}
#contenido-razas-perros article p.active {transition: opacity .2s; opacity: 0;}
#contenido-razas-perros article p img {position: absolute; width: 0px;height: 0px;aspect-ratio: 1/1;overflow: hidden;visibility: hidden;opacity: 0;transition: all .3s linear;}
#contenido-razas-perros article p span {position: absolute; width: 0px;height: 0px;overflow: hidden;visibility: hidden;opacity: 0;transition: all .3s linear;}
#contenido-razas-perros article p:hover {transition: all .3s linear; border: none;}
#contenido-razas-perros article p:hover img {
  transition: all 0.3s linear 0.1s;
  display: block;
  width: 180px;
  height: 130px;
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  transform-origin: 50% 50%;
  transform: translate(10px, -20px) scale(1.1);
}
#contenido-razas-perros article p:hover span {
  transition: all 0.3s linear 0.1s;
  display: block;
  width: auto;
  height: auto;
  padding-block: 8px;
  padding-inline: 5px;
  font-size: var(--font-size-sm);
  overflow: visible;
  visibility: visible;
  opacity: 1;
  color: inherit;
  background-color: var(--body-bg);
  box-shadow: 2px 2px 8px var(--card-shadow);
  transform: translate(210px, -20px);
}
#contenido-razas-perros article a {text-decoration: none;color: var(--secondary-color);font-size: var(--font-size-base);padding: 10px;margin-bottom: 10px;}
#contenido-razas-perros article p span:hover {transition: all 0.3s linear 0s; transform-origin: 50% 0%;  transform: translate(210px, -20px) scaleY(1.2);}
#contenido-razas-perros article p img:hover {transition: all 0.3s linear 0s;display: block; transform-origin: 50% 50%; transform: scale(1.3); backdrop-filter: blur(3px);}

/* ESTILOS DE LAS PAGINAS DE GALERIAS DE PERROS */

.bg-galerias {
  background: url('/mascotas/imagenes/perros-grupo-grande.jpeg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.bg-galerias1 {
  background: url('/mascotas/imagenes/perros.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#cont-razas-g, #cont-razas-m, #cont-razas-p {
  padding-top: 50px;
  margin: 100px auto;
  width: 100%;
  max-width: 90%;
  display: flex; 
  flex-direction: column;
}

#menu_grandes, #menu_medianos, #menu_pequenos,
#menu_grandes1, #menu_medianos1, #menu_pequenos1 {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 90%;
  background-color: #e3f2ff;
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
}

#menu_grandes img, #menu_medianos img, #menu_pequenos img,
#menu_grandes1 img, #menu_medianos1 img, #menu_pequenos1 img {
  width: 5%;
  margin: 1%;
  cursor: pointer;
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
}

#menu_grandes img:hover, 
#menu_medianos img:hover, 
#menu_pequenos img:hover {
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s; 
  transform: translate(0, -5px) scale(1.2);
}

#menu_grandes img:focus, #menu_medianos img:focus, #menu_pequenos img:focus,
#menu_grandes img:active, #menu_medianos img:active, #menu_pequenos img:active  {
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
  border: 2px solid black;
}

#principal, #principal1, #principal2 {
  display: flex; 
  justify-content: space-around; 
  width: 100%; 
  max-width: 90%;
}

#visor, #visor1, #visor2 {
  margin: 2%; 
  border: 1px solid black; 
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
  display: flex;
  justify-content: center;
}

#visor:hover, #visor1:hover, #visor2:hover {
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
  background: rgba(250, 250, 250, .6);
  padding: 20px;
  border: 3px solid grey; 
  border-radius: 20px;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, .7);
  overflow: hidden;
} 

#visor img, #visor1 img, #visor2 img {
  width: 400px;
  height: auto;
  padding: 5px;
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
}

#visor:hover img, #visor1:hover img, #visor2:hover img {
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
  transform-origin: 50% 50%;
  transform: translate(0, 20px) scale(1.2);
}

#titulo_grandes, #titulo_medianos, #titulo_pequenos {
  display: block; 
  width: 100%; 
  padding: 5px 5px; 
  line-height: 30px; 
  color: white;
  text-align: center;
  text-wrap: nowrap; 
  background: rgba(0, 0, 0, .6);
}

.titulo-enlace {
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 5px;
}

.titulo-enlace a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  color: grey;
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
}

.titulo-enlace a:hover {
  transition: all .5s cubic-bezier(0, -0.7, 1, 1.7) .2s;
  background-color: black;
  color: white;
}

#descripcion_grandes,
#descripcion_medianos,
#descripcion_pequenos {
  font-size: var(--font-size-sm) !important;
  margin-left: 10px !important;
}

/* ESTILO PARA PAGINA PECES */

.bg-peces {
  background-image: url("/mascotas/imagenes/pez_payaso1.jpg");
}

.bg-image.bg-peces h1 {margin: 0;color: white;}

/* ESTILO PARA PAGINA PAJAROS */

.bg-pajaros {
  background-image: url("/mascotas/imagenes/agapornis1.jpg");
}

.bg-image.bg-pajaros h1 {margin-left:20px;color: black;letter-spacing: normal;position: absolute; top:70%;animation: color 2s linear 6 forwards;}

@keyframes color {
  from{color: black; letter-spacing: normal;}
   to{color: white; letter-spacing: 0.6em;}
}

.imagen_pajaro {
  position: sticky;
  top: 100%;
  left: 2%; 
  overflow: hidden;
  width: 200px;
  height: 200px;
  display: block;
  margin: 0;
}

.img-sprite {
  width: 200px;
  height: 200px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  max-width: none;
  background-image: url("/pagina_inicio/imagenes/sprite_pajaro_hor.png");
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
}
.imagen_pajaro1 {
  position: sticky;
  top: 20%;
  left: 2%; 
  overflow: hidden;
  width: 400px;
  height: 400px;
  display: block;
  margin: 0;
}
.sprite-aves {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
  top: 0%;
  left: 0%;
  max-width: none;
  background-image: url("/mascotas/imagenes/pajaros/sprite-aves.png");
  animation: izq 10s linear infinite;
}
@keyframes izq {
   0%{background-position: 0% 0%;}
  10%{background-position: 10% 0%;}
  20%{background-position: 20% 0%;}
  30%{background-position: 30% 0%;}
  40%{background-position: 40% 0%;}
  50%{background-position: 50% 0%;}
  60%{background-position: 60% 0%;}
  70%{background-position: 70% 0%;}
  80%{background-position: 80% 0%;}
  90%{background-position: 90% 0%;}
 100%{background-position: 100% 0%;}
}

.sprite-aves:hover {animation-play-state: paused;}

/* MEDIA QUERIES */

@media screen and (max-width: 1200px) {
 #contenido{max-width: 90%;}
 #contenido-exoticos .fotos ol {width: 100%; max-width: var(--card-width);}
 #contenido-exoticos .fotos li:hover p {width: 100%; max-width: 90%;}
}

@media screen and (max-width: 1040px) {
 #contenido {max-width: 100%;}
 #contenido-razas-gatos .gatos-container #lista-gatos {grid-template-columns: repeat(2, minmax(200px, 1fr));}
}

@media screen and (max-width: 970px) {
  .flex {display:flex; flex-direction:column; align-items: center;}
  .flex h1 {padding: 20px; height: 15%;}
  .banner h1 {margin:0;}
  @keyframes mov {
    from {color: black;transform: none;}
     to {color: maroon; background: yellow; transform: translate(0, 300px) rotate(360deg) skewX(14deg) skewY(14deg);}
   }
  @keyframes mov1 {
   from {transform: translate(0, 300px) skewX(14deg) skewY(14deg);}
    to {transform: translate(0, 270px) skewX(-14deg) skewY(-14deg);}
  }
  .banner1, .banner2, .banner3 {height: 70vh; background-size: 100% 400px; background-repeat: no-repeat;}
  .galeria {display: flex;flex-direction: column;}
  .fotos li {flex-direction: column; align-items: center; gap: 100px;}
  .fotos li:hover .animal {transform: scale(5);}
  .fotos li:hover p {width: 100%;}
}

@media screen and (max-width: 900px) {
  #menu, #menu1, #menu2 {margin-left: 6%;}
  #principal, #principal1, #principal2 {flex-direction: column;}
  .titulo-enlace {max-width: 100%;}
  #visor, #visor1, #visor2 {width: 240px; height: 210px; margin-left: 15%;}
  #visor img, #visor1 img, #visor2 img {width: 230px; height: 200px;}
}

@media screen and (max-width: 850px) {
 #contenido {max-width: 100%; padding-left: 20px;}
 #contenido p {transition: margin-left 0.2s; font-size: calc(var(--font-size-base) * 0.9); margin-left: 0 !important;}
}

@media screen and (max-width: 800px) {
  #contenido-index .abajo {flex-direction: column;}
  .banner-razas-perros {background-size: 170px, 170px, 170px;}
  .banner-razas-perros:hover {width: 100%; left: 0; background-size: 150px, 150px, 150px;}
  @keyframes bajar {
    from {transform: none;}
    to {transform: translate(100px, 310px) scale(1.3); text-transform: uppercase;}
  } 
  .banner-razas-perros:hover .subtitle {transition: all 0.5s linear 0s; opacity: 1; transform: translate(100px, 250px) scale(1.7); color: white; letter-spacing: 10px;}
}

@media screen and (min-width: 801px) and (max-width: 1199px) {
  #contenido-index .abajo p {max-width: 90%; padding: 20px 0;}
}

@media screen and (max-width: 786px) {
  [data-gato]:hover::before {left: 20%; top: 10%;}
}

@media screen and (max-width: 750px) {
  .abecedario {max-width: 100%;}
  .abecedario li a {font-size: calc(var(--font-size-base) * 0.8) !important;}
  #razas, .letra-pegajosa {font-size: var(--font-size-base) !important;}
  #razas {top: 35px !important;}
  .letra-pegajosa {padding-top: 5px !important;}
  article p:hover img {width: 150px;}
  article p:hover span {font-size: calc(var(--font-size-sm) * 0.8) !important;} 
}

@media screen and (max-width: 688px) {
  .abecedario li a {font-size: calc(var(--font-size-base) * 0.6) !important; padding-inline: 1px;}
}

@media screen and (max-width: 640px) {
  [data-gato]:hover::before {left: 10%; top: 10%;}
  article p {display: grid; grid-template-columns: minmax(400px, 1fr) !important;}
}

@media screen and (max-width: 578px) {
  #contenido-razas-perros.card {padding-right: 0 !important; padding-left: 0 !important;}
  .abecedario li {margin: 3px !important;}
  #razas {top: 30px !important;}
  .letra-pegajosa {padding-top: 0px !important;}
  article p:hover img {width: 120px; transform: translate(-10px, -20px) scale(1) !important;}
  article p:hover span {font-size: calc(var(--font-size-sm) * 0.7) !important; transform: translate(180px, -20px) !important;}  
}

@media screen and (max-width: 570px) {
  [data-gato]:hover::before {left: 0%; top: 10%;}
}

@media screen and (min-width: 501px) and (max-width: 800px) {
  #contenido-exoticos {margin: 0;}
  .fotos li:hover .animal {transform: scale(6);}
  .fotos li:hover p {transform: translate(-30px, 60px);width: 200%;}
}

@media screen and (max-width: 500px) {
  #contenido {max-width: 100%; padding-left: 0; margin: 0;}
  article p {display: grid; grid-template-columns: minmax(350px, 1fr) !important;}
  article p:hover img {transition: all 0.3s linear 0.1s;transform: translate(-30px, -20px) scale(1) !important;}
  article p:hover span {transition: all 0.3s linear 0.1s;transform: translate(150px, -20px) !important;}
  article p img:hover {transition: all 0.3s linear 0s;display: block;transform-origin: 100% 50%;transform: scale(1.2);}
}

/*@media screen and (max-width: 470px) {
  article p:hover img {transition: all 0.3s linear 0.1s;transform: translate(-90px, -20px) scale(0.8) !important;}
  article p:hover span {transition: all 0.3s linear 0.1s;transform: translate(90px, -20px) !important;}
  article p img:hover {transition: all 0.3s linear 0s;display: block; transform-origin: 50% 50%; transform: scale(1);}
}*/

@media screen and (max-height: 650px) {
  #contenido-razas-perros.card {padding-right: 0 !important; padding-left: 0 !important;}
  article p {display: grid; grid-template-columns: minmax(400px, 1fr) !important;}
  .abecedario {max-width: 100%;}
  .abecedario li {margin: 3px 2px !important;}
  .abecedario li a {font-size: calc(var(--font-size-base) * 0.8) !important;}
  #razas {top: 30px !important;}
}

@media screen and (max-height: 500px) {
  .banner1, .banner2, .banner3 {height: 100vh;}
}