/* Estilos de los widgets de Humand GSAP para Elementor. Colores del kit de Humand.
   Los tamaños usan clamp(): escalan solos entre celular, tablet, escritorio y pantallas anchas.
   Cada medida se puede pisar por dispositivo desde el panel de Elementor (ícono de pantalla en cada control).
   Dentro del editor de Elementor (sin motor de animación) cada elemento se ve en su estado "armado", como en la página. */

/* ---------- Figuras del cursor ---------- */
.hgsap-flair {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: clamp(260px, 52vh, 680px);
	padding: clamp(16px, 2vw, 32px);
	border-radius: 20px;
	background: #f7f7f7;
	cursor: crosshair;
	touch-action: manipulation;
}

.hgsap-flair__text {
	margin: 0;
	color: #606060;
	font-size: clamp(0.95rem, 1.1vw, 1.3rem);
	text-align: center;
	pointer-events: none;
}

/* Las imágenes están siempre ocultas; el motor las muestra una a una al mover el mouse o al tocar. */
.hgsap-flair img {
	position: fixed;
	top: 0;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

/* ---------- Slider infinito de logos ---------- */
.hgsap-marquee {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--hg-mq-gap, 48px);
	width: 100%;
	overflow: hidden;
}

.hgsap-marquee__item {
	display: flex;
	flex: none;
	align-items: center;
}

.hgsap-marquee img {
	display: block;
	width: auto;
	height: clamp(34px, 3.4vw, 84px);
}

/* ---------- Pila de tarjetas (se ve armada aunque todavía no corra el motor, y en el editor) ---------- */
.hgsap-cardstack {
	--hg-card-h: clamp(200px, 17vw, 380px);
	--hg-n: 4;
	position: relative;
	width: min(100%, clamp(260px, 24vw, 560px));
	height: calc(var(--hg-card-h) + (var(--hg-n) - 1) * 16px);
	margin: 0 auto;
}

.hgsap-cardstack__card {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	width: 100%;
	height: var(--hg-card-h);
	padding: clamp(18px, 2vw, 40px);
	overflow: hidden;
	border-radius: 20px;
	background: #8aa5f2;
	color: #1d1d1f;
	transform-origin: 50% 100%;
	cursor: pointer;
}

.hgsap-cardstack__card:nth-child(1) {
	z-index: 8;
}

.hgsap-cardstack__card:nth-child(2) {
	z-index: 7;
	transform: translateY(16px) scale(0.95) rotate(1deg);
}

.hgsap-cardstack__card:nth-child(3) {
	z-index: 6;
	transform: translateY(32px) scale(0.9) rotate(-1.5deg);
}

.hgsap-cardstack__card:nth-child(4) {
	z-index: 5;
	transform: translateY(48px) scale(0.85) rotate(2deg);
}

.hgsap-cardstack__card:nth-child(n + 5) {
	z-index: 4;
	opacity: 0;
	transform: translateY(64px) scale(0.8);
}

/* Tarjeta con una plantilla de Elementor adentro: sin relleno ni alineación de texto propios, el contenido manda. */
.hgsap-cardstack__card--tpl {
	display: block;
	padding: 0;
}

.hgsap-cardstack__card--tpl > .elementor {
	height: 100%;
}

/* Tarjeta que es solo una imagen, un video o una animación Lottie: ocupa toda la tarjeta. */
.hgsap-cardstack__card--media {
	display: block;
	padding: 0;
}

.hgsap-cardstack__card--media :is(img, video, .hgsap-cardstack__lottie) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hgsap-cardstack__title {
	margin: 0 0 8px;
	color: inherit;
	font-size: clamp(1.25rem, 1.8vw, 2.1rem);
	font-weight: 700;
}

.hgsap-cardstack__text {
	margin: 0;
	color: inherit;
	font-size: clamp(0.95rem, 1.05vw, 1.25rem);
}

/* ---------- Carrusel infinito ---------- */
.hgsap-cardsloop {
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	min-height: var(--hg-vh, 100svh);
	overflow: hidden;
	background: #0e1535;
	color: #fff;
}

.hgsap-cardsloop__card {
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	width: clamp(170px, 15vw, 380px);
	aspect-ratio: 7 / 9;
	padding: clamp(12px, 1.2vw, 24px);
	border-radius: 14px;
	background-color: #8aa5f2;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.hgsap-cardsloop__title {
	font-size: clamp(0.95rem, 1.1vw, 1.4rem);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.hgsap-cardsloop__btn {
	position: absolute;
	bottom: clamp(16px, 3vh, 40px);
	z-index: 200;
	padding: 12px 26px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 99px;
	background: transparent;
	color: inherit;
	font-weight: 600;
	cursor: pointer;
}

.hgsap-cardsloop__btn:hover {
	background: rgba(255, 255, 255, 0.15);
}

.hgsap-cardsloop__btn--prev {
	left: calc(50% - 130px);
}

.hgsap-cardsloop__btn--next {
	left: calc(50% + 10px);
}

/* Antes de que arranque el motor no se ven las tarjetas apiladas. */
html.hgsap-js:not(.hgsap-ready):not(.hgsap-fail) .hgsap-cardsloop__card {
	opacity: 0;
}

/* Si el efecto no corre en este ancho (tablet o celular sin la opción activada): tarjetas una debajo de la otra y sin botones. */
html:not(.hgsap-desktop) .hgsap-cardsloop:not(.hgsap-mobile-on) {
	display: grid;
	gap: 16px;
	min-height: 0;
	padding: 24px;
	justify-items: center;
}

html:not(.hgsap-desktop) .hgsap-cardsloop:not(.hgsap-mobile-on) .hgsap-cardsloop__btn {
	display: none;
}

/* ---------- SVG que se dibuja ---------- */
.hgsap-svgdraw svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible; /* la línea es más ancha que el borde del dibujo: sin esto se corta en los extremos */
}

.hgsap-svgdraw--outline svg :is(path, circle, rect, ellipse, line, polyline, polygon) {
	fill: none;
	stroke: var(--hg-stroke, #1d2c75);
	stroke-width: 2px; /* el motor lo ajusta al tamaño real con data-gsap-stroke */
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* En el editor de Elementor el motor no corre: el grosor se muestra tal cual se eligió (en px reales), sin agrandarse con el dibujo. */
.elementor-editor-active .hgsap-svgdraw--outline:not(.hgsap-live) svg :is(path, circle, rect, ellipse, line, polyline, polygon) {
	stroke-width: var(--hg-sw, 2px);
	vector-effect: non-scaling-stroke;
}

html.hgsap-js:not(.hgsap-ready):not(.hgsap-fail) .hgsap-svgdraw svg {
	opacity: 0;
}

/* ---------- Forma que se transforma ---------- */
.hgsap-svgmorph svg {
	display: block;
	width: 100%;
	height: auto;
}

.hgsap-svgmorph :is(path, rect, circle, ellipse, polygon) {
	fill: #5b77d3;
}

/* ---------- Texto que se ilumina al leer ---------- */
.hgsap-hl__text {
	color: #1d1d1f;
	margin: 0;
	padding: 0;
}

.hgsap-hl__text p {
	margin: 0 0 0.5em;
}

/* =====================================================================================================
   Vista dentro del editor de Elementor: sin motor de animación, cada elemento se muestra en su estado "armado"
   y con un tamaño razonable (no a pantalla completa), parecido a como se ve en la página.
   ===================================================================================================== */

/* Galería bento: la grilla chica, sin ocupar toda la pantalla */
.elementor-editor-active .hgsap-b-bento {
	height: min(100svh, 620px);
}

.elementor-editor-active .hgsap-b-bento__grid {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, 1fr);
	width: 100%;
	height: 100%;
}

/* Carrusel infinito: el centro grande y las tarjetas que se achican parejo a los dos lados */
.elementor-editor-active .hgsap-cardsloop {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(320px, 52vh, 560px);
	padding: 24px;
}

.elementor-editor-active .hgsap-cardsloop__card {
	flex: none;
	margin: 0 -3%;
}

.elementor-editor-active .hgsap-cardsloop__card:nth-child(1),
.elementor-editor-active .hgsap-cardsloop__card:nth-child(5) {
	opacity: 0.55;
	transform: scale(0.6);
}

.elementor-editor-active .hgsap-cardsloop__card:nth-child(2),
.elementor-editor-active .hgsap-cardsloop__card:nth-child(4) {
	opacity: 0.85;
	transform: scale(0.8);
}

.elementor-editor-active .hgsap-cardsloop__card:nth-child(3) {
	z-index: 3;
}

.elementor-editor-active .hgsap-cardsloop__card:nth-child(n + 6) {
	display: none;
}

/* ---------- Sección que se achica ---------- */
.hgsap-shrink {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--hg-vh, 100svh);
	margin: 0;
	padding: clamp(24px, 4vw, 64px);
	overflow: hidden;
	text-align: center;
}

.hgsap-shrink__body {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.hgsap-shrink__title {
	margin: 0 0 16px;
	font-size: clamp(2rem, 4.5vw, 4.5rem);
	font-weight: 700;
	line-height: 1.05;
}

.hgsap-shrink__text {
	margin: 0 0 24px;
	font-size: clamp(1rem, 1.2vw, 1.4rem);
}

.hgsap-shrink__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.hgsap-shrink__btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

.hgsap-shrink__btn--1 {
	background: #fff;
	color: #1d1d1f;
}

.hgsap-shrink__btn--2 {
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
}

.hgsap-shrink__side {
	position: absolute;
	bottom: 0;
	z-index: 1;
	width: 24%;
	line-height: 0;
}

.hgsap-shrink__side--left {
	left: 0;
}

.hgsap-shrink__side--right {
	right: 0;
}

.hgsap-shrink__side img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Título animado ---------- */
.hgsap-kinetic {
	margin: 0;
	font-size: clamp(2.2rem, 6vw, 6rem);
	font-weight: 800;
	line-height: 1.05;
}

/* Cada línea del título es un bloque: así se puede correr de a una (Estilo > Línea 2, 3 y 4). */
.hgsap-kline {
	display: block;
}

.hgsap-kinetic-wrap {
	position: relative;
}

.hgsap-adorn {
	position: absolute;
	z-index: 2;
	display: block;
	width: 60px;
	font-size: 60px;
	line-height: 0;
	pointer-events: none;
}

.hgsap-adorn__in {
	display: block;
}

.hgsap-adorn img,
.hgsap-adorn svg,
.hgsap-adorn .hgsap-lottie {
	display: block;
	width: 100%;
	height: auto;
}

.hgsap-adorn i {
	display: block;
	width: 1em;
	height: 1em;
	line-height: 1;
}

/* Los adornos esperan a que arranque el motor (si no, se ven un instante antes de entrar). */
html.hgsap-js:not(.hgsap-ready):not(.hgsap-fail) .hgsap-kinetic-wrap .hgsap-adorn {
	opacity: 0;
}

/* ---------- Figura al mouse ---------- */
.hgsap-follow {
	width: 160px;
	font-size: 160px;
	line-height: 0;
}

.hgsap-follow img,
.hgsap-follow svg,
.hgsap-follow .hgsap-lottie {
	display: block;
	width: 100%;
	height: auto;
}

.hgsap-follow i {
	display: block;
	width: 1em;
	height: 1em;
	line-height: 1;
}

/* Relevo: el adorno ocupa el hueco de una letra (la caja que recorta) y se va mientras la letra entra. */
.hgsap-slot {
	position: relative;
	display: inline-block;
	overflow: clip;
	vertical-align: top;
}

.hgsap-adorn--slot {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100%;
	left: 0 !important;
	top: 0 !important;
	margin: 0 !important;
}

.hgsap-adorn--slot .hgsap-adorn__in {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.hgsap-adorn--slot img,
.hgsap-adorn--slot svg,
.hgsap-adorn--slot .hgsap-lottie {
	width: auto;
	max-width: 100%;
	height: 80%;
}

.hgsap-adorn--slot i {
	width: 1em;
	height: 1em;
}

/* Palabra del título (modo palabras): sigue el flujo normal del texto. */
.hgsap-kword {
	display: inline;
}

/* Máscara de las letras: la caja que recorta se agranda hacia abajo, arriba y a los lados (con margen negativo que compensa) para que no
   corte las colas de la g, y, p ni las letras inclinadas. El texto no se mueve de lugar. */
.hgsap-kc-mask,
.hgsap-slot {
	padding: 0.15em 0.12em 0.3em;
	margin: -0.15em -0.12em -0.3em;
}


/* ---------- Contador ---------- */
.hgsap-cn {
	margin: 0;
	padding: 0;
}

.hgsap-cn__num {
	margin: 0;
	padding: 0;
	color: #1d2c75;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 700;
	line-height: 1.1;
}

.hgsap-cn__label {
	margin: 8px 0 0;
	padding: 0;
	color: #606060;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
}

/* Contadores desde repeater: una grilla con un contador por fila */
.hgsap-cnr {
	display: grid;
	margin: 0;
	padding: 0;
}

.hgsap-cnr__empty {
	margin: 0;
	padding: 12px;
	font-size: 14px;
	color: #606060;
	border: 1px dashed #b0b0b0;
}

/* ---------- Botón que cambia ---------- */
.hgsap-bs-wrap {
	margin: 0;
	padding: 0;
}

.hgsap-bs {
	display: inline-block;
	margin: 0;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	background: #1d2c75;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.hgsap-bs:hover,
.hgsap-bs:focus-visible {
	background: #5b77d3;
}

/* ---------- Cuadrícula al cursor ---------- */
.hgsap-px {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 620px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #0e1535;
	cursor: crosshair;
}

.hgsap-px__item {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	rotate: var(--r, 0deg);
	transform-origin: center;
}

.hgsap-px__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #5b77d3, #8aa5f2);
	font-size: 26px;
	line-height: 1;
}

.hgsap-px__icon img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.hgsap-px__name {
	color: #e2e8f0;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

/* En celular no hay mouse: los elementos se ordenan en 2 columnas, sin efecto. */
@media (max-width: 767px) {
	.hgsap-px {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 12px;
		height: auto;
		padding: 24px 16px;
		cursor: auto;
	}

	.hgsap-px__item {
		position: static;
		rotate: none;
	}
}

/* ---------- Tooltip elástico ---------- */
.hgsap-tt-wrap {
	margin: 0;
	padding: 0;
}

.hgsap-tt {
	--hg-tt-w: 180px;
	position: relative;
	display: inline-block;
}

.hgsap-tt__t {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 999px;
	background: #1d2c75;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: help;
}

.hgsap-tt__t i,
.hgsap-tt__t svg {
	flex: none;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.hgsap-tt__b {
	position: absolute;
	left: 50%;
	z-index: 5;
	box-sizing: border-box;
	width: var(--hg-tt-w);
	margin-left: calc(var(--hg-tt-w) / -2);
	padding: 8px 12px;
	border-radius: 10px;
	background: #1d1d1f;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.hgsap-tt--top .hgsap-tt__b {
	bottom: calc(100% + 12px);
}

.hgsap-tt--bottom .hgsap-tt__b {
	top: calc(100% + 12px);
}

/* Sin el motor (movimiento reducido o antes de cargar) la burbuja igual aparece al pasar el mouse o enfocar. */
.hgsap-tt:hover .hgsap-tt__b,
.hgsap-tt:focus-within .hgsap-tt__b {
	opacity: 1;
	visibility: visible;
}

/* ---------- Menú desplegable elástico ---------- */
.hgsap-dd-wrap {
	margin: 0;
	padding: 0;
}

.hgsap-dd {
	position: relative;
	display: inline-block;
	text-align: left;
}

.hgsap-dd__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: #1d2c75;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.hgsap-dd__arrow {
	display: inline-block;
}

.hgsap-dd__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 5;
	box-sizing: border-box;
	min-width: 180px;
	padding: 6px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
	opacity: 0;
	visibility: hidden;
}

.hgsap-dd--right .hgsap-dd__menu {
	right: 0;
	left: auto;
}

.hgsap-dd__menu > * {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	color: #1d1d1f;
	font-size: 0.95rem;
	text-decoration: none;
}

.hgsap-dd__menu > a:hover,
.hgsap-dd__menu > a:focus-visible {
	background: #eef2ff;
}

/* Sin el motor (movimiento reducido) el menú igual se abre al enfocar el botón. */
.hgsap-dd:focus-within .hgsap-dd__menu {
	opacity: 1;
	visibility: visible;
}

/* ---------- Dock de íconos ---------- */
.hgsap-dk-wrap {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.hgsap-dk {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 16px 20px;
	border-radius: 22px;
	background: rgba(15, 23, 42, 0.08);
}

.hgsap-dk__item {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
	color: #1d2c75;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

.hgsap-dk__item i,
.hgsap-dk__item svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.hgsap-dk__item img {
	display: block;
	width: 70%;
	height: 70%;
	object-fit: contain;
}

/* ---------- Pestañas con scroll ---------- */
.hgsap-ts {
	margin: 0;
	padding: 0;
}

.hgsap-ts__heading {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
}

.hgsap-ts__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 22px;
	border: 1px solid #e3e6f3;
	border-radius: 999px;
	background: #fff;
	color: #111827;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.hgsap-ts__tab:hover {
	border-color: #496be3;
}

.hgsap-ts__tab:focus-visible {
	outline: 2px solid #496be3;
	outline-offset: 2px;
}

.hgsap-ts__tab[aria-selected="true"] {
	border-color: #496be3;
	background: #496be3;
	color: #fff;
}

.hgsap-ts__tab-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.hgsap-ts__tab-icon svg,
.hgsap-ts__tab-icon i {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Sin el motor (movimiento reducido o JS apagado): todo el contenido a la vista y sin pastillas. En el editor siempre se ven. */
.hgsap-ts:not(.hgsap-ts--live) .hgsap-ts__heading {
	display: none;
}

.elementor-editor-active .hgsap-ts:not(.hgsap-ts--live) .hgsap-ts__heading {
	display: flex;
}

/* Con el motor: todos los contenedores en la misma celda (la altura es la del más alto, así la sección fija no salta) y solo el activo se ve. */
.hgsap-ts--live > .hgsap-ts__content {
	display: grid;
}

.hgsap-ts--live > .hgsap-ts__content > * {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(14px);
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}

.hgsap-ts--live > .hgsap-ts__content > .is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s;
}

/* ---------- Imágenes que rebotan ---------- */
.hgsap-bn-wrap {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.hgsap-bn {
	display: grid;
	grid-template-columns: repeat(4, max-content);
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.hgsap-bn__item {
	margin: 0;
	padding: 0;
}

.hgsap-bn__item img {
	display: block;
	width: clamp(64px, 11vw, 170px);
	height: clamp(64px, 11vw, 170px);
	object-fit: contain;
	border-radius: 8px;
	pointer-events: none;
	will-change: transform;
}

/* ---------- Dibujo con zoom ---------- */
.hgsap-zs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.hgsap-zs svg {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Agrandando una parte puede salirse del dibujo; con la cámara, lo que queda afuera se recorta. */
.hgsap-zs--grow svg {
	overflow: visible;
}

.hgsap-zs--camera svg {
	overflow: hidden;
}

.hgsap-zs svg [tabindex]:focus:not(:focus-visible) {
	outline: none;
}