/* Fuera de Lugar FDL · estadio de noche, tiza de tablero táctico y álbum de láminas.
   Paleta: la grama de noche, el ámbar de su marca y el café de su carta; tarjetas de árbitro como acentos. */
:root {
  --noche: #050d08; --noche-2: #0a1a10; --noche-3: #10251a;
  --cesped: #0f3a1e; --cesped-2: #175228; --cesped-3: #22703a;
  --tiza: #f4f0e6; --tiza-2: rgba(244, 240, 230, .74); --tiza-3: rgba(244, 240, 230, .5); --linea: rgba(244, 240, 230, .14);
  --oro: #f2a93b; --oro-2: #ffc861; --oro-3: #c7801f;
  --cafe: #3a2217; --cafe-2: #5b3522;
  --roja: #e5383b; --amarilla: #ffd23f; --azul: #2f7df0; --var: #27d3f5; --verde: #25d366;
  --papel: #f2e9d8; --papel-2: #e5d8bf; --tinta: #1d140e; --tinta-2: #5a4636;
  --titulo: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(16px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noche); color-scheme: dark; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--noche); color: var(--tiza); font: 400 17px/1.55 var(--texto); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--oro); color: var(--cafe); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--oro-2); outline-offset: 3px; border-radius: 6px; }

/* ─── Piezas comunes ─── */
.boton {
  --fondo: var(--tiza); --color: var(--noche);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--fondo); color: var(--color); text-decoration: none; overflow: hidden; isolation: isolate;
  font: 700 16px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; transition: transform .4s var(--rebote), box-shadow .4s var(--ease);
}
.boton svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.boton::after { /* barrido de luz de reflector */
  content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.boton:hover { transform: translateY(-2px) scale(1.03); }
.boton:hover::after { transform: translateX(120%); }
.boton:active { transform: scale(.97); }
.boton--verde { --fondo: var(--verde); --color: #04210f; box-shadow: 0 12px 34px -10px rgba(37, 211, 102, .7); }
.boton--tiza { --fondo: transparent; --color: var(--tiza); box-shadow: inset 0 0 0 2px var(--tiza-3); }
.boton--tiza:hover { box-shadow: inset 0 0 0 2px var(--tiza); }
.boton--grande { min-height: 60px; padding: 0 32px; font-size: 18px; }

.etiqueta { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 700 14px/1 var(--cond); letter-spacing: .28em; text-transform: uppercase; color: var(--oro); }
.etiqueta svg { width: 20px; height: 20px; }
.etiqueta--oscura { color: var(--cafe-2); }
.titulo { margin: 0; font: 900 clamp(46px, 7.4vw, 118px)/.86 var(--titulo); text-transform: uppercase; letter-spacing: -.005em; }
.titulo span { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--tiza-2); }
.titulo--oscuro { color: var(--tinta); }
.titulo--oscuro span { -webkit-text-stroke-color: var(--tinta-2); }
.titulo--enorme { font-size: clamp(72px, 15vw, 230px); }

.pastilla { display: inline-block; padding: 5px 11px 4px; border-radius: 4px; background: var(--oro); color: var(--cafe); font-weight: 800; letter-spacing: .1em; }

/* ─── INTRO: el túnel y la revisión del VAR ─── */
.intro { display: none; }
.intro-activa { overflow: hidden; }
.intro-activa .intro { display: block; position: fixed; inset: 0; z-index: 400; background: #000; }
.intro__tunel { position: absolute; inset: 0; overflow: hidden; }
.intro__tunel img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 42%; }
.intro__tunel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 20%, rgba(0, 0, 0, .75) 80%); }
.intro__rotulo { position: absolute; left: 50%; margin: 0; translate: -50% 0; white-space: nowrap; font: 700 clamp(14px, 1.5vw, 18px)/1 var(--cond); letter-spacing: .4em; text-transform: uppercase; color: var(--tiza); opacity: 0; }
.intro__rotulo--1 { top: 16%; }
.intro__rotulo--2 { bottom: 14%; font: 900 clamp(34px, 5vw, 64px)/1 var(--titulo); letter-spacing: .02em; }
.intro__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.intro__saltar { position: absolute; right: 20px; bottom: 20px; z-index: 5; padding: 10px 16px; border: 1px solid var(--tiza-3); border-radius: 999px; background: rgba(0, 0, 0, .4); backdrop-filter: blur(6px); font: 600 14px var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.var { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.var__pantalla { position: absolute; inset: 0; overflow: hidden; filter: saturate(.9) contrast(1.05); }
.var__cancha { position: absolute; inset: 0; width: 100%; height: 100%; }
.var__rejilla { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; pointer-events: none; }
.var__jugador { position: absolute; bottom: 16%; width: min(30vw, 330px); aspect-ratio: 1; }
.var__jugador--a { left: 54%; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .6)); }
.var__jugador--a img { width: 100%; height: 100%; object-fit: contain; }
.var__jugador--b { left: 12%; bottom: 22%; width: min(20vw, 230px); filter: brightness(.35) saturate(.4) drop-shadow(0 20px 20px rgba(0, 0, 0, .6)); }
.var__jugador--b img { width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.var__linea { position: absolute; top: -10%; bottom: -10%; width: 4px; transform-origin: 50% 100%; rotate: 9deg; }
.var__linea--defensa { left: 34%; background: var(--var); box-shadow: 0 0 18px var(--var), 0 0 2px #fff; }
.var__linea--atacante { left: 58%; background: var(--roja); box-shadow: 0 0 18px var(--roja), 0 0 2px #fff; }
.var__linea span { position: absolute; top: 22%; left: 12px; padding: 4px 8px; white-space: nowrap; border-radius: 3px; rotate: -9deg; font: 700 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: #001; background: currentColor; }
.var__linea--defensa span { color: var(--var); } .var__linea--atacante span { color: var(--roja); }
.var__linea--defensa span { background: var(--var); color: #01222a; } .var__linea--atacante span { background: var(--roja); color: #fff; }
.var__hud { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; gap: 14px; align-items: center; font: 700 14px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; }
.var__rec { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #000; border-radius: 4px; }
.var__rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--roja); animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: .15; } }
.var__estado { padding: 8px 12px; background: rgba(0, 0, 0, .55); border-radius: 4px; }
.var__cam { margin-left: auto; opacity: .8; }
.var__veredicto { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.var__sello { margin: 0; display: flex; flex-direction: column; align-items: center; font: 900 clamp(70px, 14vw, 210px)/.8 var(--titulo); text-transform: uppercase; color: var(--tiza); opacity: 0; text-shadow: 0 10px 60px rgba(0, 0, 0, .6); }
.var__sello span:last-child { color: var(--oro); }
.var__remate { margin: 22px 0 0; font: 700 clamp(18px, 2.2vw, 30px)/1.1 var(--cond); letter-spacing: .06em; opacity: 0; }
.var__puerta { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--noche); transform: scaleX(0); }
.var__puerta--i { left: 0; transform-origin: 0 50%; }
.var__puerta--d { right: 0; transform-origin: 100% 50%; }

/* ─── MARCADOR ─── */
.marcador {
  position: fixed; z-index: 90; top: 14px; left: 50%; translate: -50% 0; width: min(1320px, calc(100% - 28px));
  display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 12px; border-radius: 16px;
  background: rgba(5, 13, 8, .72); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 0 0 1px var(--linea), 0 18px 40px -20px rgba(0, 0, 0, .8); transition: transform .6s var(--ease), opacity .6s;
}
.intro-activa .cursor { display: none; }
.intro-activa .marcador { transform: translateY(-140%); opacity: 0; }
.marcador__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 22px/1 var(--titulo); letter-spacing: .04em; }
.marcador__marca img { width: 40px; height: 40px; border-radius: 50%; }
.marcador__tablero { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 10px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font: 800 16px/1 var(--cond); letter-spacing: .08em; }
.marcador__equipo--rival { color: var(--tiza-3); }
.marcador__goles { display: flex; align-items: center; gap: 4px; }
.marcador__goles b { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 5px; background: var(--oro); color: #1b0f06; font: 900 20px/1 var(--titulo); }
.marcador__goles b:last-child { background: #22302a; color: var(--tiza); }
.marcador__goles b.sube { animation: sube .7s var(--rebote); }
@keyframes sube { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-6deg); background: #fff; } 100% { transform: scale(1); } }
.marcador__goles i { font-style: normal; color: var(--tiza-3); }
.marcador__reloj { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 5px 9px; border-radius: 6px; background: var(--cesped); font-variant-numeric: tabular-nums; min-width: 88px; }
.marcador__reloj small { font-size: 12px; color: var(--oro-2); }
.marcador__vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--roja); animation: parpadeo 1.2s steps(2) infinite; }
.marcador__nav { display: flex; gap: 4px; margin-left: auto; }
.marcador__nav a { padding: 10px 12px; border-radius: 8px; text-decoration: none; font: 600 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--tiza-2); transition: color .3s, background .3s; }
.marcador__nav a:hover, .marcador__nav a.activa { color: var(--tiza); background: rgba(255, 255, 255, .07); }
.marcador__sonido { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--tiza-3); }
.marcador__sonido svg { width: 22px; height: 22px; }
.marcador__sonido .onda { opacity: .25; }
.marcador__sonido[aria-pressed="true"] { color: var(--oro-2); }
.marcador__sonido[aria-pressed="true"] .onda { opacity: 1; animation: onda 1s ease-in-out infinite alternate; }
@keyframes onda { to { opacity: .35; } }
.marcador__pedir { min-height: 44px; padding: 0 18px; font-size: 14px; }
.marcador__pedir svg { width: 20px; height: 20px; }

/* ─── HERO ─── */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 2vw; padding: 130px var(--gutter) 150px; overflow: hidden; isolation: isolate; }
.hero__fondo { position: absolute; inset: -6% -4% 0; z-index: -3; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: saturate(1.05) brightness(.62); }
.hero__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 13, 8, .9) 0%, rgba(5, 13, 8, .5) 45%, rgba(5, 13, 8, .15) 100%), linear-gradient(0deg, var(--noche) 2%, transparent 40%); }
.reflector { position: absolute; top: -12%; width: 38vw; height: 70vh; border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, rgba(255, 226, 170, .38), transparent 62%); mix-blend-mode: screen; opacity: 0; filter: blur(6px); }
.reflector--1 { left: 6%; rotate: -14deg; } .reflector--2 { left: 34%; } .reflector--3 { right: 2%; rotate: 16deg; }
.hero.encendido .reflector { animation: encender 1.6s steps(1) forwards, respirar 6s 2s ease-in-out infinite alternate; }
.hero.encendido .reflector--2 { animation-delay: .35s, 2.3s; } .hero.encendido .reflector--3 { animation-delay: .7s, 2.6s; }
@keyframes encender { 0% { opacity: 0; } 10% { opacity: 1; } 16% { opacity: .1; } 26% { opacity: .9; } 32% { opacity: .2; } 45%, 100% { opacity: 1; } }
@keyframes respirar { from { opacity: 1; } to { opacity: .72; } }
.humo { position: absolute; width: 60vw; height: 30vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(220, 230, 220, .12), transparent); filter: blur(20px); animation: humo 26s linear infinite; }
.humo--1 { top: 36%; left: -20%; } .humo--2 { top: 54%; left: 40%; animation-duration: 34s; animation-direction: reverse; }
@keyframes humo { from { transform: translateX(-10vw); } to { transform: translateX(30vw); } }
.hero__grama { position: absolute; left: 0; right: 0; bottom: 0; height: 24vh; z-index: -1; background: linear-gradient(transparent, rgba(5, 13, 8, .8)); }

.hero__texto { position: relative; max-width: 760px; }
.hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 22px; font: 600 14px/1.2 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--tiza-2); }
.hero__titulo { margin: 0; font: 900 clamp(84px, 13.4vw, 232px)/.8 var(--titulo); text-transform: uppercase; letter-spacing: -.01em; }
.hero__linea { display: block; }
.hero__linea--2 { color: var(--oro); padding-left: .3em; position: relative; white-space: nowrap; }
.hero__linea sup { position: relative; top: -.9em; margin-left: .12em; padding: .12em .24em .06em; border-radius: .08em; background: var(--tiza); color: var(--noche); font-size: .16em; letter-spacing: .08em; vertical-align: baseline; }
.hero__titulo .letra { display: inline-block; will-change: transform; }
.hero__lema { max-width: 560px; margin: 28px 0 32px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--tiza-2); }
.hero__lema em { font-style: normal; color: var(--tiza); background: linear-gradient(transparent 62%, rgba(242, 169, 59, .45) 62%); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__datos { display: flex; gap: 28px; margin: 38px 0 0; padding: 0; list-style: none; }
.hero__datos li { display: flex; flex-direction: column; gap: 2px; }
.hero__datos b { display: flex; align-items: center; gap: 4px; font: 900 34px/1 var(--titulo); }
.hero__datos b svg { width: 22px; height: 22px; color: var(--oro); }
.hero__datos span { font: 600 13px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--tiza-3); }

.hero__estrella { position: relative; display: grid; place-items: center; min-height: 560px; }
.hero__foco { position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 204, 120, .34), rgba(255, 204, 120, .08) 55%, transparent); }
.hero__plato { position: relative; width: min(38vw, 560px); aspect-ratio: 1; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 60px rgba(242, 169, 59, .22)); }
.hero__plato img { width: 100%; height: 100%; object-fit: contain; animation: flotar 5s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-14px) rotate(1.5deg); } }
.hero__plato::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -2%; height: 8%; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(12px); z-index: -1; animation: sombra 5s ease-in-out infinite; }
@keyframes sombra { 50% { transform: scaleX(.86); opacity: .7; } }
.hero__ficha { position: absolute; left: 2%; bottom: 8%; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 14px; background: rgba(5, 13, 8, .78); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--linea); }
.hero__dorsal { display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 6px; border-radius: 10px; background: linear-gradient(160deg, var(--oro-2), var(--oro-3)); color: var(--cafe); font: 900 34px/1 var(--titulo); }
.hero__nombre { display: flex; flex-direction: column; }
.hero__nombre small { font: 600 13px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--tiza-3); }
.hero__nombre b { font: 800 26px/1 var(--titulo); text-transform: uppercase; }
.hero__precio { margin-left: 8px; font: 800 22px/1 var(--cond); color: var(--oro-2); }
.hero__siguiente { position: absolute; right: 0; bottom: 10%; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; border-radius: 999px; background: var(--tiza); color: var(--noche); font: 700 14px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; transition: transform .4s var(--rebote); }
.hero__siguiente svg { width: 18px; height: 18px; }
.hero__siguiente:hover { transform: scale(1.06) rotate(-2deg); }
/* el tablero del cuarto árbitro: LED rojo que sale y verde que entra */
.cambio { position: absolute; top: 2%; right: 8%; z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #0b0b0b; box-shadow: 0 0 0 3px #222, 0 20px 40px rgba(0, 0, 0, .5); rotate: 6deg; transform-origin: 50% 120%; }
.cambio span { display: flex; align-items: center; gap: 10px; font: 900 34px/1 var(--titulo); font-variant-numeric: tabular-nums; }
.cambio i { font-style: normal; font-size: 18px; }
.cambio__sale { color: #ff4d4d; text-shadow: 0 0 12px #ff4d4d; }
.cambio__entra { color: #3dff7a; text-shadow: 0 0 12px #3dff7a; }
.cambio b { min-width: 2.2ch; text-align: right; background: radial-gradient(circle, currentColor 1.2px, transparent 1.4px) 0 0 / 4px 4px; -webkit-background-clip: text; background-clip: text; }
.cambio.animar { animation: levantar .9s var(--rebote); }
@keyframes levantar { 0% { transform: translateY(40px) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

.hero__balon { position: absolute; z-index: 5; left: 0; top: 0; width: 70px; height: 70px; padding: 0; border: 0; background: none; touch-action: none; will-change: transform; }
.hero__balon svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .5)); }
.hero__balon-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; white-space: nowrap; padding: 6px 10px; border-radius: 6px; background: var(--tiza); color: var(--noche); font: 700 13px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; transition: opacity .4s; animation: botecito 1.4s ease-in-out infinite; }
.hero__balon-tip::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 6px solid transparent; border-top-color: var(--tiza); }
.hero__balon.pateado .hero__balon-tip { opacity: 0; }
@keyframes botecito { 50% { transform: translateY(-5px); } }

/* la valla LED del borde de la cancha */
.led { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; overflow: hidden; background: #070707; border-top: 2px solid #1d1d1d; box-shadow: 0 -20px 60px rgba(242, 169, 59, .08); }
.led::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 1.1px, #070707 1.5px) 0 0 / 5px 5px; pointer-events: none; }
.led__pista { display: flex; width: max-content; height: 100%; align-items: center; gap: 34px; padding-left: 34px; animation: led 38s linear infinite; font: 900 32px/1 var(--titulo); text-transform: uppercase; letter-spacing: .04em; color: var(--oro-2); text-shadow: 0 0 10px rgba(255, 200, 97, .8); }
.led__pista span:nth-child(4n+3) { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .7); }
@keyframes led { to { transform: translateX(-50%); } }

/* ─── LA PREVIA ─── */
.previa { position: relative; padding: 150px var(--gutter) 130px; background: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(34, 112, 58, .22), transparent), var(--noche); }
.previa__frase { max-width: 1250px; margin: 0 0 90px; font: 800 clamp(34px, 5.2vw, 84px)/1.02 var(--titulo); text-transform: uppercase; }
.previa__frase .palabra { display: inline-block; opacity: .13; transition: none; }
.previa__grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 22px; }
.previa__foto { position: relative; margin: 0; overflow: hidden; border-radius: 18px; }
.previa__foto img { width: 100%; height: 100%; object-fit: cover; scale: 1.15; }
.previa__foto--a { grid-row: span 2; aspect-ratio: 4 / 3.4; }
.previa__foto--b { aspect-ratio: 4 / 2.6; }
.previa__foto figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; border-radius: 6px; background: rgba(0, 0, 0, .65); backdrop-filter: blur(6px); font: 700 14px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.previa__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 0; list-style: none; border-radius: 18px; overflow: hidden; background: var(--linea); }
.previa__stats li { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 22px; background: var(--noche-2); }
.previa__stats b { font: 900 clamp(46px, 5vw, 72px)/.9 var(--titulo); color: var(--oro); font-variant-numeric: tabular-nums; }
.previa__stats span { font: 600 14px/1.25 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--tiza-3); }

/* ─── LA ALINEACIÓN ─── */
.alineacion { position: relative; padding: 130px var(--gutter) 120px; background: linear-gradient(180deg, var(--noche), var(--noche-2)); }
.alineacion__cabeza { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px 40px; margin-bottom: 44px; }
.alineacion__cabeza .etiqueta, .alineacion__cabeza .titulo { grid-column: 1 / -1; }
.alineacion__intro { max-width: 560px; margin: 0; color: var(--tiza-2); }
.formaciones { display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.formaciones button { padding: 10px 16px; border: 0; border-radius: 8px; background: none; font: 800 18px/1 var(--cond); letter-spacing: .06em; color: var(--tiza-3); transition: .3s; }
.formaciones button.activa { background: var(--tiza); color: var(--noche); }
.tablero {
  position: relative; border-radius: 26px; padding: clamp(14px, 2vw, 26px); overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 8.33%, transparent 8.33% 16.66%), radial-gradient(ellipse at 50% 40%, #1f6a35, #10401f 75%);
  box-shadow: inset 0 0 0 10px #0c2c16, inset 0 0 120px rgba(0, 0, 0, .45), 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.tablero__cancha { width: 100%; height: auto; aspect-ratio: 1000 / 640; color: rgba(244, 240, 230, .72); }
.tablero__cancha .flechas path { color: var(--oro-2); }
.tablero__fichas { position: absolute; inset: clamp(14px, 2vw, 26px); bottom: auto; aspect-ratio: 1000 / 640; }
.ficha { position: absolute; left: 0; top: 0; width: clamp(64px, 7vw, 96px); translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; text-align: center; will-change: left, top; }
.ficha__foto { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--noche-3); box-shadow: 0 0 0 3px var(--tiza), 0 12px 24px rgba(0, 0, 0, .5); transition: transform .45s var(--rebote), box-shadow .3s; }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha__foto--camiseta { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #ffd98f, var(--oro-3)); }
.ficha__foto--camiseta b { font: 900 clamp(26px, 3vw, 40px)/1 var(--titulo); color: var(--cafe); }
.ficha__num { position: absolute; top: -4px; right: -4px; min-width: 28px; height: 28px; padding: 0 5px; display: grid; place-items: center; border-radius: 8px; background: var(--noche); color: var(--oro-2); font: 900 16px/1 var(--titulo); box-shadow: 0 0 0 2px var(--oro); z-index: 1; }
.ficha__nombre { max-width: 130%; padding: 4px 8px; border-radius: 5px; background: rgba(5, 13, 8, .85); font: 700 clamp(11px, 1vw, 14px)/1.05 var(--cond); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ficha__precio { font: 800 clamp(12px, 1vw, 15px)/1 var(--cond); color: var(--oro-2); text-shadow: 0 2px 4px rgba(0, 0, 0, .8); }
.ficha--cap .ficha__foto { box-shadow: 0 0 0 3px var(--oro-2), 0 0 0 7px rgba(242, 169, 59, .35), 0 12px 24px rgba(0, 0, 0, .5); }
.ficha--cap::before { content: "C"; position: absolute; top: -6px; left: -6px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--oro); color: var(--cafe); font: 900 15px/1 var(--titulo); }
.ficha:hover .ficha__foto, .ficha:focus-visible .ficha__foto { transform: scale(1.12) translateY(-4px); }
.ficha:hover { z-index: 3; }
.banca { display: flex; align-items: center; gap: 20px; margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.banca > p { margin: 0; font: 800 14px var(--cond); letter-spacing: .3em; text-transform: uppercase; color: var(--tiza-3); writing-mode: vertical-rl; rotate: 180deg; }
.banca__fichas { display: flex; flex-wrap: wrap; gap: 26px; }
.banca .ficha { position: relative; translate: none; width: 70px; }

/* ─── LÁMINA (modal tipo carta de jugador) ─── */
.lamina-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; perspective: 1400px; }
.lamina-modal[hidden] { display: none; }
.lamina-modal__fondo { position: absolute; inset: 0; background: rgba(2, 6, 4, .78); backdrop-filter: blur(8px); animation: aparecer .4s both; }
@keyframes aparecer { from { opacity: 0; } }
.lamina-modal__carta { position: relative; width: min(380px, 92vw); animation: voltear .9s var(--ease) both; transform-style: preserve-3d; }
@keyframes voltear { from { transform: rotateY(-180deg) scale(.6); opacity: 0; } 50% { opacity: 1; } }
.carta {
  position: relative; padding: 22px 22px 20px; border-radius: 22px 22px 22px 22px; color: var(--cafe); overflow: hidden;
  background: linear-gradient(155deg, #ffe7ad 0%, #f3bf5c 32%, #d89533 62%, #f7cf7a 100%);
  box-shadow: 0 0 0 2px #fff3cf inset, 0 0 0 7px rgba(58, 34, 23, .9) inset, 0 40px 90px -20px rgba(0, 0, 0, .8);
  clip-path: polygon(0 5%, 12% 0, 88% 0, 100% 5%, 100% 95%, 88% 100%, 12% 100%, 0 95%);
}
.carta::before { /* brillo holográfico que sigue al puntero */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .85), transparent 40%), linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 45%, transparent 60%);
}
.carta__arriba { display: flex; justify-content: space-between; align-items: flex-start; }
.carta__dorsal { display: flex; flex-direction: column; align-items: center; font: 900 58px/.85 var(--titulo); }
.carta__dorsal small { font: 800 16px/1.2 var(--cond); letter-spacing: .12em; }
.carta__dorsal .carta__pais { margin-top: 4px; padding: 3px 6px 2px; border-radius: 4px; background: var(--cafe); color: var(--oro-2); font: 800 14px/1 var(--cond); letter-spacing: .12em; }
.carta__dorsal .carta__pais:empty { display: none; }
.carta__logo { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px var(--cafe); }
.carta__img { position: relative; height: 230px; margin: -30px -10px 0; display: grid; place-items: center; }
.carta__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(58, 34, 23, .45)); }
.carta__img--foto > img { position: static; width: 86%; height: 200px; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 3px var(--cafe); margin-top: 26px; }
.carta__img--camiseta svg { height: 210px; width: auto; }
.carta__nombre { margin: 8px 0 4px; padding: 6px 0; text-align: center; font: 900 32px/.95 var(--titulo); text-transform: uppercase; border-top: 2px solid rgba(58, 34, 23, .4); border-bottom: 2px solid rgba(58, 34, 23, .4); }
.carta__desc { margin: 10px 0 12px; text-align: center; font: 500 15px/1.4 var(--texto); }
.carta__base { margin: 0 0 12px; text-align: center; font: 700 12.5px/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.carta__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carta__precio { font: 900 34px/1 var(--titulo); }
.carta__precio small { display: block; font: 700 12px var(--cond); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.carta__fichar { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--cafe); color: var(--oro-2); font: 800 16px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; transition: transform .35s var(--rebote); }
.carta__fichar svg { width: 20px; height: 20px; fill: currentColor; }
.carta__fichar:hover { transform: scale(1.06); }
.carta__cerrar { position: absolute; top: -14px; right: -14px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tiza); color: var(--noche); font-size: 26px; line-height: 1; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }

/* ─── EL ÁLBUM ─── */
.album { position: relative; padding: 130px var(--gutter) 120px; color: var(--tinta); background: var(--papel); }
.album::before { /* textura de papel del álbum */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .8), transparent 40%), repeating-linear-gradient(0deg, transparent 0 38px, rgba(90, 53, 34, .06) 38px 39px);
}
.album > * { position: relative; }
.album__cabeza { max-width: 900px; margin-bottom: 36px; }
.album__nota { margin: 20px 0 0; color: var(--tinta-2); }
.album__pestanas { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scrollbar-width: none; }
.album__pestanas::-webkit-scrollbar { display: none; }
.album__pestanas button { flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 16px; border: 0; border-radius: 12px; background: #fff7e8; box-shadow: 0 0 0 1.5px var(--papel-2); text-align: left; transition: .3s var(--ease); }
.album__pestanas button b { font: 800 19px/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.album__pestanas button small { font: 600 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.album__pestanas button[aria-selected="true"] { background: var(--cafe); color: var(--oro-2); box-shadow: 0 10px 22px -10px rgba(58, 34, 23, .8); transform: translateY(-2px); }
.album__pestanas button[aria-selected="true"] small { color: var(--papel-2); }
.album__seccion-nota { min-height: 1.5em; max-width: 820px; margin: 10px 0 28px; font: 500 16px/1.5 var(--texto); color: var(--tinta-2); }
.album__laminas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 22px; perspective: 1200px; }
.lamina { position: relative; display: flex; flex-direction: column; padding: 10px 10px 12px; border-radius: 14px; background: #fffdf8; color: var(--tinta); box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 14px 28px -16px rgba(58, 34, 23, .55); transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .5s; will-change: transform; }
.lamina:hover { box-shadow: 0 30px 50px -22px rgba(58, 34, 23, .7); }
.lamina__num { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 4px 7px; border-radius: 4px; background: rgba(0, 0, 0, .7); color: #fff; font: 800 12px/1 var(--cond); letter-spacing: .1em; }
.lamina__img { position: relative; aspect-ratio: 4 / 3.2; border-radius: 8px; overflow: hidden; background: var(--cesped); }
.lamina__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.lamina:hover .lamina__img img { transform: scale(1.06); }
.lamina__img--vacia { display: grid; place-items: center; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 28px), radial-gradient(circle at 50% 40%, #237140, #0f3a1e); }
.lamina__img--vacia svg { width: 46%; height: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45)); }
.lamina__img--camiseta { background: radial-gradient(circle at 50% 40%, #fff2cc, #e0a445 75%); }
.lamina__img--camiseta svg { width: auto; height: 86%; }
.lamina__img--vacia b { position: absolute; right: 10px; bottom: 6px; font: 900 52px/1 var(--titulo); color: rgba(255, 255, 255, .16); }
.lamina__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 12px 4px 0; }
.lamina__nombre { margin: 0; font: 800 23px/1 var(--titulo); text-transform: uppercase; }
.lamina__desc { flex: 1; margin: 7px 0 12px; font-size: 14.5px; line-height: 1.4; color: var(--tinta-2); }
.lamina__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lamina__precio { font: 900 26px/1 var(--titulo); color: var(--cafe); }
.lamina__pedir { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 0; border-radius: 999px; background: var(--cesped-2); color: #fff; font: 700 13.5px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; transition: transform .35s var(--rebote), background .3s; }
.lamina__pedir svg { width: 16px; height: 16px; fill: currentColor; }
.lamina__pedir:hover { transform: scale(1.07); background: var(--verde); color: #04210f; }
.lamina--brillante { background: linear-gradient(145deg, #fff6dc, #f5d58c 40%, #fff3d0 60%, #e9b95b); }
.lamina--brillante::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light; opacity: .9; background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .9) 35%, rgba(120, 220, 255, .5) 42%, rgba(255, 120, 200, .4) 50%, transparent 62%) calc(var(--mx, 50%) * 2 - 50%) 0 / 200% 100%; }
.lamina--brillante .lamina__img { background: radial-gradient(circle at 50% 45%, #fff2cc, #e0a445 70%); }
.lamina--brillante .lamina__img img { object-fit: contain; padding: 4%; filter: drop-shadow(0 10px 12px rgba(58, 34, 23, .4)); }
.lamina.entra { animation: pegar .7s var(--ease) both; }
@keyframes pegar { from { opacity: 0; transform: translateY(30px) rotateX(-40deg) rotate(-3deg); } }

/* ─── TARJETAS DE PICANTE ─── */
.tarjetas { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 50px; padding: 130px var(--gutter); background: radial-gradient(ellipse at 80% 50%, rgba(229, 56, 59, .12), transparent 60%), var(--noche-2); overflow: hidden; }
.tarjetas__texto p:not(.etiqueta) { max-width: 480px; margin: 26px 0 0; color: var(--tiza-2); font-size: 18px; }
.tarjetas__mano { position: relative; display: flex; justify-content: center; height: 440px; perspective: 900px; }
.tarjeta {
  position: absolute; bottom: 10px; width: 200px; aspect-ratio: .68; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 20px;
  border: 0; border-radius: 14px; text-align: left; transform-origin: 50% 130%; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .6s var(--rebote), box-shadow .4s, translate 1s var(--rebote), opacity .6s;
}
.tarjetas:not(.repartidas) .tarjeta { translate: 0 120%; opacity: 0; }
.tarjeta--azul { transition-delay: 0s, 0s, .12s, .12s; } .tarjeta--roja { transition-delay: 0s, 0s, .24s, .24s; }
.tarjeta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(140deg, rgba(255, 255, 255, .35), transparent 45%); pointer-events: none; }
.tarjeta b { font: 900 44px/.9 var(--titulo); text-transform: uppercase; }
.tarjeta span { font: 800 22px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.tarjeta small { font: 600 14px/1.2 var(--cond); letter-spacing: .06em; opacity: .8; }
.tarjeta--amarilla { background: var(--amarilla); color: #3a2a00; transform: rotate(-16deg) translateX(-120px); }
.tarjeta--azul { background: var(--azul); color: #fff; transform: rotate(0deg) translateY(-14px); }
.tarjeta--roja { background: var(--roja); color: #fff; transform: rotate(16deg) translateX(120px); }
.tarjeta:hover, .tarjeta.sacada { z-index: 2; box-shadow: 0 50px 70px -20px rgba(0, 0, 0, .9); }
.tarjeta--amarilla:hover, .tarjeta--amarilla.sacada { transform: rotate(-6deg) translate(-110px, -80px) scale(1.06); }
.tarjeta--azul:hover, .tarjeta--azul.sacada { transform: translateY(-100px) scale(1.06); }
.tarjeta--roja:hover, .tarjeta--roja.sacada { transform: rotate(6deg) translate(110px, -80px) scale(1.06); }

/* ─── EL ESTADIO (galería en transmisión) ─── */
.estadio { position: relative; overflow: hidden; background: var(--noche); }
.estadio__pista { display: flex; align-items: center; gap: 4vw; width: max-content; height: 100svh; padding: 110px 6vw 60px var(--gutter); }
.estadio__intro { flex: none; width: min(440px, 80vw); }
.estadio__intro p:not(.etiqueta) { margin: 24px 0 0; color: var(--tiza-2); }
.estadio__desliza { display: inline-flex; gap: 10px; margin-top: 30px !important; font: 700 14px var(--cond); letter-spacing: .3em; text-transform: uppercase; color: var(--oro) !important; }
.estadio__desliza span { animation: desliza 1.2s ease-in-out infinite; }
@keyframes desliza { 50% { transform: translateX(8px); } }
.toma { position: relative; flex: none; margin: 0; }
.toma__img { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px var(--linea), 0 40px 60px -30px rgba(0, 0, 0, .9); }
.toma--h .toma__img { height: 58vh; aspect-ratio: 4 / 3; }
.toma--v .toma__img { height: 72vh; aspect-ratio: 3 / 4.2; }
.toma__img img { width: 100%; height: 100%; object-fit: cover; scale: 1.1; }
.toma__img::before { content: "● EN VIVO"; position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 8px; border-radius: 4px; background: var(--roja); font: 800 12px/1 var(--cond); letter-spacing: .14em; }
.toma__img::after { content: "FDL"; position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 8px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: var(--oro-2); font: 900 14px/1 var(--titulo); letter-spacing: .06em; }
.toma figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: stretch; overflow: hidden; border-radius: 6px; font: 700 clamp(14px, 1.2vw, 17px)/1.1 var(--cond); letter-spacing: .04em; text-transform: uppercase; clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease) .15s; }
.toma.visible figcaption { clip-path: inset(0 0 0 0); }
.toma figcaption b { padding: 10px 10px; background: var(--oro); color: var(--cafe); font-weight: 900; }
.toma figcaption { background: rgba(5, 13, 8, .88); }
.toma figcaption { padding-right: 12px; gap: 10px; align-items: center; }

/* ─── PENAL ─── */
.penal { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 60px; padding: 130px var(--gutter); background: linear-gradient(180deg, var(--noche), var(--noche-3)); }
.penal__texto p:not(.etiqueta) { max-width: 470px; margin: 24px 0 0; color: var(--tiza-2); }
.penal__serie { display: flex; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.penal__serie li { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tiza-3); transition: .4s var(--rebote); }
.penal__serie li.gol { background: var(--verde); box-shadow: none; transform: scale(1.1); }
.penal__serie li.atajado { background: var(--roja); box-shadow: none; }
.penal__resultado { min-height: 1.6em; font: 700 20px/1.3 var(--cond) !important; letter-spacing: .04em; color: var(--tiza) !important; }
.penal__otra { margin-top: 18px; }
.penal__cancha { position: relative; aspect-ratio: 1.25; border-radius: 22px; overflow: hidden; cursor: crosshair; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  background: linear-gradient(180deg, #0b1f13 0%, #0b1f13 38%, #1a5a2d 38.2%, #22703a 100%);
  box-shadow: 0 0 0 1px var(--linea), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.penal__cancha::before { content: ""; position: absolute; inset: 38% 0 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .04) 0 9%, transparent 9% 18%); }
.penal__cancha::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 70%; height: 30%; translate: -50% 0; border: 3px solid rgba(255, 255, 255, .6); border-bottom: 0; transform: perspective(300px) rotateX(55deg); transform-origin: 50% 100%; }
.penal__arco { position: absolute; left: 13%; right: 13%; top: 10%; height: 36%; border: 7px solid #f4f4f0; border-bottom: 0; border-radius: 4px 4px 0 0; box-shadow: 0 0 20px rgba(255, 255, 255, .15); }
.penal__red { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 1.5px, transparent 1.5px 13px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .22) 0 1.5px, transparent 1.5px 13px); transform-origin: 50% 0; }
.penal__red.sacude { animation: red .8s ease-out; }
@keyframes red { 20% { transform: scale(1.04, 1.1) translateY(-2%); } 45% { transform: scale(.98, .96); } 70% { transform: scale(1.01, 1.03); } }
.penal__arquero { position: absolute; left: 50%; bottom: -2%; width: 22%; translate: -50% 0; transform-origin: 50% 90%; transition: transform .45s cubic-bezier(.2, .9, .3, 1); }
.penal__arquero svg { width: 100%; height: auto; overflow: visible; }
.penal__arquero.listo { animation: arquero 1.3s ease-in-out infinite; }
@keyframes arquero { 50% { transform: translateX(-6%) translateY(-2%); } }
.penal__mira { position: absolute; width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%; border: 2px solid var(--oro-2); box-shadow: 0 0 0 6px rgba(255, 200, 97, .2); pointer-events: none; opacity: 0; transition: opacity .2s; }
.penal__mira::before, .penal__mira::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--oro-2); translate: -50% -50%; }
.penal__mira::before { width: 2px; height: 60%; } .penal__mira::after { width: 60%; height: 2px; }
.penal__cancha:hover .penal__mira { opacity: 1; }
.penal__punto { position: absolute; left: 50%; bottom: 9%; width: 12%; translate: -50% 0; }
.penal__balon { width: 100%; height: auto; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .5)); will-change: transform; }
.penal__gol { position: absolute; left: 50%; top: 46%; margin: 0; translate: -50% -50%; font: 900 clamp(60px, 9vw, 130px)/1 var(--titulo); text-transform: uppercase; color: var(--oro-2); text-shadow: 0 8px 40px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; }

/* ─── MINUTO A MINUTO ─── */
.narracion { padding: 130px var(--gutter); background: var(--noche-3); }
.narracion__cabeza { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; margin-bottom: 50px; }
.narracion__cabeza .etiqueta, .narracion__cabeza .titulo { grid-column: 1; }
.narracion__nota { display: flex; align-items: center; gap: 6px; margin: 0; max-width: 360px; color: var(--tiza-2); font-size: 15px; }
.narracion__nota b { font: 900 40px/1 var(--titulo); color: var(--tiza); }
.narracion__nota svg { width: 24px; height: 24px; color: var(--oro); flex: none; }
.narracion__lista { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; margin: 0; padding: 0; list-style: none; }
.jugada { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--linea); }
.jugada__min { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 900 34px/1 var(--titulo); color: var(--oro); }
.jugada__min svg { width: 26px; height: 26px; }
.jugada blockquote { margin: 0; font-size: 18px; line-height: 1.5; color: var(--tiza); }
.jugada blockquote strong { color: var(--oro-2); font-weight: 600; }
.jugada cite { display: block; margin-top: 10px; font: 600 13px/1.2 var(--cond); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--tiza-3); }
.jugada cite span { color: var(--oro); letter-spacing: .1em; }

/* ─── LAS SEDES (boletas) ─── */
.sedes { padding: 130px var(--gutter); background: radial-gradient(ellipse at 20% 0%, rgba(242, 169, 59, .12), transparent 50%), var(--noche); }
.sedes__cabeza { margin-bottom: 50px; }
.sedes__boletas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.boleta { position: relative; display: grid; grid-template-columns: 1fr 150px; border-radius: 20px; overflow: hidden; color: var(--tinta); background: var(--papel); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); transition: transform .6s var(--ease); }
.boleta:hover { transform: translateY(-6px) rotate(-.6deg); }
.boleta__cuerpo { padding: 26px 28px 26px; }
.boleta__foto { position: relative; height: 180px; margin: -26px -28px 22px; overflow: hidden; }
.boleta__foto img { width: 100%; height: 100%; object-fit: cover; }
.boleta__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .6)); }
.boleta__estado { position: absolute; left: 16px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 6px; font: 800 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; background: #111; color: #fff; }
.boleta__estado i { width: 9px; height: 9px; border-radius: 50%; background: #888; }
.boleta__estado.abierta i { background: var(--verde); box-shadow: 0 0 10px var(--verde); animation: parpadeo 1.4s steps(2) infinite; }
.boleta__tipo { margin: 0; font: 800 13px/1 var(--cond); letter-spacing: .3em; text-transform: uppercase; color: var(--cafe-2); }
.boleta__nombre { margin: 6px 0 10px; font: 900 44px/.9 var(--titulo); text-transform: uppercase; }
.boleta__dir { display: flex; gap: 8px; margin: 0 0 16px; font-size: 16.5px; }
.boleta__dir svg { width: 20px; height: 20px; flex: none; color: var(--roja); margin-top: 2px; }
.boleta__horario { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; margin: 0 0 20px; font: 600 15px/1.35 var(--cond); letter-spacing: .03em; }
.boleta__horario dt { text-transform: capitalize; color: var(--tinta-2); }
.boleta__horario dd { margin: 0; font-variant-numeric: tabular-nums; }
.boleta__horario .hoy { color: var(--cesped-2); font-weight: 800; }
.boleta__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.boleta__acciones .boton { min-height: 46px; padding: 0 18px; font-size: 14px; }
.boleta__acciones .boton--tinta { --fondo: var(--cafe); --color: var(--oro-2); }
.boleta__talon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 10px; background: var(--cafe); color: var(--oro-2); text-align: center; }
.boleta__talon::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; border-left: 3px dotted var(--papel); }
.boleta__talon b { font: 900 60px/.8 var(--titulo); }
.boleta__talon span { font: 700 12px/1.3 var(--cond); letter-spacing: .2em; text-transform: uppercase; }
.boleta__talon .estrellas { display: flex; align-items: center; gap: 4px; font: 900 26px/1 var(--titulo); color: #fff; }
.boleta__talon .estrellas svg { width: 20px; height: 20px; color: var(--oro); }
.boleta__corte { position: absolute; right: 136px; width: 28px; height: 28px; border-radius: 50%; background: var(--noche); z-index: 2; }
.boleta__corte--a { top: -14px; } .boleta__corte--b { bottom: -14px; }

/* ─── EL GOL FINAL ─── */
.final { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 130px var(--gutter); overflow: hidden; background: radial-gradient(ellipse at 70% 50%, rgba(34, 112, 58, .35), transparent 60%), var(--noche-2); }
.final__texto { position: relative; z-index: 2; max-width: 620px; }
.final__texto p:not(.etiqueta) { margin: 22px 0 32px; font-size: 19px; color: var(--tiza-2); }
.final__arco { position: absolute; right: -2vw; top: 50%; width: min(58vw, 820px); aspect-ratio: 1.6; translate: 0 -50%; border: 10px solid #f1f1ec; border-right: 0; border-radius: 8px 0 0 8px; box-shadow: 0 0 60px rgba(255, 255, 255, .08); }
.final__red { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 1.5px, transparent 1.5px 18px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 1.5px, transparent 1.5px 18px); transform-origin: 100% 50%; }
.final__red.sacude { animation: redFinal 1s ease-out; }
@keyframes redFinal { 25% { transform: scaleX(1.08) scaleY(1.03); } 50% { transform: scaleX(.97); } 75% { transform: scaleX(1.02); } }
.final__balon { position: absolute; left: -60vw; top: 50%; width: 110px; translate: 0 -50%; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .5)); will-change: transform; }

/* ─── PIE ─── */
.pie { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; padding: 70px var(--gutter) 40px; background: #030805; border-top: 1px solid var(--linea); }
.pie__marca img { width: 86px; height: 86px; border-radius: 50%; }
.pie__marca p { margin: 14px 0 0; font: italic 700 18px var(--cond); letter-spacing: .04em; color: var(--oro-2); }
.pie__col { display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; color: var(--tiza-2); }
.pie__col b { margin-bottom: 4px; font: 800 15px var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--tiza); }
.pie__col a { text-decoration: none; } .pie__col a:hover { color: var(--oro-2); }
.pie__legal { grid-column: 1 / -1; margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 13px; line-height: 1.6; color: var(--tiza-3); }

/* ─── CELEBRACIÓN y CURSOR ─── */
.celebra { position: fixed; inset: 0; z-index: 250; pointer-events: none; display: grid; place-items: center; }
.celebra__confeti { position: absolute; inset: 0; width: 100%; height: 100%; }
.celebra__texto { position: relative; margin: 0; font: 900 clamp(80px, 16vw, 260px)/.85 var(--titulo); text-transform: uppercase; text-align: center; color: var(--oro-2); -webkit-text-stroke: 3px var(--cafe); text-shadow: 0 12px 0 var(--cafe), 0 30px 80px rgba(0, 0, 0, .6); opacity: 0; }
.celebra__texto small { display: block; margin-top: .25em; font-size: .22em; -webkit-text-stroke: 0; text-shadow: 0 4px 20px rgba(0, 0, 0, .8); color: var(--tiza); letter-spacing: .06em; }
.cursor { position: fixed; left: 0; top: 0; z-index: 500; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; opacity: 0; transition: opacity .3s, width .3s, height .3s; }
.cursor svg { width: 100%; height: 100%; }
.con-cursor .cursor { opacity: 1; }
.con-cursor .cursor.grande { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.pisada { position: fixed; z-index: 499; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--oro-2); pointer-events: none; animation: pisada .6s ease-out forwards; }
@keyframes pisada { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* ─── WhatsApp ─── */
.wa-boton {
  position: fixed; z-index: 80; right: 22px; bottom: 22px; width: 66px; height: 66px; border: 0; border-radius: 50%;
  background: #25d366; box-shadow: 0 10px 30px -6px rgba(37, 211, 102, .6), 0 4px 12px rgba(0, 0, 0, .3);
  display: grid; place-items: center; transition: transform .45s var(--rebote);
}
.wa-boton::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: pulso 2.6s ease-out infinite; }
@keyframes pulso { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.wa-boton:hover { transform: scale(1.08) rotate(-8deg); }
.wa-boton > svg { position: relative; width: 34px; height: 34px; fill: #fff; }
.wa-boton__balon { position: absolute; right: -6px; top: -8px; width: 28px; height: 28px; animation: rebote 1.6s cubic-bezier(.3, 0, .5, 1) infinite; }
.wa-boton__balon svg { width: 100%; height: 100%; animation: girar 1.6s linear infinite; }
@keyframes rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes girar { to { rotate: 360deg; } }
.wa-abierto .wa-boton, .intro-activa .wa-boton { transform: scale(0); }
.wa-globo {
  position: fixed; z-index: 80; right: 100px; bottom: 32px; max-width: 270px; margin: 0; padding: 12px 34px 12px 16px;
  border-radius: 14px 14px 4px 14px; background: #fff; color: #111b21; font: 400 14px/1.4 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(10px) scale(.96); transform-origin: right bottom; pointer-events: none; transition: all .5s var(--ease);
}
.wa-globo p { margin: 0; }
.wa-globo b { display: block; color: #008069; font-size: 13px; }
.wa-globo.visible { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.wa-globo button { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; color: #667781; line-height: 1; padding: 4px; }
.wa-abierto .wa-globo { opacity: 0; pointer-events: none; }

.wa {
  --wa-verde: #008069; --wa-burbuja: #d9fdd3; --wa-fondo: #efeae2;
  position: fixed; z-index: 150; right: 22px; bottom: 22px; width: 410px; height: min(720px, calc(100svh - 44px));
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--wa-fondo); color: #111b21;
  font: 400 14.5px/1.4 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .06);
  opacity: 0; transform: translateY(24px) scale(.94); transform-origin: right bottom; pointer-events: none; visibility: hidden;
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility .45s;
}
.wa-abierto .wa { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.wa__cabeza { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 6px; background: var(--wa-verde); color: #fff; }
.wa__atras { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; }
.wa__atras svg, .wa__iconos svg { width: 22px; height: 22px; fill: #fff; }
.wa__avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; object-fit: cover; }
.wa__quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa__quien b { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa__verif { flex: none; width: 15px; height: 15px; }
.wa__estado { font-size: 12.5px; opacity: .85; }
.wa__iconos { display: flex; gap: 20px; }
.wa__cuerpo {
  flex: 1; overflow-y: auto; padding: 10px 14px 6px; overscroll-behavior: contain; background-color: var(--wa-fondo);
  /* el papel tapiz de WhatsApp, pero con balones, silbatos, guayos, trofeos y hamburguesas */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23d6ccbc' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='30' cy='30' r='14'/%3E%3Cpath d='M30 23l6 4-2 7h-8l-2-7zM30 16v7M36 27l7-2M34 34l4 6M26 34l-4 6M24 27l-7-2'/%3E%3Cpath d='M120 20h26v5c0 12-6 20-13 20s-13-8-13-20zM120 25h-6c0 8 4 11 8 11M146 25h6c0 8-4 11-8 11M133 45v8M125 55h16'/%3E%3Cpath d='M20 120h40c0-10-9-16-20-16s-20 6-20 16zM18 126h44M20 132h40c0 6-4 9-9 9H29c-5 0-9-3-9-9z'/%3E%3Cpath d='M100 110h22v5l-10 3a9 9 0 1 1-12-8zM118 104h4v6'/%3E%3Cpath d='M130 150l24-10 6 12-24 10zM136 160l-2 6M150 154l-2 6'/%3E%3Cpath d='M78 70l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z'/%3E%3Cpath d='M72 160h16v10H72z'/%3E%3C/svg%3E");
}
.wa__fecha { width: max-content; margin: 6px auto 10px; padding: 5px 12px; border-radius: 8px; background: #fff; font-size: 12.5px; color: #54656f; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa__aviso { display: flex; gap: 8px; margin: 0 auto 14px; max-width: 92%; padding: 8px 12px; border-radius: 8px; background: #ffeecd; font-size: 12.5px; line-height: 1.4; color: #54656f; text-align: center; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa__aviso svg { flex: none; width: 13px; height: 13px; margin-top: 2px; fill: #54656f; }
.wa__mensajes { display: flex; flex-direction: column; gap: 3px; }
.msj { position: relative; max-width: 84%; padding: 6px 8px 8px 9px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); word-wrap: break-word; white-space: pre-wrap; animation: msj .28s var(--ease) both; }
@keyframes msj { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.msj--ellos { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.msj--yo { align-self: flex-end; background: var(--wa-burbuja); border-top-right-radius: 0; }
.msj--ellos.primero::before, .msj--yo.primero::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.msj--ellos.primero::before { left: -8px; background: #fff; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.msj--yo.primero::before { right: -8px; background: var(--wa-burbuja); clip-path: polygon(0 0, 100% 0, 0 100%); }
.msj:not(.primero) { border-radius: 8px; }
.msj.primero { margin-top: 8px; }
.msj__hora { float: right; margin: 8px 0 -4px 12px; font-size: 11px; color: #667781; display: inline-flex; align-items: center; gap: 3px; }
.msj__hora svg { width: 16px; height: 11px; fill: #53bdeb; }
.msj a { color: #027eb5; }
.msj-botones { align-self: flex-start; display: grid; gap: 3px; width: 84%; max-width: 300px; margin-top: 1px; animation: msj .3s .1s var(--ease) both; }
.msj-botones button { padding: 10px; border: 0; border-radius: 8px; background: #fff; color: #027eb5; font-size: 14.5px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); display: flex; align-items: center; justify-content: center; gap: 6px; }
.msj-botones button svg { width: 15px; height: 15px; fill: #027eb5; }
.msj-botones button:hover { background: #f5f6f6; }
.msj-botones.usados button { color: #8696a0; pointer-events: none; }
.msj-botones.usados button svg { fill: #8696a0; }
.escribiendo { display: inline-flex; gap: 4px; padding: 4px 2px; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: punto 1.3s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.wa__atajos { display: flex; gap: 6px; padding: 6px 10px 2px; overflow-x: auto; scrollbar-width: none; }
.wa__atajos::-webkit-scrollbar { display: none; }
.wa__atajos button { flex: none; padding: 7px 12px; border: 1px solid #d1d7db; border-radius: 18px; background: #fff; color: #008069; font-size: 13px; }
.wa__atajos button:hover { background: #f0f2f5; }
.wa__pie { display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px 8px; }
.wa__caja { flex: 1; display: flex; align-items: flex-end; padding: 9px 14px; border-radius: 24px; background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa__caja textarea { flex: 1; resize: none; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; line-height: 1.4; max-height: 110px; color: #111b21; padding: 1px 0; }
.wa__enviar { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #00a884; }
.wa__enviar svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.wa__enviar:disabled { opacity: .6; }

/* la planilla del pedido: un tiquete de estadio dentro del chat */
.planilla { align-self: flex-start; width: 88%; max-width: 320px; margin-top: 8px; padding: 6px; border-radius: 8px; background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); animation: planilla .8s var(--ease) both; }
@keyframes planilla { from { opacity: 0; transform: translateY(20px) rotate(-3deg) scale(.92); } }
.planilla__tiquete { position: relative; border-radius: 8px; overflow: hidden; background: #fbf5e9; color: var(--tinta); }
.planilla__cabeza { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cafe); color: var(--oro-2); }
.planilla__cabeza img { width: 36px; height: 36px; border-radius: 50%; }
.planilla__cabeza b { display: block; font: 900 20px/1 var(--titulo); text-transform: uppercase; letter-spacing: .02em; }
.planilla__cabeza small { font: 700 11.5px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--papel-2); }
.planilla__items { margin: 0; padding: 10px 14px 6px; list-style: none; }
.planilla__items li { display: grid; grid-template-columns: 26px 1fr auto; gap: 6px; padding: 6px 0; border-bottom: 1px dashed #d8cbb2; font-size: 13.5px; line-height: 1.3; }
.planilla__items li:last-child { border-bottom: 0; }
.planilla__items b { font: 900 16px/1.1 var(--titulo); color: var(--cafe-2); }
.planilla__items em { display: block; font-style: normal; font-size: 12px; color: var(--tinta-2); }
.planilla__items span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.planilla__totales { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; padding: 8px 14px 10px; border-top: 2px solid var(--cafe); font-size: 13px; }
.planilla__totales dt { color: var(--tinta-2); } .planilla__totales dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.planilla__totales .total { font: 900 21px/1.2 var(--titulo); color: var(--tinta); }
.planilla__datos { margin: 0; padding: 10px 14px; background: #f1e7d4; font-size: 12.5px; line-height: 1.45; }
.planilla__datos b { font-weight: 600; }
.planilla__corte { height: 14px; background: radial-gradient(circle at 7px 0, #fff 6px, transparent 6.5px) 0 0 / 14px 14px repeat-x, #fbf5e9; }
/* seguimiento: el balón avanza por la cancha hasta la puerta de tu casa */
.seguimiento { padding: 12px 14px 14px; background: #fbf5e9; }
.seguimiento__titulo { display: flex; justify-content: space-between; margin: 0 0 12px; font: 800 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--cafe-2); }
.seguimiento__titulo span { color: #8a7a66; font-weight: 600; letter-spacing: .06em; text-transform: none; }
.seguimiento__cancha { position: relative; height: 46px; margin: 0 6px; border-radius: 6px; background: repeating-linear-gradient(90deg, #2c8a47 0 12.5%, #257a3e 12.5% 25%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); overflow: hidden; }
.seguimiento__cancha::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid rgba(255, 255, 255, .7); }
.seguimiento__cancha::after { content: ""; position: absolute; right: -2px; top: 10px; bottom: 10px; width: 10px; border: 2px solid #fff; border-right: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .6) 0 1px, transparent 1px 4px); }
.seguimiento__balon { position: absolute; left: 4%; top: 50%; width: 22px; height: 22px; margin-top: -11px; transition: left 2.4s cubic-bezier(.4, 0, .2, 1); }
.seguimiento__balon svg { width: 100%; height: 100%; animation: girar .8s linear infinite; }
.seguimiento__pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.seguimiento__pasos li { font: 700 11px/1.15 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: #a89880; text-align: center; transition: color .4s; }
.seguimiento__pasos li i { display: block; margin-bottom: 3px; font-style: normal; font-size: 16px; filter: grayscale(1); opacity: .5; transition: .4s; }
.seguimiento__pasos li.hecho { color: var(--cesped-2); }
.seguimiento__pasos li.hecho i { filter: none; opacity: 1; }
.seguimiento__pasos li.actual { color: var(--cafe); }
.seguimiento__pasos li.actual i { filter: none; opacity: 1; animation: rebote .9s ease-in-out infinite; }
.planilla__acciones { display: grid; gap: 3px; margin-top: 6px; }
.planilla__acciones a, .planilla__acciones button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border: 0; border-top: 1px solid #e9edef; background: none; color: #027eb5; font-size: 14px; text-decoration: none; }
.planilla__acciones svg { width: 15px; height: 15px; fill: #027eb5; }

/* ─── Responsive ─── */
@media (max-width: 1180px) {
  .marcador__nav { display: none; }
  .marcador__sonido { margin-left: auto; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 120px; padding-bottom: 110px; gap: 10px; }
  .hero__estrella { min-height: 420px; order: -1; margin-top: -10px; }
  .hero__plato { width: min(78vw, 440px); }
  .hero__ficha { left: 0; bottom: 2%; }
  .hero__siguiente { bottom: auto; top: 6%; right: 0; }
  .cambio { top: 6%; right: auto; left: 0; rotate: -6deg; }
  .tarjetas, .penal { grid-template-columns: 1fr; }
  .previa__grid { grid-template-columns: 1fr; }
  .previa__foto--a { grid-row: auto; }
  .sedes__boletas, .narracion__lista { grid-template-columns: 1fr; }
  .pie { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .marcador { top: 8px; width: calc(100% - 16px); gap: 8px; padding: 6px; border-radius: 14px; }
  .marcador__marca span, .marcador__equipo, .marcador__reloj small { display: none; }
  .marcador__marca img { width: 36px; height: 36px; }
  .marcador__tablero { padding: 5px; gap: 6px; font-size: 14px; }
  .marcador__goles b { min-width: 24px; height: 24px; font-size: 17px; }
  .marcador__reloj { min-width: 0; padding: 5px 7px; }
  .marcador__sonido { width: 38px; height: 38px; }
  .marcador__pedir { min-height: 40px; padding: 0 12px; }
  .marcador__pedir span { display: none; }
  .hero { padding: 96px 16px 96px; }
  .hero__estrella { min-height: 360px; }
  .hero__titulo { font-size: clamp(72px, 23vw, 130px); }
  .hero__linea sup { display: none; }
  .hero__linea--2 { padding-left: .12em; }
  .hero__siguiente { right: 4px; }
  .var__jugador--a { left: 48%; width: 46vw; bottom: 22%; }
  .var__jugador--b { left: 4%; width: 30vw; }
  .var__linea--atacante span { left: auto; right: 12px; }
  .var__hud { font-size: 11px; gap: 8px; }
  .var__cam { display: none; }
  .hero__kicker { font-size: 12.5px; letter-spacing: .12em; }
  .hero__lema { margin: 20px 0 24px; }
  .hero__acciones .boton { flex: 1 1 100%; }
  .hero__datos { gap: 20px; margin-top: 28px; }
  .hero__datos b { font-size: 28px; }
  .hero__ficha { padding: 8px 12px 8px 8px; gap: 10px; }
  .hero__dorsal { min-width: 46px; height: 46px; font-size: 26px; }
  .hero__nombre b { font-size: 20px; }
  .hero__precio { font-size: 18px; }
  .hero__siguiente { padding: 10px 12px; font-size: 12px; }
  .hero__siguiente span { display: none; }
  .cambio span { font-size: 24px; }
  .hero__balon { width: 56px; height: 56px; }
  .led { height: 44px; }
  .led__pista { font-size: 24px; }
  .previa, .alineacion, .album, .tarjetas, .penal, .narracion, .sedes { padding-top: 90px; padding-bottom: 90px; }
  .previa__frase { margin-bottom: 50px; }
  .previa__stats li { padding: 16px; }
  .alineacion__cabeza { grid-template-columns: 1fr; }
  .tablero { padding: 10px; border-radius: 18px; }
  .tablero__cancha { aspect-ratio: 640 / 1000; }
  .tablero__fichas { inset: 10px; aspect-ratio: 640 / 1000; }
  .ficha { width: 50px; gap: 3px; }
  .ficha__num { min-width: 22px; height: 22px; font-size: 13px; top: -6px; right: -8px; }
  .ficha__nombre { font-size: 10.5px; padding: 3px 5px; }
  .ficha__precio { font-size: 11.5px; }
  .banca { gap: 12px; padding: 12px; }
  .banca__fichas { gap: 14px; }
  .banca .ficha { width: 58px; }
  .album__laminas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .lamina { padding: 7px 7px 10px; }
  .lamina__nombre { font-size: 18px; }
  .lamina__desc { font-size: 13px; }
  .lamina__precio { font-size: 21px; }
  .lamina__pie { flex-direction: column; align-items: stretch; }
  .lamina__pedir { justify-content: center; }
  .lamina__num { top: 12px; left: 12px; }
  .tarjetas__mano { height: 330px; }
  .tarjeta { width: 140px; padding: 14px; }
  .tarjeta b { font-size: 32px; } .tarjeta span { font-size: 17px; } .tarjeta small { font-size: 12px; }
  .tarjeta--amarilla { transform: rotate(-14deg) translateX(-88px); } .tarjeta--roja { transform: rotate(14deg) translateX(88px); }
  .tarjeta--amarilla:hover, .tarjeta--amarilla.sacada { transform: rotate(-5deg) translate(-90px, -60px) scale(1.04); }
  .tarjeta--azul:hover, .tarjeta--azul.sacada { transform: translateY(-70px) scale(1.04); }
  .tarjeta--roja:hover, .tarjeta--roja.sacada { transform: rotate(5deg) translate(90px, -60px) scale(1.04); }
  .estadio__pista { width: auto; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 90px 16px 70px; gap: 14px; flex-wrap: nowrap; scrollbar-width: none; }
  .estadio__pista::-webkit-scrollbar { display: none; }
  .estadio__intro { width: 84vw; scroll-snap-align: start; }
  .toma { scroll-snap-align: center; }
  .toma--h .toma__img { height: auto; width: 84vw; }
  .toma--v .toma__img { height: auto; width: 74vw; }
  .penal { gap: 30px; }
  .jugada { grid-template-columns: 50px 1fr; }
  .jugada__min { font-size: 28px; }
  .jugada blockquote { font-size: 16.5px; }
  .narracion__cabeza { grid-template-columns: 1fr; }
  .boleta { grid-template-columns: 1fr; }
  .boleta__cuerpo { padding: 22px 20px; }
  .boleta__foto { margin: -22px -20px 18px; height: 160px; }
  .boleta__nombre { font-size: 38px; }
  .boleta__talon { flex-direction: row; justify-content: space-around; padding: 16px; }
  .boleta__talon::before { left: 10px; right: 10px; top: -1px; bottom: auto; border-left: 0; border-top: 3px dotted var(--papel); }
  .boleta__corte { display: none; }
  .boleta__talon b { font-size: 44px; }
  .final { min-height: 0; padding-top: 110px; padding-bottom: 300px; }
  .final__arco { top: auto; bottom: 40px; translate: 0; width: 88vw; }
  .final__balon { width: 70px; }
  .pie { grid-template-columns: 1fr; gap: 22px; }
  .wa { inset: 0; width: auto; height: 100%; border-radius: 0; }
  .wa-boton { right: 16px; bottom: 16px; width: 60px; height: 60px; }
  .wa-globo { right: 86px; bottom: 22px; max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reflector { opacity: 1; }
}