/* --------------------------------------------------------------------------
   Escala de espaciado

   El aire lateral era 1rem fijo desde el móvil hasta el escritorio: a 768px
   el contenido quedaba a 16px del borde, que es lo que hace que una página se
   sienta apretada. Ahora crece con la pantalla, con tope para que en un
   monitor grande no se convierta en un margen absurdo.

   --kb-aire      aire a los lados de cada sección
   --kb-seccion   respiro vertical entre secciones
   --kb-hueco     separación entre piezas dentro de una sección
   -------------------------------------------------------------------------- */

:root {
	--kb-aire: clamp(1.25rem, 4vw, 3rem);
	--kb-seccion: clamp(3rem, 7vw, 5rem);
	--kb-hueco: clamp(1rem, 2.5vw, 1.75rem);
	--kb-hueco-sm: .75rem;

	/* Ancho de lectura cómoda: por encima de ~75 caracteres la vista pierde
	   el renglón al volver al margen izquierdo. */
	--kb-lectura: 68ch;
}

/* ==========================================================================
   KNOCKOUT – Box & Show Fiesta
   Sistema visual: negro carbón, rojo ring, Anton para titulares.
   ========================================================================== */

.kb-hero,
.kb-evento,
.kb-cartelera,
.kb-precios,
.kb-plano,
.kb-cond,
.kb-mapa,
.kb-boletos {
	--kb-rojo: #e60000;
	--kb-rojo-cl: #ffb4a8;
	--kb-rojo-os: #930000;
	--kb-negro: #0f0f0f;
	--kb-carbon: #1b1c1c;
	--kb-humo: #2a2a2a;
	--kb-borde: #393939;
	--kb-hueso: #e4e2e1;
	--kb-gris: #a9a7a6;
	--kb-oro: #d9a441;

	--kb-display: Anton, "Arial Narrow", Impact, sans-serif;
	--kb-texto: "Hanken Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
	--kb-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	box-sizing: border-box;
	color: var(--kb-hueso);
	font-family: var(--kb-texto);
}

/* ==========================================================================
   Landing: se sustituyen las piezas del tema
   ========================================================================== */

/* El tema imprime su propia cabecera clara con un menú automático que lista
   Cart, Checkout y Página de ejemplo, más el título de la página encima del
   hero. En la landing sobra todo eso: el plugin pone su cabecera y su pie. */
body.kb-landing .wp-site-blocks > header.wp-block-template-part,
body.kb-landing .wp-site-blocks > footer.wp-block-template-part,
body.kb-landing .wp-block-post-title {
	display: none;
}

body.kb-landing .entry-content > * {
	margin-block-start: 0;
}

/* El tema apila 70px de margen en <main>, 70px de padding en su grupo y 19px
   más en el contenido: 159px de aire antes de que empiece la portada. En una
   landing a sangre completa eso solo empuja el mapa hacia abajo. */
/* Se anulan las CUATRO propiedades: el tema usa las variantes lógicas
   (margin-block-start / padding-block-start) y anular solo margin-top no las
   toca, aunque el selector gane en especificidad. Lleva !important porque el
   tema las declara desde los estilos globales en línea, que se imprimen
   después de esta hoja. */
body.kb-landing .wp-site-blocks > main,
body.kb-landing main.wp-block-group,
body.kb-landing .wp-site-blocks > .wp-block-group,
body.kb-landing main > .wp-block-group,
body.kb-landing .entry-content {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	padding-top: 0 !important;
	padding-block-start: 0 !important;
}

/* Deja sitio a la cabecera fija. */
body.kb-landing {
	padding-top: 4.5rem;
	background: #0f0f0f;
}

/* ----------------------------------------------------------- Cabecera */

.kb-nav {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 90;
	background: #131313;
	border-bottom: 2px solid #5f3f3a;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .8);
}

/* Con la barra de admin de WordPress, la cabecera baja para no taparla. */
body.admin-bar .kb-nav {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .kb-nav {
		top: 46px;
	}
}

.kb-nav__inner {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	max-width: 80rem;
	height: 4.5rem;
	padding: 0 var(--kb-aire, 1.25rem);
	margin: 0 auto;
	font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

.kb-nav__marca {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-family: Anton, "Arial Narrow", Impact, sans-serif;
	font-size: clamp(1.375rem, 4vw, 1.875rem);
	line-height: 1;
	color: #ffb4a8;
	text-decoration: none;
	letter-spacing: -.01em;
	text-transform: uppercase;
	text-shadow: 0 0 10px rgba(255, 180, 168, .5);
}

.kb-nav__menu {
	display: none;
	gap: .25rem;
}

@media (min-width: 960px) {
	.kb-nav__menu {
		display: flex;
	}
}

.kb-nav__menu a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: .5rem .875rem;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: #e9bcb5;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 3px;
	transition: color .15s ease, background .15s ease;
}

.kb-nav__menu a:hover,
.kb-nav__menu a:focus-visible {
	color: #ffb4a8;
	background: #2a2a2a;
}

.kb-nav__cta {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: .8125rem 1.5rem;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	background: #e60000;
	border-radius: 2px;
	box-shadow: 0 0 30px rgba(230, 0, 0, .4);
	transition: background .15s ease;
}

.kb-nav__cta:hover,
.kb-nav__cta:focus-visible {
	color: #fff;
	background: #930000;
}

/* Los anclajes no deben quedar debajo de la cabecera fija. */
body.kb-landing [id^="kb-"] {
	scroll-margin-top: 5.5rem;
}

/* ---------------------------------------------------------------- Pie */

.kb-pie {
	padding: 3rem var(--kb-aire, 1.25rem);
	font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
	color: #e4e2e1;
	background: #0e0e0e;
	border-top: 4px solid #ffb4a8;
}

.kb-pie__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: flex-start;
	justify-content: space-between;
	max-width: 80rem;
	margin: 0 auto;
}

.kb-pie__logo {
	margin: 0 0 .75rem;
	font-family: Anton, "Arial Narrow", Impact, sans-serif;
	font-size: 1.75rem;
	line-height: 1;
	color: #ffb4a8;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.kb-pie__dir {
	margin: 0 0 .25rem;
	font-size: .9375rem;
	line-height: 1.5;
}

.kb-pie__legal {
	margin: 1rem 0 0;
	font-size: .8125rem;
	color: #8b8b93;
}

.kb-pie__menu {
	display: flex;
	flex-wrap: wrap;
	/* Con menos hueco, en un teléfono los tres enlaces caen tan juntos que se
	   pulsa el de al lado. */
	gap: .25rem 1.5rem;
}

.kb-pie__menu a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: #a9a7a6;
	text-decoration: none;
	text-transform: uppercase;
}

.kb-pie__menu a:hover,
.kb-pie__menu a:focus-visible {
	color: #ffb4a8;
}

/* El resumen fijo del selector no debe tapar el pie. */
body.kb-landing .kb-pie {
	padding-bottom: 7rem;
}

/* El contenido de la landing se pega al borde: las secciones ya traen su
   propio espaciado interior. */
body.kb-landing .entry-content > * {
	margin-block-start: 0;
}

/* Ancho completo.
   Los temas de bloques envuelven el contenido en `is-layout-constrained`, que
   recorta a los hijos al ancho de lectura: las secciones quedaban en 645 px
   dentro de una ventana de 1280. La clase `alignfull` del marcado es el
   mecanismo nativo del tema; esto es el respaldo para temas que no la
   entienden, y por eso lleva un selector de mayor peso que el del tema. */
section.kb-hero,
section.kb-evento,
section.kb-cartelera,
section.kb-precios,
section.kb-plano,
section.kb-cond,
section.kb-sel {
	max-width: none;
	width: auto;
}

.kb-hero *,
.kb-evento *,
.kb-cartelera *,
.kb-precios *,
.kb-plano *,
.kb-cond *,
.kb-boletos * {
	box-sizing: inherit;
}

/* Textura sutil de fondo, la misma en todas las secciones oscuras. */
.kb-evento,
.kb-precios,
.kb-cond {
	background-color: var(--kb-carbon);
}

.kb-hero,
.kb-cartelera,
.kb-plano {
	background-color: var(--kb-negro);
}

/* --------------------------------------------------------------- Tipos */

.kb-t-display {
	font-family: var(--kb-display);
	font-size: clamp(2.5rem, 9vw, 4.5rem);
	font-weight: 400;
	line-height: .92;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.kb-t-titulo {
	font-family: var(--kb-display);
	font-size: clamp(1.75rem, 5vw, 3rem);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
}

.kb-t-etiqueta {
	font-family: var(--kb-mono);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------- Botones */

.kb-btn {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	justify-content: center;
	padding: 1rem 3rem;
	font-family: var(--kb-display);
	font-size: 1.25rem;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: linear-gradient(to bottom, var(--kb-rojo), var(--kb-rojo-os));
	border: 2px solid var(--kb-rojo);
	border-radius: 2px;
	box-shadow: 0 0 30px rgba(230, 0, 0, .4);
	transition: transform .25s ease, border-color .25s ease;
}

.kb-btn:hover,
.kb-btn:focus-visible {
	color: #fff;
	border-color: #fff;
	transform: translateY(-3px);
}

.kb-btn--off {
	color: var(--kb-gris);
	cursor: not-allowed;
	background: var(--kb-humo);
	border-color: var(--kb-borde);
	box-shadow: none;
}

.kb-btn--off:hover {
	border-color: var(--kb-borde);
	transform: none;
}

/* ----------------------------------------------------------------- Hero */

.kb-hero {
	position: relative;
	/* La portada no debe comerse una pantalla entera: lo que vende es el mapa
	   de asientos, y cada píxel de aquí lo empuja hacia abajo. */
	padding: clamp(1.75rem, 4vw, 3rem) var(--kb-aire, 1.25rem) clamp(2rem, 4vw, 3rem);
	overflow: hidden;
	text-align: center;
	border-bottom: 4px solid var(--kb-rojo);
	background-image:
		radial-gradient(ellipse 60% 50% at 50% 0%, rgba(230, 0, 0, .3), transparent 70%),
		linear-gradient(to bottom, rgba(15, 15, 15, 0), var(--kb-negro));
}

.kb-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 60rem;
	margin: 0 auto;
}

.kb-hero__logo {
	display: block;
	width: 100%;
	/* El archivo es cuadrado de 1024px; a 34rem ocupaba 544px de alto solo el
	   logo. Recortado deja sitio al contador y al botón sin hacer scroll. */
	max-width: 20rem;
	height: auto;
	margin: 0 auto 1.25rem;
	filter: drop-shadow(0 0 40px rgba(230, 0, 0, .5));
}

.kb-hero__generos {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin: 0 0 1.5rem;
	font-family: var(--kb-display);
	font-size: clamp(1rem, 3vw, 1.5rem);
	letter-spacing: .1em;
	color: var(--kb-rojo-cl);
	text-transform: uppercase;
}

.kb-hero__generos i {
	font-style: normal;
	color: var(--kb-borde);
}

.kb-hero__titulo {
	margin: 0 0 1rem;
	color: #fff;
	text-shadow: 0 4px 24px rgba(0, 0, 0, .8);
}

.kb-hero__estelar {
	margin: 0 0 2rem;
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	font-weight: 700;
	color: var(--kb-hueso);
}

.kb-hero__cta {
	margin: 2rem 0 0;
}

/* ------------------------------------------------------------ Countdown */

.kb-countdown {
	margin: 0 auto 2rem;
}

.kb-countdown__grid {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}

.kb-countdown__u {
	min-width: 4.5rem;
	padding: .75rem .5rem;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--kb-borde);
	border-radius: 2px;
}

.kb-countdown__n {
	display: block;
	font-family: var(--kb-display);
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: #fff;
}

.kb-countdown__l {
	display: block;
	margin-top: .375rem;
	font-family: var(--kb-mono);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--kb-gris);
	text-transform: uppercase;
}

.kb-countdown__fin {
	margin: 0;
	font-family: var(--kb-display);
	font-size: 1.5rem;
	color: var(--kb-rojo-cl);
	text-transform: uppercase;
}

/* --------------------------------------------------------- Info evento */

.kb-evento {
	padding: var(--kb-seccion, 3rem) var(--kb-aire, 1.25rem);
	border-bottom: 1px solid var(--kb-borde);
}

.kb-evento__grid {
	display: grid;
	max-width: 72rem;
	margin: 0 auto;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 900px) {
	.kb-evento__grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
}

.kb-chip {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	padding: .375rem 1rem;
	margin-bottom: 1.25rem;
	font-family: var(--kb-mono);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: #fff;
	text-transform: uppercase;
	background: var(--kb-rojo);
	border-radius: 2px;
}

.kb-evento__fecha {
	margin: 0 0 2rem;
	color: #fff;
}

.kb-evento__fecha b {
	display: block;
	font-weight: 400;
	color: var(--kb-rojo);
}

.kb-evento__sede {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.5rem;
	background: var(--kb-humo);
	border: 1px solid var(--kb-borde);
	box-shadow: inset 0 4px 20px rgba(0, 0, 0, .8);
}

.kb-evento__pin {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	fill: var(--kb-rojo);
}

.kb-evento__sede h3 {
	margin: 0 0 .5rem;
	font-family: var(--kb-display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
	text-transform: uppercase;
}

.kb-evento__sede p {
	margin: 0;
	font-family: var(--kb-mono);
	font-size: .875rem;
	line-height: 1.55;
	line-height: 1.5;
	color: var(--kb-gris);
}

.kb-evento__caja {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 20rem;
	padding: 2rem;
	overflow: hidden;
	text-align: center;
	background: var(--kb-negro);
	border: 1px solid var(--kb-borde);
}

.kb-evento__caja::before {
	position: absolute;
	inset: 0;
	content: "";
	opacity: .25;
	background-image:
		linear-gradient(45deg, transparent 46%, #1a0e0c 46% 54%, transparent 54%),
		linear-gradient(-45deg, transparent 46%, #1a0e0c 46% 54%, transparent 54%);
	background-size: 8px 8px;
}

.kb-evento__caja > * {
	position: relative;
}

.kb-evento__caja h4 {
	margin: 0 0 1.25rem;
	font-family: var(--kb-display);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
}

.kb-lista-exp {
	padding: 0;
	margin: 0;
	list-style: none;
}

.kb-lista-exp li {
	display: flex;
	gap: .625rem;
	align-items: center;
	justify-content: center;
	margin-bottom: .75rem;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--kb-hueso);
}

.kb-lista-exp svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--kb-rojo-cl);
}

/* ------------------------------------------------------------ Cartelera */

.kb-cartelera {
	padding: var(--kb-seccion, 3rem) var(--kb-aire, 1.25rem);
}

.kb-sec-titulo {
	position: relative;
	max-width: 72rem;
	margin: 0 auto 3rem;
	color: #fff;
	text-align: center;
}

.kb-sec-titulo span {
	position: relative;
	z-index: 1;
	padding: 0 1.5rem;
	background: var(--kb-negro);
}

.kb-sec-titulo::after {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	content: "";
	background: linear-gradient(to right, transparent, var(--kb-rojo), transparent);
}

.kb-precios .kb-sec-titulo span,
.kb-cond .kb-sec-titulo span {
	background: var(--kb-carbon);
}

.kb-cartelera__grid {
	display: grid;
	max-width: 72rem;
	margin: 0 auto;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.kb-cartelera__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.kb-cartel {
	position: relative;
	overflow: hidden;
	background: var(--kb-negro);
	border: 1px solid var(--kb-borde);
}

.kb-cartel img {
	display: block;
	width: 100%;
	height: clamp(24rem, 55vw, 34rem);
	object-fit: cover;
	object-position: top center;
	filter: grayscale(1);
	opacity: .85;
	transition: filter .6s ease, opacity .6s ease;
}

.kb-cartel:hover img,
.kb-cartel:focus-within img {
	filter: grayscale(0);
	opacity: 1;
}

/* Cartel limpio: se ve tal cual lo entregó el diseñador. El estilo anterior
   lo pasaba a blanco y negro con grayscale(1), le bajaba la opacidad y lo
   recortaba a una altura fija con object-fit: cover, así que del cartel a todo
   color se veía una franja gris y apagada. Aquí manda la pieza. */
.kb-cartel--limpio {
	background: transparent;
	border: 0;
	margin: 0;
}

.kb-cartel--limpio img {
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	filter: none;
	opacity: 1;
	border-radius: 10px;
	border: 1px solid var(--kb-borde);
}

.kb-cartel--limpio:hover img,
.kb-cartel--limpio:focus-within img {
	filter: none;
	opacity: 1;
}

.kb-cartel__pie {
	margin-top: .7rem;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--kb-gris);
	text-align: center;
}

.kb-cartel__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #000 5%, rgba(0, 0, 0, .45) 50%, transparent 100%);
}

.kb-cartel__cuerpo {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.5rem;
	text-align: center;
}

.kb-cartel__sello {
	align-self: center;
	padding: .375rem 1rem;
	font-family: var(--kb-mono);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: #fff;
	text-transform: uppercase;
	background: var(--kb-rojo);
	box-shadow: 0 0 30px rgba(230, 0, 0, .4);
}

.kb-cartel__vs {
	display: flex;
	gap: .75rem;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
}

.kb-cartel__vs h3 {
	flex: 1 1 0;
	margin: 0;
	font-family: var(--kb-display);
	font-size: clamp(1.25rem, 4.5vw, 2.25rem);
	font-weight: 400;
	line-height: .95;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

.kb-cartel__vs h3:first-child { text-align: left; }
.kb-cartel__vs h3:last-child { text-align: right; }

.kb-cartel__x {
	flex: 0 0 auto;
	font-family: var(--kb-display);
	font-size: clamp(2rem, 7vw, 3.5rem);
	line-height: 1;
	color: var(--kb-rojo);
	text-shadow: 0 0 20px rgba(230, 0, 0, .8);
}

.kb-cartel__texto {
	margin-top: auto;
	text-align: left;
}

.kb-cartel__texto h3 {
	margin: 0 0 .5rem;
	font-family: var(--kb-display);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
}

.kb-cartel__texto p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--kb-gris);
}

/* -------------------------------------------------------------- Precios */

.kb-precios {
	position: relative;
	padding: var(--kb-seccion, 3rem) var(--kb-aire, 1.25rem);
	border-top: 1px solid var(--kb-borde);
	border-bottom: 1px solid var(--kb-borde);
}

.kb-precios__sub {
	max-width: var(--kb-lectura);
	margin: -2rem auto 2.5rem;
	font-family: var(--kb-mono);
	font-size: .8125rem;
	line-height: 1.6;
	letter-spacing: .12em;
	color: var(--kb-gris);
	text-align: center;
	text-transform: uppercase;
}

.kb-precios__caja {
	max-width: 46rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	margin: 0 auto;
	background: var(--kb-humo);
	border: 1px solid var(--kb-borde);
	box-shadow: inset 0 4px 20px rgba(0, 0, 0, .8);
}

.kb-precios__lista {
	padding: 0;
	margin: 0;
	list-style: none;
}

.kb-precio {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .75rem;
	align-items: baseline;
	padding: .875rem 0;
}

/* Separación entre bloques: filas, mesas y general. */
.kb-precio--grupo {
	padding-top: 1.75rem;
	margin-top: 1rem;
	border-top: 1px solid var(--kb-borde);
}

.kb-precio__nombre {
	font-family: var(--kb-mono);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: #fff;
	text-transform: uppercase;
	white-space: nowrap;
}

.kb-precio--destacado .kb-precio__nombre { color: var(--kb-rojo-cl); }
.kb-precio--mesa .kb-precio__nombre { color: var(--kb-oro); }
.kb-precio--suave .kb-precio__nombre { color: var(--kb-gris); }

/* Los puntos que unen nombre y precio, como en un programa de mano. */
.kb-precio__guia {
	flex: 1 1 3rem;
	height: 1px;
	min-width: 2rem;
	background-image: radial-gradient(circle, var(--kb-gris) 1px, transparent 1px);
	background-position: bottom;
	background-repeat: repeat-x;
	background-size: 8px 2px;
	opacity: .5;
	transform: translateY(-.25rem);
}

.kb-precio:hover .kb-precio__guia { opacity: 1; }

.kb-precio__valor {
	font-family: var(--kb-display);
	font-size: 1.5rem;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

.kb-precio--suave .kb-precio__valor { color: var(--kb-gris); }

.kb-precio__valor del {
	margin-right: .375rem;
	font-family: var(--kb-texto);
	font-size: .9375rem;
	font-weight: 400;
	color: var(--kb-gris);
}

.kb-precio__valor ins {
	color: var(--kb-rojo-cl);
	text-decoration: none;
}

.kb-precio__nota {
	flex: 0 0 100%;
	font-family: var(--kb-mono);
	font-size: .8125rem;
	line-height: 1.6;
	letter-spacing: .08em;
	color: var(--kb-rojo-cl);
	text-align: right;
	text-transform: uppercase;
}

/* Lo que incluye cada zona: ocupa su propio renglón, alineado a la izquierda
   bajo el nombre, para que no compita con el precio. Es el texto que convence
   —la botella y la botana del palco, la primera fila del ring side— así que va
   legible, no como letra chica. */
.kb-precio__detalle {
	/* Sin max-width: con flex-basis 100% el navegador usa el max-width como
	   ancho final y el texto se colaba a la derecha del precio en vez de
	   bajar de renglón. El ancho ya lo limita la caja de precios. */
	flex: 0 0 100%;
	margin-top: .15rem;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--kb-gris);
}

.kb-precio--mesa .kb-precio__detalle {
	color: #d8c9a0;
}

.kb-precio__estado {
	font-family: var(--kb-mono);
	font-size: .75rem;
	color: var(--kb-gris);
	white-space: nowrap;
}

.kb-precio--agotado { opacity: .45; }

.kb-precios__pie {
	margin: 2.5rem 0 0;
	text-align: center;
}

.kb-precios__legal {
	margin: 1rem 0 0;
	font-family: var(--kb-mono);
	font-size: .625rem;
	letter-spacing: .08em;
	color: var(--kb-gris);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- Plano */

.kb-plano {
	padding: var(--kb-seccion, 3rem) var(--kb-aire, 1.25rem);
}

.kb-plano__marco {
	position: relative;
	max-width: 62rem;
	padding: 1rem;
	margin: 0 auto;
	background: #fff;
	border: 4px solid var(--kb-borde);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.kb-plano__marco img {
	display: block;
	width: 100%;
	height: auto;
}

.kb-plano__sello {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	padding: .375rem .875rem;
	font-family: var(--kb-mono);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: #fff;
	text-transform: uppercase;
	background: #000;
	border: 1px solid var(--kb-borde);
}

.kb-plano__pie {
	max-width: 62rem;
	margin: 1.25rem auto 0;
	font-size: .875rem;
	color: var(--kb-gris);
	text-align: center;
}

/* ----------------------------------------------------------- Condiciones */

.kb-cond {
	padding: var(--kb-seccion, 3rem) var(--kb-aire, 1.25rem);
	border-top: 1px solid var(--kb-borde);
}

.kb-cond__lista {
	max-width: 46rem;
	margin: 0 auto;
}

.kb-cond__lista dt {
	margin-bottom: .375rem;
	font-family: var(--kb-mono);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--kb-rojo-cl);
	text-transform: uppercase;
}

.kb-cond__lista dd {
	margin: 0 0 1.5rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--kb-gris);
}

.kb-cond__pie {
	max-width: var(--kb-lectura);
	margin: 0 auto;
	font-family: var(--kb-mono);
	font-size: .75rem;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--kb-gris);
	text-align: center;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ Movimiento */

@media (prefers-reduced-motion: reduce) {
	.kb-btn,
	.kb-cartel img {
		transition: none;
	}

	.kb-btn:hover {
		transform: none;
	}
}