:root {
      --bg-white: #fff;
      --card-silver: #e3e3e3;
      --grey: #ccc;
      --dark-grey: #666;
      --header-blue: #0b419b;
      --border-light: rgba(0, 0, 0, 0.2);
    }

    /* --- ESTILOS GENERALES Y CONTENEDORES --- */
    /* .o-container:has(.widget-mundial) {
      max-width: 99rem;
      margin: 0 auto;
      padding: 0 !important;
    } */

    .widget-mundial,
    .widget-seleccion {
      width: 100%;
      max-width: 99rem;
      margin: 0 auto;
      position: relative;
      font-family: 'Roboto', sans-serif;
    }

    /* --- WIDGET 1: GRUPOS MUNDIAL --- */
    .widget-mundial-banderas {
      width: 100%;
      overflow: hidden;
      position: relative;
      border-radius: 0 0 0 4.2rem;
      padding-left: 1rem;
    }

    .grupos-grid {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      gap: 1rem;
      padding: 0 1rem 1rem 0;
      cursor: grab;
      user-select: none;
      scroll-behavior: smooth;
    }

    .grupos-grid::-webkit-scrollbar {
      display: none;
    }

    .drag-active {
      cursor: grabbing !important;
      scroll-behavior: auto !important;
    }

    .grupo-card {
      width: 15rem;
      flex: 0 0 auto;
      background: var(--card-silver);
      border-radius: .8rem;
      overflow: hidden;
      /* box-shadow: 0 .4rem .5rem rgba(0, 0, 0, 0.1); */
      border: .1rem solid var(--grey);
      border-bottom: .5rem solid var(--grey);
    }

    /* EL BLOQUE FIJO (Grupo H) */
    .grupo-fijo {
      position: sticky;
      left: 0;
      z-index: 1;
      border-bottom: .5rem solid var(--dark-grey);
      /* box-shadow: .5rem 0 1rem rgba(0, 0, 0, 0.3); */
    }

    .grupo-fijo .grupo-header {
      background: var(--dark-grey);
      color: var(--bg-white);
    }

    .grupo-header {
      padding: .5rem;
      text-align: center;
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--dark-grey);
      background-color: #fff;
      text-transform: uppercase;
    }

    .equipo-lista {
      display: flex;
      justify-content: center;
      padding: 0;
    }

    .equipo-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .3rem;
      width: 25%;
      padding: .5rem 0;
      text-decoration: none;
      color: #333;
      transition: background 0.3s;
    }

    .equipo-row.out {
      opacity: 0.4;
    }

    .equipo-row:hover {
      background: rgba(255, 255, 255, 0.6);
    }

    .equipo-row img {
      width: 2.2rem;
      height: 1.5rem;
      object-fit: cover;
      border-radius: .2rem;
      pointer-events: none;
    }

    .equipo-row span {
      font-size: 0.9rem;
      font-weight: bold;
    }

    /* --- WIDGET 2: SELECCIÓN JUGADORES --- */
    .widget-seleccion .jugadores {
      display: flex;
      gap: .5rem;
      list-style: none !important;
      padding: 1rem;
      margin: 0;
      overflow-x: auto;
      /* background-color: #fafafa; */
      border-radius: .5rem;
      cursor: grab;
    }

    .widget-seleccion .jugadores::-webkit-scrollbar {
      height: .6rem;
    }

    .widget-seleccion .jugadores::-webkit-scrollbar-thumb {
      background: #bbb;
      border-radius: 1rem;
    }

    .widget-seleccion .jugadores li {
      flex: 0 0 8rem;
      text-align: center;
      position: relative;
    }

    .widget-seleccion .jugadores li a {
      color: #000;
    }

    .widget-seleccion .jugadores li a img {
      border: .1rem solid red;
      opacity: 85%;
    }

    .widget-seleccion .jugadores li a:hover {
      color: #b22727;
    }

    .widget-seleccion .jugadores li a:hover img {
      opacity: 100%;
      border: .1rem solid #000;
    }

    .widget-seleccion .jugadores img {
      margin: 0 0 .3rem;
      width: 6rem;
      height: auto;
      border-radius: 50%;
    }

    .widget-seleccion .jugadores .portero img {
      background: #36656B;
      border-color: #36656B;
    }

    .widget-seleccion .jugadores .defensa img {
      background: #75B06F;
      border-color: #75B06F;
    }

    .widget-seleccion .jugadores .centrocampista img {
      background: #DAD887;
      border-color: #DAD887;
    }

    .widget-seleccion .jugadores .delantero img {
      background: #F0F8A4;
      border-color: #F0F8A4;
    }

    .widget-seleccion .jugadores li .equipo {
      position: absolute;
      content: '';
      top: 4rem;
      left: 5rem;
      width: 2.5rem;
      height: 2.5rem;
      background: url(https://dkumiip2e9ary.cloudfront.net/xalok/20-minutos/mundial-2026/equipos-ok.png) no-repeat 0 0;
      background-size: 3rem;
    }

    .widget-seleccion .jugadores li.madrid .equipo {
      background-position: 0 -90px;
    }

    .widget-seleccion .jugadores li.betis .equipo {
      background-position: 0 -30px;
    }

    .widget-seleccion .jugadores li.atletico .equipo {
      background-position: 0 -300px;
    }

    .widget-seleccion .jugadores li.athletic .equipo {
      background-position: 0 -390px;
      width: 2.8rem;
    }

    .widget-seleccion .jugadores li.city .equipo {
      background-position: 0 -270px;
    }

    .widget-seleccion .jugadores li.real-sociedad .equipo {
      background-position: 0 -150px;
    }

    .widget-seleccion .jugadores li.barcelona .equipo {
      background-position: 0 -240px;
    }

    .widget-seleccion .jugadores li.valencia .equipo {
      background-position: 0 -120px;
    }

    .widget-seleccion .jugadores li.arsenal .equipo {
      background-position: 0 -360px;
    }

    .widget-seleccion .jugadores li.leverkusen .equipo {
      background-position: 0 -208px;
    }

    .widget-seleccion .jugadores li.psg .equipo {
      background-position: 0 -180px;
    }

    .widget-seleccion .jugadores li.aston-villa .equipo {
      background-position: 0 -330px;
    }

    .widget-seleccion .jugadores li.girona .equipo {
      background-position: 0 -60px;
    }

    .widget-seleccion .jugadores li.osasuna .equipo {
      background-position: 0 -420px;
    }

    .widget-seleccion .jugadores li.tottenham .equipo {
      background-position: 5px -450px;
    }

    .widget-seleccion .jugadores li.alnassr .equipo {
      background-position: 5px -480px;
    }

    .widget-seleccion .jugadores li.leipzig .equipo {
      background-position: 0 -505px;
      width: 3rem;
    }

    .widget-seleccion .jugadores li.chelsea .equipo {
      background-position: 0 -532px;
    }

    .widget-seleccion .jugadores li.villarreal .equipo {
      background-position: 0 -562px;
    }

    .widget-seleccion .jugadores li.celta .equipo {
      background-position: 5px -590px;
    }

    .widget-seleccion .jugadores li.crystal-palace .equipo {
      background-position: 0 -620px;
    }

    .widget-seleccion .jugadores .nombre {
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      font-size: 1.5rem !important;
      line-height: 1.2 !important;
      font-weight: 600 !important;
      text-transform: none !important;
      color: #000 !important;
    }

    .widget-seleccion .jugadores .posicion {
      margin: 0;
      font-family: "Roboto-Regular", sans-serif;
      font-size: 1.2rem;
    }

    .widget-seleccion .jugadores::-webkit-scrollbar {
      display: none;
    }

    /* --- MENÚ MUNDIAL --- */
    .widget-mundial-menu {
      position: absolute;
      top: .5rem;
      right: 0;
      width: calc(100% - 17rem);
      overflow-x: auto;
      scrollbar-width: none;
    }

    .menu-lista {
      display: flex;
      list-style: none;
      gap: 0.5rem;
      padding: 0 1rem 0 0;
    }

    .menu-lista li {
      min-width: fit-content;
    }

    .menu-lista a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.3rem 0.8rem;
      cursor: pointer;
      color: black;
      font-weight: 500;
      font-family: Roboto, sans-serif;
      font-size: 1.1rem;
      text-transform: uppercase;
      border-radius: 0.5rem;
      border: 0.1rem solid #ccc;
      transition: all 0.2s;
    }

    .menu-lista a:hover {
      background-color: var(--card-silver);
    }



    .widget-mundial {
      position: relative;
    }
    /* .widget-mundial-banderas,
    .widget-seleccion {
      position: relative;
    } */

    .slider-helper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s ease;
      display: none;
    }

    .slider-helper.show-hint {
      display: block;
      opacity: 1;
    }

    .hint-content {
      background: rgba(255, 255, 255, 0.9);
      color: var(--dark-grey);
      padding: 0.8rem 1.2rem;
      border-radius: 2rem;
      display: flex;
      align-items: center;
      gap: .8rem;
      white-space: nowrap;
      /* border: .2rem solid var(--dark-grey); */
      box-shadow: .5rem 0 1rem rgba(0, 0, 0, 0.3);
      font-size: 1.2rem;
    }

    .hand-icon-svg {
      width: 2rem;
      height: 2rem;
      animation: swipeAnimation 1.8s infinite ease-in-out;
    }

    @keyframes swipeAnimation {
      0% {
        transform: translateX(-8px) rotate(-5deg);
      }
      50% {
        transform: translateX(8px) rotate(5deg);
      }
      100% {
        transform: translateX(-8px) rotate(-5deg);
      }
    }

    @keyframes swipeHint {

      0%,
      100% {
        transform: translateX(-5px);
      }

      50% {
        transform: translateX(5px);
      }
    }



    @media only screen and (min-width: 600px) {
      .menu-lista {
        justify-content: flex-end;
      }
      .slider-helper .hint-content {
        display: none;
      }
    }

    @media (min-width: 769px) {
      .grupos-grid {
        padding: 0 0 1rem 0;
      }

      .grupo-card {
        width: 17.5rem;
      }

      .equipo-row img {
        width: 2.8rem;
        height: 1.8rem;
      }

      .widget-seleccion .jugadores img {
        width: 5.5rem;
      }

      .widget-seleccion .jugadores li .equipo {
        top: 3.5rem;
      }

      .widget-seleccion .jugadores .nombre {
        font-size: 1.3rem !important;
      }

      .widget-seleccion .jugadores::-webkit-scrollbar {
        display: block;
      }
    }