/* ==== STATS SUPERIORES === */
.historico-stats{
  width:100%;
  max-width: 1100px;
  margin: 40px auto 20px; 
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}


.stat-box{
  background:white;
  padding:20px 30px;
  border-radius:14px;
  text-align:center;
  box-shadow:0 5px 12px rgba(0,0,0,0.08);
  transition:0.2s;
}

.stat-box:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
}

/* bordes */
.stat-total{ border:2px solid #f0c46c; }
.stat-azul{ border:2px solid #cddbf6; }
.stat-rojo{ border:2px solid #f6caca; }

/* icono */
.stat-icon{
  font-size:52px;
  color:#cc6a00;
  display:block;
  margin-bottom:6px;
}

/* puntos */
.stat-dot{
  width:42px;
  height:42px;
  border-radius:50%;
  margin:0 auto 10px;
}

.azul{ background:#3f7ad8; }
.rojo{ background:#ef3e3e; }

/* texto */
.stat-number{
  font-size:36px;
  font-weight:600;
}

.stat-label{
  font-size:15px;
  color:#444;
}

/* === BODY ==== */
body{
  font-family: Arial, Helvetica, sans-serif;
  background:#f4f6f9;
  margin:0;
}

/* ==== TIMELINE === */
.timeline{
  max-width:1000px;
  margin:30px auto 0;
  display:flex;
  flex-direction:column;
  gap:25px;
}

.row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

/* === CARD === */
.card{
  background:white;
  border-radius:14px;
  padding:22px;
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:#333;
  box-shadow:0 5px 12px rgba(0,0,0,0.08);
  transition:0.25s;
  border-left:3px solid #2f6df6; /* azul default */
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 20px rgba(0,0,0,0.15);
}

/* variantes */
.card.red{
  border-left:3px solid #f04a3a;
}

.card.grey{
  border-left:3px solid #999;
}

.oculto{
 visibility: hidden;
}
.card.gold{
  border-left:3px solid #D3AF37;
}
.card.white{
  border-left:3px solid #FFFFFF;
}

.row {
  width: 100%;
}

.card {
  width: 100%;
}
/* ==== AÑO === */
.year{
  width:70px;
  height:70px;
  min-width: 70px;
  border-radius:50%;
  overflow: hidden;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:bold;
  color:white;
  background:#2f6df6;
}

.year img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;

}

.card.red .year{
  background:#f04a3a;
}

.card.grey .year{
  background:#999;
}

.card.gold .year{
  background:#D3AF37;
}

.card.white .year{
  background:#ffffff;
}


/* === INFO === */
.info{
  flex:1;
}

.info h3{
  margin:0;
  font-size:20px;
}

.team{
  margin:4px 0;
  font-weight:500;
}

/* ==== BADGES === */
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:bold;
  margin-left:8px;
}

.badge.blue{ background:#2f6df6; color:white; }
.badge.red{ background:#f04a3a; color:white; }
.badge.grey{ background:#999; color:white; }
.badge.gold{ background:#D3AF37; color:white; }
.badge.white{ background:#ffffff; color:white; }

/*    PARTICIPANTES (ICONO FIX) */
.participants{
  font-size:14px;
  color:#666;
  display:flex;
  align-items:center;
}

/* ICONO BIEN ALINEADO */
.participants .icon{
  font-size:18px;
  margin-right:6px;
  vertical-align:middle;
  transition:0.2s;
}

/* pequeño efecto hover */
.card:hover .icon{
  transform:scale(1.15);
}

/* colores */
.card .icon{ color:#2f6df6; }
.card.red .icon{ color:#f04a3a; }
.card.grey .icon{ color:#999; }
.card.gold .icon{ color:#D3AF37; }


/* ==== RESPONSIVE === */
@media (max-width:900px){
  .row{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:600px){
  .row{
    grid-template-columns:1fr;
  }

  .card{
    padding:20px;
  }

  .year{
    min-width:60px;
    height:60px;
    font-size:18px;
  }

  .historico-stats{
    grid-template-columns:1fr;
  }
}

/* ===  YEAR CON FOTO (GANADOR) === */
.year{
  position:relative;
  overflow:hidden;
}

.year.winner img{
  width:100%;
  height:100%;
  object-fit:cover;        
  object-position:center top; 
  display:block;
  transition:0.3s;
  filter: brightness(1.15); 
}

/* overlay oscuro */
.year.winner::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  transition:0.3s;
}

/* color por equipo */
.year.winner::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  z-index:1;
}

/* año (texto) */
.year span{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:18px;       /* 🔥 más grande */
  font-weight:700;
  z-index:2;
  color:white;
}

/* === NOMBRE JUGADOR (HOVER) === */
.year .player-name{
  position:absolute;
  bottom:-100%;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:white;
  padding:4px 0;
  background:rgba(0,0,0,0.6);
  z-index:3;
  transition:0.3s;
}

/* aparece en hover */
.card:hover .year span{
  transform:translate(-50%, -120%);
  font-size:16px;
}

.card:hover .year .player-name{
  bottom:0;
}

/* zoom imagen */
.card:hover .year.winner img{
  transform:scale(1.1);
}

.year.winner img{
  transition:0.3s;
}

/* efecto más suave */
.year.winner{
  transition:0.3s;
}