@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair:wght@300;400;500;600;700;800;900&display=swap');

*{
    margin: 0;
    padding: 0;
    list-style: none;  
    text-decoration: none;   
    font-family: Playfair, serif; 
}
body{
    background-color: rgb(73, 134, 136);
    background-size: 100px 8px;    
    min-width: 432px;
    min-height: 432px;
    top: 40px;
}
.header-content{
    max-width: 1200px;
    min-width: 700px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    box-shadow: 0 4px 25px -22px black;
}
.menu nav ul li a{
    opacity: 0.5;
}
.menu nav ul li a:hover{
    opacity: 1;
    color: green;
}
.menu img{
    width: 35px;
    height: 35px;
    left: 20px;
}
#icon-menu{
    width: 50px;
    height: 50px;
    position: absolute; 
    top: 16px;
    right: 20px;
    font-size: 14px;
    padding: 10px;
    background-color: rgba(14, 122, 95, 0.418);
    margin-right: 10px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;   
    cursor: pointer;     
    display: none; 
}
#icon-menu img{
    width: 60px;
    height: 42px;
    border-radius: 100px;
}
#icon-menu:hover{
    opacity: 0.8;
}
.inicio{
    visibility: visible;
    width: 100dvw;
    height: 88dvh;    
    background-image: url('../img/img4b.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.nav-tabs{
    cursor: pointer;
    align-items: center;
    height: 53px; 
    border-top: 5px;  
}
.nav-item{
    background-color: rgba(14, 122, 95, 0);
}
span{
    color: rgb(2, 58, 27);
}
.about{
    visibility: visible;
    width: 100dvw;
    height: 88dvh;  
    min-width: 700px;
    align-items: center; 
    background-image: url('../img/img4b.jpg');
    background-size: cover;
    background-repeat: no-repeat;    
}
.box-tecnologias{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-width: 700px;
    width: 90dvw;
    margin-left: 5%;    
    height: 80px;     
    justify-content: space-around;
    align-items: center;
    background-color: #3b685881;
    color: white;
    border-radius: 90px;
    border: 1px solid #808080;
    overflow: auto; 
}
.img-tec{
    background-color: #db9c70;
    width: 70px;
    height: 70px;
    border-radius: 90px auto;
}
.info-content{
    min-width: 700px;
    max-height: 200px;
    text-size-adjust: 1.2rem;
}
.img-der{
    width: 160px auto;
    height: 140px auto;
    border-radius: 90px;
}   
.toggle{
    visibility: visible;
}
.proyecto { 
    margin-bottom: 20px; 
    color: black;
}
.proyecto img{
    width: 100%;
}
.conocimientos {
    width: 80%;
    height: 90px auto;
    align-items: left;
    color: black;
    text-align: center;
    padding: 20px;
    border-radius: 3px;
    transition: transform 0.3s ease-in-out;
}
.conocimientos img{
    width: 100%;
}
.certificados img{
    width: 150px;
    height: 90px auto;
}
.card:hover {
    transform: scale(1.10); /* Expande la tarjeta */
}
.info-content{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95vw;
    margin-left: 3%;
    background-color: #274d4081;
    color: white;   
    border-radius: 90px;
    border: 1px solid #69ac9b;
    text-wrap: pretty;
}
.info-text{
    display: flex;
    justify-content: center;    
    width: 80vw;
}
.info-contacto{
    margin-left: 3%;
    width: 100px;
    height: 350px;
    background-color: #d9e4e025;
    color: rgba(224, 233, 224, 0.659);   
    border-radius: 90px;
    border: 1px solid #69ac9b;
    text-wrap: pretty;
}
.h6{
    justify-content: center;
    text-size-adjust: 100%;
    text-align: center; 
    font-size: 1em auto;  
}
.main{
    background-size: 100% auto; 
    background-color: #1a3123;
    color: white;   
}
.flags{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flags_img{
    display: block;
    cursor:pointer;
}
.card {
    width: 80%;
    height: 90px auto;
    color: black;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}
#cajas {
    display: flex;
    align-items: center;
    justify-content: space-between;      
    width: 80%;
    background-color: rgb(105, 172, 155);
}
 .caja{
    width: 240px;
    height: 160px;
    margin-right: 10px;
    float: none;
    background-color: #849c979f;
    text-size-adjust: 100%;
    transition: transform 0.3s ease-in-out;
}

.caja img{
    width:"240";
    height:"160";
}
.canvas-color{
    background-color: #849c979f;
    color: rgb(20, 4, 4);
    display: flex;
    justify-content: left;
    align-items: left;
}     
#info-contacto img{
    width: 100%;
    max-width: 30px;
    height: auto;
    min-width: 10px;
    max-width: 30px;
}   
.foot{
    background-color: #105c36;
    color: white;    
    position: bottom;
    bottom: 0px;
    justify-content: center;
    text-size-adjust: 100%;
    text-align: center;
}
.collapse {
  &:not(.show) {
    display: none;
  }
}
.tooltip-container {
  position: relative; /* Essential for positioning the tooltip text */
  display: inline-block; /* Allows the container to wrap its content */
}

.tooltip-text {
  visibility: hidden; /* Hide the tooltip by default */
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1; /* Ensure it appears above other content */
  bottom: 125%; /* Adjust for desired position (e.g., above the element) */
  left: 40%;
  /*margin-left: -60px; /* Half of the width to center the tooltip */

  /* Optional: Add a fade-in effect */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip on hover */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;




/*======================================================================*/
/* HTML Responsivas */
@media(max-width:1000px){
    .header-content,
    footer{
        max-width: 820px; /* Ajustar el ancho máximo del header */
        min-width: 700;
        padding: 0 20px; /* Añadir padding para mantener el contenido centrado */
    }  
    .header-content{
        width: 100%; 
        flex-direction: column;
    }    
/*======================================================================*/
@media(max-width:780px) and (orientation: portrait){
    .container-all{
        transition: all 0.3s ease-in-out;
    }
    .move-container-all{
        transform: translateX(190px); 
    }
    .menu{
        flex: 1;
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: left;
        width: 0px;
        height: 88vh;
        position: fixed;
        margin-top: 0px;
        left: 0;
        background: #e4dede;
        overflow: hidden;
        transform: translateX(-190px);       
        transition: all 300ms ease-in-out; 
    }    
    .menu nav ul li a{
        padding: 10px 20px;
        font-size: 1.2rem;
        color: black;
    }

    .show-menu-lateral {
        width: 190px; /* Ancho del menú */
        transform: translateX(0); /* Mostrar el menú */
    }    
    #icon-menu{
        display: flex; /* Mostrar el icono del menú */
        margin-left: 40px;
    }    
}
/*======================================================================*/
@media screen and (max-width: 550px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 95vh;
    height: 100vw;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    }
    .container-all {
        width: 95vw;
        height: 100vh;
    }
    .inicio {
        width: 95vh;
        height: 100vw;
    }
}