/*
 * IC Tema: piezas comunes de los widgets (imagen con proporción, logo, carga del menú).
 */

/* Elementos que JS muestra cuando el widget está listo. */
.hidden-on-load {
	display: none;
}

/* Submenús: ocultos hasta que el menú los abre. */
.horizontal-sub-nav {
	visibility: hidden;
	opacity: 0;
}

/* Botón "box-button" (widget Botón, Icon Box, carrusel). Tamaños y colores: tema.css + ajustes del widget. */
.box-button {
	position: relative;
	font: var(--the7-btn-s-font);
	text-transform: var(--the7-btn-s-text-transform);
	letter-spacing: var(--the7-btn-s-letter-spacing);
	border-radius: var(--the7-btn-s-border-radius);
	border-width: var(--the7-btn-s-border-width);
	border-style: var(--the7-btn-s-border-style);
	padding: var(--the7-btn-s-padding);
	border-color: var(--the7-btn-border-color);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	--btn-icon-spacing: 7px;
}

.elementor-element .box-button.no-text {
	--btn-icon-spacing: 0px;
}

.box-button:hover,
.box-button:hover i,
.box-button:visited,
.box-hover:hover .box-button {
	color: var(--the7-btn-hover-color);
}

.box-hover .box-button {
	pointer-events: none;
}

.box-button i {
	color: var(--the7-btn-color);
	transition: color .3s ease;
}

.box-button svg {
	width: 1em;
	height: auto;
	fill: var(--the7-btn-color);
	transition: all .3s ease;
}

.box-button:hover svg,
.box-hover:hover .box-button svg {
	fill: var(--the7-btn-hover-color);
}

/* Imagen con proporción controlada por variables (--the7-img-*). */
.img-css-resize-wrapper {
	width: 100%;
	aspect-ratio: var(--the7-img-ratio);
	position: relative;
	display: block;
	line-height: 0;
}

img.aspect {
	--ratio: auto;
	aspect-ratio: var(--the7-img-ratio, var(--ratio));
}

.img-css-resize-wrapper img {
	position: var(--the7-img-position, static);
	top: 0;
	left: 0;
	width: var(--the7-img-width, inherit);
	height: var(--the7-img-height, auto);
	max-width: var(--the7-img-max-width, 100%);
	max-height: var(--the7-img-max-height);
	object-fit: var(--the7-img-object-fit, cover);
	aspect-ratio: var(--the7-img-ratio, var(--ratio));
}

.img-css-resize-wrapper img.the7-svg-image {
	width: 100%;
}

/* Logo: segunda imagen (la "sticky") oculta hasta que la sección queda fija. */
.elementor-widget-the7-logo-widget .elementor-widget-container {
	display: flex;
}

.the7-logo-wrap {
	transition: all .3s;
	text-align: center;
}

.elementor-widget-the7-logo-widget img {
	position: static;
	transition: all .3s;
}

.elementor-widget-the7-logo-widget img:nth-child(2) {
	position: absolute;
}

.the7-logo-wrap img:nth-child(2),
.the7-e-sticky-effects .elementor-widget-the7-logo-widget .the7-logo-wrap img:nth-child(1):not(:last-child) {
	visibility: hidden;
	opacity: 0;
}

.the7-e-sticky-effects.the7-e-sticky-active .elementor-widget-the7-logo-widget.sticky-logo-y .the7-logo-wrap img:nth-child(2) {
	position: relative;
	visibility: visible;
	opacity: 1;
}

.the7-e-sticky-effects.the7-e-sticky-active .elementor-widget-the7-logo-widget.sticky-logo-y .the7-logo-wrap img:nth-child(1):not(:last-child) {
	position: absolute;
}

.the7-e-sticky-effects.the7-e-sticky-active .elementor-widget-the7-logo-widget.sticky-logo-y .the7-logo-wrap.img-css-resize-wrapper {
	aspect-ratio: var(--sticky-aspect-ratio);
}

.the7-logo-wrap.img-css-resize-wrapper img:nth-child(2) {
	width: var(--sticky-width, var(--ratio-img-width, inherit));
	height: var(--sticky-height, var(--height, auto));
	max-width: var(--sticky-max-width, var(--max-width, 100%));
	max-height: var(--sticky-max-height, var(--max-height));
	object-fit: var(--sticky-object-fit, var(--object-fit, cover));
	aspect-ratio: var(--sticky-aspect-ratio, var(--aspect-ratio, --ratio));
}

.sticky-logo-style-y .the7-logo-wrap.img-css-resize-wrapper img:nth-child(2) {
	width: var(--sticky-width, inherit);
	height: var(--sticky-height, auto);
	max-width: var(--sticky-max-width, 100%);
	max-height: var(--sticky-max-height);
	object-fit: var(--sticky-object-fit, cover);
	aspect-ratio: var(--sticky-aspect-ratio, var(--ratio));
}