/* ==========================================================================
   LeQuiz 2026 – main stylesheet

   PROPORTION: every desktop measurement is written in XD pixels from the
   1920px artboard ("LeQuiz 2026.xd") multiplied by --u, so the page keeps the
   artboard's proportions at any width. Below 1024px the layout stacks and
   type switches to fixed mobile sizes.

   TYPE + COLOR: all values come from the tokens below. Change a token, not a rule.
   ========================================================================== */

:root {
	/* 1 XD pixel. Grows with the viewport, stops growing at 2400px. */
	--u: calc(min(100vw, 2400px) / 1920);

	/* Color — LeQuiz Design System */
	/* Core swatches */
	--c-teal: #00beaa;          /* logo, focus */
	--c-deep: #003033;
	--c-sky: #3cbcff;
	--c-ultramarine: #0103c9;
	--c-cream: #ebe6df;         /* (reserved; surfaces use paper) */
	--c-ink: #191516;           /* text, dark sections, footer, button */
	/* Neutrals & surfaces */
	--c-white: #ffffff;
	--c-off-white: #f6f6f6;     /* page background */
	--c-paper: #f3f0ed;         /* stage panel, button hover, hairlines on light */
	/* Extended: Pink leads whenever we talk about AI */
	--c-pink-dark: #560028;     /* IA card */
	--c-pink-mid: #a4004a;
	--c-pink: #ff3aa0;          /* IA dots, IA card hover */
	--c-pink-tint: #fbe9fd;
	/* Extended, for messages */
	--c-teal-dark: #012d30;
	--c-teal-tint: #ddf8f4;
	--c-red-mid: #a10225;
	--c-red-tint: #fdeaeb;
	/* Derived */
	--c-muted: rgb(25 21 22 / .62);          /* secondary text on light (ink, 4.5:1 on off-white) */
	--c-on-dark: var(--c-off-white);         /* ALL text on dark backgrounds */

	/* Rules: strictly square, hairlines do the structuring */
	--hairline-light: 1px solid var(--c-paper);
	--hairline-ink: 1px solid var(--c-ink);
	--hairline-dark: 1px solid rgb(243 240 237 / .25);   /* on ink sections */

	/* Type families */
	--f-display: 'LQ Display', 'Playfair Display', Georgia, serif;   /* ABC Arizona Flare Condensed · Light 300 */
	--f-text: 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* body, UI, labels */

	/* Web scale (design system, at 1440px) × 4/3 = XD px at 1920 */
	--t-hero: calc(80 * var(--u));        /* 60 · web-hero */
	--t-h2: calc(60 * var(--u));          /* 45 · web-h2 */
	--t-h3: calc(44 * var(--u));          /* 33 · web-h3 */
	--t-body: calc(22.667 * var(--u));    /* 17 · web-body */
	--t-caption: calc(17.333 * var(--u)); /* 13 · caption */

	/* Spacing scale (design system): 4px base, at 1440px */
	--sp: calc(var(--u) * 4 / 3);   /* 1 design-system px */
	--s-1: calc(4 * var(--sp));
	--s-2: calc(8 * var(--sp));
	--s-3: calc(12 * var(--sp));
	--s-4: calc(16 * var(--sp));
	--s-5: calc(24 * var(--sp));
	--s-6: calc(32 * var(--sp));
	--s-7: calc(48 * var(--sp));
	--s-8: calc(64 * var(--sp));
	--s-9: calc(96 * var(--sp));
	--s-10: calc(128 * var(--sp));
	/* Section rhythm = multiples of the scale */
	--s-section-s: calc(192 * var(--sp));   /* 2 × 96 */
	--s-section-m: calc(256 * var(--sp));   /* 2 × 128 */
	--s-section-l: calc(384 * var(--sp));   /* 3 × 128 */

	/* Vertical rhythm: the same air everywhere */
	--space-section: var(--s-10);   /* 128 · top and bottom of every section */
	--space-block: var(--s-9);      /* 96 · headline (or divider) → its content */
	--space-heading: var(--s-5);    /* 24 · eyebrow → headline */

	/* Layout */
	--gutter: calc(40 * var(--sp));  /* screen edge → content: 40 at 1440 (was 60) */
	--inset: var(--s-3);            /* content → text column: 12 at 1440 (was 15) */

	/* Page tone around the stages section: 0 = off-white, 1 = ink (set by JS while scrolling) */
	--lq-dark: 0;
	--lq-bg: color-mix(in srgb, var(--c-ink) calc(var(--lq-dark) * 100%), var(--c-off-white));
	--lq-fg: color-mix(in srgb, var(--c-off-white) calc(var(--lq-dark) * 100%), var(--c-ink));

	/* Motion */
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--ease-out: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1023px) {
	:root {
		--t-hero: 40px;
		--t-h2: 30px;
		--t-h3: 24px;
		--t-body: 16px;
		--t-caption: 13px;
		--gutter: 12px;
		--space-section: 64px;
		--space-block: 48px;
		--space-heading: 12px;
		--inset: 0px;
	}
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lq-smooth { scroll-behavior: auto; } /* JS takes over wheel scrolling */
body {
	margin: 0;
	background: var(--lq-bg);
	color: var(--c-ink);
	font-family: var(--f-text);
	font-size: var(--t-body);
	line-height: 1.33;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
.lq-display, h1.lq-display, h2.lq-display, h3.lq-display { font-weight: 300; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
figure, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

.screen-reader-text, .lq-hp {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lq-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--c-teal); color: var(--c-ink); padding: 10px 16px; border-radius: 0; }
.lq-skip:focus { top: 16px; }

/* Shared ------------------------------------------------------------------ */
.lq-container { width: 100%; padding-inline: var(--gutter); max-width: calc(1920 * var(--u)); margin: 0 auto; }
.lq-dark { background: var(--c-ink); color: var(--c-on-dark); }
.lq-dark + .lq-dark { box-shadow: 0 -1px 0 var(--c-ink); } /* no light seam between dark sections */
.lq-center { text-align: center; }
/* Compact text: titles and short phrases break into lines of similar width;
   paragraphs avoid a lonely word on the last line. (:where keeps these overridable.) */
:where(h1, h2, h3, h4, .lq-display, .lq-acc__question, .lq-acc__label, .lq-service-card > .lq-display, .lq-card h3, .lq-pillar__title, .lq-quote p, .lq-eyebrow, .lq-label) { text-wrap: balance; }
:where(p, li, blockquote) { text-wrap: pretty; }

/* Display headings: Arizona Flare, uppercase as in the XD */
.lq-display {
	font-family: var(--f-display);
	font-weight: 300;
	text-transform: uppercase;
	color: inherit;
	line-height: 1.25;
}
.lq-display em { font-style: italic; }
.lq-rule { border: 0; border-top: var(--hairline-light); margin: 0 var(--inset); }

/* Reveal on scroll (enabled by JS) */
.js .lq-reveal { opacity: 0; transform: translateY(max(16px, calc(30 * var(--u)))); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.js .lq-reveal.is-in { opacity: 1; transform: none; }

/* Header ------------------------------------------------------------------ */
/* Always visible. Nav left · logo centred · button + country right.
   Takes the color of the section under it (JS sets data-tone). */
:root { --hdr-h: 0px; --top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hdr-h)); } /* --hdr-h measured by JS */
.lq-header {
	--hdr-bg: var(--lq-bg); --hdr-fg: var(--lq-fg);
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50;
	background: var(--hdr-bg); color: var(--hdr-fg);
	transition: background-color .4s var(--ease-in-out), color .4s var(--ease-in-out), transform .5s var(--ease-in-out);
}
.lq-header.is-gone { transform: translateY(-100%); } /* not shown over the footer */
.lq-header[data-tone="dark"], body.lq-menu-open .lq-header { --hdr-bg: var(--c-ink); --hdr-fg: var(--c-on-dark); }
.lq-header[data-tone="paper"] { --hdr-bg: var(--c-paper); --hdr-fg: var(--c-ink); }
.lq-header__inner {
	position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	padding-block: var(--s-4); /* same space above and below the logo (16 at 1440) */
}
.lq-header__inner::after { /* hairline, only while over the hero */
	content: ""; position: absolute; bottom: 0; left: calc(var(--gutter) + var(--inset)); right: calc(var(--gutter) + var(--inset));
	border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	opacity: 0; transition: opacity .4s var(--ease-in-out);
}
.lq-header.is-over-hero .lq-header__inner::after { opacity: 1; }
.lq-brand { grid-column: 2; color: var(--c-teal); }
.lq-brand__svg, .lq-brand img { width: calc(173 * var(--u)); min-width: 96px; height: auto; }

.lq-header__left { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: var(--s-6); margin-left: var(--inset); }
.lq-nav__list { display: flex; gap: var(--s-6); }
.lq-nav a { font-family: var(--f-text); font-size: var(--t-body); font-weight: 500; line-height: 1; position: relative; display: block; padding-block: var(--s-2); }
.lq-nav a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-in-out);
}
.lq-nav a:hover::after, .lq-nav .current-menu-item a::after { transform: scaleX(1); transform-origin: left; }
.lq-nav .lq-nav__cta { display: none; } /* phones only (inside the menu) */

.lq-header__actions { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: var(--s-3); margin-right: var(--inset); }
.lq-header__btn { /* square outlined boxes */
	display: inline-flex; align-items: center; gap: var(--s-3);
	height: 36px; padding: 0 12px; gap: 8px; /* compact: same size as on phones */
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 0; background: transparent; color: inherit;
	font-family: var(--f-text); font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer;
	transition: background-color .35s var(--ease-in-out), color .35s var(--ease-in-out), border-color .35s var(--ease-in-out);
}
.lq-header__btn:hover, .lq-header__btn[aria-expanded="true"] { background: var(--hdr-fg); color: var(--hdr-bg); border-color: var(--hdr-fg); }

.lq-country { position: relative; }
.lq-country__btn {
	display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; background: none; border: 0; color: inherit; cursor: pointer;
	font-family: var(--f-text); font-size: var(--t-body); font-weight: 500; line-height: 1;
}
.lq-icon { display: inline-flex; }
.lq-icon svg { width: 1em; height: 1em; }
.lq-icon--chevron svg { width: .55em; transition: transform .3s var(--ease-in-out); }
.lq-country__btn[aria-expanded="true"] .lq-icon--chevron svg { transform: rotate(180deg); }
.lq-country__list {
	position: absolute; left: 0; top: calc(100% + 8px); min-width: 180px;
	background: var(--c-white); color: var(--c-ink); border-radius: 0; padding: 8px; border: var(--hairline-ink);
}
.lq-country__list a, .lq-country__list span { display: block; padding: 8px 12px; border-radius: 0; font-size: 15px; }
.lq-country__list a:hover { background: var(--c-paper); }
.lq-burger { display: none; }

/* Hero -------------------------------------------------------------------- */
.lq-hero { padding-top: var(--space-section); }
.lq-hero__title {
	font-size: var(--t-hero); line-height: calc(90 * var(--u));
	width: calc(1280 * var(--u)); margin-left: calc(240 * var(--u)); /* x 320 → 1600 */
}
.lq-hero__line { display: block; opacity: 0; transform: translateY(.35em); animation: lq-rise 1.1s var(--ease-out) forwards; }
.lq-hero__line:last-child { text-align: right; margin-top: var(--s-2); }
.lq-hero__line:nth-child(2) { animation-delay: .12s; }
.lq-hero__line:nth-child(3) { animation-delay: .24s; }
@keyframes lq-rise { to { opacity: 1; transform: none; } }

.lq-hero__media { position: relative; margin-top: var(--space-block); aspect-ratio: 1760 / 805; border-radius: 0; overflow: hidden; background: #2a2620; }
.lq-hero__media img { width: 100%; height: 100%; object-fit: cover; animation: lq-zoom 2.4s var(--ease-out) both; }
@keyframes lq-zoom { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }

.lq-hero__text { /* web-h3, full color */
	width: calc(1280 * var(--u)); margin: var(--space-block) auto 0; text-align: center;
	font-family: var(--f-text); font-size: var(--t-h3); line-height: calc(60 * var(--u)); letter-spacing: -.029em; color: var(--c-on-dark);
}

/* Clients ----------------------------------------------------------------- */
.lq-clients { padding-block: var(--space-section); overflow: hidden; }
.lq-clients__rule { /* XD "Line 101": one line, x 78 → right edge, white 25% */
	height: 1px; background: rgb(243 240 237 / .25);
	margin-left: calc(-2 * var(--u)); margin-right: calc(-1 * var(--gutter));
}
.lq-clients__list {
	display: flex; justify-content: space-between; align-items: center;
	height: calc(62 * var(--u)); margin: var(--space-block) var(--inset) 0;
}
.lq-clients__list img { max-width: calc(155 * var(--u)); max-height: calc(62 * var(--u)); width: auto; height: auto; opacity: .4; transition: opacity .4s; }
.lq-clients__list img:hover { opacity: .8; }

/* Services ---------------------------------------------------------------- */
.lq-services { padding-top: var(--space-section); }
.lq-services__head { display: grid; grid-template-columns: minmax(0, 880fr) minmax(0, 840fr); margin-inline: var(--inset); }
.lq-h-sans { font-family: var(--f-text); text-transform: none; font-size: var(--t-h3); line-height: calc(60 * var(--u)); letter-spacing: -.029em; color: var(--c-ink); }
.lq-services__head p { font-size: var(--t-body); line-height: calc(31 * var(--u)); color: var(--c-muted); }

.lq-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--space-block); }
.lq-card { position: relative; display: block; aspect-ratio: 568 / 637; overflow: hidden; color: var(--c-on-dark); background: var(--c-ink); isolation: isolate; }
.lq-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.4s var(--ease-out); }
.lq-card:hover .lq-card__bg { transform: scale(1.05); }
.lq-card .lq-blur::before { background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgb(10 8 8 / .2) 100%), linear-gradient(to top, rgb(25 21 22 / .62), rgb(25 21 22 / .38) 50%, rgb(25 21 22 / .08) 80%); } /* title + text read on any palette */
.lq-card__body { position: absolute; left: var(--s-4); top: calc(308 * var(--u)); width: calc(420 * var(--u)); }
.lq-card h3 { font-size: var(--t-h2); line-height: calc(75 * var(--u)); margin-bottom: var(--s-5); }
.lq-card p { font-size: var(--t-body); line-height: calc(28.4 * var(--u)); color: var(--c-on-dark); transition: color .6s var(--ease-in-out); }
@media (hover: hover) { /* the description appears on hover; touch screens always show it */
	.lq-card p { opacity: 0; transform: translateY(calc(16 * var(--u))); transition: opacity .5s var(--ease-in-out), transform .6s var(--ease-out), color .6s var(--ease-in-out); }
	.lq-card:hover p, .lq-card:focus-visible p, .lq-card:focus-within p { opacity: 1; transform: none; }
}

/* IA card: burgundy + pink dot sphere; hover turns the whole card #FF3AA0 */
.lq-card--ai { background: var(--c-pink-dark); transition: background-color .6s var(--ease-in-out); }
.lq-card__dots {
	position: absolute; z-index: -1; left: 50%; top: var(--s-6); width: 50%; aspect-ratio: 1;
	background: var(--c-pink);
	-webkit-mask: var(--lq-dots) center / contain no-repeat; mask: var(--lq-dots) center / contain no-repeat;
	transition: background-color .6s var(--ease-in-out), transform 1.2s var(--ease-in-out);
	animation: lq-spin 120s linear infinite;
}
@keyframes lq-spin { to { rotate: 360deg; } }
.lq-card--ai:hover { background: var(--c-pink); }
.lq-card--ai:hover .lq-card__dots { background: var(--c-pink-dark); transform: scale(1.08); }

/* Stages (pinned headline + accordion) -------------------------------------- */
.lq-stages { position: relative; }
.lq-stages__title {
	font-family: var(--f-display); font-size: var(--t-h2); line-height: calc(78 * var(--u)); /* web-h2, as the Nosotros section titles */
	text-align: center; color: var(--lq-fg);
}
/* Headline intro: pinned mid-screen as the service cards leave (it starts half a
   screen early, under the cards' last stretch); the orbits open and it holds on its
   own for a while, then scrolls away with the stages accordion. */
.lq-stages__intro {
	position: relative; pointer-events: none;
	height: calc(270vh - var(--top)); /* 100vh + 170vh pinned: fade in .3 · orbits on their own · accordion rises (orbits fade) and rests under the headline */
	margin-top: -50vh;
}
.lq-stages__intro-sticky {
	position: sticky; top: var(--top);
	height: calc(100vh - var(--top));
	display: flex; align-items: center;
}
.lq-stages__intro .lq-stages__title { will-change: opacity, transform; }

/* Orbits behind the headline (desktop). The layer takes the page color as the headline
   fades in, so the headline can be blended against it and the photos. */
.lq-stages__intro-sticky { background: color-mix(in srgb, var(--lq-bg) calc(var(--intro-bg, 0) * 100%), transparent); }
.lq-stages__intro .lq-stages__title { color: var(--c-off-white); mix-blend-mode: difference; } /* always in contrast with what's below */
.lq-orbits {
	position: absolute; z-index: -1; left: 50%; top: 50%; width: 0; height: 0;
	opacity: var(--orbit-vis, 0);
}
.lq-orbit {
	position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
	border: 1px solid color-mix(in srgb, var(--lq-fg) 22%, transparent); border-radius: 50%;
	transform: scale(0); opacity: 0;
	transition: transform .7s var(--ease-in-out), opacity .4s var(--ease-in-out); /* closing: quick, no delay */
}
.lq-orbit--1 { --d: calc(355 * var(--u)); --spin: 70s; }
.lq-orbit--2 { --d: calc(585 * var(--u)); --spin: 95s; --turn: -1turn; }
.lq-orbit--3 { --d: calc(845 * var(--u)); --spin: 120s; }
/* Opening: half a second after the headline is in, rings one after another */
.lq-stages__intro.is-open .lq-orbit { transform: scale(1); opacity: 1; transition: transform 1.6s var(--ease-out) .5s, opacity .8s var(--ease-out) .5s; }
.lq-stages__intro.is-open .lq-orbit--2 { transition-delay: .65s; }
.lq-stages__intro.is-open .lq-orbit--3 { transition-delay: .8s; }
/* Each image rides an arm that turns around the centre and counter-turns to stay upright */
.lq-orbit__arm { position: absolute; inset: 0; transform: rotate(var(--a)); animation: lq-orbit var(--spin) linear infinite; }
.lq-orbit__img {
	position: absolute; left: calc(50% - var(--s) * var(--u) / 2); top: calc(var(--s) * var(--u) / -2);
	display: block; overflow: hidden; width: calc(var(--s) * var(--u)); height: calc(var(--s) * var(--u) * 1.12); object-fit: cover;
	transform: rotate(calc(-1 * var(--a))); animation: lq-orbit-counter var(--spin) linear infinite;
}
@keyframes lq-orbit { from { rotate: 0turn; } to { rotate: var(--turn, 1turn); } }
@keyframes lq-orbit-counter { from { rotate: 0turn; } to { rotate: calc(-1 * var(--turn, 1turn)); } }
@media (prefers-reduced-motion: reduce) { .lq-orbit__arm, .lq-orbit__img { animation: none; } }
.js .lq-stages__intro .lq-stages__title { opacity: 0; }
/* Stages accordion: closed by default, one open at a time (main.js) */
.lq-acc {
	--hairline-acc: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent); /* as the Nosotros pillars */
	--bleed: calc(var(--gutter) + var(--inset) + max(0px, (100vw - 1920 * var(--u)) / 2)); /* to the screen's right edge */
	--card-w: calc(568 * var(--u)); --card-gap: var(--s-5); /* service cards (see .lq-carousel) */
	margin-inline: var(--inset); border-bottom: var(--hairline-acc);
	/* Rises over the pinned headline and comes to rest one block space under it (--intro-gap:
	   space between the headline and the bottom of the screen, set by main.js), so the
	   headline ends up as the accordion's title. */
	position: relative; z-index: 1;
	margin-top: calc(var(--space-block) - var(--intro-gap, 0px));
}
.lq-acc__item { /* question over cards 1–2 | description over card 3 (lines up with the cards below); the body spans all */
	position: relative; display: grid; column-gap: 0;
	grid-template-columns: calc(2 * (var(--card-w) + var(--card-gap))) var(--card-w) minmax(0, 1fr);
	border-top: var(--hairline-acc);
}
.lq-acc__heading, .lq-acc__body { grid-column: 1 / -1; }
.lq-acc__item.is-open .lq-acc__heading { grid-column: 1; padding-right: var(--s-7); }
.lq-acc__heading { margin: 0; font: inherit; }
.lq-acc__head {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-7);
	width: 100%; padding: var(--s-6) 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--c-ink);
}
.lq-acc__label { grid-column: 1; font-family: var(--f-text); font-size: var(--t-caption); font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--s-6); }
.lq-acc__question {
	grid-column: 1; max-width: calc(1100 * var(--u));
	font-family: var(--f-text); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; /* web-h3, as the pillar titles */
}
.lq-acc__icon {
	grid-column: 2; grid-row: 1 / span 2; align-self: center; /* centred between the dividers */
	display: block; width: calc(var(--t-h3) * 1.2); min-width: 32px; aspect-ratio: 1; /* one question line tall */
	transition: transform .5s var(--ease-in-out), opacity .3s var(--ease-in-out);
}
.lq-acc__icon .lq-icon, .lq-acc__icon svg { display: block; width: 100%; height: 100%; }
.lq-acc__head:hover .lq-acc__icon { transform: rotate(90deg); }
.lq-acc__head:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 4px; }
/* Open: the + gives way to the perspective text in the right column */
.lq-acc__head[aria-expanded="true"] .lq-acc__icon { opacity: 0; transform: rotate(45deg) scale(.8); }

.lq-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-in-out); }
.lq-acc__item.is-open .lq-acc__body { grid-template-rows: 1fr; }
.lq-acc__inner { min-height: 0; overflow: hidden; margin-right: calc(-1 * var(--bleed)); } /* clip for the open/close, but let the cards run off-screen */
.lq-acc__item:not(.is-open) .lq-acc__inner { visibility: hidden; transition: visibility 0s .7s; }
.lq-acc__text { /* right column of the open item, top-aligned with the question (below the stage label) */
	display: none; grid-column: 2; grid-row: 1; padding: calc(var(--s-6) + var(--t-caption) * 1.3 + var(--s-6)) 0 var(--s-6);
	font-size: var(--t-body); line-height: 1.33; color: var(--c-muted);
}
.lq-acc__item.is-open .lq-acc__text { display: block; animation: lq-fade-in .6s var(--ease-in-out) .25s both; } /* takes its own space: the row grows if it's taller than the question */
@keyframes lq-fade-in { from { opacity: 0; } }

/* Service cards: run off the right edge of the screen */
.lq-carousel {
	display: flex; gap: var(--card-gap, var(--s-5)); padding-bottom: var(--s-8);
	padding-right: var(--bleed);
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 0;
	scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab;
}
.lq-acc .lq-carousel { opacity: 0; transform: translateY(calc(30 * var(--u))); transition: opacity .4s var(--ease-in-out), transform .4s var(--ease-in-out); } /* hidden while its stage is closed */
.lq-acc__item.is-open .lq-carousel { opacity: 1; transform: none; transition: opacity .8s var(--ease-in-out) .2s, transform 1s var(--ease-out) .2s; }
.lq-carousel::-webkit-scrollbar { display: none; }
.lq-carousel:focus-visible { outline: 2px solid var(--c-teal); outline-offset: -2px; }
.lq-carousel.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.lq-carousel.is-dragging .lq-service-card { pointer-events: none; }
.lq-service-card {
	position: relative; flex: none; width: var(--card-w, calc(568 * var(--u))); aspect-ratio: 509 / 570;
	overflow: hidden; scroll-snap-align: start; background: var(--c-pink-dark);
}
.lq-service-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; transition: transform 1.2s var(--ease-out); }
.lq-service-card:hover img { transform: scale(1.05); }
.lq-service-card:not(.lq-service-card--plain)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65%; background: linear-gradient(to top, rgb(25 21 22 / .6), rgb(25 21 22 / .3) 55%, rgb(25 21 22 / 0)); }
.lq-service-card > .lq-display { /* first line sits at the same height on every card */
	position: absolute; z-index: 1; left: var(--s-5); right: var(--s-5); top: 72%;
	font-size: var(--t-h3); line-height: 1.1; text-transform: uppercase; color: var(--c-on-dark);
}


/* Cases ------------------------------------------------------------------- */
.lq-cases { padding-block: var(--space-section); }
.lq-eyebrow { font-family: var(--f-text); font-weight: 500; font-size: var(--t-body); line-height: calc(40 * var(--u)); color: var(--c-muted); }
.lq-cases .lq-eyebrow { margin: 0 var(--inset); color: color-mix(in srgb, var(--lq-fg) 62%, transparent); }
.lq-cases__title { margin: var(--space-heading) var(--inset) 0; width: calc(1220 * var(--u)); font-size: var(--t-h2); line-height: calc(78 * var(--u)); letter-spacing: -.02em; color: var(--lq-fg); }
.lq-cases__grid {
	display: grid; margin-top: var(--space-block);
	grid-template-columns: minmax(0, 540fr) minmax(0, 760fr) minmax(0, 440fr); /* quote | large | gap + small */
	grid-template-rows: calc(230 * var(--u)) calc(230 * var(--u));
	row-gap: var(--s-6);
}
.lq-cases__grid > .lq-cases__img--2, .lq-cases__grid > .lq-cases__img--3 { margin-left: var(--s-6); }
.lq-quote { grid-column: 1; grid-row: 1 / 3; align-self: end; margin-left: var(--inset); margin-bottom: var(--s-5); width: calc(400 * var(--u)); }
.lq-quote p { font-family: var(--f-text); color: var(--c-ink); font-size: var(--t-body); line-height: calc(29.5 * var(--u)); letter-spacing: -.02em; margin-bottom: var(--s-5); }
.lq-quote footer { font-size: var(--t-body); line-height: calc(33 * var(--u)); }
.lq-quote strong { display: block; font-weight: 500; color: var(--c-ink); }
.lq-quote span { font-size: var(--t-caption); color: var(--c-muted); }
.lq-cases__img { position: relative; overflow: hidden; background: #ddd; }
.lq-cases__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.lq-cases__img:hover img { transform: scale(1.04); }
.lq-cases__img--1 { grid-column: 2; grid-row: 1 / 3; }
.lq-cases__img--2 { grid-column: 3; grid-row: 1; }
.lq-cases__img--3 { grid-column: 3; grid-row: 2; }

/* Contact ----------------------------------------------------------------- */
.lq-contact { padding-block: var(--space-section); background: var(--c-paper); }
.lq-contact .lq-eyebrow { font-weight: 400; font-size: var(--t-body); color: var(--c-muted); }
.lq-contact__art { /* line illustration between "Conversemos" and the title, drawn like the stage illustrations */
	display: block; width: calc(230 * var(--u)); min-width: 120px; aspect-ratio: 1; margin: var(--s-4) auto 0;
	background: color-mix(in srgb, var(--c-ink) 55%, transparent);
	-webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat;
}
.lq-contact__title { margin-top: var(--space-heading); font-size: var(--t-h2); line-height: calc(75 * var(--u)); letter-spacing: -.02em; color: var(--c-ink); }
.lq-contact__grid {
	display: grid; grid-template-columns: minmax(0, 735fr) minmax(0, 840fr); column-gap: calc(145 * var(--u));
	margin: var(--space-block) var(--inset) 0;
}

.lq-office {
	position: relative; aspect-ratio: 735 / 709; color: var(--c-on-dark); /* no overflow clipping: the dropdown may extend past the card */
	background: #3b4740;
}
.lq-office__bg { position: absolute; inset: 0; overflow: hidden; } /* clipped here, so the country list can still overflow the card */
.lq-office__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.lq-office__bg::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top, rgb(25 21 22 / .6), rgb(25 21 22 / .1) 75%); } /* so the text reads */
.lq-office__body { position: absolute; z-index: 4; left: var(--s-6); top: 49.2%; right: var(--s-6); font-family: var(--f-text); font-size: var(--t-body); line-height: calc(29 * var(--u)); letter-spacing: .006em; }
.lq-office__country { margin-bottom: var(--s-5); }
.lq-office__toggle {
	display: inline-flex; align-items: center; gap: var(--s-3); padding: 0; background: none; border: 0; cursor: pointer; color: inherit;
	font-family: var(--f-text); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em;
}
.lq-office__toggle .lq-icon--chevron svg { width: .45em; height: auto; transition: transform .3s var(--ease-in-out); }
.lq-office__toggle[aria-expanded="true"] .lq-icon--chevron svg { transform: rotate(180deg); }
.lq-office .lq-country__list { left: 0; right: auto; z-index: 2; color: var(--c-ink); letter-spacing: 0; }
.lq-country__list button { display: block; width: 100%; padding: 8px 12px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--f-text); font-size: 15px; line-height: inherit; color: inherit; }
.lq-country__list button:hover { background: var(--c-paper); }
/* All countries share one cell, so the card doesn't jump when switching */
.lq-office__panels { display: grid; }
.lq-office__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-in-out), visibility 0s .35s; }
.lq-office__panel.is-active { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-in-out) .1s; }
.lq-office p + p { margin-top: var(--s-5); }
.lq-office a:hover { color: var(--c-teal); }

.lq-form__row { display: grid; grid-template-columns: calc(400 * var(--u)) calc(400 * var(--u)); justify-content: space-between; }
.lq-field { position: relative; padding-top: var(--s-3); margin-bottom: var(--s-6); }
.lq-field label {
	position: absolute; left: 0; top: calc(14 * var(--u)); display: flex; align-items: center; gap: var(--s-2);
	font-size: var(--t-body); line-height: calc(45 * var(--u)); letter-spacing: -.02em; color: var(--c-muted);
	pointer-events: none; transform-origin: left top; transition: transform .45s var(--ease-in-out), color .3s;
}
.lq-field input, .lq-field select, .lq-field textarea {
	display: block; width: 100%; background: transparent; border: 0; border-radius: 0;
	border-bottom: var(--hairline-ink); color: var(--c-ink);
	font-size: var(--t-body); letter-spacing: -.02em; height: calc(45 * var(--u)); padding: 0;
}
.lq-field textarea { height: calc(116 * var(--u)); padding-top: var(--s-2); resize: vertical; line-height: 1.4; }
.lq-field input:focus, .lq-field select:focus, .lq-field textarea:focus { outline: none; border-bottom-color: var(--c-teal); }
/* Float the label once the field is focused or filled */
.lq-field:focus-within label,
.lq-field input:not(:placeholder-shown) + label,
.lq-field textarea:not(:placeholder-shown) + label,
.lq-field--select.is-filled label { transform: translateY(calc(-30 * var(--u))) scale(.7); color: var(--c-ink); }
.lq-field--select select { appearance: none; -webkit-appearance: none; cursor: pointer; color: transparent; }
.lq-field--select.is-filled select, .lq-field--select select:focus { color: var(--c-ink); }
.lq-field--select select option { color: var(--c-ink); }

.lq-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
	min-width: calc(119 * var(--u)); height: calc(52 * var(--u)); min-height: 40px; padding: 0 var(--s-4);
	border: 0; border-radius: 0; background: var(--c-ink); color: var(--c-on-dark);
	font-family: var(--f-text); font-size: var(--t-body); line-height: 1; cursor: pointer;
	transition: background-color .45s var(--ease-in-out), color .45s var(--ease-in-out);
}
.lq-form .lq-btn { margin-top: 0; }
.lq-btn__dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); min-width: 7px; min-height: 7px; border-radius: 0; background: currentColor; }
.lq-btn:hover, .lq-btn:focus-visible { background: var(--c-paper); color: var(--c-ink); }
.lq-btn--light { background: var(--c-paper); color: var(--c-ink); }
.lq-btn--light:hover { background: var(--c-white); }

.lq-notice { padding: var(--s-3) var(--s-3); border-radius: 0; margin-bottom: var(--s-5); font-size: var(--t-body); }
.lq-notice--ok { background: var(--c-teal-tint); color: var(--c-teal-dark); }
.lq-notice--error { background: var(--c-red-tint); color: var(--c-red-mid); }

.lq-section.lq-contact--page { padding-bottom: calc(var(--space-section) * 2); } /* Contáctanos page: more air before the footer */

/* Footer ------------------------------------------------------------------ */
/* Reveal: the footer waits, fixed, behind the page and is uncovered as the page scrolls off.
   The wrap starts one screen early (under the page's end) and is one screen taller, so the
   footer stays still during the reveal. If it's taller than the screen it then scrolls on to
   its end; if shorter, it stays against the bottom of the screen (--ftr-h, measured by JS). */
.lq-main { position: relative; z-index: 1; background: var(--lq-bg); }
.lq-footer-wrap { margin-top: -100vh; }
.lq-footer-wrap::after { content: ""; display: block; height: 100vh; }
.lq-footer { position: sticky; top: max(0px, calc(100vh - var(--ftr-h, 9999px))); }
.lq-footer { background: var(--c-ink); color: var(--c-on-dark); }
.lq-footer__grid {
	display: grid; grid-template-columns: calc(1320 * var(--u)) 1fr;
	min-height: calc(961 * var(--u)); padding: var(--s-8) var(--inset) var(--s-7);
	position: relative;
}
.lq-footer__grid::after { content: ""; position: absolute; left: var(--inset); right: var(--inset); bottom: 0; border-bottom: var(--hairline-dark); }
.lq-footer__title { font-family: var(--f-text); font-size: var(--t-h3); line-height: calc(38 * var(--u)); letter-spacing: -.02em; margin-bottom: var(--s-6); }
.lq-footer__cols { display: grid; grid-template-columns: calc(440 * var(--u)) calc(440 * var(--u)); }
.lq-footer__list { max-width: calc(380 * var(--u)); }
.lq-footer__list li { margin-bottom: var(--s-4); }
.lq-footer__list a { font-size: var(--t-body); line-height: calc(29 * var(--u)); letter-spacing: .006em; transition: color .3s; }
.lq-footer__list a:hover, .lq-footer__link a:hover, .lq-social a:hover { color: var(--c-teal); }
.lq-footer__about .lq-footer__list { margin-bottom: var(--s-8); }
.lq-footer__link { margin-bottom: var(--s-8); }
.lq-footer__about .lq-footer__title:has(+ .lq-social) { margin-bottom: var(--s-6); }
.lq-social { display: flex; gap: var(--s-7); }
.lq-social a { display: block; transition: color .3s; }
.lq-social .lq-icon svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); min-width: 18px; min-height: 18px; }

/* Screen-wide wordmark, same margin left and right: just clear of the screen edges */
.lq-footer__brand { --logo-edge: max(12px, var(--s-6)); padding: var(--space-section) var(--logo-edge) var(--logo-edge); }
.lq-footer__logo { display: block; width: 100%; max-width: none; height: auto; color: var(--c-teal); }

/* Nosotros page ----------------------------------------------------------- */
section[id] { scroll-margin-top: var(--top); } /* links from other pages land below the header */
.lq-about__intro {
	text-transform: none; /* this intro only: sentence case */
	position: relative; width: calc(1330 * var(--u)); margin-left: var(--inset);
	font-size: var(--t-h2); line-height: calc(78 * var(--u)); text-wrap: pretty;
}
.lq-about { padding-bottom: var(--space-section); } /* full section break before the logos */
/* The intro's first line starts at the middle of the screen (never closer to the header than a section gap) */
.lq-hero.lq-about { padding-top: max(var(--space-section), calc(50svh - var(--top) - var(--t-h2) * 0.6)); }
.lq-about__more { color: color-mix(in srgb, var(--c-on-dark) 45%, transparent); }
/* Typing animation: untyped letters are invisible but keep their place, so nothing shifts */
::highlight(lq-untyped) { color: transparent; }
.lq-typing-pending .lq-about__intro { visibility: hidden; } /* until the script starts (see functions.php) */
.lq-caret {
	position: absolute; left: 0; top: 0; width: max(2px, calc(3 * var(--u))); background: var(--c-on-dark);
	pointer-events: none; transition: opacity .6s var(--ease-in-out);
}
.lq-caret.is-waiting { animation: lq-caret-blink 1.06s steps(1) infinite; }
.lq-caret.is-done { opacity: 0; }
@keyframes lq-caret-blink { 50% { opacity: 0; } }
.lq-about__media { width: 50%; margin: var(--space-section) 0 0 auto; aspect-ratio: 3 / 2; overflow: hidden; }
.lq-about__media img { width: 100%; height: 100%; object-fit: cover; }
.lq-about__title { font-size: var(--t-h2); line-height: calc(78 * var(--u)); color: inherit; }

.lq-about-clients { padding-block: var(--space-section) calc(var(--space-section) * 1.5); } /* more air below the logos */
.lq-about-clients__list { display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--space-section); margin-top: var(--space-section); } /* even: title, rows and section end */
.lq-about-clients__list li { flex: 0 0 25%; display: flex; justify-content: center; align-items: center; }
.lq-about-clients__list img { max-width: calc(155 * var(--u)); max-height: calc(62 * var(--u)); width: auto; height: auto; opacity: .85; transition: opacity .4s; }
.lq-about-clients__list img:hover { opacity: 1; }

.lq-section.lq-pillars { padding-top: calc(var(--space-section) * 1.5); padding-bottom: calc(var(--space-section) * 2); } /* double before Conversemos */
.lq-pillars__list { margin: var(--space-block) var(--inset) 0; border-top: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent); list-style: none; padding: 0; }
.lq-pillar {
	display: grid; grid-template-columns: minmax(0, 1fr) calc(420 * var(--u)); column-gap: var(--s-7);
	padding-block: var(--s-6); border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent);
}
.lq-pillar__head { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7); }
.lq-pillar__num { font-size: var(--t-caption); line-height: 1.3; color: var(--c-muted); }
.lq-pillar__title { font-family: var(--f-text); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; text-transform: none; font-weight: 400; color: var(--c-ink); }
.js .lq-pillar__text.lq-reveal { transition-delay: .7s; } /* appears once the title has been visible for an instant */
.lq-pillar__text { font-size: var(--t-body); line-height: 1.33; color: var(--c-muted); }

/* Soluciones page --------------------------------------------------------- */
.lq-hero.lq-sol { padding-top: var(--space-block); padding-bottom: var(--space-section); }
.lq-sol__eyebrow { text-align: center; font-weight: 500; font-size: var(--t-body); line-height: 1.3; color: var(--c-on-dark); }
.lq-sol__title {
	width: calc(1240 * var(--u)); max-width: 100%; margin: var(--s-8) auto 0; text-align: center;
	font-size: var(--t-h2); line-height: calc(78 * var(--u)); color: var(--c-on-dark);
}
.lq-sol__media { /* blurred photo behind the diagram */
	position: relative; margin: var(--space-block) var(--inset) 0; aspect-ratio: 1764 / 767; overflow: hidden; background: var(--c-ink);
}
.lq-sol__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(calc(36 * var(--u))); transform: scale(1.12); }
.lq-sol__media::after { content: ""; position: absolute; inset: 0; background: rgb(25 21 22 / .25); }

/* Venn diagram: Insights ∩ Estrategia, LeQuiz in the overlap. The dotted rings turn.
   Sizes are variables: ring radius, ring offset from the centre, extra label offset,
   top label height, stem length and dot size. */
.lq-venn {
	--r: calc(220 * var(--u)); --off: calc(151 * var(--u));
	--top-lab: calc(292 * var(--u)); --stem: calc(262 * var(--u)); --dot: calc(41 * var(--u));
	position: absolute; z-index: 1; left: 50%; top: 52%; width: 0; height: 0; color: var(--c-on-dark);
}
.lq-venn__ring { position: absolute; top: calc(-1 * var(--r)); width: calc(2 * var(--r)); height: calc(2 * var(--r)); max-width: none; overflow: visible; animation: lq-spin 60s linear infinite; }
.lq-venn__ring--left { left: calc(-1 * var(--off) - var(--r)); }
.lq-venn__ring--right { left: calc(var(--off) - var(--r)); animation-direction: reverse; }
.lq-venn__ring circle { fill: none; stroke: currentColor; stroke-opacity: .7; stroke-width: .45; stroke-linecap: round; stroke-dasharray: 0 1.5; }
.lq-venn__label { position: absolute; top: 0; transform: translate(-50%, -50%); white-space: nowrap; font-weight: 500; font-size: var(--t-body); line-height: 1.2; }
.lq-venn__label--left { left: calc(-1 * var(--r)); }  /* halfway between its outer ring and the other ring's edge */
.lq-venn__label--right { left: var(--r); }
.lq-venn__label--top { left: 0; top: calc(-1 * var(--top-lab)); }
.lq-venn__stem { position: absolute; left: -.5px; bottom: 0; width: 1px; height: var(--stem); background: var(--c-teal); }
.lq-venn__dot { position: absolute; left: calc(var(--dot) / -2); top: calc(var(--dot) / -2); width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--c-teal); }
/* Nosotros: on the hero photo; scales with the photo (container units) */
.lq-about__media { position: relative; container-type: inline-size; }
.lq-about__media--venn img { filter: blur(calc(36 * var(--u))); transform: scale(1.12); }
.lq-about__media--venn::after { content: ""; position: absolute; inset: 0; background: rgb(25 21 22 / .25); }
.lq-about__media .lq-venn__ring circle { stroke-width: .6; stroke-dasharray: 0 1.8; } /* smaller rings: slightly bigger dots */
.lq-about__media .lq-venn { top: 55%; --r: 18.5cqw; --off: 12.8cqw; --top-lab: 25.4cqw; --stem: 22.2cqw; --dot: 3.3cqw; }
@media (prefers-reduced-motion: reduce) { .lq-venn__ring { animation: none; } }

/* Stages sub-header: pinned under the main header; the active stage's line fills with scroll */
.lq-sol-nav { position: sticky; z-index: 5; top: var(--top); background: var(--c-ink); padding-block: var(--s-5); }
.lq-sol-nav__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-7); margin: 0 var(--inset); padding: 0; list-style: none; }
.lq-sol-nav__item { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-4); row-gap: var(--s-5); color: var(--c-on-dark); text-decoration: none; }
.lq-sol-nav__bar { grid-column: 1 / -1; position: relative; height: 3px; background: color-mix(in srgb, var(--c-on-dark) 25%, transparent); overflow: hidden; }
.lq-sol-nav__bar span { position: absolute; inset: 0; background: var(--c-on-dark); transform-origin: left; transform: scaleX(var(--p, 0)); }
.lq-sol-nav__name, .lq-sol-nav__num { font-size: var(--t-body); line-height: 1.2; transition: color .4s var(--ease-in-out); }
.lq-sol-nav__name { font-weight: 500; color: color-mix(in srgb, var(--c-on-dark) 45%, transparent); }
.lq-sol-nav__num { color: color-mix(in srgb, var(--c-on-dark) 45%, transparent); }
.lq-sol-nav__item:hover .lq-sol-nav__name { color: color-mix(in srgb, var(--c-on-dark) 75%, transparent); }
.lq-sol-nav__item.is-active .lq-sol-nav__name { color: var(--c-on-dark); }
.lq-sol-nav__item:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 4px; }
.lq-sol-nav__toggle { display: none; } /* phones only */

/* Each stage: illustration, question and text centred; service cards run off the right edge */
.lq-sol-stage { padding-block: var(--space-block) var(--space-section); scroll-margin-top: var(--sol-nav-h, 0px); }
.lq-sol-stage + .lq-sol-stage { padding-top: var(--space-section); }
.lq-sol-stage + .lq-sol-stage > .lq-container { position: relative; }
.lq-sol-stage + .lq-sol-stage > .lq-container::before { /* divider between stages */
	content: ""; position: absolute; left: calc(var(--gutter) + var(--inset)); right: calc(var(--gutter) + var(--inset)); top: calc(-1 * var(--space-section));
	border-top: 1px solid color-mix(in srgb, var(--c-on-dark) 25%, transparent);
}
.lq-sol-stage__intro { display: flex; flex-direction: column; align-items: center; }
.lq-sol-stage__art {
	display: block; width: calc(230 * var(--u)); min-width: 120px; aspect-ratio: 1; margin-bottom: var(--s-7);
	background: color-mix(in srgb, var(--c-on-dark) 80%, transparent);
	-webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat;
}
.lq-sol-stage__question { width: calc(820 * var(--u)); max-width: 100%; text-align: center; font-size: var(--t-h2); line-height: calc(78 * var(--u)); color: var(--c-on-dark); }
.lq-sol-stage__text { width: calc(820 * var(--u)); max-width: 100%; margin-top: var(--s-7); text-align: center; font-size: var(--t-body); line-height: 1.33; color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); }
.lq-sol-stage .lq-carousel {
	--bleed: calc(var(--gutter) + max(0px, (100vw - 1920 * var(--u)) / 2)); /* container edge → screen edge */
	margin: var(--space-block) calc(-1 * var(--bleed)) 0 var(--inset); padding-bottom: 0;
}

/* IA x Insights page (Zuma) ----------------------------------------------- */
.zm { --zm-accent: var(--c-pink); } /* Pink·AI from the design system marks everything Zuma does */
.zm em { font-style: italic; }

/* Single header: LeQuiz + ZUMA, the page's sections, demo button */
.zm-header { display: flex; align-items: center; gap: var(--s-7); padding-block: var(--s-4); position: relative; }
.zm-header::after { content: ""; position: absolute; left: calc(var(--gutter) + var(--inset)); right: calc(var(--gutter) + var(--inset)); bottom: 0; border-bottom: 1px solid color-mix(in srgb, var(--c-on-dark) 18%, transparent); }
.zm-header__brand { display: flex; align-items: center; gap: var(--s-5); margin-left: var(--inset); }
.zm-header__logo { display: block; color: var(--c-teal); }
.zm-header__logo svg { display: block; width: calc(173 * var(--u)); min-width: 96px; height: auto; }
.zm-header__name { font-size: var(--t-h2); line-height: 1; color: var(--c-on-dark); text-decoration: none; }
.zm-header__nav { display: flex; gap: var(--s-6); margin-left: auto; }
.zm-header__nav a { font-size: 15px; font-weight: 500; color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); text-decoration: none; transition: color .3s var(--ease-in-out); }
.zm-header__nav a:hover, .zm-header__nav a.is-active { color: var(--c-on-dark); }
.zm-header__cta { height: 36px; min-height: 36px; margin-right: var(--inset); font-size: 15px; font-weight: 500; }

/* Shared */
.zm-eyebrow { font-weight: 500; font-size: var(--t-body); line-height: 1.3; color: var(--c-on-dark); }
.zm-eyebrow--muted { color: var(--c-muted); }
.zm-title { font-size: var(--t-h2); line-height: calc(78 * var(--u)); margin-top: var(--space-heading); }
.zm-lead { max-width: calc(820 * var(--u)); margin: var(--s-7) auto 0; font-size: var(--t-body); line-height: 1.33; color: var(--c-muted); text-align: center; }
.lq-dark .zm-lead { color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); }
.zm-link { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--t-body); color: inherit; text-decoration: none; }
.zm-link .lq-icon svg { width: calc(26 * var(--u)); min-width: 20px; height: auto; transition: transform .3s var(--ease-in-out); }
.zm-link:hover .lq-icon svg { transform: translateX(4px); }
.zm-square { display: inline-block; width: .32em; height: .32em; margin-right: .35em; vertical-align: .18em; background: var(--zm-accent); }

/* Textured box: a theme photo, blurred, darkened and grained; product panels sit inside */
.zm-box { position: relative; overflow: hidden; isolation: isolate; background: var(--c-ink); color: var(--c-on-dark); }
.zm-box > .lq-blur { z-index: -2; }
.zm-box::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(25 21 22 / .12); } /* a light veil; boxes with text on them get more below */
.zm-who__card::after { background: linear-gradient(to bottom, rgb(25 21 22 / .55), rgb(25 21 22 / .15) 70%); }
.zm-voices::after { background: rgb(25 21 22 / .45); }

/* Hero (same scale as the other inner pages) */
.lq-hero.zm-hero { padding-top: var(--space-section); padding-bottom: var(--space-section); text-align: center; }
.zm-hero__title { max-width: calc(1240 * var(--u)); margin: 0 auto; font-size: var(--t-h2); line-height: calc(78 * var(--u)); color: var(--c-on-dark); }
.zm-hero__text { max-width: calc(820 * var(--u)); margin: var(--s-7) auto 0; font-size: var(--t-body); line-height: 1.33; color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); }
.zm-hero__ctas { display: flex; justify-content: center; align-items: center; gap: var(--s-7); margin-top: var(--s-8); }
.zm-hero__stage { margin: var(--space-block) var(--inset) 0; padding: calc(96 * var(--u)) calc(72 * var(--u)); text-align: left; }
.zm-hero__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.zm-hero__panels > :nth-child(2) { margin-top: calc(72 * var(--u)); }

/* Mock interface panels (inc/zuma.php) */
.zm-ui { background: var(--c-paper); color: var(--c-ink); font-size: var(--t-caption); line-height: 1.4; text-align: left; box-shadow: 0 calc(30 * var(--u)) calc(80 * var(--u)) rgb(25 21 22 / .35); }
.zm-ui__bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: var(--t-caption); }
.zm-ui__dot { width: 8px; height: 8px; background: var(--zm-accent); }
.zm-ui__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); min-height: calc(330 * var(--u)); }
.js .zm-ui__body > * { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * .45s + .2s); }
.js .is-live .zm-ui__body > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .zm-ui__body > * { opacity: 1; transform: none; transition: none; } }

.zm-msg { max-width: 85%; padding: var(--s-2) var(--s-3); background: var(--c-white); }
.zm-msg--ai { align-self: flex-start; }
.zm-msg--me { align-self: flex-end; background: var(--c-ink); color: var(--c-on-dark); }
.zm-msg--typing { display: flex; gap: 4px; padding-block: var(--s-3); }
.zm-msg--typing span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: zm-blink 1.2s infinite; }
.zm-msg--typing span:nth-child(2) { animation-delay: .2s; } .zm-msg--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes zm-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.zm-live { display: flex; align-items: center; gap: var(--s-2); font-weight: 500; }
.zm-live__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--zm-accent); animation: zm-blink 1.6s infinite; }
.zm-wave { display: flex; align-items: center; gap: 2px; height: 18px; margin-left: auto; }
.zm-wave i { width: 2px; height: 30%; background: var(--c-ink); animation: zm-wave 1.1s ease-in-out infinite; }
.zm-wave i:nth-child(3n) { animation-delay: .2s; } .zm-wave i:nth-child(3n+1) { animation-delay: .45s; } .zm-wave i:nth-child(4n) { animation-delay: .7s; }
@keyframes zm-wave { 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .zm-wave i, .zm-live__rec, .zm-msg--typing span { animation: none; } }
.zm-line b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.zm-line--probe { padding-left: var(--s-3); border-left: 2px solid var(--zm-accent); }
.zm-tag { display: inline-block; margin-right: var(--s-2); padding: 1px 6px; background: var(--c-pink-tint); color: var(--c-pink-mid); font-size: 11px; font-weight: 700; }
.zm-kicker { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: var(--c-muted); }
.zm-find { display: flex; flex-direction: column; gap: 4px; }
.zm-find i { display: block; height: 6px; background: color-mix(in srgb, var(--c-ink) 10%, transparent); position: relative; }
.zm-find i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--zm-accent); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--i) * .45s + .5s); }
.is-live .zm-find i::after { transform: none; }
.zm-quote { margin: var(--s-2) 0 0; padding: var(--s-3); background: var(--c-white); font-style: italic; }
.zm-quote cite { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--c-muted); }
.zm-input { padding: var(--s-2) var(--s-3); background: var(--c-white); border: 1px solid color-mix(in srgb, var(--c-ink) 15%, transparent); }
.zm-input span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.zm-input--search::before { content: "⌕"; margin-right: var(--s-2); color: var(--c-muted); }
.zm-check { display: flex; gap: var(--s-2); align-items: flex-start; }
.zm-check i { flex: none; width: 12px; height: 12px; margin-top: 2px; border: 1px solid var(--c-ink); }
.zm-check.is-done i { background: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c-paper); }
.zm-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: auto; }
.zm-actions span { padding: 4px 10px; border: 1px solid var(--c-ink); }
.zm-actions .is-primary { background: var(--c-ink); color: var(--c-on-dark); }
.zm-answer { padding: var(--s-3); background: var(--c-white); border-left: 2px solid var(--zm-accent); }
.zm-sources, .zm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zm-sources span, .zm-chips span { padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--c-ink) 20%, transparent); font-size: 11px; }
.zm-chips span:first-child { background: var(--c-ink); color: var(--c-on-dark); border-color: var(--c-ink); }
.zm-row { display: flex; align-items: center; gap: var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 10%, transparent); }
.zm-row i { width: 8px; height: 8px; background: var(--c-ink); }
.zm-proj { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: var(--s-3); align-items: center; padding-bottom: var(--s-2); border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 10%, transparent); }
.zm-proj em { font-style: normal; font-size: 11px; padding: 1px 6px; background: var(--c-white); }
.zm-lock { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; color: var(--c-muted); }
.zm-lock i { width: 8px; height: 8px; background: var(--zm-accent); }

/* Qué es Zuma: title and paragraph share the left edge; the table sits in a box */
.zm-what .lq-container > * { margin-inline: var(--inset); }
.zm-statement { max-width: calc(1440 * var(--u)); margin-top: var(--space-heading); font-size: var(--t-h2); line-height: calc(78 * var(--u)); }
.zm-what__text { max-width: calc(980 * var(--u)); margin-top: var(--s-7); font-size: var(--t-body); line-height: 1.33; color: var(--c-muted); }
.zm-what__text strong { font-weight: 500; color: var(--c-ink); }
.zm-compare-box { margin-top: var(--space-block); padding: calc(96 * var(--u)) calc(96 * var(--u)); }
.zm-compare { padding: var(--s-4) var(--s-7) var(--s-5); background: var(--c-paper); color: var(--c-ink); box-shadow: 0 calc(30 * var(--u)) calc(80 * var(--u)) rgb(25 21 22 / .35); }
.zm-compare__row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; column-gap: var(--s-7); padding-block: var(--s-6); border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 15%, transparent); font-size: var(--t-body); line-height: 1.33; }
.zm-compare__row:last-child { border-bottom: 0; }
.zm-compare__head { padding-block: var(--s-4); font-size: var(--t-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--c-muted); }
.zm-compare__head span:last-child { color: var(--c-pink-mid); }
.zm-compare__stage { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; }
.zm-compare__now { color: var(--c-muted); }
.zm-compare__zuma { position: relative; padding-left: var(--s-5); }
.zm-compare__zuma::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--zm-accent); }
.zm-what__close { max-width: calc(1240 * var(--u)); margin: var(--space-section) auto 0 !important; text-align: center; font-size: var(--t-h2); line-height: calc(78 * var(--u)); }

/* Para quién: textured cards; title, text and button on top, the product panel cropped at the bottom */
.lq-section.zm-who { padding-top: 0; } /* "No es un chatbot…" sits a section away from the table and from these cards */
.zm-who__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin: 0 var(--inset); }
.zm-who__card { display: flex; flex-direction: column; min-height: calc(1040 * var(--u)); }
.zm-who__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-6); padding: var(--s-8) var(--s-8) 0; }
.zm-who__title { font-size: var(--t-h2); line-height: calc(78 * var(--u)); color: var(--c-on-dark); }
.zm-who__body p { max-width: calc(620 * var(--u)); font-size: var(--t-body); line-height: 1.33; color: color-mix(in srgb, var(--c-on-dark) 80%, transparent); }
.zm-who__visual { margin: auto calc(-1 * var(--s-8)) 0 calc(160 * var(--u)); padding-top: var(--s-8); transform: translateY(var(--s-6)); }
.zm-who__visual .zm-ui__body { min-height: calc(330 * var(--u)); font-size: var(--t-body); }

/* La plataforma: one row per module, text and boxed panel alternating sides */
.zm-modules { margin: var(--space-block) var(--inset) 0; padding: 0; list-style: none; }
.zm-module { display: grid; grid-template-columns: minmax(0, 1fr) calc(2 * 568 * var(--u) + var(--s-5)); gap: var(--s-8); align-items: center; padding-block: var(--space-block); border-top: 1px solid color-mix(in srgb, var(--c-on-dark) 20%, transparent); }
.zm-module--flip { grid-template-columns: calc(2 * 568 * var(--u) + var(--s-5)) minmax(0, 1fr); }
.zm-module--flip .zm-module__text { order: 2; }
.zm-module__name { font-size: var(--t-h2); line-height: calc(78 * var(--u)); color: var(--c-on-dark); } /* "01 Diseña": number and name share the line and style */
.zm-module__num { margin-right: .25em; }
.zm-module__tag { margin-top: var(--s-4); font-family: var(--f-text); font-size: var(--t-body); font-weight: 500; line-height: 1.33; color: var(--c-on-dark); }
.zm-module__desc { margin-top: var(--s-6); font-size: var(--t-body); line-height: 1.33; color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); }
.zm-module__visual { padding: calc(96 * var(--u)) 0 0 calc(96 * var(--u)); }
.zm-module__visual .zm-ui { margin-right: calc(-1 * var(--s-8)); transform: translateY(var(--s-6)); } /* runs off the right and bottom edges */
.zm-module__visual .zm-ui__body { min-height: calc(300 * var(--u)); padding-bottom: calc(var(--s-6) + var(--s-5)); font-size: var(--t-body); }

/* Entrenada para Latinoamérica: one centred column; the idioms tile sits between title and text */
.zm-latam__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.zm-latam__inner .zm-title { max-width: calc(1240 * var(--u)); }
.zm-latam__p { max-width: calc(820 * var(--u)); margin-top: var(--s-7); font-size: var(--t-body); line-height: 1.33; color: var(--c-muted); }
.zm-latam .zm-voices { width: calc(100% - 2 * var(--inset)); aspect-ratio: auto; padding: calc(120 * var(--u)) var(--s-6); margin: var(--space-block) var(--inset) var(--s-4); } /* content width, like the boxes above */
.zm-voices { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s-5); text-align: center; }
.zm-voice { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .35; transition: opacity .8s var(--ease-in-out); }
.zm-voice span { font-size: var(--t-h2); line-height: 1; }
.zm-voice small { font-size: var(--t-caption); font-weight: 500; opacity: 0; transition: opacity .8s var(--ease-in-out); }
.zm-voice.is-on { opacity: 1; }
.zm-voice.is-on small { opacity: .75; }
.zm-voice--means.is-on span { color: var(--zm-accent); }

/* Datos, seguridad y acceso */
.zm-promise { /* the most important commitment, on a Pink·AI blurred box at content width */
	margin: var(--space-block) var(--inset) 0; padding: calc(150 * var(--u)) var(--s-8); text-align: center;
}
.zm-promise::after { background: rgb(25 21 22 / .4); }
.zm-promise__title { max-width: calc(1240 * var(--u)); margin: 0 auto; font-size: var(--t-hero); line-height: calc(102 * var(--u)); color: var(--c-on-dark); }
.zm-promise__text { max-width: calc(820 * var(--u)); margin: var(--s-6) auto 0; font-size: var(--t-body); line-height: 1.33; color: color-mix(in srgb, var(--c-on-dark) 85%, transparent); }
.zm-promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin: var(--s-8) var(--inset) 0; padding: 0; list-style: none; }
.zm-promises li { padding-top: var(--s-4); border-top: 2px solid var(--zm-accent); font-size: var(--t-body); line-height: 1.33; color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); }
.zm-promises strong { display: block; margin-bottom: var(--s-2); font-weight: 500; color: var(--c-on-dark); }
.zm-data__note { max-width: calc(820 * var(--u)); margin: var(--s-8) auto 0; text-align: center; font-size: var(--t-body); line-height: 1.33; color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); }
.zm-price { display: grid; grid-template-columns: calc(2 * 568 * var(--u) + var(--s-5)) minmax(0, 1fr); gap: var(--s-5); margin: var(--space-section) var(--inset) 0; padding-top: var(--space-block); border-top: 1px solid color-mix(in srgb, var(--c-on-dark) 20%, transparent); }
.zm-price__title { font-size: var(--t-h2); line-height: calc(78 * var(--u)); color: var(--c-on-dark); padding-right: var(--s-8); }
.zm-price__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); font-size: var(--t-body); line-height: 1.33; color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); }
.zm-price__cta { color: var(--c-on-dark); }

/* Preguntas frecuentes: closed by default, one open at a time */
.zm-faq__label { margin: var(--space-block) var(--inset) 0; }
.zm-faq__list { margin: var(--s-5) var(--inset) 0; border-top: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent); }
.zm-faq__item { border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent); }
.zm-faq__q { margin: 0; font: inherit; }
.zm-faq__q button {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); width: 100%; padding: var(--s-6) 0;
	background: none; border: 0; cursor: pointer; text-align: left; color: var(--c-ink);
	font-family: var(--f-text); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em;
}
.zm-faq__q button:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 4px; }
.zm-faq__icon, .zm-faq__icon .lq-icon, .zm-faq__icon svg { display: block; flex: none; width: calc(var(--t-h3) * 1.2); min-width: 32px; height: auto; aspect-ratio: 1; }
.zm-faq__icon { transition: transform .5s var(--ease-in-out); }
.zm-faq__q button[aria-expanded="true"] .zm-faq__icon { transform: rotate(45deg); }
.zm-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-in-out); }
.zm-faq__a > div { min-height: 0; overflow: hidden; }
.zm-faq__item.is-open .zm-faq__a { grid-template-rows: 1fr; }
.zm-faq__item:not(.is-open) .zm-faq__a > div { visibility: hidden; transition: visibility 0s .6s; }
.zm-faq__a p { max-width: calc(980 * var(--u)); padding-bottom: var(--s-6); font-size: var(--t-body); line-height: 1.33; color: var(--c-muted); }

/* CTA final + demo form */
.zm-demo { background: var(--c-paper); }
.zm-demo .zm-title { color: var(--c-ink); }
.zm-demo__form { max-width: calc(820 * var(--u)); margin: var(--space-block) auto 0; }
.zm-demo__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }

/* Blurred box (lq_blur): stands in for photography. Out-of-focus shapes drift across the
   frame; a vignette and moving grain make it feel like a 35 mm frame. */
.lq-blur { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; isolation: isolate; background: var(--b, #24221b); pointer-events: none; }
.lq-blur i {
	position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1 / var(--r); opacity: var(--o);
	border-radius: 50%; background: radial-gradient(closest-side, var(--c), color-mix(in srgb, var(--c) 45%, transparent) 55%, transparent);
	filter: blur(calc(22 * var(--u))); transform: translate(-50%, -50%) rotate(var(--a)); will-change: transform;
}
.lq-blur.is-moving i { animation: lq-drift var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes lq-drift { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--a) + 24deg)) scale(var(--k)); } }
.lq-blur::before { /* lens vignette */
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgb(10 8 8 / .2) 100%);
}
.lq-blur::after { /* film grain, re-rolled a few times a second */
	content: ""; position: absolute; inset: -60%; z-index: 2; opacity: .5; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	animation: lq-grain .8s steps(1) infinite;
}
@keyframes lq-grain {
	0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); }
	60% { transform: translate(-3%, -8%); } 80% { transform: translate(8%, 3%); }
}
@media (prefers-reduced-motion: reduce) { .lq-blur i, .lq-blur::after { animation: none !important; } }

/* Inner pages ------------------------------------------------------------- */
.lq-section { padding-block: var(--space-section); }
.lq-page-hero { padding-block: var(--space-section); }
.lq-page-hero h1 { font-size: var(--t-hero); line-height: calc(90 * var(--u)); margin-left: var(--inset); max-width: calc(1280 * var(--u)); }
.lq-page-hero .lq-eyebrow { color: var(--c-on-dark); margin-left: var(--inset); }
.lq-404 h1 { margin-bottom: var(--s-7); }
.lq-404 p { margin-left: var(--inset); }
.lq-content { max-width: 820px; margin: 0 auto; font-size: max(var(--t-body), 17px); line-height: 1.55; }
.lq-content > * + * { margin-top: 1.2em; }
.lq-content :is(h1, h2, h3, h4) { font-family: var(--f-display); font-weight: 300; text-transform: uppercase; color: var(--c-ink); line-height: 1.2; }
.lq-content .alignwide { max-width: calc(1720 * var(--u)); margin-inline: calc(50% - min(50vw - var(--gutter), 860 * var(--u))); }
.lq-content .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.lq-content a { text-decoration: underline; text-underline-offset: 3px; }
.lq-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 40px; }
.lq-post-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: 16px; }
.lq-post-card h2 { font-size: var(--t-h3); color: var(--c-ink); margin-bottom: .4em; }
.nav-links { display: flex; gap: 12px; margin-top: 48px; }

/* ==========================================================================
   Tablet + mobile (< 1024px): stacked layout, fixed type sizes
   ========================================================================== */
@media (max-width: 1023px) {
	.lq-header__inner { grid-template-columns: auto 1fr auto; column-gap: 8px; height: 64px; padding: 0 var(--gutter); }
	.lq-header__inner::after { left: var(--gutter); right: var(--gutter); }
	.lq-header__left { display: contents; } /* its country button and menu join the header's grid */
	.lq-brand { grid-column: 1; grid-row: 1; }
	.lq-header .lq-country { grid-column: 2; grid-row: 1; justify-self: end; }
	.lq-header .lq-country__list { left: auto; right: 0; }
	.lq-country__btn { font-size: 15px; }
	.lq-brand__svg, .lq-brand img { width: 104px; min-width: 0; }
	.lq-header__actions { grid-column: 3; gap: 8px; margin-right: 0; }
	.lq-header__actions .lq-header__btn { display: none; }
	.lq-burger { display: grid; place-content: center; gap: 8px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: inherit; }
	.lq-burger span:not(.screen-reader-text) { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .4s var(--ease-in-out); }
	.lq-burger[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(4px) rotate(45deg); }
	.lq-burger[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-4px) rotate(-45deg); }
	.lq-nav {
		position: fixed; top: 64px; left: 0; right: 0; bottom: 0; margin: 0; background: var(--c-ink); color: var(--c-on-dark);
		padding: 24px var(--gutter); overflow-y: auto;
		opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-in-out), visibility 0s .4s;
	}
	.lq-nav.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-in-out); }
	.lq-nav__list { flex-direction: column; gap: 0; }
	.lq-nav a { font-family: var(--f-display); text-transform: uppercase; font-weight: 300; font-size: 34px; padding: 12px 0; border-bottom: var(--hairline-dark); }
	.lq-nav a::after { display: none; }
	.lq-nav .lq-nav__cta { display: inline-flex; margin: 32px 8px 0 0; padding: 14px 20px; border: 1px solid rgb(246 246 246 / .4); font-family: var(--f-text); font-size: 16px; font-weight: 500; text-transform: none; }
	body.lq-menu-open { overflow: hidden; }

	.lq-hero__title { width: auto; margin: 0; line-height: 1.12; }
	.lq-hero__line:last-child { text-align: left; margin-top: 0; }
	.lq-hero__media { aspect-ratio: 4 / 3; }
	.lq-hero__text { width: auto; line-height: 1.45; }

	.lq-clients__list { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 24px 16px; }
	.lq-clients__list img { max-width: 96px; max-height: 40px; }

	.lq-services__head { grid-template-columns: 1fr; gap: 16px; }
	.lq-h-sans, .lq-services__head p, .lq-card p { line-height: 1.4; }
	.lq-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
	.lq-cards > :last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
	.lq-card__body { left: 20px; right: 20px; top: auto; bottom: 24px; width: auto; }
	.lq-card h3 { line-height: 1.1; margin-bottom: 8px; }
	.lq-card__dots { width: 34%; left: auto; right: 0; top: 16px; }

	/* Stages: headline in flow, accordion stacks */
	.lq-stages { padding-top: var(--space-section); }
	.lq-stages__title { line-height: 1.15; text-align: left; }
	.lq-stages__intro { height: auto; margin-top: 0; pointer-events: auto; }
	.lq-stages__intro-sticky { position: static; height: auto; display: block; background: none; }
	.js .lq-stages__intro .lq-stages__title { opacity: 1 !important; transform: none !important; color: var(--lq-fg); mix-blend-mode: normal; }
	.lq-orbits { display: none; }
	.lq-acc { margin-top: var(--space-block); }
	.lq-acc__head { padding: 24px 0; column-gap: 16px; }
	.lq-acc__label { margin-bottom: 16px; }
	.lq-acc__question { max-width: none; }
	.lq-acc__icon { width: 32px; }
	.lq-acc__item, .lq-acc__item.is-open .lq-acc__heading, .lq-acc__text { display: block; }
	.lq-acc__item:not(.is-open) .lq-acc__text { display: none; }
	.lq-acc__text { padding: 0 0 24px; }
	.lq-carousel { gap: 8px; padding-bottom: 32px; }
	.lq-service-card { width: 74vw; max-width: 340px; }
	.lq-service-card > .lq-display { left: 16px; right: 16px; }

	.lq-cases__title { width: auto; line-height: 1.2; }
	.lq-cases__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; margin: var(--space-block) 0 0; }
	.lq-cases__grid > .lq-cases__img--2, .lq-cases__grid > .lq-cases__img--3 { margin-left: 0; }
	.lq-cases__img--1 { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 760 / 500; }
	.lq-cases__img--2, .lq-cases__img--3 { grid-column: auto; grid-row: 2; aspect-ratio: 400 / 230; }
	.lq-quote { grid-column: 1 / -1; grid-row: 3; width: auto; margin: 16px 0 0; }
	.lq-quote p, .lq-quote footer { line-height: 1.4; }

	.lq-contact__title { line-height: 1.2; }
	.lq-contact__grid { grid-template-columns: 1fr; gap: var(--space-block); }
	.lq-office { order: 2; aspect-ratio: auto; min-height: 420px; }
	.lq-office__body { left: 24px; right: 24px; top: auto; bottom: 28px; line-height: 1.4; }
	.lq-office__country { margin-bottom: 16px; }
	.lq-office p + p { margin-top: 16px; }
	.lq-form__row { grid-template-columns: 1fr 1fr; gap: 16px; }
	.lq-field { padding-top: 12px; margin-bottom: 16px; }
	.lq-field label { top: 12px; line-height: 44px; }
	.lq-field input, .lq-field select { height: 44px; }
	.lq-field textarea { height: 110px; }
	.lq-field:focus-within label, .lq-field input:not(:placeholder-shown) + label, .lq-field textarea:not(:placeholder-shown) + label, .lq-field--select.is-filled label { transform: translateY(-20px) scale(.75); }
	.lq-form .lq-btn { margin-top: 8px; }

	.lq-footer__grid { grid-template-columns: 1fr; gap: 48px; min-height: 0; padding-block: 64px 48px; }
	.lq-footer__title, .lq-footer__list a { line-height: 1.3; }
	.lq-footer__title { margin-bottom: 16px; }
	.lq-footer__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
	.lq-footer__list { max-width: none; }
	.lq-footer__list li { margin-bottom: 12px; }
	.lq-footer__about .lq-footer__list, .lq-footer__link { margin-bottom: 24px; }
	.lq-social { gap: 24px; }

	.lq-section, .lq-page-hero { padding-block: var(--space-section); }
	.lq-page-hero h1 { line-height: 1.12; }
}

@media (max-width: 1023px) {
	.lq-about__intro { width: auto; line-height: 1.2; }
	.lq-about__media { width: 100%; margin-top: var(--space-block); }
	.lq-about__title { line-height: 1.2; }
	.lq-about-clients__list { row-gap: 32px; }
	.lq-about-clients__list li { flex-basis: 33.33%; }
	.lq-about-clients__list img { max-width: 96px; max-height: 40px; }
	.lq-pillar { grid-template-columns: 1fr; row-gap: 16px; padding-block: 12px; }
	.lq-pillar__head { gap: 24px; }
	.lq-sol__title { line-height: 1.2; }
	.lq-sol__media { aspect-ratio: 4 / 5; }
	.lq-sol__media .lq-venn { --r: 96px; --off: 62px; --top-lab: 170px; --stem: 150px; --dot: 20px; }
	.lq-venn__label { font-size: 13px; }
	.lq-venn__ring circle { stroke-width: .7; stroke-dasharray: 0 2.2; }
	/* Phones: the current stage only; the ⊕ opens a dropdown with all four */
	.lq-sol-nav { padding-block: 16px; }
	.lq-sol-nav .lq-container { position: relative; }
	.lq-sol-nav__list { display: flex; flex-direction: column; }
	.lq-sol-nav__list li { order: 1; }
	.lq-sol-nav__list li.is-current { order: 0; animation: lq-fade-in .5s var(--ease-in-out); }
	.lq-sol-nav:not(.is-open) .lq-sol-nav__list li:not(.is-current) { display: none; }
	.lq-sol-nav__item { row-gap: 16px; padding-right: 48px; }
	.lq-sol-nav__bar { margin-right: -48px; }
	.lq-sol-nav__num { display: none; }
	.lq-sol-nav__name { font-size: var(--t-body); }
	/* Open: the other stages listed under the current one */
	.lq-sol-nav.is-open .lq-sol-nav__list li:not(.is-current) .lq-sol-nav__bar { display: none; }
	.lq-sol-nav.is-open .lq-sol-nav__list li:not(.is-current) .lq-sol-nav__item { padding-block: 14px; border-top: 1px solid color-mix(in srgb, var(--c-on-dark) 15%, transparent); }
	.lq-sol-nav.is-open .lq-sol-nav__list li:not(.is-current) { animation: lq-fade-in .4s var(--ease-in-out) both; }
	.lq-sol-nav.is-open .lq-sol-nav__list li.is-current .lq-sol-nav__item { padding-bottom: 14px; }
	.lq-sol-nav__toggle {
		display: grid; place-items: center; position: absolute; right: var(--gutter); top: 9px; width: 40px; height: 40px;
		padding: 0; border: 0; background: none; color: var(--c-on-dark); cursor: pointer;
	}
	.lq-sol-nav__toggle .lq-icon, .lq-sol-nav__toggle svg { display: block; width: 32px; height: 32px; transition: transform .4s var(--ease-in-out); }
	.lq-sol-nav.is-open .lq-sol-nav__toggle svg { transform: rotate(45deg); } /* ⊕ → ⊗ */
	.lq-sol-nav__toggle:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 0; border-radius: 50%; }
	/* Phones: everything aligned left, text full width */
	.lq-sol__eyebrow, .lq-sol__title, .lq-sol-stage__question, .lq-sol-stage__text { text-align: left; }
	.lq-sol__title, .lq-sol-stage__question, .lq-sol-stage__text { width: 100%; }
	.lq-sol__title { margin-top: 24px; }
	.lq-sol-stage__intro { align-items: flex-start; }
	.lq-sol-stage__question { line-height: 1.2; }
	.lq-sol-stage__text { margin-top: 24px; }
	.lq-sol-stage .lq-carousel { gap: 8px; }
	/* IA x Insights */
	/* text uses the full width on phones (the desktop measures are in screen units) */
	.zm-hero__title, .zm-hero__text, .zm-lead, .zm-statement, .zm-what__text, .zm-what__close, .zm-latam__inner .zm-title, .zm-latam__p,
	.zm-promise__title, .zm-promise__text, .zm-data__note, .zm-who__body p, .zm-faq__a p, .zm-demo__form { max-width: none; }
	.zm-header { gap: 12px; padding-block: 12px; }
	.zm-header__nav { display: none; }
	.zm-header__brand { gap: 12px; margin-left: 0; }
	.zm-header__logo svg { width: 88px; min-width: 0; }
	.zm-header__name { font-size: 26px; }
	.zm-header__cta { margin: 0 0 0 auto; padding: 0 10px; gap: 6px; font-size: 13px; min-width: 0; }
	.zm-header__name { font-size: 22px; }
	.zm-header__logo svg { width: 76px; }
	.zm-header::after { left: var(--gutter); right: var(--gutter); }
	.lq-hero.zm-hero, .lq-center.zm-title, .lq-center.zm-eyebrow, .zm-lead, .zm-promise, .zm-data__note, .zm-what__close { text-align: left; }
	.zm-hero__title, .zm-hero__text, .zm-lead, .zm-data__note, .zm-promise__text { margin-left: 0; }
	.zm-hero__title, .zm-title, .zm-statement, .zm-price__title, .zm-what__close, .zm-who__title, .zm-module__name { line-height: 1.15; }
	.zm-hero__text { margin-top: 24px; }
	.zm-hero__ctas { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; }
	.zm-hero__stage { padding: 24px 16px; }
	.zm-hero__panels { grid-template-columns: 1fr; gap: 12px; }
	.zm-hero__panels > :nth-child(2) { margin-top: 0; }
	.zm-ui__body { min-height: 0 !important; }
	.zm-compare-box { padding: 16px; margin-inline: 0 !important; }
	.zm-compare { padding: 8px 16px; }
	.zm-compare__head { display: none; }
	.zm-compare__row { grid-template-columns: 1fr; row-gap: 8px; padding-block: 20px; }
	.zm-compare__now::before { content: "Hoy: "; font-weight: 500; }
	.zm-what__close { margin-left: 0 !important; }
	.zm-who__grid { grid-template-columns: 1fr; }
	.zm-who__card { min-height: 0; }
	.zm-who__body { padding: 32px 16px 0; gap: 16px; }
	.zm-who__visual { margin: 24px 16px 0; padding-top: 0; transform: translateY(12px); }
	.zm-who__visual .zm-ui__body { font-size: 13px; }
	.zm-module, .zm-module--flip { grid-template-columns: 1fr; gap: 32px; padding-block: 48px; }
	.zm-module--flip .zm-module__text { order: 0; }
	.zm-module__visual { padding: 24px 16px 0; }
	.zm-module__visual .zm-ui { margin-right: 0; transform: translateY(12px); } /* nothing cut off on phones */
	.zm-module__visual .zm-ui__body { padding-bottom: 28px; }
	.zm-module__visual .zm-ui__body { font-size: 13px; }
	.zm-latam__inner { align-items: flex-start; text-align: left; }
	.zm-latam .zm-voices { width: 100%; margin: 32px 0 0; padding: 48px 16px; }
	.zm-promise { padding: 48px 20px; margin-inline: 0; text-align: left; }
	.zm-promise__title, .zm-promise__text { margin-left: 0; }
	.zm-promise__title { font-size: var(--t-h2); line-height: 1.1; }
	.zm-promises { grid-template-columns: 1fr; gap: 24px; margin-inline: 0; }
	.zm-price { grid-template-columns: 1fr; gap: 24px; }
	.zm-price__title { padding-right: 0; }
	.zm-faq__q button { padding: 20px 0; }
	.zm-demo__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.lq-cards { grid-template-columns: 1fr; }
	.lq-card, .lq-cards > :last-child { aspect-ratio: 4 / 3.6; }
	.lq-card__dots { width: 50%; }
	.lq-form__row, .lq-footer__cols { grid-template-columns: 1fr; gap: 0; }
	.lq-footer__cols > div + div { margin-top: 24px; }
}
@media (max-width: 600px) {
	.lq-header { top: 0; } /* WP admin bar is not fixed on small screens */
}