/* End custom CSS */

.elementor-28436 .elementor-element.elementor-element-f34c81d {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--margin-top: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--margin-right: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 20px;
	--padding-right: 20px;
}

.elementor-28436 .elementor-element.elementor-element-f34c81d.e-con {
	--flex-grow: 0;
	--flex-shrink: 0;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-button a {
	background-color: #008e7a;
	flex-direction: row;
	font-family: "Giga Sans", Sans-serif;
	font-size: 1.2em;
	font-weight: 600;
	text-transform: none;
	font-style: normal;
	line-height: 1em;
	letter-spacing: -1px;
	padding: 10px 20px 10px 20px;
	color: var(--e-global-color-text);
	border-radius: 20px 20px 20px 20px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-swiper-button-prev:hover, .elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-swiper-button-next:hover {
	background-color: #00cea6;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 > .elementor-widget-container {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56.elementor-element {
	--align-self: center;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card-slider {
	padding: 20px 20px 20px 20px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card {
	border-radius: 25px 25px 25px 25px;
	padding: 0px 20px 0px 20px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-image img {
	aspect-ratio: 2/3;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-image {
	border-radius: 0px 0px 0px 0px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-body::before {
	opacity: 0;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-body {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-heading {
	align-items: start;
	text-align: start;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-title {
	font-family: "Giga Sans", Sans-serif;
	font-size: 2em;
	font-weight: 600;
	text-transform: none;
	font-style: normal;
	line-height: 1em;
	letter-spacing: -1px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-subheading {
	font-family: "Giga Sans", Sans-serif;
	font-size: 2em;
	font-weight: 600;
	text-transform: none;
	font-style: normal;
	line-height: 1em;
	letter-spacing: -1px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-description {
	text-align: left;
	font-family: "Giga Sans", Sans-serif;
	font-size: 1em;
	font-weight: 200;
	line-height: 1.2em;
	color: var(--e-global-color-1a0d90e);
	margin-top: 0px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-button {
	justify-content: center;
	margin-top: 0px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-button a:hover {
	color: var(--e-global-color-text);
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-cardslider-pagination {
	justify-content: center;
	margin: 0px 0px 0px 0px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-cardslider-pagination .rkit-cardslider-bullet {
	width: 8px;
	height: 8px;
	border-radius: 25px 25px 25px 25px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-cardslider-pagination .rkit-cardslider-bullet:hover {
	width: 8px;
	height: 8px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-cardslider-pagination .rkit-cardslider-bullet.rkit-cardslider-bullet-active {
	width: 24px;
	height: 8px;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-flex-absolute-card-slider {
	left: -9px !important;
	right: -9px !important;
}

.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-swiper-button-prev, .elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-swiper-button-next {
	transition-duration: 200ms;
}

@media (max-width:1024px) {
	.elementor-28436 .elementor-element.elementor-element-f34c81d {
		--gap: 0px 0px;
		--row-gap: 0px;
		--column-gap: 0px;
		--padding-top: 0px;
		--padding-bottom: 0px;
		--padding-left: 20px;
		--padding-right: 20px;
	}
	
	.elementor-28436 .elementor-element.elementor-element-f34c81d.e-con {
		--align-self: center;
	}
	
	.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-flex-absolute-card-slider {
		left: 70px !important;
		right: 70px !important;
	}
}

@media (max-width:767px) {
	.elementor-28436 .elementor-element.elementor-element-f34c81d {
		--justify-content: center;
		--align-items: center;
		--container-widget-width: calc(( 1 - var(--container-widget-flex-grow) ) * 100%);
		--gap: 0px 0px;
		--row-gap: 0px;
		--column-gap: 0px;
		--margin-top: 0px;
		--margin-bottom: 0px;
		--margin-left: 0px;
		--margin-right: 0px;
		--padding-top: 20px;
		--padding-bottom: 0px;
		--padding-left: 10px;
		--padding-right: 10px;
	}
	
	.elementor-28436 .elementor-element.elementor-element-e132d56 > .elementor-widget-container {
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}
	
	.elementor-28436 .elementor-element.elementor-element-e132d56.elementor-element {
		--align-self: center;
	}
	
	.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card-slider {
		padding: 0px 0px 0px 0px;
	}
	
	.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-heading {
		align-items: start;
		text-align: start;
	}
	
	.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-title {
		font-size: 2em;
	}
	
	.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-description {
		font-size: .9rem;
		line-height: 1em;
	}
	
	.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-card .card-button a {
		font-size: 1em;
		line-height: 1em;
		padding: 6px 20px 6px 20px;
	}
	
	.elementor-28436 .elementor-element.elementor-element-e132d56 .rkit-flex-absolute-card-slider {
		left: 64px !important;
		right: 64px !important;
	}
}

/* Start custom CSS for rkit-card-slider, class: .elementor-element-e132d56 */

/* =====================================================
   CARRUSEL DE PRODUCTOS BENELEIT
   La tipografía se controla desde Elementor
   ===================================================== */

/* Título en una sola línea y en dos colores */
.carrusel-productos .card-heading {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: baseline !important;
	justify-content: flex-start !important;
	gap: 0 !important;
}

.carrusel-productos :is(.card-title, .card-subheading) {
	display: inline-block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.carrusel-productos .card-title a, .carrusel-productos .card-title a:is(:hover, :focus) {
	color: #333 !important;
	text-decoration: none !important;
}

.carrusel-productos .card-subheading {
	color: var(--product-color, #333) !important;
}

/*
   Espacio uniforme para la descripción: mantiene alineados los botones
   sin sacarlos del flujo ni superponerlos al texto.
*/
.carrusel-productos .card-heading + *, .carrusel-productos :is(
  .card-description,
  .card-desc,
  .card-text,
  .card-excerpt,
  .ue-text
) {
	min-height: 3.4em !important;
	box-sizing: border-box !important;
}

/*
   Un solo color por producto. La variable se asigna tanto al encabezado
   (para el subtítulo) como al enlace (para el hover del botón).
*/
.carrusel-productos :is(.card-heading:has(a[href*="/beneyus/" i]), a[href*="/beneyus/" i]) {
	--product-color: #027b35;
}

.carrusel-productos :is(
  .card-heading:has(a[href*="/benecafnf-2/" i]),
  .card-heading:has(a[href*="/benecafnf/" i]),
  .card-heading:has(a[href*="/benecaf-nf/" i]),
  a[href*="/benecafnf-2/" i],
  a[href*="/benecafnf/" i],
  a[href*="/benecaf-nf/" i]
) {
	--product-color: #8d7632;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benegly/" i]), a[href*="/benegly/" i]) {
	--product-color: #852b3a;
}

.carrusel-productos :is(.card-heading:has(a[href*="/nanoox-a/" i]), a[href*="/nanoox-a/" i]) {
	--product-color: #e52127;
}

.carrusel-productos :is(.card-heading:has(a[href*="/beneaqua/" i]), a[href*="/beneaqua/" i]) {
	--product-color: #ff7276;
}

.carrusel-productos :is(.card-heading:has(a[href*="/promass/" i]), a[href*="/promass/" i]) {
	--product-color: #eeb94c;
}

.carrusel-productos :is(.card-heading:has(a[href*="/nutrifit/" i]), a[href*="/nutrifit/" i]) {
	--product-color: #e54260;
}

.carrusel-productos :is(.card-heading:has(a[href*="/beneox/" i]), a[href*="/beneox/" i]) {
	--product-color: #035c67;
}

.carrusel-productos :is(.card-heading:has(a[href*="/beneloe/" i]), a[href*="/beneloe/" i]) {
	--product-color: #3bd4ae;
}

.carrusel-productos :is(.card-heading:has(a[href*="/beneplen/" i]), a[href*="/beneplen/" i]) {
	--product-color: #aa6c10;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benegut/" i]), a[href*="/benegut/" i]) {
	--product-color: #b05c50;
}

.carrusel-productos :is(.card-heading:has(a[href*="/beneoff" i]), a[href*="/beneoff" i]) {
	--product-color: #9d2785;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benemega/" i]), a[href*="/benemega/" i]) {
	--product-color: #789904;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benedtx/" i]), a[href*="/benedtx/" i]) {
	--product-color: #d41553;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benemov/" i]), a[href*="/benemov/" i]) {
	--product-color: #0098cd;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benezen/" i]), a[href*="/benezen/" i]) {
	--product-color: #ffb1b9;
}

.carrusel-productos :is(.card-heading:has(a[href*="/beneclim/" i]), a[href*="/beneclim/" i]) {
	--product-color: #d8ab71;
}

.carrusel-productos :is(.card-heading:has(a[href*="/beneforce/" i]), a[href*="/beneforce/" i]) {
	--product-color: #001c71;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benemel/" i]), a[href*="/benemel/" i]) {
	--product-color: #cf8a00;
}

.carrusel-productos :is(.card-heading:has(a[href*="/capuchino/" i]), a[href*="/capuchino/" i]) {
	--product-color: #c6ab85;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benetea/" i]), a[href*="/benetea/" i]) {
	--product-color: #e73737;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benegen/" i]), a[href*="/benegen/" i]) {
	--product-color: #eb9c4e;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benefresh/" i]), a[href*="/benefresh/" i]) {
	--product-color: #65baaf;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benekid/" i]), a[href*="/benekid/" i]) {
	--product-color: #f39a1b;
}

.carrusel-productos :is(.card-heading:has(a[href*="/benecitrus/" i]), a[href*="/benecitrus/" i]) {
	--product-color: #fce511;
}

/* Botones: se excluyen los enlaces del título y de las imágenes */
.carrusel-productos a[href*="beneleit.mx/"]:not(.card-title a, :has(img)) {
	background: #159772 !important;
	border-color: #159772 !important;
	color: #fff !important;
	text-decoration: none !important;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}

.carrusel-productos a[href*="beneleit.mx/"]:not(.card-title a, :has(img)) * {
	color: inherit !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}

.carrusel-productos a[href*="beneleit.mx/"]:not(.card-title a, :has(img)):is(:hover, :focus-visible) {
	background: var(--product-color, #159772) !important;
	border-color: var(--product-color, #159772) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 7px 16px rgba(0, 0, 0, 14%) !important;
}

/* Imágenes y tarjetas uniformes */
.carrusel-productos {
	/* Cambia estos límites si necesitas imágenes más grandes o pequeñas */
	--product-image-height: clamp(190px, 22vw, 280px);
}

.carrusel-productos :is(.owl-stage, .swiper-wrapper, .slick-track) {
	display: flex;
	align-items: stretch;
}

.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) {
	height: auto !important;
	flex-shrink: 0;
	--product-image-padding: 0px;
}

.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) a:has(img) {
	display: block;
	width: 100%;
}

.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) img {
	display: block !important;
	width: 100% !important;
	height: var(--product-image-height) !important;
	padding-block: var(--product-image-padding) !important;
	box-sizing: border-box !important;
	object-fit: contain !important;
	object-position: center !important;
}

/* NanoOX-A llena más su archivo de origen; este margen iguala su escala visual */
.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):has(a[href*="/nanoox-a/" i]) {
	--product-image-padding: 32px;
}

/* Movimiento de tarjetas compatible con Owl, Swiper y Slick */
.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div {
	position: relative !important;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box !important;
	background: #f7f7f7 !important;
	/*fondo*/
	transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, filter .28s ease !important;
	will-change: transform;
}

/* =====================================================
   PAGINACIÓN TIPO BARRA DE PROGRESO
   ===================================================== */
.carrusel-productos {
	--progress-width: 315px;
	--progress-height: 5px;
	--progress-active-width: max(16%, 26px);
	--progress-track-color: #e9e9e6;
	--progress-active-color: #424242;
	--cards-visible: 4;
}

/* Cantidad configurada en RomethemeKit: 4 escritorio, 3 tablet, 1 móvil. */
@media (min-width: 768px) and (max-width: 1024px) {
	.carrusel-productos {
		--cards-visible: 3;
	}
}

/* Contenedor de la barra */
.carrusel-productos :is(
  .owl-dots,
  .swiper-pagination,
  .slick-dots,
  .bdt-dotnav,
  .ue-dots,
  .uc-dots,
  .rkit-cardslider-pagination
) {
	position: relative !important;
	inset: auto !important;
	display: flex !important;
	align-items: stretch !important;
	width: min(var(--progress-width), 75vw) !important;
	height: var(--progress-height) !important;
	margin: 28px auto 0 !important;
	padding: 0 !important;
	gap: 0 !important;
	overflow: hidden;
	list-style: none !important;
	background: var(--progress-track-color) !important;
	border-radius: 999px;
}

.carrusel-productos .rkit-cardslider-pagination {
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.carrusel-productos .rkit-cardslider-pagination.is-dragging {
	cursor: grabbing;
}

/* Cada punto se convierte en una sección invisible de la barra */
.carrusel-productos :is(
  .owl-dot,
  .swiper-pagination-bullet,
  .slick-dots li,
  .bdt-dotnav > li,
  .ue-dots > *,
  .uc-dots > *,
  .rkit-cardslider-bullet
) {
	display: block !important;
	flex: 1 1 0 !important;
	width: auto !important;
	height: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	opacity: 1 !important;
	background: transparent !important;
	transition: flex-basis .3s ease, background-color .3s ease !important;
}

/* El elemento activo forma el indicador oscuro */
.carrusel-productos :is(
  .owl-dot.active,
  .swiper-pagination-bullet-active,
  .slick-dots li.slick-active,
  .bdt-dotnav > .bdt-active,
  .bdt-dotnav > .active,
  .ue-dots > .active,
  .uc-dots > .active,
  .rkit-cardslider-bullet-active
) {
	flex: 0 0 var(--progress-active-width) !important;
	background: var(--progress-active-color) !important;
	border-radius: 999px !important;
}

/* Elimina la apariencia original de Owl y Slick */
.carrusel-productos .owl-dot span, .carrusel-productos .slick-dots button, .carrusel-productos .slick-dots button::before, .carrusel-productos .bdt-dotnav > li > *, .carrusel-productos .ue-dots > * > *, .carrusel-productos .uc-dots > * > * {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	color: transparent !important;
	font-size: 0 !important;
	opacity: 1 !important;
	background: transparent !important;
	border: 0 !important;
	content: "" !important;
}

/* Flechas coordinadas visualmente con la barra de progreso */
.carrusel-productos :is(
  [class*="cardslider"][class*="prev"],
  [class*="cardslider"][class*="next"],
  .rkit-swiper-button-prev,
  .rkit-swiper-button-next,
  .swiper-button-prev,
  .swiper-button-next,
  .owl-prev,
  .owl-next,
  .slick-prev,
  .slick-next
) {
	display: grid !important;
	place-items: center !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	color: var(--progress-active-color) !important;
	background: #fff !important;
	border: 1px solid var(--progress-track-color) !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 8%) !important;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

.carrusel-productos :is(
  [class*="cardslider"][class*="prev"],
  [class*="cardslider"][class*="next"],
  .rkit-swiper-button-prev,
  .rkit-swiper-button-next,
  .swiper-button-prev,
  .swiper-button-next,
  .owl-prev,
  .owl-next,
  .slick-prev,
  .slick-next
):is(:hover, :focus-visible) {
	color: #fff !important;
	background: #159772 !important;
	border-color: #159772 !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 14%) !important;
}

.carrusel-productos :is(
  [class*="cardslider"][class*="prev"],
  [class*="cardslider"][class*="next"],
  .rkit-swiper-button-prev,
  .rkit-swiper-button-next,
  .swiper-button-prev,
  .swiper-button-next,
  .owl-prev,
  .owl-next,
  .slick-prev,
  .slick-next
):is(.swiper-button-disabled, .disabled, [aria-disabled="true"]) {
	opacity: .35 !important;
	pointer-events: none !important;
	box-shadow: none !important;
}

.carrusel-productos :is(
  [class*="cardslider"][class*="prev"],
  [class*="cardslider"][class*="next"],
  .rkit-swiper-button-prev,
  .rkit-swiper-button-next,
  .swiper-button-prev,
  .swiper-button-next
)::after {
	font-size: 15px !important;
	font-weight: 700 !important;
}

.carrusel-productos :is(
  [class*="cardslider"][class*="prev"],
  [class*="cardslider"][class*="next"],
  .rkit-swiper-button-prev,
  .rkit-swiper-button-next,
  .swiper-button-prev,
  .swiper-button-next,
  .owl-prev,
  .owl-next,
  .slick-prev,
  .slick-next
) * {
	color: inherit !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}

.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):is(:hover, :focus-within) > div {
	transform: translateY(-5px) scale(1.012);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 10%) !important;
	filter: brightness(1.01);
}

.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):is(:hover, :focus-within) {
	position: relative;
	z-index: 5;
}

.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) img {
	transition: transform .32s cubic-bezier(.22, 1, .36, 1), filter .32s ease !important;
	will-change: transform;
}

.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):is(:hover, :focus-within) img {
	transform: translateY(-3px) scale(1.02);
}

/* =====================================================
   TARJETA HORIZONTAL EXCLUSIVA PARA MÓVIL
   No modifica escritorio ni tablet.
   ===================================================== */
@media (max-width: 767px) {
	.carrusel-productos {
		--mobile-card-background: #f7f7f7;
		--mobile-card-radius: 32px;
		--mobile-card-gap: 10px;
		--mobile-image-offset: 18px;
		--mobile-content-offset: 18px;
		--cards-visible: 1;
	}
	
	.carrusel-productos :is(
    .swiper-button-prev,
    .swiper-button-next,
    .owl-prev,
    .owl-next,
    .slick-prev,
    .slick-next
  ) {
		display: none !important;
	}
	
	/* Mayor especificidad para vencer el display:grid de RomethemeKit. */
	.carrusel-productos .rkit-swiper-button-prev.rkit-swiper-button-prev, .carrusel-productos .rkit-swiper-button-next.rkit-swiper-button-next {
		display: none !important;
	}
	
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div {
		display: grid !important;
		grid-template-columns: minmax(105px, 42%) minmax(0, 1fr);
		grid-auto-flow: row;
		column-gap: var(--mobile-card-gap);
		align-content: center;
		align-items: center;
		text-align: center;
		min-height: 175px;
		padding: 14px !important;
		overflow: hidden;
		background: var(--mobile-card-background) !important;
		border-radius: var(--mobile-card-radius);
	}
	
	/* Todo el contenido textual se coloca en la columna derecha. */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div > * {
		grid-column: 2;
		min-width: 0;
		justify-self: center;
	}
	
	/* Baja ligeramente la información para centrarla respecto al producto. */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div > :not(:has(img)) {
		position: relative;
		top: var(--mobile-content-offset);
	}
	
	/*
     Cuando el texto está dentro de un contenedor, todas las tarjetas reciben
     la misma estructura vertical: título, descripción y botón al fondo.
  */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div > :has(.card-heading) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
		height: 150px;
		min-height: 150px;
	}
	
	/* El primer bloque que contiene la imagen ocupa la columna izquierda. */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div > :has(img) {
		grid-column: 1;
		grid-row: 1/span 20;
		align-self: start;
		justify-self: center;
		width: 100%;
		margin-top: var(--mobile-image-offset);
	}
	
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) img {
		width: 100% !important;
		height: clamp(125px, 34vw, 150px) !important;
		object-fit: contain !important;
		object-position: center top !important;
	}
	
	/* Reserva el mismo espacio para títulos de hasta dos líneas. */
	.carrusel-productos .card-heading {
		flex: 0 0 36px;
		min-height: 36px;
		align-items: flex-end !important;
		justify-content: center !important;
	}
	
	/* Reserva el mismo espacio para descripciones de hasta tres líneas. */
	.carrusel-productos .card-heading + *, .carrusel-productos :is(
    .card-description,
    .card-desc,
    .card-text,
    .card-excerpt,
    .ue-text
  ) {
		flex: 0 0 58px;
		min-height: 58px !important;
		margin-block: 0 !important;
	}
	
	.carrusel-productos a[href*="beneleit.mx/"]:not(.card-title a, :has(img)) {
		justify-self: center;
		margin-top: auto !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}
	
	/* Cubre el caso en que Elementor envuelve el botón en otro contenedor. */
	.carrusel-productos .card-heading ~ :has(> a[href*="beneleit.mx/"]:not(.card-title a, :has(img))) {
		margin-top: auto !important;
	}
	
	/* Ajuste proporcional de NanoOX-A dentro del nuevo formato horizontal. */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):has(
    a[href*="/nanoox-a/" i]
  ) {
		--product-image-padding: 20px;
	}
	
	/* Compensa el espacio transparente incluido en la imagen de Benegly. */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):has(
    a[href*="/benegly/" i]
  ) {
		--mobile-image-offset: -27px;
	}
}

/* Sin efectos hover persistentes en pantallas táctiles */
@media (hover: none) {
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):hover > div {
		transform: none;
		box-shadow: none !important;
		filter: none;
	}
	
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):hover img {
		transform: none;
	}
}

/* Accesibilidad: respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div, .carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) img {
		transition: none !important;
	}
	
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):is(:hover, :focus-within) > div, .carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):is(:hover, :focus-within) img {
		transform: none;
	}
}

@media (max-width: 767px) {
	.carrusel-productos .card-heading {
		width: 100% !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}
	
	.carrusel-productos :is(.card-title, .card-subheading) {
		text-align: left !important;
	}
}

/* =====================================================
   CORRECCIÓN FINAL DE ALINEACIÓN EN MÓVIL
   Centra la imagen y evita que el botón invada el texto.
   ===================================================== */
@media (max-width: 767px) {
	.carrusel-productos {
		--mobile-card-gap: 14px;
		--mobile-image-offset: 0px;
		--mobile-content-offset: 0px;
	}
	
	/* Da a la tarjeta espacio suficiente para cuatro líneas de descripción. */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div {
		grid-template-columns: minmax(105px, 40%) minmax(0, 1fr);
		min-height: 215px;
		padding: 18px 16px !important;
		align-content: center;
		align-items: center;
	}
	
	/* Elimina el desplazamiento que bajaba toda la información. */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div > :not(:has(img)) {
		position: relative;
		top: auto;
	}
	
	/* Centra el producto dentro de toda la altura de la tarjeta. */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div > :has(img) {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		justify-self: center;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 170px;
		margin-top: 0 !important;
	}
	
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) img {
		width: 100% !important;
		height: clamp(130px, 36vw, 155px) !important;
		object-fit: contain !important;
		object-position: center center !important;
	}
	
	/* Distribuye título, descripción y botón sin superposiciones. */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide) > div > :has(.card-heading) {
		align-self: center;
		justify-self: stretch;
		justify-content: center;
		row-gap: 6px;
		width: 100%;
		height: auto;
		min-height: 175px;
	}
	
	.carrusel-productos .card-heading {
		flex: 0 0 auto;
		min-height: 38px;
		align-items: flex-end !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}
	
	.carrusel-productos .card-heading + *, .carrusel-productos :is(
    .card-description,
    .card-desc,
    .card-text,
    .card-excerpt,
    .ue-text
  ) {
		flex: 0 0 auto;
		width: 100%;
		height: auto !important;
		min-height: 70px !important;
		margin: 0 !important;
		overflow: visible !important;
		text-align: left !important;
	}
	
	/* Mantiene el botón debajo de la descripción, dentro del flujo normal. */
	.carrusel-productos a[href*="beneleit.mx/"]:not(.card-title a, :has(img)) {
		position: relative !important;
		top: auto !important;
		bottom: auto !important;
		flex: 0 0 auto;
		align-self: center;
		justify-self: center;
		margin: 8px auto 0 !important;
	}
	
	.carrusel-productos .card-heading ~ :has(> a[href*="beneleit.mx/"]:not(.card-title a, :has(img))) {
		position: relative !important;
		top: auto !important;
		bottom: auto !important;
		flex: 0 0 auto;
		width: 100%;
		margin: 8px 0 0 !important;
		text-align: center;
	}
	
	/* Benegly ya no necesita subir su imagen: ahora se centra como las demás. */
	.carrusel-productos :is(.owl-item, .swiper-slide, .slick-slide):has(
    a[href*="/benegly/" i]
  ) {
		--mobile-image-offset: 0px;
	}
}

/* Reduce el espacio entre título y descripción en móvil */
@media (max-width: 767px) {
	.carrusel-productos :is(
    .owl-item,
    .swiper-slide,
    .slick-slide
  ) > div > :has(.card-heading) {
		row-gap: 2px;
	}
	
	.carrusel-productos .card-heading {
		min-height: 34px;
	}
}

/* =====================================================
   BENecaf NF - NF EN SUPERÍNDICE
   ===================================================== */
.carrusel-productos .card-heading:has(
  a[href*="/benecafnf-2/" i]
) .card-subheading::after, .carrusel-productos .card-heading:has(
  a[href*="/benecafnf/" i]
) .card-subheading::after, .carrusel-productos .card-heading:has(
  a[href*="/benecaf-nf/" i]
) .card-subheading::after {
	content: "NF";
	display: inline-block;
	font-size: .42em;
	font-weight: 700;
	line-height: 1;
	margin-left: 1px;
	position: relative;
	top: -1em;
	color: inherit;
	letter-spacing: 0;
}
