/*
 * IC Tema: widget "Multipurpose Carousel" (the7_content_carousel).
 * carrusel.js arma: .owl-carousel > .owl-stage-outer > .owl-stage > .dt-owl-item > .dt-owl-item-wrap,
 * y deja adentro .owl-nav (flechas) y .owl-dots (puntos).
 */

/* Pista y diapositivas */
.owl-carousel {
	display: none;
	position: relative;
	z-index: 1;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
}

.owl-carousel.owl-loaded {
	display: grid;
}

.text-and-icon-carousel {
	margin-left: auto;
	margin-right: auto;
}

.owl-carousel .owl-stage-outer {
	position: relative;
	overflow: hidden;
	transform: translate3d(0, 0, 0);
}

.owl-carousel .owl-stage-outer.owl-height {
	transition: height .5s ease-in-out;
}

.owl-carousel .owl-stage {
	position: relative;
	touch-action: pan-y;
	backface-visibility: hidden;
}

.owl-carousel .owl-stage::after {
	content: "";
	display: block;
	clear: both;
}

.owl-carousel .dt-owl-item {
	position: relative;
	float: left;
	min-height: 1px;
	backface-visibility: hidden;
	-webkit-touch-callout: none;
}

.owl-carousel.owl-drag .dt-owl-item {
	user-select: none;
}

.owl-carousel.owl-grab {
	cursor: grabbing;
}

/* Sin "altura adaptable": todas las diapositivas igualan su alto. */
.text-and-icon-carousel[data-auto-height="false"] .owl-stage,
.text-and-icon-carousel[data-auto-height="false"] .owl-stage .dt-owl-item {
	display: flex;
}

.text-and-icon-carousel[data-auto-height="false"] .owl-stage .dt-owl-item {
	flex-shrink: 0;
}

/* Contenido de cada diapositiva */
.dt-owl-item-wrap {
	display: block;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
	transition: all .3s ease;
}

.dt-owl-item-inner {
	display: grid;
	align-self: flex-start;
	width: 100%;
	gap: 0;
	grid-template-rows: auto;
	color: inherit;
}

.text-and-icon-carousel .dt-owl-item-wrap:not(.hide-icon) .dt-owl-item-inner {
	grid-template-columns: var(--the7-slider-layout-columns);
	grid-template-areas: var(--the7-slider-template-areas);
	grid-template-rows: var(--the7-slider-template-rows);
	column-gap: var(--the7-slider-layout-gap);
	text-align: var(--content-text-align);
}

.text-and-icon-carousel .hide-icon .dt-owl-item-inner {
	grid-template-columns: minmax(0, 100%);
	grid-template-areas: " icon" " header " " desc" " button ";
	text-align: var(--content-text-align);
}

.dt-owl-item-heading {
	grid-area: header;
	justify-self: var(--the7-title-justify, center);
	text-align: var(--the7-title-alignment, center);
	transition: color .3s ease;
}

.dt-owl-item-heading a,
.dt-owl-item-heading a:hover {
	color: inherit;
}

.dt-owl-item-description {
	grid-area: desc;
	transition: color .3s ease;
}

a.dt-owl-item-wrap:hover .dt-owl-item-description {
	color: inherit;
}

.dt-slide-button {
	grid-area: button;
	align-self: flex-start;
	pointer-events: none;
	transition: all .3s ease;
}

.elements-hover .dt-slide-button {
	pointer-events: auto;
}

.text-and-icon-carousel .dt-slide-button,
.text-and-icon-carousel .dt-owl-item-icon,
.text-and-icon-carousel .dt-owl-item-image {
	justify-self: var(--content-justify-self, flex-start);
}

/* Imagen (con capas para el color superpuesto normal / hover) */
.dt-owl-item-image {
	position: relative;
	display: inline-block;
	grid-area: icon;
	align-self: flex-start;
	max-width: 100%;
	line-height: 0;
}

.text-and-icon-carousel .dt-owl-item-inner .dt-owl-item-image {
	width: var(--img-width);
	margin: var(--the7-slider-layout-margin);
}

.dt-owl-item-image::before,
.dt-owl-item-image::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.dt-owl-item-image::before {
	z-index: 1;
	opacity: 1;
}

.dt-owl-item-image::after {
	opacity: 0;
}

.box-hover:hover .dt-owl-item-image::before,
.elements-hover .dt-owl-item-image:hover::before {
	opacity: 0;
}

.box-hover:hover .dt-owl-item-image::after,
.elements-hover .dt-owl-item-image:hover::after {
	opacity: 1;
}

.quick-scale-img .dt-owl-item-image,
.scale-img .dt-owl-item-image {
	overflow: hidden;
	transform: translateZ(0);
}

#the7-body .quick-scale-img .dt-owl-item-image img,
#the7-body .scale-img .dt-owl-item-image img {
	backface-visibility: hidden;
	transition: transform .25s ease-out, opacity .3s ease;
}

#the7-body .scale-img .dt-owl-item-image img {
	transition-duration: 4s, .3s;
}

#the7-body .quick-scale-img .box-hover:hover .dt-owl-item-image img,
#the7-body .quick-scale-img .elements-hover .dt-owl-item-image:hover img,
#the7-body .scale-img .box-hover:hover .dt-owl-item-image img,
#the7-body .scale-img .elements-hover .dt-owl-item-image:hover img {
	transform: scale(1.2);
}

/* Ícono (círculo con dos capas: normal y hover) */
.dt-owl-item-icon {
	position: relative;
	display: flex;
	grid-area: icon;
	justify-content: center;
	align-items: center;
	max-width: 100%;
}

.dt-owl-item-inner .dt-owl-item-icon {
	width: var(--icon-width);
	height: var(--img-height);
	margin: var(--the7-slider-layout-margin);
	padding-top: var(--icon-top-padding);
	line-height: var(--img-height);
}

.dt-owl-item-icon i,
.dt-owl-item-icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	transform: translate3d(-50%, -50%, 0);
}

.dt-owl-item-inner .dt-owl-item-icon i {
	font-size: var(--icon-font-size);
	transition: color .3s ease;
}

.dt-owl-item-inner .dt-owl-item-icon svg {
	width: var(--icon-font-size);
	height: auto;
	transition: all .3s ease;
}

.dt-owl-item-icon::before,
.dt-owl-item-icon::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	border-style: solid;
	border-radius: inherit;
	font-size: 0 !important;
}

.dt-owl-item-icon::before,
.box-hover:hover .dt-owl-item-icon::after,
.elements-hover .dt-owl-item-icon:hover::after {
	opacity: 1;
}

.dt-owl-item-icon::after,
.box-hover:hover .dt-owl-item-icon::before,
.elements-hover .dt-owl-item-icon:hover::before {
	opacity: 0;
}

/* Flechas */
.elementor-owl-carousel-call .owl-nav {
	display: var(--arrow-display, inline-flex);
	opacity: var(--arrow-opacity, 1);
	transition: opacity .3s;
}

.elementor-owl-carousel-call:hover .owl-nav {
	opacity: 1;
}

.elementor-owl-carousel-call .owl-nav > div {
	position: absolute;
	top: calc(50% + var(--arrow-v-offset, 0px) + var(--offset-v-t-img, 0px));
	display: inline-flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	color: var(--the7-accent-color);
	cursor: pointer;
	transform: translate3d(var(--arrow-translate-x, 0), var(--arrow-translate-y, -50%), 0);
	transition: all .3s;
}

.elementor-owl-carousel-call .owl-nav > div i {
	position: relative;
	z-index: 1;
}

.elementor-owl-carousel-call .owl-nav > div i {
	font-size: var(--arrow-icon-size);
	transition: color .3s;
}

.elementor-owl-carousel-call .owl-nav > div svg {
	width: var(--arrow-icon-size);
	height: auto;
	transition: fill .3s, color .3s;
}

.elementor-owl-carousel-call .owl-nav .owl-prev {
	left: var(--arrow-h-offset, 10px);
	--arrow-translate-x: 0;
}

.elementor-owl-carousel-call .owl-nav .owl-next {
	left: calc(100% - var(--arrow-h-offset, 10px));
	--arrow-translate-x: -100%;
}

/* Puntos */
.elementor-owl-carousel-call .owl-dots {
	position: absolute;
	display: var(--bullet-display, inline-flex);
	opacity: var(--bullet-opacity, 1);
	transform: translate3d(var(--bullet-translate-x, 0), var(--bullet-translate-y, -50%), 0);
	transition: opacity .3s;
}

.elementor-owl-carousel-call:hover .owl-dots {
	opacity: 1;
}

.elementor-owl-carousel-call .owl-dot {
	position: relative;
	display: block;
	width: var(--bullet-size);
	height: var(--bullet-size);
	margin: 0 calc(var(--bullet-gap, 10px) / 2);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: box-shadow .3s;
}

.elementor-owl-carousel-call .owl-dot span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--bullet-color, var(--the7-accent-color));
	transition: all .3s;
}

.elementor-owl-carousel-call .owl-dot:not(.active):hover span {
	background: var(--bullet-hover-color, var(--the7-accent-color));
}

.elementor-owl-carousel-call .owl-dot.active span {
	background: var(--bullet-active-color, var(--the7-accent-color));
}

/* Variantes (prefijo bullets- en el widget) */
.bullets-small-dot-stroke .owl-dot span {
	transform: scale(.5);
}

.bullets-small-dot-stroke .owl-dot.active {
	box-shadow: 0 0 0 var(--bullet-border-width, 2px) var(--bullet-active-color, var(--the7-accent-color));
}

.bullets-small-dot-stroke .owl-dot.active span {
	transform: scale(.4);
}

.bullets-scale-up .owl-dot span {
	transform: scale(.7);
}

.bullets-scale-up .owl-dot.active span {
	transform: scale(1);
}

.bullets-stroke .owl-dot.active span {
	background: transparent;
	box-shadow: 0 0 0 var(--bullet-border-width, 2px) var(--bullet-active-color, var(--the7-accent-color));
}

.bullets-fill-in .elementor-owl-carousel-call .owl-dot span,
.bullets-fill-in .elementor-owl-carousel-call .owl-dot:not(.active):hover span {
	background: transparent;
	box-shadow: inset 0 0 0 var(--bullet-border-width, 2px) var(--bullet-color, var(--the7-accent-color));
}

.bullets-fill-in .elementor-owl-carousel-call .owl-dot:not(.active):hover span {
	box-shadow: inset 0 0 0 var(--bullet-border-width, 2px) var(--bullet-hover-color, var(--the7-accent-color));
}

.bullets-fill-in .elementor-owl-carousel-call .owl-dot.active span {
	box-shadow: inset 0 0 0 calc(var(--bullet-size) / 2) var(--bullet-active-color, var(--the7-accent-color));
}

.bullets-ubax .owl-dot,
.bullets-ubax .owl-dot span,
.bullets-etefu .owl-dot,
.bullets-etefu .owl-dot span {
	border-radius: 0;
}

.bullets-ubax .elementor-owl-carousel-call .owl-dot span {
	box-sizing: border-box;
	border: min(calc(var(--bullet-size) / 2), var(--bullet-border-width, 2px)) solid transparent;
}

.bullets-ubax .elementor-owl-carousel-call .owl-dot.active span {
	background: var(--bullet-color, var(--the7-accent-color));
	border-color: var(--bullet-active-color, var(--the7-accent-color));
}

.bullets-etefu .elementor-owl-carousel-call {
	--bullet-border-width: 5px;
}

.bullets-etefu .elementor-owl-carousel-call .owl-dot {
	height: auto;
}

.bullets-etefu .elementor-owl-carousel-call .owl-dot span {
	height: var(--bullet-border-width, 5px);
}

/* Navegación sobrante: antes de armar, o cuando todo entra en pantalla. */
.owl-nav.disabled,
.owl-dots.disabled,
.elementor-owl-carousel-call .owl-nav.disabled,
.elementor-owl-carousel-call .owl-dots.disabled {
	display: none;
}
