/* ============================================================================
 * Home v2 de Khome — capa de fidelidad para la plantilla de Elementor.
 * Clava lo que los widgets básicos de Elementor no hacen (recorte de imágenes a
 * ratio, zoom al hover, degradado de la banda, alineados). Las clases las pone
 * el generador (design/home-v2/khome-home-v2.generator.js) vía _css_classes.
 * Referencia: design/home-v2/Home-v2.dc.html.
 * ========================================================================== */

/* --- Recorte uniforme de imágenes de tarjeta (object-fit: cover) --- */
.khome-ratio .elementor-widget-container,
.khome-ratio .elementor-image,
.khome-ratio a {
	overflow: hidden;
	display: block;
	background: #f5f2f1;
}
.khome-ratio img {
	width: 100% !important;
	height: auto !important;
	display: block;
	object-fit: cover;
}
.khome-ratio.r-4-5 img { aspect-ratio: 4 / 5; }
.khome-ratio.r-4-3 img { aspect-ratio: 4 / 3; }

/* --- Zoom suave de la foto al pasar el ratón sobre la tarjeta --- */
.khome-ratio img {
	transition: transform .6s ease;
}
.khome-card:hover .khome-ratio img,
.khome-ratio:hover img {
	transform: scale(1.04);
}

/* --- Nombre de categoría: flecha (→) pegada al borde derecho --- */
.khome-cat-name .elementor-heading-title {
	display: flex;
	align-items: center;
}
.khome-cat-name .elementor-heading-title::after {
	content: "\2192"; /* → */
	margin-left: auto;
	padding-left: 12px;
	font-weight: 400;
}

/* --- Nombre de modelo: peso 800 (Nunito Sans) --- */
.khome-mod-name .elementor-heading-title {
	font-weight: 800;
}

/* --- Cabecera de sección (H2 a la izq. + enlace a la derecha) --- */
/* El bloque izquierdo es un contenedor full (100%) y empujaría el enlace abajo:
   que los hijos se ajusten a su contenido para que el space-between funcione.
   El flex vive en el .e-con-inner del contenedor boxed. */
.khome-sec-head > .e-con-inner {
	align-items: flex-end;
}
.khome-sec-head > .e-con-inner > * {
	width: auto !important;
}
.khome-sec-head > .e-con-inner > :last-child {
	margin-left: auto;
}

/* --- Banda "desenfundables": degradado oscuro + texto centrado --- */
.khome-band {
	position: relative;
	justify-content: center; /* centra verticalmente el bloque de texto */
}
/* content con !important: Elementor pone content:none en los ::before de sus contenedores. */
.khome-band::before {
	content: "" !important;
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0) 100%);
}
.khome-band > * {
	position: relative;
	z-index: 1;
}

/* --- Responsive --- */
@media (max-width: 640px) {
	.khome-band {
		min-height: 460px !important;
	}
}