/*==========================
      MENU HAMBURGER
==========================*/

.menu-toggle{

    display:none;

}

@media (max-width:768px){
  
/*==========================
     HOME
==========================*/

    .menu-toggle{

        display:block;

        color:white;

        font-size:1.8rem;

        cursor:pointer;

    }

    .menu-grid{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:12px;

        margin-top:20px;

    }

    .menu-grid div{

        padding:14px;

        text-align:center;

        border-radius:12px;

    }

    .artesania-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:20px;

        margin-top:35px;

    }

    .artesania-card{

        width:100%;

    }

    .slider-container{

        width:100%;

    }

    .slide{

        width:100%;

        height:250px;

        object-fit:cover;

    }

    .about img{

        width:100%;

        height:300px;

        object-fit:cover;

    }

/*==========================
     FOOTER
==========================*/

    .footer{

        padding:60px 0 30px;

    }

    .footer-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:35px;

        text-align:center;

    }

    .footer-column{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .footer-column ul{

        padding:0;

    }

    .footer-column li{

        list-style:none;

        margin:8px 0;

    }

    .footer-bottom{

        display:flex;

        flex-direction:column;

        gap:12px;

        text-align:center;

    }

/*==========================
     CONTACTO
==========================*/

    .contacto-map iframe{

        width:100%;

        height:300px;

    }

    .contacto-info{

        display:grid;

        grid-template-columns:1fr;

        gap:20px;

        margin-top:35px;

    }

    .info-box{

        width:100%;

    }

/*==========================
     ABOUT MOBILE
==========================*/

    .about{

        padding:80px 0;

    }

    .about .container{

        display:flex;

        flex-direction:column;

        gap:40px;

    }

    .about-image{

        width:100%;

    }

    .about-image img{

        width:100%;

        height:260px;

        object-fit:cover;

    }

    .about-content{

        width:100%;

        padding-left:0;

        text-align:center;

    }

    .about-content h2{

        font-size:2.2rem;

    }

    .about-content h2::after{

        margin:18px auto;

    }

    .about-content p{

        font-size:1rem;

        line-height:1.8;

    }

    .about-secondary-image{

        width:100%;

        height:240px;

        object-fit:cover;

    }

/*==========================
     ARTESANÍA HOME
==========================*/

    .artesania{

        padding:80px 0;

    }

    .artesania h2{

        font-size:2.2rem;

        text-align:center;

    }

    .artesania-intro{

        font-size:1rem;

        line-height:1.8;

        padding:0 15px;

        text-align:center;

    }

    .artesania-slider{

        width:100%;

        margin:40px auto;

    }

    .slider-container{

        width:100%;

        overflow:hidden;

        border-radius:18px;

    }

    .slide{

        width:100%;

        height:260px;

        object-fit:cover;

    }

    .slider-btn{

        width:42px;

        height:42px;

        font-size:1.1rem;

    }

    .slider-dots{

        margin-top:20px;

    }

    .artesania-grid{

        display:flex;

        flex-direction:column;

        gap:20px;

        margin-top:40px;

    }

    .artesania-card{

        width:100%;

        padding:25px;

        text-align:center;

    }

/*==========================
     CONTACTO
==========================*/

    .contacto{

        padding:80px 0;

    }

    .contacto h2{

        font-size:2.2rem;

        text-align:center;

    }

    .contacto-intro{

        text-align:center;

        padding:0 15px;

    }

    .contacto-map iframe{

        width:100%;

        height:300px;

        border-radius:18px;

    }

    .contacto-info{

        display:flex;

        flex-direction:column;

        gap:20px;

        margin-top:35px;

    }

    .info-box{

        width:100%;

        text-align:center;

    }

/*==========================
     FOOTER
==========================*/
    
    .footer{
    
        padding:70px 0 30px;
    
    }
    
    .footer-grid{
    
        display:flex;
    
        flex-direction:column;
    
        gap:35px;
    
        text-align:center;
    
    }
    
    .footer-column{
    
        width:100%;
    
    }
    
    .footer-column ul{
    
        padding:0;
    
    }
    
    .footer-column li{
    
        list-style:none;
    
        margin:10px 0;
    
    }
    
    .footer-bottom{
    
        display:flex;
    
        flex-direction:column;
    
        gap:12px;
    
        text-align:center;
    
    }

/*==========================
     NAVBAR MOBILE
==========================*/    

    .navbar{    

        position:relative;  

        display:flex;   

        justify-content:space-between;  

        align-items:center; 

        padding:18px 20px;  

    }   

    .logo{  

        font-size:1.8rem;   

    }   
 

    /* QUESTA PARTE È QUELLA IMPORTANTE */  

    .nav-links{ 

        display:none;   

        position:absolute;  

        top:100%;   

        left:0; 

        width:100%; 

        background:#121212; 

        flex-direction:column;  

        align-items:center; 

        padding:20px 0; 

        gap:20px;   

        z-index:999;    

    }   

    .nav-links.active{  

        display:flex;   

    }   

    .nav-links li{  

        width:100%; 

        list-style:none;    

    }   

    .nav-links a{   

        display:block;  

        width:100%; 

        padding:12px;   

        text-align:center;  

    }

/*==========================
     HERO MENU
==========================*/

    .menu-hero{

        min-height:auto;

        padding:120px 0 70px;

        text-align:center;

    }

    .menu-hero h1{

        font-size:2.3rem;

    }

    .menu-hero p{

        font-size:1rem;

        padding:0 15px;

        line-height:1.8;

    }

/*==========================
      MENU NAV
==========================*/

    .menu-nav{

        position:relative;

        top:0;

    }

    .menu-nav .container{

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:12px;

        padding:15px;

    }

    .menu-nav a{

        width:110px;

        text-align:center;

    }

/*==========================
     ESPECIALIDADES
==========================*/

    .especialidades{

        padding:80px 0;

    }

    .especialidades h2{

        font-size:2.2rem;

        text-align:center;

    }

    .especialidades-intro{

        text-align:center;

        padding:0 15px;

    }

    .especialidades-grid{

        display:flex;

        flex-direction:column;

        gap:30px;

    }

    .especialidad-card{

        width:100%;

    }

    .especialidad-card img{

        width:100%;

        height:260px;

        object-fit:cover;

    }

    .especialidad-content{

        padding:25px;

        text-align:center;

    }

/*==========================
     TAPAS
==========================*/

    .tapas{

        padding:80px 0;

    }

    .tapas-grid{

        display:flex;

        flex-direction:column;

        gap:30px;

    }

    .tapa-card{

        width:100%;

    }

    .tapa-image img{

        width:100%;

        height:240px;

        object-fit:cover;

    }

    .tapa-top{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .price{

        font-size:1.15rem;

    }

/*==========================
     BEBIDAS
==========================*/

    .bebidas{

        padding:80px 0;

    }

    .bebidas h2{

        text-align:center;

    }

    .bebidas-intro{

        text-align:center;

        padding:0 15px;

    }

    .bebida-category{

        overflow-x:auto;

        padding:20px;

    }

    .bebidas-table{

        width:100%;

        min-width:320px;

    }

    .bebidas-table td{

        padding:12px 8px;

        font-size:.95rem;

    }

/*==========================
     MONTADITOS
==========================*/

    .montaditos{

        padding:80px 0;

    }

    .montaditos-grid{

        display:grid !important;

        grid-template-columns:1fr !important;

        gap:30px;

        width:100%;

    }

    .montaditos .tapa-card{

        width:100%;

        max-width:100%;

    }

    .montaditos .tapa-image{

        width:100%;

    }

    .montaditos .tapa-image img{

        width:100%;

        height:250px;

        object-fit:cover;

        display:block;

    }

    .montaditos .tapa-content{

        padding:25px;

    }

/*==========================
     ARTESANÍA HERO
==========================*/

    .artesania-hero{

        min-height:auto;

        padding:120px 0 80px;

        text-align:center;

        background-position:center;

        background-size:cover;

        background-attachment:scroll;

    }

    .artesania-hero h1{

        font-size:2.5rem;

        line-height:1.2;

    }

    .artesania-hero p{

        font-size:1rem;

        line-height:1.8;

        padding:0 15px;

    }

/*==========================
     NUESTRA ARTESANÍA
==========================*/

    .artesania-about{

        padding:80px 0;

    }

    .artesania-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:40px;

    }

    .artesania-image{

        order:1;

    }

    .artesania-content{

        order:2;

        text-align:center;

    }

    .artesania-image img{

        width:100%;

        height:320px;

        object-fit:cover;

        border-radius:18px;

    }

    .artesania-content h2{

        font-size:2.2rem;

    }

    .artesania-content p{

        font-size:1rem;

    }

/*==========================
     COLECCIÓN
==========================*/

    .coleccion{

        padding:80px 0;

    }

    .coleccion h2{

        font-size:2.2rem;

        text-align:center;

    }

    .coleccion-intro{

        padding:0 15px;

    }

    .coleccion-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .coleccion-card{

        width:100%;

    }

    .coleccion-card img{

        width:100%;

        height:260px;

        object-fit:cover;

    }

    .coleccion-content{

        text-align:center;

    }

/*==========================
     WHY
==========================*/

    .why-artesania{

        padding:80px 0;

    }

    .why-artesania h2{

        font-size:2.2rem;

        margin-bottom:40px;

    }

    .why-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .why-card{

        padding:30px;

    }

/*==========================
     FOOTER
==========================*/

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

        text-align:center;

    }

    .footer-column{

        align-items:center;

    }

    .footer-bottom{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

/*==========================
     NAVBAR ARTESANÍA
==========================*/

    header{

        width:100%;

        position:fixed;

        top:0;
        left:0;

        z-index:1000;

    }

    .navbar{

        display:flex;

        justify-content:space-between;

        align-items:center;

        padding:15px 20px;

        background:#121212;

    }

    .logo{

        font-size:1.7rem;

        z-index:1001;

    }

    .logo a{

        color:#E67E22;

        text-decoration:none;

    }

    .menu-toggle{

        display:block;

        color:white;

        font-size:1.8rem;

        cursor:pointer;

        z-index:1001;

    }

    .nav-links{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#121212;

        display:none;

        flex-direction:column;

        align-items:center;

        gap:22px;

        padding:30px 0;

        box-shadow:0 15px 35px rgba(0,0,0,.25);

    }

    .nav-links.active{

        display:flex;

    }

    .nav-links li{

        list-style:none;

    }

    .nav-links a{

        color:white;

        font-size:1rem;

        text-decoration:none;

    }

/*==========================
     GALERÍA MOBILE
==========================*/

    .gallery-hero{

        min-height:45vh;

    }

    .gallery-hero h1{

        font-size:2.6rem;

    }

    
    .gallery{

        padding:70px 0;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        gap:18px;

        padding:0 18px;

    }

    .gallery-grid img{

        height:220px;

        width:100%;

        object-fit:cover;
        
    }


    .language-switch{

        justify-content:center;

        margin-top:20px;

    }

/*==========================
      HOW IT WORKS
==========================*/    

    .steps{

        grid-template-columns:1fr;

        gap:30px;

    }

    /*==========================
         SANGRÍA MOBILE
    ==========================*/
    
    .sangria{
    
        padding:80px 0;
    
    }
    
    .sangria .container{
    
        display:flex;
    
        flex-direction:column;
    
        gap:40px;
    
    }
    
    .sangria-image{
    
        width:100%;
    
        padding-top:0;
    
    }
    
    .sangria-image img{
    
        width:100%;
    
        max-width:420px;
    
        margin:0 auto;
    
        display:block;
    
        border-radius:20px;
    
    }
    
    .sangria-content{
    
        width:100%;
    
        max-width:100%;
    
        text-align:center;
    
        padding-top:0;
    
    }
    
    .sangria-content h2{
    
        font-size:2.2rem;
    
    }
    
    .sangria-content p{
    
        font-size:1.05rem;
    
        line-height:1.9;
    
    }
    
    .sangria-list{
    
        text-align:left;
    
        max-width:320px;
    
        margin:30px auto;
    
    }
    
    .sangria .btn-primary{
    
        display:inline-block;
    
        margin-top:15px;
    
    }
    
    /*==========================
         ESPECIALIDAD MOBILE
    ==========================*/
    
    .menu-special{
    
        display:flex;
    
        flex-direction:column;
    
        gap:35px;
    
        padding:80px 0;
    
    }
    
    .menu-image{
    
        width:100%;
    
    }
    
    .menu-image img{
    
        width:100%;
    
        max-width:450px;
    
        margin:0 auto;
    
        display:block;
    
        border-radius:20px;
    
    }
    
    .menu-content{
    
        width:100%;
    
        text-align:center;
    
    }
    
    .menu-content h3{
    
        font-size:2.2rem;
    
    }
    
    .menu-content p{
    
        font-size:1.05rem;
    
        line-height:1.9;
    
    }
    
    
    /*==========================
         FAVORITO MOBILE
    ==========================*/
    
    .menu-favorite{
    
        display:flex;
    
        flex-direction:column-reverse;
    
        gap:35px;
    
        padding:80px 0;
    
    }
    
    .favorite-image{
    
        width:100%;
    
    }
    
    .favorite-image img{
    
        width:100%;
    
        max-width:450px;
    
        margin:0 auto;
    
        display:block;
    
        border-radius:20px;
    
    }
    
    .favorite-content{
    
        width:100%;
    
        text-align:center;
    
    }
    
    .favorite-content h3{
    
        font-size:2.2rem;
    
    }
    
    .favorite-content p{
    
        font-size:1.05rem;
    
        line-height:1.9;
    
    }

/*==========================
      TEAM MOBILE
==========================*/

    .team{

        padding:80px 0;

    }

    .team h2{

        font-size:2.2rem;

    }

    .team-intro{

        padding:0 15px;

    }

    .team-grid{

        grid-template-columns:1fr 1fr;

        gap:20px;

    }

    .team-card img{

        height:240px;

    }

    .team-card h3{

        font-size:1.2rem;

    }

}