body {
  margin: 0;
  background-image: url(fondo.jpg);
  background-size: cover;
  background-attachment: fixed; /* <- Esto hace que quede fijo */
  background-position: center;
  background-repeat: no-repeat;
}
.contenedor{margin-right: auto;margin-left: auto;display: flex;max-width: 1300px;flex-direction: row;}
.nombre{display: flex;flex-direction: column;align-items: flex-end;justify-content: center;}
.nombre h1{filter: drop-shadow(2px 2px 6px black);margin-top: -69px;font-weight: 700;color: white;font-size: 76px;font-family: 'Montserrat';}
.nombre h2{filter: drop-shadow(2px 2px 6px black);margin: 0;font-weight: 700;color: white;font-size: 58px;font-family: montserrat;}
.nombre h5{
    filter: drop-shadow(2px 2px 4px black);
    margin-top: -92px;
    color: white;
    font-weight: 600;
    font-family: 'Montserrat';
    font-size: 20px;
}
.b{

padding-right: 19px;

font-weight: 200;

font-size: 84px;

font-family: 'WindSong';
}
.n{

padding-right: 23px;

font-size: 104px;

font-weight: 200;

font-family: 'WindSong';
}
.foto{
  filter: drop-shadow(2px 2px 6px black);
      padding: 0;
      margin: 0;}

.c-redes{gap: 30px;
         display: flex;
        }
.redes{
   filter: drop-shadow(3px 3px 3px rgba(0,0,0,5));
   gap: 50px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
}
.redes img{
   text-shadow: rgb(0 0 0) 0px 2px 2px;
}
.trabajos{
   width: 100%;
   padding: 0;
   margin: 0;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: center;
}
.titulo{
 margin: 0;
 font-size: 36px;
 font-weight: 700;
 color: white;
 font-family: 'Montserrat';
}
.t{font-size: 67px;padding-right: 10px;font-weight: 300;font-family: 'WindSong';}
.reine{
       margin-top: -23px;
       margin-left: -43px;
       gap: 10px;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
      }
.reine a{
   filter: drop-shadow(2px 2px 4px black);
   text-decoration: none;
}
.reine:hover .tp1 h5,
{
   opacity:1;
}
#tp1{
   display: flex;
   background-image: url(tp1.png);
   background-size: cover;
   width: 178.85px;
   height: 137.55px;
   justify-content: center;
   align-items: center;
   transition: 0,3s linear;
}
#tp1 h5{
   text-shadow: 5px 3px 7px black;
   color: #ffffff;
   opacity: 0;
   font-size: 40px;
   margin: 0;
   font-family: 'Montserrat';
   transition: 0.3s linear;
   }
#tp1:hover h5{
   opacity:1;
}
#tp1:hover{
   background-image: url(tp1s.png);
}
#tp2{
   display: flex;
   background-image: url(tp2.png);
   background-size: cover;
   width: 178.85px;
   height: 113.87px;
   justify-content: center;
   align-items: center;
   transition: 0,3s linear;
}
#tp2 h5{
   text-shadow: 5px 3px 7px black;
   color: #ffffff;
   opacity: 0;
   font-size: 40px;
   margin: 0;
   font-family: 'Montserrat';
   transition: 0.3s linear;
   }
#tp2:hover h5{
   opacity:1;
}
#tp2:hover{
   background-image: url(tp2s.png);
}
#tp3{
   display: flex;
   background-image: url(tp3.png);
   background-size: cover;
   width: 178px;
   height: 131px;
   justify-content: center;
   align-items: center;
   transition: 0,3s linear;
}
#tp3 h5{
   text-shadow: 5px 3px 7px black;
   color: #ffffff;
   opacity: 0;
   font-size: 40px;
   margin: 0;
   font-family: 'Montserrat';
   transition: 0.3s linear;
   }
#tp3:hover h5{
   opacity:1;
}
#tp3:hover{
   background-image: url(tp3s.png);
}
#tp4{
   display: flex;
   background-image: url(tp4.png);
   background-size: cover;
   width: 190px;
   height: 123px;
   justify-content: center;
   align-items: center;
   transition: 0,3s linear;
}
#tp4 h5{
   text-shadow: 5px 3px 7px black;
   color: #ffffff;
   opacity: 0;
   font-size: 40px;
   margin: 0;
   font-family: 'Montserrat';
   transition: 0.3s linear;
   }
#tp4:hover h5{
   opacity:1;
}
#tp4:hover{
   background-image: url(tp4s.png);
}
#tp5{
   display: flex;
   background-image: url(tp5.png);
   background-size: cover;
   width: 185px;
   height: 121px;
   justify-content: center;
   align-items: center;
   transition: 0,3s linear;
}
#tp5 h5{
   text-shadow: 5px 3px 7px black;
   color: #ffffff;
   opacity: 0;
   font-size: 40px;
   margin: 0;
   font-family: 'Montserrat';
   transition: 0.3s linear;
   }
#tp5:hover h5{
   opacity:1;
}
#tp5:hover{
   background-image: url(tp5s.png);

}
#tp6{
   display: flex;
   background-image: url(tp6.png);
   background-size: cover;
   width: 182px;
   height: 127px;
   justify-content: center;
   align-items: center;
   transition: 0,3s linear;
}
#tp6 h5{
   text-shadow: 5px 3px 7px black;
   color: #ffffff;
   opacity: 0;
   font-size: 40px;
   margin: 0;
   font-family: 'Montserrat';
   transition: 0.3s linear;
   }
#tp6:hover h5{
   opacity:1;
}
#tp6:hover{
   background-image: url(tp6s.png);

}
.boton{
 display: flex;
 background-size: cover;
 width: 100px;
 height: 29px;
 background-image: url(boton.png);
 justify-content: flex-end;
}
.aboton{
   padding-right: 36px;
   align-self: flex-end;
   filter: drop-shadow(2px 2px 4px black);
   margin-top: 27px;
}

@media (max-width: 767px){
  .contenedor {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .nombre {
    align-items: center;
    text-align: center;
  }
.nombre h1{
}
   .nombre h2{
      padding-left: 200px;
   }
   .nombre h5{
      text-align: left;
      padding-left: 270px;
}
  .c-redes {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .redes {
    flex-direction: row;
    justify-content: center;
  }

  .foto img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .trabajos {
    align-items: center;
  }

  .reine {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 15px;
    justify-items: center;
  }
  .aboton {
    padding-right: 0;
  }
}

@media (max-width: 1024px) {
  .contenedor {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .nombre {
    align-items: center;
    text-align: center;
  }

  .nombre h2 {
    padding-left: 200px;
  }

  .nombre h5 {
    text-align: right;
    padding-left: 270px;
  }

  .c-redes {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .redes {
    flex-direction: row;
    justify-content: center;
  }

  .foto img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .trabajos {
    align-items: center;
  }

  .reine {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    grid-template-rows: repeat(2, auto); /* 2 filas */
    gap: 15px;
    justify-items: center;
  }

  .aboton {
    padding-right: 0;
  }
}
@media (max-width: 1220px) {
  .contenedor {
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }

  .nombre,
  .foto {
    flex: 1 1 45%;
    display: flex;
    justify-content: center;
  }
.titulo{
  margin: 0 auto;
}
  .trabajos {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .reine {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    justify-items: center;
  }

  .aboton {
    padding-top: 20px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .contenedor {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .nombre {
    align-items: center;
    text-align: center;
  }

  .nombre h2 {
    padding-left: 1;
  }

  .nombre h5 {
    text-align: center;
    padding-left: 1;
  }

  .c-redes {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .redes {
    flex-direction: row;
    justify-content: center;
  }

  .foto img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .trabajos {
    justify-content: center;
    align-items: center;
  }

  .reine {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 15px;
    justify-items: center;
  }

  .aboton {
    padding-top: 20px;
    padding-right: 0;
  }
}