/* Liga Jurassic · web pública conectada a Rex
   Paleta final de la suite: noche #08111B · hueso #EEE1C7 · rojo #C53B32 · acero #7890AA · lava #E46D3D */

@font-face{font-family:"Anton";src:url(../fonts/Anton-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url(../fonts/BebasNeue-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/BarlowCondensed-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/BarlowCondensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/BarlowCondensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel";src:url(../fonts/Cinzel-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel";src:url(../fonts/Cinzel-900.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  color-scheme:dark;
  --noche:#08111B; --noche-2:#0B1622; --panel:#0F1C2A; --panel-2:#172738; --panel-3:#1F3348;
  --hueso:#EEE1C7; --hueso-2:#CFC4AC; --tenue:#9AA9BA; --acero:#7890AA;
  --rojo:#C53B32; --rojo-hi:#E25248; --lava:#E46D3D; --oro:#E5B66B; --verde:#7FB685;
  --linea:rgba(120,144,170,.22); --linea-2:rgba(120,144,170,.38);
  --grad-fuego:linear-gradient(135deg,#E46D3D 0%,#C53B32 62%,#9E2A2A 100%);
  --grad-chip:linear-gradient(135deg,#D07440,#A72F31);
  --sombra:0 18px 48px rgba(0,0,0,.42);
  --radio:14px; --radio-s:9px;
  --f-display:"Bebas Neue","Anton","Arial Narrow",sans-serif;
  --f-impacto:"Anton","Bebas Neue","Arial Narrow",sans-serif;
  --f-texto:"Barlow Condensed",system-ui,sans-serif;
  --f-marca:"Cinzel",Georgia,serif;
  --ancho:1240px; --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--noche); color:var(--hueso);
  font-family:var(--f-texto); font-size:18px; font-weight:500; line-height:1.45; letter-spacing:.01em;
  overflow-x:clip; /* clip, no hidden: hidden convierte body en contenedor de scroll y rompe la cabecera sticky */
}
body::before{ /* atmósfera fija: fuego arriba a la izquierda, acero abajo a la derecha */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
  background:
    radial-gradient(60vmax 50vmax at 8% -10%,rgba(197,59,50,.20),transparent 60%),
    radial-gradient(55vmax 45vmax at 105% 110%,rgba(120,144,170,.16),transparent 62%),
    linear-gradient(180deg,#08111B,#060D15);
}
body::after{ /* grano */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.07; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--oro);color:#1a1208;padding:10px 14px;border-radius:8px;font-weight:700}
.saltar:focus{top:12px}

/* ---------- demo / estado de datos ---------- */
.banda-demo{position:relative;z-index:60;background:repeating-linear-gradient(135deg,#3b1512 0 14px,#4a1a15 14px 28px);
  color:#FFE9D2;text-align:center;font-weight:700;letter-spacing:.08em;font-size:15px;padding:8px 16px;text-transform:uppercase}
.banda-demo a{color:#FFD7A8}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  background:linear-gradient(180deg,rgba(8,17,27,.92),rgba(8,17,27,.74));border-bottom:1px solid var(--linea)}
.cabecera-in{max-width:var(--ancho);margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:18px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.marca-rex{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(197,59,50,.65),0 0 22px rgba(197,59,50,.35)}
.marca-txt{display:flex;flex-direction:column;line-height:1}
.marca-kicker{font-size:11px;letter-spacing:.5em;color:var(--tenue);font-weight:700}
.marca-word{width:132px;height:auto;margin-top:3px}
.nav{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;text-decoration:none;color:var(--hueso-2);font-weight:700;font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 11px;border-radius:8px;position:relative;transition:color .2s,background .2s}
.nav a:hover{color:var(--hueso);background:rgba(120,144,170,.1)}
.nav a[aria-current="page"]{color:#FFF0D8}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:3px;border-radius:3px;background:var(--grad-fuego);box-shadow:0 0 12px rgba(228,109,61,.6)}
.menu-btn{display:none;margin-left:auto;background:var(--panel-2);border:1px solid var(--linea-2);border-radius:10px;width:44px;height:44px;cursor:pointer}
.menu-btn span{display:block;width:20px;height:2px;background:var(--hueso);margin:4px auto;transition:transform .25s}
@media (max-width:980px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:var(--cab-h,64px) 0 auto 0;max-height:calc(100vh - var(--cab-h,64px));overflow:auto;flex-direction:column;gap:0;
    background:rgba(8,17,27,.98);border-bottom:1px solid var(--linea);padding:8px var(--gutter) 18px;mask-image:none;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .nav.abierta{opacity:1;visibility:visible;transform:none}
  .nav a{font-size:19px;padding:13px 6px;border-bottom:1px solid var(--linea)}
  .nav a[aria-current="page"]::after{left:6px;right:auto;width:42px;bottom:6px}
  .marca-word{width:112px}
}

/* ---------- estructura ---------- */
main{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter) 80px}
.vista{animation:entrar .5s var(--ease) both}
@keyframes entrar{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.titulo-vista{padding:42px 0 22px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.titulo-vista h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(46px,7vw,84px);line-height:.92;letter-spacing:.02em}
.titulo-vista h1 .acento{background:var(--grad-fuego);-webkit-background-clip:text;background-clip:text;color:transparent}
.titulo-vista p{margin:8px 0 0;color:var(--tenue);max-width:640px;font-size:18px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.42em;color:var(--oro);text-transform:uppercase}
.kicker::before{content:"";width:28px;height:2px;background:var(--grad-fuego)}
.seccion{margin-top:46px}
.seccion-cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.seccion-cab h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4vw,42px);letter-spacing:.03em;line-height:1}
.seccion-cab a,.enlace{color:var(--oro);text-decoration:none;font-weight:700;letter-spacing:.12em;font-size:14px;text-transform:uppercase}
.seccion-cab a:hover,.enlace:hover{color:#FFD08A}
.rejilla{display:grid;gap:18px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.r2,.r3{grid-template-columns:1fr}}

.panel{background:linear-gradient(160deg,rgba(23,39,56,.92),rgba(11,22,34,.94));border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);position:relative;overflow:hidden}
.panel-in{padding:20px}
.panel.borde-fuego::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-fuego)}
.nota{color:var(--tenue);font-size:15.5px;line-height:1.5}
.nota strong{color:var(--hueso-2)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(120,144,170,.14);color:var(--hueso-2);border:1px solid var(--linea);white-space:nowrap}
.chip.fuego{background:var(--grad-chip);color:#FFF0D8;border-color:rgba(255,220,181,.3)}
.chip.oro{background:rgba(229,182,107,.14);color:var(--oro);border-color:rgba(229,182,107,.35)}
.chip.ok{background:rgba(127,182,133,.14);color:#A9D8AE;border-color:rgba(127,182,133,.35)}
.chip.aviso{background:rgba(228,109,61,.14);color:#F2A27A;border-color:rgba(228,109,61,.4)}

/* ---------- controles ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.seg{display:inline-flex;background:var(--noche-2);border:1px solid var(--linea-2);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:14px;color:var(--tenue);min-height:38px}
.seg button[aria-pressed="true"]{background:var(--grad-chip);color:#FFF0D8;box-shadow:0 6px 16px rgba(197,59,50,.3)}
.campo{background:var(--noche-2);border:1px solid var(--linea-2);border-radius:10px;color:var(--hueso);padding:9px 12px;font:inherit;font-size:16px;min-height:40px}
.campo:focus{border-color:var(--oro);outline:none}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;text-decoration:none;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:15px;
  padding:13px 22px;border-radius:12px;background:var(--grad-fuego);color:#FFF0D8;box-shadow:0 12px 30px rgba(197,59,50,.35),inset 0 1px rgba(255,255,255,.18);
  transition:transform .2s var(--ease),box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(197,59,50,.45),inset 0 1px rgba(255,255,255,.2)}
.btn.sec{background:rgba(120,144,170,.12);box-shadow:none;border:1px solid var(--linea-2);color:var(--hueso)}

/* ---------- escudos ---------- */
.escudo{--t:44px;width:var(--t);height:var(--t);flex:0 0 var(--t);border-radius:50%;display:grid;place-items:center;overflow:hidden;position:relative;
  background:radial-gradient(circle at 35% 30%,#22384F,#0B1622);border:2px solid var(--c,var(--acero));
  box-shadow:inset 0 0 14px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.35)}
.escudo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:calc(var(--t)*.06);border-radius:50%;background:radial-gradient(circle at 35% 30%,#F5F0E6,#D2C9B8)}
.escudo img[hidden]{display:none}
.escudo-vacio{font-size:calc(var(--t)*.34);line-height:1;color:var(--c,var(--acero));opacity:.58;transform:rotate(45deg)}
.escudo b{font-family:var(--f-impacto);font-weight:400;font-size:calc(var(--t)*.36);letter-spacing:.02em;color:var(--hueso);opacity:.88}

/* ---------- HERO ---------- */
.hero{position:relative;margin:0 calc(var(--gutter)*-1);padding:clamp(28px,6vw,70px) var(--gutter) 40px;overflow:clip;isolation:isolate;
  border-bottom:1px solid var(--linea)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/bg-matchday.jpg) center 30%/cover;opacity:.32;filter:saturate(.9);
  mask-image:linear-gradient(180deg,#000 30%,transparent)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 75% 40%,transparent,rgba(8,17,27,.85) 70%),linear-gradient(90deg,rgba(8,17,27,.9),rgba(8,17,27,.2) 60%)}
.hero canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero-in{max-width:var(--ancho);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hero-liga{font-weight:700;letter-spacing:.6em;color:#D9D3C8;font-size:clamp(14px,1.6vw,19px);margin-bottom:10px}
.hero-word{width:min(560px,100%);filter:drop-shadow(0 14px 18px rgba(0,0,0,.7))}
.hero-lema{font-size:clamp(19px,2.2vw,24px);color:var(--hueso-2);max-width:520px;margin:18px 0 26px;line-height:1.35}
.hero-acciones{display:flex;gap:12px;flex-wrap:wrap}
.rex{position:relative;justify-self:center;width:min(420px,80vw);aspect-ratio:1}
.rex-halo{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(197,59,50,.55),rgba(228,109,61,.18) 45%,transparent 68%);filter:blur(10px);animation:latido 4.6s ease-in-out infinite}
.rex-anillo{position:absolute;inset:-3%;border-radius:50%;border:1px solid rgba(229,182,107,.35);box-shadow:inset 0 0 40px rgba(197,59,50,.25)}
.rex-anillo.dos{inset:-9%;border-color:rgba(120,144,170,.22);border-style:dashed;animation:girar 60s linear infinite}
.rex img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:50%;
  mask-image:radial-gradient(circle,#000 56%,rgba(0,0,0,.6) 64%,transparent 71%);animation:respirar 6s ease-in-out infinite}
.rex-ojos{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(4.5% 3.4% at 36.6% 27.6%,rgba(255,80,40,.95),transparent),radial-gradient(4.5% 3.4% at 63.6% 27.6%,rgba(255,80,40,.95),transparent);
  mix-blend-mode:screen;animation:mirada 5.2s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes respirar{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes mirada{0%,40%,100%{opacity:.25}48%{opacity:1}60%{opacity:.5}}
@keyframes girar{to{transform:rotate(360deg)}}
@media (max-width:900px){.hero-in{grid-template-columns:1fr;text-align:left}.rex{order:-1;width:min(260px,62vw)}}

.kpis{max-width:var(--ancho);margin:34px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{padding:16px 18px;border-radius:12px;background:rgba(15,28,42,.72);border:1px solid var(--linea);backdrop-filter:blur(6px)}
.kpi b{display:block;font-family:var(--f-impacto);font-weight:400;font-size:clamp(34px,4.6vw,52px);line-height:1;color:#FFF0D8}
.kpi span{font-size:13px;letter-spacing:.3em;color:var(--tenue);font-weight:700;text-transform:uppercase}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- próximo partido ---------- */
.matchday{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:28px 22px 22px;text-align:center;
  background:linear-gradient(90deg,rgba(160,46,41,.28),rgba(15,28,42,.9) 38%,rgba(15,28,42,.9) 62%,rgba(54,84,131,.3)),url(../img/bg-tabla.jpg) center/cover}
.md-lado{display:flex;flex-direction:column;align-items:center;align-self:stretch;gap:10px;min-width:0;text-decoration:none}
.md-lado .escudo{--t:clamp(64px,10vw,104px);border-width:4px}
.md-nombre{font-family:var(--f-display);font-size:clamp(24px,3.4vw,40px);line-height:1;letter-spacing:.03em;max-width:100%;overflow-wrap:anywhere}
.md-vs{width:clamp(70px,10vw,120px);filter:drop-shadow(0 8px 10px rgba(0,0,0,.8));animation:vs 3.2s ease-in-out infinite}
.matchday-proximo{padding-top:clamp(44px,5.6vw,72px);padding-bottom:34px;row-gap:44px}
.matchday-proximo > .md-lado,.matchday-proximo > .md-vs{position:relative;top:30px}
@media (max-width:640px){.matchday-proximo{padding-top:40px;padding-bottom:26px;row-gap:25px}.matchday-proximo > .md-lado,.matchday-proximo > .md-vs{top:16px}}
@keyframes vs{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.07) rotate(2deg)}}
.md-pie{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
.cuenta{display:flex;gap:8px;justify-content:center}
.cuenta div{min-width:64px;padding:8px 6px;border-radius:10px;background:rgba(8,17,27,.75);border:1px solid var(--linea-2)}
.cuenta b{display:block;font-family:var(--f-impacto);font-weight:400;font-size:30px;line-height:1;color:#FFF0D8;font-variant-numeric:tabular-nums}
.cuenta span{font-size:11px;letter-spacing:.25em;color:var(--tenue);font-weight:700}
.horas{color:var(--hueso-2);font-size:15.5px;letter-spacing:.06em}
.horas b{color:var(--oro)}

/* ---------- listas de partidos ---------- */
.partidos{display:flex;flex-direction:column;gap:10px;container:partidos/inline-size}
.partido{display:grid;grid-template-columns:118px 1fr auto 1fr;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;text-decoration:none;
  background:linear-gradient(90deg,rgba(24,41,58,.95),rgba(11,23,35,.9));border:1px solid var(--linea);border-left:4px solid var(--rojo);transition:transform .2s var(--ease),border-color .2s}
.partido:nth-child(even){border-left-color:#58759A}
a.partido:hover{transform:translateX(4px);border-color:var(--linea-2)}
.p-cuando{font-size:14px;line-height:1.25;color:var(--tenue)}
.p-cuando b{display:block;color:var(--oro);letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.p-eq{display:flex;align-items:center;gap:10px;min-width:0;font-family:var(--f-display);font-size:23px;letter-spacing:.03em;line-height:1}
.p-eq span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-eq.der{flex-direction:row-reverse;text-align:right}
.p-eq.gana{color:#FFF0D8}
.p-eq.pierde{color:var(--tenue)}
.p-marcador{font-family:var(--f-impacto);font-size:26px;min-width:84px;text-align:center;padding:4px 10px;border-radius:8px;background:rgba(8,17,27,.7);border:1px solid var(--linea-2);font-variant-numeric:tabular-nums}
.p-marcador.vs{font-size:18px;color:var(--oro);letter-spacing:.1em}
.p-meta{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:-2px}
@container partidos (max-width:600px){
  .partido{grid-template-columns:1fr auto 1fr;padding:12px}
  .p-cuando{grid-column:1/-1;display:flex;gap:10px;align-items:baseline}
  .p-cuando b{display:inline}
  .p-eq{font-size:19px;flex-direction:column;align-self:stretch;justify-content:flex-start;text-align:center}
  .p-eq.der{flex-direction:column;text-align:center}
  .p-eq span{white-space:normal;overflow-wrap:anywhere}
  .p-meta{grid-column:1/-1;justify-content:center}
}
.ronda-cab{display:flex;align-items:center;gap:14px;margin:26px 0 12px;font-family:var(--f-display);font-size:28px;letter-spacing:.05em}
.ronda-cab::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--linea-2),transparent)}

/* ---------- tabla ---------- */
.tabla-wrap{overflow-x:auto;border-radius:var(--radio);-webkit-overflow-scrolling:touch}
table.tabla{width:100%;border-collapse:separate;border-spacing:0 6px;min-width:640px;font-variant-numeric:tabular-nums}
.tabla th{font-size:13px;letter-spacing:.18em;color:var(--tenue);font-weight:700;text-align:center;padding:4px 8px;text-transform:uppercase}
.tabla th:nth-child(2){text-align:left}
.tabla td{padding:9px 8px;text-align:center;background:linear-gradient(90deg,rgba(31,49,68,.92),rgba(18,31,45,.86));font-size:18px}
.tabla td:first-child{border-radius:10px 0 0 10px;font-family:var(--f-impacto);font-size:22px;color:var(--acero);width:46px}
.tabla td:last-child{border-radius:0 10px 10px 0}
.tabla tr.podio td:first-child{color:var(--oro)}
.tabla tr.podio td{background:linear-gradient(90deg,rgba(69,61,52,.95),rgba(24,38,52,.88))}
.tabla td.eq{text-align:left}
.tabla .eq a{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--f-display);font-size:22px;letter-spacing:.03em;line-height:1.05}
.tabla tr td.pts{font-family:var(--f-impacto);font-size:22px;background:var(--grad-chip);color:#FFF0D8;min-width:58px}
.tabla tr.corte td{padding:0;background:none}
.tabla tr.corte td div{display:flex;align-items:center;gap:12px;color:var(--oro);font-size:12px;letter-spacing:.24em;font-weight:700;text-transform:uppercase}
.tabla tr.corte td div::before,.tabla tr.corte td div::after{content:"";flex:1;border-top:2px dashed rgba(229,182,107,.5)}
.forma{display:inline-flex;gap:4px}
.forma i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.forma .V{background:#2E6B45;color:#D8F5DD}.forma .E{background:#4B5A6B;color:#E3E8EE}.forma .D{background:#7A2A26;color:#FFDCD6}
@media (max-width:640px){.tabla .ext{display:none}table.tabla:not(.tabla-stats){min-width:0}.tabla .eq a{font-size:19px}}
.tabla-mini td{font-size:16px;padding:7px 6px}
.tabla-mini .eq a{font-size:19px}

/* ---------- gráficos ---------- */
.grafico{width:100%;height:auto;display:block;overflow:visible}
.grafico text{font-family:var(--f-texto);fill:var(--tenue);font-size:13px;font-weight:600}
.grafico .eje{stroke:var(--linea);stroke-width:1}
.grafico .linea-serie{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,stroke-width .25s}
.grafico.enfoque .linea-serie{opacity:.14}
.grafico.enfoque .linea-serie.on{opacity:1;stroke-width:4.5}
.dibujar{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.visible .dibujar{animation:trazo 1.6s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes trazo{to{stroke-dashoffset:0}}
.leyenda{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.leyenda button{display:inline-flex;align-items:center;gap:8px;background:rgba(120,144,170,.08);border:1px solid var(--linea);border-radius:999px;padding:5px 11px;cursor:pointer;font-size:14px;font-weight:600;color:var(--hueso-2)}
.leyenda button i{width:10px;height:10px;border-radius:50%}
.leyenda button[aria-pressed="true"]{border-color:var(--oro);color:#FFF0D8}

.barras{display:flex;flex-direction:column;gap:9px;counter-reset:pos}
.barra{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;text-decoration:none}
.barra .n{font-family:var(--f-impacto);color:var(--acero);font-size:18px;text-align:center}
.barra:first-child .n{color:var(--oro)}
.barra .pista{position:relative;height:42px;border-radius:9px;background:rgba(120,144,170,.08);overflow:hidden}
.barra .relleno{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:9px;background:linear-gradient(90deg,rgba(197,59,50,.85),rgba(228,109,61,.95));
  transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.barra:nth-child(n+2) .relleno{background:linear-gradient(90deg,rgba(84,107,145,.7),rgba(120,144,170,.85))}
.visible .barra .relleno{transform:scaleX(1)}
.barra .rotulo{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 12px;min-width:0}
.barra .rotulo strong{font-family:var(--f-display);font-weight:400;font-size:21px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .rotulo small{color:var(--hueso-2);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .valor{font-family:var(--f-impacto);font-size:26px;min-width:42px;text-align:right;color:#FFF0D8}

/* ---------- cartas de jugador ---------- */
.cartas{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:18px}
.cartas .carta{aspect-ratio:auto;min-height:350px}
.cartas .carta .cara{height:auto;min-height:344px}
.carta{--c1:#7d6a55;--c2:#3b3128;--brillo:rgba(255,236,200,.5);position:relative;display:block;text-decoration:none;aspect-ratio:5/8;border-radius:18px;padding:3px;
  background:linear-gradient(150deg,var(--c1),var(--c2) 55%,var(--c1));box-shadow:0 18px 38px rgba(0,0,0,.5);transform-style:preserve-3d;
  transition:transform .35s var(--ease),box-shadow .35s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.carta:hover{box-shadow:0 26px 50px rgba(0,0,0,.6),0 0 0 1px var(--brillo)}
.carta .cara{position:relative;height:100%;border-radius:15px;overflow:hidden;display:flex;flex-direction:column;padding:16px 14px 12px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.08),transparent 60%),linear-gradient(170deg,#1B2D41,#0A1520 70%)}
.carta .cara::before{content:"";position:absolute;inset:0;background:url(../img/bg-equipo.jpg) center 82%/auto 175%;opacity:.2;mix-blend-mode:luminosity}
.carta .cara::after{content:"";position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 40%,var(--brillo) 50%,transparent 60%);
  transform:translateX(var(--sx,-60%));opacity:.35;pointer-events:none;transition:transform .5s}
.carta>.cara>*{position:relative;z-index:1}
.carta.t-leyenda{--c1:#E9C47A;--c2:#7A2A26;--brillo:rgba(255,214,150,.7)}
.carta.t-oro{--c1:#E5B66B;--c2:#6B4E24;--brillo:rgba(255,226,170,.65)}
.carta.t-plata{--c1:#B8C4D2;--c2:#4A5869;--brillo:rgba(220,232,245,.6)}
.carta.t-bronce{--c1:#C27A4E;--c2:#4D2D1F;--brillo:rgba(240,190,150,.5)}
.carta.t-novato{--c1:#4B5A6B;--c2:#1F2A36;--brillo:rgba(200,210,220,.3)}
.c-top{display:flex;justify-content:space-between;align-items:flex-start}
.c-ir{font-family:var(--f-impacto);font-size:44px;line-height:.9;color:#FFF0D8;text-shadow:0 3px 12px rgba(0,0,0,.6)}
.c-ir small{display:block;font-family:var(--f-texto);font-size:11px;letter-spacing:.24em;color:var(--hueso-2);margin-top:4px;font-weight:700}
.c-rango{font-size:11px;letter-spacing:.22em;font-weight:700;text-transform:uppercase;color:var(--hueso-2);text-align:right}
.c-rango .escudo{--t:40px;margin:6px 0 0 auto}
.c-retrato{flex:1;min-height:72px;display:grid;place-items:center;padding:5px 0 2px}
.c-retrato-marco{position:relative;display:grid;place-items:center;width:min(54%,100px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 37% 25%,#385574,#0b1723 70%);border:3px solid var(--c1);box-shadow:0 0 0 4px rgba(8,20,31,.55),0 11px 26px rgba(0,0,0,.54),0 0 25px var(--brillo)}
.c-retrato-marco::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 20px rgba(0,0,0,.38);pointer-events:none}
.c-retrato-marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-retrato-marco img[hidden]{display:none}
.c-retrato-inicial{font-family:var(--f-impacto);font-size:clamp(22px,3vw,46px);color:#f0dfc0;opacity:.72}
.perfil-jugador{column-gap:32px}
.perfil-jugador .carta,.perfil-jugador .carta:hover{aspect-ratio:auto;box-shadow:none;transform:none!important;transform-style:flat;isolation:isolate}
.perfil-jugador .carta .cara{height:auto;min-height:540px}
.perfil-jugador .carta .cara::after{display:none}
.perfil-jugador .c-retrato{min-height:220px}
.perfil-jugador .c-retrato-marco{width:min(76%,210px);border-width:4px;box-shadow:0 0 0 5px rgba(8,20,31,.55),0 18px 32px rgba(0,0,0,.6),0 0 32px var(--brillo)}
.perfil-jugador h1 span{overflow-wrap:anywhere}
.c-top,.c-nombre,.c-stats{flex-shrink:0}
.c-nombre{font-family:var(--f-display);font-size:30px;line-height:.95;letter-spacing:.03em;text-align:center;overflow-wrap:anywhere;padding-top:4px;margin-bottom:12px}
.c-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-top:1px solid rgba(238,225,199,.18);padding-top:9px}
.c-stats div{text-align:center}
.c-stats b{display:block;font-family:var(--f-impacto);font-weight:400;font-size:21px;line-height:1;color:#FFF0D8}
.c-stats span{font-size:10.5px;letter-spacing:.18em;color:var(--tenue);font-weight:700}
.c-marca{position:absolute!important;right:10px;bottom:-14px;font-family:var(--f-marca);font-weight:900;font-size:64px;color:rgba(238,225,199,.04);z-index:0!important}

/* ---------- ficha ---------- */
.ficha-cab{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:28px 0 8px}
.ficha-cab .escudo{--t:clamp(84px,14vw,140px);border-width:5px}
.ficha-cab h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(42px,7vw,80px);line-height:.92;letter-spacing:.02em;overflow-wrap:anywhere}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.dato{padding:14px;border-radius:12px;background:rgba(8,17,27,.55);border:1px solid var(--linea)}
.dato b{display:block;font-family:var(--f-impacto);font-weight:400;font-size:34px;line-height:1;color:#FFF0D8;font-variant-numeric:tabular-nums}
.dato span{font-size:12px;letter-spacing:.22em;color:var(--tenue);font-weight:700;text-transform:uppercase}
.plantel{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.miembro{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;background:rgba(15,28,42,.8);border:1px solid var(--linea);transition:border-color .2s,transform .2s var(--ease)}
.miembro:hover{border-color:var(--linea-2);transform:translateY(-2px)}
.miembro .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-impacto);font-size:17px;background:var(--panel-3);color:var(--hueso)}
.miembro strong{font-family:var(--f-display);font-weight:400;font-size:22px;letter-spacing:.03em;line-height:1}
.miembro small{display:block;color:var(--tenue);font-size:13.5px}

/* ---------- equipo ideal ---------- */
.campo-ideal{position:relative;aspect-ratio:4/5;max-width:620px;margin:0 auto;border-radius:22px;overflow:hidden;
  background:linear-gradient(rgba(5,11,18,.08),rgba(5,10,16,.3)),url(../img/bg-equipo.jpg) center/cover;border:1px solid var(--linea-2);box-shadow:var(--sombra)}

.ficha-ideal{position:absolute;transform:translate(-50%,-50%) scale(.6);opacity:0;width:min(170px,34%);text-align:center;text-decoration:none;transition:transform .6s var(--ease),opacity .6s;transition-delay:var(--d,0s)}
.visible .ficha-ideal{transform:translate(-50%,-50%);opacity:1}
.disco{width:min(104px,64%);aspect-ratio:1;margin:0 auto;border:5px solid #030506;border-radius:50%;box-shadow:0 10px 24px rgba(0,0,0,.7),0 0 26px rgba(228,109,61,.25)}
.ficha-ideal strong{display:block;margin-top:-4px;padding:7px 10px;border-radius:11px;background:linear-gradient(180deg,rgba(24,38,53,.98),rgba(10,21,32,.98));
  border:3px solid var(--acero);font-family:var(--f-display);font-weight:400;font-size:clamp(17px,2.6vw,24px);letter-spacing:.03em;line-height:1;color:#FFF0D8;overflow-wrap:anywhere}
.ficha-ideal small{display:block;margin-top:5px;font-size:13px;color:var(--oro);font-weight:700;letter-spacing:.1em}
.kit-1{background:linear-gradient(50deg,#C77A48 0 33.2%,#B65E42 33.3% 66.5%,#95413F 66.6% 100%)}
.kit-2{background:linear-gradient(115deg,#7057A7 0 33.2%,#514F93 33.3% 66.5%,#394874 66.6% 100%)}
.kit-3{background:linear-gradient(25deg,#EBC35D 0 33.2%,#D99B4C 33.3% 66.5%,#C66B43 66.6% 100%)}
.kit-4{background:linear-gradient(55deg,#4F7374 0 33.2%,#506578 33.3% 66.5%,#605F7B 66.6% 100%)}
.kit-5{background:linear-gradient(80deg,#E9B94B 0 33.2%,#E28C3C 33.3% 66.5%,#D65B35 66.6% 100%)}
.kit-6{background:linear-gradient(135deg,#718A69 0 33.2%,#547466 33.3% 66.5%,#425D68 66.6% 100%)}
.kit-7{background:linear-gradient(35deg,#DD6E5E 0 33.2%,#CE5B5D 33.3% 66.5%,#B74759 66.6% 100%)}
.kit-8{background:linear-gradient(20deg,#A2ADB0 0 33.2%,#7E959D 33.3% 66.5%,#60798A 66.6% 100%)}
.kit-9{background:linear-gradient(65deg,#DDAF45 0 33.2%,#CE843B 33.3% 66.5%,#BF5A35 66.6% 100%)}
.kit-10{background:linear-gradient(100deg,#657BA5 0 33.2%,#4D6490 33.3% 66.5%,#394B75 66.6% 100%)}
.kit-11{background:linear-gradient(20deg,#DD6874 0 33.2%,#CE536D 33.3% 66.5%,#B83E62 66.6% 100%)}
.kit-12{background:linear-gradient(155deg,#856F8F 0 33.2%,#665B7E 33.3% 66.5%,#4A4B6C 66.6% 100%)}

/* ---------- partido ---------- */
.marcador-grande{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:30px 18px;text-align:center}
.marcador-grande .num{font-family:var(--f-impacto);font-size:clamp(56px,11vw,110px);line-height:1;color:#FFF0D8;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.cronologia{position:relative;padding:12px 0}
.cronologia::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(var(--rojo),var(--acero));transform:translateX(-50%)}
.gol{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;margin:8px 0;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease);transition-delay:var(--d,0s)}
.visible .gol{opacity:1;transform:none}
.gol .min{justify-self:center;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--noche);border:2px solid var(--oro);font-family:var(--f-impacto);font-size:17px;color:var(--oro);z-index:1}
.gol .txt{padding:8px 12px;border-radius:10px;background:rgba(15,28,42,.9);border:1px solid var(--linea);font-size:16px}
.gol .txt strong{font-family:var(--f-display);font-weight:400;font-size:21px;letter-spacing:.03em}
.gol.home .txt{grid-column:1;text-align:right}
.gol.away .txt{grid-column:3}
.gol.home .min{grid-column:2;grid-row:1}.gol.away .min{grid-column:2;grid-row:1}

/* ---------- vacíos / errores ---------- */
.vacio{padding:34px 26px;text-align:center;border-radius:var(--radio);border:1px dashed var(--linea-2);background:rgba(11,22,34,.6)}
.vacio h3{margin:0 0 8px;font-family:var(--f-display);font-weight:400;font-size:30px;letter-spacing:.04em}
.vacio p{margin:0 auto;max-width:620px;color:var(--tenue)}
.vacio code{font-size:14px;color:var(--oro)}
.contrato{margin-top:14px;text-align:left;font-size:14.5px;color:var(--hueso-2);background:rgba(8,17,27,.7);border-radius:10px;padding:12px 14px;border:1px solid var(--linea);overflow:auto}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea);background:rgba(6,13,21,.8)}
.pie-in{max-width:var(--ancho);margin:0 auto;padding:28px var(--gutter);display:flex;flex-wrap:wrap;gap:16px 30px;justify-content:space-between;align-items:center;color:var(--tenue);font-size:15px}
.pie-in .marca-liga{font-family:var(--f-marca);font-weight:900;color:var(--hueso);font-size:20px;letter-spacing:.04em}

/* ---------- revelado al hacer scroll ---------- */
.revelar{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.revelar.visible{opacity:1;transform:none}

.tabla-stats td,.tabla-stats th{white-space:nowrap}
.tabla-stats th button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;text-transform:uppercase}
.tabla-stats th[aria-sort] button{color:var(--oro)}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .revelar,.gol,.ficha-ideal{opacity:1!important;transform:none!important}
  .ficha-ideal{transform:translate(-50%,-50%)!important}
  .barra .relleno{transform:none!important}
  .dibujar{stroke-dashoffset:0!important}
  .hero canvas,.rex-ojos{display:none}
  .carta{transform:none!important}
}

/* ---------- cartas en móvil: dos por fila ---------- */
@media (max-width:520px){
  .cartas{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cartas .carta{min-height:300px}
  .cartas .carta .cara{min-height:294px}
  .carta{border-radius:14px}
  .carta .cara{padding:11px 9px 9px;border-radius:12px}
  .c-ir{font-size:31px}
  .c-ir small{font-size:9.5px;letter-spacing:.16em}
  .c-rango{font-size:9.5px;letter-spacing:.14em}
  .c-rango .escudo{--t:30px!important}
  .c-retrato{min-height:70px;padding:2px 0}
  .c-retrato-marco{width:min(53%,70px);border-width:2px;box-shadow:0 0 0 2px rgba(8,20,31,.55),0 7px 15px rgba(0,0,0,.5)}
  .c-nombre{font-size:21px}
  .c-nombre{margin-bottom:8px}
  .c-stats b{font-size:16px}
  .c-stats span{font-size:9px;letter-spacing:.1em}
  [data-ficha]{grid-template-columns:1fr!important}
  [data-ficha]>div:first-child{max-width:300px}
  .perfil-jugador>div:last-child{min-width:0}
  .perfil-jugador .datos{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0!important}
  .perfil-jugador .c-retrato{min-height:175px}
  .perfil-jugador .c-retrato-marco{width:min(72%,170px)}
}

/* ---------- ambiente global: selva volcánica en todas las secciones ----------
   Estructura para Astra y para el fondo original del usuario: definir --ambiente-fondo
   (p. ej. url(../img/fondo-original.webp)) sin tocar el resto. Capas sin interacción. */
.ambiente{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.amb-capa{position:absolute;inset:0}
.amb-fondo{background:var(--ambiente-fondo,none) center/cover;opacity:var(--ambiente-opacidad,.35);transform:translateY(calc(var(--amb-scroll,0) * -40px)) scale(1.08)}
.amb-bruma{inset:auto -30% -10% -30%;height:55%;background:radial-gradient(ellipse at 30% 70%,rgba(160,199,190,.10),transparent 60%),radial-gradient(ellipse at 75% 80%,rgba(228,109,61,.08),transparent 55%);
  filter:blur(18px);animation:amb-deriva 38s ease-in-out infinite alternate}
.amb-bruma.dos{bottom:auto;top:-10%;height:45%;opacity:.6;animation-duration:52s;animation-direction:alternate-reverse}
.amb-brasas{width:100%;height:100%;opacity:.45;mix-blend-mode:screen}
.amb-vineta{background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(2,6,8,.6))}
@keyframes amb-deriva{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.motion-paused .amb-bruma,.page-hidden .amb-bruma{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.amb-bruma{animation:none}.amb-brasas{display:none}.amb-fondo{transform:none}}
.motion-paused .amb-fondo{transform:scale(1.08)}
/* La pausa global de animaciones (.motion-paused / .page-hidden * {animation-play-state:paused}) congelaba la
   entrada de la vista en su primer fotograma (opacidad 0) y dejaba la página invisible al navegar con el
   movimiento pausado o reducido. La entrada no se pausa: simplemente no se anima. */
html.motion-paused .vista,html.page-hidden .vista{animation:none!important;opacity:1}