/* Zoopplier — solo lo que no tiene control nativo en Elementor.
   Las decoraciones usan ::after: Elementor reserva ::before de los containers para el overlay de fondo. */

@font-face {
	font-family: "Manrope";
	src: url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype");
	font-weight: 200 800;
	font-display: swap;
}

/* Anillos del flyer: agregar la clase "zp-arcos" a un Container.
   Los dibuja detrás del contenido, centrados en el borde derecho. */
.zp-arcos { position: relative; overflow: visible; }
.zp-arcos::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	width: 108%; aspect-ratio: 1; left: 64%; top: 50%; transform: translateY(-50%);
	background: url("../img/anillos.svg") center / contain no-repeat;
}
.zp-arcos > * { position: relative; z-index: 1; }

/* Anillos de fondo de sección (Soluciones, Servicios, Contacto): clase "zp-arcos-seccion"
   en el Container de la sección. Modificadores para la posición y el tono. */
.zp-arcos-seccion { position: relative; overflow: hidden; }
.zp-arcos-seccion::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	width: 880px; height: 880px; right: -440px; top: -200px;
	background: url("../img/anillos.svg") center / contain no-repeat;
}
.zp-arcos-seccion--tenue::after { opacity: .4; top: -140px; }
.zp-arcos-seccion--izq::after { right: auto; top: auto; left: -440px; bottom: -380px; opacity: .55; }
.zp-arcos-seccion > * { position: relative; z-index: 1; }
@media (max-width: 767px) {
	.zp-arcos-seccion::after { width: 560px; height: 560px; right: -280px; top: -80px; }
	.zp-arcos-seccion--izq::after { right: auto; top: auto; left: -280px; bottom: -240px; }
}

/* Cuarto de círculo amarillo en la esquina (tarjeta Mindray): clase "zp-cuarto". */
.zp-cuarto { position: relative; overflow: hidden; }
.zp-cuarto::after {
	content: ""; position: absolute; pointer-events: none; border-radius: 50%;
	width: 260px; height: 260px; right: -130px; top: -130px; background: var(--e-global-color-primary, #FFA42C);
}
.zp-cuarto > * { position: relative; z-index: 1; }
@media (max-width: 767px) {
	.zp-cuarto::after { width: 120px; height: 120px; right: -60px; top: -60px; }
}

/* Text Editor: sin margen bajo el último párrafo (Hello deja 0.9rem y descuadra tarjetas). */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Mobile: el header se esconde al bajar y vuelve al subir (assets/js/header.js pone "zp-header-oculto"
   en <html>). Las barras sticky que van debajo del header suben con él: ver .zp-catalogo-barra. */
@media (max-width: 767px) {
	.elementor-location-header .elementor-sticky--active { transition: transform .25s ease; }
	.zp-header-oculto .elementor-location-header .elementor-sticky--active { transform: translateY(-100%); }
}