/* Apply one class to an Elementor Image element, a widget wrapper, or an <img>.
 * The variable belongs to the class; the mask is applied only to its image.
 */
:root {
	--tsm-marca-salmon: #ED7D64;
	--tsm-marca-rosa: #D65E5C;
	--tsm-marca-arena: #F7A464;
	--tsm-marca-petroleo: #2A4A50;
	--tsm-marca-marfil: #F7F2ED;
}

.tsm-mascara-01 {
	--tsm-forma: url('../masks/mancha-01.svg');
	--tsm-forma-decorativa: url('../masks/mancha-02.svg');
}
.tsm-mascara-02 {
	--tsm-forma: url('../masks/mancha-02.svg');
	--tsm-forma-decorativa: url('../masks/mancha-03.svg');
}
.tsm-mascara-03 {
	--tsm-forma: url('../masks/mancha-03.svg');
	--tsm-forma-decorativa: url('../masks/mancha-04.svg');
}
.tsm-mascara-04 {
	--tsm-forma: url('../masks/mancha-04.svg');
	--tsm-forma-decorativa: url('../masks/mancha-05.svg');
}
.tsm-mascara-05 {
	--tsm-forma: url('../masks/mancha-05.svg');
	--tsm-forma-decorativa: url('../masks/mancha-01.svg');
}

:is(.tsm-mascara-01, .tsm-mascara-02, .tsm-mascara-03, .tsm-mascara-04, .tsm-mascara-05):is(img),
:is(.tsm-mascara-01, .tsm-mascara-02, .tsm-mascara-03, .tsm-mascara-04, .tsm-mascara-05) img {
	-webkit-mask-image: var(--tsm-forma);
	mask-image: var(--tsm-forma);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* Optional: add this second class if a consistent square crop is desired. */
.tsm-mascara-cuadrada:is(img),
.tsm-mascara-cuadrada img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* On a wrapper, use ::before. Direct img classes are handled by mascaras.js,
 * which adds an absolute sibling because <img> cannot have ::before.
 */
.tsm-fondo-forma {
	--tsm-fondo-color: var(--tsm-marca-salmon);
	--tsm-fondo-x: 3.5%;
	--tsm-fondo-y: 3%;
	--tsm-fondo-giro: -2.5deg;
	--tsm-fondo-escala: 1.025;
}

:is(.tsm-mascara-01, .tsm-mascara-02, .tsm-mascara-03, .tsm-mascara-04, .tsm-mascara-05).tsm-fondo-forma:not(img) {
	position: relative;
	isolation: isolate;
	overflow: visible;
}

:is(.tsm-mascara-01, .tsm-mascara-02, .tsm-mascara-03, .tsm-mascara-04, .tsm-mascara-05).tsm-fondo-forma:not(img)::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--tsm-fondo-color);
	-webkit-mask-image: var(--tsm-forma-decorativa);
	mask-image: var(--tsm-forma-decorativa);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transform: translate(0, 0) rotate(0deg) scale(1);
	transform-origin: center;
	transition: transform 900ms cubic-bezier(.2, .75, .25, 1);
}

:is(.tsm-mascara-01, .tsm-mascara-02, .tsm-mascara-03, .tsm-mascara-04, .tsm-mascara-05).tsm-fondo-forma.tsm-en-vista:not(img)::before {
	transform: translate(var(--tsm-fondo-x), var(--tsm-fondo-y)) rotate(var(--tsm-fondo-giro)) scale(var(--tsm-fondo-escala));
}

:is(.tsm-mascara-01, .tsm-mascara-02, .tsm-mascara-03, .tsm-mascara-04, .tsm-mascara-05).tsm-fondo-forma :is(img, a, picture) {
	position: relative;
	z-index: 1;
}

/* Elementor's atomic Image element puts its classes directly on <img>.
 * The script creates this decorative sibling and sizes it to the image.
 */
.tsm-fondo-host {
	isolation: isolate;
	overflow: visible;
}

img.tsm-fondo-forma:is(.tsm-mascara-01, .tsm-mascara-02, .tsm-mascara-03, .tsm-mascara-04, .tsm-mascara-05) {
	position: relative;
	z-index: 1;
}

.tsm-forma-fondo-aux {
	--tsm-fondo-color: var(--tsm-marca-salmon);
	--tsm-fondo-x: 3.5%;
	--tsm-fondo-y: 3%;
	--tsm-fondo-giro: -2.5deg;
	--tsm-fondo-escala: 1.025;
	position: absolute;
	display: block;
	z-index: 0;
	pointer-events: none;
	background-color: var(--tsm-fondo-color);
	-webkit-mask-image: var(--tsm-forma-decorativa);
	mask-image: var(--tsm-forma-decorativa);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transform: translate(0, 0) rotate(0deg) scale(1);
	transform-origin: center;
	transition: transform 900ms cubic-bezier(.2, .75, .25, 1);
}

.tsm-forma-fondo-aux.tsm-en-vista {
	transform: translate(var(--tsm-fondo-x), var(--tsm-fondo-y)) rotate(var(--tsm-fondo-giro)) scale(var(--tsm-fondo-escala));
}

/* New brand palette. Legacy names remain valid for already published pages. */
.tsm-fondo-salmon   { --tsm-fondo-color: var(--tsm-marca-salmon); }
.tsm-fondo-rosa     { --tsm-fondo-color: var(--tsm-marca-rosa); }
.tsm-fondo-arena    { --tsm-fondo-color: var(--tsm-marca-arena); }
.tsm-fondo-petroleo { --tsm-fondo-color: var(--tsm-marca-petroleo); }
.tsm-fondo-marfil   { --tsm-fondo-color: var(--tsm-marca-marfil); }

/* Transitional aliases: all five legacy classes now use the current palette. */
.tsm-fondo-carbon   { --tsm-fondo-color: var(--tsm-marca-petroleo); }
.tsm-fondo-turquesa { --tsm-fondo-color: var(--tsm-marca-petroleo); }
.tsm-fondo-nieve    { --tsm-fondo-color: var(--tsm-marca-marfil); }
.tsm-fondo-dorado   { --tsm-fondo-color: var(--tsm-marca-arena); }
.tsm-fondo-marron   { --tsm-fondo-color: var(--tsm-marca-rosa); }

/* Optional directions; no direction class has the same effect as right. */
.tsm-fondo-derecha {
	--tsm-fondo-x: 3.5%;
	--tsm-fondo-y: 3%;
	--tsm-fondo-giro: -2.5deg;
}
.tsm-fondo-izquierda {
	--tsm-fondo-x: -3.5%;
	--tsm-fondo-y: 3%;
	--tsm-fondo-giro: 2.5deg;
}
.tsm-fondo-arriba {
	--tsm-fondo-x: 1.5%;
	--tsm-fondo-y: -3.5%;
	--tsm-fondo-giro: 2deg;
}
.tsm-fondo-abajo {
	--tsm-fondo-x: -1.5%;
	--tsm-fondo-y: 4%;
	--tsm-fondo-giro: -2deg;
}

@media (prefers-reduced-motion: reduce) {
	:is(.tsm-mascara-01, .tsm-mascara-02, .tsm-mascara-03, .tsm-mascara-04, .tsm-mascara-05).tsm-fondo-forma:not(img)::before,
	.tsm-forma-fondo-aux {
		transition: none;
	}
}