/* ==========================================================================
   IMPULZO STUDIO - GALERÍA E ÍTEMS SUPERPUESTOS (impulzo-galeria-items)
   Cero CSS en línea - Gobernado por Variables CSS de Elementor
   ========================================================================== */

.impulzo-galeria-items-container {
	/* Variables del Contenedor Maestro */
	--impulzo-gi-container-max-width: 980px;
	--impulzo-gi-container-width: 920px;
	--impulzo-gi-container-scale: 1;
	--impulzo-gi-container-padding: 0px 0px 48px 0px;

	/* Variables de Imagen / Galería y Encuadre */
	--impulzo-gi-aspect-ratio: 4 / 3;
	--impulzo-gi-media-height: 540px;
	--impulzo-gi-img-base-scale: 1;
	--impulzo-gi-img-pos-x: center;
	--impulzo-gi-img-pos-y: center;
	--impulzo-gi-zoom-scale: 1.08;
	--impulzo-gi-zoom-duration: 700ms;
	--impulzo-gi-gallery-duration: 900ms;
	--impulzo-gi-media-radius: 0px;

	/* Variables del Contorno Progresivo en Hover */
	--impulzo-gi-outline-color: #0084c2;
	--impulzo-gi-outline-width: 4px;
	--impulzo-gi-outline-offset: 0px;
	--impulzo-gi-outline-duration: 550ms;

	/* Variables de Posición y Grid de Ítems */
	--impulzo-gi-items-overlap: -48px;
	--impulzo-gi-items-justify: center;
	--impulzo-gi-grid-cols: 3;
	--impulzo-gi-grid-rows: 1;
	--impulzo-gi-gap-x: 36px;
	--impulzo-gi-gap-y: 20px;

	/* Variables de Diseño de Cada Ítem */
	--impulzo-gi-item-width: 210px;
	--impulzo-gi-item-min-height: 96px;
	--impulzo-gi-item-padding: 18px 22px;
	--impulzo-gi-item-radius: 0px;
	--impulzo-gi-item-text-align: center;
	--impulzo-gi-item-v-align: center;
	--impulzo-gi-item-bg: #0084c2;
	--impulzo-gi-item-hover-bg: #006a9e;
	--impulzo-gi-item-color: #ffffff;
	--impulzo-gi-item-hover-color: #ffffff;

	/* Variables de Animación Grow-Up y Typewriter */
	--impulzo-gi-grow-y: 36px;
	--impulzo-gi-grow-scale: 0.88;
	--impulzo-gi-grow-duration: 650ms;
	--impulzo-gi-grow-stagger: 160ms;
	--impulzo-gi-cursor-color: rgba(255, 255, 255, 0.85);

	position: relative;
	width: 100%;
	padding: var(--impulzo-gi-container-padding);
	transform: scale(var(--impulzo-gi-container-scale));
	transform-origin: center top;
	box-sizing: border-box;
}

.impulzo-galeria-items-container *,
.impulzo-galeria-items-container *::before,
.impulzo-galeria-items-container *::after {
	box-sizing: border-box;
}

.impulzo-galeria-items-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
}

.impulzo-galeria-items-container.layout-boxed .impulzo-galeria-items-stage {
	width: 100%;
	max-width: var(--impulzo-gi-container-max-width);
}

.impulzo-galeria-items-container.layout-full .impulzo-galeria-items-stage {
	width: 100%;
	max-width: 100%;
}

.impulzo-galeria-items-container.layout-custom .impulzo-galeria-items-stage {
	width: var(--impulzo-gi-container-width);
	max-width: 100%;
}

/* ==========================================================================
   MARCO DE IMAGEN / GALERÍA (SIN DESBORDAMIENTO + FORMATO + POSICIÓN)
   ========================================================================== */
.impulzo-galeria-items-media-frame {
	position: relative;
	width: 100%;
	z-index: 2;
	border-radius: var(--impulzo-gi-media-radius);
}

.impulzo-galeria-items-media-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--impulzo-gi-media-radius);
	background-color: #e5e7eb;
}

.impulzo-galeria-items-container.aspect-ratio .impulzo-galeria-items-media-viewport {
	aspect-ratio: var(--impulzo-gi-aspect-ratio);
}

.impulzo-galeria-items-container.aspect-custom .impulzo-galeria-items-media-viewport {
	height: var(--impulzo-gi-media-height);
}

.impulzo-galeria-items-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--impulzo-gi-gallery-duration) cubic-bezier(0.22, 1, 0.36, 1),
	            transform var(--impulzo-gi-gallery-duration) cubic-bezier(0.22, 1, 0.36, 1),
	            visibility var(--impulzo-gi-gallery-duration) ease;
}

.impulzo-galeria-items-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/* Efectos de transición de Galería */
.impulzo-galeria-items-container.gallery-fx-slide .impulzo-galeria-items-slide {
	transform: translateX(6%);
}

.impulzo-galeria-items-container.gallery-fx-slide .impulzo-galeria-items-slide.is-active {
	transform: translateX(0);
}

.impulzo-galeria-items-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: var(--impulzo-gi-img-pos-x) var(--impulzo-gi-img-pos-y);
	transform: scale(var(--impulzo-gi-img-base-scale));
	transition: transform var(--impulzo-gi-zoom-duration) cubic-bezier(0.22, 1, 0.36, 1),
	            object-position 0.35s ease;
	will-change: transform;
}

/* Efecto Ken Burns en galería */
.impulzo-galeria-items-container.gallery-fx-kenburns .impulzo-galeria-items-slide.is-active .impulzo-galeria-items-img {
	transform: scale(calc(var(--impulzo-gi-img-base-scale) * 1.06));
}

/* Zoom-In en Hover sin desbordamiento del contenedor */
.impulzo-galeria-items-container.has-zoom-hover .impulzo-galeria-items-media-frame:hover .impulzo-galeria-items-slide.is-active .impulzo-galeria-items-img {
	transform: scale(calc(var(--impulzo-gi-img-base-scale) * var(--impulzo-gi-zoom-scale)));
}

/* Indicadores (Dots) de Galería */
.impulzo-galeria-items-dots {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 99px;
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(6px);
}

.impulzo-galeria-items-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.impulzo-galeria-items-dot.is-active {
	background: #ffffff;
	transform: scale(1.25);
}

/* ==========================================================================
   ANIMACIÓN HOVER DEL CONTORNO (LLENADO PROGRESIVO)
   ========================================================================== */
.impulzo-galeria-items-outline {
	position: absolute;
	inset: calc(-1 * var(--impulzo-gi-outline-offset));
	border-radius: var(--impulzo-gi-media-radius);
	pointer-events: none;
	z-index: 4;
	overflow: hidden;
}

.impulzo-galeria-items-outline .outline-line {
	position: absolute;
	background-color: var(--impulzo-gi-outline-color);
	transition: transform var(--impulzo-gi-outline-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.impulzo-galeria-items-outline .line-top {
	top: 0;
	left: 0;
	width: 100%;
	height: var(--impulzo-gi-outline-width);
	transform: scaleX(0);
	transform-origin: left center;
}

.impulzo-galeria-items-outline .line-right {
	top: 0;
	right: 0;
	width: var(--impulzo-gi-outline-width);
	height: 100%;
	transform: scaleY(0);
	transform-origin: top center;
}

.impulzo-galeria-items-outline .line-bottom {
	bottom: 0;
	right: 0;
	width: 100%;
	height: var(--impulzo-gi-outline-width);
	transform: scaleX(0);
	transform-origin: right center;
}

.impulzo-galeria-items-outline .line-left {
	bottom: 0;
	left: 0;
	width: var(--impulzo-gi-outline-width);
	height: 100%;
	transform: scaleY(0);
	transform-origin: bottom center;
}

/* Modo 1: Doble trazo desde esquinas opuestas */
.impulzo-galeria-items-container.has-outline-hover.outline-mode-corners .impulzo-galeria-items-media-frame:hover .line-top,
.impulzo-galeria-items-container.has-outline-hover.outline-mode-corners .impulzo-galeria-items-media-frame:hover .line-bottom {
	transform: scaleX(1);
}

.impulzo-galeria-items-container.has-outline-hover.outline-mode-corners .impulzo-galeria-items-media-frame:hover .line-right,
.impulzo-galeria-items-container.has-outline-hover.outline-mode-corners .impulzo-galeria-items-media-frame:hover .line-left {
	transform: scaleY(1);
	transition-delay: calc(var(--impulzo-gi-outline-duration) * 0.35);
}

/* Modo 2: Recorrido Perimetral Secuencial 360° */
.impulzo-galeria-items-container.has-outline-hover.outline-mode-perimeter .outline-line {
	transition-duration: calc(var(--impulzo-gi-outline-duration) * 0.35);
}

.impulzo-galeria-items-container.has-outline-hover.outline-mode-perimeter .impulzo-galeria-items-media-frame:hover .line-top {
	transform: scaleX(1);
	transition-delay: 0ms;
}

.impulzo-galeria-items-container.has-outline-hover.outline-mode-perimeter .impulzo-galeria-items-media-frame:hover .line-right {
	transform: scaleY(1);
	transition-delay: calc(var(--impulzo-gi-outline-duration) * 0.25);
}

.impulzo-galeria-items-container.has-outline-hover.outline-mode-perimeter .impulzo-galeria-items-media-frame:hover .line-bottom {
	transform: scaleX(1);
	transition-delay: calc(var(--impulzo-gi-outline-duration) * 0.5);
}

.impulzo-galeria-items-container.has-outline-hover.outline-mode-perimeter .impulzo-galeria-items-media-frame:hover .line-left {
	transform: scaleY(1);
	transition-delay: calc(var(--impulzo-gi-outline-duration) * 0.75);
}

/* Modo 3: Expansión Simétrica desde el Centro */
.impulzo-galeria-items-container.outline-mode-center .outline-line.line-top,
.impulzo-galeria-items-container.outline-mode-center .outline-line.line-bottom {
	transform-origin: center center;
}

.impulzo-galeria-items-container.outline-mode-center .outline-line.line-left,
.impulzo-galeria-items-container.outline-mode-center .outline-line.line-right {
	transform-origin: center center;
}

.impulzo-galeria-items-container.has-outline-hover.outline-mode-center .impulzo-galeria-items-media-frame:hover .line-top,
.impulzo-galeria-items-container.has-outline-hover.outline-mode-center .impulzo-galeria-items-media-frame:hover .line-bottom {
	transform: scaleX(1);
}

.impulzo-galeria-items-container.has-outline-hover.outline-mode-center .impulzo-galeria-items-media-frame:hover .line-left,
.impulzo-galeria-items-container.has-outline-hover.outline-mode-center .impulzo-galeria-items-media-frame:hover .line-right {
	transform: scaleY(1);
}

/* ==========================================================================
   POSICIÓN, SUPERPOSICIÓN Y GRID DE ÍTEMS
   ========================================================================== */
.impulzo-galeria-items-grid-wrap {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: var(--impulzo-gi-items-justify);
	padding-left: 20px;
	padding-right: 20px;
}

/* Nivel de capa (por encima o por debajo de la foto) */
.impulzo-galeria-items-container.items-layer-above .impulzo-galeria-items-grid-wrap {
	z-index: 5;
}

.impulzo-galeria-items-container.items-layer-below .impulzo-galeria-items-grid-wrap {
	z-index: 1;
}

/* Ubicación Abajo / Arriba / Centro + Superposición */
.impulzo-galeria-items-container.items-pos-bottom .impulzo-galeria-items-grid-wrap {
	order: 2;
	margin-top: var(--impulzo-gi-items-overlap);
}

.impulzo-galeria-items-container.items-pos-top .impulzo-galeria-items-media-frame {
	order: 2;
}

.impulzo-galeria-items-container.items-pos-top .impulzo-galeria-items-grid-wrap {
	order: 1;
	margin-bottom: var(--impulzo-gi-items-overlap);
}

.impulzo-galeria-items-container.items-pos-center .impulzo-galeria-items-grid-wrap {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(calc(-50% + var(--impulzo-gi-items-overlap)));
}

.impulzo-galeria-items-grid {
	display: grid;
	grid-template-columns: repeat(var(--impulzo-gi-grid-cols), auto);
	grid-template-rows: repeat(var(--impulzo-gi-grid-rows), auto);
	column-gap: var(--impulzo-gi-gap-x);
	row-gap: var(--impulzo-gi-gap-y);
	justify-content: var(--impulzo-gi-items-justify);
	align-items: stretch;
	max-width: 100%;
}

/* ==========================================================================
   TARJETAS / ÍTEMS INDIVIDUALES + ANIMACIÓN GROW-UP Y TYPEWRITER
   ========================================================================== */
.impulzo-galeria-items-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: var(--impulzo-gi-item-v-align);
	align-items: stretch;
	width: var(--impulzo-gi-item-width);
	max-width: 100%;
	min-height: var(--impulzo-gi-item-min-height);
	padding: var(--impulzo-gi-item-padding);
	border-radius: var(--impulzo-gi-item-radius);
	background-color: var(--impulzo-gi-item-custom-bg, var(--impulzo-gi-item-bg));
	color: var(--impulzo-gi-item-custom-color, var(--impulzo-gi-item-color));
	text-align: var(--impulzo-gi-item-text-align);
	text-decoration: none;
	box-shadow: 0 10px 24px -6px rgba(0, 50, 90, 0.22);
	transition: background-color 0.3s ease,
	            color 0.3s ease,
	            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.35s ease;
}

.impulzo-galeria-items-card:hover {
	background-color: var(--impulzo-gi-item-custom-bg, var(--impulzo-gi-item-hover-bg));
	color: var(--impulzo-gi-item-custom-color, var(--impulzo-gi-item-hover-color));
	transform: translateY(-4px);
}

/* Estado inicial para la animación Grow-Up escalonada */
.impulzo-galeria-items-container.has-grow-up .impulzo-galeria-items-card {
	opacity: 0;
	transform: translateY(var(--impulzo-gi-grow-y)) scale(var(--impulzo-gi-grow-scale));
	transition: opacity var(--impulzo-gi-grow-duration) cubic-bezier(0.22, 1, 0.36, 1),
	            transform var(--impulzo-gi-grow-duration) cubic-bezier(0.22, 1, 0.36, 1),
	            background-color 0.3s ease,
	            color 0.3s ease,
	            box-shadow 0.35s ease;
	transition-delay: var(--impulzo-gi-card-delay, 0ms);
}

.impulzo-galeria-items-container.has-grow-up.is-in-view .impulzo-galeria-items-card {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.impulzo-galeria-items-container.has-grow-up.is-in-view .impulzo-galeria-items-card:hover {
	transform: translateY(-4px) scale(1.02);
	transition-delay: 0ms;
}

.impulzo-galeria-items-card-title {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: inherit;
	white-space: pre-line;
}

.impulzo-galeria-items-card-subtitle {
	display: block;
	margin-top: 6px;
	font-size: 0.88rem;
	font-weight: 400;
	opacity: 0.88;
	color: inherit;
}

/* Cursor de Simulación de Escritura (Typewriter) */
@keyframes impulzoTypeCursorBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

.impulzo-galeria-items-container.has-typewriter.has-typewriter-cursor .impulzo-galeria-items-card-title.is-typing::after {
	content: "|";
	display: inline-block;
	margin-left: 2px;
	font-weight: 400;
	color: var(--impulzo-gi-cursor-color);
	animation: impulzoTypeCursorBlink 0.65s infinite;
}

/* ==========================================================================
   VISIBILIDAD POR DISPOSITIVO (DESKTOP / TABLET / MOBILE) Y RESPONSIVE
   ========================================================================== */
@media (min-width: 1025px) {
	.impulzo-galeria-items-grid-wrap.hide-items-desktop,
	.impulzo-galeria-items-card.hide-on-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.impulzo-galeria-items-grid-wrap.hide-items-tablet,
	.impulzo-galeria-items-card.hide-on-tablet {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.impulzo-galeria-items-grid {
		column-gap: 20px;
		row-gap: 16px;
	}

	.impulzo-galeria-items-card {
		width: var(--impulzo-gi-item-width, 190px);
	}
}

@media (max-width: 767px) {
	.impulzo-galeria-items-grid-wrap.hide-items-mobile,
	.impulzo-galeria-items-card.hide-on-mobile {
		display: none !important;
	}

	.impulzo-galeria-items-grid {
		width: 100%;
		grid-template-columns: repeat(var(--impulzo-gi-grid-cols, 1), minmax(0, 1fr));
	}

	.impulzo-galeria-items-card {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}