/* ==========================================================================
   Larkin 2026 — design tokens + section system.
   Brand colors sourced from the real logo file (LOGO-LARKIN.png), sampled
   pixel-by-pixel, not guessed: blue #046DB5, orange #F2912E. #FFA300 is the
   brighter orange already in use on live CTA buttons elsewhere on the site
   (Divisiones "Ver Más" buttons) — kept as the accent/CTA variant.
   Per brief §23/24: white-dominant, editorial, generous whitespace, motion
   is functional not decorative (respects prefers-reduced-motion).
   ========================================================================== */
:root {
	--l-blue: #046DB5;
	--l-blue-dark: #033E63;
	--l-orange: #F2912E;
	--l-orange-bright: #FFA300;
	--l-navy: #0A2540;
	--l-white: #FFFFFF;
	--l-gray-light: #F5F7FA;
	--l-gray-mid: #E4E9EF;
	--l-text: #182430;
	--l-text-secondary: #5B6472;
	--l-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body.home,
.l-page {
	font-family: var(--l-font);
}

/* --- section shell --- */
body .l-sec {
	position: relative;
	padding: 96px 0;
}
body .l-sec--tight { padding: 56px 0; }
body .l-sec--white { background: var(--l-white); }
body .l-sec--light { background: var(--l-gray-light); }
body .l-sec--navy {
	background: linear-gradient(160deg, var(--l-navy) 0%, var(--l-blue-dark) 100%);
	color: #fff;
}
body .l-sec > .elementor-container,
body .l-sec > .elementor-container > .elementor-row {
	max-width: 1280px;
	margin: 0 auto;
}
@media (max-width: 767px) {
	body .l-sec { padding: 56px 0; }
}

/* --- eyebrow --- */
.l-eyebrow {
	display: inline-block;
	font-family: var(--l-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--l-orange-bright);
	margin: 0 0 18px;
}
body .l-sec--navy .l-eyebrow,
body .l-sec--hero .l-eyebrow { color: var(--l-orange-bright); }

/* --- headings --- */
body .l-sec h1.l-h1 {
	font-family: var(--l-font);
	font-weight: 800;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	color: inherit;
	text-transform: none;
}
body .l-sec h2.l-h2 {
	font-family: var(--l-font);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.12;
	margin: 0 0 20px;
	color: var(--l-text);
	text-transform: none;
}
body .l-sec h3.l-card__title,
body .l-sec h3.l-division__title,
body .l-sec p.l-card__eyebrow,
body .l-sec p.l-eyebrow {
	text-transform: none;
}
body .l-sec p.l-eyebrow { text-transform: uppercase; } /* eyebrow IS meant to be uppercase, just not via inherited theme rule */
body .l-sec--navy h2.l-h2 { color: #fff; }
body .l-sec p.l-body {
	font-family: var(--l-font);
	font-size: clamp(17px, 1.2vw, 20px);
	line-height: 1.65;
	color: var(--l-text-secondary);
	max-width: 760px;
	margin: 0 0 16px;
}
body .l-sec--navy p.l-body { color: rgba(255,255,255,0.9); }
.l-intro-wrap { max-width: 820px; }
.l-center { text-align: center; margin-left: auto; margin-right: auto; }
p.l-highlight {
	font-family: var(--l-font);
	font-weight: 700;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.4;
	color: var(--l-blue-dark);
	margin: 24px 0 0;
}
body .l-sec--navy p.l-highlight { color: #fff; }

/* --- buttons --- */
.l-btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.l-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--l-font);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 30px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, background 0.2s ease;
}
.l-btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.1s; }
.l-btn--primary {
	background: var(--l-orange-bright);
	color: #fff;
}
.l-btn--primary:hover { background: var(--l-orange); transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(242,145,46,0.5); color:#fff; }
.l-btn--outline {
	background: transparent;
	color: inherit;
	border: 1.5px solid currentColor;
}
.l-btn--outline:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); color: inherit; }
body .l-sec--white .l-btn--outline,
body .l-sec--light .l-btn--outline { color: var(--l-blue-dark); }
body .l-sec--white .l-btn--outline:hover,
body .l-sec--light .l-btn--outline:hover { background: rgba(4,109,181,0.06); }

/* --- hero --- */
.l-hero {
	position: relative;
	min-height: 86vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: #fff;
	padding: 0 !important;
}
.l-hero__media { position: absolute; inset: 0; z-index: 0; }
.l-hero__media video,
.l-hero__media img {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important; object-fit: cover; object-position: center;
}
.l-hero__overlay {
	position: absolute; inset: 0;
	/* Darkened throughout (not just at the very bottom) so a taller text
	   block — a two-line H1 plus a paragraph, as on inner pages — never
	   lands on the lighter top of the gradient with too little contrast
	   against a busy photo. A second, horizontal scrim darkens the left
	   ~60% specifically (where .l-hero__inner's text always sits) so any
	   busy photo detail behind it — a face, a printed logo on a lab coat,
	   equipment — stays illegible regardless of which hero photo is used. */
	background: linear-gradient(90deg, rgba(3,14,26,0.7) 0%, rgba(3,14,26,0.45) 45%, rgba(3,14,26,0.08) 75%, rgba(3,14,26,0) 100%), linear-gradient(180deg, rgba(6,20,36,0.45) 0%, rgba(6,22,39,0.6) 40%, rgba(4,28,48,0.78) 65%, rgba(3,25,45,0.93) 100%);
}
.l-hero__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 40px 88px; width: 100%; }
/* Let the hero's own container/row escape the sitewide 1280px content cap
   below, so the photo runs edge-to-edge — only .l-hero__inner stays boxed. */
body .l-sec--hero > .elementor-container,
body .l-sec--hero > .elementor-container > .elementor-row {
	max-width: none;
	width: 100%;
	padding: 0;
}
.l-hero h1.l-h1 { max-width: 900px; }
body .l-sec.l-hero p.l-body,
body .l-sec .l-hero p.l-body { color: rgba(255,255,255,0.96) !important; max-width: 680px; }
@media (max-width: 767px) {
	.l-hero { min-height: 78vh; }
	.l-hero__inner { padding: 0 20px 56px; }
}

/* --- stat grid (Credenciales rápidas) ---
   Icon → big figure → short uppercase unit → caption, each column
   separated by a hairline rule. Figure/unit are split into their own
   elements (not "+35 años" as one string) specifically so the number is
   always a short, uniform-height token — the old combined string wrapped
   to 1 or 2 lines depending on length, which staggered the captions below. */
.l-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; text-align: center; }
.l-stat { padding: 0 28px; border-left: 1px solid var(--l-gray-mid); }
.l-stat:first-child { border-left: none; }
.l-stat__icon {
	width: 40px; height: 40px;
	margin: 0 auto 16px;
	color: var(--l-orange-bright);
}
.l-stat__icon svg { width: 100%; height: 100%; }
.l-stat__figure {
	font-family: var(--l-font);
	font-weight: 800;
	font-size: clamp(32px, 3.4vw, 44px);
	color: var(--l-blue);
	line-height: 1;
	margin: 0 0 8px;
}
.l-stat__unit {
	font-family: var(--l-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--l-blue-dark);
	margin: 0 0 14px;
}
.l-stat__label {
	font-family: var(--l-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--l-text-secondary);
	max-width: 220px;
	margin: 0 auto;
}
body .l-sec--navy .l-stat__figure { color: var(--l-orange-bright); }
body .l-sec--navy .l-stat__unit { color: #fff; }
body .l-sec--navy .l-stat__label { color: rgba(255,255,255,0.75); }
body .l-sec--navy .l-stat { border-left-color: rgba(255,255,255,0.18); }
@media (max-width: 900px) {
	.l-stats { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.l-stat:nth-child(2n+1) { border-left: none; }
	.l-stat:nth-child(n+3) { border-top: 1px solid var(--l-gray-mid); padding-top: 32px; }
}
@media (max-width: 480px) {
	.l-stats { grid-template-columns: 1fr; row-gap: 32px; }
	.l-stat { border-left: none !important; }
	.l-stat:nth-child(n+2) { border-top: 1px solid var(--l-gray-mid); padding-top: 32px; }
}

/* --- focus cards (Focos de Valor) --- */
.l-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.l-card {
	background: #fff;
	border: 1px solid var(--l-gray-mid);
	border-radius: 12px;
	padding: 36px 30px;
	transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.l-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(4,109,181,0.28); border-color: var(--l-blue); }
.l-card__eyebrow {
	font-family: var(--l-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--l-orange-bright);
	margin: 0 0 12px;
}
.l-card__title {
	font-family: var(--l-font);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--l-blue-dark);
	margin: 0 0 12px;
}
.l-card__body { font-family: var(--l-font); font-size: 15.5px; line-height: 1.6; color: var(--l-text-secondary); }
@media (max-width: 900px) { .l-cards { grid-template-columns: 1fr; } }

/* --- division cards --- */
.l-divisions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.l-division {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	min-height: 340px;
	display: flex;
	align-items: flex-end;
	color: #fff;
	text-decoration: none;
}
.l-division img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.l-division:hover img { transform: scale(1.06); }
/* Dirección B (elegida 2026-09-07, canvas:
   https://claude.ai/code/artifact/3a9eae1a-1990-43c2-bef8-10e9680e6f3e):
   scrim mucho más fuerte y en 3 paradas (antes era un degradado suave de
   2 paradas que dejaba poco contraste bajo las fotos nuevas, más ocupadas,
   con marca) para que el texto siempre sea legible sin importar la foto. */
.l-division__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,37,64,0) 32%, rgba(10,37,64,0.72) 55%, rgba(10,37,64,0.97) 100%);
	z-index: 1;
}
.l-division__content { position: relative; z-index: 2; padding: 26px; width: 100%; }
.l-division__eyebrow { font-family: var(--l-font); font-weight: 800; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-orange-bright); margin: 0 0 8px; }
/* color:#fff set explicitly (not just inherited from .l-division) — an
   inherited value always loses to the theme's own explicit h3 color rule,
   which is why this rendered near-black until fixed (same root cause as
   the recurring specificity-trap bug on this project, just via inheritance
   loss this time rather than a losing selector). */
.l-division__title { font-family: var(--l-font); font-weight: 800; font-size: 22px; line-height: 1.25; margin: 0 0 8px; color: #fff; }
.l-division__body { font-family: var(--l-font); font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.85); margin: 0 0 14px; }
.l-division__cta {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--l-font); font-weight: 800; font-size: 13px;
	background: var(--l-orange-bright); color: var(--l-navy);
	padding: 10px 18px; border-radius: 999px;
}
.l-division__cta::after { content: "→"; }
@media (max-width: 900px) { .l-divisions { grid-template-columns: 1fr; } }

/* --- Conocimiento Sectorial (Home only) — editorial list + single large
   photo panel, Direction A from the 2026-09-06 /design exploration. Pure
   CSS radio-button state machine: the 6 .l-sectorial__radio inputs are
   the FIRST children of .l-sectorial so a `~` general-sibling selector
   can reach both .l-sectorial__list (to highlight the active row) and
   .l-sectorial__photopanel (to reveal the matching photo) from one
   :checked state — no JS. Separate component from .l-division above;
   that one stays as-is for /divisiones/. */
.l-sectorial { margin-top: 40px; position: relative; }
.l-sectorial__radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.l-sectorial__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.l-sectorial__list { display: flex; flex-direction: column; }
.l-sectorial__row { border-top: 1px solid var(--l-gray-mid); }
.l-sectorial__row:last-child { border-bottom: 1px solid var(--l-gray-mid); }
.l-sectorial__row label { display: flex; align-items: baseline; gap: 18px; padding: 20px 4px; cursor: pointer; }
.l-sectorial__num { font-family: var(--l-font); font-size: 13px; font-weight: 700; color: var(--l-text-secondary); width: 22px; flex-shrink: 0; }
.l-sectorial__titlewrap { flex: 1; display: flex; flex-direction: column; }
.l-sectorial__title { font-family: var(--l-font); font-size: 21px; font-weight: 700; color: var(--l-text); transition: color .2s; }
.l-sectorial__tag { font-family: var(--l-font); font-size: 14px; color: var(--l-text-secondary); margin-top: 4px; }
.l-sectorial__arrow { margin-left: auto; opacity: 0; transition: opacity .2s; color: var(--l-orange-bright); flex-shrink: 0; }
.l-sectorial__photopanel { position: relative; border-radius: 14px; overflow: hidden; background: var(--l-navy); aspect-ratio: 4 / 3.6; }
.l-sectorial__photo { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.l-sectorial__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l-sectorial__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 30px; background: linear-gradient(180deg, rgba(10,37,64,0) 0%, rgba(10,37,64,0.88) 65%); }
.l-sectorial__body { font-family: var(--l-font); color: rgba(255,255,255,0.9); font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; max-width: 420px; }
.l-sectorial__cta { font-family: var(--l-font); font-weight: 700; font-size: 14px; color: var(--l-orange-bright); text-decoration: none; }
#l-sec-d0:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(1) .l-sectorial__title { color: var(--l-blue); }
#l-sec-d0:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(1) .l-sectorial__arrow { opacity: 1; }
#l-sec-d0:checked ~ .l-sectorial__grid .l-sectorial__photopanel .l-sectorial__photo:nth-of-type(1) { opacity: 1; }
#l-sec-d1:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(2) .l-sectorial__title { color: var(--l-blue); }
#l-sec-d1:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(2) .l-sectorial__arrow { opacity: 1; }
#l-sec-d1:checked ~ .l-sectorial__grid .l-sectorial__photopanel .l-sectorial__photo:nth-of-type(2) { opacity: 1; }
#l-sec-d2:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(3) .l-sectorial__title { color: var(--l-blue); }
#l-sec-d2:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(3) .l-sectorial__arrow { opacity: 1; }
#l-sec-d2:checked ~ .l-sectorial__grid .l-sectorial__photopanel .l-sectorial__photo:nth-of-type(3) { opacity: 1; }
#l-sec-d3:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(4) .l-sectorial__title { color: var(--l-blue); }
#l-sec-d3:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(4) .l-sectorial__arrow { opacity: 1; }
#l-sec-d3:checked ~ .l-sectorial__grid .l-sectorial__photopanel .l-sectorial__photo:nth-of-type(4) { opacity: 1; }
#l-sec-d4:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(5) .l-sectorial__title { color: var(--l-blue); }
#l-sec-d4:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(5) .l-sectorial__arrow { opacity: 1; }
#l-sec-d4:checked ~ .l-sectorial__grid .l-sectorial__photopanel .l-sectorial__photo:nth-of-type(5) { opacity: 1; }
#l-sec-d5:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(6) .l-sectorial__title { color: var(--l-blue); }
#l-sec-d5:checked ~ .l-sectorial__grid .l-sectorial__list .l-sectorial__row:nth-child(6) .l-sectorial__arrow { opacity: 1; }
#l-sec-d5:checked ~ .l-sectorial__grid .l-sectorial__photopanel .l-sectorial__photo:nth-of-type(6) { opacity: 1; }
@media (max-width: 900px) {
	.l-sectorial__grid { grid-template-columns: 1fr; gap: 24px; }
	.l-sectorial__photopanel { aspect-ratio: 4 / 3; order: -1; }
}

/* --- timeline (La Solución Larkin) — the site's one authored motion
   moment: the connector "flows" left to right in sequence when the
   section enters view, echoing the brand line "Industrias que fluyen
   mejor." Each step's number and copy activate just behind the flow
   front, staggered by its --i index, instead of popping in independently. --- */
.l-timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 56px; counter-reset: l-step; }
.l-step { position: relative; padding-top: 36px; }
.l-step::before {
	counter-increment: l-step;
	content: counter(l-step);
	position: absolute; top: 0; left: 0;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--l-blue);
	color: #fff;
	font-family: var(--l-font);
	font-weight: 800;
	font-size: 16px;
	display: flex; align-items: center; justify-content: center;
	transform: scale(0.5);
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease, background 0.3s ease;
	transition-delay: calc(var(--i, 0) * 160ms);
}
.l-timeline.is-flowing .l-step::before { transform: scale(1); opacity: 1; background: var(--l-orange-bright); }
/* static track, always visible, so the layout never looks broken pre-JS */
.l-step::after {
	content: "";
	position: absolute; top: 20px; left: 48px; right: -20px;
	height: 2px;
	background: var(--l-gray-mid);
}
.l-step:last-child::after { display: none; }
/* animated fill drawn over the track, one continuous line the flow "front" travels down */
.l-step__line {
	position: absolute; top: 20px; left: 48px; right: -20px;
	height: 2px;
	background: var(--l-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(var(--i, 0) * 160ms + 80ms);
}
.l-step:last-child .l-step__line { display: none; }
.l-timeline.is-flowing .l-step__line { transform: scaleX(1); }
.l-step__label,
.l-step__title,
.l-step__body { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i, 0) * 160ms + 120ms); }
.l-timeline.is-flowing .l-step__label,
.l-timeline.is-flowing .l-step__title,
.l-timeline.is-flowing .l-step__body { opacity: 1; transform: translateY(0); }
.l-step__label { font-family: var(--l-font); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--l-orange-bright); margin: 0 0 8px; }
.l-step__title { font-family: var(--l-font); font-weight: 700; font-size: 17px; color: var(--l-blue-dark); margin: 0 0 8px; line-height: 1.3; }
.l-step__body { font-family: var(--l-font); font-size: 14px; line-height: 1.55; color: var(--l-text-secondary); }
@media (max-width: 1024px) {
	.l-timeline { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
	.l-step::after, .l-step__line { display: none; }
}
@media (max-width: 600px) { .l-timeline { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
	.l-step::before,
	.l-step__line,
	.l-step__label, .l-step__title, .l-step__body {
		transition-delay: 0s !important;
		transform: none !important;
	}
	.l-timeline.is-flowing .l-step::before { transform: none !important; }
}

/* --- cost-total pill row (Sección 8) --- */
.l-pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.l-pill {
	font-family: var(--l-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 999px;
	padding: 10px 20px;
}
.l-pill-row .l-pill-plus { color: rgba(255,255,255,0.4); font-weight: 400; align-self: center; }

/* --- split layout (Ingeniería / Innovación destacadas) --- */
.l-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; margin-top: 8px; }
.l-split__media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; }
.l-split__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.l-split__list { list-style: none; margin: 24px 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.l-split__list li {
	font-family: var(--l-font);
	font-size: 14.5px;
	color: var(--l-text);
	padding-left: 22px;
	position: relative;
	line-height: 1.4;
}
.l-split__list li::before {
	content: "";
	position: absolute; left: 0; top: 7px;
	width: 8px; height: 8px;
	border-radius: 2px;
	background: var(--l-orange-bright);
}
@media (max-width: 900px) {
	.l-split { grid-template-columns: 1fr; }
	.l-split__media { aspect-ratio: 16/9; }
	.l-split__list { grid-template-columns: 1fr; }
}

/* --- logo marquee (Clientes) --- */
.l-marquee { overflow: hidden; margin-top: 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.l-marquee__track { display: flex; gap: 64px; width: max-content; animation: l-marquee-scroll 42s linear infinite; }
.l-marquee:hover .l-marquee__track { animation-play-state: paused; }
.l-marquee__track img { height: 40px; width: auto; object-fit: contain; filter: grayscale(1) opacity(0.55); transition: filter 0.25s ease; }
.l-marquee__track img:hover { filter: grayscale(0) opacity(1); }
@keyframes l-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .l-marquee__track { animation: none; overflow-x: auto; } }

/* --- approvals strip (Home §11 Clientes): one pre-composed real image with
   all 5 client logos already laid out in color, instead of an animated
   per-logo marquee. --- */
.l-approvals { max-width: 1100px; margin: 48px auto 0; }
.l-approvals img { width: 100%; height: auto; display: block; }

/* --- teaser block (Casos / Evidencia, no cases yet) --- */
.l-teaser { max-width: 720px; margin: 0 auto; text-align: center; }
.l-teaser .l-btn-row { justify-content: center; margin-top: 28px; }

/* --- tag grid (Conocimiento) --- */
.l-tag-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.l-tag {
	font-family: var(--l-font);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--l-blue-dark);
	background: #fff;
	border: 1px solid var(--l-gray-mid);
	border-radius: 999px;
	padding: 12px 24px;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.l-tag:hover { border-color: var(--l-blue); color: var(--l-blue); transform: translateY(-2px); }

/* --- coverage chips (Cobertura Latinoamericana) --- */
.l-coverage { display: flex; flex-wrap: wrap; gap: 14px; margin: 40px 0; justify-content: center; }
.l-country {
	font-family: var(--l-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--l-blue-dark);
	background: var(--l-gray-light);
	border-radius: 10px;
	padding: 14px 22px;
	min-width: 120px;
	text-align: center;
}

/* --- final CTA --- */
.l-final-cta { text-align: center; }
/* body .l-sec prefix needed: the base h2.l-h2/p.l-body rules set
   margin-left/right:0 via shorthand at equal-or-higher specificity —
   without matching that prefix here, "margin: auto" silently loses and
   the heading/paragraph sit flush-left in their own centered-looking-
   but-not-actually-centered box (same bug class as the hero image/button/
   paragraph-color fixes above — always match or exceed the base rule's
   specificity when overriding one of these shared text components). */
body .l-sec .l-final-cta .l-h2 { max-width: 700px; margin-left: auto !important; margin-right: auto !important; }
body .l-sec .l-final-cta .l-body { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
.l-final-cta .l-btn-row { justify-content: center; }

/* --- inner-page hero (shorter than Home's full hero) --- */
.l-hero--page { min-height: 52vh; }
.l-hero--page .l-hero__inner { padding-bottom: 64px; }
body .l-sec.l-hero--page h1.l-h1,
body .l-sec .l-hero--page h1.l-h1 { font-size: clamp(34px, 4.6vw, 56px); }
@media (max-width: 767px) { .l-hero--page { min-height: 46vh; } }

/* --- chips / mosaic (Sectores lists) --- */
.l-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.l-chip {
	font-family: var(--l-font);
	font-weight: 600;
	font-size: 14px;
	color: var(--l-blue-dark);
	background: var(--l-gray-light);
	border-radius: 999px;
	padding: 11px 20px;
}
body .l-sec--navy .l-chip { background: rgba(255,255,255,0.1); color: #fff; }

/* --- checklist (Donde intervenimos / Soluciones químicas / Servicios lists) --- */
.l-check-grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
.l-check-grid li {
	font-family: var(--l-font);
	font-size: 15px;
	color: var(--l-text);
	padding-left: 26px;
	position: relative;
	line-height: 1.4;
}
.l-check-grid li::before {
	content: "✓";
	position: absolute; left: 0; top: 0;
	color: var(--l-orange-bright);
	font-weight: 800;
}
@media (max-width: 900px) { .l-check-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .l-check-grid { grid-template-columns: 1fr; } }

/* --- bento mosaic (division content pages — Bebidas first, other divisions
   reuse this same set): a 12-col grid where each content block is a tile of
   its own size instead of one repeated full-width alternating l-split, so a
   division page reads as a varied mosaic rather than a long linear stack. */
.l-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.l-bento .l-span-3 { grid-column: span 3; }
.l-bento .l-span-4 { grid-column: span 4; }
.l-bento .l-span-5 { grid-column: span 5; }
.l-bento .l-span-6 { grid-column: span 6; }
.l-bento .l-span-7 { grid-column: span 7; }
.l-bento .l-span-8 { grid-column: span 8; }
.l-bento .l-span-12 { grid-column: span 12; }
.l-bento__tile { border-radius: 14px; }
.l-bento__tile--card { background: #fff; border: 1px solid var(--l-gray-mid); padding: 32px; }
.l-bento__tile--navy { background: var(--l-navy); color: #fff; padding: 32px; }
.l-bento__tile--navy .l-chip { background: rgba(255,255,255,0.12); color: #fff; }
/* aspect-ratio + absolute img with !important, matching .l-split__media —
   avoids the "hero photo not filling section height" cascade-loss bug this
   project hit more than once. */
.l-bento__photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.l-bento__photo img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
/* A photo tile sitting beside taller content cards in the same row (e.g. the
   CIP photo next to the checklist + CIP-text cards) must fill the row height
   instead of stopping at its own aspect-ratio — aspect-ratio computes a
   definite height that wins over grid stretch in this engine, leaving a gap
   below the photo otherwise. */
.l-bento__photo--fill { aspect-ratio: auto; height: 100%; }
@media (max-width: 900px) { .l-bento__photo--fill { aspect-ratio: 16 / 9; height: auto; } }
.l-bento__title { font-family: var(--l-font); font-weight: 800; font-size: 20px; line-height: 1.28; color: var(--l-blue-dark); margin: 6px 0 12px; text-transform: none; }
.l-bento__tile--navy .l-bento__title { color: #fff; }
.l-bento__body { font-family: var(--l-font); font-size: 14px; line-height: 1.62; color: var(--l-text-secondary); margin: 0; }
.l-bento__check { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.l-bento__check li { font-family: var(--l-font); font-size: 14px; color: var(--l-text); padding-left: 24px; position: relative; line-height: 1.4; }
.l-bento__check li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--l-orange-bright); font-weight: 800; }
.l-bento__tile .l-btn-row { margin-top: 20px; }
/* Membranas-style full-width band inside the bento — reuses the same
   specificity-safety pattern already established for .l-final-cta etc. */
.l-bento__band {
	grid-column: span 12;
	border-radius: 14px;
	background: linear-gradient(90deg, var(--l-navy) 0%, var(--l-blue-dark) 100%);
	padding: 40px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	color: #fff;
}
.l-bento__band-text { max-width: 620px; }
.l-bento__band h3 { font-family: var(--l-font); font-weight: 800; font-size: 24px; margin: 8px 0 0; color: #fff; text-transform: none; }
.l-bento__band p { font-family: var(--l-font); font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 12px 0 0; }
.l-bento__band .l-btn--outline { color: #fff !important; border-color: rgba(255,255,255,0.55) !important; flex-shrink: 0; }
.l-bento__band .l-btn--outline:hover { background: rgba(255,255,255,0.12) !important; }
/* small portfolio-cover thumbnails inside a bento tile (Nosotros "Calidad") */
.l-cover-strip { display: flex; gap: 10px; margin: 20px 0 4px; }
.l-cover-strip img { width: 70px; border-radius: 4px; box-shadow: 0 8px 16px -8px rgba(10,37,64,0.4); }
/* real coverage map image inside a bento tile (Nosotros "Presencia regional") —
   !important needed: a theme-level img{max-width:100%} reset otherwise beats
   this (same specificity-trap class as the hero/button/heading fixes above). */
.l-map-img { max-width: 520px !important; width: 100%; border-radius: 14px; margin-top: 8px; }
@media (max-width: 900px) {
	.l-bento { gap: 16px; }
	.l-bento .l-span-3, .l-bento .l-span-4, .l-bento .l-span-5,
	.l-bento .l-span-6, .l-bento .l-span-7, .l-bento .l-span-8 { grid-column: span 12; }
	.l-bento__photo { aspect-ratio: 16 / 9; }
	.l-bento__tile--card, .l-bento__tile--navy { padding: 26px; }
	.l-bento__band { padding: 30px 26px; }
	.l-cover-strip { justify-content: center; }
}

/* --- sedes / office cards (Contacto) --- */
.l-sedes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.l-sede {
	background: #fff;
	border: 1px solid var(--l-gray-mid);
	border-radius: 12px;
	padding: 26px 24px;
}
.l-sede__country { font-family: var(--l-font); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-orange-bright); margin: 0 0 10px; }
.l-sede__name { font-family: var(--l-font); font-weight: 700; font-size: 16px; color: var(--l-blue-dark); margin: 0 0 10px; }
.l-sede__line { font-family: var(--l-font); font-size: 13.5px; color: var(--l-text-secondary); line-height: 1.55; margin: 0 0 4px; }
.l-sede__line a { color: var(--l-blue); text-decoration: none; }
.l-sede__line a:hover { text-decoration: underline; }
@media (max-width: 1100px) { .l-sedes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .l-sedes { grid-template-columns: 1fr; } }

/* --- two-line quote block (Dos grandes líneas / enfoque intros) --- */
.l-linea { background: #fff; border: 1px solid var(--l-gray-mid); border-radius: 14px; padding: 32px; }
.l-linea__eyebrow { font-family: var(--l-font); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-orange-bright); margin: 0 0 14px; }
.l-linea ul { list-style: none; margin: 16px 0; padding: 0; }
.l-linea ul li { font-family: var(--l-font); font-size: 14.5px; color: var(--l-text); padding: 6px 0 6px 22px; position: relative; border-bottom: 1px solid var(--l-gray-light); }
.l-linea ul li:last-child { border-bottom: none; }
.l-linea ul li::before { content: "—"; position: absolute; left: 0; color: var(--l-orange-bright); }
.l-linea__claim { font-family: var(--l-font); font-weight: 700; font-size: 16px; color: var(--l-blue-dark); margin: 16px 0 0; }
.l-dos-lineas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
@media (max-width: 900px) { .l-dos-lineas { grid-template-columns: 1fr; } }

/* --- process/como-trabajamos steps (reuse timeline pattern but 6 short defs) --- */
.l-como { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 48px; }
.l-como__item { text-align: left; }
.l-como__num { font-family: var(--l-font); font-weight: 800; font-size: 13px; color: var(--l-orange-bright); margin: 0 0 8px; }
.l-como__title { font-family: var(--l-font); font-weight: 700; font-size: 16px; color: var(--l-blue-dark); margin: 0 0 8px; }
.l-como__body { font-family: var(--l-font); font-size: 13.5px; line-height: 1.5; color: var(--l-text-secondary); }
@media (max-width: 1024px) { .l-como { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; } }
@media (max-width: 600px) { .l-como { grid-template-columns: 1fr; } }

/* --- portfolio download cards (Productos) --- */
.l-portfolios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.l-portfolio {
	background: #fff;
	border: 1px solid var(--l-gray-mid);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
}
.l-portfolio:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(4,109,181,0.28); }
.l-portfolio__cover-wrap { background: var(--l-navy); padding: 20px 20px 0; display: flex; justify-content: center; }
.l-portfolio__cover {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 1224 / 1584;
	object-fit: cover;
	border-radius: 4px 4px 0 0;
	box-shadow: 0 12px 28px -10px rgba(0,0,0,0.45);
}
.l-portfolio__content { padding: 26px 26px 30px; display: flex; flex-direction: column; flex-grow: 1; }
.l-portfolio__sub { font-family: var(--l-font); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-orange-bright); margin: 0 0 10px; }
.l-portfolio__title { font-family: var(--l-font); font-weight: 700; font-size: 19px; color: var(--l-blue-dark); margin: 0 0 12px; }
.l-portfolio__body { font-family: var(--l-font); font-size: 14.5px; line-height: 1.55; color: var(--l-text-secondary); margin: 0 0 22px; flex-grow: 1; }
@media (max-width: 900px) { .l-portfolios { grid-template-columns: 1fr; } }

/* --- division landing cards (bigger than home's division cards) --- */
.l-divlanding { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.l-divlanding .l-division { min-height: 420px; }
/* Dirección B: una sola línea compacta de aplicaciones (primera en blanco/
   negrita, el resto separado por "·") en vez del cúmulo de chips envueltos
   que antes competía visualmente con el título y el cuerpo. */
.l-divlanding .l-division__apps { font-family: var(--l-font); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.65); margin: 0 0 18px; line-height: 1.5; }
.l-divlanding .l-division__apps b { color: #fff; font-weight: 700; }
@media (max-width: 900px) { .l-divlanding { grid-template-columns: 1fr; } }

/* --- solutions category cards (Soluciones page) --- */
.l-sol-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.l-sol-card {
	background: #fff;
	border: 1px solid var(--l-gray-mid);
	border-radius: 12px;
	padding: 26px 28px;
	text-decoration: none;
	display: block;
	transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.l-sol-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(4,109,181,0.28); border-color: var(--l-blue); }
.l-sol-card__title { font-family: var(--l-font); font-weight: 700; font-size: 17px; color: var(--l-blue-dark); margin: 0 0 8px; }
.l-sol-card__title::after { content: " →"; color: var(--l-orange-bright); }
.l-sol-card__body { font-family: var(--l-font); font-size: 14px; line-height: 1.5; color: var(--l-text-secondary); }
@media (max-width: 767px) { .l-sol-grid { grid-template-columns: 1fr; } }

/* --- knowledge/conocimiento article cards --- */
.l-know-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.l-know-card { background: #fff; border: 1px solid var(--l-gray-mid); border-radius: 12px; overflow: hidden; }
.l-know-card__tax { display: block; padding: 20px 22px 0; font-family: var(--l-font); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-orange-bright); }
.l-know-card__title { font-family: var(--l-font); font-weight: 700; font-size: 17px; color: var(--l-blue-dark); padding: 8px 22px 0; margin: 0; }
.l-know-card__body { font-family: var(--l-font); font-size: 14px; line-height: 1.5; color: var(--l-text-secondary); padding: 10px 22px 24px; }
@media (max-width: 900px) { .l-know-grid { grid-template-columns: 1fr; } }

/* --- generic content page utility --- */
.l-page-content ul.l-plain { list-style: none; margin: 20px 0; padding: 0; }
.l-page-content ul.l-plain li { font-family: var(--l-font); font-size: 15px; color: var(--l-text-secondary); padding: 5px 0 5px 20px; position: relative; }
.l-page-content ul.l-plain li::before { content: "–"; position: absolute; left: 0; color: var(--l-orange-bright); }

/* --- contact form (Contacto page, wraps the CF7 shortcode output) --- */
.l-contact-form-wrap { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--l-gray-mid); border-radius: 16px; padding: 40px; }
.l-contact-form-wrap .l-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 4px; }
.l-contact-form-wrap .wpcf7-form-control-wrap { display: block; margin-bottom: 18px; }
.l-contact-form-wrap input[type="text"],
.l-contact-form-wrap input[type="email"],
.l-contact-form-wrap input[type="tel"],
.l-contact-form-wrap select,
.l-contact-form-wrap textarea {
	width: 100%;
	font-family: var(--l-font);
	font-size: 15px;
	color: var(--l-text);
	background: var(--l-gray-light);
	border: 1px solid var(--l-gray-mid);
	border-radius: 8px;
	padding: 13px 16px;
	box-sizing: border-box;
}
.l-contact-form-wrap input:focus,
.l-contact-form-wrap select:focus,
.l-contact-form-wrap textarea:focus { outline: 2px solid var(--l-blue); outline-offset: 1px; }
.l-contact-form-wrap textarea { min-height: 110px; resize: vertical; }
.l-contact-form-wrap .wpcf7-acceptance { display: block; font-size: 13.5px; color: var(--l-text-secondary); margin: 8px 0 20px; }
.l-contact-form-wrap input[type="submit"] {
	font-family: var(--l-font) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	background: var(--l-orange-bright) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 15px 34px !important;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.l-contact-form-wrap input[type="submit"]:hover { background: var(--l-orange) !important; transform: translateY(-2px); }
.l-contact-form-wrap .wpcf7-not-valid-tip { color: #c0392b; font-size: 12.5px; margin-top: 4px; }
.l-contact-form-wrap .wpcf7-response-output { border-radius: 8px; margin-top: 20px; font-family: var(--l-font); font-size: 14px; }
.l-form-thanks { display: none; text-align: center; max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--l-gray-mid); border-radius: 16px; padding: 48px 40px; }
.l-form-thanks .l-btn-row { justify-content: center; }
@media (max-width: 700px) {
	.l-contact-form-wrap { padding: 26px 22px; }
	.l-contact-form-wrap .l-form-row { grid-template-columns: 1fr; }
}

/* --- scroll reveal (fade/slide, respects prefers-reduced-motion) --- */
.l-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.l-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.l-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   FOOTER — Larkin blue background, white text/icons/links throughout
   (theme's own Bridge footer markup: footer_top_holder/footer_bottom_holder,
   column1-4, qode_icon_font_awesome social icons — restyled, not rebuilt).
   ========================================================================== */
/* Bridge's "uncover" reveal-footer effect pins the footer with
   position:fixed and pads the content column with a JS-measured
   margin-bottom equal to the footer's height, so the footer "reveals"
   itself as you scroll past that padding. Growing the footer's real
   content (this whole redesign pass) desyncs that measurement — any
   late layout shift after the JS runs (web font swap, image reflow)
   leaves the padding shorter than the now-taller footer, and the fixed
   footer overlaps real content. Simplest robust fix: turn the reveal
   effect off entirely and let the footer sit in normal document flow. */
body footer.uncover { position: static !important; }
body .content.content_top_margin { margin-bottom: 0 !important; }

body footer.uncover,
body .footer_top_holder,
body .footer_bottom_holder {
	background: var(--l-blue) !important;
}
body .footer_top_holder,
body .footer_bottom_holder { color: #fff; }
body .footer_bottom_holder { border-top: 1px solid rgba(255,255,255,0.15); }
body .footer_top_holder a,
body .footer_bottom_holder a { color: #fff; }
body .footer_top_holder a:hover,
body .footer_bottom_holder a:hover { color: var(--l-orange-bright); }
body .footer_top_holder p,
body .footer_top_holder li,
body .footer_top_holder strong { color: #fff; }
body .footer_top_holder .qode_icon_font_awesome,
body .footer_top_holder .simple_social { color: #fff !important; }
body .footer_top_holder .q_social_icon_holder:hover .qode_icon_font_awesome { color: var(--l-orange-bright) !important; }

.l-footer-col1 { max-width: 320px; }
.l-footer-logo { display: block; height: 40px; width: auto; margin: 0 0 22px; }
.l-footer-tagline { font-family: var(--l-font); font-weight: 700; font-size: 17px; color: #fff; margin: 0 0 10px; }
.l-footer-mission { font-family: var(--l-font); font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.8); margin: 0 0 20px; }
.l-footer-line { font-family: var(--l-font); font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0 0 6px; }
.l-footer-line strong { font-weight: 700; }

body .footer_top_holder .column2 strong,
body .footer_top_holder .column3 strong,
body .footer_top_holder .column4 strong {
	display: block; color: #fff; font-family: var(--l-font); font-weight: 700; font-size: 14px;
	letter-spacing: 0.03em; margin-bottom: 16px;
}
body .footer_top_holder .column2 ul,
body .footer_top_holder .column3 ul,
body .footer_top_holder .column4 ul { list-style: none; margin: 0; padding: 0; }
body .footer_top_holder .column2 li,
body .footer_top_holder .column3 li,
body .footer_top_holder .column4 li { margin-bottom: 11px; }
body .footer_top_holder .column2 a,
body .footer_top_holder .column3 a,
body .footer_top_holder .column4 a {
	font-family: var(--l-font); font-size: 13.5px; color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.15s ease;
}
body .footer_top_holder .column2 a:hover,
body .footer_top_holder .column3 a:hover,
body .footer_top_holder .column4 a:hover { color: var(--l-orange-bright); }

/* ==========================================================================
   Coverage network diagram (Cobertura Latinoamericana) — a hub-and-spoke
   diagram from Casa Matriz, not an attempted geographic map. Spokes flow in
   the same left-to-right-of-the-brand-line style as the Home timeline, and
   each node fades in in sequence via its --i custom property.
   ========================================================================== */
.l-coverage-map { max-width: 560px; margin: 48px auto 0; }
.l-coverage-map__svg { width: 100%; height: auto; overflow: visible; }
.l-coverage-map__spoke {
	stroke: var(--l-gray-mid);
	stroke-width: 2;
}
.l-coverage-map.is-visible .l-coverage-map__spoke { stroke: var(--l-blue); }
.l-coverage-map__node circle {
	fill: #fff;
	stroke: var(--l-blue);
	stroke-width: 2.5;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0);
	transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(var(--i, 0) * 90ms + 150ms);
}
.l-coverage-map.is-visible .l-coverage-map__node circle { transform: scale(1); }
.l-coverage-map__node text {
	font-family: var(--l-font);
	font-weight: 700;
	font-size: 15px;
	fill: var(--l-blue-dark);
	opacity: 0;
	transition: opacity 0.4s ease;
	transition-delay: calc(var(--i, 0) * 90ms + 280ms);
}
.l-coverage-map.is-visible .l-coverage-map__node text { opacity: 1; }
.l-coverage-map__hub circle { fill: var(--l-orange-bright); stroke: none; }
.l-coverage-map__hub-label { font-family: var(--l-font); font-weight: 800; font-size: 17px; fill: #fff; }
.l-coverage-map__hub-tag { font-family: var(--l-font); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; fill: rgba(255,255,255,0.85); }
body .l-sec--navy .l-coverage-map__spoke { stroke: rgba(255,255,255,0.25); }
body .l-sec--navy .l-coverage-map.is-visible .l-coverage-map__spoke { stroke: var(--l-orange-bright); }
body .l-sec--navy .l-coverage-map__node circle { fill: var(--l-navy); stroke: #fff; }
body .l-sec--navy .l-coverage-map__node text { fill: #fff; }
@media (prefers-reduced-motion: reduce) {
	.l-coverage-map__node circle { transform: scale(1) !important; transition-delay: 0s !important; }
	.l-coverage-map__node text { opacity: 1 !important; transition-delay: 0s !important; }
}
@media (max-width: 480px) {
	.l-coverage-map__node text { font-size: 12px; }
	.l-coverage-map__hub-label { font-size: 14px; }
}

/* ==========================================================================
   Site header — "Dirección B / Editorial" from the nav redesign exploration.
   Big type, a gradient-underline state indicator, a full-width hairline
   signature, pill outline CTA. Replaces Bridge's default .page_header
   entirely (hidden via wp_head, see inc/header-footer.php).
   ========================================================================== */
header.l-site-header {
	position: sticky !important;
	top: 0;
	/* Bridge's own `.wrapper` (a body-level sibling of this header, since
	   it's injected via wp_body_open before the theme markup starts) sets
	   z-index:1000 with position:relative — that beats any lower value
	   here at the body-level stacking comparison, which only becomes
	   visible once .l-mega's absolute-positioned overflow reaches into
	   the hero section below. Must stay above 1000. */
	z-index: 2000;
	background: #fff;
	border-bottom: 1px solid var(--l-text);
}
body.admin-bar header.l-site-header { top: 32px !important; }
@media (max-width: 782px) {
	body.admin-bar header.l-site-header { top: 46px !important; }
}
.l-site-header__bar {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.l-site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.l-site-header__logo img { height: 54px; width: auto; display: block; } /* +50% (was 36px), per user request 2026-09-07 */

.l-nav { display: flex; align-items: center; gap: 36px; height: 100%; flex: 1; justify-content: center; }
.l-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--l-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--l-text);
	text-decoration: none;
	padding: 4px 0;
	white-space: nowrap;
}
.l-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--l-orange), var(--l-orange-bright));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.l-nav__link:hover::after,
.l-nav__link.is-active::after,
.l-nav__link.is-open::after { transform: scaleX(1); }
.l-nav__link.is-active,
.l-nav__link:hover { font-weight: 700; }
.l-nav__caret { flex-shrink: 0; color: var(--l-text-secondary); transition: transform 0.25s ease; }
.l-nav__link.is-open .l-nav__caret { transform: rotate(180deg); color: var(--l-orange-bright); }

.l-site-header__cta-group { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.l-nav-icon-btn {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1.5px solid var(--l-gray-mid);
	color: var(--l-text-secondary);
	transition: border-color 0.2s ease, color 0.2s ease;
}
.l-nav-icon-btn:hover { border-color: var(--l-orange-bright); color: var(--l-orange-bright); }
.l-btn--sm.l-btn--outline { padding: 11px 22px; font-size: 13.5px; border-color: var(--l-text); color: var(--l-text); }
.l-btn--sm.l-btn--outline:hover { background: var(--l-text); color: #fff; }

.l-nav-toggle { display: none; }

/* --- Divisiones mega-menu --- */
.l-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-bottom: 1px solid var(--l-gray-mid);
	box-shadow: 0 24px 48px -24px rgba(10,37,64,0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.25s;
}
.l-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.l-mega__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 40px 8px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.l-mega__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px 32px;
	border-right: 1px solid var(--l-gray-mid);
	border-bottom: 1px solid var(--l-gray-mid);
	text-decoration: none;
}
.l-mega__item:nth-child(3n) { border-right: none; }
.l-mega__item:nth-last-child(-n+3) { border-bottom: none; }
.l-mega__item::after {
	content: "";
	position: absolute;
	left: 32px;
	right: 32px;
	bottom: -1px;
	height: 3px;
	background: linear-gradient(90deg, var(--l-orange), var(--l-orange-bright));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.l-mega__item:hover::after { transform: scaleX(1); }
.l-mega__title { font-family: var(--l-font); font-size: 17px; font-weight: 700; color: var(--l-text); }
.l-mega__desc { font-family: var(--l-font); font-size: 13.5px; line-height: 1.5; color: var(--l-text-secondary); }

@media (max-width: 1100px) {
	.l-nav { gap: 22px; }
	.l-site-header__bar { padding: 0 28px; }
}

/* --- Mobile: hide desktop nav/CTA, show hamburger --- */
@media (max-width: 900px) {
	.l-site-header__bar { height: 76px; padding: 0 20px; }
	.l-site-header__logo img { height: 42px; } /* +50% (was 28px), matches desktop bump */
	.l-nav, .l-site-header__cta-group { display: none; }
	/* Pill button with a visible border + "Menú"/"Cerrar" label — plain
	   hamburger lines with no text read as decoration, not a button, to a
	   lot of visitors; the border + word makes it unmistakably tappable. */
	.l-nav-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		background: #fff;
		border: 1.5px solid var(--l-navy);
		border-radius: 999px;
		padding: 9px 16px;
		cursor: pointer;
	}
	.l-nav-toggle__lines {
		display: flex;
		flex-direction: column;
		gap: 4px;
		flex-shrink: 0;
	}
	.l-nav-toggle__lines span {
		display: block;
		width: 16px;
		height: 2px;
		background: var(--l-navy);
		border-radius: 2px;
		transition: transform 0.25s ease, opacity 0.2s ease;
	}
	.l-nav-toggle.is-open .l-nav-toggle__lines span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
	.l-nav-toggle.is-open .l-nav-toggle__lines span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
	.l-nav-toggle__label { font-family: var(--l-font); font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--l-navy); }
	.l-nav-toggle__label-text--open { display: none; }
	.l-nav-toggle.is-open .l-nav-toggle__label-text--closed { display: none; }
	.l-nav-toggle.is-open .l-nav-toggle__label-text--open { display: inline; }
}

html.l-no-scroll, html.l-no-scroll body { overflow: hidden; }

/* --- Mobile drawer --- */
.l-mobile-drawer {
	position: fixed;
	inset: 0;
	top: 76px;
	background: #fff;
	z-index: 1999; /* same body-level stacking-context reason as .l-site-header above */
	display: none;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
	overflow-y: auto;
}
.l-mobile-drawer.is-open { display: flex; transform: translateX(0); }
.l-mobile-drawer__nav { flex: 1; padding-top: 8px; }
.l-mobile-drawer__item { border-bottom: 1px solid var(--l-gray-mid); }
.l-mobile-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
	font-family: var(--l-font);
	font-size: 18px;
	font-weight: 600;
	color: var(--l-text);
	text-decoration: none;
	min-height: 44px;
}
.l-mobile-drawer__caret { flex-shrink: 0; color: var(--l-orange-bright); transition: transform 0.25s ease; }
.l-mobile-drawer__item--parent.is-expanded .l-mobile-drawer__caret { transform: rotate(180deg); }
.l-mobile-drawer__submenu {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s cubic-bezier(0.16,1,0.3,1);
}
.l-mobile-drawer__item--parent.is-expanded .l-mobile-drawer__submenu { grid-template-rows: 1fr; }
.l-mobile-drawer__submenu-inner { overflow: hidden; min-height: 0; }
.l-mobile-drawer__sublink {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 24px 11px 40px;
	font-family: var(--l-font);
	font-size: 15px;
	color: var(--l-text-secondary);
	text-decoration: none;
	border-top: 1px solid var(--l-gray-mid);
}
.l-mobile-drawer__cta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 24px 26px;
	border-top: 1px solid var(--l-gray-mid);
}
.l-nav-icon-btn--lg { width: 48px; height: 48px; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
	.l-nav__link::after,
	.l-mega,
	.l-mega__item::after,
	.l-mobile-drawer,
	.l-mobile-drawer__submenu,
	.l-nav-toggle__lines span,
	.l-nav__caret,
	.l-mobile-drawer__caret { transition-duration: 0.01ms !important; }
}

/* ============================================
   WhatsApp Click-to-Chat — rediseño para invitar más a escribir
   Plugin: click-to-chat-for-whatsapp (clases .ht-ctc / .own-img)
   ============================================ */
.ht-ctc-chat {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #25D366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 28px rgba(37, 211, 102, 0.35), 0 3px 10px rgba(10, 37, 64, 0.18);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.ht-ctc-chat:hover {
	transform: scale(1.08);
	box-shadow: 0 12px 36px rgba(37, 211, 102, 0.45), 0 4px 14px rgba(10, 37, 64, 0.22);
}
.ht-ctc-chat .own-img {
	height: 28px !important;
	width: 28px !important;
	filter: brightness(0) invert(1);
}
/* anillo de pulso para llamar la atención sin ser invasivo */
.ht-ctc-chat::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #25D366;
	z-index: -1;
	animation: l-ctc-pulse 2.6s ease-out infinite;
}
@keyframes l-ctc-pulse {
	0%   { transform: scale(1);   opacity: 0.55; }
	100% { transform: scale(1.9); opacity: 0; }
}
/* burbuja de invitación, aparece unos segundos tras cargar y se retira sola */
.ht-ctc-chat::after {
	content: "¿Hablamos?";
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	background: var(--l-navy);
	color: var(--l-white);
	font-family: var(--l-font);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	padding: 10px 18px;
	border-radius: 24px;
	box-shadow: 0 6px 20px rgba(10, 37, 64, 0.25);
	opacity: 0;
	pointer-events: none;
	animation: l-ctc-bubble-in 0.5s ease 1.2s forwards, l-ctc-bubble-out 0.5s ease 5.5s forwards;
}
@keyframes l-ctc-bubble-in {
	from { opacity: 0; transform: translateY(-50%) translateX(10px); }
	to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@keyframes l-ctc-bubble-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@media (max-width: 767px) {
	.ht-ctc-chat { width: 54px; height: 54px; }
	.ht-ctc-chat .own-img { height: 24px !important; width: 24px !important; }
	.ht-ctc-chat::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ht-ctc-chat::before,
	.ht-ctc-chat::after { animation: none; opacity: 0; }
}

/* ============================================
   Cookie consent (CookieYes) — alineado a marca Larkin
   Plugin: cookie-law-info (clases .cky-*)
   ============================================ */
.cky-consent-container {
	font-family: var(--l-font) !important;
}
.cky-consent-bar {
	background: var(--l-white) !important;
	border: none !important;
	border-top: 4px solid var(--l-blue) !important;
	border-radius: 18px !important;
	box-shadow: 0 20px 60px rgba(10, 37, 64, 0.22), 0 4px 16px rgba(10, 37, 64, 0.1) !important;
	padding: 28px 26px !important;
}
.cky-title {
	color: var(--l-navy) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	margin-bottom: 8px !important;
}
.cky-notice-des,
.cky-notice-des * {
	color: var(--l-text-secondary) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}
.cky-notice-btn-wrapper {
	gap: 10px !important;
	margin-top: 18px !important;
}
.cky-btn {
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	padding: 11px 22px !important;
	border-width: 1.5px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}
.cky-btn-accept {
	background: var(--l-blue) !important;
	border-color: var(--l-blue) !important;
	color: var(--l-white) !important;
	box-shadow: 0 6px 18px rgba(4, 109, 181, 0.35) !important;
}
.cky-btn-accept:hover {
	background: var(--l-blue-dark) !important;
	border-color: var(--l-blue-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(4, 109, 181, 0.45) !important;
}
.cky-btn-reject,
.cky-btn-customize {
	background: transparent !important;
	color: var(--l-navy) !important;
	border-color: var(--l-gray-mid) !important;
}
.cky-btn-reject:hover,
.cky-btn-customize:hover {
	background: var(--l-gray-light) !important;
	border-color: var(--l-navy) !important;
}
.cky-btn-revisit-wrapper {
	background: var(--l-blue) !important;
	box-shadow: 0 6px 20px rgba(4, 109, 181, 0.35) !important;
}
.cky-preference-center {
	border-radius: 18px !important;
	box-shadow: 0 24px 70px rgba(10, 37, 64, 0.3) !important;
}
.cky-preference-header {
	border-bottom: 1px solid var(--l-gray-mid) !important;
}
.cky-preference-title {
	color: var(--l-navy) !important;
	font-weight: 700 !important;
}
@media (max-width: 480px) {
	.cky-consent-bar {
		max-width: calc(100% - 24px) !important;
		border-radius: 14px !important;
		padding: 22px 18px !important;
	}
}