/**
 * Portada · sección «Antes de que preguntes».
 *
 * Fichero aparte y encolado solo en la portada, siguiendo el plan de troceo:
 * nada nuevo entra a style.css, que ya son 15.500 líneas.
 *
 * Mobile first: el estilo base es el de 375 px, que es de donde viene más del
 * 70% del tráfico. Escritorio se añade con min-width.
 */

.gk-responde {
	padding: 20px 0 4px;
}

.gk-responde__titulo {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* Onyx y no el gris apagado: sobre el fondo de pagina (#F0F5FA) el muted
	   se queda en 4.41:1, por debajo del minimo AA. Medido, no supuesto. */
	color: var(--color-greyka-onyx, #1A1C20);
	margin: 0 0 10px;
}

.gk-responde__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.gk-responde__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	/* Blanco y no vapor-white, por una razon medida: el texto secundario usa
	   --color-text-muted (#6B7280), que da 4.83:1 SOBRE BLANCO pero cae a
	   4.43:1 sobre #F4F5F7 — por debajo del minimo AA de 4.5:1. El borde
	   sustituye al relleno para seguir separando cada tarjeta. */
	background: #fff;
	border: 1px solid #E7E9EF;
	border-radius: 10px;
	padding: 12px 14px;
}

.gk-responde__icono {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var(--color-kinetic-blue, #2952FF);
	margin-top: 1px;
}

.gk-responde__icono svg {
	width: 100%;
	height: 100%;
	display: block;
}

.gk-responde__texto {
	flex: 1;
	min-width: 0;
}

.gk-responde__dato {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--color-greyka-onyx, #1A1C20);
	/* Reserva el alto de dos líneas: cuando el JS cambia el rango de días por
	   la fecha concreta, el texto crece y sin esto la página daría un salto
	   (CLS) justo en la primera pantalla. */
	min-height: 2.7em;
}

.gk-responde__detalle {
	display: block;
	font-size: 12.5px;
	line-height: 1.45;
	/* #6B7280 da 4.83:1 y pasa AA; --color-concrete se queda en 2.63:1 y por
	   eso no se usa para texto que alguien tenga que leer. */
	color: var(--color-text-muted, #6B7280);
	margin-top: 2px;
}

/* A partir de tablet caben en fila y dejan de gastar alto vertical. */
@media (min-width: 768px) {
	.gk-responde {
		padding: 26px 0 6px;
	}

	.gk-responde__lista {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}

	.gk-responde__item {
		padding: 14px 16px;
	}

	.gk-responde__dato {
		font-size: 14.5px;
		min-height: 3.9em;
	}
}

@media (min-width: 1024px) {
	.gk-responde__dato {
		min-height: 2.7em;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Portada · banner, chips, rejilla, categorías y firma
 * Mobile first. Los colores salen de los tokens de :root; ningún hex nuevo.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Banner ────────────────────────────────────────────────────────────── */
.gk-banner {
	position: relative;
	overflow: hidden;
}

.gk-banner__pista {
	display: flex;
}

/* Con varios, se pasan con el dedo. Sin autoplay a propósito: golpea el LCP
   y casi nadie llega al segundo slide. */
.gk-banner--varios .gk-banner__pista {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.gk-banner--varios .gk-banner__pista::-webkit-scrollbar { display: none; }

.gk-banner__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	/* 220 px a 375 de ancho. Es el alto que deja entrar una fila entera de
	   producto antes del pliegue: con los 400 del hero anterior no cabía
	   ninguna. */
	aspect-ratio: 375 / 220;
}

.gk-banner__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gk-banner__texto {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 16px;
	/* Sin fondo propio: el contraste ya está garantizado en la imagen
	   (velo medido a 5,75:1). Así el texto no lleva una caja que tape la foto. */
	color: #fff;
}

.gk-banner__etiqueta {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	margin: 0 0 7px;
	color: #fff;
}

.gk-banner__titulo {
	font-size: clamp(22px, 6.2vw, 30px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 7px;
	max-width: 13ch;
	color: #fff;
}

.gk-banner__bajada {
	font-size: 13px;
	line-height: 1.4;
	margin: 0 0 13px;
	max-width: 26ch;
	color: #fff;
}

.gk-banner__cta {
	align-self: flex-start;
	background: #fff;
	color: var(--color-greyka-onyx, #1A1C20);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	border-radius: 8px;
	/* 44 px de zona táctil: es el mínimo y aquí se cumple con el padding. */
	padding: 12px 18px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

@media (min-width: 768px) {
	.gk-banner__slide { aspect-ratio: 1200 / 280; }
	.gk-banner__texto { padding: 0 clamp(24px, 5vw, 64px); }
	.gk-banner__titulo { max-width: 18ch; }
}

/* ── Chips de categoría ────────────────────────────────────────────────── */
.gk-cats-chips {
	padding: 10px 0 4px;
}

.gk-cats-chips ul {
	list-style: none;
	margin: 0;
	padding: 0 14px;
	display: flex;
	gap: 7px;
	overflow-x: auto;
	scrollbar-width: none;
}
.gk-cats-chips ul::-webkit-scrollbar { display: none; }

.gk-cats-chips__chip {
	display: inline-flex;
	align-items: center;
	/* 44 px, no 36: es el minimo de zona tactil y medido daba 38. */
	min-height: 44px;
	padding: 10px 15px;
	border: 1px solid var(--color-concrete, #9CA3AF);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	color: var(--color-greyka-onyx, #1A1C20);
	background: #fff;
}

.gk-cats-chips__chip--activo {
	background: var(--color-greyka-onyx, #1A1C20);
	border-color: var(--color-greyka-onyx, #1A1C20);
	color: #fff;
}

/* ── Secciones de producto ─────────────────────────────────────────────── */
.gk-portada-sec {
	/* 26 px abajo, no 4: medido en staging, entre la ultima fila de producto y
	   el titulo de «Explora por categoria» quedaban 4 px y se leian pegados. */
	padding: 16px 0 26px;
}

.gk-portada-sec__cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 9px;
}

.gk-portada-sec__titulo {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--color-greyka-onyx, #1A1C20);
}

.gk-portada-sec__sub {
	font-size: 13px;
	margin: 2px 0 0;
	color: var(--color-text-muted, #6B7280);
}

.gk-portada-sec__mas {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-kinetic-blue, #2952FF);
	text-decoration: none;
	white-space: nowrap;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.gk-portada-rejilla {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* minmax(0,1fr) y NO 1fr: `1fr` lleva `min-width: auto` implicito, asi que
	   la pista se estira hasta el ancho minimo del contenido de la tarjeta.
	   Medido en staging: dos columnas de 271,3 px dentro de un contenedor de
	   364 -> las tarjetas se salian. Con minmax(0,...) la pista puede encoger. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.gk-portada-rejilla__item {
	min-width: 0;
	/* El contenedor visual —fondo, sombra, radio y el flex en columna— lo pone
	   ahora `.gk-standard-card`, la misma tarjeta que la tienda, el buscador,
	   las colecciones y los cross-sell. Aqui llevaba borde propio y radio de
	   10 px, que era la ultima superficie con tarjeta distinta.
	   El motivo original —«sin contenedor visual las filas se funden»— sigue
	   cubierto: la tarjeta estandar trae fondo blanco y sombra. */
	overflow: hidden;
}

/* Alturas iguales: las tarjetas con precio rebajado median 306 px y las
   normales 287, asi que la fila salia descuadrada. El nombre absorbe la
   diferencia y el precio queda siempre abajo, alineado entre columnas. */
.gk-portada-rejilla__item > .gk-deal-image {
	/* La imagen manda su alto: sin esto el contenedor se estiraba a 288 px
	   para una foto de 175 y dejaba 57 px de blanco arriba y otros 57 abajo.
	   Medido en staging. */
	flex: 0 0 auto;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.gk-portada-rejilla__item > .gk-deal-image img {
	width: 100%;
	height: 100%;
	/* `contain` y no `cover`: son fotos de proveedor con encuadres distintos y
	   recortar deja zapatos cortados. Preferimos el margen al recorte. */
	object-fit: contain;
}
.gk-portada-rejilla__item > .gk-deal-title,
.gk-portada-rejilla__item > a { flex: 1 1 auto; }
.gk-portada-rejilla__item > .gk-deal-prices,
.gk-portada-rejilla__item > .gk-deal-shipping { flex: 0 0 auto; }

/* El padding lo pone ahora `.gk-standard-card` (16 px), igual que en la tienda,
   el buscador, las colecciones, las vitrinas y los cross-sell. Los 10 px que
   habia aqui se sumaban a ese y dejaban el texto a 26 px del borde. */

@media (min-width: 768px)  { .gk-portada-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .gk-portada-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Categorías con detalle ────────────────────────────────────────────── */
.gk-cats-detalle { padding: 8px 0 4px; }

.gk-cats-detalle__lista {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 768px) { .gk-cats-detalle__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gk-cats-detalle__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var(--color-concrete, #9CA3AF);
	border-radius: 10px;
	text-decoration: none;
	color: var(--color-greyka-onyx, #1A1C20);
	background: #fff;
}

.gk-cats-detalle__nombre { font-size: 14px; font-weight: 600; }
.gk-cats-detalle__fl { color: var(--color-text-muted, #6B7280); font-size: 18px; line-height: 1; }
/* La bajada solo tiene sitio dentro de la ficha; en la fila de texto sobra. */
.gk-cats-detalle__sub { display: none; }

/* La celda «Ver toda la tienda» existe SOLO para cerrar la rejilla de cuatro
   columnas de escritorio, donde las siete categorías dejan un hueco. Fuera de
   ahí sobra por partida doble: el botón de debajo de la rejilla ya lleva al
   catálogo, y sus estilos —el tamaño del SVG incluido— viven en el bloque de
   escritorio, así que el icono salía a tamaño natural y reventaba la celda.
   Visto en tablet real, no en el emulador. */
.gk-cats-detalle__li--tienda { display: none; }

/* Las fichas ilustradas solo existen de 1024 px en adelante; hasta ahí la
   lista es texto. Siete fotos a ancho de móvil serían siete pantallas de
   scroll en el punto donde el visitante ya decidió si compra o no. */
.gk-cats-detalle__img { display: none; }

/* ── CTA ───────────────────────────────────────────────────────────────── */
.gk-portada-cta { padding: 18px 0 4px; }

.gk-btn-tienda {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px;
	border-radius: 10px;
	background: var(--color-kinetic-blue, #2952FF);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}



/* ═══════════════════════════════════════════════════════════════════════════
 * Portada · tablet y escritorio (2026-09-08)
 *
 * El diseño se hizo a 375 px y se comprobó a 768 y 1440. Lo que fallaba,
 * medido en staging y no supuesto:
 *   - El botón «Ver toda la tienda» ocupaba 1.169 px de ancho.
 *   - Los títulos de sección se quedaban en 17 px a 1.425 de ancho.
 *   - El titular del banner iba a 30 px encajado en 324 px.
 *   - Chips y titular empezaban a 14 y 64 px mientras el contenido a 128.
 *   - El banner en tablet caía a 176 px de alto: demasiado fino.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* El texto del banner y los chips comparten ahora .gk-container con el resto,
   así que alinean solos con la rejilla sea cual sea el ancho que Astra use
   —97% en tablet, 82% en escritorio—. Nada de replicar esos porcentajes aquí:
   se desincronizarían en cuanto Astra los cambiase. */
.gk-banner__texto > .gk-container,
.gk-cats-chips > .gk-container {
	width: 100%;
}

.gk-cats-chips > .gk-container > ul {
	padding: 0;
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
	/* Ratio intermedio: con el 1200/280 de escritorio, a 768 px el banner se
	   quedaba en 176 px y la foto del producto no se leía. */
	.gk-banner__slide { aspect-ratio: 1024 / 300; }

	/* Sin esto el padding base se SUMA al margen de .gk-container y el titular
	   acababa a 181 px mientras la rejilla empezaba a 128. Lo posiciona el
	   contenedor, no el padding. */
	.gk-banner__texto { padding: 0; }

	.gk-banner__titulo { font-size: clamp(26px, 3.4vw, 34px); max-width: 16ch; }
	.gk-banner__bajada { font-size: 14.5px; max-width: 40ch; }

	.gk-portada-sec { padding: 22px 0 34px; }
	.gk-portada-sec__titulo { font-size: 20px; }
	.gk-portada-sec__sub { font-size: 14px; }
	.gk-portada-sec__cab { margin-bottom: 14px; }

	.gk-cats-chips { padding: 14px 0 6px; }

	/* Deja de ocupar todo el ancho: en pantalla grande un botón de borde a
	   borde se lee como una barra, no como un botón.
	   El centrado va en el PADRE: `width:auto` no encoge un `display:flex` de
	   nivel bloque, así que el botón seguía midiendo los 1.169 del contenedor. */
	.gk-portada-cta .gk-container,
	.gk-portada-cta {
		display: flex;
		justify-content: center;
	}

	.gk-btn-tienda {
		width: fit-content;
		min-width: 260px;
		padding: 14px 40px;
	}

}

/* ── Escritorio ────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
	.gk-banner__slide { aspect-ratio: 3 / 1; }

	.gk-banner__etiqueta { font-size: 12px; }
	.gk-banner__titulo { font-size: clamp(34px, 2.9vw, 44px); max-width: 20ch; margin-bottom: 10px; }
	.gk-banner__bajada { font-size: 16px; max-width: 46ch; margin-bottom: 18px; }
	.gk-banner__cta { font-size: 15px; padding: 14px 26px; }

	.gk-portada-sec { padding: 18px 0 40px; }
	.gk-portada-sec__titulo { font-size: 23px; }
	.gk-portada-sec__sub { font-size: 15px; }
	.gk-portada-sec__mas { font-size: 15px; }

	/* Con sitio de sobra los chips no necesitan desplazamiento lateral, y
	   dejarlos en una sola línea que se corta se lee como si faltara algo. */
	.gk-cats-chips > .gk-container > ul {
		flex-wrap: wrap;
		overflow-x: visible;
		gap: 9px;
	}

	.gk-cats-chips__chip { font-size: 14.5px; padding: 11px 18px; }

	.gk-portada-rejilla { gap: 18px; }

	.gk-cats-detalle { padding: 14px 0 6px; }
	.gk-cats-detalle__lista { gap: 12px; }
	.gk-cats-detalle__item { min-height: 60px; padding: 14px 18px; }
	.gk-cats-detalle__nombre { font-size: 15px; }

	.gk-portada-cta { padding: 26px 0 6px; }

}

/* ── Pantallas anchas ──────────────────────────────────────────────────── */
@media (min-width: 1440px) {
	/* El banner deja de crecer a lo alto: pasados los ~1.700 px un ratio fijo
	   lo convierte en una franja desproporcionada. */
	/* 3/1, que es el ratio de banner-hero-escritorio.webp (2400x800): a 1425 de
	   ancho da 475 px, el rango de Mercado Libre (480-500). El ratio del hueco
	   SIGUE al de la imagen a propósito — al desacoplarlos volvía el recorte.
	   Si cambias el alto, regenera la imagen con el ratio nuevo. */
	.gk-banner__slide { aspect-ratio: 3 / 1; max-height: 520px; }
	.gk-portada-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Portada · círculos de categoría y atajos personales (2026-09-08)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Círculos de categoría ─────────────────────────────────────────────── */
/* Ocultos en móvil: ahí ya están los chips sobre el banner y repetirlos
   gastaría el pliegue que costó ganar. Una sola decisión, y vive en el CSS. */
.gk-cats-iconos { display: none; }

.gk-cats-iconos ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
	justify-content: space-between;
}

.gk-cats-iconos__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	color: var(--color-greyka-onyx, #1A1C20);
	padding: 6px 4px;
	border-radius: 10px;
	min-width: 0;
}

.gk-cats-iconos__circulo {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-vapor-white, #F4F5F7);
	border: 1px solid #E7E9EF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: border-color .18s ease, transform .18s ease;
}

.gk-cats-iconos__circulo img {
	width: 100%;
	height: 100%;
	/* `contain` con un poco de aire: son fotos de proveedor con encuadres
	   distintos y recortarlas en círculo deja zapatos partidos. */
	object-fit: contain;
	padding: 7px;
}

.gk-cats-iconos__circulo--todo { color: var(--color-kinetic-blue, #2952FF); }
.gk-cats-iconos__circulo--todo svg,
.gk-cats-iconos__svg { width: 26px; height: 26px; color: var(--color-kinetic-blue, #2952FF); }

.gk-cats-iconos__inicial {
	font-weight: 800;
	font-size: 24px;
	color: var(--color-text-muted, #6B7280);
}

.gk-cats-iconos__nombre {
	font-size: 12.5px;
	font-weight: 500;
	text-align: center;
	line-height: 1.25;
}

.gk-cats-iconos__item:hover .gk-cats-iconos__circulo,
.gk-cats-iconos__item:focus-visible .gk-cats-iconos__circulo {
	border-color: var(--color-kinetic-blue, #2952FF);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.gk-cats-iconos__circulo { transition: none; }
	.gk-cats-iconos__item:hover .gk-cats-iconos__circulo { transform: none; }
}

/* ── Atajos personales ─────────────────────────────────────────────────── */
/* Solo en escritorio: en tablet la fila de círculos ya ocupa ese papel y
   apilar las dos empujaría el producto fuera del pliegue otra vez. */
.gk-atajos { display: none; }

.gk-atajos__titulo {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var(--color-greyka-onyx, #1A1C20);
}

.gk-atajos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Número de columnas FIJO, no `auto-fit`. Con auto-fit y una sola señal, la
	   tarjeta se estiraba a los 1.169 px del contenedor y su figura cuadrada se
	   volvía una imagen de 1.169 px de alto: medido, empujaba el primer
	   producto de 646 a 2.090 px. Con columnas fijas, una tarjeta ocupa su
	   hueco y las demás quedan vacías. */
	/* Cinco huecos como en la referencia. Fijo y no `auto-fit`: con una sola
	   señal, auto-fit estiraba la tarjeta a los 1.169 px del contenedor y su
	   figura cuadrada se volvía una imagen de 1.169 px de alto. */
	/* Ancho FIJO de 190 px por tarjeta, pedido por el dueño el 2026-09-10:
	   antes eran cinco fracciones del contenedor y salían a 211,95 px. Con
	   ancho fijo sobran 171 px en un contenedor de 1.169, y `space-between`
	   los reparte entre las tarjetas en vez de dejarlos todos a la derecha. */
	grid-template-columns: repeat(5, 190px);
	justify-content: space-between;
	gap: 12px;
	/* `stretch` y NO `start`: con start cada tarjeta medía lo que su contenido,
	   y un nombre de dos líneas la hacía más alta que la de al lado. La fila
	   salía descuadrada. */
	align-items: stretch;
}

.gk-atajos__item {
	display: flex;
	/* 300 px de alto, pedido por el dueño: eran 230,47. El coste está medido y
	   se asume a conciencia — esta fila va entre el banner y el primer
	   producto, así que los 70 px extra los paga el pliegue. */
	min-height: 300px;
}

/* El enlace LLENA la celda. Sin esto el `display: flex` del <li> —que se puso
   para igualar alturas— deja que el <a> se dimensione por su contenido, y una
   tarjeta con nombre corto salia mas estrecha que las demas: medido, 162 px
   frente a 224. Igualar el alto habia roto el ancho. */
.gk-atajos__enlace {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

.gk-atajos__enlace {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 11px 12px 12px;
	background: #fff;
	border: 1px solid #E7E9EF;
	border-radius: 12px;
	text-decoration: none;
	color: var(--color-greyka-onyx, #1A1C20);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.gk-atajos__enlace:hover,
.gk-atajos__enlace:focus-visible {
	border-color: var(--color-kinetic-blue, #2952FF);
	box-shadow: 0 4px 14px rgba(26, 28, 32, .07);
}

/* El motivo es lo que diferencia esto de una rejilla de recomendados: dice
   POR QUÉ está ahí, no solo qué es. */
.gk-atajos__motivo {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-greyka-onyx, #1A1C20);
	margin-bottom: 9px;
	/* Sin versalitas ni azul: es el TÍTULO de la tarjeta, como en la
	   referencia, no una etiqueta de sección. El azul se reserva para la
	   acción y gastarlo aquí le quita fuerza al botón de comprar. */
}

.gk-atajos__figura {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	/* Tope duro, y el motivo original sigue vigente: sin él,
	   `aspect-ratio` sobre una tarjeta ancha disparó una vez la figura a 1.169 px de alto y
	   empujó el primer producto de 646 a 2.090. Sube de 100 a 140 porque la
	   tarjeta pasó de 230 a 300 px y la foto es lo que se mira. */
	max-height: 140px;
	/* Blanco, como la tarjeta de producto del resto de la tienda: el gris hacía
	   que la tarjeta se leyera como dos bloques en vez de uno. */
	background: #fff;
	border-radius: 9px;
	overflow: hidden;
	margin-bottom: 10px;
}

.gk-atajos__figura img { width: 100%; height: 100%; object-fit: contain; }

/* La tarjeta de contra entrega no lleva foto de producto sino icono. */
.gk-atajos__figura--icono {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-kinetic-blue, #2952FF);
	aspect-ratio: 1 / 1;
	max-height: 100px;
}

.gk-atajos__figura--icono svg { width: 34px; height: 34px; }
.gk-atajos__figura--icono { max-height: 140px; }

.gk-atajos__nombre {
	font-size: 13px;
	line-height: 1.35;
	margin-bottom: 6px;
	/* Dos líneas y corta: los nombres de esta tienda llegan a 45 caracteres y
	   sin esto las tarjetas de la fila salían de alturas distintas. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gk-atajos__precio {
	font-weight: 700;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	margin-top: auto;
}

.gk-atajos__stock {
	font-size: 11.5px;
	font-weight: 700;
	color: #B26A00;
	margin-top: 3px;
}


/* ── Tarjeta de garantías ──────────────────────────────────────────────── */
/* Primera de la fila y la única que se renderiza en PHP. Lleva las dos
   promesas que estaban en la sección del final de la portada: allí las leía
   quien ya había decidido; aquí, pegadas al banner, las lee quien todavía
   está decidiendo. */
.gk-atajos__enlace--promo {
	/* Fondo blanco, como el resto de las tarjetas de la fila y como la tarjeta
	   de producto del resto de la tienda. Lo que la distingue es el contenido
	   —dos promesas con icono y un botón—, no un color de fondo distinto. */
	background: #fff;
	cursor: default;
}

.gk-atajos__promesas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* `center` y no `space-between`: con dos promesas de alturas distintas,
	   repartir el hueco las separaba tanto que dejaban de leerse como un par. */
	justify-content: center;
	gap: 18px;
	flex: 1 1 auto;
	margin-bottom: 12px;
}

.gk-atajos__promesa {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.gk-atajos__promesa-icono {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	/* Se invierte con el fondo de la tarjeta: blanco sobre blanco no se veía. */
	background: var(--color-vapor-white, #F4F5F7);
	color: var(--color-kinetic-blue, #2952FF);
}

.gk-atajos__promesa-icono svg { width: 19px; height: 19px; }

.gk-atajos__promesa-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.gk-atajos__promesa-tit {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-greyka-onyx, #1A1C20);
}

.gk-atajos__boton {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 40 px: no es un objetivo táctil de móvil —esta fila es de escritorio—
	   sino la señal visual de que se puede pulsar. */
	min-height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	background: #EAF0FF;
	/* 7,37:1 sobre ese fondo, medido en la página. */
	color: #1B3BC7;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.gk-atajos__boton:hover,
.gk-atajos__boton:focus-visible {
	background: var(--color-kinetic-blue, #2952FF);
	color: #fff;
}

.gk-atajos__promesa-sub {
	font-size: 12px;
	line-height: 1.4;
	/* Sobre blanco `--color-text-muted` sí llegaría a AA (4,83:1), pero se
	   deja este gris más oscuro: la tarjeta puede volver a tener fondo vapor
	   —ahí el token cae a 4,43:1 y no llega— y este aguanta los dos. */
	color: #4B5058;
}

@media (prefers-reduced-motion: reduce) {
	.gk-atajos__enlace { transition: none; }
	.gk-atajos__boton { transition: none; }
}

/* ── Dónde aparece cada uno ────────────────────────────────────────────── */
/*
 * Reparto por ancho, decidido el 2026-09-08:
 *   móvil      chips de texto sobre el banner
 *   tablet     círculos de categoría bajo el banner
 *   escritorio tarjetas de atajo bajo el banner, SIN círculos
 *
 * En escritorio no conviven las dos: apiladas costaban 494 px antes del primer
 * producto. El dueño eligió las tarjetas, que además llevan producto real.
 */
@media (min-width: 768px) {
	.gk-cats-chips { display: none; }
	.gk-cats-iconos { display: block; padding: 18px 0 6px; }
}

@media (min-width: 1024px) {
	/* Fuera los círculos: en escritorio mandan las tarjetas. */
	.gk-cats-iconos { display: none; }
	/* Las tarjetas MONTAN sobre el banner, como en la referencia: el margen
	   negativo las sube 56 px dentro de sus 475, poco menos del 12%.
	   `position: relative` + `z-index` hacen falta para que pinten ENCIMA y no
	   queden tapadas por la imagen.
	   Correccion de rumbo: en la iteracion anterior se leyo «se sobreponen»
	   como una queja y se separaron 26 px. Era justo lo contrario. */
	.gk-atajos {
		display: block;
		position: relative;
		z-index: 2;
		margin-top: -56px;
		padding: 0 0 4px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Escritorio · fichas de categoría y garantías (2026-09-10)
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
	/* Ocho celdas para siete categorías: la que sobra la ocupa el enlace a la
	   tienda, así la rejilla cierra en lugar de dejar un hueco. Por eso el
	   botón suelto de abajo se oculta aquí y no en todas partes: en móvil, sin
	   fichas, sigue siendo la única salida al catálogo. */
	.gk-cats-detalle__lista { gap: 16px; }

	.gk-cats-detalle__li--ficha,
	.gk-cats-detalle__li--tienda { display: flex; }

	.gk-cats-detalle__item--ficha {
		position: relative;
		display: block;
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 14px;
		overflow: hidden;
		/* La proporción del hueco IGUALA la de la imagen (720×540). Si no
		   coinciden, `object-fit: cover` recorta — que es exactamente lo que
		   pasó con el banner y costó tres intentos. */
		aspect-ratio: 4 / 3;
		background: var(--color-greyka-onyx, #1A1C20);
	}

	.gk-cats-detalle__item--ficha .gk-cats-detalle__img {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 260ms ease;
	}

	.gk-cats-detalle__item--ficha:hover .gk-cats-detalle__img,
	.gk-cats-detalle__item--ficha:focus-visible .gk-cats-detalle__img {
		transform: scale(1.04);
	}

	.gk-cats-detalle__item--ficha .gk-cats-detalle__nombre {
		position: absolute;
		left: 18px;
		right: 18px;
		bottom: 16px;
		z-index: 1;
		color: #fff;
		font-size: 17px;
		font-weight: 700;
		letter-spacing: -0.01em;
		/* El velo va incrustado en la imagen y está medido: el blanco sobre él
		   da entre 6,13:1 y 11,55:1. Nada de `text-shadow` para tapar: si el
		   contraste dependiera de la sombra, no sería contraste. */
	}

	.gk-cats-detalle__item--ficha .gk-cats-detalle__fl { display: none; }

	.gk-cats-detalle__item--tienda {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 6px;
		aspect-ratio: 4 / 3;
		min-height: 0;
		padding: 18px;
		border: 0;
		border-radius: 14px;
		background: var(--color-greyka-onyx, #1A1C20);
		color: #fff;
	}

	.gk-cats-detalle__item--tienda svg { width: 26px; height: 26px; margin-bottom: auto; }
	.gk-cats-detalle__item--tienda .gk-cats-detalle__nombre { font-size: 17px; font-weight: 700; }
	.gk-cats-detalle__item--tienda .gk-cats-detalle__sub { display: block; font-size: 13.5px; color: #D6D8DC; }

	/* Ya está en la rejilla de arriba. */
	.gk-portada-cta { display: none; }

	/* ── Garantías ─────────────────────────────────────────────────────── */
}