/* =========================================================
   VARIABLES GLOBALES Y ESTILOS BASE
   ========================================================= */
:root{
  --bg-dark:#0b1220;        /* color de fondo principal (azul muy oscuro) */
  --bg-dark-2:#0f1726;      /* segundo tono de fondo para el degradado */
  --bg-card:#ffffff;        /* color base de tarjetas claras */
  --text:#111827;           /* color de texto oscuro */
  --muted:#6b7280;          /* texto apagado / secundario */
  --ylw:#F2C40F;            /* amarillo corporativo */
  --cel:#23AFE6;            /* celeste corporativo */
  --blue:#0A3A67;           /* azul corporativo */
  --ring:rgba(35,175,230,.25);  /* brillo/halo celeste para focus */
  --shadow:0 16px 40px rgba(10,58,103,.20); /* sombra genérica para tarjetas */
}

html,body{
  /* Fondo con degradados radiales + lineal */
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(242,196,15,.10), transparent 60%),
    radial-gradient(900px 400px at 90% 10%, rgba(35,175,230,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color:#e5e7eb;  /* texto claro sobre fondo oscuro */
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  line-height:1.7; /* separación vertical entre líneas de texto */
}

a{
  transition:.3s all ease; /* suaviza cambios de color/estilo al pasar el mouse */
  text-decoration:none;   /* sin subrayado por defecto */
}
a:hover{
  text-decoration:none;   /* se mantiene sin subrayado al hover */
}

/* =========================================================
   TOPBAR / NAVBAR
   ========================================================= */
.site-navbar{
  position: relative;                      /* crea un contexto para elementos posicionados dentro */
  background:transparent;                  /* fondo transparente sobre el hero */
  border-bottom:1px solid rgba(255,255,255,.06); /* línea sutil inferior */
  z-index: 5;                              /* se verá por encima del contenido, pero debajo del menú móvil */
}
.site-menu .nav-link{
  color:#e5e7eb!important; /* links claros en el nav */
  opacity:.95;
  font-weight:600;         /* un poco negrita */
}
.site-menu .nav-link:hover{
  color:#fff!important;    /* se aclara un poco más al pasar el mouse */
  opacity:1;
}
@media (min-width:992px){
  .site-menu .dropdown .nav-link{
    color:#111827!important; /* en desktop, links de dropdown en color oscuro (sobre fondo claro) */
  }
}

.site-logo img{
  display:block; /* elimina espacio blanco y respeta el tamaño real de la imagen */
}

/* =========================================================
   HERO HOME (SECCIÓN PRINCIPAL DE PORTADA)
   ========================================================= */
.hero-wrap{
  position:relative;   /* para que el ::before se base en este contenedor */
  padding:60px 0 40px; /* margen interno arriba y abajo */
  isolation:isolate;   /* aísla los efectos de mezcla de fondos */
}
.hero-wrap::before{
  content:"";
  position:absolute;   /* se coloca encima del hero, ocupando todo */
  inset:0;
  background:
    /* franjas inclinadas decorativas */
    linear-gradient(-12deg,transparent 0 28%,#fff 28% 50%,transparent 50% 100%),
    linear-gradient(-12deg,transparent 0 24%,var(--cel) 24% 28%,transparent 28% 100%),
    linear-gradient(-12deg,transparent 0 50%,var(--ylw) 50% 54%,transparent 54% 100%);
  opacity:.10;         /* muy suave, casi imperceptible */
  z-index:-1;          /* queda por detrás del contenido del hero */
}

.hero-home{
  min-height:72vh;   /* ocupa 72% del alto de la pantalla */
  display:flex;      /* coloca los elementos en fila/columna flexible */
  align-items:center;/* centra verticalmente el contenido dentro del hero */
}

.hero-badge{
  display:inline-block;            /* se comporta como texto pero permite width/height */
  background:linear-gradient(90deg,var(--ylw),var(--cel));
  color:#062231;
  padding:.4rem .9rem;
  border-radius:999px;             /* píldora redonda */
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.32px;            /* espacio entre letras */
  margin-bottom:.65rem;
  box-shadow:0 2px 10px rgba(242,196,15,.25);
  text-transform:uppercase;        /* todo mayúsculas */
}

.hero-title{
  font-weight:900;                 /* muy negrita */
  font-size:clamp(30px,4.6vw,42px);/* tamaño fluido según ancho de pantalla */
  margin:0 0 .4rem;
  color:#f9fafb;
}
.hero-title span{
  background:linear-gradient(90deg,var(--ylw),var(--cel));
  -webkit-background-clip:text; /* hace que el degradado solo afecte al texto */
  color:transparent;            /* para que se vea el degradado en el texto */
}

.hero-cta{
  display:flex;           /* coloca botones en fila */
  flex-wrap:wrap;         /* si no caben, saltan a la siguiente línea */
  gap:.75rem;             /* espacio entre botones */
  margin-bottom:1rem;
}

/* Botón principal del hero */
.btn-main{
  display:inline-flex;    /* como inline + flex (content centrado) */
  align-items:center;     /* centra verticalmente el contenido del botón */
  justify-content:center; /* centra horizontalmente el contenido */
  padding:.65rem 1.4rem;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.25px;
  border:none;
  background:linear-gradient(90deg,var(--ylw),var(--cel));
  color:#062231!important;
  box-shadow:0 10px 28px rgba(10,58,103,.50);
  text-transform:none;
  font-size:.9rem;
}
.btn-main:hover{
  filter:saturate(1.08);  /* aumenta ligeramente la intensidad del color */
  transform:translateY(-1px); /* sube 1px para dar sensación de botón flotante */
  box-shadow:0 14px 36px rgba(10,58,103,.65);
}

/* Botón secundario transparente */
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1.25rem;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.25px;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(15,23,42,.65); /* fondo oscuro semi-transparente */
  color:#e5e7eb!important;
  font-size:.88rem;
}
.btn-ghost:hover{
  border-color:var(--cel);
  background:rgba(15,23,42,.95);
  box-shadow:0 0 0 1px rgba(148,163,184,.4); /* leve contorno */
}

/* Pills de meta/info debajo de los botones */
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;    /* espacio entre pills */
  margin-top:.35rem;
}
.hero-meta-pill{
  padding:.2rem .55rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  font-size:.75rem;
  font-weight:600;
  color:#cbd5e1;
  background:rgba(15,23,42,.8);
}

/* -------- Card de resultado destacado en el hero -------- */
.hero-match-card{
  position:relative;
  border-radius:22px;
  background:
    radial-gradient(140% 180% at 0% 0%, rgba(242,196,15,.13), transparent 60%),
    radial-gradient(140% 200% at 100% 0%, rgba(35,175,230,.20), transparent 60%),
    linear-gradient(160deg,#020617 0%, #020617 100%);
  padding:18px 18px 16px;
  box-shadow:0 18px 60px rgba(0,0,0,.7);
  overflow:hidden;        /* recorta lo que se salga de los bordes redondeados */
}
.hero-match-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:24px;
  background:conic-gradient(
    from 170deg,
    rgba(242,196,15,0),
    rgba(242,196,15,.9) 10%,
    rgba(35,175,230,.9) 40%,
    rgba(10,58,103,.95) 60%,
    rgba(35,175,230,.9) 80%,
    rgba(242,196,15,.9) 95%,
    rgba(242,196,15,0) 100%
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; /* crea borde glow sin rellenar el centro */
  mask-composite:exclude;
  padding:1px;
  opacity:.7;
  pointer-events:none;    /* no bloquea clics en el contenido */
}
.hero-match-inner{
  position:relative;
  z-index:2;              /* por encima del borde brillante */
}

.hero-match-header{
  display:flex;
  justify-content:space-between; /* separa título e info a izquierda/derecha */
  align-items:center;            /* centra verticalmente */
  margin-bottom:8px;
  color:#e5e7eb;
  font-size:.8rem;
  font-weight:600;
}
.hero-match-header span.small{
  font-size:.78rem;
  opacity:.8;
}

.hero-date-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .7rem;
  border-radius:999px;
  background:rgba(15,23,42,.8);
  border:1px solid rgba(148,163,184,.55);
  font-size:.75rem;
  font-weight:700;
}
.hero-date-pill .ico{
  display:inline-grid;    /* grid de 1x1 centrado */
  place-items:center;     /* centra icono vertical y horizontalmente */
  width:18px;height:18px;
  border-radius:6px;
  background:#0A3A67;
  font-size:.75rem;
}

/* fila con equipos y marcador */
.hero-teams-row{
  margin-top:4px;
  padding:10px 4px 8px;
  display:grid;                      /* grid de 3 columnas: local | vs | visita */
  grid-template-columns:1fr auto 1fr;
  gap:8px;
  align-items:center;                /* alinea verticalmente al centro */
}
.hero-team-side{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;                       /* permite cortar texto con ellipsis */
}
.hero-team-name{
  color:#f9fafb;
  font-weight:800;
  font-size:.95rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;            /* pone "..." si el nombre es muy largo */
}
.hero-team-logo{
  width:44px;height:44px;
  border-radius:50%;
  background:#020617;
  box-shadow:0 2px 10px rgba(15,23,42,.9), inset 0 1px 0 rgba(148,163,184,.35);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero-team-logo img{
  width:100%;height:100%;
  object-fit:cover;                  /* recorta la imagen para llenar el círculo */
}

.hero-score{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  padding:4px 10px;
  border-radius:16px;
  background:#020617;
  color:#f9fafb;
  font-weight:900;
  font-size:1.05rem;
  border:1px solid rgba(248,250,252,.16);
  box-shadow:0 0 0 1px rgba(15,23,42,.9), 0 10px 20px rgba(0,0,0,.75);
}
.hero-vs{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(148,163,184,.5);
  font-weight:800;
  color:#e5e7eb;
  letter-spacing:.28px;
}

.hero-match-footer{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.75rem;
  color:#cbd5e1;
}
.hero-tag{
  padding:.15rem .55rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.5);
  background:rgba(15,23,42,.9);
  font-weight:600;
}
.hero-mini-link{
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px; /* baja un poco la línea para que sea más estética */
  cursor:pointer;
}

/* Ajustes en móviles chicos */
@media (max-width:575.98px){
  .container{
    padding-left:18px;
    padding-right:18px;
  }
  .hero-match-card{
    margin-top:16px;
  }
}

/* Contenedor para badge centrado */
.hero-badge-wrap{
  display:flex;
  justify-content:center; /* centra horizontalmente la badge */
  margin-top:18px;
  margin-bottom:.4rem;
}

/* =========================================================
   SECCIONES GENERALES, BLOQUE "EXPLORA" Y FOOTER
   ========================================================= */
.site-section{
  padding:20px 0 60px; /* separación vertical entre secciones */
}

/* Título de sección "Explora", etc. */
.home-section-title{
  display:flex;
  justify-content:space-between; /* título a la izquierda y texto a la derecha */
  align-items:flex-end;          /* alinea ambos en la parte baja */
  margin-bottom:18px;
}
.home-section-title h2{
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#e5e7eb;
  font-weight:800;
  margin:0;
}
.home-section-title span.small{
  font-size:.8rem;
  color:#94a3b8;
}

/* Tarjeta de features (Explora) */
.feature-card{
  position:relative;
  background:linear-gradient(180deg,#020617 0%,#020617 100%);
  border-radius:18px;
  border:1px solid rgba(148,163,184,.35);
  padding:14px 14px 13px;
  height:100%;      /* ocupa alto total de la columna */
  box-shadow:0 14px 40px rgba(15,23,42,.9);
  overflow:hidden;
  transition:transform .16s ease, box-shadow .18s ease, border-color .16s ease;
}
.feature-card:hover{
  transform:translateY(-4px); /* efecto de flotar */
  border-color:var(--cel);
  box-shadow:0 20px 60px rgba(15,23,42,1);
}
.feature-label{
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a5b4fc;
  font-weight:800;
  margin-bottom:6px;
}
.feature-title{
  font-size:.95rem;
  font-weight:800;
  color:#f9fafb;
  margin-bottom:4px;
}
.feature-text{
  font-size:.8rem;
  color:#94a3b8;
  margin-bottom:8px;
}
.feature-link{
  font-size:.8rem;
  font-weight:700;
  color:#e5e7eb;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}

.latest-news,
.site-section-alt{
  background:transparent;
}
.heading{
  color:#f9fafb;
}

/* Footer */
.footer-section{
  background: transparent;
  border-top:2px solid var(--ylw);  /* línea amarilla superior */
}
.footer-section p{
  color:#94a3b8;
  margin:0;
  padding:22px 0;
}

/* =========================================================
   MENÚ MÓVIL (BACKDROP + SIDEBAR) Y HAMBURGUESA
   ========================================================= */

/* Fondo oscuro detrás del menú móvil */
.site-mobile-backdrop{
  position:fixed;            /* se pega a la ventana, no al scroll */
  inset:0;                   /* ocupa toda la pantalla */
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;       /* no recibe clics cuando está oculto */
  transition:opacity .25s ease;
  z-index:900;
}
.site-mobile-backdrop.show{
  opacity:1;
  pointer-events:auto;       /* vuelve a aceptar clics para cerrar el menú */
}

/* Panel del menú móvil (sidebar derecha) */
.site-mobile-menu{
  position:fixed;
  inset:0 0 0 auto;          /* pegado al lado derecho */
  width:300px;
  background:#0b1220;
  color:#e5e7eb;
  transform:translateX(100%);/* comienza fuera de la pantalla */
  transition:transform .25s ease;
  z-index:999;
  box-shadow:-20px 0 60px rgba(0,0,0,.4);
}
.site-mobile-menu.open{
  transform:translateX(0);   /* entra al viewport */
}
.site-mobile-menu-header{
  padding:14px 16px;
}
.site-mobile-menu-body{
  padding:10px 16px 28px;
}

/* Links generales del menú móvil */
.site-mobile-menu a{
  color:#e5e7eb;
  display:block;
  padding:12px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Asegura que los links ocupen todo el ancho en la lista */
.site-mobile-menu-body ul li > a{
  display: block;
  width: 100%;
  padding: 14px 18px;
  position: relative;
  z-index: 2; /* por encima de cualquier pseudo-elemento decorativo */
}

/* Cabecera de un item con submenú (acordeón) */
.m-acc{
  display:flex;
  align-items:center;        /* centra icono + texto verticalmente */
  justify-content:space-between; /* texto a la izquierda, flecha a la derecha */
  width:100%;
}
.m-acc .chev{
  transition:transform .2s ease;
}
.m-acc.open .chev{
  transform:rotate(90deg);   /* gira flecha al abrir el submenú */
}

/* Contenedor del submenú (hijos) */
.m-sub{
  display:none;
  padding-left:12px;
  margin:6px 0 2px;
  border-left:1px solid rgba(255,255,255,.08);
}
.m-sub.show{
  display:block;             /* se muestra cuando está activo */
}

/* Links dentro del submenú móvil */
.site-mobile-menu .m-sub a.nav-link{
  color:#f7f7f7 !important;
  opacity:1 !important;
  font-weight:600;
  padding:10px 6px 10px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-mobile-menu .m-sub a.nav-link:hover{
  background:rgba(255,255,255,.06);
  color:#ffffff !important;
}

/* Botón hamburguesa que abre/cierra el menú móvil */
.hamburger{
  width:38px;
  height:30px;
  position:relative;
  border:0;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;     /* centra las líneas dentro del botón */
  justify-content:center;
  padding:0;
  outline:none;
  color:#fff;
  z-index:1002;           /* se mantiene por encima del navbar */
}
.hamburger span{
  position:absolute;
  width:24px;
  height:2px;
  background:#ffffff;
  border-radius:2px;
  left:7px;
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.hamburger span:nth-child(1){top:9px;}   /* línea superior */
.hamburger span:nth-child(2){top:14px;}  /* línea central */
.hamburger span:nth-child(3){top:19px;}  /* línea inferior */

/* Estado del botón cuando el menú está activo (cruz) */
.hamburger.is-active span:nth-child(1){
  top:14px;
  transform:rotate(45deg);
}
.hamburger.is-active span:nth-child(2){
  opacity:0;
  transform:scaleX(0); /* desaparece la línea del medio */
}
.hamburger.is-active span:nth-child(3){
  top:14px;
  transform:rotate(-45deg);
}

/* Variante fija por si la usas al hacer scroll */
.hamburger.is-fixed{
  position:fixed;
  right:16px;
  top:16px;
  z-index:1001;
}

/* Mostrar/ocultar navegación según tamaño */
@media (max-width:991.98px){
  .site-navigation{ display:none !important; } /* oculta menú de escritorio */
  .hamburger{ display:inline-flex !important; }/* muestra hamburguesa */
}
@media (min-width:992px){
  .hamburger{ display:none !important; }       /* oculta hamburguesa en desktop */
}

/* =========================================================
   SECCIÓN MIEMBROS DE LA JUNTA / DIRECTIVA
   ========================================================= */
.members-header-row{
  margin-bottom: 18px; /* separación con las tarjetas */
}
.member-card{
  background: linear-gradient(160deg,#020617 0%,#020617 60%,#020617 100%);
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.40);
  padding: 16px 14px 14px;
  color: #e5e7eb;
  box-shadow: 0 18px 45px rgba(15,23,42,.9);
  display: flex;
  flex-direction: column; /* apila foto, nombre, rol, etc. en columna */
  align-items: center;    /* centra horizontalmente el contenido */
  text-align: center;
  transition: transform .16s ease, box-shadow .18s ease, border-color .16s ease;
}
.member-card:hover{
  transform: translateY(-4px);
  border-color: var(--cel);
  box-shadow: 0 22px 60px rgba(15,23,42,1);
}
.member-photo{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;        /* recorta foto para que sea perfectamente redonda */
  box-shadow: 0 0 0 3px #0b1220, 0 0 0 4px rgba(148,163,184,.55);
  margin-bottom: 10px;
}
.member-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* ajusta la imagen al círculo sin deformarla */
}
.member-role{
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a5b4fc;
  font-weight: 800;
  margin-bottom: 4px;
}
.member-name{
  font-size: .98rem;
  font-weight: 800;
  color: #f9fafb;
  margin-bottom: 4px;
}
.member-meta{
  font-size: .8rem;
  color: #cbd5e1;
  margin-bottom: 2px;
}
.member-meta span.label{
  color: #94a3b8;
  font-weight: 600;
}
.member-tag{
  margin-top: 8px;
  font-size: .75rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(15,23,42,.85);
  color: #e5e7eb;
  font-weight: 600;
}

/* Barra/cinta vertical para títulos de secciones */
.title-section .heading{
  position: relative;
}
.title-section{
  text-align: center;
}
.title-section .heading:before{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:28px;
  border-radius:999px;
  background: var(--ylw);   /* color de la barra, ligado al logo */
}

/* =========================================================
   TARJETAS DE EQUIPOS
   ========================================================= */
/* Card completa del equipo */
.team-card{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 58%, #eef6ff 100%);
  border-radius:18px;
  border:1px solid rgba(10,58,103,.10);
  overflow:hidden;
  height:100%;
  width:100%;
  max-width:210px;      /* ancho máximo de la tarjeta */
  margin:0 auto;        /* centra dentro de la columna */
  box-shadow:0 1px 0 rgba(2,6,23,.04),
             0 10px 24px rgba(7,24,55,.22),
             0 34px 90px rgba(7,24,55,.28);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Separación entre items del grid de equipos */
#teamsGrid .team-item{
  margin-bottom:22px;
}

/* Borde de brillo sutil alrededor de la tarjeta */
.team-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  z-index:0;
  padding:1px;
  pointer-events:none;
  background:conic-gradient(
    from 170deg,
    rgba(242,196,15,0),
    rgba(242,196,15,.85) 12%,
    rgba(35,175,230,.9) 45%,
    rgba(10,58,103,.9) 60%,
    rgba(35,175,230,.9) 80%,
    rgba(242,196,15,.85) 94%,
    rgba(242,196,15,0) 100%
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .18s ease;
  filter:blur(.4px);
}
.team-card:hover{
  transform:translateY(-6px);
  border-color:rgba(35,175,230,.38);
  box-shadow:var(--shadow),0 0 0 6px rgba(35,175,230,.10);
}
.team-card:hover::before{
  opacity:1;
}

/* Zona del logo */
.logo-wrap{
  position:relative;
  width:100%;
  padding-top:82%; /* truco para crear un contenedor cuadrado (relación 1:0.82) */
  background:linear-gradient(180deg,#ffffff 0%, #f2f7ff 100%);
}
.logo-wrap::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:14px;
  border:3px solid;
  border-image: linear-gradient(135deg, var(--ylw), var(--cel)) 1;
  box-shadow: inset 0 1px 0 #fff, 0 14px 32px rgba(10,58,103,.12);
  pointer-events:none;
  z-index:1;
}

/* Stage blanco donde va el logo */
.logo-stage{
  position:absolute;
  inset:22% 18% 20% 18%;
  background:#fff;
  border-radius:12px;
  display:grid;
  place-items:center; /* centra el contenido (logo) */
  box-shadow:0 12px 26px rgba(7,24,55,.18),
             0 1px 0 rgba(255,255,255,.9) inset;
  z-index:2;
}
.logo-wrap img{
  position:absolute;
  inset:22% 18% 20% 18%;
  width:auto;
  height:auto;
  max-width:64%;
  max-height:64%;
  margin:auto;
  object-fit:contain;  /* ajusta el logo sin deformarlo */
  z-index:3;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.10));
}

/* Halo que sigue el mouse (si lo manejas con JS añadiendo --mx/--my) */
.team-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:18px;
  pointer-events:none;
  background: radial-gradient(
    240px 140px at var(--mx,50%) var(--my,30%),
    rgba(35,175,230,.18),
    transparent 55%
  );
  opacity:0;
  transition:opacity .25s ease;
}
.team-card.is-hover::after{
  opacity:1;
}

/* Cuerpo de la tarjeta del equipo */
.card-body{
  padding:.95rem .95rem .8rem;
  text-align:center;
  position:relative;
  z-index:4; /* sobre el halo y borde */
}
.team-name{
  color:var(--text);
  font-weight:800;
  font-size:1rem;
  line-height:1.12;
  margin:.15rem 0 .15rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-meta{
  color:var(--muted);
  font-size:.86rem;
  margin:0;
}

/* Herramientas/buscador donde se incluye el input de equipos/jugadores */
.tools{
  margin-top:16px;
  display:flex;
  gap:10px;            /* espacio entre controles */
  justify-content:center; /* centrados horizontalmente */
  flex-wrap:wrap;      /* saltan de línea si no caben */
}
.tool-input{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.1);
  color:#e5e7eb;
  padding:.6rem .85rem;
  border-radius:12px;
  min-width:260px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tool-input::placeholder{
  color:#94a3b8;
}
.tool-input:focus{
  border-color: var(--cel);
  box-shadow: 0 0 0 6px var(--ring);
}

/* Botón ver jugadores dentro de la card del equipo */
.card-actions{
  padding:.4rem .4rem .7rem;
  text-align:center;
}
.btn-players{
  display:inline-flex;        /* se ajusta al contenido y permite centrarlo */
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:110px;            /* mínimo de ancho para que no quede muy pequeño */
  margin:.4rem auto 0;
  padding:.38rem .8rem;
  border-radius:999px;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.2px;
  text-transform:none;
  text-align:center;
  color:#062231 !important;
  background:linear-gradient(90deg, var(--ylw), var(--cel));
  border:1px solid rgba(10,58,103,.12);
  box-shadow: 0 6px 18px rgba(10,58,103,.20);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-players:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(10,58,103,.28);
  filter:saturate(1.05);
}
.btn-players:active{
  transform:translateY(0);
  box-shadow:0 6px 18px rgba(10,58,103,.20);
}
.btn-players:focus{
  outline:none;
  box-shadow:0 0 0 6px rgba(35,175,230,.25);
}
.btn-players .ico{
  margin-right:.35rem;
  font-size:1em;
  vertical-align:-1px;
}

/* Estructura interna de la tarjeta del equipo */
.team-card{
  display:flex;
  flex-direction:column; /* logo arriba, nombre/btn abajo */
}
.card-header{
  padding: .9rem .75rem 0.1rem;
}

/* =========================================================
   CALENDARIO DE PARTIDOS (MATCH-CARD)
   ========================================================= */
.match-card{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 58%, #eef6ff 100%);
  border-radius:18px;
  border:1px solid rgba(10,58,103,.10);
  overflow:hidden;
  box-shadow:0 1px 0 rgba(2,6,23,.04),
             0 10px 24px rgba(7,24,55,.22),
             0 34px 90px rgba(7,24,55,.28);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  margin-bottom:30px;
}
.match-card:hover{
  transform:translateY(-6px);
  border-color:rgba(35,175,230,.38);
  box-shadow:var(--shadow),0 0 0 6px rgba(35,175,230,.10);
}

.match-body{
  position:relative;
  z-index:2;
  padding:16px 16px 18px;
}

/* Meta superior (jornada, grupo, cancha, etc.) */
.match-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  color:#0f172a;
  font-weight:600;
  font-size:.92rem;
}
.meta-chip{
  background:#eef6ff;
  border:1px solid rgba(10,58,103,.12);
  border-radius:999px;
  padding:.25rem .6rem;
  font-weight:700;
  font-size:.78rem;
  color:#0A3A67;
}
.meta-soft{
  color:#475569;
  font-weight:600;
  font-size:.86rem;
}

/* Badge central con fecha/hora */
.date-line{
  display:flex;
  justify-content:center;
  margin:10px 0 12px;
}
.date-badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem 1rem;
  border-radius:14px;
  background:#e7f7ff;
  color:#0A3A67;
  border:1px solid rgba(10,58,103,.20);
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(10,58,103,.12);
}
.date-badge .ico{
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:6px;
  background:#0A3A67;
  color:#fff;
  font-size:.85rem;
}
.date-badge .dt{
  white-space:nowrap;
}

/* fila con dos equipos y vs/score en medio */
.teams-row{
  display:grid;
  grid-template-columns:1fr auto 1fr; /* equipo local | vs/score | visitante */
  align-items:center;
  gap:10px;
  padding:10px 0 12px;
  border-bottom:1px dashed rgba(10,58,103,.12);
}
.team-side{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.team-name{
  color:var(--text);
  font-weight:900;
  font-size:1.02rem;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Logo circular de equipos en match-card */
.logo{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(7,24,55,.18),
             inset 0 1px 0 rgba(255,255,255,.9);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.vs{
  font-weight:900;
  color:#0A3A67;
  padding:4px 10px;
  border-radius:999px;
  background:#e7f7ff;
  border:1px solid rgba(10,58,103,.15);
}
.score{
  font-weight:900;
  font-size:1.02rem;
  padding:2px 10px;
  border-radius:10px;
  background:#0A3A67;
  color:#fff;
  letter-spacing:.5px;
}

/* Botón para desplegar detalles del partido */
.more-wrap{
  display:flex;
  justify-content:center;
  padding:12px 0 2px;
}
.btn-more{
  appearance:none;
  border:0;
  background:#0b1220;
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  padding:.55rem 1.05rem;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-more:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.32);
  background:#0e1630;
}
.btn-more .chev{
  display:inline-block;
  transition:transform .2s ease;
  font-weight:900;
  font-size:1rem;
  line-height:1;
}
.btn-more[aria-expanded="true"] .chev{
  transform:rotate(180deg); /* flecha hacia arriba cuando está abierto */
}

/* Panel colapsable para detalles del partido */
.details{
  height:0;              /* oculto por defecto */
  overflow:hidden;       /* recorta contenido al colapsar */
  transition:height .28s ease; /* animación de apertura/cierre */
}
.details-inner{
  padding:14px 6px 6px;
}
.details-two-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}
.details-col h6{
  color:#0A3A67;
  font-weight:800;
  margin:0 0 8px 0;
  font-size:1rem;
}
.subttl{
  margin:6px 0 6px;
  font-weight:800;
  color:#334155;
  font-size:.9rem;
}
.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.chips:empty::after{
  content:attr(data-empty); /* mensaje si no hay chips (ej: "Sin datos") */
  color:#94a3b8;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  border:1px solid rgba(10,58,103,.12);
  background:#f6faff;
  color:#0A3A67;
}
.chip.goal{
  background:#ecfff7;
  border-color:rgba(16,185,129,.25);
  color:#065f46;
}
.chip.yellow{
  background:#fffbea;
  border-color:rgba(245,158,11,.35);
  color:#92400e;
}
.chip.red{
  background:#fee2e2;
  border-color:rgba(239,68,68,.35);
  color:#7f1d1d;
}

/* Aviso para temas de vocalía, etc. */
.alert-vocalia{
  background:#fff7ed;
  border:1px solid rgba(234,88,12,.30);
  color:#7c2d12;
  padding:.6rem .8rem;
  border-radius:12px;
  font-weight:700;
  margin-top:12px;
}

/* Card para equipos que descansan (bye) */
.bye-card{
  margin: 12px 0 8px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 58%, #eef6ff 100%);
  border:1px dashed rgba(10,58,103,.25);
  border-radius:14px;
  padding:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  box-shadow:0 8px 28px rgba(7,24,55,.25);
}
.bye-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.bye-logo{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(7,24,55,.18),
             inset 0 1px 0 rgba(255,255,255,.9);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.bye-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.bye-team{
  font-weight:900;
  color:#0A3A67;
  font-size:1.05rem;
  text-align:center;
}
.bye-label{
  font-weight:900;
  letter-spacing:.5px;
  color:#ffffff;
  background:#0A3A67;
  border-radius:999px;
  padding:.35rem .9rem;
  text-align:center;
}

/* Filtros del calendario (selects) */
.filters{
  margin:12px auto 8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.select{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.1);
  color:#e5e7eb;
  padding:.55rem .8rem;
  border-radius:12px;
  outline:none;
  min-width:180px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.select:focus{
  border-color:var(--cel);
  box-shadow: 0 0 0 6px var(--ring);
}

/* Footer dentro de esta zona (ya controlado arriba también) */
.footer-section{
  background: transparent;
  border-top:2px solid var(--ylw);
}
.footer-section p{
  color:#94a3b8;
  margin:0;
  padding:22px 0;
}

/* =========================================================
   TABLA DE GOLEADORES / ESTADÍSTICAS
   ========================================================= */
.table-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 58%, #eef6ff 100%);
  border-radius:18px;
  border:1px solid rgba(10,58,103,.10);
  box-shadow:0 1px 0 rgba(2,6,23,.04),
             0 10px 24px rgba(7,24,55,.22),
             0 34px 90px rgba(7,24,55,.28);
  overflow:hidden;
}

.table-wrap{
  padding:10px 10px 6px;
}

/* Scroll horizontal para tablas anchas en pantallas pequeñas */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.table-scroll::-webkit-scrollbar{
  height:8px;
}
.table-scroll::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:6px;
}

/* Tabla de posiciones o goleadores */
table.standings{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px; /* espacio vertical entre filas */
  min-width:740px;       /* evita que se compacte demasiado */
}
table.standings thead th{
  color:#0A3A67;
  font-weight:800;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:12px 10px;
  border-bottom:1px dashed rgba(10,58,103,.22);
  white-space:nowrap;
}
table.standings tbody tr{
  background:#fff;
  border:1px solid rgba(10,58,103,.10);
  box-shadow:0 8px 26px rgba(7,24,55,.15);
}
table.standings tbody tr:hover{
  background:var(--row-hover); /* puedes definir --row-hover si quieres */
}
table.standings td{
  padding:14px 12px;
  color:var(--text);
  font-weight:700;
  vertical-align:middle;
}

/* Columnas numéricas compactas */
.c-n, .c-ida, .c-vta, .c-total{
  width:1%;
  text-align:center;
  white-space:nowrap;
}

/* Jugador dentro de la tabla (avatar + nombre) */
.standings .player{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}
.standings .avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(7,24,55,.18),
             inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
.standings .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.standings .tname{
  font-weight:900;
  letter-spacing:.2px;
  color:#111827;
}

/* Equipo pequeño para mostrar club junto al jugador */
.standings .team-min{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:180px;
}
.standings .logo{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(7,24,55,.18),
             inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
.standings .logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Píldora de total de goles/estadística */
.c-total .pill{
  display:inline-block;
  min-width:44px;
  padding:.28rem .6rem;
  border-radius:999px;
  background:#0A3A67;
  color:#fff;
  font-weight:900;
  box-shadow:0 6px 16px rgba(10,58,103,.25);
  letter-spacing:.2px;
}

/* =========================================================
   TARJETAS DE JUGADORES (VISTA GENERAL)
   ========================================================= */
.player-card{
  background:var(--card);                 /* OJO: var(--card) debería definirse o usar --bg-card */
  border:1px solid rgba(2,6,23,.06);
  border-radius:18px;
  padding:18px 16px 16px;
  height:100%;
  text-align:center;
  color:var(--text);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow:0 1px 0 rgba(2,6,23,.03);
  margin-bottom:20px;
}
.player-card:hover{
  transform:translateY(-4px);
  border-color:rgba(35,175,230,.45);
  box-shadow:0 10px 30px var(--ring);
}
/* Separación entre tarjetas */
#playersGrid .player-item{
  padding: 0 12px 24px;   /* 12px a los lados, 24px abajo */
}
/* Avatar circular grande con aro degradado */
.avatar-wrap{
  width:124px;
  height:124px;
  margin:6px auto 12px;
  border-radius:50%;
  position:relative;
  isolation:isolate; /* separa el pseudo-elemento ::before */
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(255,255,255,.9), rgba(255,255,255,.3) 60%, transparent 61%),
    #ffffff;
  box-shadow:
    0 0 0 3px #fff inset,
    0 0 0 2px rgba(0,0,0,.02) inset;
}
.avatar-wrap::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background: conic-gradient(from 160deg, var(--ylw), var(--cel), var(--ylw));
  z-index:-1;
  filter:blur(.4px);
}
.avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover; /* recorta la foto para que siempre llene el círculo */
  display:block;
}

/* Iniciales como fallback si no hay foto */
.avatar-fallback{
  width:100%;
  height:100%;
  border-radius:50%;
  background:linear-gradient(180deg,#f7fafc,#eef6ff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:28px;
  color:#0b1220;
  letter-spacing:.5px;
}

.player-number{
  display:inline-block;
  font-weight:900;
  font-size:.88rem;
  color:#062231;
  background:linear-gradient(90deg,var(--ylw),var(--cel));
  padding:.25rem .6rem;
  border-radius:999px;
  box-shadow:0 2px 10px rgba(35,175,230,.25);
  margin-bottom:6px;
}
.player-name{
  font-weight:900;
  font-size:1rem;
  line-height:1.15;
  margin:4px 0 2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player-meta{
  color:var(--muted);
  font-size:.9rem;
  margin:0;
}

/* Etiquetas/pills para posición, estado, etc. */
.pill{
  display:inline-block;
  font-size:.78rem;
  color:#0b1220;
  font-weight:700;
  background:#e9f7ff;
  border:1px solid rgba(35,175,230,.25);
  padding:.18rem .55rem;
  border-radius:999px;
  margin-top:8px;
}
.pill.sus{
  background:#fff5f5;
  border-color:rgba(255,0,0,.25);
  color:#7a0a0a;
}

/* Botón volver en vista de jugadores */
.btn-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.18);
  padding:.5rem .8rem;
  border-radius:12px;
  text-decoration:none;
}
.btn-back:hover{
  border-color:#fff;
  color:#fff;
}

/* Buscador local de jugadores (reutiliza .tools y .tool-input) */
.tools{
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.tool-input{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.1);
  color:#e5e7eb;
  padding:.6rem .85rem;
  border-radius:12px;
  min-width:260px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tool-input::placeholder{
  color:#94a3b8;
}
.tool-input:focus{
  border-color: var(--cel);
  box-shadow: 0 0 0 6px var(--ring);
}

@media (max-width:575.98px){
  .container{
    padding-left:18px;
    padding-right:18px;
  }
}

/* =========================================================
   TABLA DE POSICIONES (CLASIFICACIÓN)
   ========================================================= */
/* Celda de equipo: logo + nombre en la tabla */
.team-cell{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}
.logo{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(7,24,55,.18),
             inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
  flex:0 0 36px;
}
.logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.tname{
  font-weight:900;
  letter-spacing:.2px;
  color:#111827;
}

/* Posición del equipo (medalla, etc.) */
.pos-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:28px;
  border-radius:10px;
  font-weight:900;
  color:#0A3A67;
  background:#e7f7ff;
  border:1px solid rgba(10,58,103,.18);
}
.leader{
  background:#0A3A67;
  color:#fff;
  border:0;
  box-shadow:0 6px 18px rgba(10,58,103,.35);
}
.leader-tag{
  display:inline-block;
  font-size:.68rem;
  font-weight:900;
  background:#e6f7ff;
  color:#0A3A67;
  border:1px solid rgba(10,58,103,.18);
  border-radius:999px;
  padding:.18rem .5rem;
  margin-left:8px;
}

/* Diferencia de gol */
.c-dif{
  color:#0A3A67;
}
.neg{
  color:#7f1d1d; /* para valores negativos */
}

/* Puntos totales destacados */
.c-pts .pts-pill{
  display:inline-block;
  min-width:44px;
  padding:.28rem .6rem;
  border-radius:999px;
  background:#0A3A67;
  color:#fff;
  font-weight:900;
  box-shadow:0 6px 16px rgba(10,58,103,.25);
  letter-spacing:.2px;
}
.standings th,
.standings td {
  text-align: center;
  vertical-align: middle;
}
.c-penal {
  text-align: center;
}

.c-penal .neg {
  color: #7f1d1d;
  font-weight: 600;
}


/* =========================================================
   TABLA DE SUSPENSIONES (VARIANTE DE PLAYER-CARD)
   ========================================================= */
/* IMPORTANTE:
   Este .player-card redefine tamaño/estilo para la sección de suspensiones.
   Al estar más abajo en el CSS, sobreescribe la definición anterior.
*/
.player-card{
  background:var(--card);
  border:1px solid rgba(2,6,23,.06);
  border-radius:14px;
  padding:12px 10px;
  height:100%;
  width:100%;
  max-width:260px;   /* la hace menos ancha */
  margin-left:auto;
  margin-right:auto;
  color:var(--text);
  text-align:center;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow:0 1px 0 rgba(2,6,23,.03);
  position:relative;
  overflow:hidden;
}
.player-card:hover{
  transform:translateY(-4px);
  border-color:rgba(35,175,230,.45);
  box-shadow:0 10px 30px var(--ring);
}

/* Cinta roja "Suspendido" */
.ribbon{
  position:absolute;
  top:8px;
  left:-22px;
  transform:rotate(-20deg);
  background:linear-gradient(90deg,#ef4444,#dc2626);
  color:#fff;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:.28rem 1.6rem;
  box-shadow:0 10px 24px rgba(220,38,38,.35);
  border:1px solid rgba(255,255,255,.12);
  font-size:.65rem;
  pointer-events:none; /* no bloquea clics debajo */
}
.ribbon::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(255,255,255,.12),transparent 60%);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* Avatar circular más pequeño para suspensiones */
.avatar-wrap{
  width:86px;
  height:86px;
  margin:4px auto 10px;
  border-radius:50%;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(255,255,255,.9), rgba(255,255,255,.3) 60%, transparent 61%),
    #ffffff;
  box-shadow:0 0 0 3px #fff inset,
             0 0 0 2px rgba(0,0,0,.02) inset;
}
.avatar-wrap::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background: conic-gradient(from 160deg, var(--ylw), var(--cel), var(--ylw));
  z-index:-1;
  filter:blur(.4px);
}
.avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.avatar-fallback{
  width:100%;
  height:100%;
  border-radius:50%;
  background:linear-gradient(180deg,#f7fafc,#eef6ff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:22px;
  color:#0b1220;
  letter-spacing:.5px;
}

.player-name{
  font-weight:800;
  font-size:.88rem;
  line-height:1.15;
  margin:2px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player-meta{
  color:var(--muted);
  font-size:.78rem;
  margin:0;
}

/* Pills específicas de suspensiones */
.pill{
  display:inline-block;
  font-size:.7rem;
  font-weight:800;
  line-height:1;
  border-radius:999px;
  padding:.18rem .48rem;
  margin-top:6px;
}
.pill.red{
  background:#fff5f5;
  color:#7a0a0a;
  border:1px solid rgba(239,68,68,.35);
}
.pill.blue{
  background:#e9f7ff;
  color:#0b1220;
  border:1px solid rgba(35,175,230,.25);
}

/* Chip con equipo (logo + nombre) dentro de la card */
.team-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  background:#f5f7fb;
  border:1px solid rgba(2,6,23,.06);
  border-radius:999px;
  padding:.22rem .5rem;
  font-weight:800;
  color:#0f172a;
  font-size:.78rem;
}
.t-logo{
  width:22px;
  height:22px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 8px rgba(7,24,55,.18),
             inset 0 1px 0 rgba(255,255,255,.9);
  border:1px solid rgba(10,58,103,.10);
  flex:0 0 22px;
}
.t-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Bloque de observación (texto de justificación) */
.obs{
  text-align:left;
  margin-top:8px;
  padding:8px 10px;
  background:#fff;
  border:1px dashed rgba(185,28,28,.45);
  border-radius:10px;
  color:var(--text);
  font-weight:600;
  font-size:.78rem;
}
.obs .title{
  color:#b91c1c;
  font-size:.7rem;
  font-weight:900;
  margin-bottom:4px;
}

/* Repetición necesaria para asegurar comportamiento de menú móvil
   en esta parte del archivo (igual que secciones anteriores) */
.site-mobile-backdrop.show{
  opacity:1;
  pointer-events:auto;
}
.site-mobile-menu{
  position:fixed;
  inset:0 0 0 auto;
  width:300px;
  background:#0b1220;
  color:#e5e7eb;
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:999;
  box-shadow:-20px 0 60px rgba(0,0,0,.4);
}
.site-mobile-menu.open{
  transform:translateX(0);
}
.site-mobile-menu-header{
  padding:14px 16px;
}
.site-mobile-menu-body{
  padding:10px 16px 28px;
}
.site-mobile-menu a{
  color:#e5e7eb;
  display:block;
  padding:12px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.m-acc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.m-acc .chev{
  transition:transform .2s ease;
}
.m-acc.open .chev{
  transform:rotate(90deg);
}
.m-sub{
  display:none;
  padding-left:12px;
  margin:6px 0 2px;
  border-left:1px solid rgba(255,255,255,.08);
}
.m-sub.show{
  display:block;
}
.hamburger{
  width:38px;
  height:30px;
  position:relative;
  border:0;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  outline:none;
  color:#fff;
  z-index:1002;
}
.hamburger span{
  position:absolute;
  width:24px;
  height:2px;
  background:#ffffff;
  border-radius:2px;
  left:7px;
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.hamburger span:nth-child(1){top:9px;}
.hamburger span:nth-child(2){top:14px;}
.hamburger span:nth-child(3){top:19px;}
.hamburger.is-active span:nth-child(1){
  top:14px;
  transform:rotate(45deg);
}
.hamburger.is-active span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.hamburger.is-active span:nth-child(3){
  top:14px;
  transform:rotate(-45deg);
}
@media (max-width:991.98px){
  .site-navigation{
    display:none !important;
  }
  .hamburger{
    display:inline-flex !important;
  }
}
@media (min-width:992px){
  .hamburger{
    display:none !important;
  }
}