a{
    padding-top: 1rem;
    font-family: 'Courier New', Courier, monospace;
}

.my_container1 , .my_container{
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}
.sec_logo {
    height:  80vh;
    width: 100%;
    background-image: url('../images/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
  }

  .sec_logoP{
    height:  10vh;
    width: 100%;
    background-image: url('../images/logo2.png');
    background-size: contain;
    background-repeat: no-repeat;
  }

  .container_logo {
    display: flex;
  flex-flow: row;
    
  }

.p_info{
   
    margin-bottom: -0.1em;
    font-size: 1rem;
    text-align: center;
    
}
.lnk_gallery{
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    line-height: 2;
    text-decoration: none;
    color: white;
}

.cont_lnk_gallery{
    background-color: #90720d;
    height: auto;
    margin: 1rem;;
}

.div_menu_home {
    border-right: 2px solid black; /* o el color que prefieras */
  }


.navbar , .navbar-toggler {
    border: transparent;
}

.btn_drop{
    background-color: aqua;
    margin-left: rem;
}

.btn_menu{
    background-image: url(../images/btn_menu1.png);
    
}
body{
padding: 2rem;


}

.btn_menu2{
    background-image: url(../images/btn_menu2.png);
    
}

.cont_line2{
    position: relative;
    height: 2px; 
   margin-bottom: 10rem;
   margin-top: 1rem;
   }  

   h1, h2, h3, ul {
    font-family: 'Courier New', Courier, monospace;
   }
h1{
   
    font-weight: bolder;
}

details, summary{
    font-family: 'Courier New', Courier, monospace;
    overflow-wrap: break-word;
    word-break: keep-all;
    hyphens: none;
    font-weight: bolder;
    
}

p{
    
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    line-height: 2;
    overflow-wrap: break-word;
    word-break: keep-all;
    hyphens: none;
    }

    .p_v, .p_h, .p_h_m, .p_h2{ 
        /*solo PARA MENUs*/
        font-size: 1rem;
        margin-bottom: 2em;
        font-weight: 700;
        
        }

  

/*HOVER PARA MENU*/
.p_h:hover,
.p_v:hover,
.p_h2:hover,
.p_h_m:hover {
    transform: scale(1.05);
    text-decoration: underline; /* Solo se subraya al pasar el mouse */
}
.p_h, .p_v , .p_h , .p_h_m, .p_h2{
    text-decoration: none; /* Quita el subrayado por defecto */
    transition: transform 0.3s ease, text-decoration 0.3s ease;
  }


.cont_lnk_gallery:hover{    
    transform: scale(1.05);
    text-decoration: underline;
    
}

 /*HOVER PARA MENU FIN*/
 .p_h2{
    color: black;
 }
  
    
    .p_h,
    .p_h_m{   /*menu Horizontal*/
        color: #ffff;
        text-align: center;
        display: block;
    }

.p_v { /*menu vertical*/
    display: inline-block;
     }
  
     .sec_menu, .sec_menu2{
        padding-top: 5em;
        text-align: right;       
        text-align: right;
        align-content:baseline;
    }


.offcanvas{
background-color: black;
opacity: 80%;
padding: 20px;
}

.img_logoH{
width: 150px;
margin-bottom: 2rem; 
    
}



.img_line{
    height:100vh ;
    margin-top: 1em;
    margin: 1em;  
}

@keyframes revelarDeDerecha {
   0% {
      clip-path: inset(0 0 0 100%); /* tapa todo desde la derecha */
      opacity: 1;
    }

    100% {
      clip-path: inset(0 0 0 0);    /* revela completamente */
      opacity: 1;
    }
  }
  
  #link_logoV {
    animation: revelarDeDerecha 1s ease-out forwards;
  }
  


/*Efecto de bounce*/

.imagen-saltito:hover{
transform: scale(1.05);
  }

.imagen-saltito {
        animation: saltito 2s ease-out;
        animation-delay: 0.5s;
        width: 50vw;

      }
      
      @keyframes saltito {
        0% {
            transform: scale(1);
            opacity: 0;
          }
          50% {
            transform: scale(1.05);
            opacity: 1;
          }
          100% {
            transform: scale(1);
            opacity: 1;
          }
    
}
/**/


.sec_hero{
    margin-left: 1REM;
    width: 100%;
    height: 100%;
    background-blend-mode: multiply;
    background-image: url(../images/hero.png);
    background-position: center;
    background-size: cover;

}

.hero_text{
    position: absolute;
    left: 60%;
    top: 30%;
    color: black;
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 70% de opacidad */
    padding: 1rem;
    border-radius: 10px;
  }

.cont_footer{
    display: flex;
}

.container_foot{
    background-color: black;
 
      
}

/*Pagina PROJECTS*/
  
.h1_title{
    background-color: #90720d ;
    color: #ffff;
    text-align: center;
    
}

.tb_img{
  margin: 1rem;
    height: auto;
    width: auto;
    z-index: 3;
}

.cont_descript { /*esto es para q el objeto see more este centrado en la imagen*/
  position: relative;
  display: inline-block;
  text-align: center;
}

.p_hover { /*este es el texto*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1px 1px;
  border-radius: 3px;
  font-weight: bold;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* evita que interrumpa el click */
  z-index: 1; /*este hace q se ponga delante de todo*/
  font-size: 2rem;
}
.tb_img:hover{ /*este hace q la imagen crezca*/
    transform: scale(1.08) ;
    opacity: 50%;
  
}

.cont_descript:hover .p_hover{ /*esto hace q se haga visible*/
  visibility: visible;
  opacity: 1;
}


/*quill pen press page*/
.cont_project{
    margin-top: 2em;    
}
.sec_project{
    justify-content: center;
   }



.img_project{
    max-width: 30%;
    
}
.cont_info {
    width: 100%;
   }


  .cont_line{
   
    position: relative;
    background-color: black;
    height: 2px; /* ajusta como desees */
    margin: 10px;

   }


 .img_horizontal{
  
  width: 100%;
  height: 100%;
   
   
}

.div_menu {
    display: none;
  }

/*aboutme*/

.cont_aca_hono{
    padding: 1rem;
}
.menudrp{
    visibility: hidden;

}
/*Photoshop*/

.aged {
    position: relative;
     overflow: hidden;
  }
  
  .aged-before,
  .aged-after {
    height: auto;
    display: block;
  }
  
  .reveal-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    animation: revelarDeDerecha 3s linear infinite;
    will-change: clip-path;
    z-index: 2;
  }

  .reveal-wrapper2 {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    animation: revelar2 6s linear infinite;
    will-change: clip-path;
    z-index: 3;
  }
  
  .reveal-wrapper img {
    object-fit: cover;
    object-position: top;
  }
  /* * * * * email * * * * * * * * */
/* Fondo oscuro del popup */
#popup-form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  
}

/* Contenido del popup */
/* Fondo oscuro del popup */
#popup-form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Contenido del popup */
label, input {
  margin: 10px;
}

.field-group {
  display: flex;
  align-items: center;
  
}
textarea {
  flex: 1; /* El textarea ocupa todo el espacio posible */
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 50%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  position: relative;
}

/* Botón de cerrar */
.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* Oculto al inicio */
.popup-hidden {
  display: none !important;
}

.btn_email{
  border-radius: 5px;
  border: none;
  background-color: #90720d;
  color: #fff;
 
  
}
 /********************************/




  /* Animación de revelado horizontal */
  @keyframes revelarDeDerecha {
    0% {
      clip-path: inset(0 0 0 100%); /* todo oculto desde la derecha */
    }
    100% {
      clip-path: inset(0 0 0 0); /* completamente visible */
    }
    0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.02);
      }
  }

  @keyframes revelar2 {
    0% {
      clip-path: inset(0 0 100%); /* todo oculto desde la derecha */
    }
    100% {
      clip-path: inset(0 0 0 0); /* completamente visible */
    }
    0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.02);
      }
  }
  
  

  
  /* efecto de pulsación suave */
  @keyframes saltitoSuave {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.02);
    }
  }
  
  
 
  /*MEDIA QUERY*/
  @media (max-width: 850px) {
  
    .menu-desktop{
        display: none;
    }
    .space_2{
        height: 50%;
    }

        .my_container1{
        padding: 0;
        margin: 0 auto;
        width: 100%;
        height: auto;
        display: block;
        flex-flow: row;
        
    }
    .my_container{
        padding: 1rem;
        margin: 0 auto;
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: row;
         }

    .img_line{
       visibility: hidden;
       position: absolute;
    } 
  
    .p_info{
        height: 25vh;
        overflow: scroll;
        text-align: left;
    }

    .div_menu {
        position: relative;
        display: block;
           
      }
    
        .container_logo {
        display: flex;
        justify-content: center;
        
      }
   
      .sec_logo {
        height:  10vh;
       width: 100%;
        background-image: url(../images/logo2.png);
           background-size: contain;          
       }

      .p_info1{
        text-align: left;
        padding-left: 10px;
        font-size: 1rem;
        margin-bottom: -5px;
      }
    
      
    .sec_menu2{
        padding: 5px;
        margin: 5px;
        position: relative;
         text-align: left;
        justify-content: center;
        display: flex;
        text-indent: 0.5rem;
       transform: scale(0.9)
    }
    .div_menu_home {
        border-right: 0;
        }
    
    .space{
        height: 2PX;
        width: 100%;
        background-color: black;
    }
    .sec_menu{
        padding: 0;
        margin: 0;
        height: 0;
        visibility: hidden;
        visibility: hidden;
    }
   
    .sec_hero{
        width: auto;
        height: 40vh;
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: -1rem !important;
        padding: 0 !important;
        position: relative;
    }

    .hero_text {
        position: relative;
        left: 0%;
        top: 0%;
        text-align: center;
        justify-content: center;
        color: black;
        margin-bottom: 2rem !important;
        padding: 10px !important;
        z-index: 1;
        background-color: transparent;
      }
     
      footer.container_foot {
        margin-top: 2rem;
        text-align: center;
        justify-content: center !important;
        align-items: center !important;
      
      }
      
      .cont_footer {
       
        justify-content: center;
        align-items: center;
        text-align: center;
        
      }
      .sec_project {
        display: flex;
        flex-direction: column; /* Asegura que los elementos se apilen */
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .my_col {
        margin: 1rem 0; /* Asegura que haya un pequeño espacio entre las columnas */
        border: none !important;
        border-top: solid !important;
    }
    .p_hover { /*este es el texto*/
        font-size: 1rem;
      }
   
  }