@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;
 }

 :root {
     --blanco-jokerbet: #ffffff;
     --gris-jokerbet: #eeeeee;
     --negro-jokerbet: #242424;
     --rojo-jokerbet: #da291c;
     --amarilli-jokerbet: #ffc400;
     --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;
 }

 /* GENERAL */

 .container {
     padding: 10px 80px;
 }
 
 div.container {
    width: 100% !important;
    padding: 25px 80px !important;
 }

 section,
 #dedicated {
     margin: 0 !important;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     color: unset !important;
 }
 
 h1 {
     color: var(--azul-jokerbet) !important;
 }
 
 h2 {
    color: var(--rojo-jokerbet) !important;
    margin: 10px 0;
 }
 
 #timer h2 {
     color: var(--blanco-jokerbet) !important;
 }

 details {
     border: 1px solid #ddd;
     border-radius: 5px;
     margin-bottom: 10px;
     padding: 15px 20px;
     font-family: sans-serif;
 }

 details:open {
     background: var(--blanco-jokerbet)
 }


 summary {
     font-weight: bold;
     cursor: pointer;
     outline: none;
     list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: var(--azul-jokerbet);
 }

 summary::after {
     content: '+';
     font-size: 1.5rem;
     font-weight: normal;
 }

 details[open] summary::after {
     content: '-';
 }

 summary::-webkit-details-marker {
     display: none;
 }

 details[open] summary~* {
     animation: fadeInDown 0.3s ease-in-out;
 }
 
  details[open] summary {
    margin-bottom: 15px;
 }
 
 .breadcrumb>li {
    gap: 5px;
    display: inline-flex;
}



#pictureE1 a {
    width: 100% !important;
}

#pictureE1 img {
    width: 100% !important;
}

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .botonInformacion {
     padding: 9px 48px;
     border-radius: 6px;
     font-size: 16px;
     font-weight: 600;
     line-height: 19px;
     color: #fff;
     background-color: var(--rojo-jokerbet);
     text-decoration: none !important;
 }

 .botonInformacion:hover {
     background-color: var(--hover-rojo-jokerbet) !important;
     color: var(--blanco-jokerbet) !important;
 }

 .parrafo-info {
     font-size: var(--h4-jokerbet);
     color: var(--gris-jokerbet);
     font-weight: bold;
     margin-top: 15px;
 }
 
 table {
    border: 0;
}

 @media (max-width: 1024px) {
     .container {
         padding: 50px 20px;
     }
     
    div.container {
        width: 100% !important;
        padding: 25px 20px !important;
    }
 }

 /* CABECERA */

#cabecera div.container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#cabevera img {
    width: 100%;
}


 .cabecera-content {
     max-width: 650px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }

 .logo-cabecera {
     height: 20px;
     margin-bottom: 20px;
 }

 #cabecera h1 {
     font-size: clamp(3rem, 6vw, 5rem);
     line-height: 1;
     margin: 0;
     font-style: italic;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: -1px;
 }

 #cabecera h1 span {
     background: var(--blanco-jokerbet);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .subtitulo-cabecera {
     color: var(--amarilli-jokerbet);
     font-size: 1.5rem;
     font-weight: bold;
     margin: 5px 0 20px 0;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .fecha-pill {
     border: 1px solid var(--amarilli-jokerbet);
     color: var(--amarilli-jokerbet);
     padding: 5px 20px;
     border-radius: 20px;
     font-weight: bold;
     font-size: 0.9rem;
     text-transform: uppercase;
 }

 .gran-premio {
     font-size: 4rem;
     font-weight: bold;
     color: var(--amarilli-jokerbet);
     line-height: 1;
     margin: 20px 0;
     text-transform: uppercase;
 }

 .gran-premio span {
     font-size: 1.5rem;
     color: #fff;
     display: block;
     margin-top: 5px;
     letter-spacing: 1px;
 }

 .reparto-premios {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-bottom: 40px;
 }

 .rep-item {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .rep-text {
     line-height: 1.2;
 }

 .rep-val {
     font-size: 1.2rem;
     font-weight: bold;
     color: var(--amarilli-jokerbet);
 }

 .rep-label {
     font-size: 0.8rem;
     text-transform: uppercase;
 }

 .boton-cabecera {
     font-size: 1.1rem;
     text-transform: uppercase;
     padding: 15px 40px;
 }

 @media (max-width: 1024px) {
     .cabecera-content {
         align-items: center;
         text-align: center;
     }

     .reparto-premios {
         flex-wrap: wrap;
         justify-content: center;
     }
 }

 /* PARTICIPAR */

 #participar .pasos-participar {
     display: flex;
     gap: 10px;
 }

 #participar .pasos-participar .paso {
    background: var(--gris-jokerbet);
    border-radius: 8px;
    border: 1px solid #f4f4f4;
    padding: 20px 30px;
    width: 33%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 }
 
  #participar .pasos-participar .paso img {
    height: 35px;
    filter: brightness(0) saturate(100%) invert(25%) sepia(100%) saturate(1829%) hue-rotate(346deg) brightness(85%) contrast(103%);
 }

  #participar .pasos-participar .paso .img-title {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
 }

 #participar .pasos-participar .paso p {
     margin: 0;
 }

 #participar .pasos-participar .paso .img-title {
     font-weight: bold;
 }

 @media (max-width: 1024px) {
     #participar .pasos-participar {
         flex-direction: column;
     }
     
      #participar .pasos-participar .paso {
        width: 100%;
     }
 }

/*RANKING*/

#ranking div.container {
    padding-top: 0 !important;
}

#ranking .idranking {
    font-weight: bold;
}

 /* REGLAS */

 #reglas {
     background: #f4f4f4;
 }

 #reglas h2 {
     margin: 0;
     margin-bottom: 10px;
 }
 
 #reglas .bonosDIV {
    padding: 10px;
}

 #reglas .tablapromo {
    border: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

@media (max-width: 500px) { 
#reglas .bonosDIV {
    display: flex;
    flex-direction: column;
}

#reglas .tablapromo div div:nth-child(odd) {
    width: 100%;
    padding: 0;
    margin-bottom: 5px;
}

#reglas .tablapromo div div:nth-child(even){
    width: 100%;
    padding: 0;
}
}

 /* TIMER */

 #timer {
     background-image: linear-gradient(to bottom, var(--azul-jokerbet), var(--hover-azul-jokerbet)), url("https://www.jokerbet.es/img/nuevas-landings/copa/bg-timer.webp");
     background-blend-mode: overlay;
     background-size: cover;
     background-position: center;
     display: flex;
     justify-content: center;
     color: var(--blanco-jokerbet);
     text-align: center;
 }

 #timer h2 {
     font-size: var(--h1-jokerbet);
     margin: 0;
     text-transform: uppercase;
 }

 #timer .countdown {
     display: flex;
     gap: 20px;
     font-size: var(--h2-jokerbet);
     font-weight: bold;
     text-align: center;
     justify-content: center;
         margin: 25px 0;
 }

 #timer .countdown div {
     margin: 0;
     padding: 20px;
     background: #242424b0;
     border-radius: 12px;
     border: 2px solid #eeeeee20;
     width: 100px;
     height: 100px;
 }

 #timer .countdown div p:first-child {
     font-size: 3rem;
     color: var(--amarilli-jokerbet);
     font-weight: bold;
     margin: 0;
 }

 #timer .countdown div p {
     font-size: 1rem;
     line-height: 1;
     color: var(--blanco-jokerbet);
     font-weight: normal;
     margin: 0;
     text-transform: uppercase;

 }


 @media (max-width: 500px) {
    #timer .countdown {
        gap: 5px;
    }
    
    #timer .countdown div {
        width: 100%;
        padding: 5px;
        height: auto;
    }
 }
 
 /* CONTENIDOS */
 
 #contenidos h2 {
     color: var(--rojo-jokerbet) !important;
 }
 
 #contenidos div.container {
    padding-bottom: 0 !important;
 }

 /* PREMIOS */

 .premios-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 40px;
     justify-content: center;
     align-items: center;
 }

 /* Estructura Podio */
 .podio {
     display: flex;
     align-items: flex-end;
     gap: 15px;
     flex: 1;
     min-width: 300px;
     justify-content: center;
 }

 .puesto {
     border-radius: 8px;
     padding: 20px 10px;
     text-align: center;
     color: var(--negro-jokerbet);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .puesto span {
     margin: 0 0 10px 0;
     font-size: 1.5rem;
     line-height: 1.2;
     font-weight: bold;
 }

 .puesto span span {
     font-size: 1rem;
 }

 .puesto p {
     margin: 10px 0 0 0;
     font-size: 0.9rem;
     line-height: 1.3;
 }

 /* Colores Podio */
 .puesto-1 {
     background: linear-gradient(to bottom, #ffe898, #dfa318);
     padding-top: 40px;
     /* Para hacerlo más alto */
     margin-bottom: 20px;
 }

 .puesto-2 {
     background: linear-gradient(to bottom, #ffffff, #b4b4b4);
 }

 .puesto-3 {
     background: linear-gradient(to bottom, #fde4d3, #d2946c);
 }

 /* Estructura Lista Derecha */
 .lista-premios {
     display: flex;
     flex-direction: column;
     gap: 15px;
     flex: 1;
     min-width: 300px;
 }

 .premio-card {
     background: #fff;
     border: 1px solid #eee;
     border-radius: 8px;
     padding: 15px 20px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 }

 .premio-card span {
     margin: 0 0 10px 0;
     font-size: 1rem;
     color: var(--negro-jokerbet);
     line-height: normal;
         font-weight: bold;
 }

 .card-content {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .card-content p {
     margin: 0;
     font-size: 0.9rem;
     line-height: 1.3;
 }

 /* BOTE TOTAL */
 .bote-banner {
     background: var(--hover-azul-jokerbet);
     border-radius: 8px;
     padding: 20px 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: var(--blanco-jokerbet);
     margin-top: 50px;
     /* Separación del bloque de premios anterior */
 }

 .bote-left {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .bote-header {
     font-size: 1.2rem;
     font-weight: bold;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 25px;
 }

 .bote-items {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 30px;
     width: 100%;
 }

 .bote-item {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .bote-img img, .img-small img, .premio-img img {
    height: 40px;
    object-fit: contain;
 }

 .bote-text {
     text-align: left;
     line-height: 1.2;
 }

 .bote-text .bote-val {
     font-size: 1.8rem;
     font-weight: bold;
     color: var(--amarilli-jokerbet);
 }

 .bote-text .bote-label {
     font-size: 0.9rem;
     font-weight: bold;
     text-transform: uppercase;
 }

 .linea-vertical {
     width: 1px;
     height: 50px;
     background-color: rgba(255, 255, 255, 0.3);
 }

 .right-sep {
     height: 80px;
     margin: 0 40px;
 }
 
  .bote-right .bote-img {
     margin-right: 15px;
     filter: brightness(0) saturate(100%) invert(98%) sepia(0%) saturate(7490%) hue-rotate(72deg) brightness(107%) contrast(100%);
 }

 .bote-right {
     display: flex;
     align-items: center;
     justify-content: center;
     padding-right: 20px;
 }

 .bote-right .bote-label {
     font-size: 0.9rem;
     font-weight: bold;
     margin-bottom: 5px;
 }

 .bote-val-yellow {
     font-size: 3rem;
     font-weight: bold;
     color: var(--amarilli-jokerbet);
     line-height: 1;
 }
 
 #lobby-list .grid {
    margin-bottom: 0;
 }
 
 @media (max-width: 1024px) {
     .bote-banner {
         flex-direction: column;
         gap: 20px;
         text-align: center;
         margin-top: 20px;
     }

     .bote-items {
         flex-direction: column;
         gap: 20px;
     }

     .linea-vertical {
         width: 80%;
         height: 1px;
     }

     .right-sep {
         width: 100%;
         height: 1px;
         margin: 10px 0;
     }
     
     .bote-left {
        width: 100%;
    }
 }
 
  @media (max-width: 500px) {
    .bote-items {
        gap: 10px;
    }
    
    .bote-val-yellow {
        font-size: 2rem;
    }
    
    .podio {
        flex-direction: column;
    }
    
    .puesto {
        width: 100%;
    }
    
    .puesto-1 {
        order: 1;
    }
    
    .puesto-2 {
        order: 2;
    }
    
    .puesto-3 {
        order: 3;
    }
    
    .botonInformacion {
        padding: 10px;
    }
    
    .puesto-1, .puesto-2, .puesto-3 {
        padding: 10px;
        margin-bottom: 0;
        flex-direction: row;
        gap: 20px;
    }
    
    .puesto span {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 100%;
    }
    
    .puesto span span {
        margin: 0;
    }
    
    .puesto p {
        margin: 0;
    }
 }
 
 blockquote {
    margin: 10px 0;
    line-height: 1;
 }
 
 blockquote p {
    line-height: 1;
 }
 
   @media (max-width: 500px) { 
    blockquote p {
        font-size: 13px;
     }
     
      blockquote {
        font-size: 13px;
     }
     
    .premios-grid {
        gap: 15px;
    }
    
    #reglas table tbody tr td::before {
        content: none;
    }
    
    #participar .container:last-child h2 {
        margin:0 !important;
    }
   }