/* =======================
   INDEX: COMPETICIONES + PAÍSES
   VERSIÓN CONSOLIDADA
======================= */


/* =======================
/* =======================
   COMPETICIONES PRINCIPALES
   CARRUSEL PREMIUM V4
======================= */


/* CONTENEDOR PRINCIPAL */

.principales-bar{

  position:relative;

  display:flex;

  align-items:center;

  gap:6px;

  padding:8px 12px;

  background:
  linear-gradient(
    180deg,
    #151922,
    #10131b
  );

  border-bottom:1px solid #252b38;

}



/* Ocultar título */

.principales-header{

  display:none;

}



/* LISTA */

.principales-lista{

  flex:1;

  display:flex;

  align-items:center;

  gap:10px;

  overflow-x:auto;

  scroll-behavior:smooth;

  scrollbar-width:none;

  padding:3px 2px;

}



.principales-lista::-webkit-scrollbar{

  display:none;

}



/* TARJETAS */

.principal-item{

  flex:0 0 110px;

  height:128px;


  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:flex-start;


  position:relative;


  padding:8px;


  border-radius:16px;


  border:1px solid #30394c;


  background:
  linear-gradient(
    180deg,
    #202838,
    #151b27
  );


  color:#fff;

  cursor:pointer;


  transition:
  transform .2s ease,
  border-color .2s ease,
  box-shadow .2s ease;

}



/* HOVER */

.principal-item:hover{

  transform:translateY(-2px);

  border-color:#5d6cff;

}



/* ACTIVO */

.principal-item.activa{

  border-color:#6677ff;


  background:
  linear-gradient(
    180deg,
    #3549d8,
    #242e9d
  );


  box-shadow:
  0 0 18px rgba(80,100,255,.35);

}



/* LOGO */

.principal-item__icon{

  width:66px;

  height:66px;


  object-fit:contain;


  margin-top:3px;

  margin-bottom:4px;

}



/* EN BREVE */

.principal-item:first-child 
.principal-item__icon{

  width:60px;

  height:60px;

}



/* TEXTO */

.principal-item__body{

  width:100%;


  display:flex;

  flex-direction:column;

  align-items:center;


  gap:3px;


  text-align:center;

}



.principal-item__body strong{

  width:100%;


  font-size:13px;

  font-weight:900;


  line-height:1.1;


  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}



.principal-item__body small{

  font-size:10px;

  color:#c1c8d8;

}



/* CONTADOR */

.principal-item__count{

  position:absolute;


  top:7px;

  right:7px;


  min-width:22px;

  height:22px;


  padding:0 6px;


  border-radius:50%;


  display:flex;

  align-items:center;

  justify-content:center;


  background:#303949;

  color:#fff;


  font-size:10px;

  font-weight:900;

}



.principal-item.activa
.principal-item__count{

  background:#e7a715;

  color:#111;

}



/* FLECHAS */

.principal-arrow{

  width:28px;

  height:28px;


  flex:0 0 28px;


  display:flex;

  align-items:center;

  justify-content:center;


  border-radius:50%;


  border:1px solid rgba(255,255,255,.12);


  background:#151d2c;


  color:#fff;


  font-size:20px;

  font-weight:300;


  cursor:pointer;


  transition:.2s ease;

}



.principal-arrow:hover{

  background:#2638c8;

  border-color:#6070ff;

}



.principal-arrow-left{

  margin-right:2px;

}


.principal-arrow-right{

  margin-left:2px;

}



/* MOBILE */

@media(max-width:700px){


  .principales-bar{

    padding:6px 8px;

  }


  .principales-lista{

    gap:8px;

  }


  .principal-item{

    flex-basis:108px;

    height:122px;

  }


  .principal-item__icon{

    width:58px;

    height:58px;

  }


  .principal-item__body strong{

    font-size:12px;

  }


}