/* ============================================================
   /ligas — selector de las 4 ligas conectadas al sitio.
   Mismo lenguaje visual que equipos.css (tarjeta bañada con el
   color de la liga), pero con tarjetas más grandes: son solo 4
   y son el punto de entrada a todo lo demás.
   ============================================================ */

.lgs-hero {
  position: relative;
  padding: 56px 28px 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--pf-linea);
}
.lgs-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 170% at 6% -35%, rgba(232,184,74,0.15), transparent 62%),
    radial-gradient(75% 190% at 50% -45%, rgba(232,184,74,0.17), transparent 68%),
    radial-gradient(55% 170% at 94% -35%, rgba(232,184,74,0.15), transparent 62%);
}
.lgs-hero-content { position: relative; max-width: 720px; }
.lgs-hero h1 {
  font-family: 'Anton', sans-serif; font-size: 30px; letter-spacing: 0.5px;
  color: var(--pf-cal); margin: 0 0 8px;
}
.lgs-hero p { color: var(--pf-cal-muted); font-size: 13.5px; margin: 0; max-width: 52ch; }

.lgs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding: 40px 28px 56px;
  max-width: 1000px;
  margin: 0 auto;
}

.lgs-card {
  --liga: var(--pf-cal-muted);
  position: relative;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--liga) 22%, transparent), transparent 72%),
    var(--pf-panel-negro);
  border: 1px solid var(--pf-linea);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lgs-card:hover, .lgs-card:focus-visible {
  border-color: var(--liga);
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -16px rgba(0,0,0,0.6);
  outline: none;
}
.lgs-card::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--liga);
}
.lgs-crest-zone {
  padding: 32px 14px 18px;
  display: flex; align-items: center; justify-content: center;
}
.lgs-crest { width: 84px; height: 84px; object-fit: contain; }
.lgs-info {
  padding: 0 18px 26px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
}
.lgs-name {
  font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 16px;
  color: var(--pf-cal); line-height: 1.25;
}
/* bandera del país en vez del nombre en texto — mismo tamaño/estilo
   (borde fino + esquinas redondeadas) que ya usa pizarramx.css para las
   banderas del medallero JCC 2026 (.pf-med-flag), pero declarado acá
   porque esta hoja no la comparte esa página */
.lgs-bandera {
  width: 26px; height: 17px; object-fit: cover;
  border-radius: 2px; border: 1px solid var(--pf-linea);
  align-self: center;
}

@media (max-width: 639px) {
  .lgs-hero { padding: 40px 18px 28px; }
  .lgs-hero h1 { font-size: 24px; }
  .lgs-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 26px 16px 40px; }
  .lgs-crest { width: 60px; height: 60px; }
  .lgs-crest-zone { padding: 22px 10px 12px; }
}