/* ==========================================================================
   Cuba Provider — repuestos-promo.css
   Franja «¿Qué modelo reparas?» de la portada (template-parts/home/repuestos.php).
   Solo se carga en la portada; la caja con autocompletado y los accesos
   «Lo más buscado» vienen de repuestos-search.css.
   ========================================================================== */

.cp-home-rep__box {
	position: relative;
	display: grid;
	gap: var(--cp-s5);
	padding: var(--cp-s5) var(--cp-s4);
	border-radius: var(--cp-r-xl);
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(33, 160, 74, 0.22) 0%, rgba(33, 160, 74, 0) 60%),
		var(--cp-header-dark);
	color: rgba(255, 255, 255, 0.86);
	isolation: isolate;
}

/* El círculo decorativo, recortado por su propia capa (las sugerencias no). */
.cp-home-rep__box::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(circle at calc(100% + 20px) calc(100% + 30px), transparent 0 110px, rgba(255, 255, 255, 0.05) 111px 140px, transparent 141px);
	pointer-events: none;
}

.cp-home-rep__intro {
	display: grid;
	align-content: start;
	gap: var(--cp-s3);
	min-width: 0;
}

.cp-home-rep__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--cp-r-pill);
	background: rgba(33, 160, 74, 0.22);
	color: #9be7b4;
	font-size: var(--cp-fs-xs);
	font-weight: 750;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cp-home-rep__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
}

.cp-home-rep__text {
	margin: 0;
	font-size: var(--cp-fs-sm);
	line-height: 1.55;
}

/* Caja sobre fondo oscuro: sin borde verde, con sombra oscura. */
.cp-home-rep .cp-rep-search {
	margin-top: 2px;
	border-color: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.cp-home-rep .cp-rep-search:focus-within {
	box-shadow: 0 0 0 4px rgba(155, 231, 180, 0.35), 0 10px 28px rgba(0, 0, 0, 0.25);
}

.cp-home-rep__side {
	display: grid;
	align-content: start;
	gap: var(--cp-s3);
	min-width: 0;
}

.cp-home-rep__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: #fff;
	font-size: var(--cp-fs-sm);
	font-weight: 750;
}

.cp-home-rep__label .cp-icon {
	color: var(--cp-accent);
}

.cp-home-rep__all {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 6px;
	min-height: 40px;
	color: #9be7b4;
	font-size: var(--cp-fs-sm);
	font-weight: 800;
}

.cp-home-rep__all:hover {
	color: #fff;
}

@media (min-width: 600px) {
	.cp-home-rep .cp-rep-top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.cp-home-rep__box {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--cp-s8);
		padding: var(--cp-s8) var(--cp-s10);
	}
	.cp-home-rep__text {
		font-size: var(--cp-fs-md);
	}
	.cp-home-rep .cp-rep-search {
		max-width: 560px;
	}
	.cp-home-rep__side {
		padding-left: var(--cp-s8);
		border-left: 1px solid rgba(255, 255, 255, 0.1);
	}
}