/* Stark Electric — vocabulario visual del tema.
   Depende de assets/css/tokens.css, que se genera desde el contrato.
   Las formas de aqui son las aprobadas en el ADR 005. */

/* ─────────────────────────────  base  ───────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: var(--negro);
	color: var(--hueso);
	font-family: var(--fuente-texto);
	font-size: var(--t-m);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img,
picture,
video { display: block; max-width: 100%; }

/* El editor colorea palabras (la segunda línea lima de los titulares) con un
   <mark> y un fondo transparente escrito en línea. Si ese estilo se pierde,
   el navegador le pone su fondo amarillo: aquí no hay fondo nunca, salvo el
   que el propio editor escriba (un resaltado de verdad). ADR 025. */
mark { background-color: transparent; color: inherit; }

/* Salto al contenido. Visible solo con el teclado. */
.stark-salto {
	position: absolute;
	left: -9999px;
	z-index: 999;
	background: var(--lima);
	color: var(--lima-tinta);
	padding: var(--e3) var(--e5);
	font-family: var(--fuente-dato);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.stark-salto:focus { left: var(--e4); top: var(--e4); }

:where(a, button, summary, input, [tabindex]):focus-visible {
	outline: 2px solid var(--lima);
	outline-offset: 3px;
}

/* ───────────────────────────  estructura  ─────────────────────────── */

/* Contenedor de seccion. El canal lateral nunca lo pone el bloque hijo. */
.stark-env {
	max-width: var(--ancho);
	margin-inline: auto;
	padding: var(--seccion) var(--canal);
}

/* Alternancia de fondo. Se aplica desde el pattern, no automaticamente:
   el ritmo lo decide la pagina. */
.stark-fondo--carbon  { background: var(--carbon); }
.stark-fondo--asfalto { background: var(--asfalto); }
.stark-fondo--filete  { border-block: 1px solid var(--borde); }

/* Grano. Solo donde se pida: cuesta una capa de composicion. */
.stark-grano { position: relative; isolation: isolate; }
.stark-grano::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grano);
	opacity: .035;
	pointer-events: none;
	z-index: -1;
}

/* ──────────────────  A: arranque de seccion  ────────────────── */
/* Tres disposiciones del mismo arranque. El pattern elige cual, segun el peso
   de la seccion. Ver ADR 005, bloque A. */

.stark-antetitulo {
	display: flex;
	align-items: center;
	gap: var(--e3);
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--lima);
}
.stark-antetitulo__linea {
	flex: none;
	width: 44px;
	max-width: 44px;
	height: 1px;
	background: var(--lima);
}

.stark-titular {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: .95;
	margin: 0;
}

/* A1 — normal. La del prototipo. */
.stark-cabecera--normal {
	display: flex;
	flex-direction: column;
	gap: var(--e3);
	max-width: 56ch;
	margin-bottom: var(--e7);
}
.stark-cabecera--normal .stark-titular { font-size: var(--t-2xl); }

/* A2 — apertura. Titular grande y entradilla al lado. */
.stark-cabecera--apertura { margin-bottom: var(--e8); }
.stark-cabecera--apertura .stark-cabecera__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e5);
	border-top: 1px solid var(--borde);
	padding-top: var(--e3);
	margin-bottom: var(--e5);
}
.stark-cabecera--apertura .stark-cabecera__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
	gap: var(--e7);
	align-items: end;
}
.stark-cabecera--apertura .stark-titular { font-size: var(--t-3xl); }
.stark-cabecera__contador {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gris-2);
}

/* A3 — menor. Antetitulo y titular en la misma linea. */
.stark-cabecera--menor {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--e5);
	margin-bottom: var(--e6);
}
.stark-cabecera--menor .stark-titular { font-size: var(--t-xl); }
.stark-cabecera--menor .stark-cabecera__raya {
	flex: 1;
	min-width: 40px;
	height: 1px;
	background: var(--borde);
}

@media (max-width: 860px) {
	.stark-cabecera--apertura .stark-cabecera__cuerpo {
		grid-template-columns: 1fr;
		gap: var(--e5);
	}
}

/* ──────────────────  C: rejilla de datos  ────────────────── */
/* Sin caja y sin lineas verticales: solo el filete de cada fila.
   Sustituye al mosaico del prototipo. Ver ADR 005, bloque C. */

.stark-datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--e5) var(--e7);
	border-top: 1px solid var(--borde);
	margin: 0;
}
.stark-datos > div {
	display: flex;
	flex-direction: column;
	gap: var(--e1);
	padding-block: var(--e4);
	border-bottom: 1px solid var(--borde);
}
.stark-dato {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	line-height: 1;
}
.stark-clave {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-2);
}

/* ──────────────────  formas de contenido  ────────────────── */

/* Filas con filete. Tolera de 1 a N. */
.stark-filas { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.stark-filas > li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--e5);
	align-items: start;
	padding-block: var(--e5);
	border-top: 1px solid var(--borde);
}
.stark-filas > li:last-child { border-bottom: 1px solid var(--borde); }
.stark-filas__num {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	font-size: var(--t-xl);
	line-height: 1;
	color: var(--lima);
}

/* Doble columna. Los modificadores alternan lado y proporcion para que la
   forma no se lea igual dos secciones seguidas. */
.stark-dc { display: grid; gap: var(--e8); align-items: center; }
.stark-dc--equilibrada { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.stark-dc--ancha       { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); }
.stark-dc--estrecha    { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
.stark-dc--invertida > .stark-dc__media { order: -1; }
.stark-dc__texto { display: flex; flex-direction: column; gap: var(--e5); }

@media (max-width: 860px) {
	.stark-dc { grid-template-columns: 1fr; gap: var(--e6); }
	.stark-dc--invertida > .stark-dc__media { order: 0; }
}

/* Marco de imagen. */
.stark-marco { overflow: hidden; background: var(--carbon); border: 1px solid var(--borde); }
.stark-marco img { width: 100%; height: 100%; object-fit: cover; }

/* Banda a sangre: foto de fondo y texto encima. */
.stark-banda {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(320px, 46vw, 560px);
	border-block: 1px solid var(--borde);
}
.stark-banda > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.stark-banda::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, .55) 55%, rgba(8, 8, 8, .1) 100%);
}
.stark-banda > .stark-env { position: relative; z-index: 1; width: 100%; }

/* Linea de tiempo horizontal. Sin JavaScript: scroll-snap. Tolera de 2 a N. */
.stark-linea {
	display: flex;
	gap: var(--e5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--e4);
	margin: 0;
	list-style: none;
	scrollbar-width: thin;
}
.stark-linea > li {
	flex: 0 0 clamp(230px, 26vw, 320px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: var(--e3);
	border-top: 1px solid var(--borde);
	padding-top: var(--e4);
}
.stark-linea__hito {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	font-size: var(--t-2xl);
	line-height: 1;
	color: var(--lima);
}

/* Hueco que rellena otro (por ejemplo, el plugin de reseñas). */
.stark-hueco { min-height: var(--e9); }

/* Marcador de contenido que falta. Se ve a proposito: un hueco marcado se
   rellena, uno disimulado se publica. */
.stark-todo {
	display: inline-block;
	background: var(--lima-tinta);
	color: var(--lima);
	border: 1px dashed var(--lima);
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 2px 8px;
}

/* ──────────────────  cabecera y pie  ────────────────── */

/* Cabecera fija del prototipo 1. El hueco de debajo lo pone .stark-cabecera-hueco:
   una cabecera fija sin hueco se come el arranque de la pagina. */
.stark-cabecera-sitio {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 70;
	background: rgba(8, 8, 8, .9);
	border-bottom: 1px solid var(--borde);
}
@supports (backdrop-filter: blur(10px)) {
	.stark-cabecera-sitio { backdrop-filter: blur(12px) saturate(130%); }
}
/* Sin estados de scroll: la cabecera ni encoge ni cambia de fondo (orden
   de Gerard, 2026-08-24), y es un punto mas alta. */
.stark-cabecera-sitio__interior {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 20px var(--canal);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e5);
}

/* Hueco del mismo alto que la cabecera. Lo ajusta el JS al pixel; sin JS este
   valor de reserva ya deja la pagina bien. */
.stark-cabecera-hueco { height: 78px; }

.stark-cabecera-sitio__ancho { display: flex; align-items: center; }

.stark-menu ul { display: flex; flex-wrap: wrap; gap: var(--e6); list-style: none; margin: 0; padding: 0; }
.stark-menu a {
	position: relative;
	display: block;
	font-family: var(--fuente-display);
	font-weight: 600;
	font-size: var(--t-s);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hueso);
	text-decoration: none;
	padding: var(--e2) 0;
	transition: color .18s ease;
}
/* El filete que crece bajo el enlace, como en el prototipo. */
.stark-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 0;
	background: var(--lima);
	transition: width .3s cubic-bezier(.2, .7, .2, 1);
}
.stark-menu a:hover,
.stark-menu a[aria-current],
.stark-menu a[data-activo],
.stark-menu a[aria-current] { color: var(--lima); }
.stark-menu a:hover::after,
.stark-menu a[aria-current]::after,
.stark-menu a[data-activo]::after,
.stark-menu a[aria-current]::after { width: 100%; }

/* Desplegables sin JavaScript: menu movil e idioma. */
.stark-despliegue > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hueso);
	padding: 0 var(--e3);
	border: 1px solid var(--borde);
	transition: border-color .18s ease, color .18s ease;
}
.stark-despliegue > summary::-webkit-details-marker { display: none; }
.stark-despliegue > summary:hover,
.stark-despliegue[open] > summary { color: var(--lima); border-color: var(--lima); }
.stark-despliegue__panel {
	position: absolute;
	right: 0;
	margin-top: var(--e2);
	background: var(--asfalto);
	border: 1px solid var(--borde);
	padding: var(--e4);
	min-width: 200px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
	z-index: 80;
}

/* Menu movil: panel a lo ancho. La pagina actual se marca SOLO con el color
   del texto (repaso de Gerard 2026-08-25: fuera la numeracion y la linea). */
.stark-despliegue--menu { display: none; }
.stark-despliegue--menu > summary { width: 46px; height: 46px; padding: 0; justify-content: center; }
.stark-despliegue--menu > summary::before {
	content: "";
	width: 20px;
	height: 12px;
	border-top: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
}
.stark-despliegue--menu[open] > summary::before { border-bottom-color: transparent; }
.stark-despliegue--menu .stark-despliegue__panel {
	position: fixed;
	left: 0;
	right: 0;
	top: auto;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--borde);
	background: var(--negro);
	padding: var(--e4) var(--canal) var(--e7);
	max-height: 76vh;
	overflow-y: auto;
}
.stark-menu--desplegado ul { flex-direction: column; gap: 0; }
.stark-menu--desplegado a {
	display: flex;
	align-items: center;
	gap: var(--e4);
	font-weight: 700;
	font-size: 23px;
	letter-spacing: .03em;
	padding: 15px 0;
	min-height: 52px;
	border-bottom: 1px solid var(--borde);
}
.stark-menu--desplegado a::after { content: none; }

/* ──────────────────  movimiento  ────────────────── */
/* Regla: el estado por defecto es el final. Donde no haya soporte, la pagina
   se ve entera y quieta, que es correcto. */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.stark-revelado {
			animation: stark-aparecer linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 28%;
		}
		@keyframes stark-aparecer {
			from { opacity: 0; transform: translateY(14px); }
			to   { opacity: 1; transform: none; }
		}
	}
}

/* ──────────────────  piezas de cabecera y pie  ────────────────── */

.stark-logotipo {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: var(--t-l);
	color: var(--hueso);
	text-decoration: none;
	flex: none;
	display: flex;
	align-items: center;
}
.stark-logotipo img,
.stark-logotipo .custom-logo {
	height: 56px;
	width: auto;
	max-width: none;
	display: block;
}

.stark-cabecera-sitio__acciones {
	display: flex;
	align-items: center;
	gap: var(--e3);
	position: relative;
	flex: none;
}
.stark-cabecera-sitio__cta {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-s);
	letter-spacing: .07em;
	gap: var(--e2);
	min-height: 40px;
	padding: var(--e3) var(--e5);
}
.stark-cabecera-sitio__cta:hover { transform: translateY(-1px); }

.stark-menu--vertical ul { flex-direction: column; gap: var(--e3); }
.stark-menu--vertical a,
.stark-menu--legal a {
	font-family: var(--fuente-texto);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--t-s);
	color: var(--gris);
	padding: var(--e1) 0;
}
.stark-menu--vertical a::after,
.stark-menu--legal a::after { display: none; }
.stark-menu--legal ul { gap: var(--e4); }
.stark-menu--legal a { font-size: var(--t-xs); color: var(--gris-2); }

.stark-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e2);
	min-height: 44px;
	padding: var(--e2) var(--e5);
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--borde);
	color: var(--hueso);
	transition: background .22s ease, color .22s ease, border-color .22s ease, transform .18s ease;
}
.stark-boton:hover { border-color: var(--lima); color: var(--lima); }
.stark-boton--lima {
	background: var(--lima);
	border-color: var(--lima);
	color: var(--lima-tinta);
}
.stark-boton--lima:hover { background: var(--lima-800); border-color: var(--lima-800); color: var(--lima-tinta); }

/* ── pie en cuatro columnas ────────────────── */

.stark-pie { border-top: 1px solid var(--borde); background: var(--carbon); }
.stark-pie__columnas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--e7);
	padding-block: var(--seccion) var(--e6);
}
.stark-pie__col { display: flex; flex-direction: column; gap: var(--e3); }
.stark-pie__col--marca { gap: var(--e4); }
.stark-pie__logo img { width: 180px; height: auto; display: block; }
.stark-pie__direccion {
	font-style: normal;
	display: flex;
	flex-direction: column;
	font-size: var(--t-s);
	line-height: 1.7;
	color: var(--gris);
}
.stark-pie__nombre { color: var(--hueso); }
.stark-pie__telefono { color: var(--lima); text-decoration: none; }
.stark-pie__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--t-s);
	line-height: 1.7;
	color: var(--gris);
}
.stark-pie__instagram {
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	margin-top: var(--e2);
	font-size: var(--t-s);
	color: var(--lima);
	text-decoration: none;
}
/* El mapa, a sangre en su caja: sin borde ni rayas, que parecian de
   plantilla (Gerard, 2026-09-19). Mientras carga, o si no carga, se ve el
   fondo liso con la direccion. */
.stark-pie__mapa {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--piedra);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--e4);
	overflow: hidden;
}
.stark-pie__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.stark-pie__mapa-reserva {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .12em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--gris-2);
	max-width: 24ch;
}

.stark-pie__barra { border-top: 1px solid var(--borde); }
.stark-pie__barra .stark-env {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e4);
	justify-content: space-between;
	align-items: center;
	padding-block: var(--e5);
}

/* ── piezas fijas: barra del movil y boton flotante ────────────────── */

.stark-barra-movil {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	background: rgba(8, 8, 8, .97);
	border-top: 1px solid var(--borde);
	padding: 10px var(--e4) calc(10px + env(safe-area-inset-bottom));
	display: flex;
	gap: var(--e3);
	align-items: center;
}
.stark-barra-movil__precio { display: flex; flex-direction: column; flex: none; }
.stark-barra-movil__precio strong {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: 22px;
	color: var(--lima);
	line-height: 1;
}
.stark-barra-movil .stark-boton {
	flex: 1;
	min-height: 54px;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: .06em;
}

/* El menu en linea a partir de 1150 px; por debajo, dentro del desplegable.
   Es el mismo menu pintado dos veces, no dos menus distintos. */
@media (max-width: 1149px) {
	.stark-cabecera-sitio__ancho { display: none; }
	.stark-despliegue--menu { display: block; }
	.stark-cabecera-sitio__cta { display: none; }
	.stark-despliegue--idioma > summary { min-width: 54px; height: 46px; justify-content: center; }
	.stark-despliegue--idioma > summary .stark-icono { display: none; }
}
@media (min-width: 1150px) {
	.stark-barra-movil { display: none; }
}

/* ──────────────────  ficha de experiencia  ────────────────── */
/* Medidas y formas del prototipo 3, con las dos correcciones del ADR 005:
   los mosaicos clave-valor van en filetes y las celdas llevan filete
   izquierdo en vez de caja completa. */

/* Hero (aprobado): destacada a sangre, velo, texto abajo, datos en filetes. */
.stark-hero-exp {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(480px, 78vh, 860px);
	overflow: hidden;
}
.stark-hero-exp > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.stark-hero-exp__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(8, 8, 8, .55) 0%, rgba(8, 8, 8, .1) 35%, rgba(8, 8, 8, .82) 88%),
		linear-gradient(90deg, rgba(8, 8, 8, .65) 0%, rgba(8, 8, 8, .15) 60%);
}
.stark-hero-exp > .stark-env {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--e7);
}
.stark-hero-exp__texto { display: flex; flex-direction: column; gap: var(--e5); max-width: 62ch; }
.stark-hero-exp__titulo { font-size: var(--t-3xl); }
.stark-hero-exp__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
.stark-hero-exp .stark-datos { border-top-color: rgba(242, 239, 233, .25); gap: var(--e5) var(--e7); }
.stark-hero-exp .stark-datos > div { border-bottom: 0; }

/* Chips. */
.stark-chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.stark-chip {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 4px 12px;
	border: 1px solid var(--borde);
	background: rgba(8, 8, 8, .55);
	color: var(--hueso);
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color .22s ease, color .22s ease;
}
.stark-chip:hover { border-color: var(--lima); color: var(--lima); text-decoration: none; }
.stark-chip:first-child { background: var(--lima); border-color: var(--lima); color: var(--lima-tinta); }

/* Armazon de la pagina: contenido + aparte de reserva pegajoso. */
.stark-pagina {
	max-width: var(--ancho);
	margin-inline: auto;
	padding: var(--seccion) var(--canal);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(330px, .42fr);
	gap: var(--e8) var(--e7);
	align-items: start;
}
.stark-pagina__principal {
	display: flex;
	flex-direction: column;
	gap: var(--seccion);
	min-width: 0;
}
.stark-bloque-ficha { display: flex; flex-direction: column; gap: var(--e6); scroll-margin-top: 96px; }
@media (max-width: 1149px) {
	.stark-pagina { grid-template-columns: 1fr; }
}

/* Recorrido: hitos con riel + panel pegajoso con la foto de la parada. */
.stark-recorrido {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
	gap: var(--e7);
	align-items: start;
}

.stark-panel-dia {
	position: sticky;
	top: 96px;
	order: 2;
	border: 1px solid var(--borde);
	background: var(--carbon);
}
.stark-panel-dia__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e4);
	padding: var(--e4) var(--e5);
}
.stark-panel-dia__puntos { display: flex; gap: 5px; flex: 1; max-width: 60%; }
.stark-panel-dia__puntos span { flex: 1; height: 3px; background: var(--piedra); transition: background .35s ease; }
.stark-panel-dia__puntos span.es-activo { background: var(--lima); }
.stark-panel-dia__figura { margin: 0; border-top: 1px solid var(--borde); }
.stark-panel-dia__foto {
	/* Vertical y a media pantalla: la foto es la protagonista del bloque. */
	aspect-ratio: 4 / 5;
	max-height: min(66vh, 640px);
	width: 100%;
	overflow: hidden;
	background: var(--piedra);
	background-image: var(--rayas);
}
.stark-panel-dia__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 940px) {
	/* Mas panoramica y con tope: pegajosa no puede comerse la pantalla. */
	.stark-panel-dia__foto { aspect-ratio: 16 / 9; max-height: 36vh; }
}
.stark-panel-dia__pie {
	padding: var(--e4) var(--e5);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e4);
	border-top: 1px solid var(--borde);
}
.stark-panel-dia__hora {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-l);
	color: var(--lima);
	line-height: 1;
}
.stark-hitos { display: flex; flex-direction: column; min-width: 0; }
.stark-hito {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--e4);
	min-height: 190px;
	padding: var(--e6) 0 var(--e6) var(--e5);
	border-left: 2px solid var(--borde);
	opacity: .38;
	transition: opacity .45s ease, border-color .45s ease;
}
.stark-hito.es-activo { opacity: 1; border-left-color: var(--lima); }
.stark-hito__linea { display: flex; align-items: baseline; gap: var(--e4); flex-wrap: wrap; }
.stark-hito__hora {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-xl);
	line-height: 1;
	color: var(--hueso);
}
.stark-hito.es-activo .stark-hito__hora { color: var(--lima); }
.stark-hito__titulo {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-xl);
	line-height: 1;
	letter-spacing: .02em;
}
.stark-hito .stark-entradilla { max-width: 46ch; font-size: var(--t-l); line-height: 1.55; }
/* Sin JS todos los hitos se leen enteros. La atenuacion la activa el JS. */
html:not(.stark-js) .stark-hito { opacity: 1; }

/* Incluye: contenedor con dos paneles, como el prototipo. */
.stark-incluye {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--borde);
	border: 1px solid var(--borde);
}
.stark-incluye--solo { grid-template-columns: 1fr; }
@media (max-width: 720px) { .stark-incluye { grid-template-columns: 1fr; } }
.stark-incluye__panel { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e4); }
.stark-incluye__panel--si { background: var(--carbon); }
.stark-incluye__panel--no { background: var(--negro); }
.stark-incluye__rotulo {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lima);
}
.stark-incluye__rotulo--no { color: var(--gris-2); }
.stark-incluye ul { display: flex; flex-direction: column; gap: var(--e3); margin: 0; padding: 0; list-style: none; }
.stark-incluye li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-m); line-height: 1.5; }
.stark-incluye li svg { flex: none; margin-top: 4px; }
.stark-incluye__panel--no li { color: var(--gris); }
.stark-incluye__panel--no li span { color: var(--gris-2); font-family: var(--fuente-dato); flex: none; }

/* Segunda linea de un dato del hero. */
.stark-datos__detalle { font-size: var(--t-s); color: var(--gris); line-height: 1.45; }

/* Contenido libre del cliente. */
.stark-contenido { display: flex; flex-direction: column; gap: var(--e5); }
.stark-contenido p { color: var(--gris); max-width: 68ch; }
.stark-contenido h2 {
	font-size: var(--t-2xl);
	max-width: 56ch;
}

/* Galeria: tira con scroll-snap; los controles los inyecta el JS. */
.stark-galeria-controles {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--e3);
}
.stark-galeria-controles__botones { display: flex; gap: 1px; background: var(--borde); border: 1px solid var(--borde); }
.stark-galeria-controles__botones button {
	background: var(--carbon);
	border: 0;
	color: var(--hueso);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--t-m);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.stark-galeria-controles__botones button:hover { background: var(--lima); color: var(--lima-tinta); }
.stark-contenido .wp-block-gallery {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--e4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--e2);
	scrollbar-width: none;
}
.stark-contenido .wp-block-gallery .wp-block-image {
	flex: 0 0 clamp(260px, 34vw, 440px);
	scroll-snap-align: start;
	margin: 0;
	border: 1px solid var(--borde);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--piedra);
	background-image: var(--rayas);
}
.stark-contenido .wp-block-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.stark-contenido .wp-block-gallery .wp-block-image:hover img { transform: scale(1.05); }

/* Los bloques de la ruta («La ruta» y las preguntas) cuelgan de
   .wp-block-post-content, no de .stark-contenido: su gap no les llegaba y
   salian pegados (Gerard, 2026-09-18). Ritmo propio y aire antes de cada
   titular, que es lo que separa el texto de las preguntas. Las preguntas
   son la pieza comun del FAQ (ver «FAQ: el tablon invertido»). */
.stark-contenido .wp-block-post-content > h2 + p { margin-top: var(--e4); }
.stark-contenido .wp-block-post-content > p + p { margin-top: var(--e3); }
.stark-contenido .wp-block-post-content > * + h2 { margin-top: var(--e8); }
.stark-contenido .wp-block-post-content > h2 + details { margin-top: var(--e5); }

/* Aparte de reserva. */
/* Fija en el centro de la pantalla (Gerard, 2026-09-18). El JS mide la
   tarjeta y deja su alto en --stark-reserva-alto; nunca sube por encima de la
   cabecera (96px). Sin JS la variable no existe y se queda arriba, como antes. */
/* Si la tarjeta no cabe en la pantalla (portatiles bajos; con la casilla de
   la equipacion crecio, 2026-09-19), se fija por abajo: el total y «Reservar»
   quedan siempre a la vista. Sin JS el segundo termino no actua. */
.stark-reserva { position: sticky; top: min(max(96px, calc(50vh - var(--stark-reserva-alto, 100vh) / 2)), calc(100vh - var(--stark-reserva-alto, 0px) - 16px)); min-width: 0; }
@media (max-width: 1149px) { .stark-reserva { position: static; } }
.stark-reserva__tarjeta {
	border: 1px solid var(--borde);
	border-top: 2px solid var(--lima);
	background: var(--carbon);
}
.stark-reserva__cabecera {
	padding: var(--e5);
	display: flex;
	flex-direction: column;
	gap: var(--e2);
	border-bottom: 1px solid var(--borde);
}
.stark-reserva__precio { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.stark-reserva__cifra {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-2xl);
	line-height: .9;
	color: var(--lima);
}
.stark-reserva__cuerpo { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e5); }
.stark-reserva__campo { display: flex; flex-direction: column; gap: var(--e3); }
.stark-reserva__rotulo {
	font-family: var(--fuente-dato);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-2);
}
.stark-reserva__nota { font-size: var(--t-xs); color: var(--gris-2); line-height: 1.5; }
.stark-reserva__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e3);
	border-top: 1px solid var(--borde);
	padding-top: var(--e4);
}
.stark-reserva__total .stark-reserva__cifra { font-size: var(--t-xl); }

/* Contador de personas. */
.stark-contador { display: flex; align-items: stretch; gap: 1px; background: var(--borde); border: 1px solid var(--borde); }
.stark-contador button {
	background: var(--asfalto);
	border: 0;
	color: var(--hueso);
	width: 52px;
	height: 52px;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: 24px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.stark-contador button:hover { background: var(--piedra); }
.stark-contador button:disabled { color: var(--gris-2); cursor: default; }
.stark-contador__valor {
	flex: 1;
	background: var(--negro);
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-l);
}
/* Sin JS el contador no hace nada: se esconde entero y queda el CTA. */
html:not(.stark-js) .stark-contador,
html:not(.stark-js) .stark-reserva__total,
html:not(.stark-js) .stark-reserva__campo--equipo,
html:not(.stark-js) .stark-barra { display: none; }

.stark-boton--grande {
	min-height: 54px;
	padding: 17px var(--e6);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-m);
	letter-spacing: .06em;
	gap: 10px;
}

/* Barra de reserva fija. La ensena y esconde el JS. */
.stark-barra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	transform: translateY(120%);
	opacity: 0;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
	will-change: transform;
	pointer-events: none;
}
.stark-barra__caja {
	max-width: 860px;
	margin: 0 auto;
	background: rgba(8, 8, 8, .97);
	border: 1px solid var(--borde);
	border-bottom: 0;
	border-top: 2px solid var(--lima);
	padding: var(--e3) var(--e4);
	display: flex;
	align-items: center;
	gap: var(--e4);
}
@supports (backdrop-filter: blur(10px)) { .stark-barra__caja { backdrop-filter: blur(10px); } }
.stark-barra__dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.stark-barra__precio { font-family: var(--fuente-display); font-weight: 800; font-size: var(--t-l); line-height: 1; }
.stark-contador--barra button, .stark-contador--barra .stark-contador__valor { width: 44px; height: 44px; min-height: 44px; }
.stark-contador--barra .stark-contador__valor { width: 52px; flex: none; }
.stark-barra__cta { white-space: nowrap; }
.stark-barra__cerrar {
	background: none;
	border: 0;
	color: var(--gris-2);
	font-size: 22px;
	cursor: pointer;
	padding: var(--e2);
	line-height: 1;
}
.stark-barra__cerrar:hover { color: var(--hueso); }
@media (max-width: 720px) {
	.stark-barra__caja { flex-wrap: wrap; }
	.stark-contador--barra { display: none; }
}

/* Enlace con flecha. */
.stark-enlace-flecha {
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-s);
	letter-spacing: .06em;
	color: var(--hueso);
	border-bottom: 1px solid var(--lima);
	padding-bottom: 6px;
	align-self: flex-start;
}
.stark-enlace-flecha:hover { color: var(--lima); text-decoration: none; }

/* Cierre transaccional: parallax al 30 %, titular en cursiva, datos en filetes. */
.stark-cierre { position: relative; background: var(--negro); border-top: 1px solid var(--borde); overflow: hidden; }
.stark-cierre__fondo { position: absolute; inset: 0; opacity: .62; overflow: hidden; }
.stark-cierre__fondo img { width: 100%; height: 124%; object-fit: cover; }
.stark-cierre__velo {
	position: absolute;
	inset: 0;
	/* Menos velo: la foto tiene que verse. Sigue denso a la izquierda,
	   que es donde va el titular, y se abre hacia la derecha. */
	background: linear-gradient(95deg, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .6) 46%, rgba(8, 8, 8, .28) 100%);
}
.stark-cierre__cuerpo {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--e8);
	align-items: center;
}
.stark-cierre__texto { display: flex; flex-direction: column; gap: var(--e5); container-type: inline-size; }
/* Cada linea del titular, en una sola linea (Gerard, 2026-09-18): el tamaño
   sigue al ancho de la columna (unidades de contenedor) sin pasar del de
   siempre. 12.8cqi deja caber «¿QUÉ DÍA TE ESCAPAS?»; una frase mas larga
   parte linea en vez de desbordar. */
.stark-cierre__titulo {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: min(var(--t-3xl), 12.8cqi);
	line-height: .86;
	letter-spacing: -.018em;
}
.stark-cierre__lima { color: var(--lima); }
.stark-cierre__parrafo { max-width: 46ch; font-size: var(--t-l); line-height: 1.55; color: var(--gris); }
.stark-cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
.stark-cierre__datos .stark-datos { border-top-color: rgba(242, 239, 233, .25); }
.stark-cierre__datos .stark-datos > div { border-bottom-color: rgba(242, 239, 233, .12); }

/* ──────────────────  ajustes de Gerard (2026-08-20)  ────────────────── */

/* Incluye con foto diferenciadora: la foto ocupa una columna entera. */
.stark-incluye--con-foto { grid-template-columns: minmax(0, .8fr) 1fr 1fr; }
.stark-incluye--con-foto.stark-incluye--solo { grid-template-columns: minmax(0, .8fr) 1fr; }
.stark-incluye__foto { position: relative; min-height: 260px; background: var(--piedra); background-image: var(--rayas); overflow: hidden; }
.stark-incluye__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
	.stark-incluye--con-foto, .stark-incluye--con-foto.stark-incluye--solo { grid-template-columns: 1fr; }
	.stark-incluye__foto { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ¿Puedo hacerla?: doble columna abierta, sin filas ni cuadricula. */
.stark-puedo {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: var(--e7);
	align-items: start;
}
@media (max-width: 860px) { .stark-puedo { grid-template-columns: 1fr; gap: var(--e5); } }
.stark-puedo__exigencia { display: flex; flex-direction: column; gap: var(--e3); }
.stark-puedo__nivel {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-2xl);
	line-height: .9;
	color: var(--lima);
}
.stark-puedo__nivel:hover { color: var(--lima-800); text-decoration: none; }
.stark-puedo__checks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--e4);
	border-left: 1px solid var(--borde);
	padding-left: var(--e5);
}
.stark-puedo__checks li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-m); line-height: 1.55; color: var(--gris); }
.stark-puedo__checks li svg { flex: none; margin-top: 4px; }
.stark-puedo__checks strong { color: var(--hueso); font-weight: 600; }
/* Titulo arriba y detalle debajo: los separaba un punto medio, que Gerard
   quito del sitio (2026-09-19). Lo mismo en «Lo que no cambia nunca». */
.stark-puedo__checks strong,
.stark-comunes strong { display: block; }

/* Rutas hermanas: tira deslizable con la tarjeta comun. */
.stark-hermanas__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e4); }
.stark-hermanas__cabecera .stark-cabecera--menor { margin-bottom: 0; flex: 1; }
.stark-hermanas__flechas { flex: none; }
.stark-hermanas {
	display: flex;
	gap: var(--e4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--e2);
	scrollbar-width: none;
	cursor: grab;
}
.stark-hermanas.es-arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.stark-hermanas .stark-tarjeta { flex: 0 0 clamp(250px, 46%, 340px); scroll-snap-align: start; }
/* Dos o menos (Gerard, 2026-09-18): rejilla a todo el ancho, sin flechas ni
   arrastre. La tarjeta crece sola: su foto es 4:3. */
.stark-hermanas--pocas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; cursor: auto; }
.stark-hermanas--pocas .stark-tarjeta { flex: none; }
@media (max-width: 700px) { .stark-hermanas--pocas { grid-template-columns: minmax(0, 1fr); } }

/* La tarjeta de experiencia, comun a hermanas, archivo y home. */
.stark-tarjeta { min-width: 0; }
.stark-tarjeta > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--borde);
	background: var(--carbon);
	color: var(--hueso);
	text-decoration: none;
	transition: border-color .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.stark-tarjeta > a:hover { border-color: var(--lima); transform: translateY(-4px); text-decoration: none; }
.stark-tarjeta__foto {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--piedra);
	background-image: var(--rayas);
}
.stark-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.stark-tarjeta > a:hover .stark-tarjeta__foto img { transform: scale(1.05); }
.stark-tarjeta__chips { position: absolute; left: var(--e3); bottom: var(--e3); display: flex; gap: var(--e2); }
.stark-tarjeta__chip {
	background: rgba(8, 8, 8, .82);
	border: 1px solid var(--borde);
	padding: 3px 9px;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.stark-tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4) var(--e5) var(--e5); flex: 1; }
.stark-tarjeta__titulo {
	/* Es un <span>, no un H3 (Gerard, 2026-09-18): los nombres de ruta no
	   son titulares. Se le devuelve lo que heredaba del H3 (bloque, color
	   de titular y el margen de 1em del navegador) para que no se mueva. */
	display: block;
	margin: 1em 0;
	color: var(--hueso);
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	line-height: 1;
}
.stark-tarjeta__extracto {
	font-size: var(--t-s);
	line-height: 1.55;
	color: var(--gris);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.stark-tarjeta__pie {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e3);
	border-top: 1px solid var(--borde);
	padding-top: var(--e3);
}
.stark-tarjeta__flecha { color: var(--lima); transition: transform .25s ease; }
.stark-tarjeta > a:hover .stark-tarjeta__flecha { transform: translateX(4px); }

/* ──────────────────  archivo de experiencias  ────────────────── */

.stark-archivo-hero {
	border-bottom: 1px solid var(--borde);
	background:
		radial-gradient(120% 90% at 85% 10%, rgba(160, 248, 16, .06) 0%, transparent 55%),
		var(--negro);
}
.stark-archivo-hero .stark-env { display: flex; flex-direction: column; gap: var(--e7); padding-top: calc(var(--seccion) + var(--e6)); }

/* Filtros: preguntas + chips con estado. Sin JS no aparecen. */
.stark-filtros { display: flex; flex-direction: column; gap: var(--e5); margin-bottom: var(--e7); }
html:not(.stark-js) .stark-filtros { display: none; }
.stark-filtros__grupo { display: flex; flex-direction: column; gap: var(--e2); }
.stark-filtros .stark-chip { cursor: pointer; background: transparent; }
.stark-filtros .stark-chip[aria-pressed="true"] {
	background: var(--lima);
	border-color: var(--lima);
	color: var(--lima-tinta);
}
.stark-filtros .stark-chip:first-child { background: transparent; border-color: var(--borde); color: var(--hueso); }
.stark-filtros .stark-chip:first-child[aria-pressed="true"] { background: var(--lima); border-color: var(--lima); color: var(--lima-tinta); }
@media (min-width: 861px) {
	.stark-filtros { flex-direction: row; gap: var(--e7); flex-wrap: wrap; }
	.stark-filtros__grupo { flex: 1; min-width: 220px; }
}

/* Parrilla del catalogo. */
.stark-catalogo {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--e5);
}
.stark-catalogo__item[hidden] { display: none; }
.stark-catalogo__vacio { display: flex; align-items: center; gap: var(--e4); color: var(--gris); padding-top: var(--e5); }
.stark-catalogo__vacio[hidden] { display: none; }

/* Comparador: UNA sola rejilla con las celdas sueltas (display: contents).
   Cada fila de la rejilla mide lo que su celda mas alta en TODAS las
   columnas: el precio de una ruta queda siempre a la altura del precio de
   las demas, crezca lo que crezca un titulo o la lista de «que incluye».
   La columna de claves va pegajosa a la izquierda dentro del mismo scroll. */
.stark-comparativa {
	display: grid;
	grid-auto-flow: column;
	/* OJO: 8 = celdas por columna (foto, titulo, 5 filas y el enlace).
	   Si una columna pinta otro numero de celdas, la rejilla se rompe. */
	grid-template-rows: repeat(8, auto);
	grid-template-columns: 150px;
	grid-auto-columns: clamp(220px, 32%, 320px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
	border-top: 1px solid var(--borde);
}
.stark-comparativa.es-arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.stark-comparativa__claves,
.stark-comparativa__col { display: contents; }
.stark-comparativa__claves > * {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--carbon);
	border-right: 1px solid var(--borde);
}
.stark-comparativa__col > * { border-right: 1px solid var(--borde); }
.stark-comparativa__col > .stark-comparativa__foto { scroll-snap-align: start; scroll-margin-left: 150px; }
.stark-comparativa__titulo {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	padding: var(--e4) var(--e5);
	border-bottom: 1px solid var(--borde);
	min-height: 64px;
	display: flex;
	align-items: center;
}
.stark-comparativa__foto {
	display: block;
	height: 118px;
	border-bottom: 1px solid var(--borde);
	background: var(--asfalto);
}
.stark-comparativa__claves .stark-comparativa__foto { background: var(--carbon); }
.stark-comparativa__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stark-comparativa__fila {
	padding: var(--e4) var(--e5);
	border-bottom: 1px solid var(--borde);
	min-height: 56px;
	display: flex;
	align-items: center;
	font-size: var(--t-m);
}
.stark-comparativa__precio { font-family: var(--fuente-display); font-weight: 800; font-size: var(--t-l); line-height: 1.1; color: var(--lima); }
.stark-comparativa__fila[data-fila="incluye"] { align-items: flex-start; }
.stark-comparativa__fila--lista {
	flex-direction: column;
	justify-content: flex-start;
	gap: 4px;
	font-size: var(--t-s);
	line-height: 1.5;
}
/* El comparador: chips para elegir columnas. Sin JS no existen y se ve todo. */
html:not(.stark-js) .stark-comparativa__picker { display: none; }
.stark-comparativa__picker { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.stark-comparativa__chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.stark-comparativa__chip {
	min-height: 36px;
	padding: 0 14px;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 1px solid var(--borde);
	color: var(--gris);
	background: transparent;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.stark-comparativa__chip:hover { border-color: var(--lima); color: var(--lima); }
.stark-comparativa__chip[aria-pressed="true"] { background: var(--lima); border-color: var(--lima); color: var(--lima-tinta); }
.stark-comparativa__col[hidden] { display: none; }
/* Lo que NO cambia entre las rutas elegidas se atenua; lo que cambia, resalta. */
.stark-fondo--carbon .stark-comparativa__fila.es-igual,
.stark-fondo--carbon .stark-comparativa__fila.es-igual.stark-comparativa__precio { color: var(--gris); }
/* En movil no hay sitio para la columna de claves + una columna de datos:
   fuera la columna de claves y cada ruta pasa a ser una tarjeta ancha
   deslizable, con su clave escrita DENTRO de cada celda (viene del PHP en
   data-clave; esto solo la pinta). Las filas siguen compartiendo altura. */
@media (max-width: 620px) {
	.stark-comparativa { grid-template-columns: none; grid-auto-columns: min(78vw, 340px); }
	.stark-comparativa__claves > * { display: none; }
	.stark-comparativa__col > .stark-comparativa__foto { scroll-margin-left: 0; }
	.stark-comparativa__fila {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 3px;
		min-height: 0;
		padding-block: var(--e3);
	}
	.stark-comparativa__fila[data-clave]:not([data-clave=""])::before {
		content: attr(data-clave);
		font-family: var(--fuente-dato);
		font-size: var(--t-xs);
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--gris);
	}
}

/* Lo comun: checks en columnas, filete izquierdo. */
.stark-comunes {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--e5) var(--e7);
}
.stark-comunes li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: var(--t-m);
	line-height: 1.55;
	color: var(--gris);
	border-left: 1px solid var(--borde);
	padding-left: var(--e4);
}
.stark-comunes li svg { flex: none; margin-top: 4px; }
.stark-comunes strong { color: var(--hueso); font-weight: 600; }
/* Son cuatro garantias (eran cinco hasta el 2026-09-18). Con auto-fit
   quedaba una descolgada (3 + 1): de dos en dos en tableta, y en escritorio
   ancho todas en una fila, sean las que sean. */
@media (min-width: 700px) { .stark-comunes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px) { .stark-comunes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e5); } }

/* ──────────────────  catálogo como Página (proto 2)  ────────────────── */

/* Ticker infinito. El JS duplica el contenido; el teletipo corre 46 s. */
.stark-ticker {
	overflow: hidden;
	border-block: 1px solid var(--borde);
	background: var(--carbon);
	padding-block: var(--e3);
}
.stark-ticker__pista {
	display: flex;
	gap: var(--e6);
	width: max-content;
	white-space: nowrap;
}
.stark-ticker p {
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: var(--t-l);
	color: var(--gris);
	white-space: nowrap;
	padding-right: var(--e6);
}
@keyframes stark-teletipo { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
	html.stark-js .stark-ticker__pista { animation: stark-teletipo 46s linear infinite; }
	html.stark-js .stark-ticker--lima .stark-ticker__pista { animation-duration: 32s; }
	html.stark-js .stark-ticker:hover .stark-ticker__pista { animation-play-state: paused; }
}

/* Cabecera del catalogo: cuenta viva + filtros compactos en la misma banda. */
.stark-catalogo__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--e4);
	border-bottom: 1px solid var(--borde);
	padding-bottom: var(--e4);
	margin-bottom: var(--e6);
}
.stark-filtros--compactos {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--e5);
	margin-bottom: 0;
}
.stark-filtros--compactos .stark-filtros__grupo { flex: none; min-width: 0; flex-direction: row; align-items: center; gap: var(--e3); }
.stark-filtros--compactos .stark-chip { min-height: 30px; padding: 2px 10px; }

/* La ficha grande del prototipo: foto + cuerpo, filete lima arriba. */
.stark-fichas { display: flex; flex-direction: column; gap: var(--e7); }
.stark-ficha-ruta {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	background: var(--carbon);
	border: 1px solid var(--borde);
	border-top: 2px solid var(--lima);
	transition: border-color .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.stark-ficha-ruta:hover { border-color: var(--lima); transform: translateY(-4px); }
.stark-ficha-ruta[hidden] { display: none; }
@media (max-width: 860px) { .stark-ficha-ruta { grid-template-columns: 1fr; } }
.stark-ficha-ruta__foto {
	position: relative;
	overflow: hidden;
	min-height: clamp(230px, 26vw, 330px);
	background: var(--piedra);
	background-image: var(--rayas);
	display: block;
}
.stark-ficha-ruta__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 114%;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.stark-ficha-ruta:hover .stark-ficha-ruta__foto img { transform: scale(1.04); }
.stark-ficha-ruta__insignia {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: var(--negro);
	color: var(--lima);
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 9px 13px;
}
.stark-ficha-ruta__pie {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: var(--e5);
	background: linear-gradient(to top, rgba(8, 8, 8, .92), rgba(8, 8, 8, 0));
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--e4);
}
.stark-ficha-ruta__precio {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-xl);
	line-height: .9;
	color: var(--lima);
}
.stark-ficha-ruta__cuerpo { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e4); }
.stark-ficha-ruta__titulos { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e4); }
.stark-ficha-ruta__nombre {
	/* <span>, no H3: mismo arreglo que .stark-tarjeta__titulo. */
	display: block;
	margin: 1em 0;
	color: var(--hueso);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-xl);
	line-height: .92;
}
.stark-ficha-ruta__nombre a { color: var(--hueso); }
.stark-ficha-ruta__nombre a:hover { color: var(--lima); text-decoration: none; }
.stark-ficha-ruta__datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1px;
	background: var(--borde);
	border: 1px solid var(--borde);
}
.stark-ficha-ruta__datos > div {
	background: var(--asfalto);
	padding: var(--e4);
	display: flex;
	flex-direction: column;
	gap: 3px;
	transition: background .2s ease;
}
.stark-ficha-ruta__datos > div:hover { background: var(--piedra); }
.stark-ficha-ruta__incluye { border-top: 1px solid var(--borde); padding-top: var(--e4); display: flex; flex-direction: column; gap: var(--e3); }
.stark-ficha-ruta__incluye ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.stark-ficha-ruta__incluye li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-s); line-height: 1.5; }
.stark-ficha-ruta__incluye svg { flex: none; margin-top: 3px; }
.stark-ficha-ruta__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: auto; }
.stark-hermanas__cabecera--suelta { justify-content: flex-end; margin-bottom: var(--e5); }

/* Secciones de la Pagina del catalogo: cada grupo trae su propio env. */
.stark-pagina-seccion { padding-block: var(--seccion); }
.stark-pagina-seccion > .stark-env { padding-block: 0; }

/* Portada del catalogo: cover editable con el texto abajo. */
.stark-portada.wp-block-cover {
	position: relative;
	isolation: isolate;
	min-height: clamp(420px, 62vh, 700px);
	display: flex;
	align-items: flex-end;
	border-bottom: 1px solid var(--borde);
	padding: 0;
	/* Respaldo mientras la foto no ha pintado: noche, no el crema del body. */
	background: var(--negro);
}
/* La foto y el velo, posicionados por el tema (como en los otros tres heros):
   este hero era el unico que dependia al 100 % del CSS de core/cover. */
.stark-portada > .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.stark-portada > .wp-block-cover__background { position: absolute; inset: 0; z-index: 1; }
.stark-portada > .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }
.stark-portada .wp-block-cover__background { background: linear-gradient(180deg, rgba(8,8,8,.5) 0%, rgba(8,8,8,.15) 40%, rgba(8,8,8,.88) 92%) !important; opacity: 1 !important; }
.stark-portada .wp-block-cover__inner-container {
	max-width: var(--ancho);
	margin-inline: auto;
	padding: var(--seccion) var(--canal) var(--e7);
	display: flex;
	flex-direction: column;
	gap: var(--e5);
}
.stark-portada h1 { font-size: var(--t-3xl); max-width: 20ch; }
.stark-portada p { color: var(--gris); max-width: 58ch; font-size: var(--t-m); line-height: 1.65; }

/* Selector Fichas / Lista. Sin JS no aparece: la vista es Fichas. */
.stark-vistas { display: flex; align-items: center; gap: var(--e3); }
html:not(.stark-js) .stark-vistas, html:not(.stark-js) .stark-lista { display: none; }
.stark-vistas button {
	width: auto;
	padding: 0 15px;
	font-family: var(--fuente-dato);
	font-size: var(--t-s);
	letter-spacing: .1em;
	text-transform: uppercase;
	height: 44px;
}
.stark-vistas button[aria-pressed="true"] { background: var(--lima); color: var(--lima-tinta); }

/* Vista de lista: filas del prototipo. */
.stark-lista { display: flex; flex-direction: column; border-top: 1px solid var(--borde); }
.stark-lista[hidden], .stark-fichas[hidden] { display: none; }
.stark-lista__fila {
	display: grid;
	grid-template-columns: 84px minmax(0, 1.5fr) 110px 120px 120px 100px 150px;
	gap: var(--e4);
	align-items: center;
	padding: var(--e4) var(--e2);
	border-bottom: 1px solid var(--borde);
	color: var(--hueso);
	transition: background .2s ease;
}
.stark-lista__fila:hover { background: var(--carbon); text-decoration: none; }
.stark-lista__fila[hidden] { display: none; }
.stark-lista__foto { width: 84px; height: 56px; overflow: hidden; background: var(--asfalto); }
.stark-lista__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stark-lista__nombre {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-l);
}
.stark-lista__celda { font-family: var(--fuente-dato); font-size: var(--t-s); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.stark-lista__precio { font-family: var(--fuente-display); font-weight: 800; font-size: var(--t-l); color: var(--lima); text-align: right; }
.stark-lista__cta { font-family: var(--fuente-dato); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--hueso); text-align: right; }
.stark-lista__fila:hover .stark-lista__cta { color: var(--lima); }
@media (max-width: 860px) {
	.stark-lista__fila { grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--e3); }
	.stark-lista__foto { width: 64px; height: 48px; }
	.stark-lista__nombre { font-size: var(--t-m); }
	.stark-lista__celda, .stark-lista__cta { display: none; }
}

/* Banner «ruta a medida»: dos paneles con borde discontinuo, como el prototipo. */
.stark-medida {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr);
	gap: 1px;
	background: var(--borde);
	border: 1px dashed var(--borde);
	margin-top: var(--e7);
}
@media (max-width: 720px) { .stark-medida { grid-template-columns: 1fr; } }
.stark-medida__texto { background: var(--asfalto); padding: var(--e6) var(--e5); display: flex; flex-direction: column; gap: var(--e3); }
.stark-medida__texto h2, .stark-medida__texto h3 { font-size: var(--t-xl); line-height: 1; }
.stark-medida__texto p { font-size: var(--t-s); line-height: 1.6; color: var(--gris); max-width: 52ch; margin: 0; }
.stark-medida__accion { background: var(--carbon); padding: var(--e6) var(--e5); display: flex; flex-direction: column; justify-content: center; gap: var(--e3); text-align: center; }
/* El boton es el bloque de WhatsApp (el numero sale de Stark → Contacto y
   datos, 2026-09-19): su <p class="stark-wa"> no lleva el estilo de la nota. */
.stark-medida__accion p:not(.stark-wa) { font-family: var(--fuente-dato); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-2); margin: 0; }

/* El ticker hereda el aspecto del prototipo: punto lima entre frases. */
.stark-ticker p::after { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--lima); margin-left: var(--e5); vertical-align: middle; }
.stark-env--banner { padding-block: 0 var(--e8); }

/* ──────────────────  home  ────────────────── */

.stark-parrilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e5); }

/* Publicos: paneles editables; el JS les pone menu selector delante. */
.stark-publicos { display: flex; flex-direction: column; gap: var(--e6); }
.stark-publicos.es-selector { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: var(--e6); align-items: start; }
@media (max-width: 860px) { .stark-publicos.es-selector { grid-template-columns: 1fr; } }
.stark-publicos__menu { display: flex; flex-direction: column; border-top: 1px solid var(--borde); }
.stark-publicos__boton {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--borde);
	border-left: 2px solid transparent;
	color: var(--gris);
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	text-align: left;
	padding: var(--e4) var(--e4);
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.stark-publicos__boton:hover { color: var(--hueso); }
.stark-publicos__boton[aria-pressed="true"] { color: var(--hueso); border-left-color: var(--lima); background: var(--carbon); }
.stark-publicos.es-selector > .wp-block-group { display: none; }
.stark-publicos.es-selector > .wp-block-group.es-activo { display: flex; flex-direction: column; gap: var(--e4); }
.stark-publicos > .wp-block-group img { border: 1px solid var(--borde); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.stark-publicos > .wp-block-group p { color: var(--gris); max-width: 60ch; }

/* Pasos numerados: contador CSS sobre grupos editables. */
.stark-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e6); counter-reset: paso; }
.stark-pasos > .wp-block-group { counter-increment: paso; display: flex; flex-direction: column; gap: var(--e3); border-top: 1px solid var(--borde); padding-top: var(--e4); }
.stark-pasos > .wp-block-group::before {
	content: counter(paso, decimal-leading-zero);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	font-size: var(--t-xl);
	color: var(--lima);
	line-height: 1;
}
.stark-pasos h3 { font-size: var(--t-l); }
.stark-pasos p { font-size: var(--t-s); color: var(--gris); margin: 0; }

/* Lista de argumentos (por que electrica): filas F5 editables. */
.stark-argumentos > .wp-block-group { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: var(--e5); border-top: 1px solid var(--borde); padding-block: var(--e4); align-items: baseline; }
.stark-argumentos > .wp-block-group:last-child { border-bottom: 1px solid var(--borde); }
.stark-argumentos h3 { font-family: var(--fuente-display); font-weight: 800; font-style: italic; font-size: var(--t-xl); color: var(--lima); line-height: 1; }
.stark-argumentos p { margin: 0; color: var(--gris); font-size: var(--t-s); }
.stark-argumentos strong { display: block; color: var(--hueso); font-family: var(--fuente-display); font-weight: 700; text-transform: uppercase; font-size: var(--t-m); letter-spacing: .03em; }

/* Hueco de reseñas: se ve que falta, a proposito. */
.stark-hueco-resenas { border: 1px dashed var(--borde); padding: var(--e7) var(--e5); text-align: center; color: var(--gris-2); }

/* ──────────────────  home v2 (referencia MR Offroad)  ────────────────── */

/* Hero a pantalla con el widget de reserva al lado. */
.stark-portada--home.wp-block-cover { min-height: clamp(560px, 92vh, 940px); align-items: center; }
.stark-portada--home .wp-block-cover__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
	gap: var(--e8);
	align-items: center;
	padding-block: var(--e9) var(--e8);
}
@media (max-width: 940px) { .stark-portada--home .wp-block-cover__inner-container { grid-template-columns: 1fr; } }
.stark-portada--home h1 { font-size: var(--t-4xl); line-height: .88; max-width: 12ch; }
.stark-portada--home p { font-size: var(--t-l); }

/* Widget de reserva rapida: la tarjeta de conversion. */
/* ── «Monta tu salida»: tres pasos y el panel del calendario ────────── */

.stark-rr {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
	gap: var(--e6);
	align-items: start;
}
@media (max-width: 900px) { .stark-rr { grid-template-columns: 1fr; } }
.stark-rr__pasos { display: flex; flex-direction: column; gap: var(--e5); }
.stark-rr__paso { display: flex; flex-direction: column; gap: var(--e3); }
.stark-rr__rotulo {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-2);
}
.stark-rr__nota { font-size: var(--t-s); color: var(--gris-2); line-height: 1.5; margin: 0; }

/* 01. La ruta: filas con filete izquierdo, como manda el ADR 005. */
/* La lista de rutas no puede crecer sin fin (pedido de Gerard, 2026-08-24):
   a partir de la sexta, tope de unas cinco filas y scroll interno. La sexta
   asoma cortada a proposito: es la señal de que hay mas. */
.stark-rr__rutas:has(> :nth-child(6)) {
	max-height: 374px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--borde) transparent;
}

/* El buscador de la lista: solo lo pinta el PHP a partir de siete rutas, y
   sin JavaScript no filtra nada, asi que se esconde. */
.stark-rr__buscar input {
	background: var(--negro);
	border: 1px solid var(--borde);
	color: var(--hueso);
	height: 48px;
	padding: 0 var(--e4);
	width: 100%;
	font-family: inherit;
	font-size: var(--t-m);
}
.stark-rr__buscar input:focus-visible { outline: 2px solid var(--lima); outline-offset: 2px; }
/* En el panel claro del vale, el foco lima no se ve: oliva. */
.stark-vale__panel .stark-rr__buscar input:focus-visible { outline-color: var(--oliva); }
html:not(.stark-js) .stark-rr__buscar { display: none; }

.stark-rr__rutas {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--borde);
	border: 1px solid var(--borde);
}
/* El display:flex de abajo le gana al [hidden] del navegador: sin esta
   regla, el buscador «filtraba» sin esconder nada (aviso de Gerard,
   2026-08-24 — mismo patron que los meses del calendario). */
.stark-rr__ruta[hidden] { display: none; }
.stark-rr__ruta {
	/* flex none: con el tope de altura de la lista, los hijos flex se
	   encogian para caber y el texto desbordaba la fila (visto con el
	   titulo kilometrico de la prueba de carga). */
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--e4);
	text-align: left;
	background: var(--carbon);
	border: 0;
	border-left: 2px solid transparent;
	padding: var(--e3) var(--e4);
	min-height: 56px;
	cursor: pointer;
	color: var(--hueso);
	transition: background .2s ease, border-color .2s ease;
}
.stark-rr__ruta:hover { background: var(--piedra); }
.stark-rr__ruta[aria-pressed="true"] { background: var(--piedra); border-left-color: var(--lima); }
.stark-rr__aro {
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: 999px;
	border: 2px solid var(--borde);
	display: flex;
	align-items: center;
	justify-content: center;
}
.stark-rr__ruta[aria-pressed="true"] .stark-rr__aro { border-color: var(--lima); }
.stark-rr__aro::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: transparent; }
.stark-rr__ruta[aria-pressed="true"] .stark-rr__aro::after { background: var(--lima); }
.stark-rr__ruta-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.stark-rr__ruta-nombre {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	letter-spacing: .02em;
	line-height: 1.05;
}
.stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-nombre { color: var(--lima); }
.stark-rr__ruta-meta {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gris-2);
}
.stark-rr__ruta-precio {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-l);
	flex: none;
}
.stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-precio { color: var(--lima); }

/* 02. La franja: tres pestañas pegadas. */
.stark-rr__franjas { display: flex; gap: 1px; background: var(--borde); border: 1px solid var(--borde); }
.stark-rr__franja {
	flex: 1;
	background: var(--carbon);
	color: var(--gris);
	border: 0;
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-s);
	letter-spacing: .08em;
	padding: var(--e3);
	min-height: 46px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.stark-rr__franja:hover { color: var(--hueso); }
.stark-rr__franja[aria-pressed="true"] { background: var(--lima); color: var(--lima-tinta); }

/* 02 y 03 en la misma fila (Gerard, 2026-09-18: «más compactado»): la
   franja se estira, el contador va a su medida (antes ocupaba todo el
   ancho) y las dos notas, juntas debajo. Misma altura para los dos. */
.stark-rr__fila {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--e3) var(--e5);
	align-items: end;
}
.stark-rr__fila .stark-rr__franja { min-height: 52px; }
.stark-rr__fila .stark-contador__valor { flex: none; width: 60px; }
.stark-rr__notas { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
/* En movil no caben juntos: la franja arriba y el contador en la misma
   linea que su rotulo. */
@media (max-width: 560px) {
	.stark-rr__fila { grid-template-columns: minmax(0, 1fr); }
	.stark-rr__paso--personas { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* 04. La equipacion, en la misma fila que la franja y las personas
   (Gerard, 2026-09-19). Una casilla con la forma de los botones de la
   franja; marcada, en lima como la franja elegida. */
.stark-rr__fila:has(> .stark-rr__paso--equipo) { grid-template-columns: minmax(0, 1fr) auto auto; }
.stark-rr__equipo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--e2);
	min-height: 54px;
	padding: var(--e3) var(--e4);
	background: var(--carbon);
	border: 1px solid var(--borde);
	color: var(--gris);
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-s);
	letter-spacing: .08em;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.stark-rr__equipo:hover { color: var(--hueso); }
.stark-rr__equipo:has(input:checked) { background: var(--lima); border-color: var(--lima); color: var(--lima-tinta); }
.stark-rr__equipo input {
	appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	/* El navegador pinta los input en negro: sin heredar, el cuadrado no se
	   veia sobre el fondo oscuro. */
	color: inherit;
	border: 1px solid currentColor;
	background: transparent;
	display: grid;
	place-content: center;
	cursor: pointer;
}
.stark-rr__equipo input::after { content: ""; width: 10px; height: 10px; background: currentColor; transform: scale(0); transition: transform .15s ease; }
.stark-rr__equipo input:checked::after { transform: scale(1); }
.stark-rr__equipo input:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* Si la columna de los pasos se estrecha y no caben los tres, la franja va
   arriba a lo ancho y el contador y la casilla juntos debajo; en movil,
   cada uno en la linea de su rotulo. */
.stark-rr__pasos { container-type: inline-size; }
@container (max-width: 700px) {
	.stark-rr__fila:has(> .stark-rr__paso--equipo) { grid-template-columns: auto auto minmax(0, 1fr); }
	.stark-rr__fila:has(> .stark-rr__paso--equipo) > .stark-rr__paso--franja { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.stark-rr__fila:has(> .stark-rr__paso--equipo) { grid-template-columns: minmax(0, 1fr); }
	.stark-rr__paso--equipo { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Panel derecho: calendario, resumen y CTA. */
.stark-rr__panel { background: var(--negro); border: 1px solid var(--borde); border-top: 2px solid var(--lima); }

.stark-cal__barra {
	padding: var(--e3) var(--e4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e4);
	border-bottom: 1px solid var(--borde);
}
.stark-cal__mes-nombre {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .04em;
}
.stark-cal__flecha {
	width: 34px;
	height: 34px;
	background: transparent;
	border: 1px solid var(--borde);
	color: var(--hueso);
	font-size: 16px;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}
.stark-cal__flecha:hover:not(:disabled) { border-color: var(--lima); color: var(--lima); }
.stark-cal__flecha:disabled { color: var(--borde); cursor: default; }

.stark-cal__cuerpo { padding: var(--e3) var(--e4) var(--e4); }
.stark-cal__semana,
.stark-cal__mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
/* display:grid le gana al atributo hidden si no se dice esto. Sin esta linea
   se veian los tres meses apilados. */
.stark-cal__mes[hidden] { display: none; }
.stark-cal__semana {
	margin-bottom: 5px;
	text-align: center;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .12em;
	color: var(--gris-2);
}
.stark-cal__dia {
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--carbon);
	color: var(--hueso);
	border: 1px solid var(--borde);
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.stark-cal__dia:hover:not(:disabled) { border-color: var(--lima); }
.stark-cal__dia:disabled { color: var(--borde); background: transparent; cursor: default; }
.stark-cal__dia[aria-pressed="true"] { background: var(--lima); border-color: var(--lima); color: var(--lima-tinta); }

.stark-cal__nativo { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e3); }
.stark-cal__nativo input {
	background: var(--carbon);
	border: 1px solid var(--borde);
	color: var(--hueso);
	font-family: var(--fuente-texto);
	font-size: var(--t-m);
	padding: var(--e3);
	min-height: 46px;
	color-scheme: dark;
}
.stark-cal__nativo input:focus { outline: 2px solid var(--lima); outline-offset: 1px; }

.stark-rr__resumen {
	border-top: 1px solid var(--borde);
	padding: var(--e3) var(--e4);
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.stark-rr__resumen-texto {
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .03em;
	line-height: 1.35;
}
.stark-rr__cta {
	display: flex;
	width: 100%;
	justify-content: center;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-m);
	letter-spacing: .06em;
	min-height: 50px;
}
.stark-rr__pie {
	padding: 10px var(--e4) var(--e3);
	font-size: var(--t-xs);
	color: var(--gris-2);
	text-align: center;
	margin: 0;
}

/* Sin JavaScript: fuera los controles que no harian nada, queda el campo de
   fecha nativo, que si funciona solo. */
html:not(.stark-js) .stark-cal__barra,
html:not(.stark-js) .stark-cal__semana,
html:not(.stark-js) .stark-cal__mes,
html:not(.stark-js) .stark-rr__resumen,
html:not(.stark-js) .stark-rr__rutas,
html:not(.stark-js) .stark-rr__franjas,
html:not(.stark-js) .stark-rr .stark-contador,
html:not(.stark-js) .stark-rr__paso--equipo { display: none; }
html.stark-js .stark-cal__nativo { display: none; }

/* Tarjeta regalo dibujada: negro, lima y el lazo en diagonal. */
.stark-regala { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); gap: var(--e7); align-items: center; border: 1px dashed var(--borde); padding: var(--e7) var(--e6); background: var(--carbon); }
@media (max-width: 860px) { .stark-regala { grid-template-columns: 1fr; } }
.stark-tarjeta-regalo {
	aspect-ratio: 16 / 10;
	background:
		linear-gradient(115deg, transparent 0 58%, rgba(160, 248, 16, .16) 58% 60%, transparent 60%),
		linear-gradient(295deg, transparent 0 28%, rgba(160, 248, 16, .12) 28% 30%, transparent 30%),
		var(--negro);
	border: 1px solid var(--lima);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--e3);
	transform: rotate(-2deg);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.stark-tarjeta-regalo strong {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-xl);
	color: var(--hueso);
	text-align: center;
	line-height: 1;
}
.stark-tarjeta-regalo em {
	font-style: normal;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--lima);
	border-top: 1px solid var(--borde);
	padding-top: var(--e2);
}
.stark-regala__texto { display: flex; flex-direction: column; gap: var(--e4); }
.stark-regala__texto h2 { font-size: var(--t-2xl); }
.stark-regala__texto p { color: var(--gris); max-width: 52ch; margin: 0; }


/* ══════════════════  HOME: prototipo 1  ══════════════════ */

/* El "block gap" de WordPress mete margin-block-start a cada bloque de un
   contenedor de flujo. Aqui el espaciado lo dan las secciones y los gaps del
   tema: ese margen extra pintaba franjas negras entre secciones y lineas
   descolgadas. Fuera. Los margenes que el tema quiere los pone el mismo con
   selectores mas especificos, que ganan a este where() de especificidad cero.
   Tambien en los hijos directos del <main> de las plantillas: al poner la
   ficha en zona noche, ese margen pintaba franjas crema entre el hero, la
   zona, la moto y el cierre (aviso de Gerard, 2026-08-24). */
.wp-block-post-content :where(.is-layout-flow) > *,
.wp-block-post-content > :where(*),
#contenido > :where(*),
.wp-site-blocks > * { margin-block-start: 0; }

/* ── hero a sangre ────────────────── */
/* Es un core/cover: la foto se cambia con «Reemplazar» desde el editor, y el
   H1, el parrafo y los botones son bloques normales de la Pagina. Los dos
   velos del prototipo los pone el CSS, no dos capas mas en el editor. */

.stark-hero.wp-block-cover {
	/* Que quepa entero en una pantalla con la cabecera (pedido de Gerard). */
	min-height: min(calc(100svh - 130px), 820px);
	padding: 0;
	/* stretch: el interior ocupa todo el alto (el texto sigue abajo por su
	   propio justify-end) y el logo puede centrarse en el alto REAL. */
	align-items: stretch;
	background: var(--negro);
	/* Contexto de apilamiento propio: los velos jamas pueden quedar sobre el
	   texto ni sobre nada de fuera. */
	isolation: isolate;
}

.stark-hero .wp-block-cover__image-background {
	height: 118%;
	object-fit: cover;
	will-change: transform;
}
.stark-hero > .wp-block-cover__background { display: none; }
.stark-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Los dos velos del prototipo, en un solo ::after y a z-index 0: a igual
	   indice, ::after pinta DESPUES de la foto (hija) y ANTES del contenido
	   (que core sube a 1). Solo oscurece la foto, jamas las letras. */
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(100deg, rgba(8, 8, 8, .82) 0%, rgba(8, 8, 8, .36) 36%, rgba(8, 8, 8, 0) 64%),
		linear-gradient(to bottom, rgba(8, 8, 8, .6) 0%, rgba(8, 8, 8, .14) 24%, rgba(8, 8, 8, .12) 42%, rgba(8, 8, 8, .74) 70%, rgba(8, 8, 8, .97) 90%, var(--negro) 100%);
}
.stark-hero.wp-block-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: var(--ancho);
	width: 100%;
	margin: 0 auto;
	padding: var(--e6) var(--canal) var(--e7);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--e7);
	will-change: transform, opacity;
}

.stark-hero__texto {
	display: flex;
	flex-direction: column;
	gap: var(--e5);
	max-width: 900px;
	text-shadow: 0 2px 34px rgba(8, 8, 8, .7);
}
.stark-hero__titular {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	/* El prototipo no usa --t-4xl aqui: trae su propio clamp, mas contenido. */
	font-size: clamp(52px, 4.6vw, 76px);
	line-height: .84;
	letter-spacing: -.022em;
	text-wrap: balance;
	margin: 0;
}
.stark-hero__entradilla {
	max-width: 54ch;
	font-size: var(--t-l);
	line-height: 1.5;
	color: #E4E1DA;
	text-wrap: pretty;
	margin: 0;
}
@media (max-width: 1149px) {
	.stark-hero.wp-block-cover { min-height: 88vh; }
	.stark-hero__titular { font-size: clamp(34px, 8vw, 56px); }
}
.stark-hero .stark-antetitulo::before { width: 26px; animation: none; }
.stark-hero .wp-block-buttons { gap: var(--e3); }
.stark-hero .wp-block-button__link {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .06em;
	padding: 17px var(--e6);
	min-height: 54px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 0;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.stark-hero .wp-block-button__link:hover { transform: translateY(-2px); }
.stark-hero .is-style-outline > .wp-block-button__link {
	border: 1px solid rgba(242, 239, 233, .35);
	padding: 17px var(--e5);
}
.stark-hero .is-style-outline > .wp-block-button__link:hover { border-color: var(--lima); color: var(--lima); background: rgba(8, 8, 8, .4); }

/* Remate inferior: «Desliza» a la izquierda y el dato a la derecha. */
.stark-hero__remate {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e5);
	border-top: 1px solid rgba(242, 239, 233, .16);
	padding-top: var(--e4);
	margin: 0;
}
.stark-hero__remate p {
	margin: 0;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #B8B4AC;
}
.stark-hero__desliza { display: flex; align-items: center; gap: var(--e3); }
.stark-hero__desliza::after {
	content: "";
	display: block;
	width: 1px;
	height: 34px;
	flex: none;
	background-color: rgba(242, 239, 233, .2);
	background-image: linear-gradient(var(--lima), var(--lima));
	background-repeat: no-repeat;
	background-size: 100% 34%;
	background-position: 0 -50%;
}
@media (prefers-reduced-motion: no-preference) {
	.stark-hero__desliza::after { animation: stark-cue 2.2s cubic-bezier(.6, .1, .4, .9) infinite; }
	@keyframes stark-cue {
		from { background-position: 0 -50%; }
		to   { background-position: 0 150%; }
	}
}

/* ── tarjeta completa de «Las rutas» ────────────────── */

/* La parrilla de la home, a 2×2: cuatro rutas como máximo y cada tarjeta
   al doble de ancho (pedido de Gerard, 2026-08-24). En angosto, una columna. */
.stark-parrilla--completa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); }
@media (max-width: 759px) { .stark-parrilla--completa { grid-template-columns: 1fr; } }

.stark-tarjeta--completa {
	background: var(--carbon);
	border: 1px solid var(--borde);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color .25s ease, transform .25s ease;
}
.stark-tarjeta--completa:hover { border-color: var(--lima); transform: translateY(-3px); }
.stark-tarjeta--completa .stark-tarjeta__foto {
	aspect-ratio: 16 / 10;
	position: relative;
	overflow: hidden;
	background: var(--piedra);
	background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255, 255, 255, .05) 9px 18px);
}
.stark-tarjeta--completa .stark-tarjeta__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.stark-tarjeta--completa:hover .stark-tarjeta__foto img { transform: scale(1.06); }
.stark-tarjeta__etiqueta {
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	background: var(--negro);
	color: var(--lima);
	padding: var(--e2) var(--e3);
}
.stark-tarjeta__precio {
	position: absolute;
	bottom: 0;
	right: 0;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-l);
	background: var(--lima);
	color: var(--lima-tinta);
	padding: 5px 12px 3px;
}
.stark-tarjeta--completa .stark-tarjeta__cuerpo { padding: var(--e4); gap: var(--e3); }
.stark-tarjeta__encabezado {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e4);
	flex-wrap: wrap;
}
.stark-tarjeta--completa .stark-tarjeta__titulo {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-l);
	line-height: .95;
	margin: 0;
}
.stark-tarjeta--completa .stark-tarjeta__titulo a { color: var(--hueso); text-decoration: none; }
.stark-tarjeta--completa .stark-tarjeta__titulo a:hover { color: var(--lima); }
.stark-tarjeta--completa .stark-tarjeta__chips { position: static; flex-wrap: wrap; }
.stark-tarjeta--completa .stark-tarjeta__extracto { font-size: var(--t-s); line-height: 1.6; color: var(--gris); }
.stark-tarjeta__incluye {
	display: flex;
	flex-direction: column;
	gap: 7px;
	border-top: 1px solid var(--borde);
	padding: var(--e3) 0 0;
	margin: 0;
	list-style: none;
}
.stark-tarjeta__incluye li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: var(--t-s);
	line-height: 1.45;
	color: var(--hueso);
}
.stark-tarjeta__incluye .stark-icono { flex: none; margin-top: 3px; color: var(--lima); }
.stark-tarjeta__botones {
	margin-top: auto;
	padding-top: var(--e5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--e3);
}
.stark-tarjeta__botones .stark-boton {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-s);
	letter-spacing: .06em;
	min-height: 50px;
	padding: var(--e3) var(--e5);
}


/* ── piezas comunes de las secciones de la home ────────────────── */

/* El antetitulo con su filete: en la home es un parrafo normal del editor, asi
   que la linea la pone el CSS y crece sola donde el navegador lo soporta. */
.stark-antetitulo::before {
	content: "";
	flex: none;
	display: block;
	width: 44px;
	height: 1px;
	background: currentColor;
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.stark-antetitulo::before {
			animation: stark-crecer linear both;
			animation-timeline: view();
			animation-range: entry 18% cover 26%;
		}
		@keyframes stark-crecer {
			from { width: 0; }
			to   { width: 44px; }
		}
	}
}
.stark-antetitulo.stark-antetitulo--negro { color: var(--negro); }
.stark-antetitulo.stark-antetitulo--oliva { color: var(--oliva); }

/* Titulares de seccion, con y sin cursiva. */
.stark-pagina-seccion h2,
.stark-seccion-reserva h2 {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-2xl);
	line-height: .95;
	letter-spacing: -.01em;
	margin: 0;
}
.stark-titular-cursiva { font-style: italic; }
.stark-titular-grande { font-size: var(--t-3xl) !important; line-height: .86 !important; letter-spacing: -.018em !important; }

/* Encabezado de seccion a dos lados: texto a la izquierda, boton a la derecha. */
.stark-cabecera-rutas {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--e5);
	margin-bottom: var(--e7);
}
.stark-cabecera-rutas__texto { display: flex; flex-direction: column; gap: var(--e3); max-width: 56ch; }
.stark-cabecera-rutas p:not(.stark-antetitulo) { font-size: var(--t-m); line-height: 1.6; color: var(--gris); text-wrap: pretty; margin: 0; }
.stark-cabecera-rutas .wp-block-button__link {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-s);
	letter-spacing: .06em;
	padding: 14px var(--e5);
	min-height: 48px;
	border-radius: 0;
	border: 1px solid var(--borde);
	background: transparent;
	color: var(--hueso);
}
.stark-cabecera-rutas .wp-block-button__link:hover { border-color: var(--lima); color: var(--lima); }

.stark-cabecera-reserva { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e7); max-width: 56ch; }
.stark-cabecera-reserva p:not(.stark-antetitulo) { font-size: var(--t-m); line-height: 1.6; color: var(--gris); text-wrap: pretty; margin: 0; }

.stark-seccion--rutas { background: var(--asfalto); border-bottom: 1px solid var(--borde); }

/* Seccion de reserva: la foto de fondo, muy bajada, y el velo en diagonal. */
.stark-seccion-reserva.wp-block-cover {
	background: var(--carbon);
	border-bottom: 1px solid var(--borde);
	padding: 0;
	min-height: 0;
	isolation: isolate;
}
.stark-seccion-reserva > .wp-block-cover__background { display: none; }
/* La foto, a plena intensidad, y el fundido SOLO en la foto (orden de
   Gerard, 2026-08-24, tras dos aclaradas del velo que seguían leyendose
   como un bloque oscuro): la imagen se apaga con una mascara hacia la
   columna del texto y el resto de la seccion no lleva velo ninguno. Donde
   la mascara la apaga, lo que se ve es el carbon de la seccion. */
.stark-seccion-reserva .wp-block-cover__image-background {
	opacity: 1;
	height: 118%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(100deg, transparent 8%, rgba(0, 0, 0, .55) 42%, #000 72%);
	mask-image: linear-gradient(100deg, transparent 8%, rgba(0, 0, 0, .55) 42%, #000 72%);
}
.stark-seccion-reserva > .wp-block-cover__inner-container {
	position: relative;
	width: 100%;
	padding-block: var(--seccion);
}


/* ── la moto en la home: titular calado, recorte y cuatro datos ────── */

.stark-seccion--moto { background: var(--negro); overflow: hidden; padding-bottom: calc(var(--seccion) * .8); }
.stark-moto-home__barra { align-items: flex-end; gap: var(--e5); }
.stark-enlace-subrayado { margin: 0; }
.stark-enlace-subrayado a {
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-s);
	letter-spacing: .06em;
	color: var(--hueso);
	border-bottom: 1px solid var(--lima);
	padding-bottom: 6px;
	text-decoration: none;
}
.stark-enlace-subrayado a:hover { color: var(--lima); }

.stark-moto-home__escena { position: relative; margin-top: var(--e5); }
.stark-moto-home__calado {
	text-align: center;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(58px, 11.5vw, 190px) !important;
	line-height: .9 !important;
	letter-spacing: -.02em !important;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 2.5px rgba(160, 248, 16, .5);
	margin: 0;
}
/* El halo de debajo del titular. */
.stark-moto-home__escena::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 72%;
	height: 46%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(160, 248, 16, .14), transparent 65%);
	pointer-events: none;
}
.stark-moto-home__recorte { position: relative; margin: clamp(-30px, -5vw, -110px) auto 0; width: min(920px, 96%); }
.stark-moto-home__recorte img { display: block; width: 100%; height: auto; mix-blend-mode: screen; }

.stark-moto-home__texto {
	max-width: 58ch;
	margin: var(--e5) auto 0;
	font-size: var(--t-l);
	line-height: 1.55;
	color: var(--gris);
	text-wrap: pretty;
}

.stark-datos-moto {
	/* El flex aqui, no fiado de la clase de layout de WordPress: en la home
	   la pone el editor, pero el bloque de la ficha pinta el mismo marcado
	   sin ella. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Sin filetes (Gerard, 2026-09-18: «que queden los datos y ya»). */
	margin-top: var(--e6);
	gap: 0;
	align-items: stretch;
}
.stark-datos-moto > .wp-block-group {
	flex: 1;
	min-width: 180px;
	padding: var(--e5) var(--e5) 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	text-align: center;
}
.stark-dato-valor {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-xl);
	line-height: 1;
	color: var(--hueso);
	margin: 0;
}
.stark-dato-valor--lima { color: var(--lima); }
.stark-dato-clave {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-2);
	margin: 0;
}

/* ── galería: tira que rueda sola, con flechas y arrastre ────────── */

.stark-seccion--galeria { background: var(--hueso); color: var(--negro); overflow: hidden; padding-bottom: var(--seccion); }
.stark-seccion--galeria h2 { color: var(--negro); }
.stark-seccion--galeria > .stark-env { padding-bottom: var(--e6); }
.stark-cabecera-galeria__lado { align-items: center; gap: var(--e5); }
.stark-cabecera-galeria__lado p { font-size: var(--t-s); line-height: 1.6; color: #57544D; max-width: 32ch; margin: 0; }

.stark-flechas { display: flex; gap: var(--e2); flex: none; }
.stark-flecha {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1px solid #C9C3B5;
	color: var(--negro);
	font-size: 20px;
	cursor: pointer;
	transition: border-color .18s ease, transform .18s ease;
}
.stark-flecha:hover { border-color: var(--lima-800); transform: translateY(-1px); }

.stark-galeria-tira.wp-block-gallery img {
	-webkit-user-drag: none;
	user-select: none;
}
.stark-galeria-tira.wp-block-gallery {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--e3);
	overflow-x: auto;
	scrollbar-width: none;
	margin: 0;
	cursor: grab;
}
.stark-galeria-tira.wp-block-gallery::-webkit-scrollbar { display: none; }
.stark-galeria-tira.es-arrastrando { cursor: grabbing; }
.stark-galeria-tira.wp-block-gallery.has-nested-images figure.wp-block-image {
	margin: 0;
	position: relative;
	height: clamp(240px, 32vw, 400px);
	/* Todas iguales: tarjeta vertical fija y la foto se recorta dentro. */
	flex: 0 0 clamp(230px, 23vw, 310px);
	width: clamp(230px, 23vw, 310px);
	max-width: none;
	overflow: hidden;
	border: 1px solid #DBD5C9;
	background: #E4E0D6;
	display: block;
}
.stark-galeria-tira.wp-block-gallery.has-nested-images figure.wp-block-image img {
	height: 100%;
	width: 100%;
	max-width: none;
	flex: none;
	display: block;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.stark-galeria-tira.wp-block-gallery.has-nested-images figure.wp-block-image:hover img { transform: scale(1.05); }
.stark-galeria-tira.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: var(--e5) var(--e4) var(--e3);
	background: linear-gradient(to top, rgba(8, 8, 8, .85), transparent);
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lima);
	text-align: left;
}
.stark-galeria-tira.wp-block-gallery.has-nested-images figure.wp-block-image figcaption strong {
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .04em;
	/* Fijo, no var(--hueso): el pie va siempre sobre el gradiente oscuro de
	   la foto, da igual el tema de la seccion. */
	color: #F2EFE9;
}
html:not(.stark-js) .stark-flechas { display: none; }


/* ── para quién: pestañas a la izquierda, panel a la derecha ────────── */

.stark-seccion--publicos { background: var(--negro); }
.stark-publicos.es-selector {
	display: grid;
	grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
	gap: 1px;
	background: var(--borde);
	border: 1px solid var(--borde);
	align-items: stretch;
}
@media (max-width: 900px) { .stark-publicos.es-selector { grid-template-columns: 1fr; } }
.stark-publicos__menu { display: flex; flex-direction: column; background: var(--carbon); border-top: 0; }
.stark-publicos__boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e3);
	text-align: left;
	background: var(--carbon);
	border: 0;
	border-left: 2px solid transparent;
	border-bottom: 1px solid var(--borde);
	padding: var(--e5);
	min-height: 66px;
	cursor: pointer;
	color: var(--gris);
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.stark-publicos__boton::after { content: "→"; font-family: var(--fuente-dato); font-size: var(--t-l); color: transparent; line-height: 1; }
.stark-publicos__boton:hover { color: var(--hueso); }
.stark-publicos__boton[aria-pressed="true"] { background: var(--piedra); border-left-color: var(--lima); color: var(--hueso); }
.stark-publicos__boton[aria-pressed="true"]::after { color: var(--lima); }
.stark-publicos__nombre {
	display: block;
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	letter-spacing: .03em;
	line-height: 1.05;
}
.stark-publicos__boton[aria-pressed="true"] .stark-publicos__nombre { color: var(--lima); }
.stark-publicos__gancho {
	display: block;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gris-2);
}

.stark-publicos > .stark-todo { grid-column: 1 / -1; }
.stark-publicos.es-selector > .stark-publico { display: none; }
.stark-publicos.es-selector > .stark-publico.es-activo {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--carbon);
	gap: 0;
}
/* Con foto, el panel del prototipo: foto a la izquierda, texto a la derecha. */
.stark-publicos.es-selector > .stark-publico.es-activo:has(.stark-publico__foto img) {
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
.stark-publico.es-activo:not(:has(.stark-publico__foto img)) .stark-publico__foto { display: none; }
.stark-publico.es-activo:not(:has(.stark-publico__foto img)) > * { grid-column: 1; }
@media (max-width: 760px) { .stark-publicos.es-selector > .stark-publico.es-activo { grid-template-columns: 1fr; } }
.stark-publico__gancho { display: none; }
.stark-publico__foto { margin: 0; height: 100%; }
.stark-publico__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--piedra);
	background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255, 255, 255, .05) 9px 18px);
	min-height: 260px;
}
.stark-publico > :not(.stark-publico__foto):not(.stark-publico__gancho) { grid-column: 2; }
.stark-publico > *:not(.stark-publico__foto) { padding-inline: var(--e5); }
.stark-publico > *:not(.stark-publico__foto):first-of-type { padding-top: var(--e6); }
.stark-publico { border-left: 1px solid var(--borde); }
.stark-publico h3 {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-xl);
	line-height: .98;
	margin: 0;
	padding-top: var(--e4);
}
.stark-publico__chips { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding-top: var(--e6); align-items: flex-start; align-content: flex-start; }
.stark-publico__nombre { display: none; }
.stark-publico p { font-size: var(--t-m); line-height: 1.6; color: var(--gris); max-width: 56ch; margin: var(--e4) 0 0; }
.stark-lista-check {
	list-style: none;
	margin: var(--e4) 0 0;
	padding-top: var(--e4);
	border-top: 1px solid var(--borde);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.stark-lista-check li {
	position: relative;
	padding-left: 25px;
	font-size: var(--t-s);
	line-height: 1.5;
	color: var(--hueso);
}
.stark-lista-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 13px;
	height: 7px;
	border-left: 2px solid var(--lima);
	border-bottom: 2px solid var(--lima);
	transform: rotate(-45deg);
}
.stark-publico .wp-block-buttons { padding-block: var(--e5) var(--e6); gap: var(--e3); }

/* ── eventos y regala: dos columnas ────────────────── */

.stark-dos-columnas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--e8);
	align-items: center;
}
.stark-seccion--eventos { background: var(--asfalto); border-top: 1px solid var(--borde); }
.stark-eventos__texto { display: flex; flex-direction: column; gap: var(--e5); container-type: inline-size; }
/* El titular de eventos, mas pequeño (Gerard, 2026-09-18: «que quepa todo en
   dos lineas»): 12.4cqi deja una linea de ~20 letras («NUESTRA EXPERIENCIA.»)
   en el ancho de la columna. */
.stark-seccion--eventos .stark-titular-grande { font-size: min(var(--t-3xl), 12.4cqi) !important; }
.stark-eventos__texto p:not(.stark-antetitulo) { max-width: 48ch; font-size: var(--t-m); line-height: 1.6; color: var(--gris); margin: 0; }
.stark-eventos__lista { display: flex; flex-direction: column; border-top: 1px solid var(--borde); }
/* Sin flecha ni realce al pasar el raton: daban a entender que la fila se
   podia pulsar, y los eventos se hablan por WhatsApp (Gerard, 2026-09-19). */
.stark-evento {
	display: flex;
	align-items: center;
	gap: var(--e5);
	padding: var(--e5) var(--e3);
	border-bottom: 1px solid var(--borde);
}
.stark-evento__titulo {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	letter-spacing: .02em;
	line-height: 1.05;
	color: var(--hueso);
	margin: 0 0 4px;
	white-space: nowrap; /* «A medida» no se parte en dos (Gerard). */
}
.stark-evento p { font-size: var(--t-s); color: var(--gris); line-height: 1.5; margin: 0; }

.stark-seccion--regala { position: relative; background: var(--lima); color: var(--negro); overflow: hidden; }
.stark-seccion--regala::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg, transparent 0 110px, rgba(8, 8, 8, .06) 110px 118px);
	pointer-events: none;
}
.stark-seccion--regala > .stark-env { position: relative; }
.stark-seccion--regala h2 { color: var(--negro); }
.stark-regala__texto { display: flex; flex-direction: column; gap: var(--e5); }
.stark-regala__texto p:not(.stark-antetitulo) { max-width: 46ch; font-size: var(--t-l); line-height: 1.5; color: rgba(8, 8, 8, .78); margin: 0; }
.stark-boton-negro .wp-block-button__link {
	background: var(--negro);
	color: var(--lima);
	border: 0;
	border-radius: 0;
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .06em;
	padding: 17px var(--e6);
	min-height: 54px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.stark-boton-negro .wp-block-button__link:hover { color: var(--lima); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(8, 8, 8, .3); }

.stark-regala__tarjeta-caja { display: flex; justify-content: center; }
.stark-tarjeta-regalo {
	position: relative;
	width: min(480px, 100%);
	aspect-ratio: 8 / 5;
	background: #0A0A09;
	border: 1px solid rgba(8, 8, 8, .5);
	box-shadow: 0 34px 70px rgba(8, 8, 8, .38);
	overflow: hidden;
	padding: var(--e5);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transform: rotate(-4deg);
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.stark-tarjeta-regalo:hover { transform: rotate(-1deg) translateY(-8px) scale(1.02); }
.stark-tarjeta-regalo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg, transparent 0 58px, rgba(160, 248, 16, .14) 58px 68px);
	pointer-events: none;
}
.stark-tarjeta-regalo > * { position: relative; margin: 0; }
.stark-tarjeta-regalo__rotulo {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--lima);
	text-align: right;
}
.stark-tarjeta-regalo__titular {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-xl);
	line-height: .95;
	color: var(--hueso);
	max-width: 14ch;
}
.stark-tarjeta-regalo__pie {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris-2);
}

/* ── cómo funciona: cuatro pasos con la línea que crece ────────────── */

.stark-seccion--pasos { background: var(--hueso); color: var(--negro); border-top: 1px solid #DBD5C9; }
.stark-seccion--pasos h2 { color: var(--negro); }
.stark-pasos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--e5);
	counter-reset: stark-paso;
}
.stark-paso { display: flex; flex-direction: column; gap: var(--e4); counter-increment: stark-paso; position: relative; }
.stark-paso::before {
	content: "0" counter(stark-paso);
	flex: none;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	font-size: var(--t-xl);
	line-height: 1;
	color: var(--lima);
}
.stark-paso h3 {
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-l);
	letter-spacing: .03em;
	margin: 0;
	color: var(--negro);
}
.stark-paso p { font-size: var(--t-s); line-height: 1.6; color: #57544D; max-width: 34ch; margin: 0; }

/* ── reseñas y FAQ ────────────────── */

.stark-seccion--resenas { background: var(--carbon); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.stark-seccion--faq { background: var(--negro); }
.stark-faq-home {
	display: grid;
	grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
	gap: var(--e8);
	align-items: start;
}
@media (max-width: 900px) { .stark-faq-home { grid-template-columns: 1fr; gap: var(--e6); } }
.stark-faq-home__lado { display: flex; flex-direction: column; gap: var(--e4); position: sticky; top: 120px; }
@media (max-width: 900px) { .stark-faq-home__lado { position: static; } }
.stark-faq-home__lado p:not(.stark-antetitulo) { font-size: var(--t-m); line-height: 1.6; color: var(--gris); max-width: 42ch; margin: 0; }
/* La foto bajo «Preguntar por WhatsApp» (Gerard, 2026-09-18): llena el hueco
   de la columna fija. A 5:4 para que la columna siga cabiendo en pantalla;
   en movil las columnas se apilan, no hay hueco y se esconde. */
.stark-faq-home__foto { margin: var(--e4) 0 0; }
.stark-faq-home__foto img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 40%; border: 1px solid var(--borde); }
@media (max-width: 900px) { .stark-faq-home__foto { display: none; } }
.stark-enlace-subrayado__a {
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-s);
	letter-spacing: .06em;
	color: var(--hueso);
	border-bottom: 1px solid var(--lima);
	padding-bottom: 6px;
	text-decoration: none;
	align-self: flex-start;
}
.stark-enlace-subrayado__a:hover { color: var(--lima); }
.stark-wa { margin: 0; }


/* ── cinta lima del prototipo 1 ────────────────── */
/* Variante de la misma pieza .stark-ticker: fondo lima, tipografia de titular
   y rombos entre elementos (los pone el JS partiendo el texto; sin JS el
   parrafo con sus puntos medios se lee igual). */

.stark-ticker--lima {
	background: var(--lima);
	border-block: 0;
	padding-block: 13px;
}
.stark-ticker--lima p {
	display: flex;
	align-items: center;
	gap: var(--e5);
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .1em;
	color: var(--lima-tinta);
}
.stark-ticker--lima p::after { content: none; }
.stark-ticker--lima .stark-rombo {
	width: 7px;
	height: 7px;
	background: var(--lima-tinta);
	flex: none;
	transform: rotate(45deg);
}

/* ── FAQ: el tablón invertido (propuesta 1a de Gerard, 2026-09-19) ───── */
/* design/8 Componente FAQ.dc.html, la 1a. Todas las preguntas del sitio
   son core/details (el FAQPage del schema sale de ellas): en la home y en
   el vale van dentro de .stark-faq; en las fichas, sueltas en el
   contenido. Una sola pieza para todas: filas separadas por un filete de
   1px, numeradas; la abierta se vuelve lima, como los botones, con la
   tinta de la lima. La fila toma el color de su fondo (Gerard, segunda
   vuelta del mismo dia): BLANCA en las secciones claras (la home, el vale)
   y NEGRA en las zonas noche (las fichas), por eso va con las variables,
   que cada zona re-ancla. La lima de la fila abierta, igual en las dos.
   La primera pregunta de cada bloque sale abierta: la marca el servidor
   (stark_faq_primera_abierta, en inc/bloques.php).
   El numero y el «+» son pseudoelementos colocados a mano: la pregunta
   sigue siendo texto corrido y aguanta una negrita o un enlace sin
   romper la fila (en una rejilla, cada etiqueta seria una celda).
   stark.js despliega la fila y deja una abierta cada vez; sin el, el
   details nativo abre y cierra igual, de golpe. .es-cerrando es el
   instante en que el JS ya la esta cerrando: pinta la fila como cerrada
   mientras baja la altura. */

.stark-faq,
.wp-block-post-content { counter-reset: stark-faq; }
.stark-faq { display: flex; flex-direction: column; }

.wp-block-details {
	--faq-canto: var(--e5);
	--faq-num: 44px;
	--faq-hueco: var(--e4);
	--faq-sangria: calc(var(--faq-canto) + var(--faq-num) + var(--faq-hueco));
	counter-increment: stark-faq;
	margin: 0;
	background: var(--carbon);
	border: 1px solid var(--borde);
	color: var(--hueso);
}
@media (max-width: 600px) {
	.wp-block-details { --faq-canto: var(--e4); --faq-num: 36px; --faq-hueco: var(--e3); }
}
.wp-block-details + .wp-block-details { margin-top: -1px; }

.wp-block-details > summary {
	position: relative;
	display: block;
	padding: 21px calc(var(--faq-canto) + 14px + var(--faq-hueco)) 21px var(--faq-sangria);
	cursor: pointer;
	list-style: none;
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: var(--t-l);
	line-height: 1.05;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--hueso);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
/* El numero de la fila: 01, 02… Lo cuenta el CSS. Su gris (el de la 1a)
   se lee igual sobre la fila blanca que sobre la negra. */
.wp-block-details > summary::before {
	content: counter(stark-faq, decimal-leading-zero);
	content: counter(stark-faq, decimal-leading-zero) / "";
	position: absolute;
	left: var(--faq-canto);
	top: 50%;
	width: var(--faq-num);
	transform: translateY(-50%);
	font-weight: 800;
	font-style: italic;
	font-size: 32px;
	line-height: .9;
	letter-spacing: 0;
	color: #6E6A61;
}
.wp-block-details > summary::after {
	content: "+";
	content: "+" / "";
	position: absolute;
	right: var(--faq-canto);
	top: 50%;
	margin-top: -13px;
	font-weight: 500;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 0;
}
@media (max-width: 600px) {
	.wp-block-details > summary { padding-block: 18px; }
	.wp-block-details > summary::before { font-size: 28px; }
}
/* El acento de texto: oliva sobre claro, lima en las zonas noche (que
   definen --faq-acento; ver abajo). La lima como texto sobre blanco no se
   leeria. */
.wp-block-details:not([open]) > summary:hover { color: var(--faq-acento, var(--oliva)); }
.wp-block-details > summary:focus-visible { outline: 2px solid var(--faq-acento, var(--oliva)); outline-offset: -2px; }
.stark-zona-noche,
.stark-fondo--carbon { --faq-acento: var(--lima); }

/* La respuesta, alineada con la pregunta (no con el numero). */
details.wp-block-details > :not(summary) {
	margin: 0 var(--faq-canto) 0 var(--faq-sangria);
	max-width: 58ch;
	font-size: var(--t-m);
	line-height: 1.6;
	color: var(--gris);
	text-wrap: pretty;
}
details.wp-block-details > summary + *,
details.wp-block-details > :not(summary) + :not(summary) { margin-top: var(--e3); }
details.wp-block-details > :not(summary):last-child { margin-bottom: var(--e5); }

/* Abierta: la fila entera en lima, texto y numero en su tinta, el «+»
   girado en aspa y un filete fino entre la pregunta y la respuesta. */
.wp-block-details[open]:not(.es-cerrando) { background: var(--lima); }
.wp-block-details[open]:not(.es-cerrando) > summary {
	color: var(--lima-tinta);
	background: linear-gradient(rgba(11, 19, 0, .28), rgba(11, 19, 0, .28)) no-repeat var(--faq-sangria) 100% / calc(100% - var(--faq-sangria) - var(--faq-canto)) 1px;
}
.wp-block-details[open]:not(.es-cerrando) > summary::before { color: var(--lima-tinta); }
.wp-block-details[open]:not(.es-cerrando) > summary::after { transform: rotate(135deg); }
.wp-block-details[open]:not(.es-cerrando) > summary:focus-visible { outline-color: var(--lima-tinta); }
details.wp-block-details[open]:not(.es-cerrando) > :not(summary) { color: var(--lima-tinta); }
.wp-block-details a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
	.wp-block-details { transition: background-color .28s cubic-bezier(.2, .7, .2, 1); }
	.wp-block-details > summary,
	.wp-block-details > summary::before { transition: color .28s ease; }
	.wp-block-details > summary::after { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
}

/* ── reseñas: la nota media y los tres huecos dibujados ────────────── */
/* Mobiliario del tema mientras no esta conectado el plugin: se ve que son
   huecos a proposito (borde discontinuo, barras vacias). Se borran al pegar
   el shortcode del plugin. */

.stark-nota-media {
	display: flex;
	align-items: center;
	gap: var(--e4);
	border: 1px solid var(--borde);
	padding: var(--e4) var(--e5);
	background: var(--asfalto);
}
.stark-nota-media__num {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-2xl);
	color: var(--lima);
	line-height: 1;
}
.stark-nota-media__texto { display: flex; flex-direction: column; gap: 3px; }
.stark-nota-media__texto small { font-size: var(--t-s); color: var(--gris); }

.stark-resenas-huecos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--e4);
}
.stark-resena-hueco {
	border: 1px dashed var(--borde);
	background: var(--negro);
	padding: var(--e5);
	display: flex;
	flex-direction: column;
	gap: var(--e4);
	min-height: 220px;
}
.stark-resena-hueco__cabeza { display: flex; align-items: center; gap: var(--e3); }
.stark-resena-hueco__cara {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--piedra);
	border: 1px dashed var(--gris-2);
	flex: none;
}
.stark-resena-hueco__lineas { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.stark-resena-hueco__barra { height: 9px; background: var(--piedra); display: block; }
.stark-resena-hueco__cabeza .stark-resena-hueco__barra:first-child { height: 11px; }
.stark-resena-hueco__estrellas { display: flex; gap: 4px; color: var(--gris-2); }
.stark-resena-hueco__cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.stark-resena-hueco__pie {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gris-2);
	border-top: 1px solid var(--borde);
	padding-top: var(--e3);
	margin: 0;
}

/* ── retoques al prototipo: brillo de la tarjeta regalo y linea de pasos ── */

.stark-tarjeta-regalo__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); }
.stark-tarjeta-regalo__marca {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .02em;
	color: var(--hueso);
	margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.stark-tarjeta-regalo::after {
		content: "";
		position: absolute;
		top: -50%;
		left: 0;
		width: 34%;
		height: 200%;
		background: linear-gradient(90deg, transparent, rgba(242, 239, 233, .09), transparent);
		animation: stark-brillo 4.2s ease-in-out infinite;
		pointer-events: none;
	}
	@keyframes stark-brillo {
		0% { transform: translateX(-160%) rotate(10deg); }
		60%, 100% { transform: translateX(260%) rotate(10deg); }
	}
}


/* ── chips del panel de publicos: el primero en lima ────────────── */

.stark-publico__chips span {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris-2);
	border: 1px solid var(--borde);
	padding: 5px 9px;
}
.stark-publico__chips span.es-primero {
	background: var(--lima);
	border-color: var(--lima);
	color: var(--lima-tinta);
}


/* ── el plugin de reseñas, integrado en la seccion carbon ────────────── */
/* El plugin trae fondo claro por defecto: aqui se le quita la caja para que
   las tarjetas floten sobre el carbon como el resto de la seccion. */

.stark-seccion--resenas .grw-row { background: transparent; }
.stark-seccion--resenas .wp-block-shortcode { margin: 0; }


/* ── la landing del vale regalo (fase 8) ─────────────────────────────── */
/* El configurador reutiliza piezas que ya existen: el selector de rutas de
   «Monta tu salida» (.stark-rr__ruta), el contador (.stark-contador), la
   tarjeta noche (.stark-reserva__tarjeta) y la barra fija (.stark-barra). */

/* Las cuatro claves de la portada: celdas con filete izquierdo (C2). */
.stark-claves {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--e4) var(--e6);
	max-width: 900px;
}
.stark-claves > .wp-block-group {
	border-left: 1px solid rgba(242, 239, 233, .35);
	padding-left: var(--e4);
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.stark-claves p { margin: 0; }
.stark-claves p.stark-todo { font-size: var(--t-xs); }
.stark-claves p:first-child:not(.stark-todo) {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	line-height: 1.05;
	color: var(--lima);
}
.stark-claves p:last-child:not(:first-child):not(.stark-todo) {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #B8B4AC;
}

/* Las dos columnas del configurador; en angosto, una debajo de otra. */
.stark-vale__columnas {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
	gap: var(--e6);
	align-items: start;
}
@media (max-width: 1149px) { .stark-vale__columnas { grid-template-columns: 1fr; } }

.stark-vale__pasos { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }

.stark-vale__panel { border: 1px solid var(--borde); background: var(--carbon); }
.stark-vale__panel-cabeza {
	padding: var(--e3) var(--e4);
	border-bottom: 1px solid var(--borde);
	display: flex;
	align-items: center;
	gap: var(--e3);
}
.stark-vale__num {
	width: 24px;
	height: 24px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lima);
	color: var(--lima-tinta);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	font-size: var(--t-s);
}
.stark-vale__panel-titulo {
	font-size: var(--t-m);
	letter-spacing: .03em;
	margin: 0;
}
.stark-vale__panel-cuerpo { padding: var(--e4); display: flex; flex-direction: column; gap: var(--e3); }
.stark-vale__campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
@media (max-width: 599px) { .stark-vale__campos { grid-template-columns: 1fr; } }
.stark-vale__campo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.stark-vale__campo--ancho { grid-column: 1 / -1; }
.stark-vale__campo .stark-reserva__rotulo { display: flex; justify-content: space-between; gap: var(--e3); }
.stark-vale__contador { letter-spacing: .08em; }
.stark-vale__campo input,
.stark-vale__campo textarea {
	background: var(--negro);
	border: 1px solid var(--borde);
	color: var(--hueso);
	padding: 0 var(--e4);
	height: 46px;
	width: 100%;
	font-family: inherit;
	font-size: var(--t-m);
}
.stark-vale__campo textarea {
	height: auto;
	padding: var(--e3) var(--e4);
	resize: vertical;
	line-height: 1.5;
}
.stark-vale__campo input:focus-visible,
.stark-vale__campo textarea:focus-visible { outline: 2px solid var(--oliva); outline-offset: 2px; }
.stark-vale__campo ::placeholder { color: var(--gris-2); opacity: 1; }

/* La columna pegajosa de la vista previa, como el aparte de la ficha. */
.stark-vale__aparte {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: var(--e3);
	min-width: 0;
}
@media (max-width: 1149px) { .stark-vale__aparte { position: static; } }

/* La tarjeta del vale: la caja noche de la reserva con foto encima. */
.stark-vale__tarjeta-foto {
	position: relative;
	aspect-ratio: 2.2 / 1;
	overflow: hidden;
	background: var(--piedra);
}
.stark-vale__tarjeta-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .85;
}
/* El vale sin ruta esconde la foto con [hidden], y el display de arriba le
   ganaba: seguía la de la ruta anterior (2026-09-19). Como en el PDF, sin
   foto queda el fondo con su degradado. */
.stark-vale__tarjeta-foto img[hidden] { display: none; }
.stark-vale__tarjeta-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 8, 8, .95) 0%, rgba(8, 8, 8, .25) 55%, rgba(8, 8, 8, .5) 100%);
}
.stark-vale__tarjeta-marca {
	position: absolute;
	top: var(--e4);
	left: var(--e4);
	z-index: 2;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #F2EFE9;
}
.stark-vale__tarjeta-cinta {
	position: absolute;
	left: var(--e4);
	right: var(--e4);
	bottom: var(--e4);
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--e3);
}
.stark-vale__tarjeta-titulo {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: .95;
	color: #F2EFE9;
	text-shadow: 0 2px 18px rgba(8, 8, 8, .8);
}
/* Sin importe en la tarjeta (Gerard, 2026-09-19): el vale de una ruta es un
   regalo y no lleva precio; el total se queda en el resumen de debajo. */
.stark-vale__tarjeta-cuerpo { padding: var(--e4); display: flex; flex-direction: column; gap: var(--e3); }
.stark-vale__tarjeta-nombres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.stark-vale__tarjeta-par { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stark-vale__tarjeta-nombre {
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-m);
	line-height: 1.1;
	overflow-wrap: anywhere;
}
.stark-vale__tarjeta-dedicatoria {
	font-size: var(--t-s);
	line-height: 1.6;
	color: var(--gris);
	border-left: 2px solid var(--lima);
	padding-left: var(--e4);
	min-height: 44px;
	margin: 0;
	text-wrap: pretty;
}
.stark-vale__tarjeta-pie {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gris-2);
	border-top: 1px dashed var(--borde);
	padding-top: var(--e3);
	margin: 0;
}

/* El resumen bajo la tarjeta: total, boton, eco del mensaje y garantias. */
.stark-vale__resumen {
	border: 1px solid var(--borde);
	background: var(--carbon);
	padding: var(--e4);
	display: flex;
	flex-direction: column;
	gap: var(--e3);
}
.stark-vale__total-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.stark-vale__resumen .stark-reserva__cifra { color: var(--lima); }
.stark-vale__cta { justify-content: center; }
.stark-vale__garantias { display: flex; flex-direction: column; gap: var(--e2); margin: 0; }
.stark-vale__garantias li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: var(--t-s);
	line-height: 1.5;
	color: var(--gris);
}
.stark-vale__garantias .stark-icono { flex: none; margin-top: 4px; color: var(--lima); }

/* Sin JavaScript el configurador no compone nada: se esconde entero y queda
   la via directa por WhatsApp. Con JS es al reves. */
html:not(.stark-js) .stark-vale__columnas { display: none; }
html.stark-js .stark-vale__nojs { display: none; }
.stark-vale__nojs { display: flex; flex-direction: column; gap: var(--e4); align-items: flex-start; }
.stark-vale__nojs p { margin: 0; max-width: 54ch; color: var(--gris); }

/* La casilla de la equipacion (2026-09-19): opcional, suma al total. */
.stark-vale__opcion {
	display: flex;
	align-items: flex-start;
	gap: var(--e3);
	padding: var(--e3) var(--e4);
	border: 1px solid var(--borde);
	background: var(--negro);
	cursor: pointer;
}
/* Marcada, como la ruta elegida: fila noche y acentos lima (2026-08-24). */
.stark-vale__opcion:has(input:checked) { background: #111110; border-color: var(--lima); }
.stark-vale__opcion:has(input:checked) .stark-vale__opcion-titulo { color: var(--lima); }
.stark-vale__opcion:has(input:checked) .stark-vale__opcion-detalle { color: #A8A49C; }
.stark-vale__opcion input {
	appearance: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	border: 1px solid var(--gris-2);
	background: transparent;
	display: grid;
	place-content: center;
	cursor: pointer;
}
.stark-vale__opcion input::after {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--lima);
	transform: scale(0);
	transition: transform .15s ease;
}
.stark-vale__opcion input:checked { border-color: var(--lima); }
.stark-vale__opcion input:checked::after { transform: scale(1); }
.stark-vale__opcion input:focus-visible { outline: 2px solid var(--lima); outline-offset: 2px; }
.stark-vale__opcion-texto { display: flex; flex-direction: column; gap: 2px; }
.stark-vale__opcion-titulo {
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: var(--t-s);
	line-height: 1.2;
	color: var(--hueso);
}
.stark-vale__opcion-detalle { font-size: var(--t-s); color: var(--gris); }

/* Las alturas a juego (Gerard, 2026-09-19): el paso 1 mide lo que la vista
   previa del vale y el paso 2 lo que el resumen. Las dos columnas comparten
   filas (subgrid): el rotulo «Asi queda el vale», la tarjeta y el resumen.
   Con las columnas iguales, la vista previa ya no necesita ser pegajosa. */
@media (min-width: 1150px) {
	.stark-vale__columnas {
		grid-template-rows: auto auto auto;
		row-gap: var(--e3);
		align-items: stretch;
	}
	.stark-vale__pasos,
	.stark-vale__aparte {
		grid-row: 1 / span 3;
		display: grid;
		grid-template-rows: subgrid;
		row-gap: normal;
	}
	.stark-vale__pasos > .stark-vale__panel:first-child { grid-row: 2; }
	.stark-vale__pasos > .stark-vale__panel:last-child { grid-row: 3; }
	.stark-vale__aparte { position: static; }
}

/* «Sin letra pequeña»: celdas con filete izquierdo, nada de mosaicos. */
.stark-condiciones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--e6) var(--e6);
}
.stark-condiciones > .wp-block-group {
	border-left: 1px solid var(--borde);
	padding-left: var(--e4);
	display: flex;
	flex-direction: column;
	gap: var(--e2);
}
.stark-condiciones p { margin: 0; }
.stark-condiciones .stark-condicion__dato {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-xl);
	line-height: 1;
	color: var(--lima);
}
.stark-condiciones h3 {
	font-size: var(--t-m);
	letter-spacing: .04em;
	margin: 0;
}
.stark-condiciones p:last-child { font-size: var(--t-s); line-height: 1.55; color: var(--gris); text-wrap: pretty; }

/* «Para qué ocasión»: cuatro figuras con foto, titulo y texto. */
.stark-ocasiones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--e4);
}
.stark-ocasiones > .wp-block-group { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.stark-ocasiones figure { margin: 0; }
.stark-ocasiones .wp-block-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--borde);
	background: var(--piedra);
}
.stark-ocasiones .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stark-ocasiones h3 { font-size: var(--t-l); letter-spacing: .03em; margin: 0; }
.stark-ocasiones p { font-size: var(--t-s); line-height: 1.55; color: var(--gris); margin: 0; text-wrap: pretty; }

/* ═══════════════  TEMA CLARO: consolidado (2026-08-22)  ═══════════════ */
/* La paleta clara vive en el contrato (tokens.json → tokens.css): negro es el
   fondo claro y hueso es la tinta. Este bloque guarda lo que el contrato no
   puede decir:
   - Las secciones que viven sobre foto o fundido re-anclan la ESCALA NOCHE
     (los valores del prototipo oscuro) y declaran su color, porque re-anclar
     variables no re-evalua el color heredado del body.
   - La lima sigue siendo lima donde es FONDO; donde era texto sobre claro
     pasa a oliva (var(--oliva)), como las secciones claras del prototipo. */

/* Las secciones que se quedan oscuras: paleta original re-anclada. */
.stark-hero,
.stark-seccion-reserva,
.stark-seccion--moto,
.stark-cierre,
.stark-tarjeta-regalo {
	/* Re-anclar variables no re-evalua el color heredado del body: estas
	   secciones declaran el suyo o heredan tinta sobre negro (invisible). */
	color: var(--hueso);
	--negro: #080808;
	--carbon: #111110;
	--asfalto: #1A1917;
	--piedra: #2A2723;
	--borde: #33302B;
	--hueso: #F2EFE9;
	--gris: #A8A49C;
	--gris-2: #8C8880;
}

/* Regala: fondo lima con texto negro de verdad (no blanco). */
.stark-seccion--regala { --negro: #080808; }

/* Cabecera, menu movil, barra inferior y pie: NEGRO definitivo (orden de
   Gerard, 2026-08-24). Solo el cromo: los fondos de las paginas no se
   tocan. La escala noche de estos cuatro se re-ancla mas abajo. */
.stark-cabecera-sitio { background: rgba(8, 8, 8, .92); border-bottom-color: #33302B; }
/* Logueado, WordPress empuja la pagina con su barra de administracion: la
   cabecera fija baja lo mismo o el hueco asoma como franja crema. */
.admin-bar .stark-cabecera-sitio { top: var(--wp-admin--admin-bar--height, 32px); }
.stark-despliegue--menu .stark-despliegue__panel { background: #080808; }
.stark-barra-movil { background: rgba(8, 8, 8, .97); }

/* Lima como texto sobre claro → oliva. En las secciones oscuras sigue lima. */
.stark-antetitulo { color: var(--oliva); }
.stark-antetitulo.stark-antetitulo--oliva { color: var(--oliva); }
.stark-hero .stark-antetitulo,
.stark-seccion-reserva .stark-antetitulo,
.stark-cierre .stark-antetitulo { color: var(--lima); }
.stark-seccion--moto .stark-antetitulo { color: var(--lima); }

.stark-menu a:hover,
.stark-menu a[aria-current],
.stark-menu a[data-activo],
.stark-menu a[aria-current] { color: var(--lima); }
.stark-menu a::after { background: var(--lima); }

.stark-tarjeta__etiqueta { color: var(--oliva); }
.stark-tarjeta__flecha { color: var(--oliva); }
.stark-tarjeta__incluye .stark-icono { color: var(--oliva); }
.stark-lista-check li::before { border-color: var(--oliva); }
.stark-dato-valor--lima { color: var(--oliva); }
.stark-pie__telefono,
.stark-pie__instagram { color: var(--lima); }
.stark-enlace-subrayado a { border-bottom-color: var(--oliva); }
.stark-enlace-subrayado a:hover,
.stark-enlace-subrayado__a:hover { color: var(--oliva); }
.stark-enlace-subrayado__a { border-bottom-color: var(--oliva); }
.stark-publicos__boton[aria-pressed="true"] .stark-publicos__nombre { color: var(--oliva); }
.stark-publicos__boton[aria-pressed="true"] { border-left-color: var(--oliva); }
.stark-publicos__boton[aria-pressed="true"]::after { color: var(--oliva); }

/* La galeria y los pasos, que eran las secciones claras, ahora son las
   oscuras: sus acentos fijos se adaptan. */
.stark-seccion--galeria { border-top: 1px solid #2A2723; }
.stark-seccion--galeria .stark-cabecera-galeria__lado p { color: var(--gris); }
.stark-flecha { background: #FFFFFF; border-color: #C9C3B5; color: #080808; }
.stark-seccion--pasos { border-top-color: #2A2723; }
.stark-seccion--pasos .stark-paso p { color: var(--gris); }
.stark-pasos__cta { margin-top: var(--e7); }
.stark-pasos__cta .wp-block-button__link {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .06em;
	border-radius: 0;
	padding: 17px var(--e6);
	min-height: 54px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* El velo del hero abajo funde a su negro re-anclado, no al blanco global. */
.stark-hero::after {
	background:
		linear-gradient(100deg, rgba(8, 8, 8, .82) 0%, rgba(8, 8, 8, .36) 36%, rgba(8, 8, 8, 0) 64%),
		linear-gradient(to bottom, rgba(8, 8, 8, .6) 0%, rgba(8, 8, 8, .14) 24%, rgba(8, 8, 8, .12) 42%, rgba(8, 8, 8, .74) 70%, rgba(8, 8, 8, .97) 90%, #080808 100%);
}

/* Chips y elementos con lima de fondo no cambian: lima con tinta encima. */

/* La moto es seccion oscura: su dato destacado vuelve a lima vivo. */
.stark-seccion--moto .stark-dato-valor--lima { color: var(--lima); }

/* Eventos: sin verde — todo en tinta (pedido 2026-08-22). */
.stark-seccion--eventos .has-lima-color { color: var(--hueso) !important; }
.stark-seccion--eventos .stark-antetitulo { color: var(--hueso); }

/* La lista de eventos, un punto mas grande (pedido: «un poco, no mucho»). */
.stark-evento { padding-block: var(--e6); }
.stark-evento p.stark-evento__titulo { font-size: calc(var(--t-l) * 1.12); }
.stark-evento p:not(.stark-evento__titulo) { font-size: var(--t-m); }

/* Chips de tarjeta: en claro, sin caja oscura — filete y tinta, como el resto. */
.stark-tarjeta__chip {
	background: transparent;
	border-color: #C9C3B5;
	color: var(--gris);
}

/* ...pero los chips que van SOBRE la foto llevan cromo fijo, ajeno al tema
   (la foto es oscura), como la insignia de las fichas grandes. En claro se
   veian «de color crema» e ilegibles: aviso de Gerard en la banda de
   hermanas, 2026-08-24. */
.stark-tarjeta__foto .stark-tarjeta__chip {
	background: rgba(8, 8, 8, .82);
	border-color: #33302B;
	color: #F2EFE9;
}

/* La galeria, en blanco (pedido por Gerard: era la seccion clara del oscuro
   y al invertir quedo negra; la quiere blanca). */
.stark-seccion--galeria {
	background: #FFFFFF;
	color: #161310;
	border-top: 0;
}
.stark-seccion--galeria h2 { color: #161310; }
.stark-seccion--galeria .stark-cabecera-galeria__lado p { color: #57544D; }
.stark-galeria-tira.wp-block-gallery.has-nested-images figure.wp-block-image { border-color: #DBD5C9; background: #E4E0D6; }

/* «Para todos los publicos», en negro (pedido por Gerard): paleta oscura
   re-anclada y sus acentos vuelven a lima. */
.stark-seccion--publicos {
	--negro: #080808;
	--carbon: #111110;
	--asfalto: #1A1917;
	--piedra: #2A2723;
	--borde: #33302B;
	--hueso: #F2EFE9;
	--gris: #A8A49C;
	--gris-2: #8C8880;
	background: var(--negro);
}
.stark-seccion--publicos .stark-antetitulo { color: var(--lima); }
.stark-seccion--publicos .stark-publicos__boton[aria-pressed="true"] { border-left-color: var(--lima); }
.stark-seccion--publicos .stark-publicos__boton[aria-pressed="true"]::after { color: var(--lima); }
.stark-seccion--publicos .stark-publicos__boton[aria-pressed="true"] .stark-publicos__nombre { color: var(--lima); }
.stark-seccion--publicos .stark-lista-check li::before { border-color: var(--lima); }
.stark-seccion--publicos .stark-cabecera-rutas .wp-block-button__link { border-color: var(--borde); color: var(--hueso); }
.stark-seccion--publicos .stark-cabecera-rutas .wp-block-button__link:hover { border-color: var(--lima); color: var(--lima); }

/* ── coherencia del resto de paginas con el tema claro (2026-08-22) ── */

/* La ficha de experiencia: su hero vive sobre foto con velo y la barra de
   reserva fija es negra: escala noche re-anclada, como el hero de la home. */
.stark-hero-exp,
.stark-portada,
.stark-barra {
	color: #F2EFE9;
	--negro: #080808;
	--carbon: #111110;
	--asfalto: #1A1917;
	--piedra: #2A2723;
	--borde: #33302B;
	--hueso: #F2EFE9;
	--gris: #A8A49C;
	--gris-2: #8C8880;
}

/* Lima como texto sobre claro → oliva, tambien en la ficha. */
.stark-panel-dia__hora { color: var(--oliva); }

@media (max-width: 940px) {
	/* FLEX y no rejilla: en una rejilla de una columna el panel es una fila
	   de su propia altura y el sticky no tiene recorrido. Como hijo de un
	   contenedor flex, el sticky viaja por todo el bloque del recorrido:
	   la foto queda clavada bajo la cabecera y las paradas pasan por debajo
	   mientras el JS la va cambiando. */
	.stark-recorrido { display: flex; flex-direction: column; }
	.stark-panel-dia {
		order: -1;
		position: sticky;
		top: 64px;
		z-index: 30;
		align-self: stretch;
	}
	.stark-panel-dia__pie { display: none; }
}

.stark-incluye__rotulo { color: var(--oliva); }
.stark-puedo__nivel { color: var(--oliva); }
.stark-reserva__cifra { color: var(--oliva); }
.stark-enlace-flecha { color: var(--oliva); }

/* Catalogo: el cromo de la foto (insignia y precio) va sobre negro o sobre
   el gradiente: colores fijos, ajenos al tema de la seccion. */
.stark-ficha-ruta__insignia { background: #080808; color: var(--lima); }
.stark-ficha-ruta__pie { color: #F2EFE9; }
.stark-ficha-ruta__precio { color: var(--lima); }

/* La cinta lima de la home es LA cinta: el estilo base vale para todas
   (la del catalogo incluida), sin tocar su contenido. */
.stark-ticker {
	background: var(--lima);
	border-block: 0;
	padding-block: 13px;
}
.stark-ticker p {
	display: flex;
	align-items: center;
	gap: var(--e5);
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .1em;
	color: var(--lima-tinta);
}
.stark-ticker p::after { content: none; }
.stark-ticker .stark-rombo {
	width: 7px;
	height: 7px;
	background: var(--lima-tinta);
	flex: none;
	transform: rotate(45deg);
}

/* El widget de reserva fuera de la seccion oscura (pagina /reservar/):
   la ruta elegida se marca en oliva; dentro de la seccion noche, en lima. */
.stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-nombre,
.stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-precio { color: var(--oliva); }
.stark-rr__ruta[aria-pressed="true"] .stark-rr__aro { border-color: var(--oliva); }
.stark-rr__ruta[aria-pressed="true"] .stark-rr__aro::after { background: var(--oliva); }
.stark-rr__ruta[aria-pressed="true"] { border-left-color: var(--oliva); }
.stark-seccion-reserva .stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-nombre,
.stark-seccion-reserva .stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-precio { color: var(--lima); }
.stark-seccion-reserva .stark-rr__ruta[aria-pressed="true"] .stark-rr__aro { border-color: var(--lima); }
.stark-seccion-reserva .stark-rr__ruta[aria-pressed="true"] .stark-rr__aro::after { background: var(--lima); }
.stark-seccion-reserva .stark-rr__ruta[aria-pressed="true"] { border-left-color: var(--lima); }

/* ── el ritmo de la home, en el resto de paginas (2026-08-22) ────────── */
/* «Una cosa es añadir el blanco, otra que todo sea blanco» (Gerard). La home
   alterna negro / foto / lima / claro; la ficha y el catalogo recuperan esa
   alternancia. Secciones que pasan a NOCHE, ademas de las de foto: */

.stark-fondo--carbon,
.stark-reserva__tarjeta,
.stark-vale__resumen,
.stark-cabecera-sitio,
.stark-despliegue--menu .stark-despliegue__panel,
.stark-barra-movil,
.stark-pie,
.stark-seccion-reserva-pagina {
	color: #F2EFE9;
	--negro: #080808;
	--carbon: #111110;
	--asfalto: #1A1917;
	--piedra: #2A2723;
	--borde: #33302B;
	--hueso: #F2EFE9;
	--gris: #A8A49C;
	--gris-2: #8C8880;
}

/* La banda carbon recupera su significado: banda NOCHE a todo lo ancho,
   titular incluido. Nada de islas negras dentro de una banda clara. */
.stark-fondo--carbon { background: var(--carbon); }
.stark-fondo--carbon .stark-antetitulo { color: var(--lima); }

/* La tarjeta de reserva de la ficha: caja noche, como el panel del
   calendario de la home. Sus limas vuelven a ser lima. */
.stark-reserva__tarjeta .stark-reserva__cifra { color: var(--lima); }
.stark-fondo--carbon .stark-comparativa__fila { color: var(--lima); }

/* La pagina /reservar/: la seccion entera en noche, como la de la home. */
.stark-seccion-reserva-pagina { background: var(--carbon); }
.stark-seccion-reserva-pagina .stark-antetitulo { color: var(--lima); }
.stark-seccion-reserva-pagina .stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-nombre,
.stark-seccion-reserva-pagina .stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-precio { color: var(--lima); }
.stark-seccion-reserva-pagina .stark-rr__ruta[aria-pressed="true"] .stark-rr__aro { border-color: var(--lima); }
.stark-seccion-reserva-pagina .stark-rr__ruta[aria-pressed="true"] .stark-rr__aro::after { background: var(--lima); }
.stark-seccion-reserva-pagina .stark-rr__ruta[aria-pressed="true"] { border-left-color: var(--lima); }

/* ── La ficha según Gerard (2026-08-24) ─────────────────────────────── */
/* Su esquema, literal: del «El día, hora a hora» hasta «Nivel y requisitos»
   todo en NEGRO (la rejilla entera, tarjeta de reserva incluida, a sangre);
   «Más rutas» en banda CREMA; la Stark ya iba en negro; lo demás, como
   estaba. La zona re-ancla la escala noche, igual que las bandas carbon. */

.stark-zona-noche {
	color: #F2EFE9;
	--negro: #080808;
	--carbon: #111110;
	--asfalto: #1A1917;
	--piedra: #2A2723;
	--borde: #33302B;
	--hueso: #F2EFE9;
	--gris: #A8A49C;
	--gris-2: #8C8880;
	background: var(--negro);
}

/* Dentro de la zona noche los acentos vuelven a ser lima, no oliva. */
.stark-zona-noche .stark-antetitulo { color: var(--lima); }
.stark-zona-noche .stark-panel-dia__hora { color: var(--lima); }
.stark-zona-noche .stark-incluye__rotulo { color: var(--lima); }
.stark-zona-noche .stark-puedo__nivel { color: var(--lima); }
.stark-zona-noche .stark-enlace-flecha { color: var(--lima); }
.stark-zona-noche .stark-lista-check li::before { border-color: var(--lima); }
.stark-zona-noche .stark-enlace-subrayado a,
.stark-zona-noche .stark-enlace-subrayado__a { border-bottom-color: var(--lima); }
.stark-zona-noche .stark-enlace-subrayado__a:hover { color: var(--lima); }

/* «Más rutas»: banda crema propia entre la zona noche y la moto. Sale de la
   columna porque dentro de una columna no se puede cambiar de banda. Sin
   hermanas, el bloque no imprime nada y la banda entera desaparece. */
.stark-seccion--hermanas { padding-block: var(--seccion); }
.stark-seccion--hermanas:not(:has(#hermanas)) { display: none; }

/* ═══════════  FIN DEL TEMA CLARO consolidado y coherencia  ═══════════ */

/* ── el vale: la ruta elegida y el total, con la lima de verdad ──────── */
/* Gerard (2026-08-24): el oliva del tema claro no es «el verde adecuado».
   La fila elegida pasa a noche y sus acentos a lima; el total vive en la
   caja noche del resumen (re-anclada arriba), tambien en lima. */
.stark-vale__panel .stark-rr__ruta[aria-pressed="true"] {
	background: #111110;
	border-left-color: var(--lima);
}
.stark-vale__panel .stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-nombre,
.stark-vale__panel .stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-precio { color: var(--lima); }
.stark-vale__panel .stark-rr__ruta[aria-pressed="true"] .stark-rr__ruta-meta { color: #A8A49C; }
.stark-vale__panel .stark-rr__ruta[aria-pressed="true"] .stark-rr__aro { border-color: var(--lima); }
.stark-vale__panel .stark-rr__ruta[aria-pressed="true"] .stark-rr__aro::after { background: var(--lima); }

/* ── el logo grande del hero de la home (petición de Juanjo) ─────────── */
/* Es un bloque de imagen normal de la Página: se cambia con «Reemplazar».
   En angosto desaparece para no pisar el titular. */
.stark-hero__logo {
	/* En el flujo de la columna del hero, no absoluto: el interior lleva el
	   scrub (transform) y ancla abajo, asi que un absoluto acababa pisando
	   el titular segun el ancho. Con order y margen, el sitio queda
	   RESERVADO y no puede pisar nada. */
	order: -1;
	margin: 0 calc(var(--canal) * 2) calc(-1 * var(--e5)) auto;
	width: clamp(180px, 19vw, 290px);
	pointer-events: none;
	filter: drop-shadow(0 10px 40px rgba(8, 8, 8, .45));
}
/* En pantallas anchas el logo va AL LADO del texto, centrado en vertical:
   no suma altura y el hero cabe en una vista (pedido de Gerard). El
   absoluto aqui es seguro: se ancla al interior (que lleva el transform
   del scrub) y a estos anchos el titular no llega a su columna. */
@media (min-width: 1280px) {
	.stark-hero__logo {
		position: absolute;
		top: 50%;
		right: var(--e6);
		transform: translateY(-50%);
		margin: 0;
		width: clamp(220px, 22vw, 340px);
	}
}
.stark-hero__logo img { width: 100%; height: auto; display: block; }
@media (max-width: 1023px) { .stark-hero__logo { display: none; } }

/* ── la tarjeta regalo de la home es un enlace entero ────────────────── */
.stark-tarjeta-regalo { position: relative; }
/* static a la fuerza: otra regla da position relative a los parrafos de la
   tarjeta y el enlace se anclaba a un parrafo de altura cero. */
.stark-enlace-tarjeta { margin: 0; position: static !important; }
.stark-enlace-tarjeta a {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	text-indent: -999em;
}

/* ═══════════════  FASE 9: Nuestras motos y Sobre nosotros  ═══════════════ */
/* Dos landings nuevas como Paginas. Reutilizan el vocabulario que ya existe
   (hero cover, claves, dc, datos C2, linea de tiempo, banda a sangre, tiras
   con flechas y arrastre); aqui viven solo las piezas que faltaban. */

/* ── el hero con la caja del prototipo 5: texto sobre panel translucido ── */
.stark-hero__texto--caja {
	background: rgba(8, 8, 8, .72);
	backdrop-filter: blur(8px);
	border: 1px solid var(--borde);
	border-left: 2px solid var(--lima);
	padding: var(--e6);
	max-width: 640px;
	text-shadow: none;
}

/* Las claves del hero de motos: la misma pieza del vale, sin retoques. */

/* ── las cifras de la Varg (banda crema bajo el hero) ─────────────────── */
.stark-seccion--cifras { border-bottom: 1px solid #DBD5C9; padding-block: var(--e8); }
.stark-cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--e6) var(--e5);
}
.stark-cifras > .wp-block-group {
	border-left: 1px solid #DBD5C9;
	padding-left: var(--e4);
	display: flex;
	flex-direction: column;
	gap: var(--e2);
}
.stark-cifras p { margin: 0; }
.stark-cifra__valor {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: clamp(38px, 4.4vw, 66px);
	line-height: .82;
	letter-spacing: -.02em;
	text-transform: uppercase;
}
.stark-cifra__valor--acento { color: var(--oliva); }
.stark-cifra__clave {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-2);
	line-height: 1.4;
}

/* ── por que esta moto: banda negra con la foto y las seis piezas ─────── */
.stark-seccion--varg .stark-varg__intro { align-items: start; margin-bottom: var(--e7); }
.stark-seccion--varg .wp-block-image {
	margin: 0 0 var(--e7);
	border: 1px solid var(--borde);
	overflow: hidden;
}
/* La foto es una banda panoramica, no un bloque a toda altura: capada
   (aviso de Gerard, 2026-08-25: «exageradamente grande»). */
.stark-seccion--varg .wp-block-image img {
	width: 100%;
	height: auto;
	max-height: clamp(280px, 38vw, 460px);
	object-fit: cover;
	display: block;
}
.stark-claims {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--e4) var(--e6);
}
.stark-claims p {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--e3);
	border-left: 1px solid var(--borde);
	padding-left: var(--e4);
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .03em;
	line-height: 1.2;
}
.stark-claims p::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--lima);
	margin-top: 5px;
}

/* ── como se conduce: tira de tarjetas con flechas, contador y arrastre ── */
.stark-conduce__controles { display: flex; align-items: center; gap: var(--e4); flex: none; }
html:not(.stark-js) .stark-conduce__controles { display: none; }
.stark-conduce {
	display: flex;
	gap: var(--e5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--e4);
	scrollbar-width: thin;
	cursor: grab;
}
.stark-conduce.es-arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.stark-conduce > .stark-conduce__tarjeta {
	flex: 0 0 clamp(270px, 30vw, 370px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--carbon);
	border: 1px solid #DBD5C9;
	border-top: 2px solid var(--lima);
}
.stark-conduce__tarjeta .wp-block-image { margin: 0; }
.stark-conduce__tarjeta .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.stark-conduce__cuerpo { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e3); flex: 1; }
.stark-conduce__cuerpo h3 {
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	letter-spacing: .03em;
	line-height: 1.05;
}
.stark-conduce__cuerpo p { margin: 0; font-size: var(--t-s); line-height: 1.6; color: var(--gris); }
.stark-conduce__cuerpo p.stark-conduce__dato {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-m);
	color: var(--oliva);
}

/* ── el material incluido: banda blanca con las piezas del equipo ─────── */
/* Lista dada por Gerard (2026-08-25): casco, botas, protecciones, gafas y
   guantes. Reutiliza la rejilla de piezas; sobre claro, filete claro y el
   cuadradito en oliva (la lima solo es fondo o va sobre noche). */
/* El circuito privado de la home (2026-09-18, Gerard: «una sección propia»)
   es esta misma banda: texto con claves a un lado y foto vertical al otro.
   Mismas reglas, sin colores nuevos. */
.stark-seccion--equipo,
.stark-seccion--circuito { background: #FFFFFF; color: #161310; }
.stark-seccion--equipo h2,
.stark-seccion--circuito h2 { color: #161310; margin: 0; }
.stark-equipo .stark-dc__texto > p:not(.stark-antetitulo),
.stark-circuito .stark-dc__texto > p:not(.stark-antetitulo) { color: #57544D; margin: 0; max-width: 52ch; }
.stark-claims--claro p { border-left-color: #DBD5C9; }
.stark-claims--claro p::before { background: var(--oliva); }
/* Las piezas dentro de la columna: celdas mas cortas, a dos columnas. */
.stark-equipo__piezas,
.stark-circuito__piezas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: var(--e3); }
/* La foto del local es vertical: el marco fija la altura (un max-height no
   da altura definida al height:100% de dentro y la foto desbordaba). */
.stark-equipo__marco,
.stark-circuito__marco { height: clamp(420px, 46vw, 640px); }
.stark-equipo__marco .wp-block-image,
.stark-circuito__marco .wp-block-image { margin: 0; height: 100%; }
.stark-equipo__marco .wp-block-image img,
.stark-circuito__marco .wp-block-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
/* En la home la seccion va entre la parrilla crema y la moto negra: un
   filete la separa de la crema de arriba. */
.stark-seccion--circuito { border-top: 1px solid #DBD5C9; }
/* El boton de WhatsApp es un <p class="stark-wa">: la regla de los parrafos
   de arriba le quitaria el margen y le pondria el gris del texto. */
.stark-circuito .stark-dc__texto > p.stark-wa { margin-top: var(--e3); color: inherit; max-width: none; }
/* Cuatro claves: a 2x2 (a tres columnas la cuarta se quedaba sola). */
.stark-circuito__piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── mapas de potencia: banda noche con el grafico decorativo ─────────── */
.stark-seccion--mapas .stark-dc { gap: var(--e7); }
.stark-mapas__panel {
	border: 1px solid var(--borde);
	background: var(--carbon);
	padding: var(--e5);
	display: flex;
	flex-direction: column;
	gap: var(--e4);
}
.stark-mapas__barras { display: flex; align-items: flex-end; gap: 3px; height: clamp(84px, 10vw, 120px); }
.stark-mapas__barras span { flex: 1; background: var(--piedra); }
.stark-mapas__barras span:nth-child(n+6) { background: var(--lima); }
.stark-mapas__pie { border-top: 1px solid var(--borde); padding-top: var(--e4); }
.stark-mapas__pie p {
	margin: 0;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris-2);
}

/* ── ficha tecnica: tres grupos de filas con filete, sin mosaicos ─────── */
.stark-ficha-tec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--e6) var(--e7);
}
.stark-ficha-tec h3.stark-ficha-tec__rotulo {
	margin: 0;
	font-family: var(--fuente-dato);
	font-weight: 600;
	font-size: var(--t-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-2);
	border-bottom: 1px solid #DBD5C9;
	padding-bottom: var(--e2);
}
.stark-ficha-tec p:not(.stark-todo) {
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e4);
	padding-block: 9px;
	border-bottom: 1px solid #E4E0D6;
	font-size: var(--t-s);
	color: var(--gris-2);
}
.stark-ficha-tec p strong {
	font-family: var(--fuente-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-m);
	letter-spacing: .02em;
	color: var(--hueso);
	text-align: right;
}
.stark-ficha-tec p.stark-todo { margin-top: var(--e3); }

/* ── el banner del vale bajo la parrilla ──────────────────────────────── */
.stark-banner-vale {
	margin-top: var(--e6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e5);
	background: var(--carbon);
	border: 1px solid #DBD5C9;
	border-left: 2px solid var(--oliva);
	padding: var(--e5);
}
.stark-banner-vale h3 {
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	letter-spacing: .03em;
	line-height: 1.1;
}
.stark-banner-vale p { margin: 0; }
.stark-banner-vale .stark-banner-vale__texto { display: flex; flex-direction: column; gap: 5px; max-width: 62ch; }
.stark-banner-vale .stark-banner-vale__texto p { font-size: var(--t-s); line-height: 1.6; color: var(--gris); }

/* ── sobre nosotros: quien te guia (doble columna asimetrica) ─────────── */
.stark-perfil { align-items: stretch; }
.stark-perfil__marco {
	min-height: min(118vw, 780px);
	display: grid;
	place-items: center;
	padding: var(--e5);
}
/* La foto llena el marco, como en el prototipo 6 (marco alto, foco 50 % 54 %,
   columnas 1,25 / 0,75). El editor guardo un ancho fijo (317 px) y dejaba el
   resto del marco en blanco: aqui manda el marco, la toque quien la toque
   (2026-09-19). */
@media (min-width: 861px) {
	.stark-perfil.stark-dc--ancha { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
	.stark-perfil__marco { min-height: min(76vh, 700px); }
}
/* La foto va en absoluto, como en el prototipo: si contara su altura, una
   vertical a 730 px de ancho estiraba la seccion a 1.300 px. */
.stark-perfil__marco:has(.wp-block-image) { padding: 0; display: block; position: relative; }
.stark-perfil__marco .wp-block-image { position: absolute; inset: 0; float: none; margin: 0; width: 100% !important; max-width: none; height: 100%; }
.stark-perfil__marco .wp-block-image img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; object-position: 50% 54%; display: block; }
h3.stark-perfil__nombre {
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-2xl);
	line-height: .92;
	letter-spacing: -.014em;
}
.stark-perfil__datos p { margin: 0; }

/* ── la historia: linea de tiempo sobre banda noche ────────── */
/* Los hitos, a la vista y sin flechas (Gerard, 2026-09-19: con cuatro no
   tenian sentido): una fila en escritorio, sean los que sean; de dos en dos
   en tableta; uno debajo de otro en movil. Los hijos son grupos del editor. */
.stark-linea--historia {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e5);
	overflow: visible;
	scroll-snap-type: none;
	padding-bottom: 0;
}
@media (min-width: 600px) { .stark-linea--historia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stark-linea--historia { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.stark-linea--historia > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: var(--e3);
	border-top: 1px solid var(--borde);
	padding-top: var(--e4);
}
.stark-linea--historia p { margin: 0; }
.stark-linea--historia p:not(.stark-linea__hito):not(.stark-todo) {
	font-size: var(--t-s);
	line-height: 1.6;
	color: var(--gris);
}
.stark-cita {
	margin-top: var(--e7);
	border: 1px dashed var(--lima);
	background: rgba(160, 248, 16, .05);
	padding: var(--e6);
	display: flex;
	flex-direction: column;
	gap: var(--e4);
}
.stark-cita p { margin: 0; }
/* La frase de Juanjo, ya escrita (2026-09-19): cursiva grande, como el
   blockquote del prototipo 6, y a todo el ancho de la tarjeta (Gerard: con
   las 30 letras del prototipo ocupaba la mitad). El marco se queda. */
.stark-cita p.stark-cita__texto {
	font-family: var(--fuente-display);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(24px, 6.6vw, 38px);
	line-height: 1.02;
	letter-spacing: -.01em;
	color: var(--hueso);
	text-wrap: pretty;
}
@media (min-width: 760px) { .stark-cita p.stark-cita__texto { font-size: clamp(34px, 3.2vw, 56px); } }
.stark-cita p.stark-cita__firma {
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-2);
}

/* ── el territorio: banda a sangre con la foto editable (cover) ───────── */
.stark-banda-territorio.wp-block-cover {
	position: relative;
	min-height: clamp(380px, 52vw, 640px);
	padding: 0;
	align-items: stretch;
	background: var(--negro);
	isolation: isolate;
	border-block: 1px solid var(--borde);
	color: #F2EFE9;
	--negro: #080808;
	--carbon: #111110;
	--asfalto: #1A1917;
	--piedra: #2A2723;
	--borde: #33302B;
	--hueso: #F2EFE9;
	--gris: #A8A49C;
	--gris-2: #8C8880;
}
.stark-banda-territorio .wp-block-cover__image-background { height: 114%; object-fit: cover; will-change: transform; }
.stark-banda-territorio > .wp-block-cover__background { display: none; }
.stark-banda-territorio::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, .6) 48%, rgba(8, 8, 8, .12) 100%);
}
.stark-banda-territorio.wp-block-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--seccion);
}
.stark-banda-territorio .stark-antetitulo { color: var(--lima); }
.stark-banda-territorio__texto { max-width: 58ch; display: flex; flex-direction: column; gap: var(--e4); }
.stark-banda-territorio__texto h2 { margin: 0; }
.stark-banda-territorio__texto > p:not(.stark-antetitulo) { margin: 0; color: var(--gris); line-height: 1.65; }
.stark-banda-territorio .stark-lista-check li { border-bottom: 1px solid var(--borde); padding-bottom: var(--e3); }

/* ── filas con filete y numero (ADR 005). En Sobre nosotros son «Lo que le
   ha dado la competicion» y llevan foto a la derecha (2026-09-19). ── */
.stark-seccion--antes { background: #FFFFFF; color: #161310; }
.stark-seccion--antes h2, .stark-seccion--antes h3 { color: #161310; }
.stark-antes { counter-reset: stark-antes; display: flex; flex-direction: column; }
.stark-antes__fila {
	counter-increment: stark-antes;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--e2) var(--e5);
	align-items: start;
	border-top: 1px solid #DBD5C9;
	padding-block: var(--e5);
}
.stark-antes__fila:last-child { border-bottom: 1px solid #DBD5C9; }
.stark-antes__fila::before {
	content: "0" counter(stark-antes);
	grid-row: 1 / span 2;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	font-size: var(--t-xl);
	line-height: 1;
	color: var(--oliva);
}
.stark-antes__fila > * { grid-column: 2; margin: 0; }
.stark-antes__fila h3 {
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	letter-spacing: .02em;
	line-height: 1.05;
}
.stark-antes__fila p { font-size: var(--t-m); line-height: 1.6; color: #57544D; max-width: 64ch; }

/* Las filas con una foto a la derecha (Gerard, 2026-09-19: sobraba blanco).
   La foto llena su columna, alta como las filas; en movil va debajo. */
.stark-antes-dc { align-items: stretch; }
.stark-antes__marco { position: relative; min-height: min(118vw, 560px); }
/* En escritorio la foto mide lo que las filas: con altura minima propia,
   dejaba blanco debajo de la ultima fila (80 px a 1440). */
@media (min-width: 861px) {
	.stark-antes-dc { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
	.stark-antes__marco { min-height: 0; }
}
.stark-antes__marco .wp-block-image { position: absolute; inset: 0; margin: 0; width: 100% !important; max-width: none; height: 100%; }
.stark-antes__marco .wp-block-image img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; display: block; }

/* Las claves sobre fondo claro: filete y tinta, valores en oliva. */
.stark-claves--claro { margin-top: var(--e7); max-width: none; }
.stark-claves--claro > .wp-block-group { border-left-color: #C9C3B5; }
.stark-claves--claro p:first-child:not(.stark-todo) { color: var(--oliva); }
.stark-claves--claro p:last-child:not(:first-child):not(.stark-todo) { color: var(--gris-2); }

/* ── colaboradores: celdas con borde discontinuo, todas pendientes ────── */
.stark-colabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--e4);
}
.stark-colabs > .wp-block-group {
	border: 1px dashed #C9C3B5;
	background: var(--carbon);
	min-height: 120px;
	display: grid;
	place-items: center;
	padding: var(--e4);
	text-align: center;
}
.stark-colabs p { margin: 0; }

/* Sobre nosotros: «Lo que le ha dado la competicion» (2026-09-19, en el
   hueco de los colaboradores): cinco claves. Con auto-fit quedaban 4 + 1 en
   tableta: tres por fila y, en escritorio ancho, todas en una. */
@media (min-width: 600px) { .stark-seccion--experiencia .stark-claims { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1150px) { .stark-seccion--experiencia .stark-claims { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }

/* ── la pagina de la galeria: el muro de fotos (2026-08-25) ───────────── */
/* Pedida por Gerard, sin prototipo: simple y con variedad. El muro es un
   bloque de galeria de core pintado a COLUMNAS: cada foto conserva su
   formato natural (vertical, apaisada, panoramica) y de ahi la variedad.
   Core pinta la galeria en flex con alturas forzadas: se pisa entero. */
.stark-seccion--fotos { background: #FFFFFF; color: #161310; }
.stark-seccion--fotos h1, .stark-seccion--fotos h2 { color: #161310; }
.stark-seccion--fotos-cabecera { padding-block: var(--e8) 0; }
.stark-seccion--fotos-cabecera .stark-cabecera-reserva { margin-bottom: 0; max-width: none; }
.stark-seccion--fotos-cabecera h1 {
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-3xl);
	line-height: .86;
	letter-spacing: -.018em;
}
.stark-seccion--fotos-cabecera .stark-cabecera-reserva > p:not(.stark-antetitulo) { color: #57544D; margin: 0; }
.stark-seccion--fotos-muro { padding-block: var(--e7) var(--seccion); }

figure.wp-block-gallery.stark-muro {
	display: block;
	columns: 3 300px;
	column-gap: var(--e4);
	margin: 0;
}
.stark-muro figure.wp-block-image {
	display: block;
	width: 100% !important;
	break-inside: avoid;
	margin: 0 0 var(--e4) !important;
	border: 1px solid #DBD5C9;
	background: #E4E0D6;
}
.stark-muro figure.wp-block-image img {
	width: 100%;
	height: auto !important;
	display: block;
}
/* El pie, pequeño y en tipografia de dato. OJO: el CSS de la galeria de core
   pesa mas y lo deja ENCIMA de la foto, con degradado y texto blanco; asi es
   como se ve y como lo ha dado por bueno Gerard. */
.stark-muro figure.wp-block-image figcaption {
	position: static;
	background: none;
	margin: 0;
	padding: 9px 12px;
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #57544D;
	text-align: left;
}
/* El titulo del pie, en lima: en negro no se leia sobre la foto (Gerard,
   2026-09-19). */
.stark-muro figure.wp-block-image figcaption strong {
	color: var(--lima);
	font-weight: 600;
	margin-right: 8px;
}

/* ═══════  Repaso de Gerard sobre pantallazos (2026-08-25)  ═══════ */

/* ── 1. «Monta tu salida»: el texto pequeño, en verde ──────────────── */
/* Aviso suyo: sobre la foto del hero, todo el texto menudo en gris-2 no se
   lee. Orden literal: verde, y SOLO en este bloque. Por eso todo cuelga de
   .stark-seccion-reserva: ni el widget de /reservar/ ni el del vale, que
   viven sobre panel y ahi si se leen, cambian de color. */
.stark-seccion-reserva .stark-cabecera-reserva p:not(.stark-antetitulo),
.stark-seccion-reserva .stark-rr__rotulo,
.stark-seccion-reserva .stark-rr__ruta-meta,
.stark-seccion-reserva .stark-rr__nota,
.stark-seccion-reserva .stark-rr__pie,
.stark-seccion-reserva .stark-cal__semana,
.stark-seccion-reserva .stark-rr__resumen-texto,
.stark-seccion-reserva .stark-rr__buscar input::placeholder {
	color: var(--lima);
}
/* Los dias del calendario: los de fuera de mes y los pasados se quedan
   apagados a proposito (si no, no se distingue lo elegible), pero suben a
   una lima oscura que si se ve sobre el panel. */
.stark-seccion-reserva .stark-cal__dia:disabled { color: var(--lima-800); opacity: .5; }

/* ── 2. El hero del catálogo: grises y filetes sobre foto clara ────── */
/* Aviso suyo: «el texto en gris no se ve nada, ni las rayas tampoco». La
   foto del bosque es CLARA, asi que el gris-2 (#8C8880) y el borde de la
   escala noche (#33302B) desaparecen. Aqui el cromo es fijo y claro, como
   ya se hizo con la insignia y el precio de las fichas. */
.stark-portada .stark-datos { border-top-color: rgba(242, 239, 233, .45); }
.stark-portada .stark-datos > div { border-bottom-color: rgba(242, 239, 233, .45); }
.stark-portada .stark-clave { color: #E4E1DA; }
.stark-portada .stark-datos__detalle { color: #D9D5CC; }
.stark-portada .stark-dato { color: #FFFFFF; }
/* El H1 y la entradilla van sobre la misma foto: sombra para despegarlos. */
.stark-portada h1,
.stark-portada .wp-block-cover__inner-container > p { text-shadow: 0 2px 24px rgba(8, 8, 8, .75); }

/* ── 4. Móvil: los filtros del catálogo se salían de la pantalla ───── */
/* Los grupos compactos son filas de chips SIN permiso para envolver: con
   tres chips largos la fila medía 442 px en una pantalla de 375 y estiraba
   la página entera (medido: scrollWidth 466). */
.stark-filtros--compactos { width: 100%; }
.stark-filtros--compactos .stark-filtros__grupo { flex-wrap: wrap; min-width: 0; max-width: 100%; }

/* ── El hero del catálogo en MÓVIL (aviso de Gerard con captura) ──────── */
/* Su velo estaba pensado para escritorio: oscuro arriba, una ventana clara
   al 40 % y oscuro al fondo. En móvil el contenido se apila en vertical y
   mide el doble, así que la entradilla y los datos caen justo en la ventana
   clara y desaparecen sobre la foto. El primer arreglo (velo parejo .60-.74)
   se pasó de frenada: oscurecía la foto entera y el hero se veía «un fondo
   gris, sin foto» (segundo aviso suyo). Ahora la foto respira arriba y el
   velo carga solo donde de verdad hay texto: de la mitad hacia abajo. */
@media (max-width: 860px) {
	.stark-portada .wp-block-cover__background {
		background: linear-gradient(180deg,
			rgba(8, 8, 8, .48) 0%,
			rgba(8, 8, 8, .22) 28%,
			rgba(8, 8, 8, .55) 54%,
			rgba(8, 8, 8, .82) 76%,
			rgba(8, 8, 8, .94) 100%) !important;
	}
	/* Los cuatro datos (Rutas/Desde/Grupo/Salidas), a 2×2 y resaltados:
	   panel noche translucido y la cifra en lima (pedido de Gerard: con
	   auto-fit salian en columna y sobre la foto no destacaban). */
	.stark-portada .stark-datos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--e4) var(--e5);
		background: rgba(8, 8, 8, .6);
		border-top: 0;
		padding: var(--e4);
	}
	.stark-portada .stark-dato { color: var(--lima); }
}
/* La entradilla iba en gris del tema: sobre foto no llega. */
.stark-portada .wp-block-cover__inner-container > p { color: #E4E1DA; }

/* ══════════ REPASO DE GERARD 2026-08-25 (antes de bloquear) ══════════ */

/* ── El hero de la HOME en móvil ─────────────────────────────────────── */
/* Mismo mal que el del catálogo: el velo de escritorio abre una ventana
   clara entre el 24 % y el 42 % y en móvil la entradilla («Excursiones
   guiadas…») cae justo ahí, sobre el cielo. En móvil el velo va sin
   ventana y con más carga donde hay texto; la foto respira arriba. */
@media (max-width: 1149px) {
	.stark-hero::after {
		background: linear-gradient(to bottom,
			rgba(8, 8, 8, .6) 0%,
			rgba(8, 8, 8, .3) 24%,
			rgba(8, 8, 8, .48) 46%,
			rgba(8, 8, 8, .8) 70%,
			rgba(8, 8, 8, .97) 90%,
			#080808 100%);
	}
	.stark-hero__texto {
		text-shadow: 0 1px 2px rgba(8, 8, 8, .55), 0 2px 28px rgba(8, 8, 8, .85);
	}
}

/* ── El hero de la FICHA: el tratamiento que ya recibió el del catálogo ── */
/* El botón «Ver el recorrido» era un fantasma: sin fondo y con el borde de
   la escala noche (#33302B), invisible sobre la foto. Y las claves de la
   fila de datos iban en gris-2 sobre foto. */
.stark-hero-exp .stark-boton:not(.stark-boton--lima) {
	border-color: rgba(242, 239, 233, .55);
	background: rgba(8, 8, 8, .38);
}
.stark-hero-exp .stark-boton:not(.stark-boton--lima):hover { border-color: var(--lima); }
.stark-hero-exp .stark-clave { color: #E4E1DA; }
.stark-hero-exp .stark-datos__detalle { color: #D9D5CC; }
.stark-hero-exp .stark-dato { color: #FFFFFF; }
.stark-hero-exp__titulo,
.stark-hero-exp .stark-entradilla { text-shadow: 0 2px 24px rgba(8, 8, 8, .75); }
/* En móvil, además, el velo de escritorio dejaba su ventana clara al 35 %
   justo donde se apila el texto: velo parejo, cargado abajo. */
@media (max-width: 860px) {
	.stark-hero-exp__velo {
		background: linear-gradient(180deg,
			rgba(8, 8, 8, .58) 0%,
			rgba(8, 8, 8, .34) 30%,
			rgba(8, 8, 8, .55) 56%,
			rgba(8, 8, 8, .88) 100%);
	}
}

/* ── «La moto» en móvil: aire entre el titular calado y la foto ───────── */
/* El solape de escritorio (margen negativo) en móvil se comía el titular:
   la moto arrancaba 30 px por encima de un titular de ~52 px. */
@media (max-width: 860px) {
	.stark-moto-home__recorte { margin-top: 0; }
}

/* ── Cifras de la Varg y claves de portada (motos y vale) a 2×2 en móvil ── */
/* Con auto-fit y mínimos de 170-180 px, en un móvil de 375 salía una sola
   columna: cuatro bloques apilados que medían una pantalla entera. */
@media (max-width: 719px) {
	.stark-cifras,
	.stark-claves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stark-cifras { gap: var(--e5) var(--e4); }
	.stark-claves { gap: var(--e4); }
	.stark-cifra__valor { font-size: clamp(28px, 8.4vw, 38px); }
}

/* ── La miniatura de cada ruta en el widget «Monta tu salida» ─────────── */
/* Pedido de Gerard: la foto ayuda a identificar la ruta, también aquí y en
   /reservar/ (mismo bloque). La fila «Aún no lo sé» lleva un hueco vacío
   para que el texto no baile. */
.stark-rr__foto { flex: none; width: 64px; height: 48px; overflow: hidden; background: var(--asfalto); }
.stark-rr__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stark-rr__foto:empty { background: repeating-linear-gradient(135deg, var(--asfalto) 0 6px, transparent 6px 12px); }

/* ═══════════════  TIENDA: prototipo 7 (2026-09-19)  ═══════════════ */
/* /tienda/: portada, merchandising, venta de motos, cómo se compra y el
   cierre. Los artículos y las motos salen de las cajas meta de la Página
   (ADR 022); lo demás son bloques normales. Medidas del prototipo 7 con la
   paleta del tema: crema de base, blanco en las tarjetas, oliva donde el
   prototipo pone su «lima-tierra» (#4E7C08, casi el mismo verde) y la
   escala noche re-anclada en la banda de las motos (.stark-zona-noche).
   El prototipo no fija el interlineado del cuerpo (normal) y el tema sí
   (1,65): las piezas pequeñas lo devuelven a normal para medir lo mismo. */

/* ── portada ─────────────────────────────────────────────────────────── */
.stark-hero--tienda.wp-block-cover { min-height: min(82vh, 820px); }
.stark-hero--tienda .wp-block-cover__image-background { object-position: 50% 45%; }
.stark-hero.stark-hero--tienda::after {
	background: linear-gradient(180deg, rgba(8, 8, 8, .55) 0%, rgba(8, 8, 8, .35) 40%, rgba(8, 8, 8, .92) 100%);
}
.stark-hero--tienda.wp-block-cover > .wp-block-cover__inner-container {
	padding: var(--e9) var(--canal) var(--e6);
	gap: var(--e8);
}
/* 56ch del prototipo, medidos en su cuerpo de 16 px: es lo que parte el
   titular en cuatro líneas. */
.stark-hero--tienda .stark-hero__texto { font-size: 1rem; max-width: 56ch; }
.stark-hero--tienda .stark-antetitulo { gap: var(--e4); }
.stark-hero.stark-hero--tienda .stark-antetitulo::before { width: 48px; }
.stark-hero--tienda .stark-hero__titular {
	font-size: var(--t-3xl);
	line-height: .88;
	letter-spacing: -.015em;
	color: #FFFFFF;
}
.stark-hero--tienda .stark-hero__entradilla { max-width: 52ch; color: var(--hueso); }
.stark-hero--tienda .wp-block-button__link { min-height: 56px; padding: 0 var(--e6); letter-spacing: .08em; }
.stark-hero--tienda .is-style-outline > .wp-block-button__link {
	padding: 0 var(--e6);
	border-color: rgba(242, 239, 233, .45);
	background: rgba(8, 8, 8, .35);
}
.stark-hero--tienda .stark-hero__remate { border-top-color: rgba(242, 239, 233, .22); }
.stark-hero--tienda .stark-hero__remate p { letter-spacing: .22em; color: var(--gris); line-height: normal; }
/* La señal de «Desliza» del prototipo: una línea lima que una sombra borra
   de arriba abajo. */
.stark-hero--tienda .stark-hero__desliza::after {
	height: 22px;
	background-color: var(--lima);
	background-image: linear-gradient(#080808, #080808);
	background-size: 100% 100%;
	background-position: 0 -22px;
}
@media (prefers-reduced-motion: no-preference) {
	.stark-hero--tienda .stark-hero__desliza::after { animation: stark-cue-tienda 1.8s ease-in-out infinite; }
	@keyframes stark-cue-tienda {
		0%   { background-position: 0 -22px; }
		50%  { background-position: 0 0; }
		100% { background-position: 0 22px; }
	}
}
@media (max-width: 1099px) {
	.stark-hero--tienda.wp-block-cover { min-height: 78vh; }
}

/* ── merchandising: encabezado con los filtros al lado ───────────────── */
.stark-seccion--merch { background: var(--negro); color: var(--hueso); }
.stark-tienda__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: var(--e6);
	align-items: end;
}
.stark-tienda__intro { display: flex; flex-direction: column; gap: var(--e4); }
.stark-tienda__intro h2 { line-height: .92; }
.stark-tienda__intro p:not(.stark-antetitulo) {
	margin: 0;
	max-width: 52ch;
	font-size: var(--t-m);
	line-height: 1.6;
	color: var(--gris-2);
	text-wrap: pretty;
}
.stark-tienda__filtros { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2); }
.stark-tienda__filtro {
	height: 44px;
	padding: 0 var(--e4);
	border: 1px solid var(--hueso);
	background: transparent;
	color: var(--hueso);
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: var(--t-s);
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: normal;
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}
.stark-tienda__filtro[aria-pressed="true"] { background: var(--hueso); color: var(--negro); }
/* Sin JavaScript no filtrarían nada: fuera. */
html:not(.stark-js) .stark-tienda__filtros { display: none; }
@media (max-width: 1099px) {
	.stark-tienda__cabecera { grid-template-columns: minmax(0, 1fr); }
	.stark-tienda__filtros { justify-content: flex-start; }
}

/* ── la rejilla y la tarjeta del artículo ────────────────────────────── */
.stark-tienda { margin-top: var(--e7); }
.stark-tienda__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e5); }
@media (max-width: 1099px) { .stark-tienda__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .stark-tienda__rejilla { grid-template-columns: minmax(0, 1fr); } }

.stark-art {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--carbon);
	border: 1px solid var(--borde);
}
/* display:flex le gana al [hidden] del navegador: el filtro no escondería nada. */
.stark-art[hidden] { display: none; }
.stark-art__foto {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	overflow: hidden;
	text-align: center;
	font: inherit;
	color: inherit;
	background-color: var(--asfalto);
	background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(20, 19, 15, .055) 9px 18px);
}
button.stark-art__foto { cursor: zoom-in; }
html:not(.stark-js) button.stark-art__foto { cursor: default; }
.stark-art__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stark-art__sin-foto { padding: 0 var(--e3); line-height: 1.6; }
.stark-art__num {
	position: absolute;
	bottom: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	background: rgba(20, 19, 15, .82);
	color: #F2EFE9;
	font-family: var(--fuente-dato);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: normal;
}
/* Sin JavaScript no hay visor: el número de fotos no llevaría a nada. */
html:not(.stark-js) .stark-art__num { display: none; }
.stark-art__etiqueta {
	position: absolute;
	top: 0;
	left: 0;
	padding: 9px 14px;
	background: var(--lima);
	color: var(--lima-tinta);
	font-family: var(--fuente-dato);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: normal;
}
.stark-art--agotado .stark-art__etiqueta { background: var(--hueso); color: var(--negro); }
.stark-art__precio {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 8px 16px;
	background: var(--lima);
	color: var(--lima-tinta);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-l);
	line-height: normal;
}
.stark-art__cuerpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--e3);
	padding: var(--e4) var(--e4) var(--e5);
}
.stark-art__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.stark-art__nombre {
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-l);
	line-height: 1.05;
}
.stark-art__ref {
	white-space: nowrap;
	color: var(--gris-2);
	font-family: var(--fuente-dato);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: normal;
}
.stark-art__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stark-art__chips span {
	padding: 6px 10px;
	border: 1px solid var(--borde);
	color: var(--hueso);
	font-family: var(--fuente-dato);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: normal;
}
.stark-art__texto { margin: 0; font-size: var(--t-s); line-height: 1.55; color: var(--gris-2); text-wrap: pretty; }
.stark-art__boton {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding: 0 var(--e4);
	border: 1px solid var(--lima);
	background: var(--lima);
	color: var(--lima-tinta);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-s);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: normal;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.stark-art--agotado .stark-art__boton { border-color: var(--hueso); background: transparent; color: var(--hueso); }
.stark-art__boton:hover,
.stark-art--agotado .stark-art__boton:hover { border-color: var(--lima-800); background: var(--lima-800); color: var(--lima-tinta); }

/* ── el visor de fotos ───────────────────────────────────────────────── */
/* Vive fuera de las secciones (el JS lo cuelga del body): lleva su paleta
   noche escrita, no heredada. */
.stark-visor {
	position: fixed;
	inset: 0;
	z-index: 96;
	display: flex;
	flex-direction: column;
	background: rgba(8, 8, 8, .94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #F2EFE9;
	line-height: normal;
}
.stark-visor[hidden] { display: none; }
html.stark-visor-abierto { overflow: hidden; }
.stark-visor__fondo { position: absolute; inset: 0; }
.stark-visor__cabeza {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e4);
	padding: var(--e4) var(--e5);
	border-bottom: 1px solid #33302B;
}
.stark-visor__titulos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stark-visor__ref {
	color: var(--lima);
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .2em;
	text-transform: uppercase;
}
.stark-visor__nombre {
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-l);
	line-height: 1;
}
.stark-visor__boton {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid #33302B;
	background: transparent;
	color: #F2EFE9;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}
.stark-visor__boton:hover { border-color: var(--lima); color: var(--lima); }
.stark-visor__centro {
	position: relative;
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--e3);
	padding: var(--e4);
}
.stark-visor__marco {
	position: relative;
	height: 100%;
	max-height: calc(100vh - 260px);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid #33302B;
	background-color: #E6E1D7;
	background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(20, 19, 15, .055) 9px 18px);
}
.stark-visor__img { width: 100%; height: 100%; object-fit: contain; }
.stark-visor__miniaturas {
	position: relative;
	display: flex;
	justify-content: center;
	gap: var(--e2);
	padding: var(--e3) var(--e5) var(--e5);
	border-top: 1px solid #33302B;
	overflow-x: auto;
}
.stark-visor__mini {
	flex: none;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid #33302B;
	background: #E6E1D7;
	cursor: pointer;
}
.stark-visor__mini[aria-current="true"] { border-color: var(--lima); }
.stark-visor__mini img { width: 100%; height: 100%; object-fit: cover; }
/* Con una sola foto sobran las flechas y las miniaturas. */
.stark-visor--una [data-visor-paso] { visibility: hidden; }
.stark-visor--una .stark-visor__miniaturas { display: none; }

/* ── venta de motos: banda noche ─────────────────────────────────────── */
.stark-venta__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e5); }
.stark-venta__intro { display: flex; flex-direction: column; gap: var(--e4); max-width: 60ch; }
.stark-venta__intro h2 { line-height: .9; }
.stark-venta__intro p:not(.stark-antetitulo) { margin: 0; font-size: var(--t-m); line-height: 1.6; color: var(--gris); text-wrap: pretty; }
.stark-venta__enlace { margin: 0; }
.stark-venta__enlace a {
	padding-bottom: 4px;
	border-bottom: 2px solid var(--lima);
	color: var(--hueso);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-s);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}
.stark-venta__enlace a:hover { color: var(--lima); }

.stark-ofertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); margin-top: var(--e7); }
@media (max-width: 1099px) { .stark-ofertas { grid-template-columns: minmax(0, 1fr); } }
.stark-oferta { display: flex; flex-direction: column; min-width: 0; background: var(--carbon); border: 1px solid var(--borde); }
.stark-oferta__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.stark-oferta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stark-oferta__etiqueta {
	position: absolute;
	top: 0;
	left: 0;
	padding: 9px 14px;
	background: var(--lima);
	color: var(--lima-tinta);
	font-family: var(--fuente-dato);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: normal;
}
.stark-oferta__precio {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 10px 16px;
	background: var(--lima);
	color: var(--lima-tinta);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-s);
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: normal;
}
.stark-oferta__cuerpo { flex: 1; display: flex; flex-direction: column; gap: var(--e4); padding: var(--e5); }
.stark-oferta__titulo {
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-xl);
	line-height: 1;
}
.stark-oferta__texto { margin: 0; font-size: var(--t-m); line-height: 1.6; color: var(--gris); text-wrap: pretty; }
.stark-oferta__puntos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e3) var(--e5);
	margin: 0;
	padding: var(--e2) 0 0;
	list-style: none;
}
.stark-oferta__puntos li {
	display: flex;
	align-items: flex-start;
	gap: var(--e3);
	margin: 0;
	padding-left: var(--e3);
	border-left: 1px solid var(--borde);
}
.stark-oferta__puntos li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; background: var(--lima); }
.stark-oferta__puntos span {
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: var(--t-m);
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.3;
}
@media (max-width: 759px) { .stark-oferta__puntos { grid-template-columns: minmax(0, 1fr); } }
.stark-oferta__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: auto; padding-top: var(--e3); }
.stark-oferta__boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 var(--e5);
	background: var(--lima);
	color: var(--lima-tinta);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-size: var(--t-s);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: normal;
	transition: background .18s ease;
}
.stark-oferta__boton:hover { background: var(--lima-800); color: var(--lima-tinta); }

/* Los tres datos: centrados, el primero en lima. Son grupos de dos párrafos
   del editor (valor y rótulo). */
.stark-venta__datos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--e5);
	margin-top: var(--e8);
	padding-top: var(--e6);
	border-top: 1px solid var(--borde);
}
.stark-venta__datos > div { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.stark-venta__datos p { margin: 0; }
.stark-venta__datos p:first-child {
	color: var(--hueso);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--t-xl);
	line-height: 1;
}
.stark-venta__datos > div:first-child p:first-child { color: var(--lima); }
.stark-venta__datos p:last-child:not(:first-child) {
	color: var(--gris-2);
	font-family: var(--fuente-dato);
	font-size: var(--t-xs);
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: normal;
}
@media (max-width: 759px) { .stark-venta__datos { grid-template-columns: minmax(0, 1fr); } }

/* El aviso de pedido a fábrica: franja rayada con el enlace a WhatsApp. */
.stark-venta__aviso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e4);
	margin-top: var(--e7);
	padding: var(--e5);
	border: 1px solid var(--borde);
	background-color: var(--asfalto);
	background-image: var(--rayas);
}
.stark-venta__aviso > p:not(.stark-wa) { margin: 0; max-width: 64ch; font-size: var(--t-m); line-height: 1.6; color: var(--hueso); text-wrap: pretty; }

/* Los enlaces a WhatsApp de la tienda: subrayado lima de 2 px, como el
   prototipo (el bloque stark/whatsapp en estilo «enlace»). */
.stark-venta__aviso .stark-enlace-subrayado__a,
.stark-compra__intro .stark-enlace-subrayado__a {
	padding-bottom: 4px;
	border-bottom: 2px solid var(--lima);
	font-weight: 800;
	letter-spacing: .1em;
	white-space: nowrap;
	line-height: normal;
	transition: color .18s ease;
}
.stark-venta__aviso .stark-enlace-subrayado__a { color: var(--lima); }
.stark-venta__aviso .stark-enlace-subrayado__a:hover { color: #FFFFFF; }
.stark-compra__intro .stark-enlace-subrayado__a { color: var(--hueso); }
.stark-compra__intro .stark-enlace-subrayado__a:hover { color: var(--oliva); }

/* ── cómo se compra ──────────────────────────────────────────────────── */
.stark-seccion--compra { background: var(--negro); color: var(--hueso); }
.stark-compra {
	display: grid;
	grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr);
	gap: var(--e7);
	align-items: start;
}
.stark-compra__intro { display: flex; flex-direction: column; gap: var(--e4); max-width: 40ch; }
.stark-compra__intro h2 { line-height: .92; }
.stark-compra__intro p:not(.stark-antetitulo):not(.stark-wa) { margin: 0; font-size: var(--t-m); line-height: 1.6; color: var(--gris-2); text-wrap: pretty; }
.stark-compra__pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); }
.stark-compra__paso { display: flex; flex-direction: column; gap: var(--e3); padding-top: var(--e4); border-top: 1px solid var(--hueso); }
.stark-compra__paso p { margin: 0; }
.stark-compra__num {
	color: var(--oliva);
	font-family: var(--fuente-display);
	font-weight: 800;
	font-style: italic;
	font-size: var(--t-xl);
	line-height: 1;
}
.stark-compra__paso h3 {
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-l);
	letter-spacing: .02em;
	line-height: 1.1;
}
.stark-compra__paso p:not(.stark-compra__num) { font-size: var(--t-s); line-height: 1.6; color: var(--gris-2); text-wrap: pretty; }
@media (max-width: 1099px) { .stark-compra { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) { .stark-compra__pasos { grid-template-columns: minmax(0, 1fr); } }

/* ── el cierre de la tienda: el bloque común, con las medidas del 7 ──── */
.stark-cierre--tienda .stark-cierre__cuerpo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.stark-cierre--tienda .stark-cierre__titulo { font-size: var(--t-2xl); line-height: .9; letter-spacing: -.01em; }
.stark-cierre--tienda .stark-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.stark-cierre--tienda .stark-datos > div {
	gap: 6px;
	padding: var(--e5) var(--e4) var(--e5) 0;
	border-bottom-color: rgba(242, 239, 233, .25);
}
.stark-cierre--tienda .stark-dato { line-height: 1.1; }
.stark-cierre--tienda .stark-datos > div:first-child .stark-dato { color: var(--lima); }
@media (max-width: 1099px) { .stark-cierre--tienda .stark-cierre__cuerpo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) { .stark-cierre--tienda .stark-datos { grid-template-columns: minmax(0, 1fr); } }

/* Medido contra el prototipo 7 en local (2026-09-19, 1440 px): los
   antetítulos y los rótulos de dato del prototipo van con interlineado
   normal (15 px de alto, no 20), y su cierre no tiene los márgenes por
   defecto del navegador en el titular y el párrafo (45 y 21 px que el
   bloque común arrastra) ni un botón de 64 px: son 56. */
.stark-hero--tienda .stark-antetitulo,
.stark-tienda__intro .stark-antetitulo,
.stark-venta__intro .stark-antetitulo,
.stark-compra__intro .stark-antetitulo,
.stark-cierre--tienda .stark-clave { line-height: normal; }
.stark-cierre--tienda .stark-cierre__titulo,
.stark-cierre--tienda .stark-cierre__parrafo { margin: 0; }
.stark-cierre--tienda .stark-cierre__parrafo { max-width: 44ch; line-height: 1.5; }
.stark-cierre--tienda .stark-boton--grande { min-height: 0; height: 56px; padding: 0 var(--e6); line-height: normal; letter-spacing: .08em; }
/* El enlace de WhatsApp va dentro de un párrafo (bloque stark/whatsapp):
   en el prototipo es el propio enlace el que ocupa la línea, con su
   subrayado dentro de la caja. */
.stark-compra__intro .stark-wa,
.stark-venta__aviso .stark-wa { line-height: normal; }
.stark-compra__intro .stark-wa a,
.stark-venta__aviso .stark-wa a { display: inline-block; }
/* El remate de la portada separa sus dos piezas 16 px, no 24 (en móvil,
   cuando el dato baja de línea, se notaba). */
.stark-hero--tienda .stark-hero__remate { gap: var(--e4); }

/* La fila bajo los artículos: la misma pieza del prototipo (texto a la
   izquierda, enlace subrayado a la derecha, filete encima). Hoy dice los
   14 días para cambiar la talla (Gerard, 2026-09-19): el prototipo solo lo
   tenía en su pie y el pie del sitio es el común. */
.stark-tienda__talla {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e4);
	margin-top: var(--e6);
	padding-top: var(--e5);
	border-top: 1px solid var(--borde);
}
.stark-tienda__talla > p:not(.stark-wa) { margin: 0; max-width: 60ch; font-size: var(--t-s); line-height: 1.6; color: var(--gris-2); }
.stark-tienda__talla .stark-wa { line-height: normal; }
.stark-tienda__talla .stark-enlace-subrayado__a {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--lima);
	color: var(--hueso);
	font-weight: 800;
	letter-spacing: .1em;
	white-space: nowrap;
	line-height: normal;
	transition: color .18s ease;
}
.stark-tienda__talla .stark-enlace-subrayado__a:hover { color: var(--oliva); }