/* =====================================================================
   HCL Industrias Carousel — v1.0.0
   Layout: texto a la izquierda + imagen protagonista, con la imagen
   anterior y siguiente asomándose por los bordes.
   Todo se ajusta desde las variables de .hcl-ind (puedes sobrescribirlas
   en Elementor → Site Settings → Custom CSS).
   ===================================================================== */

.hcl-ind {
	/* Marca HCL */
	--hcl-ind-bg: #f5f4f1;
	--hcl-ind-ink: #171925;
	--hcl-ind-muted: #4b4e5c;
	--hcl-ind-accent: #171925;      /* flechas + botón */
	--hcl-ind-accent-ink: #ffffff;
	--hcl-ind-gold: #f4c94e;        /* hover / detalles */
	--hcl-ind-font-title: 'Montserrat', sans-serif;
	--hcl-ind-font-body: 'Montserrat', sans-serif;
	--hcl-ind-arrow-bg: #171925;
	--hcl-ind-arrow-hover: #fad34c;

	/* Movimiento */
	--hcl-ind-speed: 0.85s;
	--hcl-ind-ease: cubic-bezier(0.65, 0, 0.25, 1);

	position: relative;
	overflow: hidden;
	background: var(--hcl-ind-bg);
	color: var(--hcl-ind-ink);
	font-family: var(--hcl-ind-font-body);
	font-weight: normal;
	container-type: inline-size;
	container-name: hclind;
	padding-block: clamp(48px, 6vw, 110px);
	-webkit-tap-highlight-color: transparent;
}

.hcl-ind *,
.hcl-ind *::before,
.hcl-ind *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   ESCENARIO (desktop por defecto, medidas tomadas de la referencia 1900px)
   --------------------------------------------------------------------- */
.hcl-ind__stage {
	--img-w: 35.8cqw;                         /* 680 / 1900 */
	--img-h: calc(var(--img-w) * 0.6667);     /* 3:2 */
	--img-x: 43.2cqw;                         /* 820 / 1900 */
	--peek: 11.6cqw;                          /* lo que asoman las vecinas */
	--peek-scale: 0.93;
	--text-w: clamp(270px, 19cqw, 400px);
	--text-gap: 3.6cqw;
	--arrow: 55px;
	--text-x: calc(var(--img-x) - var(--text-w) - var(--text-gap));

	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(var(--img-h) + 2px);
	touch-action: pan-y;
}

/* ---- Imágenes ---- */
.hcl-ind__media {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hcl-ind__img {
	--x: 120cqw;
	--s: 1;
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--img-w);
	aspect-ratio: 3 / 2;
	margin: 0;
	overflow: hidden;
	background: #e3e1da;
	transform: translate3d(var(--x), -50%, 0) scale(var(--s));
	transition:
		transform var(--hcl-ind-speed) var(--hcl-ind-ease),
		opacity calc(var(--hcl-ind-speed) * 0.6) ease;
	will-change: transform;
}

.hcl-ind__img img,
.hcl-ind__photo {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transition: transform calc(var(--hcl-ind-speed) * 1.6) var(--hcl-ind-ease);
}

.hcl-ind__img.is-active { --x: var(--img-x); --s: 1; z-index: 2; }
.hcl-ind__img.is-next   { --x: calc(100cqw - var(--peek)); --s: var(--peek-scale); transform-origin: left center; cursor: pointer; }
.hcl-ind__img.is-prev   { --x: calc(var(--peek) - var(--img-w)); --s: var(--peek-scale); transform-origin: right center; cursor: pointer; }
.hcl-ind__img.is-next2  { --x: calc(100cqw + var(--img-w) * 0.2); --s: var(--peek-scale); transform-origin: left center; }
.hcl-ind__img.is-prev2  { --x: calc(-2 * var(--img-w)); --s: var(--peek-scale); transform-origin: right center; }
.hcl-ind__img.is-far-right { --x: calc(100cqw + var(--img-w) * 0.2); --s: var(--peek-scale); opacity: 0; transition: none; }
.hcl-ind__img.is-far-left  { --x: calc(-2 * var(--img-w)); --s: var(--peek-scale); opacity: 0; transition: none; }

/* leve zoom de la foto al llegar (sensación premium) */
.hcl-ind__img:not(.is-active) img { transform: scale(1.06); }
.hcl-ind__img.is-active img { transform: scale(1); }

.hcl-ind__img.is-next:hover,
.hcl-ind__img.is-prev:hover { filter: brightness(1.04); }

/* ---- Placeholder cuando la industria aún no tiene imagen ---- */
.hcl-ind__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 7% 8%;
	background:
		linear-gradient(135deg, transparent 0 58%, rgba(244, 201, 78, 0.9) 58% 58.4%, transparent 58.4%),
		radial-gradient(120% 90% at 85% 10%, #2a2d40 0%, #171925 60%);
	color: #fff;
	overflow: hidden;
}
.hcl-ind__ph-num {
	position: absolute;
	top: -4%;
	right: 5%;
	font-family: var(--hcl-ind-font-title);
	font-size: calc(var(--img-w) * 0.42);
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
}
.hcl-ind__ph-name {
	position: relative;
	font-family: var(--hcl-ind-font-title);
	font-size: calc(var(--img-w) * 0.055);
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* ---- Textos (todos apilados en la misma celda; sólo uno visible) ---- */
.hcl-ind__texts {
	position: relative;
	z-index: 3;
	display: grid;
	width: var(--text-w);
	margin-left: var(--text-x);
	padding-block: 24px;
}

.hcl-ind__text {
	grid-area: 1 / 1;
	align-self: center;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease,
		visibility 0s linear 0.35s;
}
.hcl-ind__text.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 0.6s ease calc(var(--hcl-ind-speed) * 0.45),
		transform 0.6s var(--hcl-ind-ease) calc(var(--hcl-ind-speed) * 0.45),
		visibility 0s;
}

.hcl-ind__num {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	font-family: var(--hcl-ind-font-body);
	font-size: 13px;
	font-weight: normal;
	letter-spacing: 0.18em;
	color: var(--hcl-ind-ink);
}
.hcl-ind__num--line-only { min-height: 1.2em; } /* sin número: sólo la línea, misma altura */
.hcl-ind__num::before {
	content: "";
	width: 36px;
	height: 3px;
	background: var(--hcl-ind-gold);
}

.hcl-ind__title {
	margin: 0 0 clamp(18px, 2cqw, 34px);
	font-family: var(--hcl-ind-font-title);
	font-size: clamp(28px, 2.1cqw, 42px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.005em;
	color: var(--hcl-ind-ink);
	text-wrap: balance;
}

.hcl-ind__desc {
	font-family: var(--hcl-ind-font-body);
	font-size: clamp(14px, 0.86cqw, 16px);
	font-weight: normal;
	line-height: 1.4;
	color: var(--hcl-ind-muted);
}
.hcl-ind__desc p { margin: 0 0 1em; }
.hcl-ind__desc p:last-child { margin-bottom: 0; }

.hcl-ind__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 210px;
	min-height: 54px;
	margin-top: clamp(24px, 2.3cqw, 44px);
	padding: 0 32px;
	background: var(--hcl-ind-accent);
	color: var(--hcl-ind-accent-ink) !important;
	font-family: var(--hcl-ind-font-body);
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.hcl-ind__btn:hover,
.hcl-ind__btn:focus-visible {
	background: var(--hcl-ind-gold);
	color: var(--hcl-ind-ink) !important;
}

/* ---- Flechas ---- */
.hcl-ind .hcl-ind__stage .hcl-ind__arrow {   /* especificidad alta: le gana a los estilos globales de botones del tema/Elementor */
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--arrow);
	height: var(--arrow);
	margin: 0;
	padding: 0;
	background-color: var(--hcl-ind-arrow-bg);
	border: 1px solid #8c8c8c;
	border-radius: 50%;
	color: #ffffff;
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
	transform: translateY(-50%);
	transition: all .3s;
}
.hcl-ind__arrow svg { width: 46%; height: 46%; }
.hcl-ind__arrow--prev { left: calc((var(--peek) + var(--text-x)) / 2 - var(--arrow) / 2); }   /* centrada entre la vecina y el texto */
.hcl-ind__arrow--next { right: calc(100cqw - (var(--img-x) + var(--img-w) + 100cqw - var(--peek)) / 2 - var(--arrow) / 2); }
.hcl-ind__arrow--next svg { transform: scaleX(-1); }
.hcl-ind .hcl-ind__stage .hcl-ind__arrow:hover,
.hcl-ind .hcl-ind__stage .hcl-ind__arrow:focus-visible {
	background-color: var(--hcl-ind-arrow-hover);
	color: #171925;
	text-decoration: none;
}

/* foco accesible (como el anillo de la referencia) */
.hcl-ind :is(.hcl-ind__arrow, .hcl-ind__btn, .hcl-ind__dot):focus { outline: none; }
.hcl-ind :is(.hcl-ind__arrow, .hcl-ind__btn, .hcl-ind__dot):focus-visible {
	outline: 2px solid var(--hcl-ind-gold);
	outline-offset: 3px;
}

/* ---- Puntos ---- */
.hcl-ind__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: clamp(32px, 3.5cqw, 64px);
	padding-inline: 16px;
}
.hcl-ind__dot {
	position: relative;
	width: 28px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.hcl-ind__dot::before {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	top: 50%;
	height: 2px;
	background: rgba(23, 25, 37, 0.18);
	transition: background-color 0.3s ease, height 0.3s ease;
}
.hcl-ind__dot:hover::before { background: rgba(23, 25, 37, 0.45); }
.hcl-ind__dot[aria-current="true"]::before {
	height: 3px;
	background: var(--hcl-ind-ink);
}

/* texto sólo para lectores de pantalla */
.hcl-ind__live {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------
   TABLET / MÓVIL — imagen arriba, texto abajo, vecinas asomando
   --------------------------------------------------------------------- */
@container hclind (max-width: 1199px) {
	.hcl-ind__stage {
		--img-w: 84cqw;
		--img-x: 8cqw;
		--peek: 5cqw;
		--peek-scale: 0.9;

		display: block;
		min-height: 0;
	}
	.hcl-ind__media {
		position: relative;
		inset: auto;
		height: var(--img-h);
	}
	.hcl-ind__img.is-next2,
	.hcl-ind__img.is-prev2 { opacity: 0; }

	.hcl-ind__texts {
		width: auto;
		max-width: 640px;
		margin: 0 8cqw;
		padding: 34px 0 0;
	}
	.hcl-ind__text { align-self: start; }

	.hcl-ind .hcl-ind__stage .hcl-ind__arrow { top: calc(var(--img-h) / 2); }
	.hcl-ind__arrow--prev { left: calc(var(--img-x) - var(--arrow) / 2); }
	.hcl-ind__arrow--next { right: calc(var(--img-x) - var(--arrow) / 2); }

	.hcl-ind__title { font-size: clamp(26px, 5.4cqw, 36px); }
	.hcl-ind__desc { font-size: 15px; }
}

@container hclind (max-width: 520px) {
	.hcl-ind__btn { width: 100%; }
	.hcl-ind__dot { width: 20px; }
	.hcl-ind__dot::before { left: 3px; right: 3px; }
}

/* ---------------------------------------------------------------------
   Movimiento reducido
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hcl-ind__img,
	.hcl-ind__img img,
	.hcl-ind__text,
	.hcl-ind__text.is-active {
		transition-duration: 0.01s !important;
		transition-delay: 0s !important;
	}
	.hcl-ind__img:not(.is-active) img { transform: none; }
}