/**
 * Ilustraciones decorativas de línea para secciones de fondo blanco.
 *
 * Son los mismos dibujos de los héroes, recoloreados en el azul de la marca
 * (assets/img/deco/). Se usan de dos formas:
 *
 * 1. En Elementor: en una sección (contenedor) con fondo blanco, Avanzado >
 *    Clases CSS:  mar-deco  +  una ilustración  +  (opcional) una posición.
 *      Ilustraciones: mar-deco--frontal, mar-deco--esquina, mar-deco--carretilla,
 *                     mar-deco--camion, mar-deco--oficina, mar-deco--vertical,
 *                     mar-deco--grua (cuelga del borde superior, a la derecha),
 *                     mar-deco--apilados (apoyado en el borde inferior, a la derecha)
 *      Posiciones:    mar-deco--derecha (por defecto), mar-deco--izquierda,
 *                     mar-deco--abajo (por defecto va pegado arriba)
 *
 * El dibujo nunca sobresale por los lados: va pegado arriba y, si la sección
 * es más baja que él, solo se corta por abajo (queda como un recorte limpio).
 *    Ejemplo:  mar-deco mar-deco--frontal mar-deco--izquierda
 *
 * 2. Automáticamente en las secciones blancas de las landings de servicio.
 *
 * El dibujo va en un ::after por detrás del contenido (el ::before de los
 * contenedores de Elementor ya lo usa su capa de fondo) y no recibe clics.
 */

.mar-deco,
.mar-landing .mar-l-sec--deco {
	--mar-deco-img: url( "../img/deco/contenedor-frontal.svg" );
	--mar-deco-w: min( 46%, 640px );
	--mar-deco-opacity: .3;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.mar-deco::after,
.mar-landing .mar-l-sec--deco::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: var( --mar-deco-w );
	aspect-ratio: 554 / 480;
	background: var( --mar-deco-img ) center top / contain no-repeat;
	opacity: var( --mar-deco-opacity );
	pointer-events: none;
}

/* Ilustraciones */
.mar-deco--frontal {
	--mar-deco-img: url( "../img/deco/contenedor-frontal.svg" );
}

.mar-deco--esquina {
	--mar-deco-img: url( "../img/deco/contenedor-esquina.svg" );
}

.mar-deco--carretilla {
	--mar-deco-img: url( "../img/deco/contenedor-carretilla.svg" );
	--mar-deco-w: min( 60%, 820px );
}

.mar-deco--camion {
	--mar-deco-img: url( "../img/deco/contenedor-camion.svg" );
}

.mar-deco--vertical {
	--mar-deco-img: url( "../img/deco/contenedores-vertical.webp" );
	--mar-deco-w: min( 40%, 560px );
	--mar-deco-opacity: .28;
}

.mar-deco--vertical::after {
	aspect-ratio: 2 / 3;
	background-position: center top;
}

.mar-deco--oficina {
	--mar-deco-img: url( "../img/deco/modulo-oficina.svg" );
}

/* Dibujos que se cortan por la derecha: van pegados a ese borde. */
.mar-deco--grua,
.mar-landing .mar-l-sec--deco.mar-deco--grua {
	--mar-deco-img: url( "../img/deco/contenedor-grua.webp" );
	--mar-deco-w: min( 28%, 420px );
	--mar-deco-opacity: .3;
}

.mar-deco--grua::after,
.mar-landing .mar-l-sec--deco.mar-deco--grua::after {
	aspect-ratio: 2 / 3;
	top: 0;
	bottom: auto;
	right: 0;
	left: auto;
	background-position: right top;
}

.mar-deco--apilados,
.mar-landing .mar-l-sec--deco.mar-deco--apilados {
	--mar-deco-img: url( "../img/deco/contenedores-apilados.webp" );
	--mar-deco-w: min( 28%, 420px );
	--mar-deco-opacity: .3;
}

.mar-deco--apilados::after,
.mar-landing .mar-l-sec--deco.mar-deco--apilados::after {
	aspect-ratio: 2 / 3;
	top: auto;
	bottom: 0;
	right: 0;
	left: auto;
	background-position: right bottom;
}

/* Posiciones */
.mar-deco--izquierda::after {
	right: auto;
	left: 0;
}

.mar-deco--abajo::after {
	top: auto;
	bottom: 0;
}

/* -------------------------------------------------------------------------
 * Landings: se alternan dibujo y lado en las secciones blancas
 * ---------------------------------------------------------------------- */

.mar-landing .mar-l-sec--deco.mar-l-deco-1 {
	--mar-deco-img: url( "../img/deco/contenedor-frontal.svg" );
}

.mar-landing .mar-l-sec--deco.mar-l-deco-2 {
	--mar-deco-img: url( "../img/deco/contenedor-esquina.svg" );
}

.mar-landing .mar-l-sec--deco.mar-l-deco-2::after {
	right: auto;
	left: 0;
}

.mar-landing .mar-l-sec--deco.mar-l-deco-3 {
	--mar-deco-img: url( "../img/deco/contenedor-carretilla.svg" );
	--mar-deco-w: min( 58%, 800px );
}

.mar-landing .mar-l-sec--deco.mar-l-deco-4 {
	--mar-deco-img: url( "../img/deco/contenedor-camion.svg" );
}

.mar-landing .mar-l-sec--deco.mar-l-deco-4::after {
	right: auto;
	left: 0;
}

.mar-landing .mar-l-sec--deco.mar-l-deco-5 {
	--mar-deco-img: url( "../img/deco/contenedores-vertical.webp" );
	--mar-deco-w: min( 40%, 560px );
	--mar-deco-opacity: .26;
}

.mar-landing .mar-l-sec--deco.mar-l-deco-5::after {
	aspect-ratio: 2 / 3;
	background-position: center top;
}

/* En pantallas estrechas el dibujo pasaría por detrás del texto: más tenue. */
@media ( max-width: 1024px ) {
	.mar-deco,
	.mar-landing .mar-l-sec--deco {
		--mar-deco-w: 80%;
		--mar-deco-opacity: .16;
	}

	.mar-deco--grua,
	.mar-deco--apilados,
	.mar-landing .mar-l-sec--deco.mar-deco--grua,
	.mar-landing .mar-l-sec--deco.mar-deco--apilados {
		--mar-deco-w: 55%;
	}
}