@charset "UTF-8";
/* ==========================================================================
   CriticaBits — hero de portada («attract mode»)
   --------------------------------------------------------------------------
   La pantalla que enseñaba una recreativa cuando nadie jugaba: pasa lo
   mejor del catálogo, con la lista de pistas al lado como el selector de
   una máquina de discos.

   Todo el movimiento se apaga con prefers-reduced-motion y el pase
   automático tiene su propio botón de pausa.
   ========================================================================== */

.cb-hero {
	--cbhero-h: clamp(27rem, 64vh, 40rem);
	--cbhero-gutter: clamp(1.25rem, 5vw, 4rem);
	--cbhero-max: 1400px;
	/* Sangrado lateral que alinea el hero con el wordmark de la cabecera. */
	--cbhero-pad: max(var(--cbhero-gutter), calc((100vw - var(--cbhero-max)) / 2));

	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
	background: #06050e;
	overflow: hidden;
	isolation: isolate;
}

/* --------------------------------------------------------------------------
   Escenario
   -------------------------------------------------------------------------- */

.cb-hero__stage {
	position: relative;
	flex: 1 1 auto;
	min-height: var(--cbhero-h);
	overflow: hidden;
}

.cb-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 900ms var(--cb-ease, ease), visibility 900ms;
}

.cb-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* --- Imagen ---------------------------------------------------------------
   Deriva lenta tipo Ken Burns. Sólo se anima la diapositiva visible: las
   demás no gastan compositor. */

.cb-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.cb-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.06);
	filter: saturate(112%);
}

.cb-hero__slide.is-active .cb-hero__media img {
	animation: cb-hero-drift 14s ease-out forwards;
}

@keyframes cb-hero-drift {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}

/* --- Velo -----------------------------------------------------------------
   Dos degradados cruzados: uno vertical para asentar el pie, otro
   horizontal para que el texto de la izquierda tenga siempre contraste
   suficiente sea cual sea la foto. */

.cb-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(4, 3, 10, .97) 0%, rgba(4, 3, 10, .70) 42%, rgba(4, 3, 10, .18) 78%),
		linear-gradient(to right, rgba(4, 3, 10, .95) 0%, rgba(4, 3, 10, .80) 38%, rgba(4, 3, 10, .35) 66%, rgba(4, 3, 10, .10) 100%);
}

/* --- Contenido ------------------------------------------------------------ */

.cb-hero__content {
	position: relative;
	z-index: 3;
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding: var(--cbhero-gutter) var(--cbhero-pad);
}

.cb-hero__content-inner {
	width: 100%;
	max-width: 46rem;
}

/* Entrada escalonada de los elementos de la diapositiva activa. */
.cb-hero__slide.is-active .cb-hero__cat      { animation: cb-hero-in 700ms var(--cb-ease-out, ease) both 120ms; }
.cb-hero__slide.is-active .cb-hero__title    { animation: cb-hero-in 700ms var(--cb-ease-out, ease) both 200ms; }
.cb-hero__slide.is-active .cb-hero__excerpt  { animation: cb-hero-in 700ms var(--cb-ease-out, ease) both 300ms; }
.cb-hero__slide.is-active .cb-hero__meta     { animation: cb-hero-in 700ms var(--cb-ease-out, ease) both 380ms; }
.cb-hero__slide.is-active .cb-hero__cta      { animation: cb-hero-in 700ms var(--cb-ease-out, ease) both 460ms; }

@keyframes cb-hero-in {
	from { opacity: 0; transform: translate3d(0, 22px, 0); }
	to   { opacity: 1; transform: none; }
}

.cb-hero__cat {
	display: inline-flex;
	align-items: center;
	margin-bottom: 1rem;
	padding: .4rem .8rem;
	border-radius: 3px;
	background: var(--cb-neon-pink, #ff005e);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform var(--cb-fast, 140ms) var(--cb-ease-out, ease), background-color var(--cb-fast, 140ms) ease;
}

.cb-hero__cat:hover {
	transform: translateY(-2px);
	background: #fff;
	color: #0b0814;
}

.cb-hero__title {
	margin: 0 0 1rem;
	font-family: var(--title-font, "Plus Jakarta Sans", sans-serif);
	font-size: clamp(1.9rem, 4.6vw, 3.6rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.035em;
	text-wrap: balance;
}

.cb-hero__title a {
	color: #fff;
	text-decoration: none;
	background-image: linear-gradient(90deg, var(--cb-neon-pink, #ff005e), var(--cb-neon-cyan, #00d4ff));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 3px;
	transition: background-size var(--cb-base, 260ms) var(--cb-ease-out, ease);
}

.cb-hero__title a:hover,
.cb-hero__title a:focus-visible {
	background-size: 100% 3px;
}

.cb-hero__excerpt {
	margin: 0 0 1.15rem;
	max-width: 40rem;
	color: rgba(255, 255, 255, .78);
	font-size: clamp(.95rem, 1.5vw, 1.1rem);
	line-height: 1.6;
}

.cb-hero__meta {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1.6rem;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .82rem;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .58);
}

.cb-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 100px;
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		border-color var(--cb-fast, 140ms) ease,
		background-color var(--cb-fast, 140ms) ease,
		gap var(--cb-fast, 140ms) ease;
}

.cb-hero__cta:hover,
.cb-hero__cta:focus-visible {
	gap: 1rem;
	border-color: var(--cb-neon-cyan, #00d4ff);
	background: rgba(0, 212, 255, .12);
}

/* --------------------------------------------------------------------------
   Capas de monitor
   -------------------------------------------------------------------------- */

.cb-hero__scanlines,
.cb-hero__sweep,
.cb-hero__vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
}

/* Líneas de barrido fijas, muy tenues. */
.cb-hero__scanlines {
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0 2px,
		rgba(0, 0, 0, .16) 2px 4px
	);
	mix-blend-mode: multiply;
	opacity: .55;
}

/* Un destello que baja por la pantalla cada pocos segundos, como el
   refresco de un tubo. */
.cb-hero__sweep {
	background: linear-gradient(
		to bottom,
		rgba(0, 212, 255, 0) 0%,
		rgba(0, 212, 255, .05) 45%,
		rgba(255, 0, 94, .07) 50%,
		rgba(0, 212, 255, 0) 100%
	);
	height: 30%;
	inset: auto 0 auto 0;
	animation: cb-hero-sweep 7s linear infinite;
}

@keyframes cb-hero-sweep {
	0%   { transform: translateY(-120%); opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { transform: translateY(430%); opacity: 0; }
}

.cb-hero__vignette {
	background: radial-gradient(130% 100% at 45% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .38) 100%);
	z-index: 5;
}

/* --------------------------------------------------------------------------
   Selector de pistas
   --------------------------------------------------------------------------
   Iba en una columna vertical a la derecha del escenario. A los anchos
   reales del sitio esa columna se quedaba en unos 65 px útiles y
   recortaba los títulos a dos caracteres («Co…», «Atar…»), además de
   comerle sitio al titular. Ahora es una franja horizontal bajo el
   escenario: cada pista recibe una quinta parte del ancho de la página
   —unos 260 px— y el titular recupera el escenario entero.
   -------------------------------------------------------------------------- */

.cb-hero__deck {
	position: relative;
	z-index: 6;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: .8rem var(--cbhero-pad) 1rem;
	background: linear-gradient(180deg, rgba(8, 7, 18, .78), rgba(8, 7, 18, .95));
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.cb-hero__deck-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.cb-hero__deck-label {
	margin: 0;
	font-family: "Press Start 2P", ui-monospace, monospace;
	font-size: .5rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--cb-neon-amber, #ffb14f);
	animation: cb-hero-blink 2.4s steps(1) infinite;
}

@keyframes cb-hero-blink {
	0%, 60%   { opacity: 1; }
	61%, 100% { opacity: .25; }
}

.cb-hero__playpause {
	flex: none;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 4px;
	cursor: pointer;
	transition: border-color var(--cb-fast, 140ms) ease, background-color var(--cb-fast, 140ms) ease;
}

.cb-hero__playpause:hover {
	border-color: var(--cb-neon-cyan, #00d4ff);
	background: rgba(0, 212, 255, .1);
}

/* Dos barras = pausa; al pausar, se transforma en un triángulo de play. */
.cb-hero__playpause-icon {
	display: block;
	width: 8px;
	height: 10px;
	border-left: 3px solid rgba(255, 255, 255, .8);
	border-right: 3px solid rgba(255, 255, 255, .8);
}

.cb-hero__playpause[aria-pressed="true"] .cb-hero__playpause-icon {
	width: 0;
	height: 0;
	border-left: 9px solid rgba(255, 255, 255, .85);
	border-right: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

.cb-hero__deck-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(.75rem, 2vw, 2rem);
}

/* Reparto a partes iguales, y min-width:0 para que el recorte de texto
   actúe dentro de cada pista y no desborde la franja. */
.cb-hero__deck-item {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.cb-hero__deck-item button {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: .5rem;
	width: 100%;
	padding: .3rem 0 .5rem;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
}

.cb-hero__deck-num {
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .72rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .35);
	font-variant-numeric: tabular-nums;
	transition: color var(--cb-fast, 140ms) ease;
}

.cb-hero__deck-title {
	font-size: .82rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, .55);
	transition: color var(--cb-fast, 140ms) ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cb-hero__deck-item button:hover .cb-hero__deck-title,
.cb-hero__deck-item button:focus-visible .cb-hero__deck-title {
	color: #fff;
}

.cb-hero__deck-item.is-active .cb-hero__deck-title { color: #fff; }
.cb-hero__deck-item.is-active .cb-hero__deck-num   { color: var(--cb-neon-pink, #ff005e); }

/* Barra de avance: sólo corre bajo la pista activa. */
.cb-hero__deck-bar {
	grid-column: 1 / -1;
	display: block;
	height: 2px;
	margin-top: .4rem;
	background: rgba(255, 255, 255, .12);
	border-radius: 2px;
	overflow: hidden;
}

.cb-hero__deck-bar i {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--cb-neon-pink, #ff005e), var(--cb-neon-cyan, #00d4ff));
	transform: scaleX(0);
	transform-origin: left center;
}

.cb-hero__deck-item.is-active .cb-hero__deck-bar i {
	animation: cb-hero-progress var(--cb-hero-interval, 6500ms) linear forwards;
}

.cb-hero.is-paused .cb-hero__deck-item.is-active .cb-hero__deck-bar i {
	animation-play-state: paused;
}

@keyframes cb-hero-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
/* --------------------------------------------------------------------------
   Adaptación
   -------------------------------------------------------------------------- */

/* Por debajo de 1024 px cinco pistas a partes iguales dejarían columnas
   de 130 px, así que la franja pasa a ser deslizable con pistas de
   ancho fijo. */
@media (max-width: 1023px) {

	.cb-hero {
		--cbhero-h: clamp(23rem, 54vh, 30rem);
	}

	.cb-hero__deck-list {
		gap: .9rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: .25rem;
		scrollbar-width: thin;
	}

	.cb-hero__deck-item {
		flex: 0 0 min(15rem, 62vw);
		scroll-snap-align: start;
	}

	.cb-hero__deck-title { -webkit-line-clamp: 1; }
}

@media (max-width: 600px) {

	.cb-hero { --cbhero-h: clamp(21rem, 50vh, 27rem); }

	.cb-hero__media::after {
		background: linear-gradient(to top, rgba(4, 3, 10, .97) 0%, rgba(4, 3, 10, .6) 45%, rgba(4, 3, 10, .2) 80%);
	}

	.cb-hero__excerpt { display: none; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido
   --------------------------------------------------------------------------
   Se quedan el cambio de diapositiva (que el JS pasa a manual) y la
   legibilidad; se van la deriva, el barrido, el parpadeo y la entrada
   escalonada.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.cb-hero__slide.is-active .cb-hero__media img,
	.cb-hero__sweep,
	.cb-hero__deck-label,
	.cb-hero__deck-item.is-active .cb-hero__deck-bar i,
	.cb-hero__slide.is-active .cb-hero__cat,
	.cb-hero__slide.is-active .cb-hero__title,
	.cb-hero__slide.is-active .cb-hero__excerpt,
	.cb-hero__slide.is-active .cb-hero__meta,
	.cb-hero__slide.is-active .cb-hero__cta {
		animation: none;
	}

	.cb-hero__sweep { display: none; }

	.cb-hero__slide {
		transition-duration: 1ms;
	}
}

@media print {
	.cb-hero { display: none; }
}