@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=PT+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jeju+Gothic&display=swap');
 :root{
        --main-header-colo:linear-gradient(45deg,#ef971e,#ffbc6a);
 }
body,html{
    margin: 0;
    padding: 0;
    background-color: #eee7dd; 
    
}
header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px; /* Grosor de la línea */
    background-color:  rgb(149, 117, 205); /* Color de la línea */
}
header {
    font-family: 'Jeju Gothic', sans-serif;
    height: 200px;
    width: 100%;
    min-width: 1248px;
    line-height: 40px;
    display: flex;
    flex-wrap: nowrap;
    background-color: rgb(248, 247, 251);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* ✅ se asegura de que esté por encima */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* ✅ sombra ligera y elegante */
}

header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35px; /* Grosor de la línea */
    background-color: rgb(248,187,208); /* Color de la línea */
}



.logo-place{
    display: flex;
    flex-direction: wrap;
    justify-content: center;
    align-items: center;
    width: 300px ;
    margin-left: 80px;

}
.login-place a, i{
     font-family: 'Jeju Gothic', sans-serif;
    font-size: 25px;
    
}



.logo-place img{
    height: 80px;
    margin-top:10px;
  

}
.menu{
    width: 100% ;
    min-width: 600px;
    height: 2px;
     font-family: 'Jeju Gothic', sans-serif;
    
      }
.menu ul li{
       position: relative;
        display: inline-block;
        line-height: 80px;
        margin: 0 5px; 
        padding-top: 50px; 
        padding-right: 20px;           
         font-family: 'Jeju Gothic', sans-serif;
        cursor: pointer;
        color: rgb(254, 219, 25);
       
           }
.menu ul li a{
    color: rgb(12, 12, 12);
    font-size: 20px;
    text-decoration: none;
    z-index: 1;
    background-image: linear-gradient(rgb(168, 1, 146), rgb(85, 168, 1));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 10px;
    transition: background-size .3s;
  
}

.menu ul li a:hover, a:focus, a:active {
    background-size: 100% 2px;
}

.login-place{
    width: 30%;
    height: 200px;
    margin: auto;
    display: flex;
    background-color: rgb(244, 249, 251);
    justify-content: center;
    align-items: center;
    font-family: 'Nanum Gothic', sans-serif;
    
    
}
.login-place img{
    height: 30px; 
    margin-left: 10px;
    text-decoration: none;
    transition: .5s;
} 
.login-place img:hover{
    
    height: 45px;   
    transition: .5s;
    
}

.login-place a{
    margin-left: 5px;
    color: rgb(245, 198, 9);
    text-decoration: none;
    transition: .5s;
}
.login-place a:hover{
    color: rgb(7, 7, 7);    
    transition: .5s;
}

.login-place #bodega a:hover{
    color: red;
}
.item-option{
    line-height: 30px;cursor: pointer;

}
i {
  display: none;
}
.fa {
  font-size: 0px;
}.ri-door-open-line {
  font-size: 1.5rem;
  margin-right: 5px;
}


/*----------Serach place-----------*/

.search-place{
     width: 50%;
     margin-top: 155px;  
     margin-left: 20%;  
    font-family: 'PT Sans', sans-serif;   
     position: fixed;   
    top: 0;
    left: 50px;
   }
  .search-place form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
   }
.btn-search{
    width: 50px;
   
}


/* ----------- Menú Vertical --------*/

.menu-v{
    margin-top: 150px;
    width: 240px;
    font-family: 'PT Sans', sans-serif;
    line-height: 40px;
   position: fixed; 
  
    top: 0;
    left: -40px;
    
   
}
.menu-vertical{
    width:100% ;
    height: 2px;
    font-family: 'Nanum Gothic', sans-serif;
    text-align: center;
    justify-items: center;    
    
      }

 
.menu-vertical ul li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;

    font-family: 'Cormorant Garamond', serif;
    cursor: pointer;     
    font-family: 'Nanum Gothic', sans-serif;
    background-color: black;
    border-top: 1px solid rgb(241, 233, 233);
        
            }
 .menu-vertical ul li a{
     color: rgb(243, 237, 237);
     font-size: 20px;
     display: flex;
     text-align: center;
     text-decoration: none;  
     justify-items: center;      
    
   
 }
 .menu-vertical  li:hover{
     width: 100%;
     background-color:rgb(85, 168, 1);
 }
 
 /* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
    header {
        height: auto; /* Ajusta la altura automáticamente */
        min-width: 100%; /* Evita restricciones */
        flex-wrap: wrap; /* Permite que los elementos se acomoden mejor */
    }

    .logo-place {
        width: 100%; /* Ocupa todo el ancho */
        margin-left: 0;
        justify-content: center;
    }

    .menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
    }

    .menu ul li {
        display: block;
        text-align: center;
        line-height: 50px; /* Reduce el espaciado */
        padding: 10px;
    }

    .menu ul li a {
        font-size: 18px; /* Ajusta el tamaño del texto */
        display: block; /* Hace que ocupen todo el ancho */
        padding: 10px;
    }

    .login-place {
        width: 100%;
        height: auto;
        flex-direction: column;
        justify-content: center;
        padding: 10px;
    }

    .search-place {
        width: 100%;
        position: static; /* Evita que quede fuera de la pantalla */
        text-align: center;
        margin-top: 20px;
    }

    .menu-vertical {
        width: 100%;
        position: relative; /* Evita que quede fijo */
    }

    .menu-vertical ul li {
        height: auto;
        padding: 10px;
    }
}
@media (max-width: 768px) {
    .menu {
        display: flex;
        flex-direction: column; /* Acomoda los elementos en una sola columna */
        align-items: center; /* Centra los elementos */
        width: 100%;
    }

    .menu ul {
        padding: 0;
        text-align: center; /* Centra los enlaces */
    }

    .menu ul li {
        display: block;
        width: 100%; /* Hace que los botones ocupen el ancho completo */
        padding: 10px 0; /* Ajusta el espaciado */
        line-height: normal; /* Evita que queden demasiado altos */
    }

    .menu ul li a {
        font-size: 18px; /* Reduce el tamaño del texto */
        display: block;
        padding: 12px;
    }

    .menu ul li a:hover {
        background-size: 100% 5px; /* Ajusta el efecto hover para móviles */
    }
}