*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* ================= VARIABLES ================= */
:root{
    --tarjetas: linear-gradient(1deg, rgb(161, 161, 161), rgb(0, 0, 0));
    --fondo-pantalla: linear-gradient(500deg, rgb(99, 99, 99), black);
    --cartas: rgba(0, 0, 0, 0.514);
    --letras: azure;
    --border: rgba(255, 255, 255, 0.507);
    --header: rgba(0, 0, 0, 0.541);
}

html, body{
  width: 100%;
}

html{
    scroll-behavior: smooth;
}

body{
    background: var(--fondo-pantalla);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--letras);
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

header{
    background-color: var(--header);
    text-align: center;
    padding: 2rem;
    border-bottom: 2px solid var(--border);
}

ul{
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 5rem;
    margin-top: 2rem;
}

a{
    text-decoration: none;
    color: var(--letras);
}

.tituloDiv{
    text-align: center;
    margin-top: 10rem;
}

.contenedor-yo{
    margin: 4rem auto;
    width: 90%;
    max-width: 1100px;
    min-height: 35rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    text-align: center;
}

.tarjeta1{
   grid-column: 1/4;
   grid-row: 1/4;
   border-radius: 1rem 10rem 1rem 10rem;
   background: var(--cartas);
   animation: aparecer-izquierda 4.5s ease infinite;
}

.tarjeta2{
    grid-column: 3/6;
    grid-row: 3/6;
    border-radius: 2rem;
    z-index: 1000;
    background: linear-gradient(170deg, rgb(51, 51, 51), black);
    padding: 2rem;
    box-shadow: 0 2px 10px black;
    filter: brightness(40%);
    transition: all 0.3s ease;
}

.tarjeta2 p{
    margin-top: 3rem;
}

.tarjeta2:hover{
  filter: brightness(100%);
  transform: translateY(-20px);
  border: 2px solid white;
  box-shadow: 0 20px 30px black;
}

.tarjeta3{
    grid-column: 5/8;
    grid-row: 5/8;
    border-radius: 10rem 1rem 10rem 1rem;
    background: var(--cartas);
    animation: aparecer-derecha 5s ease infinite;
}

.contenedor-informacion{
    margin: 5rem auto;
    width: 90%;
    max-width: 1200px;
    min-height: 700px;
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
}

.contenedor-informacion div{
    background: var(--cartas);
    margin: 0.5rem;
    border: 2px solid var(--border);
    text-align: center;
    padding: 2rem;
}

.contenedor-informacion p{
  margin-top: 1rem;
}

.carta{
    border-radius: 1.5rem;
    transition: all 0.3s ease;
    filter: brightness(40%);
}

.carta:hover{
  filter: brightness(100%);
  transform: translateY(-20px);
  border: 2px solid white;
  box-shadow: 0 20px 30px black;
}

.carta1{
    grid-column: 1/3;
    grid-row: 1/3; 
}

.carta6{
    grid-column: 1/5;
}

@keyframes aparecer-izquierda {
  0%,100% {
    opacity: 0;
    transform: translateX(-60px);
    filter: blur(8px);
  }
  40%,60% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes aparecer-derecha {
  0%,100% {
    opacity: 0;
    transform: translateX(60px);
    filter: blur(8px);
  }
  40%,60% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

img{
  width: 100%;
  max-width: 13rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1rem;
  transition: all 0.3s;
}

img:hover{
  transform: translateY(-20px);
  border: 2px solid white;
  box-shadow: 0 20px 30px black;
}

.petsMain{
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.containerPets{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 90%;
  max-width: 600px;
}

@media (max-width: 1024px) {

  ul{
    gap: 2rem;
  }

  .contenedor-yo{
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }

  .tarjeta1{
    grid-column: 1/3;
    grid-row: 1/3;
  }

  .tarjeta2{
    grid-column: 2/5;
    grid-row: 2/5;
  }

  .tarjeta3{
    grid-column: 3/6;
    grid-row: 3/6;
  }


}

@media (max-width: 768px) {

  ul{
    flex-direction: column;
    gap: 1rem;
  }

  .tituloDiv{
    margin-top: 4rem;
  }

  .contenedor-yo{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 2rem;
  }

  .tarjeta1,
  .tarjeta2,
  .tarjeta3{
    grid-column: auto;
    grid-row: auto;
    animation: none;
  }

  .tarjeta2{
    filter: brightness(100%);
  }

  .contenedor-informacion{
    grid-template-columns: 1fr;
  }
  .carta{
    grid-column: auto;
    grid-row: auto;

  }
  .containerPets{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {

  h1{
    font-size: 1.2rem;
  }

  p{
    font-size: 0.9rem;
  }

  img{
    max-width: 10rem;
  }
}