/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root{
    --color-boton:#550000;
    --color-barras:#640101;
    --color-blanco:#fff;
    --color-blanco-bt:#fff;
    --color-negro:#000;
    --color-sombras: #ffffff33;
    --color-fondo:#080000;
    --color-fondo-swal:#050505;
    --color-fondo-input: #333;
    --color-swal:#fff;
    --zoom: 2;
    --move: 3s;
}
@font-face {
    font-family: Quackey;
    src: url('https://steakandbeer.es/Quackey-Regular.otf');
    font-display:swap;
}
@font-face {
    font-family: Bohem;
    src: url('https://steakandbeer.es/Bohem.otf');
    font-display:swap;
}
body {
    margin: 0;
    overflow: hidden;
    position: fixed;
    background: var(--color-fondo-swal);
    font-family: system-ui;
}
.logo{
    display: grid;
}
.logo img{
    filter: drop-shadow(1px 1px 1px #ffffff) drop-shadow(0px 0px 2px #fff);
    width: clamp(50px, 5vw, 80px) !important;
    height: clamp(50px, 5vw, 80px) !important;
}
.cont_insta{
    position: relative;
    width: clamp(46px, 3vw, 52px) !important;
    height: clamp(46px, 3vw, 52px) !important;
    overflow: hidden;
    background: var(--color-barras);
    border-radius: 8px;
    margin: auto 1rem auto auto;
    display: grid
;
    justify-content: center;
}
.insta{
    position: relative;
    z-index: 2;
}
/* Definimos la regla CSS para la barra de color */
.barra {
    top: 0;
    left: -25%;
    position: absolute;
    width: 150%;
    height: 20px;
    background: rgb(172, 172, 172);
    background: linear-gradient(180deg, rgba(5,3,69,0) 0%, rgba(255,255,255,0.6671043417366946) 49%, rgba(0,212,255,0) 100%);
    animation-name: mover;
    animation-duration: var(--move);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 1;
    transform: rotate(30deg);
}
.barra2 {
    left: 0;
    top: -25%;
    position: absolute;
    height: 150%;
    width: 70px;
    background: rgb(172, 172, 172);
    background: linear-gradient(90deg, rgba(5,3,69,0) 0%, rgba(255,255,255,0.22) 39%, rgba(0,212,255,0) 100%);
    animation-name: mover2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 1;
    transform: rotate(15deg);
} 
/* Definimos la animación CSS */
@keyframes mover {
    0% {
      top: -100px;
    }
    50% {
      top: 100%;
    }
    100% {
      top: -100px;
    }
}
/* Definimos la animación CSS */
@keyframes mover2 {
    0% {
        left: 80%;
    }
    50% {
        left: 85%;
    }
    100% {
        left: 80%;
    }
}
#pantalla {
    display: none;
    width: 100vw;
    height: 100vh;
}
#pantalla h2{
    /*****/
    font-size: calc(4rem + 3vw);
    text-align: center;
}

*{
    color: var(--color-blanco);
}
/* div,p,h2,h3,span{ */
p,h2,h3,h4,span,li{
    box-sizing: border-box;
    font-family: system-ui, Arial, sans-serif;
    padding-left: 5px;
    padding-right: 5px;
    letter-spacing: .5px;
}

.serif{
    font-family: system-ui, Arial, sans-serif;
    text-decoration: underline;
}

div{
    font-family: system-ui, Arial, sans-serif;
}

#texto-pos h2{
    font-size: 1.5rem;
}

#texto-pos p{
    font-size: 1.2rem;
}

#scroll{
    z-index: 1;
    width: 100vw;
}

#contenido{
    z-index: 250;
}

#container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    -webkit-transition: left 1s ease-in-out, top 1s ease-in-out;
    -o-transition: left 1s ease-in-out, top 1s ease-in-out;
    transition: left 1s ease-in-out, top 1s ease-in-out;
}
#contenedor_barriles{
    position: absolute;
    width: 100vw;
    right: 0;
    top: 0;
    height: 100vh;
}
/*
    Barriles
*/
.barril_xs{
    position: absolute;
    background-image: url('https://steakandbeer.es/img/xxs.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 73vh;
    left: -100vw;
    height: 260px;
    z-index: 135;
    width: 26vw;
    max-width: 260px;
    min-width: 210px;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.barril_s{
    position: absolute;
    background-image: url('https://steakandbeer.es/img/barril_s_10.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 68vh;
    left: -100vw;
    height: 300px;
    z-index: 130;
    width: 28vw;
    max-width: 280px;
    min-width: 225px;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.barril_m{
    position: absolute;
    top: 64vh;
    left: 150vw;
    min-height: 172.3px;
    height: 50vw;
    max-height: 350px;
    z-index: 120;
    padding: 0;
    width: 30vw;
    max-width: 300px;
    min-width: 242px;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.barril_l{
    position: absolute;
    background-image: url('https://steakandbeer.es/img/barril_l_10.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 56vh;
    left: -100vw;
    height: 440px;
    z-index: 110;
    width: 34vw;
    max-width: 340px;
    min-width: 272px;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.barril_xl{
    position: absolute;
    background-image: url('https://steakandbeer.es/img/barril_xl_10.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 50vh;
    left: -100vw;
    height: 520px;
    z-index: 100;
    width: 37vw;
    max-width: 375px;
    min-width: 320px;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
#tapa{
    position: absolute;
    /* opacity: 0; */
    top: 50%;
    left: 50%;
    min-height: 172.3px;
    height: auto;
    max-height: inherit;
    z-index: 125;
    width: inherit;
    max-width: inherit;
    min-width: inherit;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
#parrilla{
    position: absolute;
    /* opacity: 0; */
    top: 50%;
    left: 50%;
    min-height: 172.3px;
    height: auto;
    max-height: inherit;
    z-index: 123;
    width: inherit;
    max-width: inherit;
    min-width: inherit;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
#cilindro{
    position: absolute;
    /* opacity: 0; */
    top: 50%;
    left: 50%;
    min-height: 172.3px;
    height: auto;
    max-height: inherit;
    z-index: 124;
    width: inherit;
    max-width: inherit;
    min-width: inherit;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
#quemador{
    position: absolute;
    /* opacity: 0; */
    top: 50%;
    left: 50%;
    min-height: 172.3px;
    height: auto;
    max-height: inherit;
    z-index: 122;
    width: inherit;
    max-width: inherit;
    min-width: inherit;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
#base{
    position: absolute;
    /* opacity: 0; */
    top: 50%;
    left: 50%;
    min-height: 172.3px;
    height: auto;
    max-height: inherit;
    z-index: 121;
    width: inherit;
    max-width: inherit;
    min-width: inherit;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.barril_m .popup{
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    min-height: 172.3px;
    height: auto;
    max-height: inherit;
    z-index: 121;
    width: inherit;
    max-width: inherit;
    min-width: inherit;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 250;
}
#garra{
    position: absolute;
    top: 50vh;
    left: 120vw;
    min-height: 100px;
    height: auto;
    max-height: 200px;
    z-index: 125;
    width: 20vw;
    height: 20vw;
    min-width: 100px;
    max-width: 200px;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
/*
    Fin Barriles
*/
  
/*
    Secciones
*/
.section {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: white;
}  
.section-1 {
    top:0;
    background: transparent;
    left: -100vw;
} 
.section-2 {
    opacity: 0;
    left: 100vw;
    z-index: 121;
} 
.section-3 {
    opacity: 0;
    background: transparent;
    left: -100vw;
} 
.section-4 {
    opacity: 0;
    background: transparent;
    left: 0vw;
    top: 100vh;
} 
.section-5{
    opacity: 0;
    background: linear-gradient(to top, black 0%, black 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 60%);
    left: 0vw;
    top: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 300;
}
.section-6 {
    opacity: 0;
    background: var(--color-fondo-swal);
    left: 0vw;
    top: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 300;
}

.section-5::-webkit-scrollbar, .section-6::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* or add it to the track */
}
  
/* Add a thumb */
.section-5::-webkit-scrollbar-thumb, .section-6::-webkit-scrollbar-thumb {
    background: #000;
}

.contenedor {
    max-width: 1100px;
    margin: auto;
    padding: 1% 5%;
}

#contenido5, #contenido6{
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    padding: 100px 0 0;
    width: 100vw;
}
#contenido5 #texto-pos, #contenido6 #texto-pos{
    max-width: 1100px;
    margin: auto;
    padding: 5% 5% 100px 5%;
    font-size: 1.2rem;
}
#contenido5 #texto-pos .footer, #contenido6 #texto-pos .footer{
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
#contenido5 #texto-pos .footer a, #contenido6 #texto-pos .footer a{
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: center;
}

#contenido6 .cabeceras{
    max-width: 1100px;
    margin: auto;
    padding: 1% 5px;
    font-size: 1.5rem;
}
#texto6{
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: distribute;
        align-content: space-around;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    z-index: 100;
}

#reserva{
    max-width: 200px;
    /* position: absolute; */
    /* top: 120vh;
    left: -100vw; */
    z-index: 300;
    display: block;
}
#reserva .btn{
    /*****/
    font-size: 1.5rem;
}
/*
    Fin Secciones
*/

/*
    Textos secciones
*/
h1{
    position: absolute;
    top: 10vh;
    left: 50vw;
    width: 96%;
    -webkit-transform: translate(-50%, 0px);
        -ms-transform: translate(-50%, 0px);
            transform: translate(-50%, 0px);
    font-size: clamp(5rem, calc(5rem + 1vw + 1vh), 9rem);
    padding: 0;
    font-family: Bohem !important;
    padding-left: 2%;
    padding-right: 2%;
    margin: 0 0%;
    text-align: center;
    z-index: 150;
    color:#eee;
}
#texto{
    position: absolute;
    top: 45%;
    left: 5%;
    padding: 0;
    margin: 0;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    text-align: left;
    width: 60%;
    z-index: 150;
}
#texto2{
    /*
    top: 45vh;
    left: 100vw;
    */
    height: 60vh;
    padding: 20vh 0;
    margin: auto;
    margin-right: 0;
    text-align: right;
    width: 60%;
    z-index: 120;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    background: var(--fondo);
    background: linear-gradient(90deg, rgba(0,0,0,0) 10%, var(--fondo) 25%);
}
#texto2 h2{
    border-bottom: 4px solid var(--color-barras);
    padding-right: 5%;
    width: 95%;
    margin-right: 0%;
    margin-left: auto;
    font-size: 2.5rem;
    text-align: right;
}
#texto2 p{
    width: 95%;
    margin: 0 0 auto auto;
    padding-right: 5%;
    font-size: calc(1rem + .5vw + .5vh);
}
#texto h2{
    margin: 1rem 0;
    font-size: 2.5rem;
    text-shadow: -1px -1px 0 var(--fondo), 1px -1px 0 var(--fondo), -1px 1px 0 var(--fondo), 1px 1px 0 var(--fondo);
}
h1, #txt_section1, #texto3, #txt3h3, #texto4, #texto2 h2, #texto2 p {
    text-shadow: -1px -1px 0 var(--fondo), 1px -1px 0 var(--fondo), -1px 1px 0 var(--fondo), 1px 1px 0 var(--fondo);
    padding: 0 0.15rem;
}
.section-1 h3{
    position: fixed;
    bottom: 8vh;
    left: -100vw;
    font-size: 2.5rem;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    z-index: 150;
    /* text-transform: uppercase; */
}
#texto3{
    position: absolute;
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: distribute;
        align-content: space-around;
    margin: 0;
    padding: 0;
    top: 40%;
    width: 60%;
    left: 16%;
    text-align: left;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 140;
}
#texto3 p{
    margin: auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 2.5rem;
}
#texto3 p span{
    position: relative;
    z-index: 2;
    width: calc(2vw + 1vh);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 14px;
    font-size: 2rem;
    color: var(--texto);
    text-shadow: 1px 1px 1px var(--fondo), -1px -1px 1px var(--fondo);    
}
#texto3 p span::before{
    content: "";
    position: absolute;
    margin: auto 0;
    background: var(--color-barras);
    border-radius: 50%;
    width: 35px;
    height: 25px;
    -ms-flex-line-pack: end;
        align-content: flex-end;
    padding: 0;
    top: 50%;
    transform: translate(-60%, -30%);
    left: 50%;
    z-index: -1;
}
.section-3 h3{
    position: fixed;
    bottom: 8vh;
    left: -100vw;
    /*****/
    font-size: 2.5rem;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    z-index: 150;
} 
#texto4{
    position: absolute;
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: distribute;
    align-content: space-between;
    left: 5%;
    padding: 0;
    padding-right: 5%;
    margin: 0;
    top: 10vh;
    height: 70vh;
    width: 90%;
    text-align: right;
    z-index: 120;
}

#texto4 .descuento{
    text-align: left;
    position: relative;
    width: auto;
    margin: 0;
    font-size: 2rem;
}
div.lanzamiento {
    position: relative;
    text-align: right;
    /*****/
    font-size: 2rem;
    width: 40vw;
    left: 5vw;
    margin-top: 0;
    margin-left: 0%;
}
#section4 .before {
    position: absolute;
    background: var(--color-barras);
    width: 110vw;
    top: 28vh;
    left: -5vw;
    height: 60vh;
    z-index: -1;
    border-radius: 40% 70% 24% 66% / 50% 73% 39% 61%;
}
.caja-btn-form{
    display: grid;
    text-align: center;
    margin: 0.5rem auto;
}
.texto-primeros{
    margin-top: 1rem;
    font-size: 1rem;
}
#texto5{
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: distribute;
        align-content: space-around;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    z-index: 100;
    max-width: 1100px;
    margin: auto;
}
#texto3 h2{
    font-size: calc(1rem + 1.5vw + 1vh);
}
h2, h3{
    font-size: 2rem;
}
.cajas{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
.card_barril{
    max-width: 250px;
    z-index: 100;
    margin: 1rem 1rem 0 1rem; 
    background-color: var(--color-fondo);
    border-radius: 10px;
    padding: 1%;     
    flex-grow: 1;   
}
.card_barril .img{
    width: 80%;
    margin: auto 10%;
    z-index: 100;  
}
.card_barril .titulo{
    width: 100%;
    /*****/
    font-size: 1rem;
    margin: 0;
    padding: 0;
    margin-top: -20px !important;
    z-index: 2;
    position: relative;
}
/*
    Fin Textos secciones
*/
#menu{
    z-index: 320;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .5rem 1rem;
    width: 100%;
    box-sizing: border-box;
    color: var(--color-blanco);
    max-width: 1200px;
    margin: auto;
}

.burguer{
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    display: none;
}
#progreso{
    position: absolute;
    top: 0;
    left: -110vw;
    width: 105vw;
    height: 4px;  
    background: var(--color-barras);  
}

.menus{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.menus .link_menu{
    margin: auto 1rem;
    color: var(--texto);
    cursor: pointer;
    text-decoration: none;
}

.menus .link_menu, .menus .nav-link{
    position: relative;
    display: grid;
    align-items: center;
    padding: 0;
    margin: auto 2rem;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}
.navegacion .menu_navegacion {
    position: relative;
    opacity: .3;
}

.link_menu.activo, .nav-link.activo{
    opacity: 1;
}
.link_menu:after, .nav-link:after {
    background: var(--color-barras);
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        transform: translate(-50%);
    height: 0.16rem;
    width: 0;
    bottom: -5px;
    opacity: 0;
    display: block;
}
/* .link_menu.activo:after, .link_menu:hover:after { */
.link_menu.activo:after, .nav-link.activo:after{
    width: 100%;
    opacity: 1;
    -webkit-transition: 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28) width;
    -o-transition: 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28) width;
    transition: 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28) width;
}

.menu_navegacion.activo{
    background-color:var(--color-barras);
    opacity: 1;
}

.navegacion{
    position: fixed;
    left: 0;
    padding: 0;
    bottom: 3vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 320;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

.navegacion .contenedor{
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: flex;
}

.navegacion .menu_navegacion{
    background-color: var(--texto);
    width: 26px;
    height: 26px;
    border-radius: 13px;
    padding: 0;
    margin: auto;
    cursor: pointer;
}

.btn{
    border-radius: 8px;
    display: block;
    background: var(--color-boton);
    /*****/
    padding: 0.1rem 1rem 0.3rem 1rem;
    font-size: 1.3rem;
    margin: .5rem auto;
    width: 60%;
    text-align: center;
    text-decoration: none;
    color: var(--color-blanco-bt);
    box-shadow: 0px 0px 7px #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.btn-auto{
    width: auto;
}
.btn-4{
    width: fit-content;
    display: inline-block;
    /*****/
    font-size: 2rem;

}
.descuento p{
    /*****/
    font-size: 1.5rem;
    font-weight: normal;
}
.swal2-popup {
    color: #fff !important;
    background: var(--color-fondo-swal) !important;
}
.swal2-popup.swal2-toast {
    background: var(--color-fondo-swal) !important;
    -webkit-box-shadow: 0px 0px 8px #fff !important;
    box-shadow: 0px 0px 8px #fff !important;
}
.swal2-timer-progress-bar{
    background-color: rgb(55, 0, 0) !important;
}

/* .swal2-styled.swal2-confirm {
    background-color: rgb(75, 141, 39) !important;
}
.swal2-styled.swal2-confirm:focus {
    -webkit-box-shadow: 0 0 0 3px rgb(25, 141, 9 / 92%) !important;
            box-shadow: 0 0 0 3px rgb(25, 141, 9 / 92%) !important;
} */
.swal2-styled.swal2-confirm {
    background-color: rgb(8 51 36) !important;
}
.swal2-styled.swal2-confirm:focus {
    -webkit-box-shadow: 0 0 0 3px rgb(100 200 122 / 50%) !important;
    box-shadow: 0 0 0 3px rgb(100 200 122 / 50%) !important;
}
.swal2-styled.swal2-default-outline:focus{
    -webkit-box-shadow: 0 0 0 3px rgb(100 200 122 / 50%) !important;
            box-shadow: 0 0 0 3px rgb(100 200 122 / 50%) !important;
}

/*
    CORREGIR
*/


.card_barril2{
    display: flex;
    flex-direction: initial;
    z-index: 100;
    margin: 1rem 1%;
    /* background-color: var(--color-fondo); */
    border-radius: 10px;
    padding: 1%;
    max-width: 46%;
    box-shadow: 0px 0px 7px var(--color-barras);
    background: #000;
}
.card_barril2 .foto, .card_barril2 .exp{
    position: relative;
    width: 50%;
}
.card_barril2 .exp .antiguo{
    position: relative;
    margin-right: 1rem;
}
.card_barril2 .exp .antiguo::before {
    content: "";
    width: 60%;
    height: 5px;
    position: absolute;
    background: #640101cc;
    top: 35%;
    left: 35%;
    transform: rotate(-25deg);
}
.card_barril2 .exp .compartir, .card_barril2 .exp .anadir{
    border-radius: 8px; 
    padding: 0.1rem .5rem 0.3rem .5rem; 
    margin-right: 1rem;
    display: inline-block;
    cursor: pointer;
    background: var(--color-boton);
    color: var(--color-blanco);
    box-shadow: 0px 0px 7px #fff;
    text-decoration: none;
    margin-bottom: 10px;
    position: relative;
}
.card_barril2 .exp .oferta{
    padding: 0;
    background: transparent;
    color: var(--color-blanco);
    box-shadow: none;
    text-decoration: none;
    display: inline-block;
}

.card_barril2 .exp .compartir{
    background-image: url('https://steakandbeer.es/svg/share.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 76%;
    width: 22px;
}

.card_barril2 .foto img{
    width: 90%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    margin: 0 !important;
    max-width: 200px;
}
.card_barril2 .exp{
    position: relative;
    width: 70%;
    display: grid;
    align-content: space-between;
}
.card_barril2 .exp .p_h3{
    /*****/
    font-size: 1.2rem;
    padding: 0;
}
.card_barril2 .exp div p{
    font-size: 1rem;
    padding: 0;
    font-weight: normal;
}
.card_barril2 .exp p{
    font-size: .7rem;
    padding: 0;
}



/* CARD PRUEBAS*/
.card_barril3{
    position: relative;
    display: flex;
    flex-direction: initial;
    z-index: 100;
    min-height: 165px;
    margin: 1rem 0;
    background-color: var(--color-negro);
    border-radius: 10px;
    padding: 0 !important;
    box-shadow: 1px 1px 4px var(--color-sombras);
    box-sizing: border-box;
    overflow: hidden;
    /* box-shadow: 1px 1px 5px #ffffff33; */
}
.card_barril3 .foto{
    position: relative;
    width: 80%;
    max-width: 170px;
    margin: 1px 0;
}
.card_barril3 .exp{
    position: relative;
    width: 70%;
    max-width: calc(100% - 130px);
}
.card_barril3 .exp .antiguo{
    position: relative;
    display: inline-block;
    padding: 0;
    font-size: 1rem;
}
.card_barril3 .exp .antiguo::before {
    content: "";
    width: 60%;
    height: 5px;
    position: absolute;
    background: #640101cc;
    opacity:0;
    top: 35%;
    left: 35%;
    transform: rotate(-25deg);
}
.card_barril3 .exp .antiguo.activo::before {
    opacity:1;
}
.card_barril3 .exp .compartir, .card_barril3 .exp .anadir{
    border-radius: 8px; 
    padding: 0.4rem .5rem 0.4rem .5rem; 
    /* margin-right: 1rem; */
    display: inline-block;
    cursor: pointer;
    background: var(--color-boton);
    color: var(--color-blanco);
    box-shadow: 0px 0px 7px #fff;
    text-decoration: none;
    margin: .5rem;
    position: relative;
    overflow: hidden;
    font-size: .9rem;
}
.card_barril3 .exp .oferta{
    padding: 0;
    background: transparent;
    color: var(--color-blanco);
    box-shadow: none;
    text-decoration: none;
    display: inline-block;
}

.card_barril3 .exp .compartir{
    background-image: url('https://steakandbeer.es/svg/share.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 76%;
    width: 22px;
}

.card_barril3 .foto img{
    width: 90%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    margin: 0 !important;
    max-width: 200px;
}
.card_barril3 .exp{
    position: relative;
    width: 70%;
    display: grid;
    align-content: space-between;
    text-align: center;
    margin: .5rem 0;
}
.card_barril3 .exp .p_h3{
    /*****/
    font-size: 1.2rem;
    padding: 0;
}
.card_barril3 .exp p{
    /*****/
    font-size: 1rem;
    padding: 0;
    font-weight: normal;
}
/* CARD PRUEBAS*/


/* CAMBIO */
.noticias {
    position: relative;
    min-height: 210px;
    width: 100vw;
    margin: 0 auto;
}
.noticias.activo::before, .noticias.activo::after {
    position: absolute;
    top: 0;
    width: 1.5%;
    height: 100%;
    content: "";
    background: var(--color-fondo-swal);
    z-index: 2;
}
.noticias.activo::before {
    right: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--color-fondo-swal) 50%);
}
.noticias.activo::after {
    left: 0;
    background: linear-gradient(270deg, rgba(0,0,0,0) 0%, var(--color-fondo-swal) 50%);
}
.noticias_destacadas {
    display: grid;
    grid-template-columns: 320px 1fr;
    margin-bottom: 2rem;
}
.noticias_destacadas h2{
    display: grid;
    padding: 1rem;
    align-items: center;
    color: #ddd;
    font-size: 2.3rem;
}
.noticias .flickity-slider{
    display: grid;
}
.noticias .carousel-cell{
    display: grid;
    text-align: left;
    height: 100%;
    padding: 0.5rem;
    max-width: 220px;
    width: 28%;
    margin-left: 10px;
    background: #eee;
    border-radius: 5px;
    counter-increment: carousel-cell;
    grid-template-rows: auto 20px 40px;
    transition: height 0.2s;
}
.noticias .carousel-cell h3, .noticias .carousel-cell p{
    color: #333;
    width: 80%;
    max-width: 480px;
    margin: auto;
    margin: 0 auto auto auto;
}
.noticias .carousel-cell h3{
    font-size: .85rem;
    font-weight: 500;
}
.noticias .carousel-cell p{
    text-align: center;
    font-size: .8rem;
}
.noticias .carousel-cell a{
    background: var(--detalle);
    color: #eee;
    border-radius: 1rem;
    width: 120px;
    margin: auto;
    text-align: center;
    padding:.3rem;
    box-shadow: 2px 2px 7px #000;
    transition: .1s;
}
.noticias .carousel-cell a:hover{
    box-shadow: 1px 1px 5px #000;
}
.flickity-button {
    background: var(--detalle);
    color: #fff;
    cursor: pointer;
}
.flickity-button:hover {
    background: #fff;
    color: var(--detalle);
    cursor: pointer;
}
.flickity-button:focus {
    outline: 0;
    box-shadow: none;
}
.cont_carrusel {
    max-width: 380px;
    min-width: 380px;
    width: 40%;
    margin-right: 1.5rem;
    /* padding-left:.5rem; */
    /* margin: 0 0.5rem; */
    padding-left: 0.5rem;
    box-sizing: border-box;
}
/* .noticias .cont_carrusel {
    margin-left: .75rem;
} */

.cont_carrusel.mini {
    width: 20%;
    max-width: 200px;
    min-width: 200px;
    height: inherit !important;
}
.oferta_activa {
    position: absolute;
    top: 16px;
    z-index: 10;
    background: #ed7a00;
    transform: rotate(-45deg);
    left: -80px;
    width: 240px;
    text-align: center;
    font-size: 20px;
}
.top_ventas{
    position: absolute;
    top: 56px;
    z-index: 10;
    background: var(--color-barras);
    transform: rotate(-45deg);
    left: -56px;
    width: 240px;
    text-align: center;
    font-size: 17px;
}
.top_ventas2 {
    position: absolute;
    top: 14px;
    z-index: 10;
    background: var(--color-barras);
    transform: rotate(-45deg);
    color: var(--texto);
    left: -84px;
    width: 240px;
    text-align: center;
    font-size: 17px;
    padding: .5rem;
}
.sin_stock{
    top: 16px;
    left: -60px;
    width: 200px;
    color: #fff;
    display: block;
    position: absolute;
    text-align: center;
    background-color: #830d0d;
    padding: 1.2rem;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    z-index: 10;
}
.sin_stock:before {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -1;
    margin: 0.2em -5em;
    border: 2px rgba(255,255,255,0.7) dashed;
}

.cont_carrusel.mini .card_barril3{
    position: relative;
    margin: 1% 0px !important;
    display: grid;
    grid-template-rows: 172px 1fr;
    width: 100%;
    padding: 0 !important;
    flex: 1;
    margin-left: 1rem;
    align-items: end;
    background-color: var(--color-negro);
    height: 98%;
    box-sizing: border-box;
    overflow: hidden;
}
.cont_carrusel.mini .card_barril3 .exp .antiguo {
    margin-right: 0;
    display: inline-block;
    padding: 0;
}
.cont_carrusel.mini .card_barril3 .exp .oferta {
    display: inline-block;
    font-size: 16px;
}
.cont_carrusel.mini .card_barril3 .exp .p_h3, .cont_carrusel.mini .card_barril3 .exp div p {
    font-size: 1rem;
}
.cont_carrusel.mini .card_barril3 .exp p {
    font-size: 10px;
    margin-top: 0;
}
.cont_carrusel.mini .card_barril3 .exp {
    width: 100%;
    text-align: center;
    max-width: 100%;
    height: 90% !important;
}
.cont_carrusel.mini .card_barril3 .foto {
    margin-left: auto;
    height: 100%;
    width: 100%;
    padding-top: 100%;
    max-width: 100%;
}
.cont_carrusel.mini .card_barril3 .foto img{
    margin: 0% auto !important;
    position: relative;
    max-width: 96%;
    max-height: 96%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}  
.cont_carrusel.mini .card_barril3 .exp .compartir, .cont_carrusel.mini .card_barril3 .exp .anadir {
    margin-right: 0.75rem 0.75rem 0.75rem 0px;
}

#carrito{
    position: relative;
    border-radius: 15%;
    width: clamp(44px, 3vw, 48px) !important;
    height: clamp(44px, 3vw, 48px) !important;
    align-items: center;
    cursor: pointer;
    margin: auto;
    display: grid;
    overflow: visible;
    background: var(--color-barras);
    box-shadow: 0px 0px 5px var(--texto);

}
#hablamos{
    position: fixed;
    right: 10px;
    bottom: 120px;
    background-color: var(--color-barras);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    /* display: grid; */
    display: none;
    justify-items: center;
    align-items: center;
    z-index: 400;
    box-shadow: 0px 0px 7px #fff;
    cursor: move;
    /*Deshabilitar selección de texto*/
    -moz-user-select: none;     /* Mozilla */
    -khtml-user-select: none;   /* Chrome */    
    -o-user-select: none;       /* Opera */
}
#hablamos{
    right: 1rem;
    bottom: 1rem;
    display: flex;
    visibility: hidden;
    background-color: transparent;
}
#carrito img{
    width: 85%;
    height: 85%;
    margin: auto;
}
#hablamos img {
    width: 110%;
    height: 110%;
    margin-left: -5%;
}
#carrito span{
    position: absolute;
    top: -7px;
    font-size: 10px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-weight: bold;
    border: 2px solid var(--color-barras);
}

.politicas{
    margin: auto;
    display: flex !important;
    justify-items: center;
    flex-wrap: wrap;
}

#suscribete{
    display: grid;
    text-align: center;
    max-width: 480px;
    margin: auto;
}
.label{
    margin: 1rem auto 0rem auto;
}
#suscribete input[type="text"], #suscribete select, #email{
    margin: 1rem auto .5rem auto;
    height: 40px;
    width: calc(100% - 2rem);
    border-radius: 8px;
    border: 1px solid var(--color-blanco);
    outline: none;
    padding-left: 1rem;
    cursor: pointer;
    color: var(--color-blanco);
    background: var(--color-fondo-swal);
}
#suscribete select{
    padding: 0.25rem 1rem !important;
}
#btn{
    /* margin: .5rem auto 1rem auto; */
    border: none;
    outline: none;
    cursor: pointer;
}
#mensaje{
    display: none;
    text-align: center;
    padding: 0.5rem;
    border-radius: 8px;
    margin: .5rem;
    width: calc(100% - 2rem);
}
#mensaje.mostrar{
    display: block;
}
#mensaje.mostrar.ok{
    background: #90ee90a6;
}
#mensaje.mostrar.ko{
    background: #ee909040;
}
#mensaje.mostrar.ya{
    background: #f58f1a40;
}
#mensaje.mostrar.ko:after {
    content: "Ha ocurrido un error, intentalo de nuevo más tarde";
}
#mensaje.mostrar.ya:after {
    content: "Ya está suscrito, cuando tengamos noticias le avisaremos. Gracias";
}
#mi_carro{
    display: grid;
    grid-template-columns: auto 240px;
    padding: 4px 8px;
    width: 90%;
    max-width: 1100px;
    margin: 4rem auto;
}
.contenedor h2{
    max-width: 1100px;
    margin: auto;
    font-size: 1.5rem;
}
#contenido5 #texto-pos h2{
    width: 100%;
    max-width: 1100px;
    margin: auto;
}

#mi_carro .productos{
    margin-right: 1rem;
}
#mi_carro .sin_producto{
    width: 100%;
    text-align: center;
    font-size: 24px;
}
#mi_carro .total{
    position: sticky;
    top: 0;
    opacity: 0;
    display: grid;
    background: var(--color-negro);
    box-shadow: 1px 1px 4px 1px var(--color-sombras);
    padding: 4px 8px;
    margin-top: 6px;
    border-radius: 8px;
    text-align: center;
    height: max-content;
    grid-template-columns: 150px auto;
}
#mi_carro .producto {
    display: grid;
    grid-template-columns: auto 100px 140px;
    align-items: center;
    background: var(--color-negro);
    box-shadow: 1px 1px 4px 1px var(--color-sombras);
    margin-top: 6px;
    border-radius: 8px;
    padding: 0px 6px 0px 0px;
}
#mi_carro .producto .producto_nombre, #mi_carro .producto .producto_precio{
    font-size: 1.1rem;
    margin: 0;
}
#mi_carro .producto .producto_precio{
    text-align: right;
}
#mi_carro .producto .producto_cantidad{
    display: grid;
    grid-template-columns: 40px auto 40px;
    grid-template-rows: 40px;
    align-items: center;
    width: 120px;
    margin-right: 0;
    margin-left: auto;
}
#mi_carro .producto .producto_cantidad *{
    display: grid;
    align-items: center;
    text-align: center;
    margin: 4px 0px;
}
#mi_carro .producto .producto_cantidad .menos, #mi_carro .producto .producto_cantidad .mas{
    cursor: pointer;
    background: var(--color-barras) !important;
    border-radius: 8px;
    padding: 8px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    box-shadow: 1px 1px 4px 1px var(--color-sombras);
}

.idiomas {
    position: relative;
    display: flex;
    align-items: center;
    margin: auto 2rem;
}

.idioma {
    display: none;        
}

.idioma img {
    width: clamp(25px, 3vw, 35px) !important;
    height: clamp(25px, 3vw, 35px) !important;
}

.idioma.seleccionado {
    display: grid;
    cursor: pointer;
}

.desplegable {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: var(--color-negro);
}

.desplegable.activo {
    top: -5px;
    border-radius: 20px;
}

.desplegable .idioma {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 8px;
    cursor: pointer;
}

.desplegable .idioma:hover img{
    transform: rotate(15deg);
    transition: .5s;
}

#total_productos div:nth-child(1){
    grid-column: 1/3;
    grid-row: 1;
}
#total_productos div:nth-child(3){
    grid-column: 2;
    grid-row: 2;                              
    margin-right: 0.75rem;
}
#total_productos div:nth-child(2){
    grid-column: 1;
    grid-row: 2;
    max-width: 150px;
    margin-left: 0.75rem;
}
#total_productos div:nth-child(4) {
    grid-column: 1/3;
    grid-row: 3;
    width: 100%;
}
@media (max-width: 1200px) {                            
    .noticias_destacadas {
        grid-template-columns: 1fr;
    }
    .noticias .carousel-cell{            
        max-width: 320px;
        width: 50%;
    }
    .noticias_destacadas h3{
        font-size: 1.1rem;
    }
}
@media (max-width: 900px) { 
    #contenido5, #contenido6 {
        width: 100%;
    }
    .cont_carrusel {
        width: 50%;
    }
    .cont_carrusel.mini {
        width: 25%;
    }
    #mi_carro {
        width: 96%;
    }
    .cont_carrusel.mini .card_barril3 .exp .compartir, .cont_carrusel.mini .card_barril3 .exp .anadir {
        font-size:.9rem;
    }
}
@media (max-width: 600px) {
    #total_productos.fixed {
        position: fixed;
        top: 50px;
        left: 0;
        width: 100%;
    } 
    #contenido5, #contenido6 {
        width: 100%;
    }
    .cont_carrusel {
        width: 55%;        
    }
    .cont_carrusel.mini {
        width: 33%;
    }
    #mi_carro {
        width: 96%;
        display: flex;
        flex-direction: column;
        margin:2rem auto;
    }
    #mi_carro .productos {
        margin-right: 0;
        width: 100%;
    }
    #mi_carro .producto {
        grid-template-columns: auto 120px;
        grid-template-rows: auto auto;
    }
    #mi_carro .producto .producto_precio {
        text-align: center;
    }
    #mi_carro .total{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #mi_carro .producto .producto_nombre{
        grid-row: 1 / 3 !important;
    }
    #mi_carro .producto .producto_nombre, #mi_carro .producto .producto_precio {
        margin: 0 0.5rem;
    }
    #total_productos div:nth-child(1) {
        width: 100%;        
    }
    #total_productos div:nth-child(2),
    #total_productos div:nth-child(3) {       
        margin: .75rem 0rem;
    }
    #total_productos div:nth-child(2){       
        margin: 0.75rem 0.5rem;
        width: 100%;
        max-width: 220px;
    }
}

@media screen and (max-width:1024px) {
    #texto3 p{
        font-size: calc(1rem + 1vw + 1vh);
    }
    .card_barril2 {
        max-width: 46%;
    }
    .card_barril2 .exp .p_h3 {
        font-size: 1rem;
    }
    .card_barril2 .exp p {
        font-size: .8rem;
    }
    .card_barril3 .exp .p_h3 {
        font-size: 1rem;
    }
    .card_barril3 .exp p {
        font-size: .8rem;
    }
    meta[name="viewport"] {
        content: "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no";
    }
}

@media screen and (max-width:768px) {
    :root{
        --zoom: 3;
    }
    h1 {
        top: 10vh;
        font-size: clamp(4rem, calc(3.5rem + 1vw + 1vh), 6rem);
    }
    #texto {
        left: 4%;
        bottom: 65%;
    }
    #texto h2 {
        top: 50%;
        font-size: calc(2vw + 1.5vh);
    }
    .section-1 h3{
        bottom: 8vh;
        left: 0%;
        /*****/
        font-size: calc(1.4rem + 1vw);
        text-align: center;
    }
    .section-3 h3 {
        bottom: 8vh;
        left: -100%;
        /*****/
        font-size: calc(1.4rem + 1vw);
        text-align: center;
    }
    #section2 {
        z-index: 150;
        /*****/
        /* font-size: 1.5rem; */
        /* height: 70vh;
        padding: 10vh 0 20vh 0; */
    }
    #section2 h2{
        /*****/
        font-size: 1.7rem;
    }
    #section2 p {
        /*****/
        font-size: 1.2rem;
    }
    #menu {
        padding: 0.5rem 2%;
        width: 96%;
        height: 72px;
        align-items: center;
    }
    .menus {
        width: 280px;
        position: absolute;
        right: 0%;
        justify-content: space-evenly;
        align-items: center;
    }
    .menus .link_menu {
        /*****/
        font-size: 14px;
        margin: auto;
    }
    .burguer{
        display: none;
    }
    #texto3 {
        top: 35%;
        left: 5%;
    }
    #texto3 p{
        text-align: left;
        width: 100%;
        margin: 3px 0 !important;
        font-size: calc(.5rem + 1vw + 1vh);
    }
    p, h2{
        margin: .5rem auto;
    }
    .section-3 h2{
        font-size: 1.4rem;
    }
    #texto4{
        left: 0;
        height: 45vh;
        padding: 5%;
        width: 90%;
        z-index: 1001;
    }
    #texto4 h2.descuento {
        font-size: 1.8rem;
    }
    div.lanzamiento {
        margin-right: 10vw;
        width: 80vw;
    }
    #section4 .before {
        width: 100vw;
        top: 30vh;
        left: 2%;
        height: 50vh;
    }
    #texto5 h2{
        margin: 0 auto;
        font-size: 1.8rem;
        text-align: center;
        width: 100%;
    }
    .cajas {
        height: auto;
    }
    .card_barril {
        max-width: 250px;
        width: 40%;
        margin: auto 5px 0 5px;
    }
    .card_barril .img {
        width: 80%;
        margin: auto 10%;
    }
    .card_barril .titulo {
        /*****/
        font-size: 1rem;
        margin-top: -15px;
    }
    .card_barril2 {
        margin: 2% 1%;
        max-width: 80%;
    }
    .card_barril3 {
        margin: 2% 1%;
    }
    .cajas .card_barril2:nth-child(3) {
        margin-top: 2rem;
    }
    .cajas .card_barril2:nth-child(4) {
        margin-top: 5rem;
    }
    .btn {
        width: auto;
    }  
    #contenido5 #texto-pos {
        /*****/
        font-size: 1rem;
    }
    .descuento p {
        /*****/
        font-size: 1rem;
    }
}

@media only screen and (max-width: 480px){
    .noticias {
        position: relative;
        width: 100%;
        height: 100%;
        max-width: 100vw;
        margin: 0;
    }      
    .noticias .carousel-cell{            
        max-width: 320px;
        width: 70%;
    }
    .flickity-button {
        display: none;
    }
    .cont_carrusel {
        width: 70%;
        min-width: 300px;
        box-sizing: border-box;
    }
    .cont_carrusel.mini {
        width: 46%;
        min-width: 180px;
    }
    .card_barril3 .foto {
        padding-top: 0%;
    }

    #texto4{
        left: 0;
        height: auto;
        padding: 2%;
        width: 96vw;
    }
    #texto4 h2.descuento {
        font-size: 1.4rem;
    }
    #texto4 div.lanzamiento {
        font-size: 1.5rem;
        margin-right: auto;
        margin-left: 0%;
        width: 98%;
        top: 0px;
        left: 0;
        margin-top: 1rem;
    }
    #texto5 h2 {
        margin: 0 auto;
        font-size: 1.2rem;
        text-align: center;
        width: 99%;
        padding: 0px .5%;
    }
    .texto-primeros {
        margin-top: 0.5rem;
        font-size: .8rem;
    }
    .cajas {
        flex-wrap: wrap;
    }
    .card_barril2{
        margin: 2rem auto !important;
        display: grid;
        max-width: 44%;
        min-width: 44%;
        padding: 1%;
        flex: 1;
        grid-template-rows: min-content;
    }
    .card_barril2 .exp .antiguo {
        margin-right: 0;
        display: inline-block;
        padding: 0;
    }
    .card_barril2 .exp .oferta {
        display: inline-block;
        font-size: 24px;
    }
    .card_barril2 .exp .p_h3 {
        font-size: 13px;
    }
    .card_barril2 .exp p {
        font-size: 10px;
        margin-top: 0;
    }
    #contenido5 {
        padding: 80px 0 40px 0;
    }
    .card_barril2 .exp {
        width: auto;
        padding: 5px 10px;
    }
    .card_barril2 .foto {
        margin-left: auto;
        height: auto;
        width: 100%;
        padding-top: 100%;
    }
    .card_barril2 .foto img{
        max-width: 260px;
        width: 95%;
        margin-left: 5% !important;
    }  
    .cajas .card_barril2:nth-child(2) {
        margin-top: 2%;
    }
    .cajas .card_barril2:nth-child(3) {
        margin-top: 2%;
    }
    .cajas .card_barril2:nth-child(4) {
        margin-top: 2%;
    }
    .btn{
        padding: 0.5rem 1rem !important;
        font-size: 1.3rem !important;
    }
    .btn.btn-port{
        margin: 0 0 0 0.5rem !important;
    }
    .card_barril2 .exp .compartir, .card_barril2 .exp .anadir {
        margin: auto auto .5rem auto;
    }
    .card_barril3{
        margin: 2rem 0rem;
        display: grid;
        padding: 0%;        
        overflow: hidden;
        min-height: 540px !important;
        padding: 0 !important;
    }
    .mini .card_barril3{
        min-height: auto !important;
    }
    .card_barril3 .exp .antiguo {
        margin-right: 0;
        display: inline-block;
        padding: 0;
        font-size: 16px;
    }
    .card_barril3 .exp .oferta {
        display: inline-block;
        font-size: 18px;
    }
    .card_barril3 .exp .p_h3 {
        font-size: 18px;
    }
    .card_barril3 .exp .compartir, .card_barril3 .exp .anadir {
        padding: 0.6rem 1rem;
        margin: 1rem auto;
        font-size: 1.5rem;
    }
    .card_barril3 .exp p {
        font-size: 10px;
        margin-top: 0;
    }
    .card_barril3 .exp {
        width: inherit;
        text-align: center;
        max-width: none;
    }
    .card_barril3 .foto {
        margin-left: auto;
        height: auto;
        width: 100%;
        max-width: 100%;
    }
    .card_barril3 .foto img {
        width: 100%;
        position: relative;
        left: 0;
        transform: translateX(0px);
        max-width: 300px;
    }
    .mini .card_barril3 .exp .antiguo, .mini .card_barril3 .exp .oferta {
        font-size: 16px;
    }
    #texto6 h2{
        font-size: 1.5rem;
        padding: 0 5%;
    }
    #producto{
        max-height: none !important;
        display: grid !important;
    }
}

@media only screen and (max-height: 480px) and (orientation: landscape) {
    /* Estilos específicos para pantallas menores de 768px en landscape */
    /* Por ejemplo, puedes reducir el tamaño de la fuente de los títulos */
    #pantalla {
        display: -ms-grid;
        display: grid;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    #pantalla h2{
        /*****/
        font-size: 2rem;
        text-align: center;
    }
    .section, .contenido{
        display: none;
    }
}

@media screen and (min-width: 900px) {
    #texto4 .descuento {
        font-size: 3rem;
        padding-left: calc(2rem + 6vw);
    }
}

@media screen and (min-width: 1200px) {
    .noticias{
        width: 90%;
        max-width: 1666px;
    }
    .card_barril{
        max-width: 200px;
    }
    #texto {
        left: 10vw;
        bottom: 50%;
    }
    #texto3{
        left: 25%;
    }
    #contenedor_barriles{
        width: 90vw;
    }
    #texto4 .descuento {
        font-size: 3rem;
        padding-left: calc(2rem + 12vw);
    }
}

@media screen and (min-width: 1500px) {
    #contenedor_barriles{
        width: 80vw;
    }
}

@media screen and (min-width: 2024px) {
    .barril_l {
        height: 680px;
        width: 36vw;
        max-width: 500px;
    }
    .barril_xl {
        height: 800px;
        width: 40vw;
        max-width: 600px;
    }
    .barril_s {
        max-width: 380px;
    }
    .barril_m {
        height: 55vw;
        max-height: 620px;
        width: 50vw;
        max-width: 420px;
    }
    #tapa,#parrilla,#cilindro,#quemador,#base,.barril_m .popup {
        max-height: 620px;
        width: 50vw;
        max-width: 360px;
    }
    .card_barril2 {
        margin: 2rem;
        max-width: 600px;
    }
    .card_barril3 {
        margin: 4rem 0rem;
        max-width: 600px;
    }
    #texto2 h2 {
        width: 50%;
        margin: 0 0 auto auto;
        padding-right: 5%;
    }
    .cajas{
        max-width: 1500px;
    }
    .menus {
        /*****/
        font-size: 1.5rem;
    }
}
@media screen and (min-width: 3200px) {
    #texto-pos {
        max-width: 80% !important;
        margin: auto;
        padding: 5% 5% 100px 5%;
        font-size: 3rem !important;
    }
    #texto-pos h2 {
        font-size: 5.5rem !important;
    }
    #texto-pos p {
        font-size: 3rem !important;
    }
    #menu {
        padding: 4rem;
    }
    #menu .logo img{
        width: 150px;
        height: 150px;
    }
    .cont_insta{
        width: 120px;
        height: 120px;
        border-radius: 2rem;
    }
    .cont_insta img{
        width: 100%;
        height: 100%;
    }
    #menu .menus{
        width: 80%;
    }
    .menus .link_menu, .menus .nav-link {
        font-size: 4rem;
    }
    .link_menu:after, .nav-link:after {
        height: 0.6rem;
    }
    .idioma img {
        width: 90px;
    }
    .desplegable {
        top: -20rem;
    }
    #carrito {
        width: 140px;
        height: 140px;
    }
    #carrito span {
        font-size: 2rem;
        right: 0px;
        width: 70px;
        height: 70px;
        border: 0.8rem solid var(--color-barras);
    }
    #contenido5, #contenido6 {
        padding: 20rem 0 0;
    }
    #hablamos {
        right: 10rem;
        bottom: 10rem;
    }
    #hablamos img {
        width: 150px;
        height: 150px;
        margin-left: -25%;
    }
    .contenedor {
        max-width: 80%;
    }
    h1 {
        font-size: 14rem !important;
        margin-bottom: 2rem !important;
        max-width: 80% !important;
        width: 90% !important;
    }
    h2, h3 {
        max-width: none !important;
        font-size: 6rem !important;
    }
    .noticias {
        width: 80%;
        max-width: none;
        height: auto !important;
    }
    .cont_carrusel {
        max-width: none;
        width: 36%;
        padding-left: 5rem !important;
    }
    .card_barril3 {
        max-width: none;
        border-radius: 2rem;
    }
    .oferta_activa {
        top: 4rem;
        left: -7rem;
        width: 30rem;
        font-size: 4rem;
    }
    .card_barril3 .exp .p_h3 {
        font-size: 4.5rem;
    }
    .card_barril3 .exp .antiguo {
        font-size: 3.5rem;
    }
    .card_barril3 .exp p {
        font-size: 4rem;
    }
    .card_barril3 .foto {
        max-width: 450px;
    }
    .card_barril3 .foto img {
        max-width: none;
    }
    .card_barril3 .exp .compartir, .card_barril3 .exp .anadir {
        font-size: 4rem;
        margin: 2rem 0;
    }
    .cont_carrusel.mini {
        width: 20%;
        max-width: 600px;
        min-height: 900px;
    }
    .cont_carrusel.mini .card_barril3 .foto img {
        max-width: none !important;
        width: 80%;
    }
    .cont_carrusel.mini .card_barril3 .exp .p_h3, .cont_carrusel.mini .card_barril3 .exp div p {
        font-size: 3.5rem;
        margin: 2rem 0;
    }
    .cont_carrusel.mini .card_barril3 .exp .oferta {
        font-size: 4.5rem;
    }
    ul {
        margin-left: 5rem;
    }
    /* #btn, .btn {
        font-size: 4.5rem !important;
        width: auto;
        max-width: 500px !important;
        margin: 4rem auto !important;
        padding: 1rem 2rem !important;
        border-radius: 2rem !important;
    } */
    #email {
        height: 120px;
        width: 800px;
        font-size: 4rem;
        border-radius: 2rem;
        padding: 0 2rem;
    }
    .label {
        font-size: 4.5rem;
    }
    #suscribete {
        max-width: 1800px;
    }
    #mi_carro {
        grid-template-columns: auto 900px;
        padding: 2rem;
        width: 90%;
        max-width: 80%;
        margin: 4rem auto;
    }
    #mi_carro .producto {
        grid-template-columns: auto 600px 400px;
        border-radius: 8px;
        padding: 1rem 2rem;
    }
    #mi_carro .producto .producto_nombre, #mi_carro .producto .producto_precio {
        font-size: 3.5rem;
    }
    #mi_carro .producto .producto_cantidad {
        grid-template-columns: 35% 30% 35%;
        grid-template-rows: auto;
        width: 90%;
        font-size: 2.5rem;
    }
    #mi_carro .producto .producto_cantidad .menos, #mi_carro .producto .producto_cantidad .mas {
        border-radius: 1rem;
        padding: 1.5rem;
        font-size: 4rem;
    }
    #mi_carro .total {
        font-size: 4rem;
        padding: 2rem;
    }
    #total_productos div:nth-child(2) {
        max-width: none;
        margin-left: 2rem;
    }
    #compartir_carro img{
        height: 80px !important;
    }
    .swal2-container.swal2-center>.swal2-popup {
        width: 900px;
        border-radius: 2rem;
    }
    .swal2-loader {
        width: 6em !important;
        height: 6em !important;
        border-width: 2rem;
    }
    .barril_l {
        height: 1100px;
        width: 36vw;
        max-width: none;
    }
    .barril_s {
        max-width: 700px;
        height: 800px;
    }
    .barril_xl {
        height: 1600px;
        width: 40vw;
        max-width: 800px;
    }
    .barril_m,#tapa, #parrilla, #cilindro, #quemador, #base, .barril_m .popup {
        height: 55vw;
        max-height: 1000px;
        width: 50vw;
        max-width: 820px;
    }
    #texto3 p {
        font-size: 6rem;
    }
    #texto3 p span {
        margin-right: 5rem;
    }
    #texto3 p span::before {
        width: 100px;
        height: 65px;
        transform: translate(-39%, -32%);
    }
    #texto2 h2 {
        width: 100%;
        font-size: 10rem !important;
    }
    #texto2 p {
        width: 95%;
        font-size: 5rem;
    }
    #texto4 .descuento {
        font-size: 10rem !important;
    }
    .descuento p {
        font-size: 3.5rem;
    }
    .texto-primeros {
        font-size: 5rem;
    }
    .navegacion {
        bottom: 1vh;
    }
    .navegacion .contenedor {
        max-width: 1000px;
    }
    .navegacion .menu_navegacion {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    .contenedor p{
        font-size: 4rem !important;
    }
    #producto {
        max-width: 80% !important;
        max-height: 1000px !important;
    }
    #producto .carrusel {
        max-height: 1000px !important;
    }
    #producto .carrusel img {
        max-height: 1000px !important;
    }
    #producto .descripcion p {
        font-size: 4rem !important;
    }
    #producto .descripcion .antiguo {
        font-size: 4rem !important;
    }
    #producto .descripcion .oferta {
        font-size: 5rem !important;
    }
    #producto .descripcion .botones .anadir {
        font-size: 5rem !important;
    }
    #producto .descripcion .botones .compartir {
        width: 200px !important;
    }
    #producto .descripcion .botones .compartir img {
        height: 110px !important;
    }
}
.swal2-loader {
    width: 2.4em !important;
    height: 2.4em !important;
    border-width: 0.5em;
    border-color: var(--color-boton) rgba(0,0,0,0) var(--color-boton) rgba(0,0,0,0) !important;
}
h1, h2, h3, .barril_m, .btn, #menu, #texto3, #texto2, #texto4, #texto-pos, #hablamos, p {
    user-select: none;
}

.hamburguesa{
    display: none;
    z-index: 4;
}
/* Estilos para el icono de hamburguesa */
.icono-hamburguesa {
    display: block;
    width: 30px;
    height: 27px;
    position: relative;
    cursor: pointer;
}

.hamburguesa.sin .icono-hamburguesa span{
    transition: all .3s ease-in-out;
    left: 100px;
}
.icono-hamburguesa span{
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--texto);
    transition: all 0.3s ease-in-out;            
    top: 12px;
    left: 0px;
    border-radius: 2px;
}

.icono-hamburguesa::before,
.icono-hamburguesa::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--texto);
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

.hamburguesa.sin .icono-hamburguesa::before{
    transform: rotate(-45deg);
    top: 15px;
}
.hamburguesa.sin .icono-hamburguesa::after{
    transform: rotate(45deg);
    top: 15px;
}

.icono-hamburguesa::before {
    top: 0;
}

.icono-hamburguesa::after {
    bottom: 0;
}
@media screen and (max-width: 768px) {
    .mas_menu{
        width: 180px;
        right: 50%;
        transform: translateX(50%);
    }
    .esconder {
        display: none;
        width: 100%;
        max-width: none;
        position: fixed;
        inset: 0;
        background: var(--fondo);
        z-index: 3;
    }
    .esconder.activo {
        display: grid;
        width: 100vw;
        height: 100vh;
    }
    .esconder p{
        margin: 0;
        padding: 0;
    }
    .hamburguesa{
        display: block;
    }
    .desplegable {
        display: flex;
        left: 50%;
        transform: translateX(-50%);
        position: relative;
        top: 0;
        z-index: 1;
        background: transparent;
    }
    .idioma.seleccionado{
        display: none;
    }
    .link_menu{
        font-size: 36px !important;
    }
    .idioma img {
        width: 40px;
    }
}  

p.p_h3 {
    margin: 5px !important;
}