:root{
    --openSans:'open-sans', sans-serif;
    --chimpo:'chimpo', sans-serif;
    --cheddar:'cheddar', sans-serif;

    --amarillo: #faa41b;
    --rojo:#ee3b24;
    --azul: #0552a4;
    --blanco: #f5f5f5;
    --verde: #017f47;
    --negro: #1a1617;
}

html{
    box-sizing: border-box;
    font-size: 62.5%;
}
*,:before,:after{
    box-sizing: inherit;
}
body{
    background-color: var(--blanco);
    font-family: var(--chimpo);
    font-size: 2.4rem;
}

h1,h2{
    font-size: 4rem;
    font-family: var(--chimpo);
    text-transform: uppercase;
    margin: 0;
}
a{
    text-decoration: none;
    text-transform: uppercase;

}
.header{
    background-color: var(--rojo);
    /* width: 100%;     */
    max-width: 100%;
}
.contenedor{
    /* max-width: 160rem; */
    max-width: 100%;
    width:90%; 
    margin: 0 auto;
}
.top-bar{
    display: block;
    text-align: center;

}
@media (min-width: 768px) {
    .top-bar{
        height: 9rem;
        display: flex;
        justify-content:space-between;
        align-items: center; 
        line-height: 0;
    }
}

.logo{
    max-width: 100%;
    margin:1rem;
}
.top-bar_enlaces{
   display: flex;
   justify-content: space-between;
   gap: 5rem;
   
}
.top-bar_enlaces a{
    text-decoration: none;
    color: var(--amarillo);
    text-transform: uppercase;
    transition: color .5s ease;
    margin: 0 1rem;
}
.top-bar_enlaces a:hover{
    color: var(--blanco);
}
/*Vista 360*/

.tour{
    height: 68.8rem;
    background-color: var(--blanco);
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.cajaiframe{
    height: 68.8rem;
    position: relative;
    z-index: 1; 
}
.vista360{
    height: 100%;
}
.tour-contenido{
    text-align: center;
    
}
.tour-contenido_titulo{
    color: var(--rojo);
}
.tour-contenido_hover{
    color: var(--blanco);
}
.tour-contenido:hover .tour-contenido_titulo{
    color: var(--blanco);
}
.tour-contenido:hover .tour-contenido_hover{
    color: #017f47;
}
/*Barra animada ---frases*/
.barra-slider{
   background-image: url(../img/Barra\ 1.png);
   height: 9rem;
   animation: slider 30s infinite linear reverse;
}

@keyframes slider{
    to{
       background-position: 386rem;
    }
}
/*Cards*/
.flipcards-bg{
        background-color: var(--negro);
        /* height: 64rem; */
        display: grid;
        position:relative;
        z-index: 10;
}

.contenedor-flipcards{
    display: grid;
    grid-template-columns: 1, 1fr;
    align-items: center;
    margin-top: 2rem;

}

 .flipcard{
    height:100%;
    width:100%;
    margin: 0 auto;
    position: relative;
}

.flipcard-img{
    width: 100%;
    height: 100%;
    display: block;
    transition: all 400ms ease-in-out;
}
.flipcard-info_bar,
.flipcard-info_restaurante,
.flipcard-info_eventos,
.flipcard-info_experiencias {
    height:100%;
    width: 100%;
    position: absolute;
    top: 0;
    right:1rem;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 3rem;
    opacity: 0;
    transition: all 400ms ease-in-out;
    overflow: hidden;
    transform: translate(2rem 2rem);
}

.flipcard:hover img{
    opacity: 0;
    transform: translate(2rem);
    left:0;
}
.flipcard-info_bar{
    background-image: url(../img/bg-bar.png);
}
.flipcard:hover .flipcard-info_bar{
    opacity: 1;
    transform: translate(3.5rem);
}
.flipcard-info_restaurante{
    background-image: url(../img/bg-restaurante.png);
}
.flipcard:hover .flipcard-info_restaurante{
    opacity: 1;
    transform: translate(2rem);
}
.flipcard-info_eventos{
    background-image: url(../img/bg-eventos.png);
}
.flipcard:hover .flipcard-info_eventos{
    opacity:1;
    transform: translate(2rem);
}
.flipcard-info_experiencias{
    background-image: url(../img/bg-experiencias.png);
}
.flipcard:hover .flipcard-info_experiencias{
    opacity: 1;
    transform: translate(2rem);
}
.flipcard-titulo{
    text-transform: uppercase;
    margin-top: 0;
}
.flipcard-descripcion{
    font-family: var(--openSans);
    font-size: 1.9rem;
    line-height: 1.3;
    margin: 0;
}
.flipcard-titulo,.flipcard-descripcion{
    letter-spacing: .1rem;
    color: var(--blanco);
}
.flipcard-boton a{
    color: var(--blanco);
}
.flipcard-boton{
    display: inline-block;
    width: 45%;
    margin: 1.5rem auto;
    padding: 1.5rem 0;
    background-color: var(--rojo);
    box-shadow: 0.3rem 0.3rem var(--amarillo);
    cursor: pointer;
    text-align: center;
    align-items: center;
}

.flipcard-boton:hover{
    box-shadow: none;
}
 .caballo{
    position: absolute;
    margin-top: 2rem;
    height: 60rem;
    opacity: 0;
}
.caballo img{
    position: sticky;
    top:0rem;

}
.guitarra{
    position: absolute;
    right: 0;
    height: 60rem;
    opacity: 0;
}
.guitarra img{
    position: sticky;
    top:0;

}
.caballo,.guitarra{
    z-index: -10;

}
@media (min-width: 768px) {
    .contenedor-flipcards{
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1rem;

    }
    .flipcard-boton_bar{
        grid-row: 2/3;
        width: 80%;
    }
    .flipcard-boton_restaurante{
        width: 80%;
    }
    .flipcard-boton_eventos{
        grid-row: 4/5;
        width: 80%;
    }
    .flipcard-boton_experiencias{
        width: 80%;
    }

}
@media (min-width: 1024px) {
    .flipcards-bg{
        height: 64rem;
        align-items: center;
    }
    .contenedor-flipcards{
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
        gap: 2rem;
        z-index: 20;
    }
    .flipcard{
        max-width: 90%;
    }
    .flipcard-boton_bar{
        grid-column: 1/2;
        grid-row: 2/3;
    }
    .flipcard-boton_restaurante{
        grid-column: 2/3;
        grid-row: 2/3;
    }
    .flipcard-boton_eventos{
        grid-column: 3/4;
        grid-row: 2/3;
    }
    .caballo,.guitarra{
        opacity:1;
    }
}
/*Programación de Eventos*/
.programacion-eventos{
    background-color: color var(--blanco);
    font-size: 2.4rem;    
}
.programacion-eventos h2{
    font-family: var(--openSans);
    color: var(--rojo);
    text-align: center;
    margin: 5rem 0;
    text-shadow: .2rem .2rem var(--amarillo);
}

@media (min-width: 768px) {
    .programacion-eventos{
        height:64rem;
    }
    .programacion{
        display:flex;
        justify-content: space-around;
        align-items:center;
    }    
}

.programacion-grill{
    height: 50rem;
    max-width: 70rem;
    width:100%;
    color: var(--rojo);
    overflow: auto;
    font-family: var(--openSans);        
}
.programacion-grill::-webkit-scrollbar{
    width: 1.2rem;
            
}
.programacion-grill::-webkit-scrollbar-thumb{
    background-color: var(--rojo);
    border-radius: .5rem;
}
.hora,.artista{    
    margin: 1rem;
}

.artista,.show{
   font-size: 40px;
   text-transform: uppercase;
   font-weight: bold;
   margin: 1rem 3rem;
}
.artista-hover{
    transition: color .5s ease;
}
.artista-hover:hover{
    color: var(--amarillo);
}
.artista-hover:hover .fecha{
    color:var(--rojo);
}
.fecha{
    margin: 0 3rem;
    padding-bottom: 2rem;
    border-bottom: .1rem solid var(--rojo);
}

@media (min-width: 768px) {
    .programacion-artista{
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .fecha{
        border: none;
    }       
}

.poster-artista{
    text-align: center;
    margin: 1.5rem;
}
.poster-artista img{
    border: 1rem solid var(--amarillo);
}
/*Barra animada ---rumba*/

.barra-rumba{
    background-image: url(../img/Barra\ 2.png);
    height: 9rem;
    animation: slider 30s infinite linear reverse;
 }
 
 @keyframes slider{
     to{
        background-position: 386rem;
     }
 }
/*Instagram --- Feed*/
.ig-bg{
    background-image: url(../img/Fondo\ visual\ IG.png);
    height: 35rem;
    background-size: cover;   
}
.ig-feed{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
/*Footer*/
.footer{
    background-color: var(--rojo);
    color: var(--blanco);
    padding: 2rem;
}
.enlaces-footer{
    color: var(--blanco);
}
.menu-vertical{
    text-align: center;
    text-transform: uppercase;
    
}
.menu-horizontal{
    font-family: var(--openSans);
    font-size: 1.6rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    
    text-align: center;
}
.menu-bold{
    font-weight: bold;
}

.menu-politicas{
    grid-column: 3/4;
    grid-row:2/3;
}
.menu-divisor{
    color: var(--rojo);
}
.derechos{
    font-family: var(--openSans);
    font-size: 1.2rem;
    text-align: center;
    margin: 1.5rem 0 ;
}
@media (min-width: 768px) {
    .menu-footer{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    
    .menu-horizontal{
        text-align: left;
        margin-left: .5rem;        
    }
    
    .menu-horario,
    .menu-telefono,
    .menu-direccion{
        border-bottom: .3rem solid var(--amarillo);        
    }
    .menu-horario{
        margin-left: 2rem;
    }
    .menu-telefono p {
        margin-left: 2rem;
    }
    .menu-redes{
        grid-row: 2/3;
        grid-column: 2/3;
        display: flex;
        text-align: center;
        justify-content: center;
        margin: 2rem auto;
    }
    .menu-politicas{
        grid-row:3/4;
        margin-left: 3rem;        
    }
    .menu-terminos{
        grid-row: 3/4;
    }
    .menu-divisor{
        color: var(--amarillo);
        grid-column: 2/3;
        margin: 0 auto;
        font-weight:900;
    }
}
/*Eventos*/
.eventos-bg{
    background-color: var(--negro);
}
.banner-eventos img{
    display: block;
    width: 100%;
    height: 100%
}

.eventos-descripcion{
    height: 100%;
    background-color:var(--negro);    
    color: var(--blanco);    
}
.eventos-descripcion_top{
    text-align:center;
}
.eventos-descripcion_top h1{
    margin: 2rem;
}
.banderines{
    width: 100%;

} 
@media (min-width: 768px) {
    .banner-eventos{
        height: 90rem;          
    }
    
    .eventos-descripcion_top{
        display:flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
    }
}
.eventos-descripcion_texto{
    font-family: var(--openSans);
    font-size: 2rem;
    line-height: 1.5;
    
    
}
.eventos-descripcion_texto p{
     margin-right: 5rem;
     
  
}
@media (min-width: 768px) {
    .eventos-descripcion_texto{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;        
    }    
}
.eventos-descripcion_bottom{
    background-color: var(--negro);
    color: var(--blanco);
    display: flex;
}
@media (min-width: 768px) {
    .eventos-descripcion_bottom{
        height: 50rem;
    }
}
.evento-contacto{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    max-width: 80rem;
}
.evento-contacto p{
    background-color: var(--negro);
    margin: 0;
    color: var(--blanco);
    font-family: var(--openSans);
    font-size: 2rem;
    padding: 2rem;
    margin-top: 1rem;    
}
.evento-contacto a{
    background-color: var(--rojo);
    color: var(--blanco);
    font-size: 3.2rem;
    text-shadow: .2rem .2rem var(--amarillo);
    padding: 1.5rem 1rem;
    box-shadow: .2rem .2rem var(--amarillo);    
}
/*Servicios -- iconos*/
.servicios-bg{
    background-color: var(--blanco);
    display: flex;
    align-items: center;
    
}
.servicios-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
    font-family: var(--openSans);
    color: var(--rojo);
    font-size: 2rem;
    gap: 2rem;
    margin: 3rem auto;
}
.servicios-grid_texto{
    text-align: left;
}
@media (min-width: 768px) {
    .servicios-bg{
        height: 52.6rem;
    }
    .servicios-grid{
        grid-template-columns: repeat(4, 1fr);
        text-align:left;
    }
    .servicios-grid_icono{
        text-align:right;
        margin-right: 2rem;
    }    
}
/*Formulario*/
.formulario-bg{
    /* background-color: var(--azul); */
    background-image: url(../img/Fondo\ Cotiza\ tu\ evento.png);
    background-repeat: no-repeat;
    background-size: cover;
}
form{    
    margin: 0 auto;
}
.formulario fieldset{
    border: none;
    font-family: var(--openSans);
    font-size: 2rem;
}
.formulario legend{
    text-align: center;
    text-transform: uppercase;
    color: var(--amarillo);
    font-size: 3.2rem;
    padding: 8rem;
    font-family: var(--chimpo);

}
.formulario label{
    display: block;
    margin-bottom: 1rem;
}
.formulario label,
fieldset p, input, textarea, ::placeholder{
    color: var(--blanco);   
    
}
textarea{
    height: 5rem;
}
input, textarea{
    border-radius: 1rem;
    border-color: var(--blanco);
    border-style:ridge;
    background-color: #ec4e29;
    margin-bottom: 3rem;       
}
.wd-100{
    width:100%;
    height:5rem;
}
.bold{
    font-weight: bold;
}
.flex{
    display:flex;        
}
.flex label{
    margin-left: 1rem;
}
.boton-cotizacion input{
    width: min(64.4rem, 100%);
    text-transform: uppercase;
    padding: 1rem 1.5rem;
    background-color: #f3c129;
    font-family: var(--chimpo);
    font-size: 3.2rem;
    border: none;
}
@media (min-width: 768px) {
    .contenedor-campos{
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 15rem;
    }
    .margin-left{
        margin-left: 2rem;
    }
    .celular{
        grid-row: 2/3;
        grid-column: 1/2;
    }
    .tipo-evento{
        grid-column: 1/3;
        grid-row: 3/4;
        flex-direction: column;        
    }
    .tipo-evento_input{
        display: flex;
        
    }
    .numero-personas{
        grid-row: 4/5;        
        flex-direction: column;
    }
    .numero-personas_input,.fecha-evento_input{
        display: flex;
        width: min (20rem 70%);
    }
    .fecha-evento{
        flex-direction: column;
    }
         
    .descripcion-evento{
        grid-column: 2/3;
        grid-row: 2/5;        
    }
    .descripcion-evento textarea{
        height: 85%;
    }
    .tipo-evento{
        display: flex;
    }
    .boton-cotizacion{
        text-align: center;
        margin: 5rem auto 9.4rem;
    }
}
/***Reserva***/
.formulario-reserva label,
.formulario-reserva p,
::placeholder,
.formulario-reserva input,
.formulario-reserva textarea{
    color: var(--rojo);
    font-family: var(--openSans);
    background-color: var(--blanco);
    border-color: var(--rojo);    
}
.formulario-reserva legend{
    font-size: 3.2rem;
    text-transform: uppercase;
    font-family: var(--chimpo);
    color: var(--rojo);
}
.banner-reserva img{
   width: 100%;
}

.formulario-reserva_fieldset{
    margin-top: 8rem;
}
fieldset{
    border: none;
}
.personas-reserva_input{
    display: flex;        
}
.personas-reserva_input input{
    margin-left: 2rem;
}
.campo_sm{    
    width: 7rem;
    height: 5rem;
}
.margin_left{
    margin-left: 2rem;
}
.boton-reserva input{
    font-family: var(--chimpo);
    font-size: 3.2rem;
    color: var(--blanco);
    text-transform: uppercase;
    width: 100%;
    background-color: var(--rojo);
    border-radius: 0;
    border: none;
    padding: 1.5rem 1rem 1rem;
    box-shadow: .3rem .3rem var(--amarillo);
    
}
@media (min-width: 1044px) {
    .reservas-grid{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }    
    .nombre-reserva,.celular-reserva,.descripcion-reserva{
        width: 80%;
    }
    .formulario-reserva_fieldset{
        margin-top: 7rem;
    }
    .boton-reserva input{
        width: 80%;
    }
}
/**Bebidas**/
.bebidas-bg{
    background-color: var(--negro);
}
.menu-bebidas_bg{
    color: var(--blanco);
    font-family: var(--openSans);
    font-size: 1.6rem;
    
}
.top-bar_menu{
    /* height: 22.5rem; */
    display: flex;
    justify-content: center;
    background-color: var(--amarillo);
}
.top-bar_iconos{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
}

.imagen-tequila{
    width: 100%;
    margin-top: 3rem;
}
.nombre-bebida_a,.nombre-bebida_b{
    border-bottom: .1rem solid #ef4b29;
}
.nombre-bebida_a h2,
.nombre-bebida_b h2{
    font-family: var(--cheddar);
    font-weight: normal;
    color: #ef4b29;
    text-align: center;
    letter-spacing: .4rem;    
    margin: 2rem; 
}
.align-left{
    text-align: left;
}
.icono-bebidas,.icono-comidas{
    max-width: 90%;
    /* margin-bottom: 2rem;     */
}
@media (min-width: 768px) {
    .top-bar_iconos{
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 10rem;       
    }
    .icono-bebidas{
        max-width: 100%;
    }
    .icono-comidas{
        max-width: 90%;
    } 
}
@media (min-width: 1280px) {
    .top-bar_iconos{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .icono-comidas{
        width: 100%;        
    }
    .icono-bebidas{
        width: 30%;
    }
}
.bebidas-grid_a,.bebidas-grid_b{
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-height: auto;
    gap: .5rem;
}
.icono-botella{
    grid-column: 2/3;
}
.icono-shot,
.icono-botella,
.icono-bajitos{
    display: flex;
    justify-content: center;
    align-items:flex-end;
    /* margin-top: 1rem; */
}
.bebida-bold{
    text-transform: uppercase;
    font-weight: bold;            
}
.opacity{
    opacity: 0;
}
.cocteles{
    grid-column: 1/2;
}
.coctel-descripcion{
    grid-column: 1/3;
}
@media (min-width: 1280px) {
    .contenedor-menu_bebidas{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        height: auto;
        gap: 2rem;       
    }
    .bebidas-grid_a,.bebidas-grid_b{
        grid-template-columns:2fr 1fr 1fr 1fr;
        /* margin: 2rem; */
        width: min(40rem 50%);
    }
    
    .nombre-bebida_a,.nombre-bebida_b{
        grid-column: 1/4;
    }
    .gap-vino{
        grid-row: 14/22;
        height: 50rem;
    }
    .gap-coctel{
        height: 30rem;
    }
}
/*Comidas*/
.comidas-bg{
    background-color:#ec4e29;
}
.contenedor-menu_comidas{
    padding-top: 5rem;
}
.imagen-plato{
    position: relative;
}
.texto-img_comida{
    position: absolute;
    bottom: 0;
    background-color:var(--negro);
    opacity: .5;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
    color: var(--blanco);
    padding: 2rem;
}
.imagen-plato_texto{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
}
.comidas-grid_a,
.comidas-grid_b{
    display: grid;
    grid-template-columns: 3fr 1fr;
}
.nombre-comida_a,
.nombre-comida_b{
    grid-column: 1/3;
    border-bottom: .1rem solid var(--blanco);
}
.nombre-comida_a h2,
.nombre-comida_b h2{
    font-family: var(--cheddar);
    letter-spacing: .4rem;
    font-weight: normal;    
}