/*Tipografía*/
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
  
/*ESTILOS GENERALES ----------------------------------------------------- */


body{
font-family: "Poppins", serif;
color:rgb(0, 0, 0);
margin: 0;
}

/*Navegación*/
.header{
    width:100%;
    background-color: rgb(0, 0, 0);
    display:flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
}

ul.navigation {
list-style-type: none;
display:flex;
margin: 0;
padding-inline-start: 0%;
}

ul.navigation li a{
    color:white;
    text-decoration: none;
    display: inline-block;
    padding: 8px 12px;
    background-color: black;
    font-size:large;
}
.navigation li a:hover{
    color:rgb(245, 129, 189);
}
.navigation li a:active{
color: rgb(255, 41, 152);
}
.navigation li.active a{
    background-color: rgb(255, 255, 255);
    color:#000000;
   }

   @media (min-width:1024px){
    .header{
        display:flex;
        flex-direction: column;
        align-items:flex-start;
    }
    ul.navigation{
        padding-inline-start: 2%;
    }
    ul.navigation li a{
   
    padding: 8px 12px;
    font-size: medium;
    }
   }
   
   /* Flecha volver arriba-------- */
   .flecha{
    position:absolute;
    position: fixed;
    width: 10vh;
    height: auto;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    cursor:pointer;
    display: none;
   }
   .flecha.visible {
    display: block; /* Muestra la flecha */
}
   
/*TRABAJOS------------------------------------------------------------------------- */
/*Cabecera*/
#banner{
    height: 17vh;
    width: 100%;
    object-position: left;
    object-fit: cover;
    margin: 0 auto;
}

/*Cajas trabajos */
.main-container{
    width: 90%;
    margin: 3vh auto; 
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.box {
    position: relative;
    margin: 1%;
    width:100%;
    min-height: auto;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
   
}

 @media (min-width:1024px){
    #banner{
        height: 20%;
        width: 100%;
        object-fit: contain;
        margin: 0 auto;
    }
    
     .box{
     width: 30%;
     }
    }

/*Imagenes*/
.imgCajas{
    width: 100%; 
    height: 100%;
    object-fit: cover;
    display:block;
}    

.titulo{
    background-color: rgba(0,0,0,50%);
    color:white;
    position:absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s ease-in-out
    
}
.titulo:hover{
    opacity: 100%;
}
    
    /*CONTACTO----------------------------------------------------------------- */
     
    .main-cnt-container {
        width: 90%;
        margin: 3vh auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #fondoContact {
        width: 100%;
        height: auto;
        margin: 3vh auto;
        
    }
   /*Formulario*/
    .textosContact {
        text-align: left;
        margin: 8vh auto;
    }
    
    .textosContact h1 {
        font-size: 6vh;
        margin-bottom: 2vh;
    }
    
    .textosContact label,
    .textosContact input,
    .textosContact textarea {
        width: 100%;
        margin-bottom: 1vh;
    }
    
    .textosContact input[type="submit"] {
        padding: 10px;
        background-color: black;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 2vh;
    }
    
    .textosContact input[type="submit"]:hover {
        background-color: #575757;
    }
    .rrss {
        display: flex;
        align-items: center;
    }
    
    #patocontaconesrosas {
        width: 100%;
        height: auto;
        margin: 2vh;
    }
    
    #lnk {
        width: 10vh;
        margin: 1vh;
    }
    
    
    @media (min-width: 1024px) {        
        /* Contacto */
.main-cnt-container {
    width:80%;
    margin:auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}


#fondoContact{

height: 50vh;
width: auto;
}

.textosContact{
    display:grid;
    text-align: left;
    margin-top: 0;
    margin-bottom: 10vh;
    position: relative;
    grid-row: 2/3;
    grid-column: 1/2;
}

    .textosContact h1 {
        font-size: 10vh;
    }

    .textosContact form {
        align-items: flex-start;
    }

    .textosContact label,
    .textosContact input,
    .textosContact textarea {
        width: 100%;
    }

    .textosContact input[type="email"] {
        width: 20%;
    }

    .textosContact textarea {
        width: 70%;
    }

}
.textosContact input[type="submit"] {
padding: 10px;
background-color: black; 
color: white; 
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.5vh;

}
/*RRSS*/
.rrss{
grid-column: 2/3;
grid-row: 2/3;
display: flex;
justify-content: center;
align-items: flex-start;
}
#patocontaconesrosas {
grid-column: 2/3;
grid-row: 1/2;
height: 50vh;
width:auto;
}
#lnk{
width:10vh;

}
    

 /*BIO----------------------------------------------------------------------- */
 .bio {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin: 0 auto;
}

.textosBio {
    width: 90%;
    margin: 3vh 0;
    
}

.sobremi {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.titulobio {
    display: block;
}

.titulobio h1 {
    font-size: 8vh;
}

.sobremi p {
    font-size: 2vh;
    line-height: 3vh;
}

.bioimg {
    width: 100%;
    margin: 0;
    height: auto;
}
#imgBio{
    width: 100%;
    object-fit: contain;
}
@media (min-width: 1024px) {
    .bio {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start; 
        margin:0 auto;
    }

    .textosBio {
        width: 80%;
        margin: 3vh auto;
        text-align: left;
    }

    .sobremi {
        align-items: flex-start;
        margin: auto 10%;
    }

    .titulobio h1 {
        font-size: 10vh;
    }

    .sobremi p {
        font-size: 2.5vh;
        line-height: 3.5vh;
    }

    .bioimg {
        width: 30%;    
    }
    #imgBio{
        width: 50%;
        height: 100%;
        object-fit: contain;
    }
}
#lnk{
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight:500;
}

 /*WORKS------------------------------------------------------------------------ */

 /*Portada*/
 
#imgPortada{
    position:relative;
    width: 100%;
    height: 34vh;
    object-position: left;
    object-fit: cover;
    margin: 0 auto;
 }
 #imgIg{
    position: absolute;
    width: 4vh;
    bottom: 61%;
    left: 7%;
 }
 #lnkIg{
    position: absolute;
    bottom:  61%;
    left: 16%;
    font-size: 2.5vh;
    text-decoration: none;
    color : white;
 }

 #lnkLupe{
    position: absolute;
    bottom: 61%;
    left: 5%;
    width:10vh;
 }
    #firma{
    position: absolute;
    width: 8vh;
    top: 8%;
    right: 5%;
    }
    #logoTejemanejes{
    position: absolute;
    width: 14vh;
    bottom: 79%;
    right: 5%;
    border-radius: 100%;
    }
    @media (min-width: 1024px){
        #imgPortada{
            object-fit: contain;
            height: 100%;
            width: 100%;
            position:relative;
            
         }
         #imgIg{
            position: absolute;
            width: 5vh;
            bottom: 5%;
            left: 5%;
         }
          #lnkIg{
            position: absolute;
            bottom: 5vh;
            left: 8%;
            font-size: 3vh;
            text-decoration: none;
            color : white;
             }
         #lnkLupe{
            position: absolute;
            bottom: 5%;
            left: 5%;
            width:15vh;
            } 
            #firma{
                position: absolute;
                width: 10vh;
                top: 5%;
                right: 5%;
                }
                #logoTejemanejes{
                    position: absolute;
                    width: 25vh;
                    bottom: 5%;
                    right: 5%;
                    }
    }

  /*Proyectos*/

.containerPrj{
 
  display: flex;
  flex-direction: column;
}

  .blq1{
  display: contents;
}

  /*Bloque1*/
  .blq1 img{
      width: 100%;
      height: auto;
  }
  .blq1 .texto{
      padding:10%;
      font-size:large;   
  }

  .blq1 h1{
      padding-bottom: 5%;
  }
s
 /* Bloque 2 */
  .blq2 {
  grid-gap: 5px;
  }
  .blq2 img {
  width: 100%;
  height: auto;
  }
  .blq2 .titulo2 {
    margin: auto 3vh;
}
  #vdTejemanejes{
   width:100%;
  }

 /*Video PAM!*/
 #videoPam{
    height: auto;
    width:100%;
 }
 /*Carteles PAM!*/
 .carteles{
    display: flex;
    flex-direction:column;
}
.carteles img {
    width: 100%;
    height: auto;
}

  /*Link lupe*/
  #textlnk{
    display: flex;
    align-items: center;
    text-decoration: none;
    color:rgb(0, 0, 0);
    margin:auto 3vh;
  }
  #lnklbr{
    display:flex;
    align-items: center;
    width:12vh;
  }
/* MEDIA------------------------------------------------------------ */
  @media (min-width: 1024px){
    .containerPrj{
        width: 80%;
        margin: 3vh auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
      }
    .blq1 .texto{
        font-size:16px;
        padding:10%;
        grid-column:1 / 2;
        grid-row: 1/2;
           
    }
    .blq1 img{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    
  .blq1 h1{
    padding-bottom: 5%;
}

#igTejemanejes{
    padding: 10%;
}
/* Bloque 2 */
.blq2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
grid-column: 1 / 3;
grid-row: 2/3;
}
.blq1 .titulo2{
  margin:0;
}
.blq2 img {
grid-row: 2/3;
width: 100%;
height: auto;
} 
 #vdTejemanejes{
    height: 80vh;
    width: auto;
    padding-left: 30%;
     grid-column: 2/3;
    grid-row: 2/3 ;
  }

 /*Video PAM!*/
 #videoPam{
    grid-column:1/3;
    grid-row:2/3 ;
    height: 80vh;
    width: auto;
    padding-left: 3%;
 }
 /*Carteles PAM!*/
 .carteles{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

  /*Link lupe*/
  #textlnk{
    display: flex;
    align-items: center;
    margin:0;
  }
  #lnklbr{
    display:flex;
    align-items: center;
    width:12vh;
    padding-left: 5%;
    margin:0;
  }
    /*Final de página*/
    
  .finalPag p{
    margin: 0;
   
  }
  }
 

  /*Final de página*/
  .finalPag{
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    padding: 2vh 0;
    bottom:0;
  }

  .finalPag p{
    margin: 1vh ;
    font-size: 1.5vh;
  }