@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Rajdhani:wght@600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root {
  /* --- base "cancha clara" (antes: "arena" oscura) --- */
  --tinta: #fbfcfa;          /* fondo base -- antes carbon/espacio, ahora cancha clara */
  --tinta-2: #ffffff;
  --tinta-3: #eef3ee;
  --fondo: #fbfcfa;
  --panel: #ffffff;
  --panel-2: #f3f6f2;
  --borde: rgba(18,41,26,.12);
  --borde-fuerte: rgba(18,41,26,.22);
  --texto: #33473c;
  --sutil: #6b7d72;

  /* --- acentos: dorado de trofeo/torneo se mantiene, es lo que ya
     funcionaba bien de las cards de jugador y no fue parte de la queja --- */
  --oro: #b9860a;
  --oro-claro: #8a6300;
  --oro-suave: rgba(185,134,10,.14);
  --oro-borde: rgba(185,134,10,.4);
  --cian: #0f8fae;
  --cian-suave: rgba(15,143,174,.14);
  --morado: #6a4bc4;
  --verde: #1f7a3d;
  --rojo: #c8395a;
  --acento: var(--oro);

  --radio: 18px;
  --radio-chico: 12px;
  --sombra: 0 12px 30px -14px rgba(18,41,26,.25);
  --sombra-fuerte: 0 24px 60px -20px rgba(18,41,26,.3);
  --brillo-oro: 0 0 0 1px rgba(185,134,10,.5), 0 0 22px -2px rgba(185,134,10,.45);
  --brillo-cian: 0 0 0 1px rgba(15,143,174,.5), 0 0 20px -2px rgba(15,143,174,.4);

  --f-titulos: 'Space Grotesk', 'Barlow', sans-serif;
  --f-hud: 'Rajdhani', 'Space Grotesk', sans-serif;
  --f-cuerpo: 'Inter', 'Barlow', system-ui, sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { font-size: clamp(14px, 12.7px + 0.36vw, 17px); color-scheme: only light; }
body {
  overflow-x: hidden;
  font-family: var(--f-cuerpo);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(106,75,196,.06), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(15,143,174,.06), transparent 55%),
    var(--fondo);
  color: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-family: var(--f-titulos); color: #12291a; letter-spacing:-.01em; }
img { max-width:100%; }
a { color: var(--oro-claro); }
::selection { background: var(--oro); color:#20140a; }

/* Scrollbars finos para pistas horizontales (gamer touch) */
.tabs, .jpag-pista, .jor-pistas, .subtabs {
  scrollbar-width: thin;
  scrollbar-color: var(--oro) transparent;
}
.tabs::-webkit-scrollbar, .jor-pistas::-webkit-scrollbar, .subtabs::-webkit-scrollbar { height:5px; }
.tabs::-webkit-scrollbar-thumb, .jor-pistas::-webkit-scrollbar-thumb, .subtabs::-webkit-scrollbar-thumb {
  background: var(--oro); border-radius:99px;
}

.topbar {
  background:
    linear-gradient(180deg, rgba(4,7,16,.55) 0%, rgba(4,7,16,.25) 45%, rgba(4,7,16,.82) 100%),
    var(--img-topbar) center 32% / cover no-repeat,
    #03050c;
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:1.15rem; padding:1.2rem 1rem 1.1rem; position:relative; text-align:left;
  border-bottom: 1px solid rgba(255,183,3,.18);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.9);
}
.topbar::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, transparent, var(--oro), var(--cian), transparent);
  opacity:.75;
}
.topbar .medallon {
  width:132px; height:132px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 32% 26%, #1a2140, #0c1122 75%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow: 0 0 0 3px var(--oro), 0 0 0 6px rgba(4,7,16,.9), 0 0 34px rgba(255,183,3,.35),
              0 14px 34px rgba(0,0,0,.7);
}
.topbar .medallon img { width:100%; height:100%; object-fit:cover; }
.topbar .medallon span { font-family: var(--f-titulos); font-weight:800; font-size:2.8rem; color:var(--oro-claro); }
.topbar .nombre { font-family: var(--f-titulos); font-weight:800; font-size:1.55rem;
  color:#fff; line-height:1.1; letter-spacing:.005em; margin:0;
  text-shadow:0 3px 14px rgba(0,0,0,.9); }
.topbar .nombre small { display:block; font-size:.68rem; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase; color:var(--cian);
  margin-top:.4rem; text-shadow:0 2px 8px rgba(0,0,0,.85); }
.topbar .plataforma { position:absolute; right:1.2rem; top:1rem;
  font-size:.66rem; color:rgba(255,255,255,.6); font-weight:800; letter-spacing:.16em;
  text-shadow:0 2px 6px rgba(0,0,0,.85); }
@media (max-width:720px) { .topbar .plataforma { display:none; }
  .topbar { gap:.85rem; }
  .topbar .medallon { width:86px; height:86px; }
  .topbar .medallon span { font-size:2rem; }
  .topbar .nombre { font-size:1.2rem; }
  .topbar .nombre small { font-size:.6rem; letter-spacing:.2em; } }
.topbar .marca { font-family: var(--f-titulos); font-weight:800; font-size:1.25rem; color:#fff;
  display:flex; align-items:center; gap:.6rem; }
.topbar .marca::before { content:"\26BD"; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px; background:linear-gradient(145deg,var(--oro-claro),var(--oro));
  font-size:1.1rem; box-shadow: var(--brillo-oro); }
.seccion { max-width:1600px; margin:2.4rem auto; padding:0 clamp(1rem, 3.5vw, 3.5rem); position:relative; }
.seccion > h2 { font-size:1.55rem; margin-bottom:1.3rem; letter-spacing:-.01em;
  display:flex; align-items:center; gap:.7rem; }
.seccion > h2::before { content:""; width:7px; height:1.5rem; border-radius:5px;
  background:linear-gradient(180deg,var(--cian),var(--oro)); box-shadow: 0 0 12px rgba(34,224,255,.5); }

/* ---- Carrusel hero ---- */
.hero { position:relative; overflow:hidden; background:var(--tinta); border-bottom: 1px solid var(--borde); }
.hero-pista { display:flex; transition:transform .6s ease; }
.hero-item { min-width:100%; position:relative; }
.hero-item picture { display:block; width:100%; }
.hero-item img { width:100%; height:min(48vw,460px); object-fit:cover; display:block; filter:saturate(1.08) contrast(1.03); }
.hero-texto { position:absolute; left:0; right:0; bottom:0; padding:3rem 2rem 1.6rem;
  background:linear-gradient(180deg,transparent,rgba(4,6,14,.95)); color:#fff; }
.hero-texto .t { font-family: var(--f-titulos); font-size:clamp(1.3rem,3.6vw,2rem); font-weight:800; }
.hero-texto .s { color:var(--cian); font-size:1rem; margin-top:.3rem; font-weight:600; }
.hero-puntos { position:absolute; bottom:.9rem; right:1.2rem; display:flex; gap:.45rem; }
.hero-puntos span { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:background .15s, box-shadow .15s; }
.hero-puntos span.on { background:var(--oro); box-shadow:0 0 10px rgba(255,183,3,.8); }

/* ---- Tablas ---- */
table { width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem;
  background:var(--panel); border:1px solid var(--borde); border-radius:14px; overflow:hidden;
  box-shadow:var(--sombra); }
th { background:var(--tinta-2); color:var(--oro-claro); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  text-align:left; padding:.75rem .85rem; border-bottom:1px solid var(--borde); }
td { text-align:left; padding:.7rem .85rem; border-top:1px solid var(--borde); vertical-align:middle; color:var(--texto); }
tr:nth-child(even) td { background:rgba(255,255,255,.02); }
tr:hover td { background:rgba(255,183,3,.06); }
td a { color:var(--oro-claro); }

footer { text-align:center; padding:2.6rem 1rem 3rem; color:var(--sutil); font-size:.85rem; }
footer a { color:var(--cian); font-weight:700; }

/* CTA de cierre: quien llega a una liga por un link compartido (resultado,
   card de jugador) nunca veia ninguna invitacion a crear la suya propia
   -- esta es la unica que se agrega, al final, sin competir con el
   contenido de la liga en si. */
.cta-organiza { max-width:900px; margin:2.4rem auto 0; padding:1.4rem 1.6rem;
  background:linear-gradient(135deg, var(--verde), #145c2e); border-radius:var(--radio, 18px);
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  box-shadow:0 14px 30px -16px rgba(31,122,61,.5); }
.cta-organiza-txt { display:flex; flex-direction:column; gap:.2rem; color:#fff; flex:1; min-width:220px; }
.cta-organiza-txt strong { font-size:1.05rem; font-family:'Sora',sans-serif; }
.cta-organiza-txt span { font-size:.85rem; color:rgba(255,255,255,.85); }
.cta-organiza-btn { flex:none; background:var(--oro); color:#1a1400; font-weight:800;
  font-size:.9rem; padding:.75rem 1.4rem; border-radius:99px; text-decoration:none;
  white-space:nowrap; transition:transform .12s ease, box-shadow .12s ease; }
.cta-organiza-btn:hover { transform:translateY(-2px); box-shadow:0 10px 20px -8px rgba(0,0,0,.4); }
@media (max-width:560px) { .cta-organiza { justify-content:center; text-align:center; } }

/* ---- Ajustes generales de movil ---- */
@media (max-width: 720px) {
  .seccion { margin:1.6rem auto; padding:0 14px; }
  .seccion > h2 { font-size:1.3rem; }
  .topbar { padding:.9rem 1rem; }
  .topbar .nombre { font-size:1.1rem; }
  .topbar img.logo { height:42px; }
  .tabs { gap:.4rem; }
  .tabs a { padding:.6rem 1.05rem; font-size:.85rem; }
  .vs-panel { padding:.7rem .6rem .8rem; }
  .vs-fila { gap:.6rem; padding:.7rem .5rem; }
  .lid-fila { gap:.7rem; padding:.7rem .5rem; }
  .lid-total { font-size:1.15rem; padding:.2rem .7rem; }
}

/* ---- Destacados: mismo tamano que .campeon-card (confirmado por el
   usuario), solo cambia el contenido (sin fila de estadisticas). ---- */
.destacados-dep { display:grid; grid-template-columns:repeat(auto-fill,190px); justify-content:start; gap:1rem; }
.destacado-card { position:relative; z-index:1; min-width:0; border-radius:18px; padding:2px;
  background:linear-gradient(150deg,var(--oro),var(--morado) 55%,var(--cian));
  box-shadow:var(--sombra); transition:transform .2s ease, box-shadow .2s ease; }
.destacado-card:hover { transform:translateY(-5px) scale(1.015); box-shadow:var(--sombra-fuerte); }
.destacado-card::before { content:""; position:absolute; inset:-12px; z-index:-1; border-radius:26px;
  background:inherit; filter:blur(20px); opacity:.4; transition:opacity .2s ease; }
.destacado-card:hover::before { opacity:.65; }
.destacado-inner { background:var(--panel); border-radius:16px; overflow:hidden; height:100%; }
.destacado-img { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:2rem; background:linear-gradient(155deg,var(--tinta-3),var(--tinta-2)); position:relative; overflow:hidden; }
.destacado-img img { width:100%; height:100%; object-fit:cover; }
.destacado-categoria { position:absolute; top:.6rem; left:.6rem; z-index:2;
  background:rgba(4,6,14,.82); color:#fff; font-size:.6rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:.28rem .65rem; border-radius:99px; border:1px solid rgba(255,255,255,.25); }
.destacado-cuerpo { padding:.9rem 1rem 1.05rem; }
.destacado-nombre { font-family:var(--f-titulos); font-weight:800; font-size:.94rem; color:#12291a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.destacado-desc { font-size:.72rem; color:var(--sutil); margin-top:.25rem; }

/* ---- Campeones: cards estilo "logro" pero a la mitad de tamano, con
   escudo, liga/temporada y estadisticas del equipo EN ese titulo. ---- */
.campeones-dep { display:grid; grid-template-columns:repeat(auto-fill,190px); justify-content:start; gap:1rem; }
.campeon-card { position:relative; z-index:1; min-width:0; border-radius:18px; padding:2px;
  background:linear-gradient(150deg,var(--oro),var(--cian) 55%,var(--morado));
  box-shadow:var(--sombra); transition:transform .2s ease, box-shadow .2s ease; }
.campeon-card:hover { transform:translateY(-5px) scale(1.015); box-shadow:var(--sombra-fuerte); }
.campeon-card::before { content:""; position:absolute; inset:-12px; z-index:-1; border-radius:26px;
  background:inherit; filter:blur(20px); opacity:.4; transition:opacity .2s ease; }
.campeon-card:hover::before { opacity:.65; }
.campeon-inner { background:var(--panel); border-radius:16px; overflow:hidden; height:100%; }
.campeon-img { aspect-ratio:1.4/1; display:flex; align-items:center; justify-content:center;
  font-size:2rem; background:linear-gradient(155deg,var(--tinta-3),var(--tinta-2)); position:relative; overflow:hidden; }
.campeon-img img { width:70%; height:70%; object-fit:contain; }
.campeon-categoria { position:absolute; top:.6rem; left:.6rem; z-index:2;
  background:rgba(4,6,14,.82); color:var(--oro-claro); font-size:.6rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:.28rem .65rem; border-radius:99px; border:1px solid rgba(255,183,3,.4); }
.campeon-cuerpo { padding:.9rem 1rem 1.05rem; }
.campeon-nombre { font-family:var(--f-titulos); font-weight:800; font-size:.94rem; color:#12291a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.campeon-desc { font-size:.72rem; color:var(--sutil); margin-top:.25rem; }
.campeon-stats { display:flex; gap:.5rem; margin-top:.6rem; padding-top:.55rem; border-top:1px solid var(--borde); }
.campeon-stats span { font-size:.66rem; color:var(--sutil); font-weight:600; }
.campeon-stats span b { color:var(--oro-claro); font-weight:800; }

/* ---- Selector de ligas (portada): mismas proporciones para todas, sin
   destacar ninguna -- identidad via badge + gradiente sutil en vez de
   tamano. ---- */
.ligas-menu { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.1rem; }
.liga-item { background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,183,3,.09), transparent 55%),
    linear-gradient(155deg, var(--panel-2), var(--panel));
  color:var(--texto); border:1px solid var(--borde); border-radius:20px; padding:1.3rem 1.4rem;
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:block; box-shadow:var(--sombra); position:relative; overflow:hidden; }
.liga-item:hover { transform:translateY(-5px); border-color:var(--oro-borde); box-shadow:var(--sombra-fuerte), var(--brillo-oro); }
.liga-item .cabecera { display:flex; align-items:center; gap:.8rem; margin-bottom:.2rem; }
.liga-item .badge { flex:none; width:42px; height:42px; border-radius:13px; display:flex;
  align-items:center; justify-content:center; font-family:var(--f-titulos); font-weight:800;
  font-size:1.1rem; color:#20140a; background:linear-gradient(160deg,var(--oro-claro),var(--oro));
  box-shadow:0 6px 16px -6px rgba(255,183,3,.55); }
.liga-item h3 { font-size:1.02rem; color:#12291a; line-height:1.25; }
.liga-item .liga-pill { display:inline-block; margin-top:.6rem; font-size:.62rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; padding:.24rem .6rem; border-radius:99px; }
.liga-item .liga-pill.en_curso { background:rgba(43,229,147,.16); color:var(--verde); }
.liga-item .liga-pill.finalizada { background:rgba(255,255,255,.08); color:var(--sutil); }
.liga-item .liga-pill.pretemporada { background:var(--oro-suave); color:var(--oro-claro); }
.liga-item .liga-pill.liguilla { background:var(--cian-suave); color:var(--cian); }
.liga-item .temp { font-size:.8rem; color:var(--sutil); margin-top:.4rem; }
.liga-item .mini-stat { font-size:.76rem; color:var(--oro-claro); margin-top:.5rem;
  padding-top:.5rem; border-top:1px solid var(--borde); }
.liga-item .ir { display:inline-flex; align-items:center; gap:.3rem; margin-top:.75rem;
  font-size:.78rem; font-weight:700; color:var(--oro-claro); }

/* ---- Pestanas (tab bar tipo consola) ---- */
.tabs { display:flex; gap:.5rem; overflow-x:auto; margin-bottom:1.6rem; padding:.35rem; 
  background: rgba(18,41,26,.025); border:1px solid var(--borde); border-radius:16px; }
.tabs a { white-space:nowrap; text-decoration:none; font-size:.9rem; font-weight:700;
  padding:.62rem 1.3rem; border-radius:12px; color:var(--sutil); background:transparent;
  border:1px solid transparent; transition:all .15s; text-transform:uppercase; letter-spacing:.02em; }
.tabs a:hover { color:#12291a; background:rgba(18,41,26,.05); }
.tabs a.on { background:linear-gradient(160deg,var(--oro-claro),var(--oro)); color:#20140a;
  border-color:transparent; box-shadow: var(--brillo-oro); }
.migaja { font-size:.88rem; margin-bottom:.7rem; }
.migaja a { color:var(--sutil); text-decoration:none; font-weight:600; }
.migaja a:hover { color:var(--cian); }

/* ---- Encabezado de liga: fusionado con las pestanas, sin barra propia
   (antes era una tarjeta aparte -- ahora solo el titulo y los botones de
   temporada/estado/compartir, justo encima del menu de pestanas). ---- */
.tabs-cabecera { display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:.9rem; }
.tabs-titulo h1 { color:#12291a; font-size:clamp(1.05rem, 1.7vw, 1.35rem);
  border-left:4px solid var(--oro); padding-left:.6rem; line-height:1.15; margin:0; }
.tabs-acciones { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.liga-temp { background:var(--oro-suave); color:var(--oro-claro);
  border:1px solid var(--oro-borde); border-radius:99px;
  font-weight:800; font-size:clamp(.68rem, 1vw, .78rem);
  padding:.3rem .8rem; white-space:nowrap; }
.liga-estado { font-size:.64rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:.24rem .7rem; border-radius:99px; }
.liga-estado.en_curso { background:rgba(43,229,147,.15); color:var(--verde); border:1px solid rgba(43,229,147,.5); box-shadow:0 0 12px rgba(43,229,147,.25); }
.liga-estado.finalizada { background:rgba(255,183,3,.14); color:var(--oro-claro); border:1px solid rgba(255,183,3,.4); }
.liga-estado.planeacion { background:rgba(18,41,26,.07); color:var(--sutil); border:1px solid rgba(18,41,26,.16); }
.btn-compartir { font-family:inherit; font-size:.68rem; font-weight:800; cursor:pointer;
  border:0; border-radius:99px; padding:.38rem .95rem; color:#20140a;
  background:linear-gradient(160deg,var(--oro-claro),var(--oro) 60%,#c98700);
  box-shadow: var(--brillo-oro); text-transform:uppercase; letter-spacing:.03em;
  transition:transform .12s; }
.btn-compartir:hover { transform:translateY(-1px); }
.btn-compartir:active { transform:translateY(1px); }

/* ---- Resultados destacados ---- */
.destacado-jornada { background:linear-gradient(155deg,var(--tinta-2),var(--tinta));
  border:1px solid var(--borde); color:#12291a; border-radius:var(--radio);
  padding:1.6rem 1.7rem; margin-bottom:1.6rem; box-shadow:var(--sombra); }
.destacado-jornada h3 { color:var(--cian); font-size:1.05rem; margin-bottom:1rem;
  letter-spacing:.08em; text-transform:uppercase; font-family:var(--f-hud); font-weight:700; }
.marcador-fila { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 0; border-bottom:1px solid var(--borde); font-size:1.02rem; }
.marcador-fila:last-child { border-bottom:0; }
.marcador-fila .m { font-family: var(--f-hud); font-weight:800; font-size:1.3rem;
  color:var(--oro-claro); white-space:nowrap; background:rgba(18,41,26,.05);
  padding:.15rem .9rem; border-radius:10px; border:1px solid var(--borde); }

/* ---- Fotos y escudos en tablas ---- */
.goleo-foto { width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:center 25%;
  display:block; box-shadow:0 0 0 2px var(--oro), 0 0 12px rgba(255,183,3,.3); }
.goleo-sin { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--tinta-2); color:var(--oro-claro); font-family:var(--f-titulos); font-weight:800; font-size:1.05rem;
  border:1px solid var(--borde); }
.esc-mini { width:32px; height:32px; object-fit:contain; border-radius:8px; display:inline-flex; }
.esc-sin { align-items:center; justify-content:center; background:var(--tinta-2);
  color:var(--oro-claro); font-family:var(--f-titulos); font-weight:800; font-size:.85rem; }

/* ---- Estadisticas del partido: alineacion en dos columnas ---- */
.partido-equipos { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.4rem; }
.partido-equipo-col { background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); padding:1rem 1.1rem; box-shadow:var(--sombra); }
.partido-cabeza-col { margin-bottom:.7rem; padding-bottom:.6rem; border-bottom:2px solid var(--oro); }
.partido-equipo-nom { display:block; font-family: var(--f-titulos); font-weight:800;
  font-size:1rem; color:#12291a; text-transform:uppercase; letter-spacing:.02em; }
.partido-dt { display:block; font-size:.76rem; color:var(--sutil); margin-top:.2rem; }
.partido-jugador-fila { display:flex; align-items:center; gap:.6rem; padding:.4rem 0;
  border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap; }
.partido-jugador-fila:last-child { border-bottom:none; }
.pj-dorsal { flex:none; width:1.5rem; text-align:center; font-family: var(--f-hud);
  font-weight:800; color:var(--sutil); font-size:.85rem; }
.pj-nombre { flex:1; min-width:80px; font-weight:600; font-size:.86rem; color:#12291a;
  text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-nombre:hover { color:var(--oro-claro); }
.pj-iconos { flex:none; display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.pj-badge { display:inline-flex; align-items:center; gap:.15rem; font-size:.72rem;
  color:var(--oro-claro); font-weight:700; white-space:nowrap; }
.pj-ico-img { width:16px; height:16px; object-fit:contain; display:inline-block; vertical-align:middle; }
.pj-ico-emoji { font-size:.85rem; line-height:1; }
.pj-min { color:var(--sutil); font-weight:600; font-size:.66rem; }
@media (max-width:640px) {
  .partido-equipos { grid-template-columns:1fr; }
}

/* ---- Vitrina de cards ---- */
.mini-titulo { font-family: var(--f-titulos); font-size:1.05rem; font-weight:700;
  margin-bottom:.8rem; color:#12291a; }
.vitrina { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.8rem;
  background:
    linear-gradient(180deg, rgba(4,7,16,.65) 0%, rgba(4,7,16,.4) 100%),
    var(--img-cards) center / cover no-repeat,
    linear-gradient(160deg, var(--tinta-2), var(--tinta));
  border:1px solid var(--borde); border-radius:var(--radio);
  padding:2rem clamp(1rem, 3vw, 2.4rem); box-shadow:var(--sombra); }
.vitrina a { text-decoration:none; display:block; transition:transform .15s, filter .15s; }
.vitrina a:hover { transform:translateY(-4px); filter:drop-shadow(0 0 16px rgba(255,183,3,.35)); }
.vitrina .pcard-marco, .vitrina .acard-marco { width:100% !important; aspect-ratio:68/96; }
@media (max-width: 980px) { .vitrina { grid-template-columns:repeat(2, 1fr); padding:1.4rem; gap:1.2rem; } }

/* ---- Noticias: tarjeta cuadrada, mismo tamano de imagen que
   Instalaciones (220-260px) -- pero con el texto mas chico, que es lo
   que se sobre-extendia en tarjetas angostas. Slide si la noticia
   tiene varias imagenes y un boton para compartirla como imagen real. ---- */
.noticias { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,260px)); gap:18px; }
.noticia { background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra); transition:transform .15s, border-color .15s; }
.noticia:hover { transform:translateY(-3px); border-color:var(--oro-borde); }
.noticia-marco { position:relative; aspect-ratio:1/1; background:var(--panel-2); overflow:hidden; }
.noticia-marco img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.noticia-flecha { position:absolute; top:50%; transform:translateY(-50%); width:26px; height:26px;
  border-radius:50%; border:none; background:rgba(0,0,0,.45); color:#fff; font-size:1rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; }
.noticia-flecha:hover { background:rgba(0,0,0,.65); }
.noticia-flecha-izq { left:8px; }
.noticia-flecha-der { right:8px; }
.noticia-dots { position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:5px; }
.noticia-dots span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); }
.noticia-dots span.on { background:#fff; }
.noticia .cuerpo { padding:.8rem .9rem .9rem; }
.noticia .fecha { font-size:.62rem; color:var(--cian); text-transform:uppercase;
  letter-spacing:.06em; font-weight:700; }
.noticia h3 { font-size:.86rem; margin:.3rem 0 .35rem; color:#12291a; line-height:1.25; }
.noticia p { font-size:.72rem; color:var(--sutil); line-height:1.4; }
.noticia-leer-mas { display:inline-block; margin-top:.3rem; font-size:.7rem; font-weight:700;
  color:var(--oro-claro); text-decoration:none; }
.noticia-leer-mas:hover { text-decoration:underline; }
.noticia-compartir { display:block; margin-top:.5rem; background:var(--panel-2); border:1px solid var(--borde);
  border-radius:999px; padding:.35rem .8rem; font-size:.7rem; font-weight:700; color:#12291a; cursor:pointer; }
.noticia-compartir:hover { background:var(--tinta-3); }
.noticia-compartir:disabled { opacity:.6; cursor:default; }

/* ---- Patrocinadores / servicios / galeria / contacto ---- */
.patrocinadores { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.patrocinador { border-radius:var(--radio); overflow:hidden; border:1px solid var(--borde);
  background:var(--panel); box-shadow:var(--sombra); }
/* aspect-ratio en vez de una altura fija: la medida recomendada al subir
   el banner es 1600x400 en escritorio (4:1) y 900x700 en movil (~1.29:1,
   ver deportivo/publicidad.php) -- una altura fija en px no coincidia con
   ninguna de las dos y recortaba mal el banner en casi todos los anchos
   de pantalla. El punto de quiebre (640px) es el mismo que ya usa el
   <source media="(max-width:640px)"> en liga.php para elegir la imagen. */
.patrocinador picture { display:block; width:100%; aspect-ratio:1600/400; }
.patrocinador img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px) {
  .patrocinador picture { aspect-ratio:900/700; }
}
/* Tarjeta de texto para un banner sin imagen (solo titulo/subtitulo) --
   mismo formato/proporcion que uno con imagen, para no romper la fila. */
.patrocinador-texto { aspect-ratio:1600/400; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:.3rem;
  padding:1rem 1.4rem; background:linear-gradient(155deg,var(--tinta-2),var(--tinta)); }
.patrocinador-texto .t { font-family: var(--f-titulos); font-weight:800;
  font-size:1.05rem; color:#12291a; }
.patrocinador-texto .s { color:var(--sutil); font-size:.85rem; }
@media (max-width:640px) {
  .patrocinador-texto { aspect-ratio:900/700; }
}

.servicios { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.servicio { background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.4rem 1.5rem; box-shadow:var(--sombra); border-top:3px solid var(--oro); }
.servicio h3 { font-size:1.08rem; margin-bottom:.4rem; color:#12291a; }
.servicio p { font-size:.94rem; color:var(--sutil); }
.servicio .precio { color:var(--oro-claro); font-weight:800; font-size:1.05rem; margin-top:.6rem; font-family:var(--f-hud); }

.galeria { display:flex; flex-wrap:wrap; gap:.9rem; }
.galeria img { height:280px; border-radius:14px; flex:1; object-fit:cover; min-width:260px;
  box-shadow:var(--sombra); border:1px solid var(--borde); }
@media (max-width:720px) { .galeria img { height:200px; min-width:100%; } }

/* ---- Instalaciones: fotos como tarjetas (imagen + su titulo, ej.
   "Fronton"/"Gimnasio") en vez de solo la imagen suelta -- y chips de
   canchas debajo (o solos si el deportivo no subio fotos). ---- */
.instalaciones-fotos { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,260px)); gap:18px; }
.instalacion-foto { background:var(--panel); border:1px solid var(--borde); border-radius:14px;
  overflow:hidden; box-shadow:var(--sombra); transition:transform .15s, box-shadow .15s; }
.instalacion-foto:hover { transform:translateY(-3px); box-shadow:var(--sombra-fuerte); }
.instalacion-foto-marco { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--panel-2); }
.instalacion-foto-marco img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.instalacion-foto-titulo { padding:.6rem .8rem; font-weight:700; font-size:.9rem; color:#12291a; text-align:center; }
/* Nombre + direccion/telefono del deportivo: va DENTRO de
   .instalacion-foto-compartible para que quede grabado en automatico en
   la imagen cuando se comparte esa foto -- sin esto, la foto compartida
   no dice de que deportivo es ni como contactarlo. */
.instalacion-foto-datos { padding:0 .8rem .7rem; text-align:center; border-top:1px solid var(--borde); margin-top:.2rem; padding-top:.5rem; }
.instalacion-foto-datos .nombre { font-weight:700; font-size:.78rem; color:#12291a; }
.instalacion-foto-datos .dato { font-size:.68rem; color:var(--sutil); margin-top:.15rem; }
.instalacion-foto-pie { padding:0 .8rem .8rem; text-align:center; }

.instalaciones-canchas { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.9rem; }
.cancha-chip { display:inline-block; background:var(--panel); border:1px solid var(--borde);
  border-radius:999px; padding:.5rem 1.1rem; font-size:.88rem; font-weight:600; color:#12291a;
  box-shadow:var(--sombra); }

/* ---- Datos clave de una convocatoria (tipo de futbol, precio de
   inscripcion, premio, costo de arbitraje) -- misma pastilla que
   .cancha-chip pero mas chica para caber en la tarjeta angosta. ---- */
.convocatoria-datos { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0; }
.conv-chip { display:inline-block; background:var(--panel-2); border:1px solid var(--borde);
  border-radius:999px; padding:.25rem .6rem; font-size:.66rem; font-weight:700; color:#12291a;
  line-height:1.3; }

/* ---- Patrocinadores de la plataforma (mostrados tambien en la portada
   del deportivo). Son anuncios reales de negocios locales (tienda de
   uniformes, balones, etc.), no logos de marca -- por eso la tarjeta es
   mas grande, tipo anuncio de Facebook: foto apaisada + nombre +
   descripcion corta. Nombres de clase distintos a .patrocinadores/
   .patrocinador (esas son del banner de publicidad a nivel liga, mas
   abajo en este mismo archivo). ---- */
.patro-marquee { overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.patro-track { display:flex; gap:1.1rem; width:max-content; animation:patro-scroll 26s linear infinite; }
.patro-marquee:hover .patro-track { animation-play-state:paused; }
@keyframes patro-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.patro-item { flex:none; width:300px; background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio-chico);
  overflow:hidden; box-shadow:var(--sombra); transition:transform .15s ease, box-shadow .15s ease;
  text-decoration:none; display:block; }
.patro-item:hover { transform:translateY(-3px); box-shadow:var(--sombra-fuerte); }
.patro-item .patro-img { aspect-ratio:4/3; background:var(--panel-2); display:flex; align-items:center;
  justify-content:center; overflow:hidden; }
.patro-item .patro-img img { width:100%; height:100%; object-fit:cover; display:block; }
.patro-item .sinimg { font-family:var(--f-titulos); font-weight:800; color:var(--sutil); font-size:1.1rem;
  text-align:center; padding:0 1rem; }
.patro-item .cuerpo { padding:.8rem .9rem .9rem; }
.patro-item .eyebrow { font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--cian); }
.patro-item h3 { font-size:.94rem; margin:.25rem 0 .3rem; color:#12291a; line-height:1.25; }
.patro-item p { font-size:.76rem; color:var(--sutil); line-height:1.4; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:720px) {
  .patro-item { width:230px; }
  .patro-item h3 { font-size:.86rem; }
  .patro-item p { font-size:.72rem; }
}

.productos-plataforma { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
.producto-item { background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio-chico);
  overflow:hidden; box-shadow:var(--sombra); transition:transform .15s ease, box-shadow .15s ease;
  display:flex; align-items:center; gap:.6rem; padding:.5rem; }
.producto-item:hover { transform:translateY(-3px); box-shadow:var(--sombra-fuerte); }
.producto-item img, .producto-item .sinimg { width:52px; height:52px; border-radius:9px; flex:none; }
.producto-item img { object-fit:cover; display:block; }
.producto-item .sinimg { display:flex; align-items:center; justify-content:center;
  background:var(--tinta-2); font-family:var(--f-titulos); font-weight:800; color:var(--sutil); font-size:1rem; }
.producto-item .cuerpo { min-width:0; }
.producto-item h3 { font-size:.82rem; color:#12291a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.producto-item .precio { display:inline-block; margin-top:.2rem; background:var(--oro-suave); color:var(--oro-claro);
  font-weight:700; font-size:.74rem; padding:.16rem .55rem; border-radius:99px; }

/* ---- Mancha ambiental: se asoma fuera de su seccion para que el color
   "sangre" hacia la de al lado, en vez de cortar en seco. ---- */
.blob-ambiente { position:absolute; border-radius:50%; filter:blur(90px); opacity:.22; pointer-events:none; z-index:0; }
/* Se sale del viewport en pantallas angostas y provoca scroll horizontal
   en todo el sitio -- se oculta en movil, es puramente de ambientacion. */
@media (max-width:640px) { .blob, .blob-ambiente { display:none; } }

.contacto { background:linear-gradient(155deg,var(--tinta-2),var(--tinta)); color:#12291a;
  border:1px solid var(--borde); border-radius:var(--radio); padding:2rem; display:flex; flex-wrap:wrap; gap:1.8rem;
  align-items:center; box-shadow:var(--sombra); }
.contacto .dato { font-size:1rem; }
.contacto .dato b { color:var(--oro-claro); }

/* ---- Filas de resultado ---- */
.vs-panel { background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); padding:1rem 1rem 1.1rem; margin-bottom:1.6rem; box-shadow:var(--sombra); }
.vs-panel h3 { color:var(--cian); font-size:.92rem; margin:.3rem .5rem .8rem;
  letter-spacing:.08em; text-transform:uppercase; font-family:var(--f-hud); font-weight:700; }
.vs-fila { display:flex; align-items:center; gap:1.1rem;
  padding:.9rem 1rem; border-radius:14px; text-decoration:none; color:var(--texto);
  transition:background .15s, transform .15s; }
.vs-fila:nth-child(even) { background:rgba(18,41,26,.03); }
.vs-fila:hover { background:rgba(34,224,255,.06); transform:translateX(2px); }
/* Escudo sin marco/caja dorada -- flota directamente sobre el panel
   (antes tenia fondo + borde + box-shadow dorado, se veia "encajonado"). */
.vs-esc { width:62px; height:62px; flex:none;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.vs-esc img { width:100%; height:100%; object-fit:contain; display:block; }
.vs-esc-inicial { width:100%; height:100%; border-radius:50%;
  background:var(--tinta-2); border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-titulos); font-weight:800; color:var(--oro-claro); font-size:1.3rem; }
.vs-nom { flex:1; font-weight:700; font-size:1.1rem; text-transform:uppercase;
  letter-spacing:.03em; color:#12291a; }
.vs-nom.der { text-align:right; }
.vs-marca { font-family: var(--f-hud); font-weight:800; font-size:1.75rem;
  color:var(--oro-claro); white-space:nowrap; background:rgba(255,183,3,.1);
  border:1px solid var(--oro-borde); padding:.3rem 1.2rem; border-radius:12px; flex:none; }
.vs-marca small { display:block; font-size:.6rem; color:var(--cian);
  font-weight:700; letter-spacing:.08em; text-align:center; }
.vs-etapa { font-size:.68rem; color:var(--sutil); flex:none; width:92px;
  text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.vs-centro { display:flex; flex-direction:column; align-items:center; gap:.3rem;
  flex:none; max-width:7.6rem; }
.vs-cancha { font-size:.66rem; font-weight:700; color:var(--sutil);
  text-transform:uppercase; letter-spacing:.04em; text-align:center;
  line-height:1.15; white-space:normal; }
/* ---- Fila de resultado (rediseño: nombre | escudo | marcador | escudo | nombre) ---- */
.resultado-fila { display:flex; align-items:center; gap:1rem;
  padding:.9rem 1rem; border-radius:14px; text-decoration:none; color:var(--texto);
  transition:background .15s, transform .15s; }
.resultado-fila:nth-child(even) { background:rgba(18,41,26,.03); }
.resultado-fila:hover { background:rgba(34,224,255,.06); transform:translateX(2px); }
.equipo-nombre { flex:1; font-weight:700; font-size:1.05rem; text-transform:uppercase;
  letter-spacing:.03em; color:#12291a; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.equipo-nombre.der { text-align:right; }
.equipo-nombre.izq { text-align:left; }
.resultado-escudo { width:92px; height:92px; border-radius:50%; flex:none;
  background:var(--tinta-2); display:flex; align-items:center; justify-content:center;
  overflow:hidden; }
.resultado-escudo img { width:100%; height:100%; object-fit:cover; }
.resultado-escudo span { font-family: var(--f-titulos); font-weight:800; color:var(--oro-claro); font-size:1.7rem; }
.resultado-centro { display:flex; flex-direction:column; align-items:center; gap:.3rem;
  flex:none; min-width:130px; }
.resultado-jornada { font-size:.68rem; color:var(--sutil); text-transform:uppercase;
  letter-spacing:.05em; font-weight:700; }
.resultado-marcador { font-family: var(--f-hud); font-weight:800; font-size:2.4rem;
  color:var(--oro-claro); white-space:nowrap; line-height:1; }
.resultado-penales { font-size:.62rem; font-weight:700; color:var(--cian);
  letter-spacing:.05em; text-transform:uppercase; }
.resultado-cancha { font-size:.66rem; font-weight:700; color:var(--sutil);
  text-transform:uppercase; letter-spacing:.04em; text-align:center;
  line-height:1.15; white-space:normal; }

.lig-aviso { background:rgba(255,183,3,.08); border:1px solid var(--oro-borde); color:var(--oro-claro);
  border-radius:12px; padding:.8rem 1.1rem; font-size:.88rem; margin-bottom:1.1rem;
  line-height:1.4; }
.lig-aviso b { color:#12291a; }
.vs-marca.repro { background:rgba(255,79,112,.1); border:1px solid rgba(255,79,112,.4); color:var(--rojo);
  font-size:.78rem; letter-spacing:.04em; }
.vs-marca.repro small { color:var(--rojo); opacity:.8; }

/* Pestana Reprogramados */
.rep-fila { display:flex; align-items:flex-start; gap:.9rem; padding:.9rem .8rem;
  border-radius:14px; text-decoration:none; color:var(--texto); transition:background .15s; }
.rep-fila:nth-child(even) { background:rgba(18,41,26,.03); }
.rep-fila:hover { background:rgba(255,183,3,.07); }
.rep-jor { flex:none; width:2.9rem; height:2.9rem; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--tinta-2); color:var(--oro-claro); border:1px solid var(--borde);
  font-family: var(--f-hud); font-weight:800; font-size:.95rem; }
.rep-cuerpo { flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem; }
.rep-equipos { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:.92rem; color:#12291a; }
.rep-vs { color:var(--sutil); font-size:.75rem; font-weight:700; }
.rep-motivo { font-size:.8rem; color:var(--rojo); font-weight:600; }
.rep-fechas { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-size:.82rem; }
.rep-era { color:var(--sutil); text-decoration:line-through; }
.rep-flecha { color:var(--oro); font-weight:800; }
.rep-ahora { color:var(--verde); font-weight:700; }
.rep-ahora.pendiente { background:rgba(255,183,3,.12); border:1px solid var(--oro-borde); color:var(--oro-claro);
  font-weight:800; font-size:.72rem; letter-spacing:.08em; border-radius:99px; padding:.15rem .6rem; }
@media (max-width:560px) {
  .rep-fila { gap:.6rem; }
  .rep-jor { width:2.3rem; height:2.3rem; font-size:.78rem; }
  .rep-equipos .vs-esc { width:30px; height:30px; }
}

/* Muro de campeones: trofeos acumulados a la derecha */
.muro-trofeos { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:.35rem; margin-left:auto; max-width:42%; }
.muro-trofeos .mas { font-family: var(--f-hud); font-weight:800; font-size:.85rem;
  color:var(--oro-claro); background:rgba(255,183,3,.1); border:1px solid var(--oro-borde);
  border-radius:99px; padding:.1rem .5rem; }
@media (max-width:560px) { .muro-trofeos { max-width:32%; gap:.2rem; }
  .muro-trofeos img { width:2rem !important; height:2rem !important; }
  .muro-trofeos span[title] > span { font-size:2rem !important; } }

/* ---- Mapa de liguilla estilo mundial ---- */
.lm-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:22px; }
.lm-mapa { display:flex; align-items:stretch; gap:34px;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255,183,3,.14), transparent 60%),
    linear-gradient(165deg, #101830 0%, #05070f 80%);
  border:1px solid var(--borde);
  border-radius:22px; padding:1.4rem 1.2rem 1.6rem; color:#fff;
  min-height:340px; }
.lm-col { display:flex; flex-direction:column; flex:1; min-width:0; }
.lm-col .lm-etiq { text-align:center; font-family: var(--f-hud); font-weight:700;
  font-size:.68rem; letter-spacing:.22em; color:var(--cian); margin-bottom:.6rem; }
.lm-pares { display:flex; flex-direction:column; flex:1; }
.lm-par { position:relative; display:flex; flex-direction:column; flex:1; }
.lm-slot { flex:1; display:flex; align-items:center; }
.lm-slot .lm-serie { width:100%; }

/* Conectores */
.lm-col.izq .lm-par:not(.solo)::after { content:""; position:absolute; right:-18px;
  top:25%; height:50%; border-right:1px solid rgba(255,183,3,.55); }
.lm-col.izq .lm-par::before { content:""; position:absolute; right:-34px; top:50%;
  width:16px; border-top:1px solid rgba(255,183,3,.55); }
.lm-col.izq .lm-slot::after { content:""; position:absolute; right:-18px; width:18px;
  border-top:1px solid rgba(255,183,3,.35); }
.lm-col.izq .lm-slot { position:relative; }
.lm-col.izq .lm-slot::after { top:50%; }
.lm-col.der .lm-par:not(.solo)::after { content:""; position:absolute; left:-18px;
  top:25%; height:50%; border-left:1px solid rgba(255,183,3,.55); }
.lm-col.der .lm-par::before { content:""; position:absolute; left:-34px; top:50%;
  width:16px; border-top:1px solid rgba(255,183,3,.55); }
.lm-col.der .lm-slot { position:relative; }
.lm-col.der .lm-slot::after { content:""; position:absolute; left:-18px; width:18px;
  top:50%; border-top:1px solid rgba(255,183,3,.35); }

/* Serie = dos equipos apilados */
.lm-serie { display:flex; flex-direction:column; gap:4px; }
.lm-lado.gana .lm-eq { border-color:var(--oro); box-shadow:0 0 0 1px rgba(255,183,3,.4), 0 0 10px rgba(255,183,3,.25); }
.lm-lado.pierde .lm-eq { opacity:.45; }
.lm-eq { display:flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:.32rem .5rem; min-height:38px; }
.lm-eq.vacio { border-style:dashed; border-color:rgba(255,255,255,.16); }
.lm-esc { width:26px; height:26px; border-radius:7px; flex:none; overflow:hidden;
  background:var(--tinta-2); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1.5px var(--oro); }
.lm-esc img { width:100%; height:100%; object-fit:cover; }
.lm-esc span { font-family: var(--f-titulos); font-weight:800; font-size:.72rem; color:var(--oro-claro); }
.lm-esc.vacio { background:rgba(255,255,255,.06); box-shadow:none; }
.lm-nom { flex:1; min-width:0; font-weight:700; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.02em; color:#fff; text-decoration:none; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lm-nom:hover { color:var(--cian); }
.lm-nom.vacio { color:rgba(255,255,255,.3); }
.lm-seed { flex:none; font-family: var(--f-titulos); font-weight:800; font-size:.6rem;
  color:var(--cian); width:1.25rem; text-align:center; }
.lm-gol { flex:none; font-family: var(--f-titulos); font-weight:800; font-size:.85rem;
  color:#fff; background:rgba(255,183,3,.22); border:1px solid rgba(255,183,3,.5);
  border-radius:7px; padding:.05rem .4rem; }
.lm-gol small { font-size:.55rem; color:var(--oro-claro); margin-left:.15rem; }

/* Link "Ver detalle" al partido especifico (goleadores, etc.) -- solo
   aparece si esa serie ya tiene un partido jugado. */
.lm-detalle { display:block; text-align:center; margin-top:2px;
  font-family: var(--f-hud); font-weight:700; font-size:.58rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cian); text-decoration:none; opacity:.85; }
.lm-detalle:hover { opacity:1; text-decoration:underline; }

/* Centro: trofeo + FINAL */
.lm-acciones { display:flex; justify-content:flex-end; gap:.6rem; margin-bottom:.7rem; }
.lm-btn { font-family:inherit; font-size:.82rem; font-weight:800; cursor:pointer;
  background:linear-gradient(160deg, var(--oro-claro), var(--oro) 60%, #c98700);
  color:#20140a; border:0; border-radius:99px; padding:.5rem 1.2rem; box-shadow:var(--brillo-oro);
  text-transform:uppercase; letter-spacing:.03em; transition:transform .12s; }
.lm-btn:hover { transform:translateY(-1px); }
.lm-btn.sec { background:rgba(18,41,26,.05); border:1px solid var(--borde-fuerte); color:#12291a; box-shadow:none; }
.lm-previa { min-height:0; padding:1rem 1.1rem 1.1rem; }
.lm-previa-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:.8rem; }
.lm-col.centro { justify-content:center; flex:1.3; position:relative; }
/* Reflector detras del trofeo: sin esto se perdia en medio del cuadro,
   ahora tiene su propio "spotlight" dorado que lo separa del resto. */
.lm-col.centro::before {
  content:""; position:absolute; inset:-2.2rem -.8rem; z-index:0; pointer-events:none;
  background:radial-gradient(62% 58% at 50% 26%, rgba(255,183,3,.32), transparent 72%);
}
.lm-centro { display:flex; flex-direction:column; align-items:center; gap:.6rem; position:relative; z-index:1; }
.lm-trofeo { filter:drop-shadow(0 14px 30px rgba(255,183,3,.55)); }
.lm-etiq-final { font-family: var(--f-hud); font-weight:700; font-size:.8rem;
  letter-spacing:.34em; color:var(--cian); }
.lm-campeon { font-family: var(--f-titulos); font-weight:800; font-size:1.5rem;
  text-transform:uppercase; text-align:center; line-height:1.15;
  background:linear-gradient(180deg, var(--oro-claro), var(--oro) 60%, #9a6d00);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(255,183,3,.3));
}
.lm-centro .lm-serie { width:100%; min-width:170px; }
@media (max-width:720px) {
  .lm-mapa { gap:26px; padding:1rem .8rem 1.2rem; }
  .lm-col.izq .lm-par::before, .lm-col.der .lm-par::before { width:12px; }
  .lm-col.izq .lm-par::before { right:-26px; }
  .lm-col.der .lm-par::before { left:-26px; }
  .lm-col.izq .lm-par:not(.solo)::after { right:-14px; }
  .lm-col.der .lm-par:not(.solo)::after { left:-14px; }
  .lm-col.izq .lm-slot::after { right:-14px; width:14px; }
  .lm-col.der .lm-slot::after { left:-14px; width:14px; }
}
@media (max-width: 560px) {
  .vs-etapa { display:none; }
  .vs-fila { gap:.45rem; padding:.65rem .3rem; }
  .vs-nom { font-size:.72rem; letter-spacing:0; min-width:0;
    overflow-wrap:break-word; line-height:1.18; }
  .vs-esc { width:38px; height:38px; }
  .vs-marca { font-size:1rem; padding:.15rem .5rem; border-radius:9px; }
  .vs-marca small { font-size:.5rem; }
  .vs-centro { max-width:5.6rem; gap:.2rem; }
  .vs-cancha { font-size:.55rem; letter-spacing:.02em; }

  .resultado-fila { gap:.6rem; padding:.7rem .5rem; }
  .equipo-nombre { font-size:.72rem; letter-spacing:0; overflow-wrap:break-word;
    white-space:normal; line-height:1.18; }
  .resultado-escudo { width:58px; height:58px; }
  .resultado-marcador { font-size:1.6rem; }
  .resultado-centro { min-width:82px; }
  .resultado-jornada { font-size:.55rem; }
  .resultado-cancha { font-size:.55rem; letter-spacing:.02em; }
}

/* ---- Filas de lideres (goleo/asistencias) ---- */
.lid-fila { display:flex; align-items:center; gap:1.1rem;
  padding:.85rem 1rem; border-radius:14px; text-decoration:none; color:var(--texto);
  transition:background .15s, transform .15s; }
.lid-fila:nth-child(even) { background:rgba(18,41,26,.03); }
.lid-fila:hover { background:rgba(34,224,255,.06); transform:translateX(2px); }
.lid-rank { font-family: var(--f-hud); font-weight:800; font-size:1.4rem;
  color:var(--sutil); width:2.4rem; text-align:center; flex:none; }
.lid-fila[data-rank="1"] .lid-rank { color:var(--oro); text-shadow:0 0 12px rgba(255,183,3,.6); }
.lid-fila[data-rank="2"] .lid-rank { color:#c7d2e5; text-shadow:0 0 10px rgba(199,210,229,.4); }
.lid-fila[data-rank="3"] .lid-rank { color:#e0a06a; text-shadow:0 0 10px rgba(224,160,106,.4); }
.lid-foto { width:78px; height:78px; border-radius:50%; flex:none; overflow:hidden;
  background:var(--tinta-2); border:1px solid var(--borde);
  box-shadow:0 0 0 2px var(--oro); }
.lid-foto img { width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block; }
.lid-foto span { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family: var(--f-titulos); font-weight:800; font-size:1.3rem; color:var(--oro-claro); }
.lid-info { flex:1; min-width:0; }
.lid-info .nom { font-weight:700; font-size:1.15rem; letter-spacing:.02em; color:#12291a; }
.lid-info .sub { font-size:.82rem; color:var(--sutil); margin-top:.15rem; }
.lid-estrellas { flex:none; letter-spacing:.06em; white-space:nowrap; font-size:1rem; filter:drop-shadow(0 0 6px rgba(255,183,3,.5)); }
.lid-total { font-family: var(--f-hud); font-weight:800; font-size:1.55rem;
  color:var(--oro-claro); white-space:nowrap; background:rgba(255,183,3,.1);
  border:1px solid var(--oro-borde); padding:.25rem 1.1rem; border-radius:12px;
  flex:none; text-align:center; }
.lid-total small { display:block; font-size:.58rem; color:var(--cian);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width: 560px) {
  .lid-foto { width:58px; height:58px; }
  .lid-info .nom { font-size:.95rem; }
  .lid-total { font-size:1.15rem; padding:.2rem .7rem; }
  .lid-estrellas { display:none; }
}

/* ---- Tabla general: escudo grande sobresaliendo arriba de cada fila ----
   overflow-x:auto como red de seguridad: si por lo que sea una fila no
   cabe (modo "sitio de escritorio" en el navegador movil, letra del
   sistema mas grande, un equipo con nombre muy largo), se puede
   deslizar el panel completo hacia los lados en vez de obligar a hacer
   zoom en toda la pagina para verla completa. OJO: al fijar
   overflow-x, el navegador vuelve "auto" tambien a overflow-y (asi lo
   define la spec, no se puede dejar solo uno en visible) -- el
   padding-top se subio de 2.9rem a 3.4rem para que el escudo de la
   primera fila (que sobresale -52px) quede DENTRO de la caja del panel
   y no se corte arriba. */
.tg-panel { background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); padding:3.4rem .8rem .8rem; box-shadow:var(--sombra);
  display:flex; flex-direction:column; gap:3rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch; }

.tg-fila { position:relative; display:flex; align-items:center; justify-content:center;
  gap:1.5rem; padding:3.3rem .8rem .9rem; border-radius:14px;
  background:rgba(18,41,26,.03); border:1px solid var(--borde);
  text-decoration:none; color:var(--texto); transition:transform .15s, border-color .15s;
  min-width:min-content; }
.tg-fila:hover { transform:translateY(-3px); border-color:var(--oro-borde); }
.tg-fila:nth-child(1) { background:linear-gradient(180deg, rgba(255,183,3,.1), rgba(18,41,26,.03) 75%);
  border-color:rgba(255,183,3,.3); }

/* Escudo: sin marco, deja ver la forma real del PNG, sobresaliendo arriba */
.tg-esc { position:absolute; top:-52px; left:50%; transform:translateX(-50%);
  width:124px; height:124px; flex:none; z-index:2;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.55)); }
.tg-esc img { width:100%; height:100%; object-fit:contain; }
.tg-esc span { width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:var(--tinta-2); border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-titulos); font-weight:800; color:var(--oro-claro); font-size:1.3rem; }

/* Centro: lugar + nombre, debajo del escudo */
.tg-centro { flex:none; max-width:220px; min-width:0; text-align:center; }
.tg-nombre { font-weight:700; font-size:.86rem; color:#12291a; letter-spacing:.01em; }
.tg-rank { font-family: var(--f-hud); font-weight:800; color:var(--sutil); margin-right:.35rem; }
.tg-fila:nth-child(1) .tg-rank { color:var(--oro); text-shadow:0 0 12px rgba(255,183,3,.6); }
.tg-fila:nth-child(2) .tg-rank { color:#c7d2e5; text-shadow:0 0 10px rgba(199,210,229,.4); }
.tg-fila:nth-child(3) .tg-rank { color:#e0a06a; text-shadow:0 0 10px rgba(224,160,106,.4); }
.tg-sub { display:none; font-size:.78rem; color:var(--sutil); margin-top:.25rem; }

/* Bloques de estadisticas pegados al centro (junto al escudo/nombre) */
.tg-izq, .tg-der { display:flex; gap:.85rem; flex:none; }
.tg-mini { text-align:center; min-width:2rem; }
.tg-mini .et { display:block; font-size:.6rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--sutil); }
.tg-mini .val { display:block; font-family: var(--f-hud); font-weight:800; font-size:1.25rem;
  color:var(--texto); font-variant-numeric: tabular-nums; margin-top:.2rem; }
.tg-dif .val.pos { color:var(--verde); }
.tg-dif .val.neg { color:var(--rojo); }
.tg-dif .val.cero { color:var(--sutil); }

.tg-pts { font-family: var(--f-hud); font-weight:800; font-size:1.3rem;
  color:var(--oro-claro); white-space:nowrap; background:rgba(255,183,3,.1);
  border:1px solid var(--oro-borde); padding:.2rem .85rem; border-radius:12px;
  flex:none; text-align:center; align-self:center; }
.tg-pts small { display:block; font-size:.56rem; color:var(--cian);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

.tg-head { display:none; }

@media (max-width: 720px) {
  .tg-izq, .tg-der { display:none; }
  .tg-sub { display:block; font-size:.68rem; }
  .tg-panel { padding:1.9rem .4rem .4rem; gap:1.3rem; }
  .tg-fila { padding:1.8rem .5rem .6rem; gap:.7rem; }
  .tg-esc { width:56px; height:56px; top:-26px; }
  .tg-centro { max-width:150px; }
  .tg-nombre { font-size:.7rem; }
  .tg-pts { font-size:.85rem; padding:.14rem .55rem; }
  .tg-pts small { font-size:.5rem; }
}

/* ---- Debajo de la tabla de posiciones (que va a ancho completo, sin
   tocar su diseño): goleo y proximos partidos, uno al lado del otro. ---- */
.tabla-inferior { display:flex; gap:1.4rem; align-items:flex-start; margin-top:1.4rem; }
.tabla-inferior > .lateral-panel { flex:1 1 0; min-width:0; }
@media (max-width:720px) {
  .tabla-inferior { flex-direction:column; }
  /* En columna, flex-basis ya no limita el ANCHO (solo aplicaria al alto) --
     sin esto el panel podia estirarse mas alla del viewport si algun
     contenido (nombre de equipo largo) no envolvia. */
  .tabla-inferior > .lateral-panel { width:100%; max-width:100%; }
}

.lateral-panel { background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); box-shadow:var(--sombra); padding:1.1rem 1rem; }
.lateral-panel h3 { font-family: var(--f-titulos); font-size:1rem; color:#12291a;
  margin:0 0 .9rem; padding-bottom:.5rem; border-bottom:2px solid var(--oro); }

/* Mini tabla de goleo */
.goleo-mini { display:flex; flex-direction:column; gap:.5rem; }
.goleo-mini-fila { display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--texto); padding:.35rem .3rem;
  border-radius:10px; transition:background .15s; }
.goleo-mini-fila:hover { background:rgba(255,183,3,.08); }
.gm-rank { flex:none; width:1.4rem; text-align:center; font-family: var(--f-hud);
  font-weight:800; color:var(--sutil); font-size:.85rem; }
.gm-foto { flex:none; width:34px; height:34px; border-radius:50%; overflow:hidden;
  background:var(--tinta-2); border:1px solid var(--borde); display:flex;
  align-items:center; justify-content:center; }
.gm-foto img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.gm-foto span { font-family: var(--f-titulos); font-weight:800; font-size:.85rem; color:var(--oro-claro); }
.gm-datos { flex:1; min-width:0; display:flex; flex-direction:column; }
.gm-nombre { font-weight:700; font-size:.85rem; color:#12291a; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-equipo { font-size:.72rem; color:var(--sutil); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.gm-goles { flex:none; font-family: var(--f-hud); font-weight:800; font-size:1rem;
  color:var(--oro-claro); background:rgba(255,183,3,.1); border:1px solid var(--oro-borde);
  border-radius:10px; padding:.1rem .55rem; }

/* Mini lista de proximos partidos (muestra al azar) */
.prox-mini { display:flex; flex-direction:column; gap:.3rem; }
.prox-mini-fila { display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--texto); padding:.5rem .3rem;
  border-radius:10px; transition:background .15s; border-bottom:1px solid var(--borde); }
.prox-mini-fila:last-child { border-bottom:none; }
.prox-mini-fila:hover { background:rgba(255,183,3,.08); }
.pm-fecha { flex:none; width:3.4rem; text-align:center; font-family: var(--f-hud);
  font-weight:800; font-size:.72rem; color:var(--cian); line-height:1.35; }
/* Reparte el ancho completo: equipo (crece) - vs - equipo (crece), en vez
   de amontonarse a la izquierda cuando el panel va a lo ancho (ej. cuando
   no hay goleadores y "Proximos partidos" es el unico panel de la fila). */
.pm-equipos { flex:1; min-width:0; display:flex; align-items:center;
  justify-content:space-between; gap:.7rem; }
.pm-eq { flex:1; min-width:0; display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.85rem; color:#12291a; }
.pm-eq.der { flex-direction:row-reverse; text-align:right; }
.pm-eq .txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Escudo sin marco/caja -- flota directamente sobre el fondo (antes tenia
   una caja con borde dorado, el usuario pidio quitarla). */
.pm-esc { flex:none; width:28px; height:28px; display:flex;
  align-items:center; justify-content:center;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.pm-esc img { width:100%; height:100%; object-fit:contain; display:block; }
.pm-esc .esc-inicial { width:100%; height:100%; border-radius:50%;
  background:var(--tinta-2); border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-titulos); font-weight:800; font-size:.75rem; color:var(--oro-claro); }
.pm-vs { flex:none; font-size:.65rem; color:var(--sutil); text-transform:uppercase; letter-spacing:.1em; }

/* ---- Slider promocional (arriba de la Tabla) ---- */
.promo-slider { position:relative; overflow:hidden; border-radius:var(--radio);
  margin-bottom:1.6rem; box-shadow:var(--sombra-fuerte); background:var(--panel);
  border:1px solid var(--borde); }
.promo-pista { display:flex; transition:transform .6s ease; }
.promo-item { min-width:100%; position:relative; height:min(46vw, 460px);
  display:block; text-decoration:none; color:var(--texto); }
.promo-item img.fondo { width:100%; height:100%; object-fit:cover; display:block; }
.promo-item .capa { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:1rem; }
.promo-item .tagline { font-size:clamp(.72rem,1.3vw,.92rem); font-weight:800; letter-spacing:.3em;
  text-transform:uppercase; color:var(--cian); }
.promo-vs { display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem, 3vw, 3rem); width:100%; max-width:1200px; padding:0 clamp(.5rem, 4vw, 3rem); }
.promo-vs .lado-eq { flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:center; gap:.9rem; }
.promo-vs .eq-nombre { font-family: var(--f-titulos); font-weight:800;
  font-size:clamp(.85rem, 1.9vw, 1.5rem); text-transform:uppercase; text-align:center;
  color:#12291a; line-height:1.15; overflow-wrap:break-word; }
.promo-vs .centro-col { flex:none; display:flex; flex-direction:column;
  align-items:center; gap:.8rem; max-width:34%; }
/* Escudo sin marco/caja dorada -- flota directo sobre el fondo del
   estadio (antes tenia fondo + borde + box-shadow dorado alrededor). */
.promo-vs .esc { width:clamp(84px, 12vw, 156px); height:clamp(84px, 12vw, 156px);
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)); }
.promo-vs .esc img { width:100%; height:100%; object-fit:contain; display:block; }
.promo-vs .esc .esc-inicial { width:100%; height:100%; border-radius:50%;
  background:var(--tinta-2); border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center; }
.promo-vs .esc span { font-family: var(--f-titulos); font-weight:800; font-size:clamp(2rem,4vw,3.2rem); color:var(--oro-claro); }
.promo-vs .centro { font-family: var(--f-hud); font-weight:800;
  font-size:clamp(2rem,5vw,4rem); line-height:1;
  background:linear-gradient(180deg,var(--oro-claro),var(--oro));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(255,183,3,.4)); white-space:nowrap; }
.promo-item .equipos { font-family: var(--f-titulos); font-weight:800;
  font-size:clamp(1.1rem,2.2vw,1.8rem); text-transform:uppercase; color:#12291a; }
.promo-item .detalle { font-size:clamp(.85rem,1.6vw,1.05rem); color:var(--sutil); font-weight:600; text-align:center; }
.promo-item .banner-texto { position:absolute; left:0; right:0; bottom:0;
  padding:2rem 1.4rem .9rem; text-align:left;
  background:linear-gradient(180deg,transparent,rgba(4,6,14,.95)); }
.promo-item .banner-texto .t { font-family: var(--f-titulos); font-weight:800; font-size:clamp(1rem,3vw,1.4rem); color:#fff; }
.promo-item .banner-texto .s { color:var(--cian); font-size:.85rem; }
.promo-carta { display:flex; align-items:center; justify-content:center; gap:1.6rem; height:100%; padding:1rem;
  background:radial-gradient(500px 240px at 70% 20%, rgba(255,183,3,.14), transparent 70%); }
.promo-carta { gap:clamp(1.4rem, 4vw, 4rem); }
.promo-carta .pcard-marco { width:clamp(150px, 24vw, 235px) !important; flex:none; }
.promo-carta .acard-marco { width:clamp(150px, 24vw, 235px) !important; aspect-ratio:68/96; flex:none; }
.promo-carta .lado { max-width:440px; }
.promo-carta .lado { text-align:left; max-width:46%; }
/* Slide con fondo de estadio (proximo partido) */
.slide-estadio {
  background:
    linear-gradient(180deg, rgba(4,7,16,.5) 0%, rgba(4,7,16,.2) 45%, rgba(4,7,16,.5) 100%),
    var(--img-proximo) center 30% / cover no-repeat;
}
.slide-estadio .tagline { color:var(--cian); text-shadow:0 2px 8px rgba(0,0,0,.8); }
.slide-estadio .eq-nombre { color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.8); }
.slide-estadio .detalle { color:#e9edf6; text-shadow:0 2px 8px rgba(0,0,0,.75); }
.slide-estadio .centro { background:linear-gradient(180deg,#fff,var(--oro-claro) 55%,var(--oro));
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 4px 14px rgba(255,183,3,.5)); }
/* (antes ponia un aro dorado extra encima del escudo -- ya se quito, ver .promo-vs .esc) */

/* Slide del campeon con fondo propio */
.slide-campeon {
  background:
    linear-gradient(180deg, rgba(4,6,14,.55) 0%, rgba(4,6,14,.22) 45%, rgba(4,6,14,.55) 100%),
    var(--img-campeon) center / cover no-repeat,
    #04060d;
}
.slide-campeon .tagline { color:var(--cian); text-shadow:0 2px 8px rgba(0,0,0,.85); }
.slide-campeon .equipos { color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.9); }
.slide-campeon .detalle { color:#e9edf6; text-shadow:0 2px 8px rgba(0,0,0,.85); }
.slide-campeon .centro { background:linear-gradient(180deg,#fff,var(--oro-claro) 55%,var(--oro)) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  filter:drop-shadow(0 4px 16px rgba(255,183,3,.55)) !important; }
/* (antes ponia un aro dorado extra encima del escudo -- ya se quito, ver .promo-vs .esc) */

/* Slides de cards (los numero 1) con fondo propio */
.slide-cards {
  background:
    linear-gradient(180deg, rgba(4,7,16,.6) 0%, rgba(4,7,16,.38) 100%),
    var(--img-cards) center / cover no-repeat,
    #04060d;
}
.slide-cards .tagline { color:var(--cian); text-shadow:0 2px 8px rgba(0,0,0,.85); }
.slide-cards .equipos { color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.9); }
.slide-cards .detalle { color:#e9edf6; text-shadow:0 2px 8px rgba(0,0,0,.85); }

.promo-puntos { position:absolute; bottom:.7rem; right:1rem; display:flex; gap:.4rem; z-index:3; }
.promo-puntos span { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:background .15s, box-shadow .15s; }
.promo-puntos span.on { background:var(--oro); box-shadow:0 0 10px rgba(255,183,3,.8); }

/* ---- Plantilla del equipo ---- */
.eq-foto-grupal { border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra); border:1px solid var(--borde); margin-bottom:1.6rem; }
.eq-foto-grupal img { width:100%; max-height:560px; object-fit:cover; display:block; }
.pl-foto { display:inline-flex; width:54px; height:54px; border-radius:50%; overflow:hidden;
  background:var(--tinta-2); border:1px solid var(--borde); box-shadow:0 0 0 2px var(--oro); }
.pl-foto img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.pl-foto span { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family: var(--f-titulos); font-weight:800; font-size:1.1rem; color:var(--oro-claro); }

/* ---- Plantilla agrupada por posicion (tarjetas) ---- */
.pl-seccion { margin-top:2rem; }
.pl-seccion:first-child { margin-top:1.4rem; }
.pl-seccion h3 { font-family: var(--f-titulos); font-size:1.3rem; color:#12291a;
  text-align:center; padding-bottom:.6rem; margin-bottom:1.3rem;
  border-bottom:2px solid var(--oro); display:inline-block; }
.pl-seccion .envoltura-h3 { text-align:center; }
.pl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:.8rem; }
.pl-card { display:flex; align-items:center; gap:.7rem;
  background:var(--panel); border:1px solid var(--borde); border-radius:12px;
  padding:.6rem .8rem; text-decoration:none; color:var(--texto);
  box-shadow:var(--sombra); transition:transform .15s, box-shadow .15s, border-color .15s; }
.pl-card:hover { transform:translateY(-2px); border-color:var(--oro-borde); box-shadow:0 14px 30px -12px rgba(255,183,3,.25); }
.pl-card .foto2 { width:50px; height:50px; border-radius:50%; flex:none; overflow:hidden;
  background:var(--tinta-2); border:1px solid var(--borde); box-shadow:0 0 0 2px var(--oro); }
.pl-card .foto2 img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
.pl-card .foto2 span { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family: var(--f-titulos); font-weight:800; font-size:1.3rem; color:var(--oro-claro); }
.pl-card .datos2 { flex:1; min-width:0; }
.pl-card .datos2 .nom2 { font-weight:700; font-size:.9rem; color:#12291a; line-height:1.2; }
.pl-card .datos2 .dorsal2 { font-family: var(--f-hud); font-weight:800; font-size:.9rem;
  color:var(--oro-claro); margin-top:.1rem; }
@media (max-width:560px) {
  .pl-grid { grid-template-columns:1fr; }
  .pl-card .foto2 { width:54px; height:54px; }
}

.pl-layout { display:flex; gap:2.2rem; align-items:flex-start; }
.pl-principal { flex:1; min-width:0; }
.pl-cancha-col { flex:none; width:340px; position:sticky; top:1.4rem;
  padding-top:1.4rem; display:none; }
@media (min-width:960px) { .pl-cancha-col { display:block; } }
@media (min-width:1280px) { .pl-cancha-col { width:400px; } }
.pl-cancha {
  border-radius:20px; overflow:hidden; box-shadow:var(--sombra);
  border:1px solid var(--borde); background:#0f3a22;
}
.pl-cancha svg { display:block; width:100%; height:auto; }
.pl-zona { fill:rgba(255,255,255,0); transition:fill .25s ease; cursor:default; }
.pl-zona.activa { fill:rgba(255,183,3,.45); }
.pl-cancha-titulo { text-align:center; font-size:.82rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; margin-bottom:.9rem; }

/* ---- Sub-menu de Cracks ---- */
.subtabs { display:flex; gap:.45rem; flex-wrap:wrap; margin:-.5rem 0 1.4rem;
  overflow-x:auto; padding-bottom:.2rem; }
.subtabs a { text-decoration:none; font-weight:700; font-size:.84rem;
  color:var(--oro-claro); background:rgba(255,183,3,.08); border:1px solid var(--oro-borde);
  border-radius:99px; padding:.45rem 1.05rem; white-space:nowrap;
  transition:background .15s; text-transform:uppercase; letter-spacing:.02em; }
.subtabs a:hover { background:rgba(255,183,3,.18); }
.subtabs a.on { background:linear-gradient(160deg,var(--oro-claro),var(--oro)); color:#20140a; border-color:transparent; box-shadow:var(--brillo-oro); }
@media (max-width:720px) {
  .subtabs { flex-wrap:nowrap; }
  .subtabs a { font-size:.78rem; padding:.4rem .9rem; }
}

/* ---- Modal legendario (carta girando) ---- */
/* overflow-y:auto + align-items:safe center: si la card+botones no caben
   en la pantalla (celulares angostos/bajos), se puede hacer scroll para
   alcanzar los botones de Compartir/Cerrar en vez de quedar atrapado sin
   poder salir -- "safe center" evita que el navegador recorte el inicio
   del contenido cuando no cabe (bug real reportado: los botones quedaban
   fuera de la pantalla y no habia forma de cerrar el modal). */
.modal-fx { position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center;
  overflow-y:auto;
  background:rgba(2,4,10,.9); backdrop-filter:blur(8px);
  padding:1rem; }
.modal-fx.abierto { display:flex; }
@supports (align-items: safe center) {
  .modal-fx.abierto { align-items:safe center; }
}
.modal-esc { perspective:1500px; position:relative; text-align:center; }
.modal-cont { transform-style:preserve-3d;
  animation:girar-entrada 1.15s cubic-bezier(.2,.85,.3,1) both;
  filter:drop-shadow(0 0 40px rgba(255,183,3,.35)); }
@keyframes girar-entrada {
  0%   { transform:rotateY(-540deg) scale(.12); opacity:0; }
  55%  { opacity:1; }
  100% { transform:rotateY(0) scale(1); opacity:1; }
}
.modal-cont .pcard-marco,
.modal-cont .acard-marco { width:min(90vw, 500px) !important; margin:0 auto; }
.modal-cont .pcard-marco.legendario { width:min(94vw, 560px) !important; }
.modal-cont .acard-marco { aspect-ratio:68/96; }
.modal-iframe { width:min(94vw, 920px); height:min(78vh, 640px);
  border:0; border-radius:22px; background:transparent; display:block; }
.modal-iframe.vert { width:min(94vw, 540px); height:min(90vh, 760px); }
.modal-acciones { display:flex; gap:.7rem; justify-content:center; margin-top:1.1rem;
  animation:aparecer .5s .9s both; }
@keyframes aparecer { from { opacity:0; transform:translateY(8px);} to { opacity:1; } }
.btnm { font-family:inherit; font-size:.9rem; font-weight:800; cursor:pointer;
  border:0; border-radius:12px; padding:.7rem 1.5rem; color:#20140a;
  background:linear-gradient(160deg,var(--oro-claro),var(--oro) 60%,#c98700);
  box-shadow: var(--brillo-oro);
  text-decoration:none; display:inline-block; text-transform:uppercase; letter-spacing:.03em;
  transition:transform .12s; }
.btnm:hover { transform:translateY(-1px); }
.btnm.sec { background:rgba(255,255,255,.1); color:#fff; border:1px solid var(--borde-fuerte); box-shadow:none; }
.btnm:active { transform:translateY(1px); }

/* ---- Selector de jornadas (Resultados) ---- */
.jor-selector { display:flex; align-items:center; gap:.5rem;
  background:var(--panel); border:1px solid var(--borde); border-radius:99px;
  padding:.5rem .6rem; margin-bottom:1.4rem; overflow-x:auto; }
.jor-selector .flecha { flex:none; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  color:#12291a; background:rgba(18,41,26,.06); font-weight:800;
  transition:background .15s; }
.jor-selector .flecha:hover { background:rgba(255,183,3,.16); }
.jor-selector .flecha.deshabilitada { opacity:.25; pointer-events:none; }
.jor-pistas { display:flex; gap:.4rem; overflow-x:auto; scroll-behavior:smooth; }
.jor-pill { flex:none; text-decoration:none; font-weight:800; font-size:.82rem;
  color:#12291a; background:rgba(18,41,26,.05);
  border:1px solid var(--borde); border-radius:99px; padding:.45rem 1rem;
  white-space:nowrap; transition:background .15s; }
.jor-pill:hover { background:rgba(255,183,3,.14); }
.jor-pill.on { background:linear-gradient(160deg,var(--oro-claro),var(--oro) 60%,#c98700);
  color:#20140a; border-color:transparent; box-shadow:var(--brillo-oro); }

/* ---- Botones tactiles minimos (accesibilidad movil "gamer") ---- */
@media (max-width:560px) {
  .tabs a, .jor-pill, .subtabs a, .btnm, .btn-compartir, .lm-btn { min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
}

/* =====================================================================
   Podio de lideres (goleo/asistencias/atajadas) — Top 3 destacado
   Reutiliza los mismos tokens que .lid-* / .vs-panel, no introduce
   paleta ni tipografia nueva.
   ===================================================================== */
.goleo-podio {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.podio-puesto {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  text-decoration: none; color: var(--texto);
  background: linear-gradient(155deg, var(--panel-2), var(--panel));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 2.3rem 1rem 1.4rem;
  box-shadow: var(--sombra);
  transition: transform .18s, box-shadow .18s, border-color .18s;
  opacity: 0;
  animation: podio-fade .45s ease forwards;
}
.podio-puesto.p2 { animation-delay: .05s; }
.podio-puesto.p3 { animation-delay: .1s; }
.podio-puesto.p1 {
  animation-delay: .15s;
  transform: translateY(-18px);
  padding-top: 2.7rem;
  z-index: 2;
  border-color: var(--oro-borde);
}
@keyframes podio-fade { from { opacity: 0; } to { opacity: 1; } }
.podio-puesto:hover { border-color: var(--oro-borde); box-shadow: 0 20px 44px -18px rgba(0,0,0,.7); transform: translateY(-4px); }
.podio-puesto.p1:hover { transform: translateY(-22px); }

.podio-medalla { position: absolute; top: -1rem; font-size: 2rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.podio-puesto.p1 .podio-medalla { font-size: 2.5rem; top: -1.3rem; }

.podio-foto {
  width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
  margin-bottom: .9rem; flex: none;
  background: var(--tinta-2); border: 1px solid var(--borde);
  box-shadow: 0 0 0 2px #c7d2e5, 0 0 22px rgba(199,210,229,.35);
}
.podio-puesto.p3 .podio-foto { box-shadow: 0 0 0 2px #e0a06a, 0 0 22px rgba(224,160,106,.35); }
.podio-puesto.p1 .podio-foto {
  width: 128px; height: 128px;
  box-shadow: 0 0 0 3px var(--oro), 0 0 38px rgba(255,183,3,.55);
  animation: podio-respira 3s ease-in-out infinite;
}
@keyframes podio-respira {
  0%, 100% { box-shadow: 0 0 0 3px var(--oro), 0 0 38px rgba(255,183,3,.5); }
  50%      { box-shadow: 0 0 0 3px var(--oro), 0 0 54px rgba(255,183,3,.8); }
}
.podio-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.podio-foto span {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-titulos); font-weight: 800; font-size: 1.9rem; color: var(--oro-claro);
}

.podio-nom { font-weight: 800; font-size: 1.02rem; color: #fff; line-height: 1.2; }
.podio-puesto.p1 .podio-nom { font-size: 1.22rem; }
.podio-sub { font-size: .78rem; color: var(--sutil); margin-top: .15rem; }
.podio-estrellas { margin-top: .35rem; font-size: .82rem; filter: drop-shadow(0 0 6px rgba(255,183,3,.5)); }

.podio-total {
  font-family: var(--f-hud); font-weight: 800; font-size: 2.2rem; color: var(--oro-claro);
  margin-top: .6rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.podio-puesto.p1 .podio-total {
  font-size: 3.1rem;
  background: linear-gradient(180deg, #fff6d6, var(--oro-claro) 60%, var(--oro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(255,183,3,.4));
}
.podio-etq { font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cian); margin-top: .1rem; }
.podio-pos { position: absolute; bottom: .7rem; right: .9rem; font-family: var(--f-hud); font-weight: 800; font-size: .8rem; color: var(--sutil); }

@media (max-width: 720px) {
  .goleo-podio { gap: .6rem; }
  .podio-puesto { padding: 1.7rem .4rem 1rem; }
  .podio-puesto.p1 { padding-top: 2.1rem; }
  .podio-foto { width: 62px; height: 62px; }
  .podio-puesto.p1 .podio-foto { width: 84px; height: 84px; }
  .podio-nom { font-size: .82rem; }
  .podio-puesto.p1 .podio-nom { font-size: .96rem; }
  .podio-sub { font-size: .68rem; }
  .podio-total { font-size: 1.5rem; }
  .podio-puesto.p1 .podio-total { font-size: 2.05rem; }
  .podio-medalla { font-size: 1.4rem; }
  .podio-puesto.p1 .podio-medalla { font-size: 1.8rem; }
  .podio-estrellas { display: none; }
}

/* Medalla de 1er/2do/3er lugar en la lista de lideres (reemplaza el -N) */
.lid-medalla {
  flex: none; margin-left: .5rem;
  width: 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  transition: transform .15s;
}
.lid-medalla:hover, .lid-medalla:focus-visible { transform: scale(1.12); outline: none; }
.lid-medalla img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.lid-medalla-emoji { font-size: 1.5rem; cursor: default; }
.lid-medalla-emoji:hover { transform: none; }

.lid-lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(4,7,16,.86);
  display: none; align-items: center; justify-content: center;
  padding: 2rem; cursor: zoom-out;
}
.lid-lightbox.activo { display: flex; }
.lid-lightbox img {
  max-width: min(90vw, 420px); max-height: 80vh;
  object-fit: contain;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.7));
}

@media (max-width: 720px) {
  .lid-medalla { width: 1.9rem; height: 1.9rem; margin-left: .3rem; }
  .lid-medalla-emoji { font-size: 1.2rem; }
}