/* Banner "boleto" de entradas — PDP.
   Tipografía: siempre var(--w-font-head)/var(--w-font-body) (Shapiro /
   Neusa Next Pro, declaradas en astra-child/inc/css/walon-fonts.css) — sin
   fuentes externas, con fallback a system-ui por si ese CSS no cargó.

   Fondo: se deriva de --walon-ent-color (el color REAL del equipo local de
   ese encuentro, via TeamsRoster) oscurecido con color-mix() — así Melgar,
   Grau, Sullana, Dianderas, etc. cada uno tiñe su propio boleto con su
   color, sin tocar este archivo cuando se agregue un encuentro nuevo. El
   dorado es un acento fijo del "programa de entradas" de Walon, no del
   equipo — por eso no depende de --walon-ent-color. */

.walon-entradas-banner{
	--walon-ent-color: #111;
	--walon-gold: #f1dfc0;
	--walon-gold-dim: #cbb489;

	position:relative;display:flex;overflow:hidden;
	width:100%;box-sizing:border-box;flex-basis:100%;
	margin:0 0 16px;
	border-radius:6px;
	background:linear-gradient(160deg, color-mix(in srgb, var(--walon-ent-color) 30%, black) 0%, color-mix(in srgb, var(--walon-ent-color) 48%, black) 100%);
	border:1px solid rgba(255,255,255,.12);
}
.walon-entradas-banner::before{
	content:"";position:absolute;inset:6px;border-radius:3px;border:1px solid rgba(241,223,192,.28);pointer-events:none;
}

.walon-entradas-banner.is-urgente{
	animation:walonEntradasPulse 2.2s ease-in-out infinite;
}
@keyframes walonEntradasPulse{
	0%,100%{ box-shadow:0 0 0 0 rgba(241,223,192,0); }
	50%{ box-shadow:0 0 0 5px rgba(241,223,192,.14); }
}

.walon-entradas-banner.is-agotado{
	background:linear-gradient(160deg,#2c2c2c 0%,#1a1a1a 100%);
}
.walon-entradas-banner.is-agotado::before{border-color:rgba(255,255,255,.14);}

/* ---------- panel principal ---------- */
.walon-entradas-banner__main{flex:1;min-width:0;padding:18px 16px 16px 18px;position:relative;}

.walon-entradas-banner__eyebrow{
	font-family:var(--w-font-body, system-ui, sans-serif);font-size:10px;font-weight:700;letter-spacing:.14em;
	text-transform:uppercase;color:var(--walon-gold);opacity:.85;margin:0 0 10px;
}
.walon-entradas-banner.is-agotado .walon-entradas-banner__eyebrow{color:#999;opacity:1;}

.walon-entradas-banner__match{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap;}
.walon-entradas-banner__match img,
.walon-entradas-banner__match span[style*="border-radius:50%"]{flex-shrink:0;}
.walon-entradas-banner.is-agotado .walon-entradas-banner__match img{filter:grayscale(1) opacity(.55);}

.walon-entradas-banner__vs{
	font-family:var(--w-font-body, system-ui, sans-serif);font-style:italic;font-size:12px;
	color:var(--walon-gold);opacity:.75;
}
.walon-entradas-banner.is-agotado .walon-entradas-banner__vs{color:#888;opacity:1;}

.walon-entradas-banner__names{
	font-family:var(--w-font-head, system-ui, sans-serif);font-size:12.5px;font-weight:800;letter-spacing:.01em;
	color:#fff;text-transform:uppercase;line-height:1.3;
}
.walon-entradas-banner__names span{
	display:block;color:var(--walon-gold);opacity:.7;font-family:var(--w-font-body, system-ui, sans-serif);
	font-weight:400;font-size:10.5px;text-transform:none;margin-top:2px;font-style:normal;
}
.walon-entradas-banner.is-agotado .walon-entradas-banner__names{color:#ccc;}
.walon-entradas-banner.is-agotado .walon-entradas-banner__names span{color:#888;}

.walon-entradas-banner__titulo{
	font-family:var(--w-font-head, system-ui, sans-serif);font-weight:800;font-size:16px;line-height:1.2;
	color:#fff;margin:0 0 5px;letter-spacing:.005em;
}
.walon-entradas-banner.is-agotado .walon-entradas-banner__titulo{color:#bbb;}

.walon-entradas-banner__sub{
	font-family:var(--w-font-body, system-ui, sans-serif);font-size:11px;line-height:1.5;
	color:var(--walon-gold);opacity:.8;max-width:27ch;margin:0;
	text-align:justify;text-justify:inter-word;
}
.walon-entradas-banner.is-agotado .walon-entradas-banner__sub{color:#888;opacity:1;}

/* ---------- talón (con perforación) ---------- */
.walon-entradas-banner__stub{
	width:104px;flex-shrink:0;position:relative;
	background:rgba(255,255,255,.06);
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	padding:14px 8px;
}
.walon-entradas-banner.is-agotado .walon-entradas-banner__stub{background:rgba(255,255,255,.05);}

.walon-entradas-banner__perf{
	position:absolute;left:0;top:0;bottom:0;width:1px;
	background-image:radial-gradient(circle, #fff 2.5px, transparent 2.6px);
	background-size:1px 14px;background-repeat:repeat-y;background-position:center;
	opacity:.9;
}

.walon-entradas-banner__count{
	font-family:var(--w-font-head, system-ui, sans-serif);font-weight:800;font-size:48px;line-height:.85;
	color:var(--walon-gold);font-variant-numeric:tabular-nums;
}
.walon-entradas-banner.is-agotado .walon-entradas-banner__count{color:#8a8a8a;}

.walon-entradas-banner__count-label{
	font-family:var(--w-font-body, system-ui, sans-serif);font-size:9px;font-weight:700;letter-spacing:.08em;
	text-transform:uppercase;color:var(--walon-gold-dim);margin-top:10px;text-align:center;
}
.walon-entradas-banner.is-agotado .walon-entradas-banner__count-label{color:#777;}

@media(max-width:480px){
	.walon-entradas-banner{flex-direction:column !important;}

	/* El panel principal pasa a ocupar todo el ancho de la tarjeta (ya no
	   comparte fila con el talón), así que el contenido se ve pegado a la
	   izquierda con mucho espacio vacío a la derecha si no se centra. Se
	   centra el BLOQUE (escudos+vs, eyebrow, título) como composición,
	   pero el texto dentro de cada línea sigue alineado a la izquierda —
	   nunca se centra letra por letra ni el párrafo largo. */
	/* !important acá a propósito: este banner vive dentro de
	   div.summary.entry-summary, donde walon-pdp-mobile-redesign.css ya
	   aplica sus propias reglas con !important sobre spans/columnas del
	   buy-box — sin esto, esas reglas más específicas del rediseño de PDP
	   ganan por encima de las nuestras y el centrado no se aplicaba aunque
	   la regla fuera correcta. */
	.walon-entradas-banner__main{
		display:flex !important;flex-direction:column !important;
		align-items:center !important;text-align:center !important;
		padding:20px 18px 18px;
	}
	.walon-entradas-banner__match{justify-content:center !important;text-align:center !important;}
	.walon-entradas-banner__names{text-align:center !important;}
	.walon-entradas-banner__sub{text-align:justify !important;max-width:34ch !important;}

	.walon-entradas-banner__stub{
		width:100% !important;flex-direction:row !important;align-items:center !important;
		justify-content:center !important;gap:10px;padding:10px 14px;
	}
	.walon-entradas-banner__perf{left:0;right:0;top:0;bottom:auto;height:1px;width:auto;
		background-image:radial-gradient(circle, #fff 2.5px, transparent 2.6px);
		background-size:14px 1px;background-repeat:repeat-x;background-position:center;}
	.walon-entradas-banner__count{font-size:32px;line-height:1;}
	.walon-entradas-banner__count-label{margin-top:0 !important;text-align:left !important;}
}