.gris {
    background-color: #ccc !important;
}
.rectangulo {
    height: 3.125rem;
    width: 7.5rem;
    border-top-left-radius: 9%;
    border-bottom-left-radius: 9%;
    margin: 0rem;
    background-color: #a4cc42;
}
.rectanguloblanco {
    height: 2.875rem;
    width: 1.563rem;
    background-color: white;
    border-top-left-radius: 10%;
    border-bottom-left-radius: 10%;
    margin: 0rem;
}
.circulo {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    background-color: #a4cc42;
}
.circuloblanco {
    height: 2.813rem;
    width: 2.813rem;
    background-color: white;
    border-radius: 50%;
}
.triangulo {
    width: 0;
    height: 0;
    border-top: 1.563rem solid transparent;
    border-left: 1.875rem solid #a4cc42;
    border-bottom: 1.563rem solid transparent;
    background-color: white;
    margin: 0rem;
}
.triangulogris {
    width: 0;
    height: 0;
    border-top: 1.563rem solid transparent;
    border-left: 1.875rem solid #ccc;
    border-bottom: 1.563rem solid transparent;
    background-color: white;
    margin: 0rem;
}
.numero {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.875rem;
} 
.texto {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 0.688rem;
}

.cuadrado {
    height: 3.125rem;
    width: 3.125rem;
    background-color: #a4cc42;
}

.lineagris {
    height: 0.6rem;
    width: 7rem;
    background-color: #ccc;
}

.posicionrectanguloblanco {
    left: 0.125rem;
    top: 0.125rem;
}

.posicioncirculoblanco {
    left: 0.25rem;
    top: 0.125rem;
}

.posicioncirculo {
    left: 0.375rem;
    top: 0.25rem;
}

.posicionnumero {
    left: 1.125rem;
    top: 0.563rem;
}

.posiciontriangulo {
    left: 7.5rem;
    top: 0rem;
}

.posiciontextodoble {
    left: 3.438rem;
    top: 0.8rem;
}

.posiciontexto {
    left: 3.438rem;
    top: 1.2rem;
}

.posiciontextopago {
    left: 4.3rem;
    top:1.2rem;
}

.posicionlineagris {
    left: 3.125rem;
    top: 1.4rem;
}

.separador1{
    margin-left: 10rem;
}
.separador2{
    margin-left: 20rem;
}
.separador3{
    margin-left: 30rem;
}
.separador4{
    margin-left: 40rem;
}
body .barra_pasos{
    padding-top: 0 !important;
    width:100%;
    position: fixed;
    top:122px;
    z-index: 2;
    display: flex;
    justify-content: center;
    pointer-events: none;    
    right:80px; 
}
.contenido-pasos{
    padding-top: 100px;
}
.barra_pasos .etiquetas{
    pointer-events: all;
}
.barra_navegacion[data-interfaz="pasos"] .contenedor_buscador .formulario_buscador{
    display:none;
}

@media (max-width: 600px) {
    .etiquetas {
        display: none;
    }
}
@media (min-width: 601px) {
    .cuadros {
        display: none;
    }
}

/* @media screen and (min-width:1560px){
    
    #barra {
        width: 40%;
    }

}

@media screen and (max-width:1560px){
    
    #barra {
        width: 50%;
    }
     

}
@media screen and (max-width:1400px){
    #barra {
        width: 60%;
    }

} */

@media screen and (max-width:1250px){
  
    #barra {
        width: 70%;
    }
  
}

@media screen and (max-width:1100px){
    #barra {
        width: 80%;
    }

}

@media screen and (max-width:900px){
    .texto {
        font-size: 0.55rem;
    }
    .rectangulo {
        width: 6.5rem;
    }
    .separador1{
        margin-left: 9rem;
    }
    .separador2{
        margin-left: 18rem;
    }
    .separador3{
        margin-left: 27rem;
    }
    .separador4{
        margin-left: 36rem;
    }
    .posiciontriangulo {
        left: 6.5rem;
    }
}
@media screen and (max-width:850px){
    #barra {
        width: 75%;
    }
    .texto {
        font-size: 0.5rem;
    }
    .rectangulo {
        width: 6rem;
    }
    .separador1{
        margin-left: 8rem;
    }
    .separador2{
        margin-left: 16rem;
    }
    .separador3{
        margin-left: 24rem;
    }
    .separador4{
        margin-left: 32rem;
    }
    .posiciontriangulo {
        left: 6rem;
    }
}

@media screen and (max-width:838px){
    .barra_pasos ~ .contenido-pasos{
        padding-top: 40px !important;
    }
}
    
    @media screen and (max-width:800px){
    #barra {
        width: 78%;
    }
    .texto {
        font-size: 0.5rem;
    }
    .rectangulo {
        width: 6rem;
    }
    .separador1{
        margin-left: 8rem;
    }
    .separador2{
        margin-left: 16rem;
    }
    .separador3{
        margin-left: 24rem;
    }
    .separador4{
        margin-left: 32rem;
    }
    .posiciontriangulo {
        left: 6rem;
    }
}
@media screen and (max-width:750px){
    #barra {
        width: 73%;
    }
    /* .texto {
        font-size: 0.4rem;
    }
    .rectangulo {
        width: 6rem;
    }
    .separador1{
        margin-left: 7rem;
}
    .separador2{
        margin-left: 15rem;
    }
    .separador3{
        margin-left: 23rem;
    }
    .separador4{
        margin-left: 31rem;
    }
    .posiciontriangulo {
        left: 5rem;
    } */
}
@media screen and (max-width:720px){
    #barra {
        width: 90%;
    }
    /*SE MUEVE MAS ARRIBA*/
    /* .texto {
        font-size: 0.5rem;
    }
    .rectangulo {
        width: 6rem;
    }
    .separador1{
        margin-left: 8rem;
    }
    .separador2{
        margin-left: 16rem;
    }
    .separador3{
        margin-left: 24rem;
    }
    .separador4{
        margin-left: 32rem;
    }
    .posiciontriangulo {
        left: 6rem;
    } */
    body .barra_pasos{
        display:block;
        width:90%;
        position: unset;
        /*padding-top:140px !important;*/
        margin: auto;
        padding:1rem 0 1rem 0;
        z-index: 1;        
    }
    .barra_pasos ~ .contenido-pasos{
        padding-top: 0 !important;
    }
}
@media screen and (max-width:690px){
    #barra {
        width: 90%;
    }
}
@media screen and (max-width:670px){
    #barra {
        width: 95%;
    }
}
@media screen and (max-width:640px){
    #barra {
        width: 100%;
    }
}
@media screen and (max-width:600px){
    #barra {
        width: 95%;
    }
}
@media screen and (max-width:580px){
    #barra {
        width: 98%;
    }
}
@media screen and (max-width:560px){
    #barra {
        width: 90%;
    }
    .posicionlineagris {
        left: 3.125rem;
        top: 1.4rem;
    }
    .lineagris {
        width: 5rem;
    }
    .separador1{
        margin-left: 7rem;
    }
    .separador2{
        margin-left: 14rem;
    }
    .separador3{
        margin-left: 21rem;
    }
    .separador4{
        margin-left: 28rem;
    }
}
@media screen and (max-width:520px){ 
    #barra {
        width: 95%;
    }
    
}
@media screen and (max-width:500px){
    #barra {
        width: 100%;
    }
}

@media screen and (max-width:480px){
    #barra {
        width: 90%;
    }
    .lineagris {
        width: 5rem;
    }
    .separador1{
        margin-left: 6rem;
    }
    .separador2{
        margin-left: 12rem;
    }
    .separador3{
        margin-left: 18rem;
    }
    .separador4{
        margin-left: 24rem;
    }
}
@media screen and (max-width:460px){
    #barra {
        width: 95%;
    }

}
@media screen and (max-width:440px){
    #barra {
        width: 100%;
    }
}
@media screen and (max-width:432px){
    #barra {
        width: 85%;
    }
    .lineagris {
        width: 5rem;
    }
    .separador1{
        margin-left: 5rem;
    }
    .separador2{
        margin-left: 10rem;
    }
    .separador3{
        margin-left: 15rem;
    }
    .separador4{
        margin-left: 20rem;
    }
}
@media screen and (max-width:400px){
    #barra {
        width: 95%;
    }
}
@media screen and (max-width:380px){
    #barra {
        width: 100%;
    }
}
@media screen and (max-width:365px){
    #barra {
        width: 90%;
    }
    .lineagris {
        width: 4.5rem;
    }
    .separador1{
        margin-left: 4.5rem;
    }
    .separador2{
        margin-left: 9rem;
    }
    .separador3{
        margin-left: 13.5rem;
    }
    .separador4{
        margin-left: 18rem;
    }
}
@media screen and (max-width:360px){
    #barra {
        width: 95%;
    }
}
@media screen and (max-width:350px){
    #barra {
        width: 90%;
    }
    .cuadrado {
        height: 2rem;
        width: 2rem;
    }
    .posicionnumero {
        left: 0.5rem;
        top: 0.1rem;
    }
    .posicionlineagris {
        left: 2rem;
        top: 0.7rem;
    }
    .lineagris {
        width: 2.5rem;
    }
}
@media screen and (max-width:340px){
    #barra {
        width: 95%;
    }
}
@media screen and (max-width:330px){
    #barra {
        width: 100%;
    }
}

@media screen and (max-width:320px){
    #barra {
        width: 90%;
    }
    .separador1{
        margin-left: 4rem;
    }
    .separador2{
        margin-left: 8rem;
    }
    .separador3{
        margin-left: 12rem;
    }
    .separador4{
        margin-left: 16rem;
    }
}

@media screen and (max-width:300px){
    #barra {
        width: 100%;
    }
}
/* cabecera */
.contenedor_reserva{
    position: absolute;
    right: 0;
    top: 90.5px;
    margin-right: 45px;
    cursor: pointer;    
}
.contenedor_switch_reserva{
    border-right: 0;
    gap: 6px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #635e26;
    width: 132px;
    height: 30px;
    border-radius: 100px;
    color: white;
}
.contenedor_switch_reserva span{
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: 17px;
}
.contenedor_switch_reserva > img{
    width: 15px;
    filter: brightness(0) invert(1);
}
.contenedor_switch_restaurant{
    display: none!important; 
}
@media screen and (max-width:580px){
    .contenedor_reserva{
        display: none;
    }
}
/* footer */
.franja-footer-reserva{
    width: 100%;
    background: #d4d7dc;
    display: none;
}
.franja-footer-reserva img{
    width: 18px;
}
.franja-footer-reserva span{
    font-size: 17px;
    font-family: 'Montserrat';
    font-weight: 500;
    color: #8c8c8c;
}
@media screen and (max-width:580px){
    .franja-footer-reserva{
        position: fixed;
        bottom: 0;
        display: flex;        
        justify-content: center;
        align-items: center;
        gap: 9px;        
        padding: 9px 0;
        cursor: pointer;
        z-index: 1;
    }    
    .franja-footer-tienda{
        width: 100%;
        background: #d4d7dc;
        display: none;
    }
    .franja-footer-tienda img{
        width: 18px;
    }
    .franja-footer-tienda span{
        font-size: 17px;
        font-family: 'Montserrat';
        font-weight: 500;
        color: #8c8c8c;
    }
    .franja-footer-tienda{
        position: fixed;
        bottom: 0;
        display: flex!important;        
        justify-content: center;
        align-items: center;
        gap: 9px;        
        padding: 9px 0;
        cursor: pointer;
        z-index: 1;
    } 
}