/* tournament */
.tournaments-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 10vw;
}

.tournaments-container a {
    width: calc(50% - 5vw);
    box-sizing: border-box;
    text-align: center;
}

.tournaments-container a .item {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 5vw;
    background-color: #f0f0f0;
    border: 0;

}

.winners {
    position: absolute;
    width: 100%;
    height: 135vw;
    left: 0;
    overflow: hidden;
    margin-top: 10vw;
}

.winnersAir {
    margin-top: 15vw;
    height: 125vw;
}

.winnerBall {
    z-index: 1;
    position: absolute;
    top: 52.5vw;
    left: calc(50% - 10vw);
    width: 22.5vw;
    height: 22.5vw;
    filter: drop-shadow(0 0 2.5vw var(--padelYellow));
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.winners .circle {
    position: absolute;
    top: 0;
    width: 120vw;
    height: 120vw;
    margin-top: 5vw;
    background-color: #1C2072;
}

.border-circle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130vw;
    height: 130vw;
    border-radius: 50%;
    border: 0.5vw dotted var(--padelYellow);
    animation: orbit 100s linear infinite;
}

@keyframes orbit {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

.winners .circle .container {
    position: absolute;
    width: 80%;
}

.winners .circle .container .tittle {
    font-size: 7.5vw;
}

.winners .circle .container .players {
    z-index: 2;
    width: 90%;
    margin-top: 5vw;
}

/* .winners .circle .container .players .player{
    overflow: hidden;
} */

.winners .circle .container .players .player .pic {
    width: 35vw;
    height: 35vw;
    background-size: 100%;
    border: solid 1vw var(--padelYellow);
}

.winners .circle .container .players .player .name {
    font-size: 5vw;
    font-weight: bold;
    text-align: center;
    margin-top: 2.5vw;
    text-decoration: none;
    color: var(--white);
}

.first-row {
    white-space: nowrap;
}

.last-row {
    display: block;
}

.winners .circle .container .stats {
    width: 80%;
    margin-top: 7.5vw;
}

.winners .circle .container .stats .item {
    padding: 2vw 1.5vw;
    border: solid 0.25vw var(--white);
    border-radius: 1vw;
}

.winners .circle .container .stats .value {
    font-size: 7.5vw;
    text-align: center;
    font-weight: bold;
}

.winners .circle .container .stats .name {
    font-size: 2.5vw;
    text-align: center;
}

.playOffs {
    width: 100%;
    margin-top: 7.5vw;
}

.playOffs .tittle {
    text-align: center;
    font-size: 5vw;
    color: var(--white);
    font-weight: bold;
}

/* game */
.gameCard {
    position: relative;
    width: 100%;
    padding: 4vw 3.5vw;
    box-sizing: border-box;
    margin-top: 5vw;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 5vw;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(10px);
}

.gameCardHead {
    width: 100%;
    color: blue;
}

.gameCard .gameCardHead .padelBall {
    width: 12.5vw;
    height: 12.5vw;
    margin-right: 2vw;
    filter: drop-shadow(0 0 1vw var(--padelYellow));
}

.gameCard .gameCardHead .info {
    font-weight: bold;
}

.gameCard .gameCardHead .info .date {
    font-size: 5vw;
    color: var(--white);
}

.gameCard .gameCardHead .info .name {
    font-size: 3.5vw;
    color: var(--padelYellow);
}

.gameCardBody {
    margin-top: 1.5vw;
}

.gameCardBody .players .team .pics .pic {
    width: 12vw;
    height: 12vw;
    margin: 0.5vw;
    border: solid 0.5vw var(--white);
}

.gameCardBody .players .team .pics .winner {
    border: solid 0.5vw var(--padelYellow);
}

.gameCardBody .players .team .names .name {
    font-size: 3.5vw;
    font-weight: bold;
    color: var(--white);
}

.gameCardBody .players .team .names .winner {
    color: var(--padelYellow);
}

.gameCardBody .sets {
    font-size: 6vw;
    font-weight: bold;
    color: var(--white);
}

.gameCardBody .sets .winner {
    color: var(--padelYellow);
}

/* standings */
.groups {
    width: 100%;
    margin-top: 7.5vw;
}

.groups .tittle {
    text-align: center;
    font-size: 5vw;
    color: var(--white);
    font-weight: bold;
}

.groups .group {
    width: 100%;
    text-align: center;
    font-size: 5vw;
    color: var(--white);
    font-weight: bold;
    margin-top: 5vw;
}

.groups .gameBtn {
    width: 100%;
    text-align:center;
    font-size: 5vw;
    font-weight: bold;
    margin-top: 2.5vw;
    background-size: 30%;
    transition: all 0.5s ease-in-out;
}

.groups .gamesContainer {
    width: 100%;
}

.stdTable {
    width: max-content;
    color: var(--white);
    border-collapse: collapse;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(10px);
    margin-top: 2.5vw;
}

.stdTable th {
    text-align: left;
    font-weight: bold;
    font-size: 3.5vw;
}

.stdTable tbody tr {
    border-top: solid 0.25vw rgba(255, 255, 255, 0.25);
    border-bottom: solid 0.25vw rgba(255, 255, 255, 0.25);
}

.stdTable td {
    font-size: 4vw;
    font-weight: bold;
    text-align: center;
    border-left: solid 0.25vw rgba(255, 255, 255, 0.25);
    padding: 0 2vw;
}

.stdTable td:first-child {
    font-size: 7.5vw;
    color: var(--padelYellow);
    border-left: none;
}

.stdTable td:nth-child(2) {
    border-left: none;
}

.stdTable th {
    text-align: center;
    border-left: solid 0.25vw rgba(255, 255, 255, 0.25);
}

.stdTable th:first-child {
    color: var(--padelYellow);
    border-left: none;
}

.stdTable th:nth-child(2) {
    border-left: none;
}

.stdTable td .pic {
    width: 10vw;
    height: 10vw;
    margin-top: 2vw;
    border: solid 0.5vw var(--padelYellow);
}

/* .stdTable td .name {
    
} */

/* ads */
.carruselImg {
    width: 100%;
    height: 25vw;
    border-radius: 5vw;
    margin-top: 15vw;
    overflow: hidden;
}

.carruselImg-track {
    display: flex;
    width: max-content;
    height: 100%;
    animation: scroll 55s linear infinite;
}

.carruselImg img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

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

/* gallery */
.gallery {
    position: relative;
    perspective: 100px;
}

.gallery__viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 1rem 0;
}

.gallery__slide {
    flex: 0 0 100%;
    position: relative;
    text-align: center;
    scroll-snap-align: center;
}

.gallery__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.gallery__snapper {
    display: none;
    /* Opcional, si no se utiliza */
}

.gallery__navigation {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.gallery__navigation-list {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.gallery__navigation-button {
    width: 1rem;
    height: 1rem;
    background-color: #333;
    border: 0.25rem solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gallery__navigation-button:hover {
    transform: scale(1.2);
}