/* styles.css */
body {
    font-family: "Roboto", serif;
    margin: 0;
    padding: 0;
    /* background: #f9f9f9; */
    color: #333;
}

/* ====== HEADER ======= */

.header {
    /* background-color: #7c4dff; */
    color: white;
    text-align: center;
    padding: 1em 8vw;
    background-image: url('../img/header/header.webp'); /* Cambia 'tu-imagen.jpg' por la ruta de tu imagen */
    background-size: cover; /* La imagen cubrirá todo el espacio del header */
    background-position: center; /* Centra la imagen en el header */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    display: flex;
    align-items: center; 
    justify-content: space-between;
}

.header h1 {
    margin: 0;
    font-size: 2.5em;
}

.logo {
    width: 7vw;
}

.logo > a > img {
    width: 100%;
}



.redes-sociales{
    display: flex;
    gap: 1.5vw; /* Espacio entre los íconos */
}

.redes-sociales img {
    width: 2vw;
    /* width: 30px;
    height: 30px; */
  }
  
  .btn-ibuki-prime {
    padding: 0.5vw 1.2vw; /* Tamaño del botón */
    background-color: #000; /* Fondo del botón */
    color: #AD7C2B; /* Color del texto */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor */
    font-weight: bold; /* Negrita para el texto */
  }
  
  .header .right-section {
    display: flex; /* Asegura que redes y botón estén en la misma fila */
    align-items: center; /* Centra verticalmente los elementos */
    gap: 2vw; /* Espaciado entre redes sociales y el botón */
  }

  .info-qr-bloq1 {
    padding: 0.8vw 1.2vw;
    border-radius: 34px;
    background-color: #AD7C2B;
    color: #fff;
    font-size: 1.1vw;
    font-weight: 400;
    width: 20vw;
    text-align: center;
    margin-left: 5.5vw;
    margin-top: 2vw;
}

.mensaje-bloq1 {
    color: #AD7C2B;
    padding: 4vw 0 0 0;
    font-size: 1.5vw;
}




/* ==== BLOQ 1 ==== */

.bloq1{
    background-image: url('../img/bloq1/bloq1-ibuki-1.webp'); /* Cambia 'tu-imagen.jpg' por la ruta de tu imagen */
    background-size: cover; /* La imagen cubrirá todo el espacio del header */
    background-position: center; /* Centra la imagen en el header */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    padding: 7vw 38% 0 8vw;
}

.text-bloq1 {
    font-weight: 300;
    color: #fff;
    font-size: 1.6vw;
    padding-right: 14vw;
}

.border-bloq1 > img {
    width: 100%;
}

.border-bloq1 {
    width: 100%;
}

.titulo-bloq1 > h2{
    text-align: left !important;
    font-size: 5vw;
    color: #fff;
    margin-bottom: 1vw;
}

.titulo-bloq1 > h2 > span{
    color: #AD7C2B;
}

.qr-bloq1 {
    margin-top: 5vw;
    margin-left: 10vw;
}

.qr-bloq1 > img {
    width: 14vw;
}


/* =========== Bloque 2 =============== */

.bloque2{
 
    /* margin-top: -16%; */
    z-index: 2;
    position: relative;


}

.titu-bloq2 {
    /* padding-top: 16vw; */
    z-index: 5 !important;
    position: relative;
}

.titu-bloq2 > h2{
    text-align: left !important;
    font-size: 5vw;
    color: #000;
    margin-bottom: 1vw;
    text-align: center !important;
}

.titu-bloq2 > h2 > span{
    color: #AD7C2B;
}

.bloque2 {
    margin-top: -22vw;
    z-index: 2;
    position: relative;
}

.barra-titu-bloq2 {
    text-align: center;
    justify-content: center;
    margin-top: -6vw;
    z-index: 2;
}

.barra-titu-bloq2 > img {
    width: 56vw;
    padding-left: 5vw;
}

.bloq-beneficios {
    display: flex;
    margin-top: 6vw;
    width: 100%;
}

.bloq-beneficio-1 {
    display: flex;
    width: 64%;
    padding-left: 2vw;
}

.bloq-beneficio-2 {
    width: 33%;
}

.bloq-beneficio-1 > .content-beneficio1 {
    width: 46%;
    margin: 0 1.5vw;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: 36px;
    text-align: center;
    justify-content: center;

}

.images-beneficios{
    width: 100%;
}

.images-beneficios > img{
    width: 100%;
}


.barra-marron-benefi > img {
    width: 100%;
}

.bloq-beneficio-2 > .content-beneficio1 {
    width: 87.5%;
    margin: 0 1.5vw;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: 36px;
    text-align: center;
    justify-content: center;

}

.content-text-beneficio {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 30vh;
}

.text-titu-benefi{
    font-family: "Carter One", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 3vw;
}

.text-costo-benefi {
    font-size: 2vw;
    font-weight: 600;
    margin-top: 1vw;
    z-index: 2;
    position: relative;
}

.barra-marron-benefi {
    width: 100%;
    text-align: center;

}

.barra-marron-benefi > img {
    width: 82%;
    margin-top: -14%;
    z-index: 1;
    position: relative;
}

.precio-norma-benefi {
    font-size: 1.6vw;
    color: #AD7C2B;
}

.content-final {
    background-color: #000;
    color: #fff;
    padding: 1vw 4vw;
    font-size: 1.5vw;
    font-weight: 300;
    border-radius: 0 0px 36px 36px;
    height: 7vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.border-bloq2 > img {
    width: 100%;
}

.border-bloq2 {
    width: 100%;
    margin-top: -6%;
}


/* ========= Promociones 3 ============== */

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
    gap: 10px; /* Espaciado entre los divs */
    padding: 10px;
}

/* Estilo para los elementos del grid */
.grid-item {
    /* background-color: #4CAF50; */
    color: white;
    text-align: center;
    padding: 0 2vw;
    font-size: 1.5rem;
    border-radius: 5px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw 0;
    padding: 1px 6vw;
    margin-top: 5vw;
}

.promos{
    background-image: url('../img/bloq3/bloq3.webp'); /* Cambia 'tu-imagen.jpg' por la ruta de tu imagen */
    background-size: cover; /* La imagen cubrirá todo el espacio del header */
    background-position: center; /* Centra la imagen en el header */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    padding-top: 4vw;
    padding-bottom: 4vw;
}

.titu-bloq3{
    color: #fff;
}

.titu-bloq3 > h2{
    font-size: 5vw;
    position: relative;
}

.titu-descuento-bloq3 {
    font-size: 3vw;
    color: #000;
}

.barra-titu-bloq3 {
    text-align: center;
    justify-content: center;
    margin-top: -10.5vw;
    z-index: 2;
    
}


.barra-titu-bloq3 > img {
    width: 40vw;
    padding-left: 4vw;
}

.promo-desct {
    background-color: #000;
    width: 100%;
    padding: 1vw;
    height: 33.5vw;

}

.img-promo-desc {
    width: 100%;
}

.img-promo-desc > img {
    width: 100% !important;
}

.titu-promo-desc {
    display: block;
    margin-top: -8vw;
    margin-bottom: 1vw;
    font-family: "Carter One", system-ui;
    font-weight: 400;
    font-style: normal;
    color: #AD7C2B;
    font-size: 1.6vw;
}

.text1-promo-desc {
    font-size: 1.2vw;
    font-weight: 300;
    padding: 0 2.4vw;
}

.precio-promo {
    padding: 0.4vw 0.5vw 0.2vw;
    margin: 0 5vw;
    background-color: #fff;
    color: #000;
    font-size: 1.5vw;
    font-weight: 600;
    /* width: 20vw; */
    text-align: center;
    margin-top: 2vw;
    position: relative;
}

.precio-regular-promo {
    font-size: 1.1vw;
    margin-top: 0.5vw;
    color: #AD7C2B;
}

.text2-promo-desc {
    margin-top: 1vw;
    font-size: 1.1vw;
    font-weight: 300;
    padding: 0 6vw;
}

body > main > section.promos > div.grid-container > div:nth-child(2) > div > div.precio-promo {
    margin-top: 2.5vw;
}

body > main > section.promos > div.grid-container > div:nth-child(3) > div > div.precio-promo {
    margin-top: 1.1vw;
}

body > main > section.promos > div.grid-container > div:nth-child(4) > div > div.text1-promo-desc {
    height: 6vw;
}

body > main > section.promos > div.grid-container > div:nth-child(4) > div > div.precio-promo{
    margin-top: 0px;
}

body > main > section.promos > div.grid-container > div:nth-child(5) > div > div.text1-promo-desc {
    height: 6vw;
}

body > main > section.promos > div.grid-container > div:nth-child(5) > div > div.precio-promo{
    margin-top: 0px;
}

body > main > section.promos > div.grid-container > div:nth-child(6) > div > div.text1-promo-desc {
    height: 6vw;
}

body > main > section.promos > div.grid-container > div:nth-child(6) > div > div.precio-promo{
    margin-top: 0px;
}

body > main > section.promos > div.grid-container > div:nth-child(7) > div > div.text1-promo-desc {
    height: 6vw;
}

body > main > section.promos > div.grid-container > div:nth-child(7) > div > div.precio-promo{
    margin-top: 0px;
}


/* .introduction, .promos, .dishes, .qr-section {
    padding: 1.5em;
    max-width: 900px;
    margin: auto;
    background: white;
    margin-bottom: 1.5em;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} */



h2 {
    text-align: center;
    /* color: #7c4dff; */
    margin-bottom: 1em;
    margin-top: 0px !important;
    font-family: "Carter One", system-ui;
    font-weight: 400;
    font-style: normal;
}

.promo, .dish {
    margin-bottom: 1.5em;
    padding: 1em;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
}

.promo h3, .dish h3 {
    color: #7c4dff;
    margin-bottom: 0.5em;
}

.qr-code {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 200px;
    margin: auto;
    border: 2px dashed #7c4dff;
}


.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .fade-in.active {
    opacity: 1;
    transform: translateY(0);
  }


@media only screen and (max-width: 700px) {

    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    }

    /* HEADER */ 

    .header {
        padding: 2vw 8vw;
    }

    .redes-sociales img {
        width: 6vw;
    }

    .btn-ibuki-prime {
        display: none;
    }
    .redes-sociales {
        display: flex;
        gap: 3.5vw;
    }

    .logo {
        width: 12vw;
    }



    /* BLOQUE 1 */

    .bloq1{
        background-image: url('../img/bloq1/bloq1-mobile.webp'); /* Cambia 'tu-imagen.jpg' por la ruta de tu imagen */
        background-size: cover; /* La imagen cubrirá todo el espacio del header */
        background-position: center; /* Centra la imagen en el header */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
        padding: 7vw 18% 4% 18%;
        text-align: center;
    }

    .titulo-bloq1 > h2 {
        text-align: center !important;
        font-size: 7vw;
       
    }

    .text-bloq1 {
        font-size: 3vw;
        padding-right: 0vw;
    }

    .qr-bloq1 {
        margin-left: 0vw;
    }

    .qr-bloq1 > img {
        width: 22vw;
    }

    .info-qr-bloq1 {
        padding: 1vw 1.2vw;
        border-radius: 34px;
        background-color: #AD7C2B;
        color: #fff;
        font-size: 2.7vw;
        font-weight: 400;
        width: 80%;
        margin-left: 10%;
        /* padding: 1% 4%; */
        text-align: center;
        /* margin-left: 5.5vw; */
        margin-top: 2vw;
        justify-content: center;
        position: relative;
    }

    .mensaje-bloq1 {
        color: #AD7C2B;
        padding: 4vw 0 3vw 0;
        font-size: 2.5vw;
    }

    .content-text-beneficio {

        height: 22vw;
    }

    .titulo-bloq1 > h2 {
        text-align: center !important;
    }

    .content-final {
        border-radius: 0 0px 20px 20px;
        height: 7vW;
        
    }

    .bloq-beneficio-1 {
        display: flex;
        width: 94%;
        padding-left: 3%;
    }

    .bloq-beneficios {
        display: block;
        margin-top: 6vw;
        width: 100%;
    }

    .bloq-beneficio-2 {
        width: 50%;
        margin-left: 25%;
        margin-top: 2vw;
    }

    .titu-bloq2 > h2 {
        text-align: left !important;
        font-size: 7vw;
        color: #000;
        margin-bottom: 1vw;
        text-align: center !important;
    }

    .barra-titu-bloq2 {
        text-align: center;
        justify-content: center;
        margin-top: -8vw;
        z-index: 2;
    }

    .barra-titu-bloq2 > img {
        width: 84vw;
        padding-left: 5vw;
    }

    .text-titu-benefi {
        font-size: 3.6vw;
    }

    .text-costo-benefi {
        font-size: 3vw;
    }

    .barra-marron-benefi > img {
        width: 82%;
        margin-top: -12%;
        display: block;
        margin-left: 10%;
    }

    .precio-norma-benefi {
        font-size: 2.4vw;
        color: #AD7C2B;
    }

    .content-final {
        border-radius: 0 0px 20px 20px;
        height: 7vw;
        font-size: 2.5vw;
    }


    /* BLoque 3 */ 

    .titu-bloq3 > h2 {
        font-size: 7vw;
        position: relative;
    }

    .promos {
        padding-top: 8vw;
    }

    .titu-descuento-bloq3 {
        font-size: 5vw;
    }

    .barra-titu-bloq3 > img {
        width: 56vw;
        padding-left: 5vw;
    }

    .barra-titu-bloq3 {

        margin-top: -15.5vw;

    }

    .promo-desct {
        height: 66vw;
    }

    .titu-promo-desc {
        margin-top: -14vw;
        font-size: 3.6vw;
    }

    .text1-promo-desc {
        font-size: 2.8vw;
        font-weight: 300;
        padding: 0 2vw;
    }

    .precio-promo {
        
        font-size: 3vw;
        
    }

    .text2-promo-desc {

        font-size: 2.7vw;

    }

    .precio-regular-promo {
        font-size: 2.7vw;
        margin-top: 1vw;
        color: #AD7C2B;
    }


    body > main > section.promos > div.grid-container > div:nth-child(4) > div > div.text1-promo-desc {
        height: 16vw;
    }
    
    body > main > section.promos > div.grid-container > div:nth-child(4) > div > div.precio-promo{
        margin-top: 0px;
    }
    
    body > main > section.promos > div.grid-container > div:nth-child(5) > div > div.text1-promo-desc {
        height: 16vw;
    }
    
    body > main > section.promos > div.grid-container > div:nth-child(5) > div > div.precio-promo{
        margin-top: 0px;
    }
    
    body > main > section.promos > div.grid-container > div:nth-child(6) > div > div.text1-promo-desc {
        height: 16vw;
    }
    
    body > main > section.promos > div.grid-container > div:nth-child(6) > div > div.precio-promo{
        margin-top: 0px;
    }
    
    body > main > section.promos > div.grid-container > div:nth-child(7) > div > div.text1-promo-desc {
        height: 16vw;
    }
    
    body > main > section.promos > div.grid-container > div:nth-child(7) > div > div.precio-promo{
        margin-top: 0px;
    }

    

}