/* ============================================================
   04 · COMPONENTES — capa de primitivas compartidas
   Estos componentes los reutilizan la home Y todas las landings.
   Si una landing necesita algo nuevo, se añade AQUÍ una vez,
   no se duplica en el CSS de la página.
   ============================================================ */

/* —— Botones ——
   Angular, versaleta, Poppins 600. min-height 44px para el pulgar.
   PRIMARY lleva texto NEGRO sobre neón: blanco sobre #ff009c no llega
   a AA (3.9:1); negro sí (5.4:1). Regla del manual de marca. */
.yk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--yk-r-0);
	background: transparent;
	color: var(--yk-paper);
	font-family: var(--yk-f-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
	/* SIN white-space:nowrap. Con nowrap, un texto largo ("Pedir
	   presupuesto por WhatsApp") no puede partirse en dos líneas cuando
	   no cabe, y el botón se sale de su columna en vez de encogerse —
	   verificado con WebKit real: el CTA del hero se salía 43px por la
	   derecha en móvil. Sin nowrap, el texto solo se parte cuando de
	   verdad hace falta; un botón corto sigue en una sola línea igual
	   que antes, así que no cambia nada en el resto del sitio. */
	text-decoration: none;
	cursor: pointer;
	transition: background var(--yk-t-fast) var(--yk-ease),
				color var(--yk-t-fast) var(--yk-ease),
				border-color var(--yk-t-fast) var(--yk-ease),
				box-shadow var(--yk-t-fast) var(--yk-ease),
				transform var(--yk-t-fast) var(--yk-ease);
}

.yk-btn--primary { background: var(--yk-neon); color: #000; border-color: var(--yk-neon); }
.yk-btn--primary:hover { color: #000; box-shadow: var(--yk-glow-md); transform: translateY(-1px); }

.yk-btn--secondary { border-color: var(--yk-paper); color: var(--yk-paper); }
.yk-btn--secondary:hover { background: var(--yk-paper); color: #000; }

.yk-btn--ghost { border-color: var(--yk-line); color: var(--yk-mute); }
.yk-btn--ghost:hover { border-color: var(--yk-paper); color: var(--yk-paper); }

.yk-btn--wa,
.yk-btn--whatsapp { background: var(--yk-whatsapp); color: #000; border-color: var(--yk-whatsapp); }
.yk-btn--wa:hover,
.yk-btn--whatsapp:hover { color: #000; box-shadow: 0 0 24px rgba(37, 211, 102, .45); transform: translateY(-1px); }

.yk-btn[disabled], .yk-btn--disabled {
	border-color: var(--yk-line); color: #3a3a3a; background: transparent;
	cursor: not-allowed; pointer-events: none;
}
.yk-btn--sm { padding: 9px 16px; font-size: 12px; min-height: 36px; }
.yk-btn--lg { padding: 18px 38px; font-size: 16px; }
.yk-btn--block { width: 100%; }
.yk-btn .yk-ico { width: 16px; height: 16px; }

/* —— Eyebrow / chip / badge —— */
.yk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--yk-f-mono);
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--yk-neon);
	margin-bottom: var(--yk-s3);
}
.yk-eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--yk-neon); flex: none; }
.yk-chip {
	display: inline-flex; align-items: center; gap: var(--yk-s2);
	padding: 6px var(--yk-s3);
	border: 1px solid var(--yk-line);
	border-radius: var(--yk-r-pill);
	font-size: var(--yk-type-small);
	color: var(--yk-mute);
}
.yk-chip--neon { border-color: var(--yk-neon); color: var(--yk-neon); background: var(--yk-neon-soft); }

/* —— Línea de metadatos ——
   Dato corto bajo un titular: artista, sesiones, zona, disponibilidad.
   Roboto Mono, que es lo que el manual asigna a metadatos.

   SIN versaleta a propósito, a diferencia de .yk-eyebrow: aquí van frases
   enteras ("Espera actual: entre dos y tres meses"), y una frase en
   mayúsculas se lee peor y algunos lectores de pantalla la deletrean.

   Usa --yk-mute (.55) y no --yk-mute-2 (.38) como .yk-card__meta y
   .yk-article__meta: esto no es un pie de foto, es información con la que
   el visitante decide. A .38 sobre #0c0c0c el contraste se queda al borde
   de AA.

   PENDIENTE DE CONSOLIDAR: .yk-card__meta, .yk-article__meta y
   .yk-artist__meta hacen casi lo mismo que esta clase con tres tamaños y
   dos colores distintos. Cuando se toque el blog, unificar en .yk-meta con
   modificadores. No se hace ahora para no cambiar el aspecto de páginas
   que ya están dadas por buenas. */
.yk-meta {
	display: block;
	margin: 0 0 var(--yk-s3);
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-small);
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--yk-mute);
}
.yk-meta a { color: inherit; text-underline-offset: .18em; }
.yk-meta a:hover,
.yk-meta a:focus-visible { color: var(--yk-neon); }

/* —— Cards —— */
.yk-card {
	background: var(--yk-card);
	border: 1px solid var(--yk-line-2);
	border-radius: var(--yk-r-0);
	padding: var(--yk-s6);
	transition: border-color var(--yk-t) var(--yk-ease), transform var(--yk-t) var(--yk-ease);
}
.yk-card:hover { border-color: var(--yk-line); }
.yk-card--media { padding: 0; overflow: hidden; }
.yk-card--media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.yk-card__body { padding: var(--yk-s5); }

/* —— Breadcrumbs —— */
.yk-crumbs { font-size: var(--yk-type-small); color: var(--yk-mute-2); padding-block: var(--yk-s4); }
.yk-crumbs a { color: var(--yk-mute); }
.yk-crumbs a:hover { color: var(--yk-neon); }
.yk-crumbs span[aria-hidden] { margin-inline: var(--yk-s2); }

/* —— FAQ acordeón ——
   Fix histórico: Hello Elementor resetea los <button> con
   white-space:nowrap, lo que provocaba desbordamiento horizontal en
   móvil. Se fuerza normal + text-align izquierda.

   v4.3 — DOS COLUMNAS en escritorio. Antes la lista iba a una sola
   columna dentro de un contenedor de 1600px: la pregunta ocupaba todo
   el ancho, la respuesta se cortaba a 68ch por legibilidad, y el
   resultado era una franja de texto perdida en medio de un vacío
   enorme. Repartiendo en dos columnas cada una mide la mitad, así que
   pregunta y respuesta ocupan lo mismo y la sección aprovecha el
   ancho sin que la línea de texto se vuelva ilegible.

   align-items:start es lo que impide que al abrir un desplegable la
   columna de al lado dé un salto. */
/* CORREGIDO v4.9 — el "hueco fantasma" al abrir una pregunta.
   Con los .yk-faq__item como hijos DIRECTOS de una rejilla de dos
   columnas, la pregunta 1 y la 2 comparten fila. Al desplegar la 2,
   la fila entera crece y bajo la 1 —que sigue cerrada— aparece un
   hueco vacío. align-items:start evitaba que la caja se estirase,
   pero no que la fila reservase el alto.

   No hay arreglo posible mientras las preguntas sean hermanas dentro
   de la misma rejilla: en CSS grid, dos elementos de la misma fila
   están acoplados por definición. La solución es que cada columna sea
   un contenedor propio (.yk-faq__col), de modo que las preguntas de
   la izquierda no compartan fila con las de la derecha.

   COMPATIBLE HACIA ATRÁS: el selector :has() solo activa las dos
   columnas si la plantilla trae los envoltorios .yk-faq__col. Las
   páginas que todavía llevan el marcado plano (home, anime, fine
   line) caen a una sola columna — que es correcta y, sobre todo, no
   tiene el hueco. Nada se rompe mientras se migran. */
.yk-faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--yk-s8);
	align-items: start;
	max-width: 900px; /* solo aplica en el fallback de una columna */
	/* Sin esto la caja de 900px se queda pegada a la izquierda del
	   contenedor en cuanto la pantalla es más ancha, y el bloque se ve
	   descentrado respecto al resto de la sección. En el modo de dos
	   columnas max-width pasa a none y este auto no hace nada. */
	margin-inline: auto;
}
@media (min-width: 1000px) {
	.yk-faq:has(.yk-faq__col) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: none;
	}
}
/* min-width:0 para que una palabra larga no ensanche la columna. */
.yk-faq__col { min-width: 0; }
.yk-faq__item { border-bottom: 1px solid var(--yk-line-2); }
.yk-faq__q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--yk-s4);
	padding: var(--yk-s5) 0;
	background: none;
	border: 0;
	color: var(--yk-paper);
	font-family: var(--yk-f-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	cursor: pointer;
}
.yk-faq__q:hover { color: var(--yk-neon); }
.yk-faq__icon { flex: none; width: 22px; height: 22px; position: relative; margin-top: 4px; }
.yk-faq__icon::before,
.yk-faq__icon::after {
	content: ""; position: absolute; inset: 50% 0 auto 0;
	height: 2px; background: currentColor;
	transition: transform var(--yk-t) var(--yk-ease);
}
.yk-faq__icon::after { transform: rotate(90deg); }
.yk-faq__q[aria-expanded="true"] .yk-faq__icon::after { transform: rotate(0deg); }
.yk-faq__a { color: var(--yk-mute); padding-bottom: var(--yk-s5); }
/* Sin max-width propio: el ancho ya lo limita la columna de la rejilla.
   Mantenerlo en 68ch aquí volvería a dejar la respuesta corta dentro de
   una columna que ya es estrecha. */
.yk-faq__a p { max-width: none; }
.yk-faq__a[hidden] { display: none; }

/* —— Formularios —— */
.yk-field { display: block; margin-bottom: var(--yk-s4); }
.yk-field__label { display: block; font-size: var(--yk-type-small); color: var(--yk-mute); margin-bottom: var(--yk-s2); }
.yk-input, .yk-textarea, .yk-select {
	width: 100%;
	padding: 13px var(--yk-s4);
	background: var(--yk-card-2);
	border: 1px solid var(--yk-line);
	border-radius: var(--yk-r-0);
	color: var(--yk-paper);
	font-family: var(--yk-f-text);
	font-size: 16px; /* evita el zoom automático de iOS */
	transition: border-color var(--yk-t) var(--yk-ease), box-shadow var(--yk-t) var(--yk-ease);
}
.yk-input:focus, .yk-textarea:focus, .yk-select:focus {
	border-color: var(--yk-neon);
	box-shadow: var(--yk-glow-sm);
	outline: none;
}
.yk-textarea { min-height: 140px; resize: vertical; }

/* —— Divisor y banda CTA —— */
.yk-rule { border: 0; border-top: 1px solid var(--yk-line-2); margin-block: var(--yk-s7); }

.yk-ctaband {
	border: 1px solid var(--yk-line);
	border-radius: var(--yk-r-0);
	background: linear-gradient(180deg, var(--yk-card-2), var(--yk-card));
	padding: clamp(28px, 5vw, 56px);
	text-align: center;
}

/* ============================================================
   AÑADIDOS v3.0 — piezas que usan las plantillas del blog
   ============================================================ */

/* —— Tarjeta de artículo —— */
.yk-card__link { display: block; color: inherit; }
.yk-card__link:hover { color: inherit; }
.yk-card__link:hover .yk-card__title { color: var(--yk-neon); }
.yk-card__title { font-size: 20px; margin: var(--yk-s2) 0 var(--yk-s3); transition: color var(--yk-t) var(--yk-ease); }
.yk-card__excerpt { color: var(--yk-mute); font-size: 15px; margin-bottom: var(--yk-s3); }
.yk-card__meta { font-family: var(--yk-f-mono); font-size: 13px; color: var(--yk-mute-2); }

/* —— Artículo —— */
.yk-article__meta {
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-small);
	color: var(--yk-mute-2);
	display: flex; flex-wrap: wrap; gap: var(--yk-s2);
}
.yk-article__cover { margin-bottom: var(--yk-s6); }
.yk-article__cover img { width: 100%; border-radius: var(--yk-r-0); }

/* —— Prosa: el contenido largo del blog —— */
.yk-prose { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.86); }
.yk-prose h2 { margin-top: var(--yk-s8); }
.yk-prose h3 { margin-top: var(--yk-s6); }
.yk-prose ul, .yk-prose ol { margin: 0 0 var(--yk-s5); padding-left: var(--yk-s5); }
.yk-prose li { margin-bottom: var(--yk-s2); }
.yk-prose li::marker { color: var(--yk-neon); }
.yk-prose a { color: var(--yk-neon); text-decoration: underline; text-underline-offset: 3px; }
.yk-prose a:hover { text-decoration-thickness: 2px; }
.yk-prose img { border-radius: var(--yk-r-0); margin-block: var(--yk-s5); }
.yk-prose blockquote {
	margin: var(--yk-s6) 0;
	padding-left: var(--yk-s5);
	border-left: 3px solid var(--yk-neon);
	font-size: 19px;
	color: var(--yk-paper);
}
.yk-prose table { width: 100%; border-collapse: collapse; margin-block: var(--yk-s5); font-size: 15px; }
.yk-prose th, .yk-prose td { padding: var(--yk-s3); border-bottom: 1px solid var(--yk-line-2); text-align: left; }
.yk-prose th { font-family: var(--yk-f-display); color: var(--yk-paper); }
.yk-prose code {
	font-family: var(--yk-f-mono); font-size: .92em;
	background: var(--yk-card-2); padding: 2px 6px; border-radius: var(--yk-r-0);
}

/* —— Firma de autoría (E-E-A-T) —— */
/* —— Callout: firma de autoría (E-E-A-T) y respuesta rápida (GEO) ——
   Las dos son la misma primitiva: caja con filo magenta a la izquierda.
   Se extrae la base compartida en vez de escribir dos veces el mismo
   borde. .yk-signature conserva exactamente el mismo resultado que antes;
   lo único que cambia es de dónde salen sus declaraciones. */
.yk-signature,
.yk-tldr {
	padding: var(--yk-s5);
	border: 1px solid var(--yk-line-2);
	border-left: 3px solid var(--yk-neon);
	border-radius: var(--yk-r-0);
	background: var(--yk-card);
}

.yk-signature { margin-top: var(--yk-s7); }
.yk-signature p { margin: 0; color: var(--yk-mute); }
.yk-signature a { color: var(--yk-paper); }
.yk-signature a:hover { color: var(--yk-neon); }

/* Respuesta rápida: dos o tres frases factuales que un buscador con IA
   puede citar sin leer el resto de la página. Va siempre bajo el hero.
   Se separa de la firma por el fondo al 18% y por la medida corta: es un
   bloque para leer, no un pie de página. */
.yk-tldr {
	max-width: 70ch;
	padding-left: var(--yk-s6);
	background: var(--yk-neon-soft);
}
.yk-tldr > p { margin: 0; font-size: var(--yk-type-body); line-height: 1.7; }
.yk-tldr a { color: var(--yk-paper); text-underline-offset: .18em; }
.yk-tldr a:hover { color: var(--yk-neon); }

/* —— Paginación —— */
.pagination, .yk-pagination { margin-top: var(--yk-s7); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--yk-s2); justify-content: center; }
.page-numbers {
	display: grid; place-items: center;
	min-width: 42px; height: 42px; padding-inline: var(--yk-s3);
	border: 1px solid var(--yk-line);
	border-radius: var(--yk-r-0);
	color: var(--yk-mute);
	font-family: var(--yk-f-mono); font-size: 14px;
}
.page-numbers:hover { border-color: var(--yk-neon); color: var(--yk-neon); }
.page-numbers.current { background: var(--yk-neon); border-color: var(--yk-neon); color: var(--yk-paper); }
.page-numbers.dots { border-color: transparent; }

/* —— Buscador —— */
.yk-searchform .yk-input { flex: 1 1 auto; }


/* ============================================================
   AÑADIDOS v4.0 — landings de estilo
   Piezas que estrena /tatuaje-anime-malaga/ y que reutilizarán
   las landings de fine line, realismo y blackwork.
   ============================================================ */

/* —— Mecanismo invertido ——
   Modificador de .yk-mech: manda la imagen a la izquierda para poder
   alternar el lado en una secuencia de casos. Tres bloques seguidos con la
   foto siempre a la derecha se leen como una lista; alternando, como una
   secuencia.

   En una columna no hace nada: el texto va antes que la imagen, que es el
   orden correcto de lectura en móvil.

   OJO — el breakpoint debe coincidir con el que usa .yk-mech para pasar a
   dos columnas (vive en 03-layout.css o 05-patterns.css, no aquí). Si ahí
   no son 900px, corrige este valor o quedará un rango de anchos en el que
   la imagen se sube sin motivo. */
@media (min-width: 900px) {
	.yk-mech--rev .yk-mech__text  { order: 2; }
	.yk-mech--rev .yk-mech__media { order: 1; }
}

/* —— Antes de escribirnos (encaje) ——
   Reemplaza a la v4.0 .yk-fit: aquella iba en dos cajas enfrentadas con
   borde propio, y el resultado se leía como una advertencia de dos
   columnas — el mismo lenguaje de "tarjeta con borde" que usa media home.
   Esta versión es solo tipografía y una regla fina: menos peso visual,
   y de paso la página deja de parecer una variación de la portada.

   Los dos bloques NO llevan fondo ni borde propio. La única frontera es
   un filete superior en el segundo grupo (mobile) o un filete lateral
   (desktop), que separa sin encerrar. */
.yk-before {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--yk-s6);
	margin-top: var(--yk-s6);
}

@media (min-width: 900px) {
	.yk-before { grid-template-columns: 1fr 1fr; gap: var(--yk-s8); }
	.yk-before__no { padding-left: var(--yk-s7); border-left: 1px solid var(--yk-line); }
}

.yk-before__no {
	padding-top: var(--yk-s5);
	border-top: 1px solid var(--yk-line);
}

@media (min-width: 900px) {
	.yk-before__no { padding-top: 0; border-top: 0; }
}

.yk-before h3 { margin-top: 0; }
.yk-before ul:last-child { margin-bottom: 0; }
.yk-before__no { color: var(--yk-mute); }
.yk-before__no h3 { color: var(--yk-paper); }


/* —— Hero editorial (variante) ——
   Dos filas en vez de dos columnas: el H1 rompe arriba a su propio
   ancho y por debajo se abre en texto + imagen asimétrico. Es la
   alternativa al hero 50/50 de la portada, para que las landings de
   estilo no se lean como la misma plantilla con otro texto.

   El H1 se limita a 22ch: a ancho completo de un contenedor de 1600px
   una sola línea de titular mide media pantalla y pierde fuerza. */
.yk-hero--editorial .yk-hero__top { margin-bottom: var(--yk-s6); }
.yk-hero--editorial .yk-hero__top h1 { max-width: 22ch; }

.yk-hero--editorial .yk-hero__lower {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(28px, 4vw, 72px);
	/* stretch, no start: la columna de texto y la imagen reparten la
	   MISMA altura de fila. Con align-items:start (como estaba) y la
	   imagen en 4/5, la foto acababa siendo más alta que el bloque de
	   texto y colgaba por debajo — es justo el descuadre reportado. */
	align-items: stretch;
}
.yk-hero--editorial .yk-hero__copy { max-width: 62ch; }
.yk-hero--editorial .yk-hero__shot { width: 100%; display: block; overflow: hidden; }
.yk-hero--editorial .yk-hero__shot img {
	width: 100%;
	/* Sin aspect-ratio fijo: la imagen ya no impone su propia altura.
	   Ocupa el 100% de lo que mida la fila (que ahora fija la columna
	   de texto, casi siempre más corta que una foto vertical 4/5), y
	   object-fit:cover recorta el sobrante en vez de dejarlo colgando. */
	height: 100%;
	object-fit: cover;
	/* Punto de recorte. Por defecto "centro, 15% desde arriba": en una
	   foto vertical recortada más corta, un centro puro (50% 50%) corta
	   lo mismo por arriba que por abajo, y si el tatuaje está en la
	   mitad superior de la foto original, el recorte centrado se come
	   parte de la pieza — se ve "baja" dentro del marco.

	   AJUSTABLE POR FOTO sin tocar este archivo: pon en el <img> del PHP
	   style="--yk-hero-shot-pos: 50% 5%" para subir más el encuadre, o
	   "50% 40%" para bajarlo. El primer valor mueve en horizontal (no
	   suele hacer falta tocarlo), el segundo en vertical: 0% enseña el
	   borde superior de la foto, 100% el inferior. */
	object-position: var(--yk-hero-shot-pos, 50% 15%);
}

@media (max-width: 860px) {
	.yk-hero--editorial .yk-hero__lower { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.yk-hero--editorial .yk-hero__shot { order: -1; }
	/* En una sola columna no hay fila que igualar: aquí sí conviene un
	   ratio fijo y razonable en vez de estirar a una altura arbitraria. */
	.yk-hero--editorial .yk-hero__shot img { height: auto; aspect-ratio: 4 / 3; }
	.yk-hero--editorial .yk-hero__top { margin-bottom: var(--yk-s5); }
}

/* —— Datos sueltos del hero (v4.6 — pastillas) ——
   Antes era una fila plana con línea superior: eso es lo que la hacía
   leerse como una sección nueva y no como parte del hero, y de ahí la
   sensación de "despegada". Ahora es una fila de pastillas con acento
   rosa — más llamativo — y sin el hairline que creaba esa separación.

   CONTENIDO, no solo estilo — leer antes de rellenar dt/dd:
   el mismo lineup (valoración + reseñas + años + precio + cita) en
   home, anime y fine line convierte la trust bar en ruido repetido en
   vez de una señal de confianza. La valoración puede repetirse porque
   es un dato real de estudio y vale en cualquier página; el resto de
   pastillas debería salir de lo que ESA landing vende, no copiarse de
   la anterior. Revisar home y anime bajo este mismo criterio: si hoy
   repiten el lineup genérico, es deuda pendiente, no es intencional. */
.yk-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: var(--yk-s4) 0 0;
}
.yk-facts > div {
	position: relative;
	padding: 9px 18px 9px 24px;
	border: 1px solid var(--yk-line);
	border-radius: 999px;
	background: var(--yk-neon-soft);
}
.yk-facts > div::before {
	content: "";
	position: absolute;
	left: 11px; top: 50%;
	transform: translateY(-50%);
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--yk-neon);
	box-shadow: 0 0 8px rgba(255, 0, 156, .55);
}
.yk-facts dt {
	font-family: var(--yk-f-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--yk-mute-2);
	margin: 0 0 2px;
}
.yk-facts dd {
	margin: 0;
	font-family: var(--yk-f-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--yk-paper);
	white-space: nowrap;
}


/* —— Showcase asimétrico ——
   Texto y lista de series a un lado, rejilla de obra al otro. Es lo
   contrario del patrón de la home (titular arriba + rejilla ancha
   debajo), que es el que hacía que las dos páginas se parecieran.

   El aside se queda pegado al hacer scroll en escritorio: la rejilla
   es más alta que el texto y si no, queda un hueco muerto al lado. */
.yk-showcase {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
}
@media (min-width: 1100px) {
	.yk-showcase__aside { position: sticky; top: calc(var(--yk-s8) + 40px); }
}
.yk-showcase__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--yk-s3);
}
.yk-showcase__item { display: block; overflow: hidden; margin: 0; }
.yk-showcase__item img {
	width: 100%; height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform var(--yk-t) var(--yk-ease);
}
.yk-showcase__item:hover img { transform: scale(1.03); }

@media (max-width: 1000px) {
	.yk-showcase { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.yk-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yk-s2); }
}

/* —— Lista de series ——
   Texto corrido con separadores, no pastillas: dieciséis chips
   seguidos eran ruido visual y competían con las fotos de al lado. */
.yk-serieslist {
	margin-top: var(--yk-s5);
	padding-top: var(--yk-s5);
	border-top: 1px solid var(--yk-line-2);
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-small);
	line-height: 2;
	color: var(--yk-mute);
}


/* —— Principios (rejilla 2×2) ——
   Alternativa a .yk-steps para cuando los puntos NO son una secuencia
   temporal sino criterios simultáneos. Sin línea de tiempo conectada y
   sin contador CSS: el numeral es una etiqueta, no un orden a seguir.
   Existe para que una página pueda tener "cómo trabajamos" y "cómo se
   reserva" sin que los dos bloques se vean idénticos. */
.yk-principles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--yk-s6);
	margin-top: var(--yk-s7);
}
@media (max-width: 760px) {
	.yk-principles { grid-template-columns: minmax(0, 1fr); gap: var(--yk-s5); }
}
.yk-principle {
	padding-top: var(--yk-s4);
	border-top: 2px solid var(--yk-neon);
}
.yk-principle__n {
	display: block;
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-meta);
	letter-spacing: .18em;
	color: var(--yk-neon);
	margin-bottom: var(--yk-s3);
}
.yk-principle h3 { font-size: 19px; margin: 0 0 var(--yk-s3); }
.yk-principle p { color: var(--yk-mute); max-width: 46ch; margin: 0; }


/* —— Banda de nota ——
   Bloque de texto a ancho completo, con fondo y borde propios, para
   una idea que merece sección pero no imagen. Sustituye a la versión
   anterior (.yk-aside), que era una columna estrecha empujada a la
   derecha y se leía como una nota al margen en vez de como contenido.

   Se combina con .yk-blueprint (03-layout.css) para heredar la malla
   técnica de la marca. Esa clase ya pone position:relative y sube los
   hijos a z-index 2, así que aquí no hay que tocar el apilado.

   Titular a la izquierda, prosa a la derecha: distinto del resto de la
   página, donde lo que va a un lado es siempre una foto. */
.yk-note {
	display: grid;
	grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
	margin-top: var(--yk-s8);
	padding: clamp(28px, 4vw, 56px);
	border: 1px solid var(--yk-line);
	border-radius: var(--yk-r-0);
	background: var(--yk-card);
}

/* —— Modificador: acento de marca ——
   Antes esta nota se combinaba con .yk-blueprint (03-layout.css, la
   textura de cuadrícula técnica) para diferenciarla del resto de la
   página. Sustituido porque no hay forma de confirmar aquí qué color
   mete esa textura, y 01-tokens.css es explícito: el cian está
   reservado solo para el efecto glitch, nunca para acentos de
   contenido. Este modificador usa el mismo recurso que ya lleva
   .yk-price en esta misma página —borde izquierdo en rosa de marca,
   sin textura añadida—, así que la nota queda visualmente emparentada
   con el resto de la página en vez de traer un acento suelto. */
.yk-note--accent {
	border-left: 3px solid var(--yk-neon);
}

.yk-note__head h3 {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.15;
	max-width: 18ch;
}

.yk-note__body p {
	color: var(--yk-mute);
	max-width: 64ch;
}
.yk-note__body p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.yk-note {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--yk-s5);
		margin-top: var(--yk-s7);
	}
	.yk-note__head h3 { max-width: none; }
}

/* —— (Mosaico .yk-mosaic, retirado) ——
   Existió con tamaños desiguales (--wide/--tall) y 12 piezas, y luego
   con 6 en rejilla fija. Lo sustituye .yk-showcase, que integra la
   rejilla dentro de una maqueta asimétrica en vez de dejarla suelta a
   ancho completo. Nota conservada por si alguien busca la clase. */


/* —— (Lista de chips .yk-chiplist, retirada) ——
   Dieciséis pastillas seguidas eran ruido visual y competían con las
   fotos de al lado. Lo sustituye .yk-serieslist: texto corrido en mono
   con separadores. */



/* —— Reseña embebida en un caso ——
   En las landings de estilo la reseña va pegada al trabajo del que habla,
   no apilada en la rejilla .yk-reviews, así que necesita menos aire arriba.
   (.yk-review se define en 05-patterns.css; aquí solo se ajusta su encaje
   dentro de estos dos contenedores.) */
.yk-mech__text > .yk-review,
.yk-first > div > .yk-review { margin-top: var(--yk-s5); }


/* ============================================================
   AÑADIDOS v4.1 — PROMOCIÓN desde 07-pages.css
   ------------------------------------------------------------
   Estas reglas vivían en 07-pages.css atadas a .yk-home. Al
   construir la landing de anime quedó claro que no son
   excepciones de la portada: son los componentes. La landing los
   reutiliza tal cual, y fine line, realismo y blackwork harán lo
   mismo.

   Se aplica la regla que el propio 07 tiene escrita en su
   cabecera: "si algo se repite en más de una página, sube a
   04-components.css".

   El texto de cada regla es EL MISMO que tenía; lo único que
   cambia es que ya no lleva el prefijo .yk-home. La home no
   cambia de aspecto: las excepciones que sí son suyas siguen en
   el 07 y ganan por especificidad.
   ============================================================ */

/* —— Hero —— */
.yk-hero__grid{
	display:grid;
	/* minmax(0,1fr) y NO 1fr: con 1fr el ancho mínimo de la columna lo
	   fija la palabra más larga del titular, que a 100px de tipo mide
	   casi 400px. Eso empujaba la columna de texto y aplastaba la
	   imagen hasta dejarla flotando en el centro. */
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:clamp(24px,4vw,56px); align-items:center;
}
.yk-hero h1{
	/* El token global --yk-type-h1 (hasta 120px) está calibrado para
	   titulares a ancho completo. Aquí el H1 ocupa media columna, así
	   que necesita su propia escala o se parte en siete líneas. */
	font-size:clamp(32px,3.6vw,54px);
	line-height:1.06;
}
.yk-hero__media{width:100%;display:block}
.yk-hero__img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media(max-width:820px){
	/* En móvil la imagen es lo primero que se ve (order:-1): se acorta
	   para que el titular y el CTA no queden empujados fuera de pantalla. */
	.yk-hero__img{aspect-ratio:4/3}
}
.yk-hero__rating{
	display:flex; align-items:center; gap:10px;
	margin:22px 0 26px; font-family:var(--yk-f-mono);
	font-size:14px; color:var(--yk-mute);
}
.yk-hero__micro{font-size:14px;color:var(--yk-mute-2);margin-top:12px}
.yk-stars{color:var(--yk-neon);letter-spacing:2px}
@media(max-width:820px){
	/* MISMA protección que ya lleva la regla de escritorio, y que aquí
	   me había dejado en el tintero: sin minmax(0, ...), el ancho
	   natural de la imagen (900px, el del atributo HTML) empuja la
	   columna a crecer por encima del espacio real disponible. Verificado
	   con WebKit real: sin esto, la columna medía 385px en un hueco de
	   342px y la imagen se salía 12px por el borde derecho — exactamente
	   el "pegada a la derecha, hueco a la izquierda" que se reportó. */
	.yk-hero__grid{grid-template-columns:minmax(0,1fr)}
	.yk-hero__media{order:-1}
}

/* —— Cómo diseñamos —— */
.yk-mech{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.yk-mech p{color:rgba(255,255,255,.82)}
.yk-mech__media{width:100%;display:block}
.yk-mech__media img{width:100%;height:auto}
.yk-mech__media figcaption{
	font-family:var(--yk-f-mono);font-size:11px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--yk-mute-2);margin-top:10px;text-align:left;
}
@media(max-width:820px){
	/* Mismo riesgo que el hero: la imagen (900px de HTML) puede forzar
	   la columna por encima del hueco real disponible sin minmax(0,...). */
	.yk-mech{grid-template-columns:minmax(0,1fr)}
}

/* —— Artistas —— */
.yk-artists{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.yk-artist{border:1px solid var(--yk-line-2);background:rgba(10,10,12,.72);display:flex;flex-direction:column}
.yk-artist img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.yk-artist__body{padding:22px;display:flex;flex-direction:column;flex:1}
.yk-artist__body h3{font-size:20px;margin-bottom:6px}
.yk-artist__meta{
	font-family:var(--yk-f-mono);font-size:11px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--yk-neon);
}
.yk-artist__body p{font-size:16px;color:var(--yk-mute);margin:10px 0 14px}
.yk-artist__body a{
	margin-top:auto; /* mismo motivo que en las tarjetas de estilo:
	                    la bio de Alberto es más larga que las otras dos */
	font-family:var(--yk-f-mono);font-size:11px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--yk-neon);
}
@media(max-width:820px){
	/* 2 columnas en vez de 1: tres retratos cuadrados a ancho completo,
	   apilados, es la sección más larga de toda la página en móvil. */
	.yk-artists{grid-template-columns:repeat(2,1fr);gap:14px}
	/* El tercer artista (Guti) ocupa las dos columnas para no dejar un
	   hueco huérfano en una rejilla de 3 elementos a 2 columnas. */
}
@media(max-width:560px){
	.yk-artists{grid-template-columns:1fr}
}

/* —— Reseñas —— */
.yk-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.yk-review{
	border:1px solid var(--yk-line-2);background:rgba(10,10,12,.72);
	padding:24px;display:flex;flex-direction:column;
}
.yk-review blockquote{
	margin:14px 0 18px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.86);
}
.yk-review blockquote::before{content:'«'}
.yk-review blockquote::after{content:'»'}
.yk-review footer{
	margin-top:auto;padding-top:16px;border-top:1px solid var(--yk-line-2);
}
.yk-review footer b{display:block;font-size:15px}
.yk-review footer span{font-size:12px;color:var(--yk-mute-2)}
.yk-reviews__link{margin-top:22px;font-family:var(--yk-f-mono);font-size:12px;letter-spacing:.12em}
.yk-reviews__link a{color:var(--yk-neon)}
@media(max-width:860px){.yk-reviews{grid-template-columns:1fr}}

/* —— Primera vez —— */
.yk-first{
	display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);
	border:1px solid var(--yk-line);padding:clamp(26px,4vw,44px);
}
.yk-first__list{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-content:center}
.yk-first__list li{
	padding-left:26px;position:relative;color:var(--yk-mute);font-size:16px;
}
.yk-first__list li::before{
	content:'';position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--yk-neon);
}
@media(max-width:820px){.yk-first{grid-template-columns:1fr}}

/* —— Proceso —— */
/* Línea de tiempo conectada: es una secuencia real (paso 1 pasa al 2,
   al 3, al 4), así que el marcador numerado está justificado — no es
   decoración, es la información. La línea continua detrás de los nodos
   refuerza que es UN proceso, no cuatro tarjetas sueltas. Todo generado
   por CSS puro (content: counter()): cero cambios en el HTML. */
.yk-steps{
	list-style:none;margin:56px 0 0;padding:0;position:relative;
	display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:yk-step;
}
.yk-steps::before{
	content:'';position:absolute;top:16px;left:0;right:0;height:2px;
	background:linear-gradient(90deg,transparent,var(--yk-neon) 8%,var(--yk-neon) 92%,transparent);
	box-shadow:0 0 14px rgba(255,0,156,.5);
}
.yk-steps li{position:relative;padding-top:60px}
.yk-steps li::before{
	counter-increment:yk-step;content:counter(yk-step,decimal-leading-zero);
	position:absolute;top:0;left:0;z-index:1;
	width:34px;height:34px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:var(--yk-night);border:2px solid var(--yk-neon);
	font-family:var(--yk-f-mono);font-size:14px;color:var(--yk-neon);
	box-shadow:0 0 16px rgba(255,0,156,.45);
}
.yk-steps p{font-size:16px;color:var(--yk-mute);margin:0}
@media(max-width:860px){
	.yk-steps{grid-template-columns:1fr 1fr;row-gap:36px}
	.yk-steps::before{display:none} /* con 2 filas, una línea horizontal no representa nada */
}
@media(max-width:520px){.yk-steps{grid-template-columns:1fr}}

/* Presupuesto: acento de marca en el borde en vez de una caja plana,
   y una insignia "€" que ancla el bloque visualmente sin agrandar
   ninguna cifra — el precio se queda en prosa, como se pidió. */
.yk-price{
	margin-top:52px;
	border:1px solid var(--yk-line); border-left:3px solid var(--yk-neon);
	background:rgba(10,10,12,.5);
	padding:clamp(24px,3vw,36px);
}
.yk-price h3{
	font-size:19px;margin-bottom:16px;
	display:flex;align-items:center;gap:12px;
}
.yk-price h3::before{
	content:'€'; flex:none;
	width:30px;height:30px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:var(--yk-neon-soft); color:var(--yk-neon);
	font-family:var(--yk-f-mono);font-size:15px;
}
.yk-price p{color:var(--yk-mute);max-width:70ch}


/* ============================================================
   AÑADIDOS v4.5 — landing de línea fina
   La tabla comparativa NO es exclusiva de fine line: realismo y
   blackwork tienen la misma necesidad (dónde funciona el estilo y
   dónde no), así que vive aquí y no en el 07.
   ============================================================ */

/* —— Texto solo para lectores de pantalla ——
   Lo usa el <caption> de la tabla: la tabla necesita título accesible,
   pero visualmente el H2 de la sección ya lo da y repetirlo sobraría.
   Si esta utilidad ya existe en 02-base con otro nombre, borra este
   bloque y cambia la clase en el PHP. */
.yk-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* —— Diagnóstico visual ——
   Sustituye a la tabla comparativa v4.5. Cuatro tarjetas, una por
   criterio, con icono + dos chips (aguanta / se difumina) + una línea
   de solución destacada. Es EL elemento de firma de esta landing: nace
   aquí porque es donde primero hace falta un "esto sí, esto no, esto en
   su lugar" sin caer en párrafos de tabla, pero está pensado para que
   realismo y blackwork lo reutilicen con sus propios criterios — cada
   estilo tiene su propia versión de "dónde funciona y dónde no".

   Las tres señales NO usan verde/rojo de semáforo: la paleta de marca
   es negro, blanco y magenta. Se distinguen por icono (✓ contorno
   sólido / ✕ contorno mate) y por texto — nunca solo por color
   (WCAG 1.4.1). */
/* —— Diagnóstico visual (v4.8 — corregido tras medir contraste real) ——
   Sustituye a la tabla comparativa v4.5. Cuatro tarjetas, una por
   criterio, con icono + dos chips (aguanta / se difumina) + una línea
   de solución destacada. Es EL elemento de firma de esta landing: nace
   aquí porque es donde primero hace falta un "esto sí, esto no, esto en
   su lugar" sin caer en párrafos de tabla, pero está pensado para que
   realismo y blackwork lo reutilicen con sus propios criterios — cada
   estilo tiene su propia versión de "dónde funciona y dónde no".

   Las tres señales NO usan verde/rojo de semáforo: la paleta de marca
   es negro, blanco y magenta. Se distinguen por icono + símbolo + peso
   de texto — nunca solo por color (WCAG 1.4.1).

   CORREGIDO v4.8: la v4.7 metía un rgba(255,255,255,.72) a mano en la
   fila "se difumina", asumiendo sin medir que --yk-mute (.55) era el
   punto flojo. Midiendo de verdad: --yk-mute da 6.26:1 sobre el fondo
   de la tarjeta — pasa AA con margen, no hacía falta tocarlo. El fallo
   real estaba en --yk-mute-2 (.38, ~3.5:1), ya corregido en origen en
   01-tokens.css (ahora .52). Esta versión vuelve a apoyarse en el
   token en vez de un valor suelto, como pide el propio 01-tokens.css
   ("los tokens son la fuente única de verdad").

   DIFERENCIACIÓN entre las 4 tarjetas: nth-child alterna el icono entre
   contorno y relleno sólido, y el borde superior entre línea neutra y
   acento rosa. Es el mismo recurso —rosa, solo rosa— aplicado con
   ritmo, no cuatro colores nuevos que romperían la paleta. */
.yk-diagnostic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--yk-s5);
	margin-top: var(--yk-s7);
}
@media (max-width: 760px) {
	.yk-diagnostic { grid-template-columns: minmax(0, 1fr); }
}

.yk-diag {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--yk-line);
	border-top-width: 2px;
	padding: clamp(22px, 3vw, 32px);
	background: var(--yk-card);
}
/* El grid iguala la altura de las dos tarjetas de cada fila a la más
   alta. Sin esto, la tarjeta con menos texto queda igual de alta por
   fuera, pero el panel rosa (que se calcula por el contenido, no por
   la caja) se queda corto y no llega al borde inferior real — es lo
   que se veía descuadrado en las tarjetas de la derecha.
   flex:1 en el cuerpo absorbe ese estirón; el panel de solución sigue
   siendo el último hijo y su sangrado por margen negativo ahora sí
   toca el borde real de la tarjeta, tenga la altura que tenga. */
.yk-diag__body { flex: 1; }
/* Ritmo par/impar: 1ª y 3ª tarjeta con borde superior de línea, 2ª y 4ª
   con acento rosa — evita que las cuatro se lean como una sola tira
   repetida de arriba abajo. */
.yk-diag:nth-child(even) { border-top-color: var(--yk-neon); }
.yk-diag:nth-child(odd)  { border-top-color: var(--yk-line); }

.yk-diag__head {
	display: flex;
	align-items: center;
	gap: var(--yk-s4);
	margin-bottom: var(--yk-s5);
}
.yk-diag__icon {
	flex: none;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--yk-neon);
	color: var(--yk-neon);
	background: transparent;
}
/* Mismo ritmo par/impar que el borde superior: la 2ª y 4ª tarjeta
   llevan el icono en rosa sólido en vez de contorno. Es lo que pediste
   —más rosa, aunque sea en los iconos— y de paso refuerza que las
   cuatro tarjetas no son intercambiables entre sí. */
.yk-diag:nth-child(even) .yk-diag__icon {
	background: var(--yk-neon);
	border-color: var(--yk-neon);
	color: #000;
}
.yk-diag__icon svg { width: 22px; height: 22px; }
.yk-diag__head h3 { margin: 0; font-size: 19px; }

.yk-diag__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: var(--yk-s3) 0;
	border-top: 1px solid var(--yk-line-2);
	font-size: 15px;
	line-height: 1.55;
}
.yk-diag__row:first-of-type { border-top: 0; }
.yk-diag__mark {
	flex: none;
	width: 20px;
	font-family: var(--yk-f-mono);
	font-size: 14px;
	line-height: 1.55;
}
/* El acierto (✓) pasa a rosa: liga la respuesta correcta con la marca
   en vez de dejarla en blanco neutro, que es lo que pedías para dar
   más dinamismo sin tocar la paleta. */
/* El acierto (✓) en rosa liga la respuesta correcta con la marca.
   .9 para "aguanta bien" no tiene token dedicado, pero es texto de
   acierto puntual, no lectura general, y pasa AAA de sobra sobre
   --yk-card (12.2:1 aprox). */
.yk-diag__row--ok .yk-diag__mark { color: var(--yk-neon); }
.yk-diag__row--ok p { color: rgba(255, 255, 255, .9); margin: 0; }
/* --yk-mute (.55): 6.26:1 sobre --yk-card, pasa AA con margen. Se
   queda perceptiblemente más apagado que "aguanta bien" (.9) sin salir
   del sistema de tokens. */
.yk-diag__row--no .yk-diag__mark { color: var(--yk-mute); }
.yk-diag__row--no p { color: var(--yk-mute); margin: 0; }

.yk-diag__fix {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: var(--yk-s4) calc(-1 * clamp(22px, 3vw, 32px)) calc(-1 * clamp(22px, 3vw, 32px));
	padding: var(--yk-s4) clamp(22px, 3vw, 32px);
	background: var(--yk-neon-soft);
	font-size: 15px;
	line-height: 1.55;
}
.yk-diag__fix span[aria-hidden] {
	flex: none;
	font-family: var(--yk-f-mono);
	color: var(--yk-neon);
}
.yk-diag__fix p { margin: 0; color: var(--yk-paper); font-weight: 500; }

/* —— Pie de foto dentro del showcase ——
   Nace con la landing de línea fina: el dato de "cicatrizado · X meses"
   es prueba, no decoración, y por eso va pegado a la foto y no en el
   texto de al lado. Reutilizable por cualquier rejilla de obra. */
.yk-showcase__item figcaption {
	margin-top: 8px;
	font-family: var(--yk-f-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--yk-mute);
}

/* ============================================================
   AÑADIDOS v4.9 — landing de realismo
   ------------------------------------------------------------
   Deliberadamente corto. La landing de realismo reutiliza casi
   todo lo que ya existe: .yk-hero--editorial, .yk-diagnostic,
   .yk-showcase, .yk-steps, .yk-price, .yk-mech, .yk-signature,
   .yk-first__list, .yk-faq, .yk-ctaband, .yk-reviews.

   Lo único nuevo de verdad:
     .yk-lead / .yk-micro — dos utilidades de texto que la página
       necesitaba y que no estaban en el archivo compartido. Si
       YA existen en otro sitio con estos mismos nombres, borra
       este bloque y usa las tuyas — no dupliques.
   ============================================================ */

/* —— Lead (párrafo destacado bajo un H1 o H2) —— */
.yk-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--yk-paper);
	max-width: 56ch;
}

/* Dentro de una banda de CTA, .yk-ctaband centra el TEXTO pero no la
   CAJA: con max-width:56ch el bloque se queda anclado a la izquierda y
   solo las líneas se centran dentro de él, así que el párrafo aparece
   desplazado respecto al titular y al botón. margin-inline:auto centra
   también la caja. Va aquí y no en la página porque le pasa a
   cualquier .yk-lead dentro de cualquier .yk-ctaband del sitio. */
.yk-ctaband .yk-lead,
.yk-ctaband .yk-micro {
	margin-inline: auto;
}

/* —— Micro (texto pequeño bajo un botón, fuera del hero) ——
   .yk-hero__micro ya existe para dentro del hero; esta es la
   misma idea para usarla en una .yk-ctaband o en cualquier otro
   bloque con CTA propio. */
.yk-micro {
	font-size: 14px;
	color: var(--yk-mute-2);
	margin-top: 12px;
}

/* ============================================================
   AÑADIDOS v5.0 — página /nosotros/
   ------------------------------------------------------------
   Deliberadamente corto: la página reutiliza .yk-hero, .yk-facts,
   .yk-artists/.yk-artist, .yk-mech, .yk-steps, .yk-reviews,
   .yk-first__list, .yk-ctaband, .yk-lead, .yk-micro tal cual.

   Lo único nuevo es esta extensión de .yk-artist: la tarjeta
   original (home/anime) solo llevaba nombre + un enlace. Aquí cada
   artista habla en primera persona y enlaza a más de un sitio (su
   ficha + una o dos landings de estilo), así que hacen falta una
   cita y un contenedor de enlaces en columna.

   Sube aquí y no a 07-pages.css porque /alberto/, /carmen/ y /guti/
   van a necesitar la misma pieza (cita propia + hechos + enlaces) en
   cuanto se construyan — no es exclusiva de "nosotros". */

/* Cita del propio artista, con sus palabras. Mismo lenguaje visual
   que .yk-prose blockquote (filete rosa a la izquierda), pero más
   compacta: aquí es un elemento dentro de una tarjeta, no una cita
   dentro de un artículo largo. */
.yk-artist__quote {
	margin: 10px 0 14px;
	padding-left: 14px;
	border-left: 2px solid var(--yk-neon);
	font-style: italic;
	font-size: 15px;
	line-height: 1.55;
	color: var(--yk-mute);
}
.yk-artist__quote p { margin: 0; }

/* Contenedor de enlaces cuando son más de uno. La regla original
   ".yk-artist__body a{margin-top:auto}" ancla un ÚNICO enlace al
   borde inferior; con varios apilados, se mueve ese margen automático
   al contenedor. Compatible hacia atrás: donde solo hay un enlace
   suelto (sin este wrapper), la regla antigua sigue actuando igual
   que siempre.

   SOLO layout aquí — nada de tipografía. 06-animations.css ya
   selecciona ".yk-artist__body a" (cualquier ancla descendiente,
   este wrapper no rompe esa cadena) para el mono/neón/versaleta Y
   para el subrayado + flecha que se dibujan en hover. Repetir esas
   propiedades aquí crearía dos sitios que mantener sincronizados; si
   algún día cambia el tratamiento del enlace, cambia en un solo
   lugar y las tarjetas con uno o con varios enlaces lo heredan igual. */
.yk-artist__links {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* —— Estrellas dentro del pie de una reseña ——
   .yk-stars ya existe (neón + tracking) y nació para la línea de
   valoración del hero. Metida en el pie de .yk-review no se veía
   rosa, y había DOS motivos a la vez:

   1) Especificidad. ".yk-review footer span" (0,1,2) le ganaba a
      ".yk-stars" (0,1,0) y las pintaba en gris de metadato a 12px.
      Se resuelve calificando el selector con la etiqueta —
      "span.yk-stars" sube a (0,2,2) y gana sin recurrir a
      !important, que en este sistema está reservado a la capa 00.

   2) Presentación de emoji. El carácter ★ (U+2605) puede resolverse
      con una fuente de color (Segoe UI Emoji, Apple Color Emoji) en
      lugar de con la fuente de texto. Cuando eso ocurre el glifo
      trae sus propios colores y `color` deja de tener efecto: se ve
      gris pase lo que pase en el CSS. Se fuerza la presentación de
      texto con font-variant-emoji y, en el PHP, con el selector de
      variación U+FE0E detrás de cada estrella — que es lo que
      entienden los navegadores que aún no soportan la propiedad.

   -webkit-text-fill-color por si alguna regla heredada lo hubiese
   fijado: cuando está declarado, gana a `color` en WebKit.

   Va aquí y no en 07-pages.css porque le pasa a CUALQUIER reseña
   del sitio que quiera cerrar con estrellas — home, anime, fine
   line y realismo incluidas. */
.yk-review footer span.yk-stars {
	display: block;
	margin-bottom: 4px;
	font-family: var(--yk-f-text);
	font-size: 14px;
	letter-spacing: 2px;
	color: var(--yk-neon);
	-webkit-text-fill-color: var(--yk-neon);
	font-variant-emoji: text;
}

/* —— Numeración de .yk-steps en móvil: el texto a la derecha ——
   El componente coloca el número en absoluto arriba a la izquierda
   y reserva su sitio con padding-top:60px. Con cuatro o cinco
   columnas en escritorio eso funciona: el número titula la columna.

   En una sola columna, no. El número mide 34px y ocupa una franja
   entera de alto, así que a su derecha queda una banda vacía del
   ancho de la pantalla menos 34px, y el texto empieza debajo. Cinco
   pasos seguidos así son cinco huecos.

   Por debajo de 520px —donde el componente ya pasa a una columna—
   el número deja de titular y pasa a ser una viñeta: se queda a la
   izquierda y el texto arranca a su derecha. Mismo número, mismo
   markup, cero elementos nuevos.

   min-height iguala el alto del paso al del propio número, para que
   un paso de una sola línea no quede más corto que su marcador. */
@media (max-width: 520px) {
	.yk-steps li {
		padding-top: 0;
		padding-left: 48px;
		min-height: 34px;
		display: flex;
		align-items: center;
	}
	.yk-steps li::before { top: 0; }
}

/* —— (.yk-evolution, retirada) ——
   Se creó para una tira de tres fotos "sesión 1 / sesión 3 / terminado"
   en la landing de realismo. Se retira porque el estudio tiene fotos de
   piezas acabadas, no de proceso, y ningún otro sitio la usa. Nota
   conservada por si alguien busca la clase. */

/* ============================================================
   AÑADIDOS v5.1 — página /contacto/
   ------------------------------------------------------------
   Una sola regla. Todo lo demás que necesita la página de
   contacto es exclusivo suyo y vive en 07-pages.css, siguiendo
   el mismo criterio con el que .yk-timeline se quedó allí para
   /nosotros/.
   ============================================================ */

/* —— Reseña dentro de una banda de CTA ——
   .yk-ctaband centra el texto pero no las cajas: una .yk-review
   con ancho propio se queda anclada a la izquierda y solo sus
   líneas se centran dentro, así que la cita aparece desplazada
   respecto al botón que va debajo. Mismo problema y misma
   solución que ya tienen .yk-lead y .yk-micro unas líneas más
   arriba, y por el mismo motivo va aquí y no en la página: le
   pasa a cualquier reseña dentro de cualquier banda de CTA del
   sitio, no solo a la de contacto. */
.yk-ctaband .yk-review {
	max-width: 56ch;
	margin-inline: auto;
	text-align: center;
}
.yk-ctaband .yk-review footer {
	display: flex;
	flex-direction: column;
	align-items: center;
}


/* ============================================================
   AÑADIDOS v5.2 — fichas de artista (/carmen/, /alberto/, /guti/)
   ------------------------------------------------------------
   Deliberadamente corto, mismo criterio que v5.0 y v4.9: se sube
   aquí solo lo que CUALQUIER ficha de artista o cualquier cita
   atribuida del blog va a necesitar, no lo exclusivo de una página
   — eso vive scopeado en 07-pages.css bajo .yk-page-carmen.

     .yk-hook             — cita de cliente por encima del H1
     .yk-prose blockquote cite — atribución bajo una cita
     .yk-prose figure     — imagen suelta dentro de una columna de texto
   ============================================================ */

/* —— Hook: la cita que abre la ficha, por encima del H1 ——
   Patrón del arquetipo Star-Story-Solution: la página abre con la
   voz del cliente, no con la de la marca. Más grande que
   .yk-artist__quote (vive dentro de una tarjeta) y más contenida que
   una .yk-prose blockquote (vive dentro de un artículo largo). */
.yk-hook {
	margin: 0 0 var(--yk-s5);
	padding-left: var(--yk-s5);
	border-left: 3px solid var(--yk-neon);
}
.yk-hook blockquote {
	margin: 0 0 var(--yk-s2);
	font-size: clamp(17px, 2.2vw, 21px);
	font-style: italic;
	line-height: 1.45;
	color: var(--yk-paper);
}
.yk-hook cite {
	display: block;
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-small);
	font-style: normal;
	line-height: 1.5;
	color: var(--yk-mute-2);
}

/* —— Atribución bajo una cita de .yk-prose ——
   .yk-prose blockquote ya fija tamaño y color de la cita, pero no
   contempla el pie: sin esto, "— Carmen González" hereda los 19px
   de la cita y compite con ella. Va aquí y no en la página: cualquier
   artículo del blog con una cita atribuida tiene el mismo problema. */
.yk-prose blockquote cite {
	display: block;
	margin-top: var(--yk-s2);
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-small);
	font-style: normal;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--yk-mute-2);
}

/* —— Figura suelta dentro de una columna de texto ——
   .yk-prose img ya pone radio y margen vertical, pero una <figure>
   envolvente trae el margin-inline de 40px por defecto del navegador
   y descuadra la imagen respecto al párrafo. */
.yk-prose figure {
	margin: var(--yk-s6) 0;
}
.yk-prose figure img {
	display: block;
	width: 100%;
	height: auto;
	margin-block: 0;
}
.yk-prose figure figcaption {
	margin-top: var(--yk-s2);
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-small);
	line-height: 1.5;
	color: var(--yk-mute-2);
}


/* ============================================================
   AÑADIDOS v5.3 — ficha /guti/ (reutilizables por cualquier ficha)
   ------------------------------------------------------------
   Antes de escribir nada nuevo se revisó lo que ya existía: el hero
   editorial, .yk-showcase__grid (ya es de 3 columnas por defecto),
   .yk-facts (pills del hero), .yk-steps (secuencia numerada),
   .yk-principles (rejilla de criterios no secuenciales) y
   .yk-prose blockquote/cite (cita atribuida) cubren casi todo el
   copy de la página. Aquí solo sube lo que de verdad no existía:

     .yk-principles--3   — modificador de 3 columnas de .yk-principles
     .yk-agenda           — elemento de firma de /guti/: organiza TIEMPO,
                            no precio. Si otra ficha necesita algo
                            parecido, revisar antes si esto le sirve
                            tal cual en vez de duplicar.
     .yk-tiers             — comparativa de precio en 3 escalones.
                            .yk-price (ya existe) es un único bloque de
                            precio en prosa; esto es su versión en
                            columnas cuando hay más de una tarifa.
     .yk-no / .yk-sub     — bloque "para quién no": honestidad sobre
                            qué NO se hace y a quién se deriva.
     .yk-todo             — aviso de contenido pendiente ([REQUERIDO]).
                            NO es .yk-note: esa es una sección editorial
                            de dos columnas, esto es una línea de
                            revisión interna, mucho más ligera.
     .yk-datasheet        — ficha de datos en pares clave/valor (nombre,
                            años, formación...). Distinto de .yk-facts
                            (que son pills del hero) y de .yk-meta (que
                            es una sola línea corrida).
   ============================================================ */

/* —— Principios en 3 columnas —— */
.yk-principles--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
	.yk-principles--3 { grid-template-columns: minmax(0, 1fr); }
}

/* —— Agenda (elemento de firma) ——
   Reparte TIEMPO en tres escenarios ("si tienes... Guti te propone...").
   Deliberadamente sin cifras: el precio vive solo en .yk-tiers, para
   que este bloque y el de precio no repitan el mismo dato en dos
   formatos (regla anti-duplicado de landing-writer). */
.yk-agenda {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-s4);
	margin: var(--yk-s7) 0 var(--yk-s5);
}
@media (min-width: 760px) {
	.yk-agenda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.yk-agenda article {
	padding: var(--yk-s5);
	border: 1px solid var(--yk-line);
	border-radius: var(--yk-r-0);
	background: var(--yk-card);
}
.yk-agenda article:nth-child(2) {
	border-color: var(--yk-neon-soft);
	box-shadow: 0 0 0 1px var(--yk-neon-soft);
}
.yk-agenda__dur {
	display: block;
	font-family: var(--yk-f-mono);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--yk-neon);
	margin-bottom: var(--yk-s3);
	line-height: 1.4;
}
.yk-agenda p { font-size: 14.5px; color: var(--yk-mute); margin: 0; }
.yk-agenda p strong { color: var(--yk-paper); font-weight: 500; }

/* —— Tiers de precio (3 columnas) ——
   .yk-price (más arriba en este archivo) sigue siendo el bloque de UN
   precio en prosa; esto es la comparativa cuando hay varios escalones
   y conviene verlos a la vez. ÚNICO lugar de la página con cifras. */
.yk-tiers {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-s4);
	margin: var(--yk-s6) 0 var(--yk-s5);
}
@media (min-width: 700px) {
	.yk-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.yk-tiers div {
	padding-top: var(--yk-s3);
	border-top: 2px solid var(--yk-neon);
}
.yk-tiers strong {
	display: block;
	font-family: var(--yk-f-display);
	font-weight: 900;
	font-size: clamp(28px, 3.6vw, 40px);
	line-height: 1;
	color: var(--yk-paper);
}
.yk-tiers span {
	display: block;
	margin-top: var(--yk-s1);
	font-size: 14px;
	color: var(--yk-mute);
}

/* —— Para quién no —— */
.yk-sub {
	display: block;
	margin-top: var(--yk-s6);
	font-family: var(--yk-f-mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--yk-mute-2);
}
.yk-no {
	list-style: none;
	margin: var(--yk-s4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--yk-s3);
	max-width: 70ch;
}
.yk-no li {
	display: flex;
	gap: var(--yk-s3);
	align-items: flex-start;
	font-size: 15px;
	color: var(--yk-mute);
}
.yk-no li::before {
	content: "\2192";
	flex: none;
	font-family: var(--yk-f-mono);
	color: var(--yk-neon);
	line-height: 1.6;
}
.yk-no strong { color: var(--yk-paper); font-weight: 500; }

/* —— Aviso de contenido pendiente ——
   Deliberadamente ligero: una línea de revisión interna, no una
   sección editorial. No confundir con .yk-note (dos columnas,
   título + prosa, pensada para contenido que SÍ se publica). */
.yk-todo {
	margin-top: var(--yk-s4);
	padding: var(--yk-s3) var(--yk-s4);
	border: 1px dashed var(--yk-line);
	border-left: 2px solid var(--yk-mute-2);
	font-family: var(--yk-f-mono);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--yk-mute);
	max-width: 70ch;
}

/* —— Ficha de datos (pares clave/valor) ——
   Distinta de .yk-facts (pills del hero) y de .yk-meta (línea corrida):
   esta es una lista vertical de pares, para el pie de una ficha de
   artista o cualquier bloque de datos consultables. */
.yk-datasheet {
	margin: var(--yk-s5) 0 0;
	padding-top: var(--yk-s2);
	border-top: 1px solid var(--yk-line-2);
}
.yk-datasheet > div {
	display: flex;
	justify-content: space-between;
	gap: var(--yk-s4);
	padding: var(--yk-s3) 0;
	border-bottom: 1px solid var(--yk-line-2);
	font-size: 14.5px;
}
.yk-datasheet dt {
	margin: 0;
	font-family: var(--yk-f-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--yk-mute-2);
}
.yk-datasheet dd {
	margin: 0;
	text-align: right;
	color: var(--yk-paper);
}
.yk-datasheet a { color: inherit; }
.yk-datasheet a:hover { color: var(--yk-neon); }