/*
 * Behavior cq-hscroll: expertise horizontal de la Home sobre contenedores y widgets nativos.
 * Port exacto de site.css: .ex, .track, .panel, .pin-in, .panel h3, .panel .row, .panel p, .go, .exhead,
 * .meta, .bar, .bar i. Estructura (Elementor): section.cq-hscroll > .cq-exhead (2 Heading span) +
 * .cq-track > article.cq-panel ×N > .cq-pin-in > Heading h3 (.cq-tgl) + .cq-row > Text + Button (.cq-go)
 * + .cq-bar > .cq-barfill. Las reglas anulan los valores por defecto de los contenedores de Elementor.
 */

.e-con.cq-hscroll {
	display: block;
	height: 100vh;
	height: 100svh;
	min-height: 0;
	position: relative;
	overflow: hidden;
	padding: 0;
}
.cq-hscroll .elementor-element.elementor-widget {
	margin: 0;
}

/* .exhead.meta */
.cq-hscroll > .e-con.cq-exhead {
	position: absolute;
	z-index: 2;
	top: calc(env(safe-area-inset-top, 0px) + 108px);
	left: var(--cq-m);
	right: var(--cq-m);
	width: auto;
	min-height: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	pointer-events: none;
	font-size: 12px;
	color: var(--cq-dim);
}
.cq-exhead .elementor-heading-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	line-height: inherit;
	text-transform: none;
	color: inherit;
}

/* .track */
.cq-hscroll > .e-con.cq-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
	height: 100%;
	min-height: 0;
	width: auto;
	padding: 0;
	will-change: transform;
}

/* .panel */
.cq-track > .e-con.cq-panel {
	flex: 0 0 100vw;
	width: 100vw;
	max-width: none;
	height: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	padding: 0 var(--cq-m);
}

/* .pin-in */
.cq-panel > .e-con.cq-pin-in {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: clamp(22px, 4vh, 40px);
	width: auto;
	min-height: 0;
	padding: 0;
	will-change: transform;
}

/* .panel h3 */
.cq-panel .cq-tgl .elementor-heading-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: clamp(45px, 9.1vw, 165px);
	font-weight: 700;
	letter-spacing: -.065em;
	line-height: .86;
	max-width: 9ch;
	text-transform: lowercase;
	background-size: 180% 180%;
	background-position: 50% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* los títulos con salto forzado lo conservan */
.cq-panel .cq-tgl .elementor-heading-title:has(br) {
	max-width: none;
	white-space: nowrap;
}

/* .panel .row */
.cq-pin-in > .e-con.cq-row {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 22px;
	width: auto;
	min-height: 0;
	padding: 0 0 0 .06em;
}

/* .panel p */
.cq-row .elementor-widget-text-editor {
	font-family: inherit;
	color: inherit;
}
.cq-row .elementor-widget-text-editor p {
	margin: 0;
	max-width: 38ch;
	font-size: clamp(17px, 1.4vw, 21px);
	font-weight: 400;
	line-height: 1.5;
}

/* WP (2026-10-29): capacidades del servicio como etiquetas del original (.htags), entre el texto y el botón */
.cq-row .cq-pcaps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	max-width: 60ch;
}
.cq-row .cq-pcaps > p,
.cq-row .cq-pcaps > .elementor-widget-container,
.cq-row .cq-pcaps > .elementor-widget-container > p {
	display: contents;
}
.cq-row .cq-pcaps i {
	font-style: normal;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cq-dim);
}

/* .go */
.cq-hscroll .cq-go .elementor-button {
	display: inline-flex;
	align-items: center;
	height: 56px;
	padding: 0 34px;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: normal;
	text-transform: none;
	background: var(--cq-paper);
	color: var(--cq-ink);
	transition: background .35s, color .35s;
}
.cq-hscroll .cq-go .elementor-button:hover,
.cq-hscroll .cq-go .elementor-button:focus-visible {
	background: var(--cq-blue);
	color: var(--cq-paper);
}
.cq-hscroll .cq-go .elementor-button-content-wrapper {
	display: inline;
}

/* .bar y .bar i */
.cq-hscroll > .e-con.cq-bar {
	position: absolute;
	left: var(--cq-m);
	right: var(--cq-m);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
	width: auto;
	height: 1px;
	min-height: 0;
	padding: 0;
	display: block;
	background: var(--cq-faint);
}
.cq-bar > .e-con.cq-barfill {
	display: block;
	width: auto;
	height: 100%;
	min-height: 0;
	padding: 0;
	background: var(--cq-paper);
	transform-origin: left;
	transform: scaleX(0);
}

/* ---------- revisión móvil (2026-10-29) ---------- */
/* Botón del panel: menos relleno lateral para que «Explore Multimedia & Production» no llegue a los botones
   flotantes de la derecha (accesibilidad / cookies), que se quedan encima mientras el panel está fijo. */
@media (max-width: 420px) {
	.cq-hscroll .cq-go .elementor-button {
		padding: 0 22px;
	}
}
/* Pantallas bajas (iPhone SE, 667 px): el contenido empieza bajo «Expertise · 6/8» en lugar de centrarse
   (con título de 2 líneas y 8 etiquetas subía hasta encimarse) y los espacios se compactan. */
@media (max-width: 820px) and (max-height: 760px) {
	.cq-track > .e-con.cq-panel {
		justify-content: flex-start;
		padding-top: calc(env(safe-area-inset-top, 0px) + 146px);
	}
	.cq-panel > .e-con.cq-pin-in {
		gap: 16px;
	}
	.cq-pin-in > .e-con.cq-row {
		gap: 14px;
	}
	.cq-row .elementor-widget-text-editor p {
		font-size: 16px; /* 2026-10-30: mínimo 16 px de cuerpo en móvil (antes 15) */
		line-height: 1.42;
	}
	.cq-row .cq-pcaps {
		gap: 6px 16px;
	}
	.cq-hscroll .cq-go .elementor-button {
		height: 48px;
	}
}

/* ---------- WP (2026-10-29, pedido) · contenido del panel en el 60 % izquierdo (escritorio) ---------- */
/* Título, descripción, etiquetas y botón no pasan del 60 % del panel (la zona oscura), lejos del azul de la
   derecha; las etiquetas saltan de línea dentro de ese ancho. El título baja de 9.1vw a 8vw para que la línea
   más larga («multimedia &», 6.8 em) quepa en ese 60 %. Móvil (≤820 px): como antes, a todo el ancho. */
@media (min-width: 821px) {
	.cq-panel > .e-con.cq-pin-in {
		max-width: calc(60vw - var(--cq-m));
	}
	.cq-panel .cq-tgl .elementor-heading-title {
		font-size: clamp(45px, 8vw, 165px);
	}
	.cq-row .cq-pcaps {
		max-width: 100%;
	}
}