/*
 * Conqr · páginas interiores (About, Expertise, Work, Careers, Blog, Contact…).
 * Port exacto de site.css «interior building blocks»: .phero (+ «hero titles never collide»), .meta, .lead,
 * .body, .sec, .sec>h2, .split2, .lit .w, .rv, .hvid, .floaty, .mani, .btnx, cta() y sus @media.
 *
 * Widget Conqr Page Hero → .cq-phero. El resto son elementos nativos con clases (behavior cq-sec):
 *   contenedor .cq-sec (.sec) · .cq-split2 · .cq-ctasec (sección centrada de cta())
 *   Heading .cq-h2 (.sec>h2) · .cq-meta · Text Editor .cq-lead · .cq-body · .cq-lit (palabras que se
 *   encienden) · .cq-mani (lista del manifiesto) · Button .cq-btnx · cualquier widget .cq-rv (aparece).
 */

/* ---------- .phero ---------- */
.cq-phero {
	position: relative;
	isolation: isolate;
	/* body{overflow-x:hidden} del original no frena el paneo lateral en iOS: la caja .hvid (120vw a la
	   derecha en móvil) se recorta aquí */
	overflow: hidden;
	overflow: clip;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: clamp(22px, 4vh, 40px);
	padding: calc(env(safe-area-inset-top, 0px) + 140px) var(--cq-m) clamp(64px, 12vh, 120px);
	line-height: normal;
}
.cq-phero > * {
	flex-shrink: 0;
}
.cq-phero__h1 {
	margin: 0 0 -.06em;
	padding: 0 0 .2em;
	font-family: inherit;
	font-size: min(clamp(59px, 12.6vw, 224px), 26vh);
	font-weight: 700;
	letter-spacing: -.07em;
	line-height: .84;
	text-transform: lowercase;
	color: inherit;
}
.cq-phero__h1.is-long {
	font-size: min(clamp(45px, 8.05vw, 147px), 17vh);
	line-height: .88;
	max-width: 11ch;
}
/* WP (2026-10-29): un título con salto forzado (<br>) conserva sus líneas: «&» nunca baja solo */
.cq-phero__h1 .elementor-heading-title:has(br) {
	white-space: nowrap;
}
/* .phero h1.fill: site.css apaga la imagen (background-image:none !important) y cada línea lleva el
   degradado .tgl (span.cq-tgl__l, estilos en conqr.css) */
.cq-phero__h1.is-fill {
	color: transparent;
	background-image: none;
	-webkit-text-stroke: 0;
}
.cq-phero > .cq-meta {
	position: absolute;
	top: calc(env(safe-area-inset-top, 0px) + 110px);
	left: var(--cq-m);
	right: var(--cq-m);
	justify-content: space-between;
}
.cq-phero .cq-meta a.cq-hback {
	position: relative;
	z-index: 5;
}

/* .meta */
.cq-meta,
.cq-meta .elementor-heading-title {
	font-size: 12px;
	color: var(--cq-dim);
	display: flex;
	gap: 14px;
	align-items: center;
}
.cq-meta .elementor-heading-title {
	margin: 0;
	font-family: inherit;
	font-weight: inherit;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
}
.cq-meta i {
	display: inline-block;
	width: 28px;
	height: 1px;
	background: currentColor;
}

/* .lead / .body */
.cq-phero__lead,
.cq-lead p,
.cq-lead {
	margin: 0;
	max-width: 34ch;
	font-size: clamp(20px, 2.1vw, 32px);
	line-height: 1.32;
	letter-spacing: -.015em;
}
.cq-lead p + p {
	margin-top: 1em;
}
.cq-body p,
.cq-body {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}
.elementor-widget.cq-lead,
.elementor-widget.cq-body {
	max-width: none;
}

/* .hvid: la figura del motor (chrome-loop jugable) en lugar del vídeo, con la misma máscara */
.cq-hvid {
	position: absolute;
	right: -6vw;
	top: 50%;
	width: min(70vw, 980px);
	aspect-ratio: 16 / 9;
	transform: translateY(-55%);
	pointer-events: none;
	z-index: -1;
}
.cq-hvid > .cq-chrome__view {
	-webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 82%);
	mask-image: radial-gradient(closest-side, #000 60%, transparent 82%);
}
/* WP (mejora aprobada): halo azul que sigue al cursor ±30 px y se intensifica al tocar la figura */
.cq-phero__halo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 62%;
	aspect-ratio: 1;
	margin: 0;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(47, 91, 255, .5) 0%, rgba(30, 80, 255, .22) 45%, rgba(10, 18, 64, 0) 100%);
	filter: blur(18px);
	opacity: .55;
	transform: translate(-50%, -50%);
	pointer-events: none;
	will-change: transform, opacity;
}
.cq-floaty {
	position: absolute;
	pointer-events: none;
	z-index: -1;
	width: clamp(160px, 22vw, 360px);
	aspect-ratio: 1;
	animation: cq-bob 7s ease-in-out infinite;
}
/* WP (2026-10-29, pedido): figura flotante más chica (clase is-sm en el widget; Careers), lejos del selector EN/ES */
.cq-hfig.is-sm .cq-floaty {
	width: clamp(140px, 17vw, 280px);
}
/* WP (2026-10-27): figura flotante jugable; el título y los textos del hero dejan pasar el puntero */
.cq-floaty.is-play {
	pointer-events: auto;
}
.cq-phero.has-play .cq-phero__h1,
.cq-phero.has-play .cq-phero__lead,
.cq-phero.has-play .cq-htags {
	pointer-events: none;
}
@keyframes cq-bob {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-18px) rotate(7deg); }
}
.cq-htags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	max-width: 60ch;
}
.cq-htags i {
	font-style: normal;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cq-dim);
}
/* WP (2026-10-29, pedido): en escritorio las etiquetas del hero no pasan del 60 % del ancho (como en el carrusel de la Home) */
@media (min-width: 821px) {
	.elementor.elementor .e-con.cq-phero > .elementor-widget.cq-htags {
		max-width: min(60ch, calc(60vw - var(--cq-m)));
	}
}
/* WP (2026-10-29): el bloque «Capabilities / Capacidades» de abajo usa las mismas etiquetas (.cq-htags) */
.cq-capsec .cq-htags {
	max-width: none;
}

/* ---------- .sec ---------- */
.e-con.cq-sec {
	display: block;
	position: relative;
	width: auto;
	min-height: 0;
	padding: clamp(96px, 17vh, 190px) var(--cq-m);
	line-height: normal;
}
/* contenedor .sec con padding-top 0 (style="padding-top:0" del original) */
.e-con.cq-sec.cq-pt0 {
	padding-top: 0;
}
.e-con.cq-sec.cq-flush {
	padding-left: 0;
	padding-right: 0;
}
.cq-sec .elementor-element.elementor-widget {
	margin: 0;
}
.cq-h2 .elementor-heading-title {
	margin: 0 0 clamp(36px, 7vh, 72px);
	padding: 0;
	font-family: inherit;
	font-size: clamp(42px, 6.2vw, 108px);
	font-weight: 700;
	letter-spacing: -.055em;
	line-height: .95;
	max-width: 15ch;
	text-transform: lowercase;
	color: inherit;
}
.cq-flush > .cq-h2 {
	padding: 0 var(--cq-m);
}

/* .split2 */
.e-con.cq-split2 {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 5vw, 96px);
	align-items: start;
}
.cq-split2 .cq-h2 .elementor-heading-title {
	margin: 0;
}
.cq-split2 .cq-lead p,
.cq-split2 .cq-lead {
	max-width: 40ch;
}

/* .lit .w y .rv */
.cq-lit .cq-w {
	display: inline-block;
	opacity: .14;
}
.cq-rv {
	opacity: 0;
	transform: translateY(28px);
}

/* .mani */
.cq-mani ul,
ul.cq-mani {
	display: flex;
	flex-direction: column;
	gap: .18em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(30px, 4.4vw, 76px);
	font-weight: 700;
	letter-spacing: -.045em;
	line-height: 1.04;
}
.cq-mani li {
	opacity: .14;
	transition: opacity .6s;
}
.cq-mani li.on {
	opacity: 1;
}
.cq-sec > .cq-meta .elementor-heading-title {
	margin-bottom: 34px;
}

/* cta(): sección centrada con titular y botón */
.e-con.cq-ctasec {
	text-align: center;
}
.cq-ctasec .cq-h2 .elementor-heading-title {
	margin-left: auto;
	margin-right: auto;
}
.cq-ctasec .cq-body p,
.cq-ctasec .cq-body {
	margin: 0 auto 34px;
}

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

/* encabezado que se encima con el logo del header: se desvanece el header (interior.js) */
.e-con.cq-top {
	transition: filter .35s ease, opacity .3s ease;
}
.cq-top-dim .e-con.cq-top {
	opacity: 0;
	pointer-events: none;
}
.menu-open.cq-top-dim .e-con.cq-top {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 820px) {
	.e-con.cq-split2 {
		grid-template-columns: minmax(0, 1fr);
	}
	.cq-hvid {
		width: 120vw;
		right: -40vw;
		opacity: .6;
	}
	/* WP (2026-10-27): en móvil la figura de todos los heroes va centrada, completa y al 100 %, entre el kicker
	   y el título (404, About, Contact, Expertise; y la flotante de servicios, Work, Careers y Blog). */
	.cq-hvid {
		right: -10vw;
		top: 24%;
		transform: none;
		opacity: 1;
	}
	.cq-floaty {
		right: calc(50% - 80px) !important;
		top: 132px !important;
		width: 160px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cq-rv {
		opacity: 1 !important;
		transform: none !important;
	}
	.cq-lit .cq-w,
	.cq-mani li {
		opacity: 1 !important;
	}
	.cq-floaty {
		animation: none;
	}
}

/* Editor de Elementor: todo visible y quieto. */
.elementor-editor-active .cq-rv {
	opacity: 1;
	transform: none;
}
.elementor-editor-active .cq-mani li {
	opacity: 1;
}

/* .hback (enlace de regreso de los interiores de expertise y casos) */
.cq-hback {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
	transition: gap .35s var(--cq-ease), color .3s;
}
.cq-hback svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cq-hback:hover {
	gap: 14px;
	color: var(--cq-paper);
}

/* Contenedor sin layout flex (bloques de widgets propios). Chrome calcula mal la altura de un hijo con
   rejilla de tarjetas aspect-ratio dentro de un e-con flex en columna y el footer se le encima. */
.e-con.cq-block {
	display: block;
}

/* ---------- Páginas únicas (2026-10-27): las piezas de los heroes, casos, entradas y vacantes son widgets
   nativos (Heading, Text Editor, Image) con las clases del original en su contenedor. ---------- */
/* .cq-x: el Heading toma la tipografía de su clase (la etiqueta h1/p/span es solo semántica) */
.elementor-widget.cq-x > .elementor-heading-title,
.elementor-widget.cq-x > .elementor-widget-container > .elementor-heading-title {
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: inherit;
	color: inherit;
}
.elementor-widget.cq-x .elementor-heading-title a {
	color: inherit;
}
/* hero interior: el contenedor es la .phero */
.elementor .e-con.cq-phero {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: stretch;
	gap: clamp(22px, 4vh, 40px);
	padding: calc(env(safe-area-inset-top, 0px) + 140px) var(--cq-m) clamp(64px, 12vh, 120px);
	min-height: 100vh;
	min-height: 100svh;
	width: 100%;
}
.elementor .e-con.cq-meta {
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 14px;
	padding: 0;
	width: auto;
	min-height: 0;
}
.elementor .cq-phero > .e-con.cq-meta {
	position: absolute;
}
.cq-meta > .elementor-widget {
	width: auto;
	margin: 0;
}
/* la figura (Conqr Chrome · figura de hero): su caja es la del hero, como antes */
.elementor .e-con > .elementor-widget.cq-hfig {
	position: absolute;
	inset: 0;
	margin: 0;
	max-width: none;
	z-index: -1;
	pointer-events: none;
}
.elementor-widget.cq-htags > p,
.elementor-widget.cq-htags > .elementor-widget-container,
.elementor-widget.cq-htags > .elementor-widget-container > p {
	display: contents;
}
/* enlace de regreso con flecha (Heading con enlace) */
.elementor-widget.cq-hback a {
	position: relative;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
	transition: gap .35s var(--cq-ease), color .3s;
}
.elementor-widget.cq-hback a::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M11 6l-6 6 6 6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M11 6l-6 6 6 6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor-widget.cq-hback:hover a {
	gap: 14px;
	color: var(--cq-paper);
}
.elementor-widget.cq-hback > .elementor-heading-title {
	font: inherit;
	color: inherit;
	line-height: inherit;
}
/* .cq-next como contenedor-enlace */
.elementor .e-con.cq-next {
	display: block;
	padding: clamp(80px, 14vh, 150px) var(--cq-m);
}
.elementor .e-con.cq-block,
.elementor .e-con.cq-jdetail,
.elementor .e-con.cq-jcta,
.elementor .e-con.cq-jsec,
.elementor .e-con.cq-projs,
.elementor .e-con.cq-pback,
.elementor .e-con.cq-csec:not(.cq-csplit),
.elementor .e-con.cq-postbody {
	display: block;
}
/* Elementor fija max-width:100% a todo widget de un contenedor (.elementor.elementor .e-con>.elementor-widget):
   los anchos de lectura del original (ch) se devuelven aquí */
.elementor.elementor .e-con > .elementor-widget.cq-phero__h1.is-long { max-width: 11ch; }
.elementor.elementor .e-con > .elementor-widget.cq-phero__h1.cq-jhero__h1 { max-width: 16ch; }
.elementor.elementor .e-con > .elementor-widget.cq-phero__lead { max-width: 34ch; }
.elementor.elementor .e-con > .elementor-widget.cq-htags { max-width: 60ch; }
.elementor.elementor .e-con > .elementor-widget.cq-chero__h1 { max-width: 12ch; }
.elementor.elementor .e-con.is-post > .elementor-widget.cq-chero__h1 { max-width: 16ch; }
.elementor.elementor .e-con > .elementor-widget.cq-csec__h2 { max-width: 15ch; }
/* vacante: hero centrado de 86vh */
.elementor .e-con.cq-phero.cq-jhero {
	min-height: 86vh;
	min-height: 86svh;
	align-items: center;
}
/* margen inferior de las clases: el de Elementor (.elementor-widget:not(:last-child), 0 en contenedores) les ganaba */
.e-con > .elementor-widget.cq-phero__h1:not(:last-child) { margin-block-end: -.06em; }
.e-con > .elementor-widget.cq-csec__k:not(:last-child) { margin-block-end: 22px; }
.e-con > .elementor-widget.cq-fact__k:not(:last-child) { margin-block-end: 8px; }
.e-con > .elementor-widget.cq-jsec__h:not(:last-child) { margin-block-end: 26px; }
.e-con.cq-next > .elementor-widget.cq-meta:not(:last-child) { margin-block-end: 18px; }
.e-con > .elementor-widget.cq-art-img:not(:last-child) { margin-block-end: 2.4em; }
.elementor-widget.cq-csec__lead p { max-width: 40ch; }
.e-con > .elementor-widget.cq-phero__h1.cq-jhero__h1:not(:last-child) { margin-block-end: 0; }
/* el kicker / dato derecho del hero: texto en línea (sin el flex de .cq-meta .elementor-heading-title) */
.e-con.cq-meta > .elementor-widget > .elementor-heading-title { display: block; }
/* GSAP mueve estas piezas: sin la transición de transform que Elementor pone a cada elemento */
.elementor-element.cq-phero__h1,
.elementor-element.cq-phero__lead,
.elementor-element.cq-chero__h1,
.elementor-element.cq-x.cq-rv {
	transition: none;
}

/* ---------- WP (2026-10-29, pedido; 3.ª versión) · About: fotos de la oficina ABAJO, grandes y anchas ----------
   con·quer: título y párrafo como siempre (.cq-split2) y debajo .cq-ofila con 2 fotos 50/50; manifiesto: las 8
   frases a todo el ancho y debajo .cq-ofila.is-3 con 3 fotos. Todas 16:10, separación 24 px, esquinas de 5 px,
   a todo el ancho del contenedor (mismos márgenes que el texto). Widgets Image nativos (.cq-ofoto).
   Barrido de abajo hacia arriba al entrar y parallax sutil dentro del marco: interior.js (officePhotos()).
   Móvil (≤820 px): una foto por fila. */
.elementor .e-con.cq-ofila {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: auto;
	min-height: 0;
	padding: 0;
	margin-top: clamp(48px, 7vh, 88px);
}
.elementor .e-con.cq-ofila.is-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.elementor .e-con.cq-split2 > .e-con.cq-ofila {
	grid-column: 1 / -1;
	margin-top: clamp(24px, 4vh, 48px);
}
.elementor .e-con.cq-ofila > .elementor-element.elementor-widget.cq-ofoto {
	position: relative;
	width: auto;
	margin: 0;
	overflow: hidden;
	border-radius: 5px;
	aspect-ratio: 16 / 10;
	background: #050814;
}
.cq-ofila .cq-ofoto .elementor-widget-container {
	height: 100%;
}
.cq-ofila .cq-ofoto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}
@media (max-width: 820px) {
	.elementor .e-con.cq-ofila,
	.elementor .e-con.cq-ofila.is-3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}