/* ==========================================================================
   HCL SCROLL EXPERIENCE — CSS custom
   Este archivo solo controla estilos y animaciones. El contenido y el
   markup base los genera Elementor/ACF — este CSS se "engancha" a las
   clases hcl-* puestas manualmente en el campo "CSS Classes" de cada
   widget/Container en Elementor.

   Estructura y proporciones ajustadas para reflejar el diseño real
   aprobado en Adobe XD (ver capturas de referencia del cliente):
   header con isotipo + iconos, hero con foto + marca de agua tipo arco,
   cifras con highlight en el porcentaje, grid de servicios con línea
   diagonal cruzando el número, partners con dos tarjetas "destacadas"
   (highlight amarillo en el nombre) + tarjetas regulares, contacto con
   columna de datos/formulario a la izquierda e imagen a la derecha,
   footer con logo centrado.
   ========================================================================== */

/* ==========================================================================
   HCL BASE
   ========================================================================== */
:root {
	--hcl-dark: #14151f;
	--hcl-yellow: #F4C94E;
	--hcl-light: #F5F4F1;
	--hcl-line: rgba(255, 255, 255, .15);
	--hcl-muted: rgba(245, 244, 241, .62);
	--hcl-mark-color: rgba(255, 255, 255, .16);

	/* Controlan intensidad de las animaciones — se sobreescriben en mobile
	   y en prefers-reduced-motion sin tocar el resto del CSS. */
	--hcl-reveal-distance: 30px;
	--hcl-reveal-duration: .7s;
	--hcl-reveal-ease: cubic-bezier(.19, 1, .22, 1);
	--hcl-stagger-step: 90ms;
}

.hcl-header, .hcl-hero, .hcl-clientes, .hcl-servicios, .hcl-partners, .hcl-contacto, .hcl-footer {
	position: relative;
}

/* Marca de agua decorativa tipo "arco" (isotipo HCL). Se usa en tamaño
   grande como fondo del hero/cifras y en tamaño pequeño como icono del
   header. Es puramente decorativa — nunca lleva texto ni contenido. */
.hcl-mark {
	display: block;
	fill: var(--hcl-mark-color);
	pointer-events: none;
}
.hcl-mark--watermark {
	position: absolute;
	width: 320px;
	height: auto;
	z-index: 1;
}

/* Icono de acento repetido en el margen izquierdo de cada sección
   (barra amarilla + flecha). Es un adorno de UI, no contenido — se
   inserta una vez por sección vía un widget HTML/plantilla en Elementor. */
.hcl-side-marker {
	display: flex;
	align-items: center;
	gap: 6px;
}
.hcl-side-marker-bar {
	width: 22px;
	height: 3px;
	background: var(--hcl-yellow);
}
.hcl-side-marker-icon {
	width: 20px;
	height: 20px;
	border: 1px solid currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	opacity: .8;
}

/* ==========================================================================
   HCL HEADER
   ========================================================================== */
.hcl-header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 18px;
}
.hcl-header-mark {
	width: 42px;
	height: 42px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hcl-header-mark .hcl-mark {
	width: 20px;
	fill: var(--hcl-dark);
}
.hcl-header-menu,
.hcl-header-share {
	width: 26px;
	height: 22px;
	background: var(--hcl-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ==========================================================================
   HCL HERO
   ========================================================================== */
.hcl-hero {
	background-color: var(--hcl-dark);
	color: var(--hcl-light);
	overflow: hidden;
}

/* Contenedor de la imagen — el JS/GSAP anima ESTE elemento, nunca el <img>
   ni su src, así la imagen sigue siendo 100% editable desde Elementor. */
.hcl-hero-media {
	overflow: hidden;
	will-change: transform;
	position: relative;
}
.hcl-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	transform: scale(1.08); /* margen para el parallax sin dejar bordes vacíos */
	filter: grayscale(1) contrast(1.05);
}

.hcl-hero-lockup {
	position: absolute;
	right: 28px;
	bottom: 24px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--hcl-light);
	font-size: 13px;
	letter-spacing: .04em;
}
.hcl-hero-lockup-rule {
	width: 1px;
	height: 34px;
	background: var(--hcl-line);
}

.hcl-mark--watermark.hcl-mark--hero {
	left: 2%;
	bottom: 6%;
	width: 22%;
}

.hcl-hero-title,
.hcl-hero-subtitle,
.hcl-hero-cta {
	/* Reveal simple de entrada — ver bloque HCL ANIMATIONS */
}

/* Líneas decorativas del hero (si se insertan como SVG inline vía widget HTML) */
.hcl-hero-lines path,
.hcl-hero-lines line {
	stroke-dasharray: 300;
	stroke-dashoffset: 300;
	transition: stroke-dashoffset 1.1s var(--hcl-reveal-ease);
}
.hcl-hero-lines.is-visible path,
.hcl-hero-lines.is-visible line {
	stroke-dashoffset: 0;
}

/* ==========================================================================
   HCL CLIENTES
   ========================================================================== */
.hcl-clientes {
	background-color: #fff;
	color: var(--hcl-dark);
	overflow: hidden;
}
.hcl-mark--watermark.hcl-mark--clientes {
	fill: rgba(20, 21, 31, .08);
	left: 2%;
	top: -6%;
	width: 30%;
}

/* Línea vertical existente en el diseño — crece progresivamente al entrar
   la sección (ver también hcl-animations.js → initClientes). */
.hcl-linea-vertical {
	position: relative;
	width: 1px;
	background: rgba(20, 21, 31, .15);
	overflow: hidden;
}
.hcl-linea-vertical::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 0%;
	background: var(--hcl-yellow);
	transition: height 1.2s var(--hcl-reveal-ease);
}
.hcl-linea-vertical.is-visible::after {
	height: 100%;
}

.hcl-clientes-numero {
	font-weight: 800;
	line-height: .95;
}
.hcl-clientes-porcentaje {
	background: var(--hcl-yellow);
	color: var(--hcl-dark);
	padding: 0 .15em;
	font-weight: 800;
}

/* ==========================================================================
   HCL SERVICIOS
   ========================================================================== */
.hcl-servicios {
	background-color: var(--hcl-dark);
	color: var(--hcl-light);
	counter-reset: hcl-servicio;
}

.hcl-servicio {
	position: relative;
	counter-increment: hcl-servicio;
	border-top: 1px solid var(--hcl-line);
	transition: background-color .35s ease;
}
.hcl-servicio:hover {
	background-color: rgba(255, 255, 255, .03);
}

.hcl-servicio-titulo {
	color: var(--hcl-light);
	text-transform: none;
}

/* Bloque número + línea diagonal: el número sale del CSS counter (nunca
   se escribe a mano, así que sigue siendo correcto si se agregan, quitan
   o reordenan servicios desde Elementor) y la línea diagonal lo atraviesa
   dibujándose al entrar en el viewport. */
.hcl-servicio-numero-wrap {
	position: relative;
	display: inline-block;
}
.hcl-servicio-numero::before {
	content: counter(hcl-servicio, decimal-leading-zero);
	display: block;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: .9;
	color: var(--hcl-light);
}

.hcl-servicio-linea {
	position: absolute;
	left: -8%;
	top: 50%;
	width: 116%;
	height: 2px;
	background: var(--hcl-yellow);
	transform: translateY(-50%) rotate(-18deg) scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--hcl-reveal-ease);
}
.hcl-servicio.is-visible .hcl-servicio-linea {
	transform: translateY(-50%) rotate(-18deg) scaleX(1);
}

/* Si la línea se implementa como SVG en vez de <span>, mismo criterio
   con stroke-dashoffset: */
.hcl-servicio-linea.hcl-svg-line {
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	transition: stroke-dashoffset .6s var(--hcl-reveal-ease);
}
.hcl-servicio.is-visible .hcl-servicio-linea.hcl-svg-line {
	stroke-dashoffset: 0;
}

/* ==========================================================================
   HCL PARTNERS
   ========================================================================== */
.hcl-partners {
	background-color: var(--hcl-light);
	color: var(--hcl-dark);
}

.hcl-partner {
	background: transparent;
}

.hcl-partner-nombre {
	color: var(--hcl-dark);
	font-weight: 800;
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Las dos primeras tarjetas ("destacadas") llevan el nombre resaltado
   con una franja amarilla detrás del texto, tal como en el diseño
   aprobado. El resto de tarjetas usa el nombre en texto plano. */
.hcl-partner--destacado .hcl-partner-nombre {
	background: var(--hcl-yellow);
	padding: .05em .25em;
}

.hcl-partner-cargo {
	display: block;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .72em;
	color: rgba(20, 21, 31, .55);
	margin-bottom: .4em;
}
.hcl-partner-descripcion {
	color: rgba(20, 21, 31, .68);
}
.hcl-partner-practica {
	font-weight: 700;
	margin-top: .6em;
}

/* ==========================================================================
   HCL CONTACTO
   ========================================================================== */
.hcl-contacto {
	background-color: var(--hcl-dark);
	color: var(--hcl-light);
}

.hcl-contacto-direccion {
	color: var(--hcl-light);
	font-weight: 700;
}
.hcl-contacto-telefono {
	color: var(--hcl-yellow);
	font-weight: 700;
}

/* Usa la utilidad genérica .hcl-reveal (opacity + translateY) — ver
   HCL ANIMATIONS. Nota técnica importante: NO se usa clip-path como
   estado inicial aquí a propósito. Un clip-path que deja el elemento
   con 0% de área visible hace que el propio IntersectionObserver
   nunca lo detecte como "intersectando" (queda en punto muerto: el
   elemento nunca se revela porque su versión oculta ya cuenta como
   invisible para el observer). Por eso el reveal de esta sección usa
   el mismo mecanismo de opacity/transform que el resto del sitio. */
.hcl-contacto-media {
	overflow: hidden;
	position: relative;
}
.hcl-contacto-media img {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(1) contrast(1.05);
}
.hcl-contacto-email {
	display: block;
	text-align: right;
	color: var(--hcl-muted);
	font-size: .85em;
	margin-top: .6em;
}

/* El formulario de Elementor Forms hereda tipografía/colores del sitio;
   solo ajustamos detalles menores para que combine con la paleta. */
.hcl-contacto .elementor-field-group input,
.hcl-contacto .elementor-field-group textarea {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--hcl-line);
	border-radius: 0;
	color: var(--hcl-light);
	padding-left: 0;
}
.hcl-contacto .elementor-button {
	background: var(--hcl-light);
	color: var(--hcl-dark);
	border-radius: 0;
}

/* ==========================================================================
   HCL FOOTER
   ========================================================================== */
.hcl-footer {
	background-color: var(--hcl-dark);
	color: var(--hcl-light);
	text-align: center;
}
.hcl-footer-mark {
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.05;
}
.hcl-footer-copy {
	color: var(--hcl-muted);
	font-size: .78em;
}

/* ==========================================================================
   HCL ANIMATIONS — utilidades reutilizables (Intersection Observer + CSS)
   ========================================================================== */
.hcl-reveal {
	opacity: 0;
	transform: translateY(var(--hcl-reveal-distance));
	transition:
		opacity var(--hcl-reveal-duration) var(--hcl-reveal-ease),
		transform var(--hcl-reveal-duration) var(--hcl-reveal-ease);
	transition-delay: calc(var(--i, 0) * var(--hcl-stagger-step));
}
.hcl-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Variante para elementos que deben aparecer sin desplazamiento (solo fade) */
.hcl-reveal--fade {
	transform: none;
}

/* Variante con leve escala, útil para tarjetas */
.hcl-reveal--scale {
	transform: translateY(var(--hcl-reveal-distance)) scale(.96);
}
.hcl-reveal--scale.is-visible {
	transform: translateY(0) scale(1);
}

/* ==========================================================================
   HCL RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	:root {
		--hcl-reveal-distance: 20px;
	}
	.hcl-mark--watermark {
		width: 220px;
	}
}

@media (max-width: 767px) {
	:root {
		--hcl-reveal-distance: 12px;
		--hcl-reveal-duration: .45s;
		--hcl-stagger-step: 60ms;
	}

	/* En mobile mantenemos las líneas decorativas (no se eliminan, como
	   pide el brief) pero más cortas para no competir con el contenido. */
	.hcl-servicio-linea {
		left: 0;
		width: 60%;
	}
	.hcl-mark--watermark {
		width: 140px;
		opacity: .6;
	}
}

/* ==========================================================================
   HCL REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hcl-reveal,
	.hcl-reveal--fade,
	.hcl-reveal--scale {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.hcl-servicio-linea,
	.hcl-linea-vertical::after,
	.hcl-hero-lines path,
	.hcl-hero-lines line {
		transition: none !important;
	}
	.hcl-servicio.is-visible .hcl-servicio-linea,
	.hcl-servicio-linea {
		transform: translateY(-50%) rotate(-18deg) scaleX(1) !important;
	}
	.hcl-linea-vertical::after {
		height: 100% !important;
	}
	.hcl-hero-lines path,
	.hcl-hero-lines line {
		stroke-dashoffset: 0 !important;
	}

	.hcl-hero-media {
		transform: none !important;
	}
}