body, main, html {
    background-color: var(--gris-jokerbet);
}

div.container .breadcrumb {
    width: fit-content !important;
    margin: 0 !important;
    padding: 5px 25px !important;
    background: var(--blanco-jokerbet) !important;
    border-radius: 50px;
}

.breadcrumb {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 10px;
}

.breadcrumb>li {
    display: inline-block;
}

.breadcrumb li {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--negro-jokerbet);
}

.breadcrumb p {
    margin: 0;
    padding: 0;
    font-size: clamp(12px, 0.7143rem + 0.1786vw, 14px);
    font-weight: 700;
    color: var(--azul-jokerbet);
}

.breadcrumb>li+li:before, .breadcrumb li:last-child:before {
    content: "\276F" !important;
    color: var(--rojo-jokerbet);
    padding: 0;
}

.breadcrumb a {
    color: var(--azul-jokerbet);
    font-size: clamp(12px, 0.7143rem + 0.1786vw, 14px);
    text-decoration: none;
}

#pagina-main {
	margin-top: var(--header-h, 80px) !important;
}

#pagina-main h1 {
    font-size: var(--h1-jokerbet) !important;
    color: var(--azul-jokerbet);
    text-align: left;
}

#pagina-main h2 {
    font-size: var(--h2-jokerbet);
}

#pagina-main h3 {
    font-size: var(--h3-jokerbet);
    margin: 10px 0;
}

.swiper-button-lock {
    display: block;
    visibility: hidden;
}

body {
	margin: 0;
}

#pagina-main summary {
    margin: 0;
    color: var(--azul-jokerbet);
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: var(--p-jokerbet);
}

#pagina-main #faqs .faq-contenedor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#pagina-main #faqs details {
    border: 1px solid #242424;
    border-radius: 12px;
    padding: 10px;
}
            
#pagina-main #faqs summary::-webkit-details-marker { display: none; }
#pagina-main #faqs summary::marker { content: ""; }
                    
#pagina-main #faqs summary::after {
    content: "+";
    float: right;
    font-size: 0.8em;
    margin-left: 5px;
}

#pagina-main #faqs details[open] > summary {
    margin-bottom: 15px;
}

#pagina-main #faqs details[open] > summary::after {
    content: "\2212";
}

#pagina-main #filtro-casinos ul {
    list-style: none;
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 0;
}

#pagina-main #filtro-casinos li {
    cursor: pointer;
    font-size: var(--h4-jokerbet);
    font-weight: 300;
}

#pagina-main #filtro-casinos li.activo {
    font-weight: 700;
    border-bottom: 2px solid var(--blanco-jokerbet);
}

#pagina-main #filtro-casinos {
    background: var(--rojo-jokerbet);
    background: linear-gradient(180deg,var(--rojo-jokerbet) 0%, var(--hover-rojo-jokerbet) 100%);
    color: var(--blanco-jokerbet);
    padding: 15px 0;
    border-radius: 12px;
}

#pagina-main .bloque-ventajas {
    display: flex;
    gap: 10px;
    justify-content: center;
    color: var(--negro-jokerbet);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: ocultar barra */
}
#pagina-main .bloque-ventajas::-webkit-scrollbar {
    display: none; /* Chrome/Safari: ocultar barra */
}

#pagina-main .lobbys-juegos h2 {
    color: var(--azul-jokerbet);
    font-weight: 700;
    font-size: var(--h2-jokerbet) !important;
    margin: 0;
    padding: 10px 0;
}

#pagina-main #ventajas-casinos h2 {
    text-align: center;
    color: var(--azul-jokerbet);
    font-weight: 400;
    margin-bottom: 15px;
}

#pagina-main #ventajas-casinos h3 {
    text-align: center;
    color: var(--azul-jokerbet);
    font-size: var(--p-jokerbet);
    font-weight: 400;
}


#pagina-main #ventajas-casinos h2::after {
    content: "";
    border-bottom: 3px solid var(--rojo-jokerbet);
    width: 20%;
    display: block;
    margin: 0 auto;
    padding-top: 10px;
}

#pagina-main #ventajas-casinos .bloque-ventajas .col-bloque-ventajas {
    border: 1px solid #cacaca;
    border-radius: 12px;
    padding: 20px 10px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#pagina-main #ventajas-casinos .bloque-ventajas .col-bloque-ventajas img {
    height: 90px;
    padding: 10px;
    padding-bottom: 15px;
}

#pagina-main #ventajas-casinos .bloque-ventajas .col-bloque-ventajas h3 {
    margin: 0;
}


.lobbys-juegos {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.lobbys-juegos section {
    margin: 0;
    margin-top: -40px;
}

.lobbys-juegos h2 img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

#ventajas-casinos {
    padding: 50px 0;
}

@media (max-width: 768px) {
    #pagina-main {
        margin-top: 10px !important;
    }
    
    main {
        margin-top: 132px !important;
    }
    
    #pagina-main .bloque-ventajas {
        justify-content: flex-start;
        padding-bottom: 5px;
    }
    #pagina-main #ventajas-casinos .bloque-ventajas .col-bloque-ventajas {
        flex-basis: 42vw;
    }

    #pagina-main #ventajas-casinos .bloque-ventajas .col-bloque-ventajas img {
        height: 60px;
    }

    #pagina-main h2 {
        margin-bottom: 5px;
    }

    #ventajas-casinos {
        padding: 25px 0;
    }
}

@media (max-width: 390px) {
    #pagina-main #ventajas-casinos .bloque-ventajas .col-bloque-ventajas {
        flex-basis: 55vw;
    }
}

#buscador_Falso {
    padding: 10px 20px;
    border-radius: 50px;
    border: 2px solid #002d72;
    background: #fff;
    font-weight: 500;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--azul-jokerbet);
}

#buscador_False img {
    width:20px;
    height:20px;
}

#buscadorcontainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    align-items: center;
}

@media (max-width: 768px) {
    #buscador_Falso {
        width: 300px;
    }
}

.lobby-swiper .grid-image {
    border: none;
}

.lobbys-juegos h2 a {
    text-decoration: none;
}

#primero {
    background: var(--blanco-jokerbet);
    padding: 15px;
    border-radius: 15px;
}

.ribbon3 span{
    font-size: 14px !important;
}

.ribbon-top-right{
    top: 0px !important;
    right: 0px !important;
}

    @media (max-width: 768px) {
        main {
            margin-top: 135px !important;
        }
    }

    .lobby-nav a {
        height: auto;
    }
    
    .swiper-free-mode>.swiper-wrapper {
        margin: 0;
        gap: 5px;
    }