@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

    * {
        font-family: "Poppins", sans-serif;
        box-sizing: border-box;
        color: var(--blanco-jokerbet);
    }

    :root {
        --blanco-jokerbet: #ffffff;
        --gris-jokerbet: #eeeeee;
        --negro-jokerbet: #242424;
        --rojo-jokerbet: #da291c;
        --azul-jokerbet: #002d72;
        --hover-rojo-jokerbet: #b11d18;
        --hover-azul-jokerbet: #001b44;

        --h1-jokerbet: clamp(1.75rem, 3.5vw + 0.5rem, 3rem);
        --h2-jokerbet: clamp(1.375rem, 2.5vw + 0.5rem, 2.25rem);
        --h3-jokerbet: clamp(1.125rem, 2vw + 0.4rem, 1.75rem);
        --h4-jokerbet: clamp(1.5rem, 1.5vw + 0.35rem, 1.375rem);
        --p-jokerbet: clamp(0.9375rem, 1vw + 0.3rem, 1.125rem);
    }

    body {
        margin: 0;
    }

    .btn-registro {
        position: relative;
        overflow: hidden;
        background-color: var(--rojo-jokerbet);
        border-radius: 50px;
        border: 0;
        padding: 15px 60px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: clamp(1.15rem, 2.5vw + 0.5rem, 2.188rem);
        color: var(--blanco-jokerbet);
        font-weight: 700;
        font-style: italic;
        text-transform: none;
        justify-content: center;
        z-index: 100;
        line-height: 1;
        box-shadow: 0 7px 20px var(--hover-rojo-jokerbet);
    }

    .btn-registro:hover {
        background-color: var(--hover-rojo-jokerbet);
    }

    .btn-registro > *:not(.btn-flare) {
        position: relative;
        z-index: 2;
    }

    .btn-flare {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50px;
        overflow: hidden;
        pointer-events: none;
        z-index: 1;
    }

    .btn-an {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(112deg, transparent 20%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.8) 47%, rgba(255, 255, 255, 0.8) 53%, rgba(255, 255, 255, 0) 65%, transparent 80%);
        animation: btn-an 3s infinite linear;
    }

    @keyframes btn-an {
        0%,
        60% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(100%);
        }
    }

    .btn-registro img {
        width: 24px !important;
    }

    .p-encabezado {
        font-size: clamp(2.188rem, 3vw + 0.5rem, 2.5rem);
        font-weight: 700;
        line-height: 51px;
        margin: 10px 0;
    }

    .p-encabezado span {
        color: var(--rojo-jokerbet);
    }

    .p-subencabezado {
        font-size: clamp(1.25rem, calc(1.137rem + 0.563vw), 1.81rem);
        font-weight: 700;
        line-height: 34px;
        margin: 10px 0;
    }

    p {
        font-size: clamp(1rem, 2vw, 1.125rem);
        font-weight: 400;
        line-height: 24px;
        margin: 0;
    }
    
    /* HEADER */

    header {
        position: sticky;
        top: 0;
        z-index: 999;

        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 10px 80px;
        background: var(--blanco-jokerbet);
    }

    header a {
        line-height: 0;
    }

    header .logo-jokerbet {
        width: 250px;
    }

    .btn-registro-header {
        position: relative;
        background-color: var(--rojo-jokerbet);
        border-radius: 50px;
        border: 0;
        padding: 15px 60px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
        color: var(--blanco-jokerbet);
        font-weight: 700;
        font-style: italic;
        line-height: 1;
    }

    .btn-registro-header:hover {
        background-color: var(--hover-rojo-jokerbet);
    }

    @media (max-width: 1024px) {
        header {
            padding: 10px;
            gap: 10px;
        }

        .btn-registro-header {
            padding: 10px;
        }
    }

    @media (max-width: 600px) {
        header .logo-jokerbet {
            width: 150px;
        }
    }
    
    /* FOOTER */

    footer#importante {
        display: none;
    }

    footer {
        background: linear-gradient(180deg, rgba(0, 27, 68, 1) 0%, rgba(0, 45, 114, 1) 59%, rgba(218, 41, 28, 1) 100%);
        padding-top: 15px;
    }

    footer #marcas {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        padding-bottom: 40px;
    }

    footer #marcas p {
        color: white;
        font-size: 12px;
        line-height: 15px;
        margin-bottom: 0px;
    }

    footer #marcas p b {
        font-style: italic;
    }

    footer #marcas .lema {
        font-size: 16px;
        font-weight: bold;
        font-style: italic;
    }

    footer #marcas img {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    footer #descarga {
        background-color: #ffffff10;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        padding: 30px;
    }

    footer #descarga p {
        font-size: 16px;
        line-height: 15px;
        color: #fff;
    }

    footer #descarga .app {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    footer #descarga .app img {
        width: 155px;
        margin: 10px;
    }

    footer #descarga .redes {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    footer #descarga .redes a {
        margin-bottom: 0px;
    }

    footer #descarga .redes img {
        margin: 0px 5px;
        width: 23px;
    }

    footer #enlaces {
        padding: 30px 80px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    footer #enlaces div {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-flow: column;
    }

    footer #enlaces div a {
        color: #fff;
        font-size: 13px;
        line-height: 15px;
        text-decoration: none;
        margin-bottom: 15px;
    }

    footer #enlaces div span a,
    footer #enlaces div span {
        font-size: 18px;
        font-weight: bold;
        line-height: 32px;
        color: white;
    }

    footer #enlaces div hr {
        width: 68px;
        border-color: #da291c;
        border-width: 2px;
        margin: 15px 0;
    }

    footer #enlaces div img {
        width: 15px;
        margin-right: 5px;
    }

    footer #legales {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 40px 80px;
        background-color: #ffffff10;
        gap: 10px;
    }

    footer #legales a {
        margin-bottom: 0px;
    }

    footer #politicas {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #242424;
    }

    footer #politicas a {
        margin: 20px;
        color: white;
        font-size: 12px;
        line-height: 15px;
        text-decoration: none;
    }

    footer #metodos_pago {
        padding: 20px 80px;
    }

    footer #metodos_pago .titulo {
        text-align: center;
        margin-bottom: 25px;
        font-weight: 500;
    }

    footer #metodos_pago p {
        font-size: 0.8rem;
        line-height: 1;
        margin-bottom: 1rem;
    }

    footer #metodos_pago .titulo {
        font-size: 1.5rem;
    }

    footer #metodos_pago img {
        width: 100%;
        height: 100px;
    }

    @media (max-width: 1024px) {
        footer #legales {
            flex-wrap: wrap;
        }
    }

    @media (max-width: 650px) {
        footer #marcas {
            padding: 20px;
        }

        footer #marcas img {
            width: 100%;
        }

        footer #descarga {
            padding: 20px;
        }

        footer #marcas p {
            text-align: center;
        }

        footer #marcas .lema {
            font-size: 15px;
        }

        footer #descarga .app img {
            width: 130px;
        }

        footer #descarga .redes a {
            margin-bottom: 0px;
        }

        footer #enlaces {
            padding: 20px;
            flex-wrap: wrap;
        }

        footer #enlaces a {
            margin-bottom: 15px;
        }

        footer #enlaces div {
            width: 50%;
        }

        footer #metodos_pago {
            padding: 20px;
        }

        footer #metodos_pago .titulo {
            font-size: 1rem;
        }

        footer #metodos_pago .PagosSwiper {
            text-align: center;
        }

        footer #metodos_pago .PagosSwiper img {
            width: 100%;
            height: 150px;
        }

        footer #metodos_pago p {
            font-size: 10px;
            line-height: 15px;
        }

        footer #legales {
            padding: 20px;
            flex-wrap: wrap;
            gap: 0;
        }

        footer #legales a {
            margin: 10px;
        }

        footer #politicas {
            flex-wrap: wrap;
        }

        footer #politicas a {
            margin: 10px;
        }
    }
    
    /* VENTAJAS */

    #ventajas {
        background-color: var(--hover-azul-jokerbet);
        padding: 50px 80px;
    }

    #ventajas .container {
        display: flex;
        gap: clamp(2rem, 2.5vw + 0.5rem, 6.25rem);
        justify-content: center;
    }

    #ventajas .bloque-registro {
        border-radius: 29px;
        border: 2px solid var(--rojo-jokerbet);
        background: rgba(255, 255, 255, 0);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        padding: 20px 40px;
        position: relative;
        cursor: pointer;
    }

    #ventajas .bloque-ventaja {
        border-radius: 29px;
        background: #da291cb2;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        padding: 20px 40px;
        position: relative;
    }

    #ventajas .bloque-registro span {
        font-size: clamp(4rem, 2.5vw + 0.5rem, 9.375rem);
        color: var(--rojo-jokerbet);
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--blanco-jokerbet);
        font-weight: 900;
        text-shadow: 0px 0px 20px #a07f00;
        line-height: 0;
        position: absolute;
        left: -20px;
        top: 30%;
    }

    #ventajas .bloque-ventaja img {
        position: absolute;
        left: -20px;
        top: 30%;
    }

    @media (max-width: 1300px) {
        #ventajas {
            padding: 50px 20px 50px 30px;
        }

        #ventajas .container {
            flex-direction: column;
            align-items: center;
        }

        #ventajas .container img {
            width: 50px;
            transform: rotate(90deg);
        }

        #ventajas .bloque-ventaja img {
            width: auto;
            transform: rotate(0deg);
            top: 0;
            left: 0;
        }

        #ventajas .bloque-registro,
        #ventajas .bloque-ventaja {
            padding: 20px 30px;
            width: 100%;
        }

        #ventajas .bloque-ventaja .p-subencabezado {
            line-height: 1.6rem;
        }
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 25px;
        height: 25px;
        background: var(--rojo-jokerbet);
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0 !important;
        z-index: 10;
        padding: 5px;
        margin: 0 -2px;
    }

    .swiperVentajas,
    .swiperRegistro {
        position: relative;
        padding: 0 20px;
        height: auto !important;
    }

    .mySwiper {
        position: relative;
        padding: 0 50px;
    }

    @media (max-width: 1024px) {
        .swiperVentajas {
            padding: 0 30px;
        }

        .mySwiper {
            padding: 0;
        }

        .swiperRegistro {
            padding: 0 70px 0 30px;
        }

        .swiperRegistro .p-encabezado {
            font-size: 24px;
            line-height: 1;
        }

        .swiperRegistro p {
            font-size: 14px;
        }

        #ventajas {
            padding: 50px 0;
        }

        #ventajas .bloque-registro {
            padding: 0 20px 0 40px;
            height: 190px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }
    
    /* EVENTOS */

    #eventos {
        background: url(https://jokerbet.es/img/landings/nueva/fondo-futbol.webp) center center no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        padding: 50px 80px;
        gap: 20px;
    }

    #container7 img,
    #container7 svg,
    #container7 [class*="competitor"],
    #container7 [class*="team"],
    #container7 [class*="logo"],
    #container7 [class*="shirt"],
    #container7 [class*="kit"] {
        border: 2px solid #da291c !important;
        /* rojo Jokerbet */
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

    @media (max-width: 1024px) {
        #eventos {
            padding: 50px 20px;
        }
    }

    /* FUNCIONES */

    #funciones {
        padding: 50px 80px;
        background-image: url(https://www.jokerbet.es/img/nuevas-landings/bg-funciones-apuestas.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    #funciones .container {
        display: flex;
    }

    #funciones .container .col-2 {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #funciones .container .contenido {
        width: 70%;
        text-align: center;
    }

    #funciones .container .contenido .p-encabezado {
        font-size: clamp(3.13rem, calc(2.625rem + 2.5vw), 5.63rem);
        line-height: 1;
    }

    @media (max-width: 1500px) {
        #funciones .container .contenido {
            width: 100%;
        }
    }

    @media (max-width: 1024px) {
        #funciones {
            padding: 50px 20px;
        }

        #funciones .container {
            flex-direction: column-reverse;
            gap: 50px;
        }
    }

    /* PROMOCIONES */

    #promociones {
        background: linear-gradient(167deg, #000 -2.05%, #002d72 102.81%);
        padding: 50px 80px;
    }

    #promociones .container {
        text-align: center;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .mySwiper .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: rgba(255, 255, 255, 0.15);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 29px;
        flex-direction: column;
        cursor: pointer;
        height: auto;
    }

    .mySwiper .swiper-slide .contenido-promo {
        height: 100%;
        padding: 20px;
        padding-bottom: 30px;
    }

    .mySwiper .swiper-slide .contenido-promo span {
        font-size: 1.3rem;
        font-weight: 600;
    }

    .mySwiper .swiper-slide img {
        display: block;
        width: 100%;
        object-fit: contain;
        border-radius: 29px 29px 0 0;
    }

    @media (max-width: 1024px) {
        #promociones {
            padding: 50px 20px;
        }
    }

    /* SEO */

    #SEO {
        background: url(https://jokerbet.es/img/landings/nueva/fondo-apuestas.webp) no-repeat center center;
        background-size: cover;
        padding: 50px 80px;
    }

    #SEO h1 {
        text-align: center;
    }

    #SEO h2 {
        border-left: 6px solid var(--rojo-jokerbet);
        padding-left: 10px;
    }

    #SEO span {
        color: var(--rojo-jokerbet);
    }

    #SEO a {
        color: var(--rojo-jokerbet);
        text-decoration: underline;
    }

    #SEO a:hover {
        color: var(--hover-rojo-jokerbet);
    }

    @media (max-width: 1024px) {
        #SEO {
            padding: 50px 20px;
        }
    }

    /* LOCALES */

    #locales {
        background: url(https://www.jokerbet.es/img/nuevas-landings/bg-locales.webp) no-repeat center center;
        background-size: cover;
        padding: 50px 80px 0 80px;
    }

    #locales .p-encabezado {
        font-size: clamp(3.13rem, calc(2.875rem + 1.25vw), 4.38rem);
        line-height: 1;
    }

    #locales .container {
        display: flex;
    }

    #locales .col-2 {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    @media (max-width: 1500px) {
        #locales .container .contenido {
            width: 100%;
        }
    }

    @media (max-width: 1024px) {
        #locales {
            padding: 50px 20px 0 20px;
        }

        #locales .container {
            flex-direction: column;
            gap: 50px;
        }
    }

    /* TRUSTPILOT / OPINIONES */

    #trustpilot {
        padding: 50px 80px;
        background: var(--hover-azul-jokerbet);
        text-align: center;
    }

    #trustpilot p {
        margin-bottom: 50px;
    }

    @media (max-width: 1024px) {
        #trustpilot {
            padding: 50px 20px;
        }
    }

    #funciones img,
    #locales img {
        width: 100%;
        height: 100%;
    }