/* aga-growth-dev - plain CSS, no build step.
   Design tokens first: a restyle is a few values, not a find-replace. */
:root {
	/* DESIGN.md is the source of truth for this block: warm paper base,
	   near-black foreground, deep navy structure, lime as a controlled accent.
	   A restyle is a few values here, not a find-replace. */
	--ink: #101211;
	--body: #101211;
	--muted: #4d534f;
	--faint: #7a807c;
	/* Navy replaces the old blue family: no fintech cyan anywhere. */
	--blue: #0b2938;
	--blue-dark: #0a222f;
	--blue-deep: #081b25;
	--blue-soft: #e8ece9;
	--surface: #f6f3ec;
	--surface-alt: #f4f0e7;
	--border: #d8d7d0;
	--border-soft: #e5e2d9;
	--footer-bg: #101211;
	--navy-1: #0b2938;
	--navy-2: #0d3145;
	--navy-3: #0f3a51;
	--cream-1: #f4f0e7;
	--cream-2: #f6f3ec;
	/* Editorial palette, verbatim from DESIGN.md. */
	--paper: #f4f0e7;
	--hero-dark: #101211;
	--hero-navy: #0b2938;
	--hero-lime: #a8cb18;
	--hero-sage: #879e91;
	--hero-neutral: #d8d7d0;
	--hero-gold: #b28a35;
	--shadow: rgba(11, 41, 56, 0.28);
	--shadow-strong: rgba(11, 41, 56, 0.42);
	/* Radii */
	--radius-sm: 8px;
	--radius: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;
	/* Spacing scale */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-4xl: 96px;
	--space-5xl: 128px;
	--space-6xl: 160px;
	/* One family only: identity comes from scale, weight and space. */
	--font-display: "Inter", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--wrap: 1260px;
	--wrap-wide: 1400px;
	/* Real header height, consumed by the hero so it fills what is left. */
	--navbar-height: 114px;
	/* Altura mínima común de los heros de página interior (contacto, servicios). */
	--page-hero-min: 558px;
	/* How much of the section below the hero stays above the fold. */
	--hero-peek: 210px;
	/* Hero height: the viewport minus the peek, but never taller than this -
	   past a laptop the composition holds instead of stretching with the
	   monitor, which is what made the artwork spill into the next section. */
	--hero-h: clamp(520px, calc(100svh - var(--hero-peek)), 860px);
}

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font: 400 16px/1.55 var(--font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 650;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}

a { color: inherit; text-decoration: none; transition: color 0.3s; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

::selection { background: var(--hero-lime); color: var(--ink); }

/* ------------------------------------------------------------- buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0 30px;
	min-height: 54px;
	max-width: 100%;
	border: 0;
	border-radius: var(--radius);
	font: 600 0.875rem/1 var(--font-body);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s;
	box-sizing: border-box;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--hero-navy); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

/* ---------------------------------------------------------- typography */
.eyebrow {
	display: block;
	margin-bottom: 1rem;
	font: 600 0.75rem/1.5 var(--font-body);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hero-navy);
}
.heading {
	font-size: clamp(2.25rem, 4.5vw, 4.5rem);
	font-weight: 650;
	line-height: 0.98;
	letter-spacing: -0.035em;
}
.lede { color: var(--muted); max-width: 640px; font-size: 1.125rem; line-height: 1.55; letter-spacing: -0.01em; }

/* ------------------------------------------------------------ sections */
.section { position: relative; padding: clamp(80px, 10vw, 120px) 0; }
.section-white { background: var(--paper); }
.section-cream { background: var(--surface); }
.section-subtle { background: var(--surface); }
.section-inner { width: min(100% - var(--space-4xl), 1440px); margin-inline: auto; position: relative; z-index: 1; }
.section-head { text-align: center; max-width: 800px; margin: 0 auto 3rem; display: flex; flex-direction: column; align-items: center; }
.section-head .lede { margin-top: 1rem; }

/* -------------------------------------------------------------- header */
/* The navigation content is the project's own - this only restyles it with the
   DESIGN.md tokens. Lightweight over the hero, a hairline once scrolled. */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.site-header.scrolled {
	background: rgba(244, 240, 231, 0.92);
	backdrop-filter: blur(10px);
	border-bottom-color: var(--border);
}
/* Inner pages with a dark cover hero invert the bar until the visitor scrolls. */
.has-dark-hero .site-header:not(.scrolled) { background: transparent; border-bottom-color: transparent; }
/* Same container as the hero and the sections, so everything lines up. */
.header-inner {
	width: min(100% - var(--space-4xl), 1440px);
	margin-inline: auto;
	padding: 18px 0;
	/* Logo | centred nav | actions - the reference layout. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-2xl);
	box-sizing: border-box;
}
.site-logo { display: flex; align-items: center; }
.site-logo img { height: 78px; width: auto; }
.has-dark-hero .site-header:not(.scrolled) .site-logo img { filter: brightness(0) invert(1); }

/* One cohesive group, never spread across the viewport. */
.nav-menu { display: flex; align-items: center; justify-content: center; gap: var(--space-xl); flex-wrap: nowrap; }

/* Right-hand group: pill CTA + round menu control. */
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); }
.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	height: 54px;
	padding: 0 26px;
	border-radius: var(--radius-pill);
	background: var(--ink);
	color: #fff;
	font: 500 0.9375rem/1.2 var(--font-body);
	letter-spacing: -0.01em;
	white-space: nowrap;
	transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.header-cta:hover { background: var(--hero-navy); transform: translateY(-2px); }
.header-cta:focus-visible { outline: 2px solid var(--hero-navy); outline-offset: 3px; }
.header-cta svg { flex-shrink: 0; }
.nav-link {
	position: relative;
	display: flex;
	align-items: center;
	white-space: nowrap;
	min-height: 44px;
	padding: 8px 0;
	font: 500 0.9375rem/1.2 var(--font-body);
	letter-spacing: -0.01em;
	color: var(--ink);
}
.nav-link::after {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--hero-lime);
	transition: width 0.3s var(--ease-out);
}
.nav-link:hover { color: var(--hero-navy); }
.nav-link:hover::after { width: 100%; }
.nav-link:focus-visible, .nav-dropdown-toggle:focus-visible, .mobile-toggle:focus-visible {
	outline: 2px solid var(--hero-navy);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}
.has-dark-hero .site-header:not(.scrolled) .nav-link { color: rgba(255, 255, 255, 0.85); }
.has-dark-hero .site-header:not(.scrolled) .nav-link:hover { color: #fff; }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
	cursor: pointer;
	background: none;
	border: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 0;
	font: 500 0.9375rem/1.2 var(--font-body);
	letter-spacing: -0.01em;
	color: inherit;
	white-space: nowrap;
}
.nav-dropdown-toggle svg { width: 12px; height: 12px; transition: transform 0.3s; }
.nav-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: var(--space-sm);
	min-width: 240px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: 0 18px 40px var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-10px);
	transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
	overflow: hidden;
	z-index: 200;
}
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1.25rem;
	font: 500 0.9375rem/1.2 var(--font-body);
	letter-spacing: -0.01em;
	color: var(--ink);
	border-bottom: 1px solid var(--border-soft);
}
.nav-dropdown-item:last-child { border-bottom: 0; }
.nav-dropdown-item:hover { background: var(--paper); color: var(--hero-navy); }

/* Always visible, at every width: it opens the full menu. */
.mobile-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding: 0;
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	background: var(--ink);
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background 0.3s var(--ease-out);
}
.mobile-toggle:hover { background: var(--hero-navy); }
.mobile-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: 0.3s; }
.has-dark-hero .site-header:not(.scrolled) .mobile-toggle span { background: #fff; }
.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, 5px); }
/* Hamburger only on mobile/tablet; desktop uses the top nav that never collapses. */
@media (min-width: 1025px) {
	.mobile-toggle { display: none; }
}

/* Mobile panel: same paper canvas as the page, not a separate dark world. */
.mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 99;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: 5rem 2rem 2rem;
	background: var(--paper);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	overflow-y: auto;
	box-sizing: border-box;
}
.mobile-nav.open { opacity: 1; pointer-events: all; }
.mobile-nav-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	color: var(--ink);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	z-index: 10;
}
.mobile-nav-close:hover { background: var(--surface); color: var(--hero-navy); }
.mobile-nav-close:focus-visible { outline: 2px solid var(--hero-navy); outline-offset: 2px; }
.mobile-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 320px;
	min-height: 56px;
	padding: 1rem 2rem;
	border-radius: var(--radius-pill);
	font: 600 1.25rem/1.2 var(--font-body);
	letter-spacing: -0.02em;
	color: var(--ink);
	text-align: center;
	box-sizing: border-box;
}
.mobile-nav a:hover { color: var(--hero-navy); background: var(--surface); }
.mobile-nav a:focus-visible { outline: 2px solid var(--hero-navy); outline-offset: 2px; }

/* ---------------------------------------------------------------- hero */
/* Editorial hero - HERO.md is the spec. Headline first, illustration second,
   generous negative space, and the navbar above is never restyled from here. */
.hero {
	position: relative;
	/* The header is fixed, so the hero reserves its height in the top padding
	   instead of sliding underneath it. min-height stays a full viewport: the
	   content area below the bar is what is left over. */
	/* Height is expressed as "leave this much of the next section visible"
	   rather than a percentage: --hero-peek is enough room for the section's
	   top padding, its 01 - HOY index and the first lines of its headline, so
	   the fold always shows what comes next. The floor keeps short viewports
	   sane. */
	min-height: var(--hero-h);
	display: flex;
	align-items: center;
	/* Never clip: the illustration's long lower shadows extend past its box,
	   and z-index keeps that spill above the next section's background. */
	overflow: visible;
	z-index: 1;
	background: var(--paper);
	box-sizing: border-box;
	padding-top: calc(var(--navbar-height) + clamp(32px, 5vh, 72px));
	padding-bottom: clamp(32px, 4vw, 56px);
}
.hero-inner {
	position: relative;
	z-index: 1;
	width: min(100% - var(--space-4xl), 1440px);
	margin-inline: auto;
	box-sizing: border-box;
	display: grid;
	/* Deliberately not 50/50: the visual gets the wider column. */
	grid-template-columns: minmax(0, 39fr) minmax(0, 4fr) minmax(0, 57fr);
	align-items: center;
	gap: 0;
}
/* Text always sits above the artwork, whatever the artwork's size. */
.hero-copy { grid-column: 1; max-width: 570px; position: relative; z-index: 2; }
.hero-visual {
	grid-column: 3;
	min-width: 0;
	/* The box keeps the hero's height honest; the artwork inside it is free to
	   be bigger than the box and spill past it. */
	position: relative;
	z-index: 0;
	height: calc(var(--hero-h) - var(--navbar-height) - var(--space-xl));
	min-height: 380px;
}
.hero-visual picture { display: contents; }

.hero-title {
	max-width: 570px;
	margin: 0;
	/* Modern sans, not the display serif: the spec is explicit about this. */
	font-family: var(--font-body);
	font-size: clamp(2.48rem, 5.13vw, 5.77rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.045em;
	color: var(--hero-dark);
	text-wrap: balance;
}
.hero-title span { display: block; }
.hero-title-future { color: var(--hero-lime); }

.hero-rule { display: flex; align-items: center; gap: 0.6rem; margin-top: var(--space-md); }
.hero-rule-line { display: block; width: clamp(160px, 12.8vw, 208px); height: 1px; background: var(--hero-dark); }
.hero-rule-mark { font: 700 1.2rem/1 var(--font-body); color: var(--hero-lime); }

.hero-text {
	max-width: 390px;
	margin: var(--space-md) 0 0;
	/* 16px is the floor: the block shrinks, readability does not. */
	font-size: 1.0625rem;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var(--hero-dark);
}

.hero-cta-group { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: var(--space-lg); }
.hero-cta-group .btn {
	/* 48px: 20% smaller than the page default and still a comfortable target. */
	min-height: 48px;
	padding: 0 24px;
	border-radius: var(--radius-pill);
	font-size: 0.9375rem;
	letter-spacing: -0.005em;
	text-transform: none;
}
/* Lime is an accent, never the primary button. */
.hero-cta-group .btn-primary { background: var(--hero-dark); color: #fff; box-shadow: none; }
.hero-cta-group .btn-primary:hover { background: var(--hero-navy); transform: translateY(-2px); }
.hero-cta-group .btn-outline { background: transparent; color: var(--hero-dark); border: 1px solid var(--hero-dark); }
.hero-cta-group .btn-outline:hover { background: var(--hero-dark); color: var(--paper); transform: translateY(-2px); }
.hero-cta-group .btn svg { flex-shrink: 0; }
.hero-cta-group .btn .arrow { margin-left: 0.4em; }

.hero-illustration {
	/* Out of flow, so it cannot push the hero taller and hide what is meant to
	   peek below the fold, and sized by width rather than by its box: it stops
	   growing at the container's own limit instead of following the monitor.
	   The spill goes down, into the next section's empty top padding. */
	position: absolute;
	right: -2%;
	/* How far the artwork sinks below the hero. A percentage of .hero-visual's
	   height, which is itself clamped (--hero-h caps at 860px), so the drop
	   lands between 150px on a short laptop and 286px on a tall monitor -
	   23-40% of the illustration's own height, measured from 1180x820 through
	   1920x1080. What has to stay true is the other number: at none of those
	   sizes does it reach the copy of the section below. */
	bottom: -20%;
	width: min(58vw, 820px);
	height: auto;
	/* Ceiling relative to the box, so a short viewport shrinks it too. */
	max-height: 168%;
	object-fit: contain;
	object-position: bottom right;
	aspect-ratio: 1373 / 1145;
	/* Optical, not mathematical, centring. */
	transform: translateY(3%);
}

/* Large monitors: the composition holds, it does not keep growing. */
/* Large monitors: the composition holds at the container's width - the
   illustration stops growing rather than following the screen. */
@media (min-width: 1600px) {
	.hero-title { font-size: 5.77rem; }
	.hero-illustration { width: 820px; }
}

/* Short landscape (phones on their side, small laptops): the four-line
   headline plus a full-height illustration does not fit - let it scroll. */
@media (max-height: 720px) and (min-width: 768px) {
	.hero { min-height: 0; padding-top: calc(var(--navbar-height) + clamp(16px, 3vh, 32px)); padding-bottom: clamp(32px, 5vh, 64px); }
	.hero-title { font-size: clamp(2.75rem, 4.6vw, 4.25rem); }
	.hero-illustration { width: min(100%, 560px); transform: none; }
}

/* Entrance: subtle, and nothing spins or bounces. */
@media (prefers-reduced-motion: no-preference) {
	.hero-copy { animation: hero-rise 700ms var(--ease-out) both; }
	.hero-visual { animation: hero-settle 800ms var(--ease-out) 120ms both; }
	.section-metodo .metodo-head { animation: hero-rise 700ms var(--ease-out) both; }
	.section-metodo .video,
	.section-metodo .metodo-media { animation: hero-settle 800ms var(--ease-out) 120ms both; }
}
@keyframes hero-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
@keyframes hero-settle {
	from { opacity: 0; transform: translateY(20px) scale(0.97); }
	to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- page hero */
/* Dark cover hero used by inner pages (diagnóstico). The home hero is the
   editorial one above and deliberately does not share these rules. */
.page-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
	box-sizing: border-box;
}
.page-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 41, 59, 0.82) 50%, rgba(51, 65, 85, 0.75) 100%);
}
.page-hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wrap-wide);
	margin: 0 auto;
	padding: 8rem clamp(1rem, 3vw, 3rem) 4rem;
	box-sizing: border-box;
}
.page-hero-title {
	max-width: 800px;
	margin-bottom: 1.75rem;
	font-size: clamp(2.5rem, 5.5vw, 4.5rem);
	font-weight: 700;
	color: #fff;
}
.page-hero-text {
	max-width: 560px;
	margin-bottom: 2.5rem;
	font-size: 1.25rem;
	line-height: 1.75;
	color: #fff;
}
.page-hero-badge + .page-hero-title { margin-top: 1.5rem; }
.page-hero-cta-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.page-hero-cta-group .btn { min-width: 160px; padding: 0.6rem 1.25rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.page-hero-cta-group .btn-primary {
	background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
	box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}
.page-hero-cta-group .btn-primary:hover { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-deep) 100%); transform: translateY(-3px); }
.page-hero-cta-group .btn-outline { border-color: rgba(255, 255, 255, 0.5); color: #fff; backdrop-filter: blur(10px); }
.page-hero-cta-group .btn-outline:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.8); color: #fff; transform: translateY(-3px); }


/* ------------------------------------------------------- señales (01 HOY) */
/* Secondary section, not a second hero: it fills 70-80vh, never a full one.
   The content stays left and lower-left; the artwork owns the right side and
   its branching paths are never covered by text. */
.signals {
	position: relative;
	isolation: isolate;
	background: var(--surface);
	/* One box for the artwork and for the markers that sit on it, anchored to
	   the same 1440px container as the copy: past a laptop the composition
	   stops following the monitor instead of drifting to the screen edge. */
	--signals-gutter: max(var(--space-4xl), calc((100% - 1440px) / 2));
	/* The artwork is sized by width and anchored to the bottom, so this number
	   also decides how much of the section's height it covers. At 980px it
	   reached barely half of it and read as a strip pinned to the floor,
	   nothing like ref-image-sec.png, where the scene fills the right of the
	   frame top to bottom. At 1150px it covers 63-74%, which is that
	   composition with the scene reading as a scene rather than as a backdrop
	   pushing against the copy. */
	--signals-art-w: min(920px, 59vw);
	min-height: min(78vh, 820px);
	display: flex;
	align-items: center;
	/* 20px tighter on top than the bottom: that space belongs to the hero, so
	   the two sections read as one continuous scroll. */
	--signals-pad-top: clamp(28px, 4vw, 56px);
	--signals-pad-bottom: clamp(64px, 8vw, 112px);
	/* The artwork is centred on the section's geometric middle. Shared by the
	   art and the horizon - change one, change both. */
	--signals-art-top: 50%;
	padding-top: var(--signals-pad-top);
	padding-bottom: var(--signals-pad-bottom);
	overflow: hidden;
}
.signals-art {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.signals-art picture { display: contents; }
/* Anchored centre-right at its own aspect ratio: no letterboxing, so the
   horizon markers below can be placed as percentages of this exact box and
/* Anchored bottom-right at its own aspect ratio: no letterboxing, so the
   horizon markers below can be placed as percentages of this exact box and
   land on the artwork's own decision nodes. The top pulls it onto the copy
   column's floor - same value as .signals-horizon, change one, change both. */
.signals-art img {
	position: absolute;
	right: var(--signals-gutter);
	/* Centred on the section's middle. Whatever this value is,
	   .signals-horizon below must carry the same one - the markers are
	   positioned as percentages of this exact box. */
	top: var(--signals-art-top);
	transform: translateY(-50%);
	width: var(--signals-art-w);
	height: auto;
	aspect-ratio: 1672 / 941;
	object-fit: contain;
}
.signals-inner {
	width: min(100% - var(--space-4xl), 1440px);
	margin-inline: auto;
	max-width: 1440px;
}
.signals-index {
	margin: 0;
	font: 600 0.8125rem/1.2 var(--font-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
}
.signals-index span { color: var(--ink); }
.signals-title span { display: block; }
.signals-title-accent { color: var(--hero-lime); }
.signals-title {
	max-width: 22ch;
	margin: var(--space-lg) 0 0;
	/* A step below the other sections' .heading, per editorial preference -
	   reads ~53px at desktop widths. Keeps .heading's line model. */
	font-size: clamp(2rem, 3.6vw, 3.5rem);
	font-weight: 650;
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: var(--ink);
}
.signals-text {
	max-width: 46ch;
	margin: var(--space-lg) 0 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var(--muted);
}

/* Editorial data blocks, separated by hairlines - not cards. */
.signals-data {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: var(--space-2xl) 0 0;
	max-width: 760px;
}
.signal {
	padding-right: var(--space-xl);
	margin-right: var(--space-xl);
	border-right: 1px solid var(--border);
}
.signal:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.signal-label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	max-width: 20ch;
	font: 600 0.75rem/1.3 var(--font-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
}
.signal-dot {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hero-lime);
}
.signal:first-child .signal-dot { background: var(--hero-navy); }
.signal-value {
	margin: var(--space-md) 0 0;
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	font-weight: 650;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ink);
	/* Tabular figures: a value that updates must not resize its column. */
	font-variant-numeric: tabular-nums;
}
/* Currency, percent and month sit a step down from the figure. */
.signal-unit { font-size: 0.62em; font-weight: 600; letter-spacing: -0.01em; }
.signal-note {
	margin: var(--space-sm) 0 0;
	max-width: 22ch;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--muted);
}

/* The markers sit on the artwork itself: present, then 30 / 60 / 90, each
   rising with the scenario planes. Percentages track the illustration, which
   is anchored to the right edge of the section. */
.signals-horizon {
	/* Same box as the artwork, so these percentages track the illustration.
	   Centred on the section's middle: change one, change both. */
	position: absolute;
	right: var(--signals-gutter);
	top: var(--signals-art-top);
	transform: translateY(-50%);
	width: var(--signals-art-w);
	aspect-ratio: 1672 / 941;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
	font: 600 0.6875rem/1.2 var(--font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.signals-horizon li { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.signals-horizon span {
	/* Sized with the artwork, not independently: the markers are labels on the
	   scene, and at 2.25rem they read as a second headline competing with it. */
	font-size: 2rem;
	font-weight: 650;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--hero-navy);
	font-variant-numeric: tabular-nums;
}
/* A dotted drop line, like the reference: the marker belongs to the plane. */
.signals-horizon li::after {
	content: "";
	width: 1px;
	height: clamp(24px, 2.6vw, 48px);
	margin-top: 0.35rem;
	background: repeating-linear-gradient(to bottom, var(--faint) 0 2px, transparent 2px 6px);
}
.signals-horizon li { transform: translateX(-50%); }
.signals-horizon-now { left: 39%; top: 26%; }
.signals-horizon-now span { font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--ink); }
.signals-horizon-30 { left: 56%; top: 14%; }
.signals-horizon-60 { left: 73%; top: 6%; }
.signals-horizon-90 { left: 89%; top: -2%; }

.signals-rule { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--space-2xl); }
.signals-rule-line { display: block; width: clamp(200px, 22vw, 300px); height: 1px; background: var(--hero-navy); }
.signals-rule-mark { font: 700 1.5rem/1 var(--font-body); color: var(--hero-lime); }
.signals-closing {
	margin: var(--space-lg) 0 0;
	max-width: 34ch;
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.signals-closing em { font-style: normal; color: var(--hero-lime); }

/* ----------------------------------------------------------- icon grid */
.icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.icon-box { text-align: center; padding: 2rem 1rem; }
.icon-box-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(11, 41, 56, 0.08);
	color: var(--blue);
	transition: 0.4s;
}
.icon-box-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.icon-box:hover .icon-box-icon { background: var(--blue); color: #fff; transform: translateY(-4px); box-shadow: 0 12px 32px rgba(11, 41, 56, 0.25); }
.icon-box-title { font-size: 1.25rem; margin-bottom: 0.75rem; }
.icon-box-text { font-size: 0.875rem; color: var(--muted); line-height: 1.7; }


/* --------------------------------------------------- señales / problema (03) */
/* Editorial composition: the copy block reads on the paper, and the
   hanging-sculpture artwork is a real img in the DOM, anchored absolute so it
   never affects the flow (no cards, no icon badges per DESIGN.md). */
.section-pain .pain-art {
	position: absolute;
	/* Anchored to the .section-inner (the containing block), pulled up by the
	   section's own top padding so the art still starts at the very top of the
	   section. Right edge flush with the copy container (same value as .section
	   padding - change one, change both). */
	top: calc(-1 * clamp(80px, 10vw, 120px));
	right: 0;
	width: min(46vw, 780px);
	height: auto;
	pointer-events: none;
}
/* Mobile only: the artwork can't clear the copy column, so it drops out of the
   collage and flows in below the headline instead of sitting behind the text.
   On tablets/iPads (the 1200px rules below) and desktops it stays to the side,
   tucking just behind the copy column. */
@media (max-width: 768px) {
	.section-pain .pain-art {
		position: static;
		top: auto;
		right: auto;
		width: 100%;
		height: auto;
		margin-top: clamp(28px, 5vw, 56px);
		pointer-events: none;
	}
}
.section-pain .pain-copy { max-width: 640px; }
/* iPad / small laptop, portrait and landscape: the copy narrows to its own
   column and the artwork anchors to the right, so the two read side by side.
   The absolute art can tuck a little behind the copy (the copy paints above it)
   but never buries it. Above this range the base rule keeps them clear; below
   (mobile) the artwork drops below the headline. */
@media (min-width: 769px) and (max-width: 1200px) {
	.section-pain .pain-copy { max-width: 48%; }
	.section-pain .pain-art { width: 48%; }
}
.section-pain .pain-kicker {
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	font: 600 0.8125rem/1.2 var(--font-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
}
/* DESIGN.md h2: Inter, weight 650, line-height 0.98, -0.035em. The size is
   clamped so the headline breaks at two lines inside the copy column (and stays
   clear of the hanging artwork) on screens wide enough to allow it. */
.section-pain .pain-title {
	max-width: none;
	font-size: clamp(2rem, 3.2vw, 3rem);
	font-weight: 650;
	line-height: 0.98;
	letter-spacing: -0.035em;
}
.section-pain .pain-intro {
	margin-top: var(--space-lg);
	max-width: 46ch;
	font-size: 1.125rem;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var(--muted);
}
/* Four labelled indicators: image up top, short uppercase label, short copy. */
.section-pain .pain-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	margin-top: clamp(40px, 5vw, 64px);
}
.section-pain .pain-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Editorial vertical separator between the indicators: a lime hairline on
	   the left of every item except the first column, aligned to the
	   title->text band (just below the icon, down to the paragraph) rather than
	   the whole column - per DESIGN.md the accent line matches the CAJA lime. */
	padding-left: var(--space-lg);
}
.section-pain .pain-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(clamp(48px, 5vw, 72px) + var(--space-md));
	bottom: 0;
	width: 2px;
	background: var(--hero-lime);
	pointer-events: none;
}
/* No separator on the first column (4-up layout). */
.section-pain .pain-item:nth-child(4n + 1) {
	padding-left: 0;
}
.section-pain .pain-item:nth-child(4n + 1)::before { display: none; }
.section-pain .pain-item-icon {
	width: clamp(48px, 5vw, 72px);
	height: clamp(48px, 5vw, 72px);
	margin-bottom: var(--space-md);
	object-fit: contain;
}
/* Uppercase label with a short lime line on its right. */
.section-pain .pain-item-title {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
	font-size: 0.9375rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.section-pain .pain-item-title::after {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 2px;
	background: var(--hero-lime);
}
.section-pain .pain-item-text {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--muted);
}
/* Closing statement: faint main line + accent (lime, italic) underneath.
   No rule above it - the copy reads straight off the grid. */
.section-pain .pain-closing {
	margin-top: clamp(36px, 4.5vw, 56px);
}
.section-pain .pain-closing-main {
	font-size: 1.125rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.section-pain .pain-closing-accent {
	margin-top: var(--space-sm);
	font-size: 1.125rem;
	line-height: 1.5;
	font-style: italic;
	color: var(--hero-lime);
}

/* -------------------------------------------------------------- metodo */
/* Video-first editorial chapter. The media block - the lazy YouTube player or,
   until the editor enables it, the current metodoImage as the still - sits in
   one and the same 16:9 slot, narrower than the column so it breathes. Below
   it, the seven canonical phases as hairline-separated columns: no cards, no
   icons. */
.section-metodo .section-inner { display: flex; flex-direction: column; }
/* The redesigned section sits right below the original one; a hairline keeps
   the two cream blocks read as two chapters instead of one. */
.section-metodo { border-top: 1px solid var(--border); }
.metodo-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-2xl);
	margin-bottom: clamp(2rem, 5vw, 4rem);
}
.metodo-head .eyebrow { margin-bottom: var(--space-md); }
.metodo-title {
	margin: 0;
	font-size: clamp(2rem, 3.6vw, 3.5rem);
	font-weight: 650;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--ink);
}
.metodo-title span { display: block; }
.metodo-title-accent { color: var(--hero-lime); }
.metodo-lede {
	max-width: 46ch;
	margin: var(--space-lg) 0 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var(--muted);
}
/* Decorative vertical index on wide screens only: ORDEN / CLARIDAD /
   RESULTADOS, a lime hairline, and the stage line beneath - left-aligned so
   the block reads as a caption next to the head, never as content. */
.metodo-annot {
	display: none;
	margin: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	font: 600 0.6875rem/1.4 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--faint);
}
.metodo-annot-lines { display: flex; flex-direction: column; }
.metodo-annot-rule {
	display: block;
	width: 28px;
	height: 2px;
	margin: 2px 0;
	background: var(--hero-lime);
}
.metodo-annot-sig { display: flex; flex-direction: column; }
/* Shared media slot in the redesigned section: the player reserves the box
   where the video will live - nothing renders there until the editor enables
   it, so only the head, phases and closing show in the meantime. Narrower
   than the content column on desktop - the block breathes inside the section. */
.section-metodo .metodo-media { width: min(88%, 1350px); margin-inline: auto; }

/* Original section figure - the card is kept on purpose for the old section. */
.metodo-figure {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 4vw, 3rem);
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
	margin-bottom: 3rem;
}
.metodo-figure h3 { text-align: center; font-size: 1.35rem; margin-bottom: 1.5rem; }
.metodo-figure figcaption { text-align: center; color: var(--muted); font-size: 0.9375rem; margin-top: 1.5rem; }

/* principios: checklist of the original section. */
.principios {
	background: #fff;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	padding: 2rem;
	margin-bottom: 3rem;
}
.principios h4 { font-size: 1.05rem; margin-bottom: 1.25rem; }
.principios li { display: flex; gap: 0.75rem; padding: 0.6rem 0; font-size: 0.9375rem; color: var(--muted); }
.principios li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--blue); margin-top: 0.2rem; }

/* Reusable lazy player (components/youtube-video.html). Reserves the 16:9 box
   from the start, so the section never shifts when the frame loads. */
.video { position: relative; aspect-ratio: 16 / 9; }
.video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hero-navy);
	cursor: pointer;
}
.video-poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--hero-lime);
	color: var(--hero-navy);
	box-shadow: 0 10px 30px var(--shadow);
	transition: transform 0.35s var(--ease-out), background 0.35s var(--ease-out);
}
.video-play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-poster:hover .video-play { transform: scale(1.06); }
.video-poster:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.video-frame { position: absolute; inset: 0; }
.video-frame iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); }

/* Seven phases, hairline-separated editorial columns. */
.metodo-fases {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--space-xl);
	margin: clamp(3rem, 6vw, 5rem) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--border);
}
.metodo-fase { padding: var(--space-lg) 0 0; }
.metodo-fase-num {
	display: block;
	margin: 0 0 var(--space-sm);
	font: 600 0.75rem/1.2 var(--font-body);
	letter-spacing: 0.06em;
	color: var(--hero-lime);
}
.metodo-fase-rule {
	display: block;
	width: 24px;
	height: 1px;
	margin: 0 0 var(--space-md);
	background: var(--hero-navy);
}
.metodo-fase-title {
	margin: 0 0 var(--space-sm);
	font-size: 1.25rem;
	font-weight: 650;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.metodo-fase-text { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.metodo-cierre {
	align-self: flex-start;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	font: 600 0.75rem/1.3 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.metodo-cierre-mark { color: var(--hero-lime); }

/* Wide desktops only: the vertical index floats top-right next to the head. */
@media (min-width: 1441px) {
	.metodo-annot { display: flex; }
}

/* promesa: shared with servicios.html - do not edit alone. */
.promesa {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	background: var(--blue-soft);
	border-left: 4px solid var(--blue);
	border-radius: 12px;
	padding: 1.75rem 2rem;
	margin-bottom: 2rem;
}
.promesa-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.promesa-icon svg { width: 22px; height: 22px; }
.promesa h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.promesa p { color: var(--muted); font-size: 0.9375rem; }
.section-cta { text-align: center; }
.section-cta .cta-note { margin-top: 1rem; font-size: 0.875rem; color: var(--faint); }

/* --------------------------------------------------------------- split */
.split-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.split-image { position: relative; overflow: hidden; min-height: 600px; }
.split-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.split-image:hover img { transform: scale(1.03); }
.split-content { padding: clamp(3rem, 6vw, 6rem); }
.split-content .heading { margin-bottom: 1.5rem; }
.split-content p { color: var(--muted); margin-bottom: 1.25rem; }
.split-content .btn { margin-top: 1rem; }

/* ------------------------------------------------------------ services */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.svc-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px;
	transition: box-shadow 0.35s, transform 0.35s, border-color 0.35s;
}
/* A card that is itself a link (a page of its own): same look, but the whole
   card is the click target. Color/text-decoration reset so it reads as a card. */
.svc-card-linkable {
	color: inherit;
	text-decoration: none;
}
.svc-card-linkable .svc-card-link { margin-top: auto; }
.svc-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07); transform: translateY(-3px); border-color: var(--blue); }
.svc-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--blue-soft);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	flex-shrink: 0;
}
.svc-card-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.svc-card-title { font-size: 1.1rem; font-weight: 700; color: var(--hero-navy); margin-bottom: 10px; line-height: 1.2; }
.svc-card-text { font-size: 0.8125rem; color: #64748b; line-height: 1.7; flex: 1; margin-bottom: 20px; }
.svc-card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--blue);
	transition: gap 0.3s;
}
.svc-card-link:hover { gap: 0.6rem; }
.svc-card-link svg { width: 14px; height: 14px; }
.svc-card-cta { background: linear-gradient(160deg, var(--navy-1) 0%, var(--navy-2) 50%, var(--navy-3) 100%); border-color: transparent; }
.svc-card-cta .svc-card-icon { background: rgba(255, 255, 255, 0.15); color: #fff; }
.svc-card-cta .svc-card-title { color: #fff; }
.svc-card-cta .svc-card-text { color: rgba(255, 255, 255, 0.75); }
.svc-card-cta:hover { border-color: transparent; box-shadow: 0 12px 32px rgba(21, 45, 92, 0.35); }

/* --------------------------------------------------------- testimonial */
.testimonial { text-align: center; max-width: 800px; margin: 0 auto; }
.testimonial-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 1.5rem;
	border: 3px solid var(--border-soft);
}
.testimonial-text {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ink);
	margin-bottom: 1.5rem;
}
.testimonial-author { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.testimonial-role { font-size: 0.8125rem; color: var(--faint); }

.tslider { position: relative; overflow: hidden; }
.tslider-track { display: flex; transition: transform 0.5s var(--ease-out); }
.tslider-slide { min-width: 100%; padding: 0 1rem; box-sizing: border-box; }
.tslider-arrows { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; }
.tslider-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--hero-navy);
	transition: 0.2s;
	padding: 0;
}
.tslider-btn svg { width: 16px; height: 16px; }
.tslider-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(1.08); }
.tslider-dots { display: flex; gap: 0.375rem; align-items: center; }
.tslider-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cbd5e1;
	border: 0;
	cursor: pointer;
	transition: 0.2s;
	padding: 0;
}
.tslider-dot:hover { background: #94a3b8; transform: scale(1.3); }
.tslider-dot.active { background: var(--blue); width: 20px; border-radius: 4px; }

/* --------------------------------------------------------------- cases */
/* Casos: tarjetas navy uniformes y minimalistas. Protagonistas: la persona y su
   empresa, juntas arriba; después solo el resultado. El desafío y la
   intervención quedan plegados en "Ver el caso". Con subgrid (tres filas por
   tarjeta) los bloques se alinean entre tarjetas. */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.case-card {
	display: flex; flex-direction: column; padding: 2rem;
	background: var(--hero-navy); color: #fff; border-radius: var(--radius-lg);
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.case-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(11, 41, 56, 0.22); }
@supports (grid-template-rows: subgrid) {
	.case-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.case-head { padding-bottom: 1.5rem; }
.case-sector { margin: 0 0 1.25rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.case-person { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.case-company { margin: 0.3rem 0 0; font-size: 1.05rem; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.case-result { padding: 1.25rem 0 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.case-result strong,
.case-block strong { display: block; margin-bottom: 0.4rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.case-result strong { color: var(--hero-lime); }
.case-result p { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.55; color: #fff; }
/* "Ver el caso": desplegable nativo, sin JavaScript. */
.case-more { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.case-more summary {
	display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; cursor: pointer; list-style: none;
	font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--hero-lime);
}
.case-more summary::-webkit-details-marker { display: none; }
.case-more summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--hero-lime); }
.case-more[open] summary::after { content: "\2212"; }
.case-more summary:hover { color: #bcd92a; }
.case-block { padding: 0 0 1rem; }
.case-block p { margin: 0; font-size: 0.875rem; line-height: 1.65; color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------- steps */
.step-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 3rem; }
.step-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.step-card .svc-card-icon { margin-bottom: 16px; }
.step-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.5rem; }
.step-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; }
.step-card > p { font-size: 0.8125rem; color: #64748b; margin-bottom: 1.25rem; }
.step-card li { display: flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0; font-size: 0.8125rem; color: #64748b; }
.step-card li svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--blue); margin-top: 0.25rem; stroke-width: 2; }

/* ---------------------------------------------------------------- team */
.team-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3rem; }
.team-head .lede { margin-top: 0; justify-self: end; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.team-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem;
	background: var(--hero-navy);
	transition: transform 0.4s var(--ease-out);
}
.team-card:hover { transform: translateY(-6px); }
.team-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-card-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.1) 60%); }
.team-card-name { position: relative; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.2rem; }
.team-card-role { position: relative; font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); }
.team-card-creds { position: relative; font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); line-height: 1.4; margin-top: 0.3rem; }

/* ----------------------------------------------------------------- faq */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #e5e5e5; }
.faq-question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ink);
	transition: color 0.3s;
}
.faq-question:hover { color: var(--blue); }
.faq-icon { flex-shrink: 0; width: 20px; height: 20px; stroke-width: 2; transition: transform 0.3s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease-out); }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-answer p { padding-bottom: 1.5rem; font-size: 0.9375rem; color: var(--muted); line-height: 1.7; }

/* -------------------------------------------------------------- footer */
.footer { background: var(--footer-bg); color: rgba(255, 255, 255, 0.6); }
.footer-grid {
	max-width: var(--wrap);
	width: 100%;
	margin: 0 auto;
	padding: 64px clamp(1rem, 3vw, 3rem);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	box-sizing: border-box;
}
.footer-brand img { height: 70px; width: auto; filter: brightness(0) invert(1); margin-bottom: 1.25rem; }
.footer-brand p { font-size: 0.8125rem; line-height: 1.7; max-width: 280px; }
.footer-widget-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 1.5rem; }
.footer-widget p, .footer-widget a { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); }
.footer-widget a { display: block; padding: 0.35rem 0; transition: color 0.3s; }
.footer-widget a:hover { color: var(--blue); }
.footer-social { display: flex; gap: 0.75rem; }
.footer-social .social-link {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
	transition: 0.2s;
	padding: 0;
	box-sizing: border-box;
}
.footer-social .social-link svg { width: 14px; height: 14px; }
.footer-social .social-link:hover { background: rgba(168, 203, 24, 0.18); border-color: rgba(168, 203, 24, 0.5); color: var(--blue); transform: scale(1.1); }
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-bottom-inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 24px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.35);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { transition: color 0.3s; }
.footer-legal a:hover { color: var(--blue); }

/* --------------------------------------------------------- legal pages */
.section-legal { max-width: 800px; margin: 0 auto; }
.section-cream .page-hero-title { color: var(--ink); }
.section-cream .page-hero-text { color: var(--muted); }
.legal-intro { font-size: 1.125rem; line-height: 1.7; color: var(--dark); margin-bottom: 0; }
.legal-content h2 { font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 1rem; color: var(--dark); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { line-height: 1.7; margin-bottom: 1rem; color: var(--dark); }
.legal-content ul { margin: 1rem 0; padding-left: 1.5rem; }
.legal-content li { line-height: 1.7; margin-bottom: 0.5rem; color: var(--dark); }
.legal-content strong { font-weight: 600; }
.legal-contact { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.legal-contact li { margin-bottom: 0.75rem; }
.legal-contact a { color: var(--blue); text-decoration: none; }
.legal-contact a:hover { text-decoration: underline; }

/* --------------------------------------------------------- course modal */
.course-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.92);
	backdrop-filter: blur(12px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.course-box {
	position: relative;
	width: 100%;
	max-width: 820px;
	max-height: 90vh;
	display: flex;
	gap: 1.25rem;
	background: #111827;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}
.course-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 10;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 0;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.course-close:hover { background: rgba(255, 255, 255, 0.2); }
.course-close svg { width: 18px; height: 18px; }
.course-video-col { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 1.25rem 0 1.25rem 1.25rem; }
.course-video-frame { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 9 / 16; max-height: 70vh; margin: 0 auto; }
.course-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.course-end {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	text-align: center;
	padding: 1rem;
}
.course-end img { height: 96px; width: auto; filter: brightness(0) invert(1); }
.course-end p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }
.course-replay { font-size: 0.75rem; font-weight: 600; color: var(--blue); background: rgba(168, 203, 24, 0.12); border: 1px solid rgba(11, 41, 56, 0.25); border-radius: 8px; padding: 0.6rem 1.5rem; cursor: pointer; }
.course-replay:hover { background: rgba(168, 203, 24, 0.2); }
.course-side { width: 300px; flex-shrink: 0; border-left: 1px solid rgba(255, 255, 255, 0.06); padding: 1.25rem; overflow-y: auto; display: flex; flex-direction: column; }
.course-side h3 { color: #fff; font-size: 1.25rem; margin-bottom: 0.25rem; }
.course-side > p { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); margin-bottom: 1.25rem; }
.course-side h4 { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); margin-bottom: 0.75rem; }
.playlist-item {
	width: 100%;
	display: block;
	text-align: left;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	padding: 0.75rem;
	margin-bottom: 0.5rem;
	cursor: pointer;
	transition: 0.2s;
}
.playlist-item:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.playlist-item.active { background: rgba(168, 203, 24, 0.12); border-color: rgba(11, 41, 56, 0.25); }
.playlist-item-title { display: block; font: 600 0.8125rem/1.4 var(--font-body); color: #fff; }
.playlist-item-step { display: block; font: 400 0.6875rem/1.4 var(--font-body); color: rgba(255, 255, 255, 0.4); margin-top: 0.15rem; }
.course-side-cta {
	margin-top: auto;
	display: block;
	text-align: center;
	background: var(--blue);
	color: #fff;
	border-radius: 10px;
	padding: 0.875rem 1rem;
	font: 600 0.8125rem/1.4 var(--font-body);
	transition: background 0.2s;
}
.course-side-cta:hover { background: var(--blue-dark); }
.course-progress { margin-top: 0.75rem; text-align: center; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.35); }

/* -------------------------------------------------------------- legacy */
.container { max-width: 48rem; margin: 0 auto; padding: 3rem 1.5rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.page-header h1 { margin: 0; font-size: 1.875rem; letter-spacing: -0.02em; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.panel h2 { margin: 0; font-size: 1.25rem; }
.panel p { margin: 0.5rem 0 0; color: var(--muted); }
/* --------------------------------------------------------- blog index */
.blog-hero {
	position: relative;
	padding: clamp(100px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
	overflow: hidden;
	display: flex;
	align-items: center;
}
.blog-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.blog-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(30,41,59,0.85) 50%, rgba(51,65,85,0.78) 100%);
}
.blog-hero .section-inner { position: relative; z-index: 1; }
.blog-hero-inner { max-width: 640px; }
.blog-hero-title {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0.5rem 0 0;
}
.blog-hero-desc {
	color: rgba(255,255,255,0.8);
	font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
	line-height: 1.7;
	margin: 1.25rem 0 0;
	max-width: 520px;
}
.eyebrow--white { color: rgba(255,255,255,0.7); }

/* featured article */
.blog-featured-link {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 3rem;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s var(--ease-out);
}
.blog-featured-link:hover { transform: translateY(-3px); }
.blog-featured-link:hover .blog-featured-img { border-color: var(--blue); }
.blog-featured-img-wrap { overflow: hidden; border-radius: var(--radius-lg); }
.blog-featured-img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.blog-featured-link:hover .blog-featured-img { transform: scale(1.02); }
.blog-featured-img--placeholder {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
}
.blog-featured-img--placeholder img {
	max-width: 60%;
	max-height: 60%;
	opacity: 0.4;
}
.blog-featured-content { display: flex; flex-direction: column; gap: 1rem; }
.blog-featured-title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}
.blog-featured-excerpt {
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-featured-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font: 600 0.875rem/1 var(--font-body);
	color: var(--blue);
	letter-spacing: 0.02em;
	transition: gap 0.2s;
}
.blog-featured-link:hover .blog-featured-cta { gap: 0.75rem; }

/* blog tag / category badge */
.blog-tag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: var(--blue-soft);
	color: var(--blue);
	font: 600 0.6875rem/1.4 var(--font-body);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 100px;
	width: fit-content;
}

/* article grid */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* article card */
.blog-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}
.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	border-color: var(--blue);
}
.blog-card-img-wrap { overflow: hidden; }
.blog-card-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.3s var(--ease-out);
}
.blog-card-img--placeholder {
	background: var(--surface-alt);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
}
.blog-card-img--placeholder img {
	max-width: 50%;
	max-height: 50%;
	opacity: 0.4;
}
.blog-card:hover .blog-card-img { transform: scale(1.03); }
.blog-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
	flex: 1;
}
.blog-card-title {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s;
}
.blog-card:hover .blog-card-title { color: var(--blue); }
.blog-card-excerpt {
	color: var(--muted);
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* card meta: author + date */
.blog-card-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--border-soft);
	font-size: 0.8125rem;
	color: var(--muted);
}
.blog-author-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue);
	font: 600 0.75rem/28px var(--font-body);
	text-align: center;
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: clip;
	white-space: nowrap;
}
.blog-author-name { font-weight: 500; color: var(--ink); white-space: nowrap; }
.blog-meta-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--faint);
	flex-shrink: 0;
}
.blog-card-date { white-space: nowrap; }

/* pager */
.blog-pager-wrap { padding-top: 0; }
.blog-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}
.blog-pager-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 1.25rem;
	min-height: 44px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font: 500 0.8125rem/1 var(--font-body);
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.blog-pager-btn:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
	transform: translateY(-1px);
}
.blog-pager-btn:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}
.blog-pager-btn--disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}
.blog-pager-info {
	font-size: 0.8125rem;
	color: var(--muted);
	min-width: 100px;
	text-align: center;
}

/* empty state */
.blog-empty {
	text-align: center;
	padding: 4rem 1rem;
}
.blog-empty-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
}
.blog-empty-title {
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}
.blog-empty-text {
	color: var(--muted);
	margin: 0;
}

/* ============================================================ blog article */

/* ── Offset for fixed header ─────────────────────────────────────── */
.art-top-spacer { height: 90px; }

/* ── Cover hero ─────────────────────────────────────────────────── */
/* Runs up under the fixed header. Same height and navy fade as the /contacto
   hero (558px there on desktop, set by its copy), but with the photo across
   the full width and no text over it. */
.art-hero {
	position: relative;
	width: 100%;
	height: 558px;
	overflow: hidden;
	background: var(--hero-navy);
}
.art-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.art-hero-overlay {
	position: absolute;
	inset: 0;
	/* Left: the contacto fade into navy. Top: keeps the white header legible
	   over any photo, light or dark. */
	background:
		linear-gradient(90deg, var(--hero-navy) 0%, rgba(11, 41, 56, 0.9) 12%, rgba(11, 41, 56, 0.45) 32%, rgba(11, 41, 56, 0) 60%),
		linear-gradient(180deg, rgba(11, 41, 56, 0.75) 0%, rgba(11, 41, 56, 0.3) 150px, rgba(11, 41, 56, 0) 260px);
}
/* Contacto stacks copy over a short photo here; with no copy, a photo-only
   hero that tall would fill the phone, so it shrinks and fades vertically. */
@media (max-width: 1024px) {
	.art-hero { height: clamp(320px, 62vw, 480px); }
	.art-hero-overlay {
		background:
			linear-gradient(180deg, rgba(11, 41, 56, 0.85) 0%, rgba(11, 41, 56, 0.35) 140px, rgba(11, 41, 56, 0) 55%),
			linear-gradient(0deg, rgba(11, 41, 56, 0.55) 0%, rgba(11, 41, 56, 0) 35%);
	}
}

/* ── Reading progress bar ────────────────────────────────────────── */
.art-progress {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--border-soft);
	z-index: 101;
	pointer-events: none;
}
.art-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--hero-lime);
	transition: width 0.1s linear, background-color 0.3s ease;
	border-radius: 0 2px 2px 0;
}
.art-progress-bar.done {
	background: var(--blue);
}

/* ── Article wrapper ──────────────────────────────────────────────── */
.art-wrap { padding: 0 1.5rem 4rem; }
.art-wrap-inner { max-width: 1100px; margin: 0 auto; }

/* ── Two-column: TOC sidebar + body ──────────────────────────────── */
.art-body-layout {
	display: flex;
	gap: 3rem;
	align-items: flex-start;
	position: relative;
}

/* ── TOC sidebar ─────────────────────────────────────────────────── */
.art-toc-sidebar {
	flex: 0 0 220px;
	min-width: 0;
	position: sticky;
	top: 110px;
	align-self: flex-start;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding: 2.5rem 0.5rem 0 0;
}
.art-toc-sidebar::-webkit-scrollbar { width: 3px; }
.art-toc-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.art-toc-label {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--faint);
	display: block;
	margin-bottom: 0.75rem;
}
.toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.toc-item {
	margin: 0;
}
.toc-item--sub {
	padding-left: 0.625rem;
}
.toc-link {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--muted);
	text-decoration: none;
	padding: 0.35rem 0 0.35rem 0.75rem;
	border-left: 2px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.toc-link:hover {
	color: var(--blue);
}
.toc-link.is-active-link {
	color: var(--blue);
	border-left-color: var(--hero-lime);
	font-weight: 600;
}

/* ── Body column ─────────────────────────────────────────────────── */
.art-body-col {
	flex: 1;
	min-width: 0;
	max-width: 720px;
}
.art-body {
	min-width: 0;
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.art-breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 2rem 0 0;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--faint);
}
.art-breadcrumb a {
	color: var(--blue);
	text-decoration: none;
	transition: color 0.2s;
}
.art-breadcrumb a:hover { color: var(--blue-dark); }
.art-breadcrumb span[aria-hidden] { color: var(--border); }

/* ── Header ─────────────────────────────────────────────────────── */
.art-header {
	padding: 1.5rem 0 1.5rem;
}
.art-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	color: var(--blue);
}
.art-eyebrow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hero-lime);
	flex-shrink: 0;
}
.art-title {
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 4.4vw, 3rem);
	font-weight: 650;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin: 0 0 1.25rem;
}
.art-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--faint);
}
.art-meta-sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--border);
	flex-shrink: 0;
}
.art-read-time {
	color: var(--muted);
}

/* ── Body ───────────────────────────────────────────────────────── */
.art-body {
	padding: 2.25rem 0 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--body);
	letter-spacing: 0.005em;
	word-break: break-word;
}
.art-body > *:first-child { margin-top: 0; }
.art-body > *:last-child { margin-bottom: 0; }
/* First paragraph reads as a lede: bigger, quieter, more air. */
.art-body > p:first-child {
	font-size: 1.1875rem;
	line-height: 1.65;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin-bottom: 1.9rem;
}

/* Headings */
.art-body h2 {
	position: relative;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.022em;
	color: var(--ink);
	margin: 3.25rem 0 1.1rem;
	padding: 0 0 0.7rem 1.05rem;
	border-bottom: 1px solid var(--border-soft);
}
.art-body h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 4px;
	height: 1em;
	border-radius: 2px;
	background: var(--hero-lime);
}
.art-body h2:first-child { margin-top: 0; }
.art-body h3 {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--blue);
	margin: 2.25rem 0 0.75rem;
}
.art-body h4 {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 650;
	color: var(--blue);
	margin: 1.5rem 0 0.5rem;
}

/* Paragraphs */
.art-body p { margin: 0 0 1.4rem; }

/* Lists — brand markers instead of the default disc/decimal */
.art-body ul,
.art-body ol {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	counter-reset: artli;
}
.art-body li {
	position: relative;
	margin-bottom: 0.7rem;
	padding-left: 1.85rem;
}
.art-body li p { margin: 0; }
.art-body ul > li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.58em;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--hero-lime);
	transform: rotate(45deg);
}
.art-body ol > li {
	counter-increment: artli;
}
.art-body ol > li::before {
	content: counter(artli);
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.4rem;
	height: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--paper);
	background: var(--blue);
	border-radius: 50%;
}

/* Inline text */
.art-body strong { color: var(--ink); font-weight: 650; }
.art-body em { font-style: italic; }
.art-body a {
	color: var(--blue);
	text-decoration: underline;
	text-decoration-color: var(--hero-lime);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	font-weight: 500;
	transition: color 0.2s, text-decoration-color 0.2s;
}
.art-body a:hover { color: var(--blue-deep); text-decoration-color: var(--blue); }
.art-body code {
	font-family: "Inter", monospace;
	font-size: 0.85em;
	background: var(--surface-alt);
	border: 1px solid var(--border);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	color: var(--ink);
}

/* Blockquote */
.art-body blockquote {
	margin: 2.25rem 0;
	padding: 1.5rem 1.75rem;
	border-left: 4px solid var(--hero-lime);
	background: var(--hero-navy);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: 1.05rem;
	color: var(--paper);
	line-height: 1.7;
}
.art-body blockquote p:last-child { margin-bottom: 0; }
.art-body blockquote strong { color: #fff; }

/* Images */
.art-body img {
	border-radius: var(--radius-lg);
	margin: 2rem 0;
	width: 100%;
	height: auto;
	display: block;
}

/* Code blocks */
.art-body pre {
	background: var(--hero-navy);
	color: #e2e8f0;
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius-lg);
	overflow-x: auto;
	margin: 2rem 0;
	line-height: 1.6;
	font-size: 0.875rem;
}
.art-body pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* Horizontal rule */
.art-body hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--hero-lime) 0 44px, var(--border) 44px 100%);
	margin: 2.75rem 0;
}

/* Tables */
.art-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
	font-size: 0.9375rem;
}
.art-body th {
	text-align: left;
	font-weight: 600;
	color: var(--ink);
	padding: 0.75rem 1rem;
	border-bottom: 2px solid var(--border);
	background: var(--surface-alt);
}
.art-body td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-soft);
	color: var(--body);
}
.art-body tr:hover td { background: var(--surface-alt); }

/* ── Author byline ──────────────────────────────────────────────── */
.art-byline {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-top: 2.5rem;
	padding: 1.5rem;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
}
.art-byline-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.art-byline-avatar--fallback {
	background: var(--blue);
	color: var(--hero-lime);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.art-byline-name {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
	display: block;
	margin-bottom: 0.25rem;
}
.art-byline-bio {
	font-size: 0.875rem;
	color: var(--muted);
	line-height: 1.6;
	margin: 0;
}

/* ── Back link ──────────────────────────────────────────────────── */
.art-back { padding: 1.5rem 0 0; }
.art-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--blue);
	text-decoration: none;
	transition: gap 0.2s var(--ease-out);
}
.art-back-link:hover { gap: 0.75rem; }

/* ── Te gustaría ver — carousel ─────────────────────────────────── */
.art-related { padding: clamp(3rem, 5vw, 5rem) 0; }
.art-related-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0.5rem 0 1.5rem;
}

.art-carousel { position: relative; overflow: hidden; }
.art-carousel-viewport {
	overflow: hidden;
	border-radius: var(--radius-lg);
}
.art-carousel-track {
	display: flex;
	gap: 1rem;
	transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.art-carousel-card {
	flex: 0 0 calc((100% - 2rem) / 3);
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.3s, transform 0.3s;
	box-sizing: border-box;
}
.art-carousel-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,0.07);
	transform: translateY(-3px);
}
.art-carousel-card-img {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-alt);
}
.art-carousel-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease-out);
}
.art-carousel-card:hover .art-carousel-card-img img { transform: scale(1.04); }
.art-carousel-card-img--placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--surface-alt) 0%, var(--border-soft) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.art-carousel-card-img--placeholder img {
	max-width: 50%;
	max-height: 50%;
	opacity: 0.4;
}
.art-carousel-card-body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
}
.art-carousel-card-title {
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.art-carousel-card:hover .art-carousel-card-title { color: var(--blue); }
.art-carousel-card-date {
	font-size: 0.7rem;
	color: var(--faint);
	margin-top: auto;
	padding-top: 0.35rem;
}

/* carousel controls */
.art-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.art-carousel-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ink);
	transition: 0.2s;
	padding: 0;
}
.art-carousel-btn svg { width: 16px; height: 16px; }
.art-carousel-btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.art-carousel-btn:disabled { opacity: 0.35; cursor: default; }
.art-carousel-dots { display: flex; gap: 0.375rem; align-items: center; }
.art-carousel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cbd5e1;
	border: 0;
	cursor: pointer;
	transition: 0.2s;
	padding: 0;
}
.art-carousel-dot:hover { background: #94a3b8; }
.art-carousel-dot.active { background: var(--blue); width: 20px; border-radius: 4px; }

/* ------------------------------------------------------------ responsive */

/* Laptop: phases fall into a 4+3 grid; the media slot widens a touch. */
@media (max-width: 1439px) {
	.section-metodo .metodo-media { width: min(94%, 1350px); }
	.metodo-fases { grid-template-columns: repeat(4, 1fr); row-gap: var(--space-3xl); }
}

@media (max-width: 1024px) {
	.nav-menu { display: none; }
	.header-inner { grid-template-columns: 1fr auto; }
	.header-inner { width: min(100% - var(--space-3xl), 1440px); padding: 14px 0; }
	:root { --navbar-height: 101px; }
	.site-logo img { height: 73px; }
	.nav-menu { gap: var(--space-lg); }
	.hero-inner { width: min(100% - var(--space-3xl), 1440px); }
	.section-inner { width: min(100% - var(--space-3xl), 1440px); }
	.icon-grid { grid-template-columns: repeat(2, 1fr); }
	.section-pain .pain-grid { grid-template-columns: repeat(2, 1fr); }
	.section-pain .pain-title { max-width: 20ch; }
	/* 2-up: separator on the right-hand column only (odd items open the row). */
	.section-pain .pain-item:nth-child(odd) { padding-left: 0; }
	.section-pain .pain-item:nth-child(odd)::before { display: none; }
	.svc-grid { grid-template-columns: repeat(2, 1fr); }
	.case-grid { grid-template-columns: repeat(2, 1fr); }
	.split-section { grid-template-columns: 1fr; }
	/* iPad: same two-column concept, tighter gutter and a calmer type ramp. */
	.hero-inner { grid-template-columns: minmax(0, 46fr) minmax(0, 0fr) minmax(0, 54fr); gap: var(--space-lg); }
	.hero-copy { max-width: none; }
	.hero-title { font-size: clamp(2rem, 4.8vw, 3.5rem); max-width: 9ch; }
	.hero-text { font-size: 1rem; max-width: 38ch; }
	.hero-visual { position: static; height: auto; min-height: 0; }
	.hero-illustration { position: static; width: 100%; height: auto; transform: translateY(1%); }
	/* iPad: artwork flows below the copy, no overlap with data labels. */
	.signals { min-height: 0; display: block; padding-bottom: clamp(48px, 8vw, 80px); }
	.signals-inner { width: min(100% - var(--space-3xl), 1440px); display: flex; flex-direction: column; }
	.signals-art { position: static; z-index: auto; margin: var(--space-2xl) 0 0; }
	.signals-art img { position: static; width: 100%; height: auto; max-height: 50vh; object-fit: contain; object-position: center; opacity: 0.85; }
	.signals-title { max-width: 18ch; }
	.signals-text { max-width: 52ch; }
	.signals-horizon {
		position: static;
		width: auto;
		aspect-ratio: auto;
		display: flex;
		justify-content: space-between;
		gap: var(--space-md);
		margin-top: var(--space-lg);
	}
	.signals-horizon li { position: static; flex-direction: row; align-items: baseline; gap: 0.35rem; transform: none; }
	.signals-horizon li::after { content: none; }
	.signals-horizon span { font-size: 1.5rem; }
	.signals-horizon-now span { font-size: 0.75rem; }
	.split-image { min-height: 400px; order: -1; }
	.team-head { grid-template-columns: 1fr; align-items: start; }
	.team-head .lede { justify-self: start; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: repeat(2, 1fr); padding: 3rem 1.5rem; }
	.course-box { flex-direction: column; overflow-y: auto; }
	.course-video-col { padding: 1rem 1rem 0; }
	.course-video-frame { max-height: 40vh; }
	.course-side { width: 100%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
	.blog-featured-link { grid-template-columns: 1fr; gap: 2rem; }
	.blog-featured-img { aspect-ratio: 16 / 9; }
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
	.blog-hero { padding: clamp(80px, 10vw, 120px) 0 clamp(40px, 6vw, 60px); }
	.art-carousel-card { flex: 0 0 calc((100% - 1rem) / 2) !important; }
	.art-toc-sidebar { display: none; }
	.art-body-layout { gap: 0; }
	.art-body-col { max-width: 100%; }
	/* Tablet: media goes full-bleed and the phases drop to a 2-column grid. */
	.section-metodo .metodo-media { width: 100%; }
	.metodo-fases { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-2xl); row-gap: var(--space-3xl); }
}

@media (max-width: 768px) {
	/* Mobile: vertical storytelling - headline first, visual last, no overlap.
	   The fixed header is reserved in the top padding, never overlapped. */
	.hero {
		min-height: 0;
		padding-top: calc(var(--navbar-height) + clamp(24px, 6vw, 48px));
		padding-bottom: clamp(28px, 6vw, 44px);
	}
	.hero-inner { width: min(100% - var(--space-2xl), 1440px); grid-template-columns: 1fr; gap: var(--space-2xl); }
	.header-inner { width: min(100% - var(--space-2xl), 1440px); }
	.header-cta { display: none; }
	.hero-copy, .hero-visual { grid-column: 1; max-width: 100%; }
	.hero-title { font-size: clamp(2rem, 8.8vw, 3.1rem); line-height: 0.92; max-width: 100%; }
	.hero-text { max-width: 100%; font-size: 1rem; }
	.hero-rule { margin-top: var(--space-lg); }
	.hero-rule-line { width: clamp(112px, 34vw, 160px); }
	.hero-cta-group { flex-direction: column; align-items: stretch; margin-top: var(--space-xl); }
	.hero-cta-group .btn { width: 100%; max-width: 100%; min-width: 0; justify-content: center; }
	/* Full-bleed so the illustration keeps its presence on a narrow screen. */
	.hero-visual { width: 100vw; margin-inline: calc(50% - 50vw); }
	.hero-visual { position: static; height: auto; min-height: 0; }
	.hero-illustration { position: static; width: 92vw; height: auto; right: auto; bottom: auto; transform: none; }
	/* Mobile: index, headline, copy, signals, artwork, closing - in that order,
	   with the artwork as a real block instead of a backdrop behind text. */
	.signals { min-height: 0; display: block; padding-top: clamp(18px, 7vw, 42px); padding-bottom: clamp(48px, 10vw, 72px); }
	.signals-inner { width: min(100% - var(--space-2xl), 1440px); display: flex; flex-direction: column; }
	/* In the flow now, between the signals and the closing statement. */
	.signals-art { position: static; z-index: auto; margin: var(--space-2xl) 0 0; }
	.signals-art img { position: static; width: 100%; height: auto; max-height: 46vh; object-fit: contain; }
	.signals-art img {
		position: static;
		width: 100%;
		height: auto;
		max-height: 46vh;
		object-fit: contain;
		object-position: center;
	}
	.signals-title { max-width: 100%; font-size: clamp(1.75rem, 8vw, 2.5rem); }
	.signals-text { max-width: 100%; }
	/* Stacked, still compact: hairlines above each block, never cards. */
	.signals-data { flex-direction: column; gap: 0; }
	.signal {
		padding: var(--space-lg) 0 0;
		margin: var(--space-lg) 0 0;
		border-right: 0;
		border-top: 1px solid var(--border);
	}
	.signal:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
	.signals-horizon {
		position: static;
		width: auto;
		aspect-ratio: auto;
		display: flex;
		justify-content: space-between;
		gap: var(--space-md);
		margin-top: var(--space-lg);
	}
	.signals-horizon li { position: static; flex-direction: row; align-items: baseline; gap: 0.35rem; transform: none; }
	.signals-horizon li::after { content: none; }
	.signals-horizon span { font-size: 1.25rem; }
	.signals-horizon-now span { font-size: 0.75rem; }
	.signals-rule-line { width: clamp(160px, 46vw, 240px); }
	.page-hero-content { padding: 7rem 1.5rem 3rem; }
	.page-hero-cta-group { flex-direction: column; }
	.page-hero-cta-group .btn { width: 100%; max-width: 100%; min-width: 0; }
	.icon-grid { grid-template-columns: 1fr; }
	.section-pain .pain-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-lg); }
	.section-pain .pain-title { max-width: 100%; font-size: clamp(1.75rem, 8vw, 2.5rem); }
	/* Mobile: the artwork stays in flow below the headline. */
	.section-pain .pain-art { width: 100%; opacity: 0.9; }
	.svc-grid { grid-template-columns: 1fr; }
	.case-grid { grid-template-columns: 1fr; }
	.step-grid { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.footer-bottom-inner { justify-content: center; text-align: center; }
	.heading { font-size: 1.75rem; }
	.signals-title { font-size: 1.75rem; }
	.blog-grid { grid-template-columns: 1fr; }
	.blog-card-body { padding: 1.25rem; }
	.blog-pager { flex-wrap: wrap; gap: 0.75rem; }
	.blog-pager-btn { padding: 0.5rem 1rem; font-size: 0.8125rem; }
	.blog-hero { padding: clamp(70px, 8vw, 100px) 0 clamp(32px, 5vw, 48px); }
	.blog-hero-title { font-size: clamp(1.75rem, 6vw, 2.5rem); }
	.art-carousel-card { flex: 0 0 100% !important; }
	.art-wrap { padding: 0 1rem 3rem; }
	.art-title { font-size: clamp(1.75rem, 5vw, 2.25rem); }
	.art-body { font-size: 1rem; padding: 2rem 0; }
	.art-byline { gap: 0.75rem; }
	.art-byline-avatar { width: 48px; height: 48px; }
	/* Mobile: strict vertical story - intro, media, then the phases one under
	   the other, each opened by its own hairline. No horizontal scrolling. */
	.metodo-head { flex-direction: column; gap: var(--space-xl); }
	.metodo-title { font-size: clamp(1.9rem, 8.5vw, 2.75rem); }
	.metodo-lede { max-width: 100%; }
	.metodo-fases { grid-template-columns: 1fr; row-gap: 0; }
	.metodo-fase { border-bottom: 1px solid var(--border); }
	.metodo-cierre { align-self: auto; }
	.video-play { width: 64px; height: 64px; }
	.video-play svg { width: 22px; height: 22px; }
}

/* Tablet held horizontally (iPad and friends, 769-1024px landscape).
   The <=1024px block above puts the illustration back in the flow, which is
   right for a tablet held upright but leaves it tucked inside the hero here -
   so the composition changed completely between an iPad in landscape and an
   iPad Pro in landscape, which is a wider screen and keeps the desktop rules.
   translateY moves what is painted without touching the layout, so the
   artwork crosses into the next section as it does on desktop: 12% of its own
   height here, in the middle of the 7-17% the wider screens land on.

   Guarded on three sides on purpose. min-width keeps phones out; min-height
   leaves the short-landscape rule (<=720px) in charge of netbooks and phones
   held sideways, where there is no room to spare; and orientation keeps every
   tablet held upright on the stacked layout it already had. */
@media (min-width: 769px) and (max-width: 1024px) and (min-height: 721px) and (orientation: landscape) {
	.hero-illustration { transform: translateY(22%); }
}

/* Small phones (iPhone SE / 360-380px): keep the four lines intact. */
@media (max-width: 380px) {
	.hero-title { font-size: clamp(1.8rem, 9.2vw, 2.2rem); letter-spacing: -0.04em; }
	.hero-inner { width: min(100% - var(--space-lg), 1440px); }
	.section-pain .pain-grid { grid-template-columns: 1fr; }
	/* Single column: the lime separators become horizontal rules between the
	   stacked indicators. */
	.section-pain .pain-item { padding-left: 0; border-top: 2px solid var(--hero-lime); padding-top: var(--space-lg); }
	.section-pain .pain-item::before { display: none; }
	.section-pain .pain-item:first-child { border-top: 0; padding-top: 0; }
}

/* --------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===================================================================
   Diagnóstico Financiero Empresarial
   Landing + widget del quiz. Reutiliza los tokens del sitio (--blue,
   --cream, --radius, --font-display); no introduce un framework.
   =================================================================== */

/* --- CTA sobre fondo azul ------------------------------------------ */
.section-blue {
	background: linear-gradient(135deg, var(--navy-1) 0%, var(--navy-2) 50%, var(--navy-3) 100%);
	color: #fff;
	text-align: center;
}
.section-blue .cta-title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 1rem; }
.section-blue .cta-subtitle { color: rgba(255, 255, 255, 0.7); max-width: 560px; margin: 0 auto 2rem; }
.section-blue .btn-outline { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.section-blue .btn-outline:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.8); color: #fff; }

/* --- Page hero badge ---------------------------------------------------- */
.page-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
}

/* --- Pasos (¿Cómo funciona?) --------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.step-number {
	display: grid; place-items: center;
	width: 48px; height: 48px; margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--blue-soft); color: var(--blue);
	font: 700 1.25rem/1 var(--font-display);
}
.step-title { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.6rem; }
.step-text { color: var(--muted); margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* --- Opciones (Elige tu camino) -------------------------------------- */
.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 900px; margin: 0 auto; }
.option-card {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
	padding: 2rem; display: flex; flex-direction: column; gap: 1rem; text-align: center;
}
.option-card .option-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; background: var(--blue-soft); color: var(--blue); }
.option-card .option-icon svg { width: 28px; height: 28px; }
.option-title { font-family: var(--font-display); font-size: 1.25rem; margin: 0; }
.option-text { color: var(--muted); margin: 0; font-size: 0.95rem; line-height: 1.6; }
.option-card .option-cta { margin-top: auto; width: 100%; box-sizing: border-box; }

/* --- Beneficios ------------------------------------------------------ */
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.benefit-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; }
.benefit-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); }
.benefit-icon svg { width: 24px; height: 24px; }
.benefit-title { font-family: var(--font-display); font-size: 1.1rem; margin: 1rem 0 0.5rem; }
.benefit-text { color: var(--muted); margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* --- Widget del quiz (modal) ------------------------------------------ */
.quiz-modal {
	position: fixed; inset: 0; z-index: 500;
	display: grid; place-items: center; padding: 1.5rem;
	background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(6px);
	opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.quiz-modal-open { opacity: 1; visibility: visible; }
.quiz-panel {
	width: min(680px, 100%); max-height: 90vh; overflow-y: auto;
	background: var(--surface); border-radius: var(--radius-lg); padding: 2.5rem;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
	position: relative;
}
.quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.quiz-title { font-family: var(--font-display); font-size: 1.75rem; margin: 0; }
.quiz-close {
	display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
	border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--muted);
	cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.quiz-close:hover { color: var(--ink); border-color: var(--ink); }
.quiz-close svg { width: 20px; height: 20px; }
.quiz-subtitle { color: var(--muted); margin: 0 0 1rem; }
.quiz-progress { font-size: 0.85rem; font-weight: 700; color: var(--blue); letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.quiz-bar { height: 8px; background: var(--border-soft); border-radius: 999px; overflow: hidden; margin-bottom: 1.75rem; }
.quiz-bar-fill { height: 100%; border-radius: 999px; background: var(--blue); transition: width 0.3s var(--ease-out); }
.quiz-bloque { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin: 0 0 0.5rem; }
.quiz-pregunta { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 1.5rem; line-height: 1.3; }
.quiz-form { display: grid; gap: 1.25rem; }
.quiz-field { display: grid; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; }
.quiz-field .req { color: var(--blue); font-style: normal; }
.quiz-field input { padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; }
.quiz-field input:focus { outline: 2px solid var(--blue); border-color: transparent; }
.quiz-opciones { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.quiz-opcion {
	display: block; width: 100%; text-align: left; padding: 1rem 1.25rem;
	border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--surface-alt); color: var(--body);
	font: 500 1rem/1.4 var(--font-body); cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.quiz-opcion:hover { border-color: var(--blue); color: var(--blue); }
.quiz-opcion.selected { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; }
.quiz-actions { display: flex; gap: 0.75rem; justify-content: space-between; margin-top: 1rem; }
.quiz-actions .btn { padding: 0.85rem 1.5rem; min-height: auto; }
.quiz-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- Resultado ------------------------------------------------------- */
.quiz-result { text-align: center; }
.resultado-icono {
	display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1rem;
	border-radius: 50%; font-size: 2rem; font-weight: 700;
	background: var(--blue-soft); color: var(--blue);
}
.resultado-icono.control { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.resultado-icono.alerta { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.resultado-icono.presion { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.resultado-icono.crisis { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.resultado-nivel { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin: 0 0 0.25rem; }
.resultado-score { font-size: 1.1rem; font-weight: 700; color: var(--blue); margin-bottom: 1rem; }
.resultado-lectura { color: var(--muted); max-width: 540px; margin: 0 auto 1.5rem; line-height: 1.6; }
.resultado-botones { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.btn-whatsapp { border-color: var(--ink); color: var(--ink); }
.btn-cerrar { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-cerrar:hover { color: var(--ink); border-color: var(--ink); }

/* --- Responsive del diagnóstico --------------------------------------- */
@media (max-width: 1024px) {
	.steps { grid-template-columns: 1fr; }
	.benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.quiz-options { grid-template-columns: 1fr; }
	.benefits-grid { grid-template-columns: 1fr; }
	.quiz-actions { flex-direction: column; }
	.quiz-actions .btn { width: 100%; }
	.quiz-panel { padding: 1.5rem; }
}

/* ===================================================================
   Asesoría tributaria (página de servicio)
   Reutiliza los componentes del sitio (page-hero, icon-grid, svc-grid,
   benefits-grid, steps, faq-list, section-blue); aquí solo se recalibra
   el hero y el CTA hacia la paleta editorial navy/paper/lima, sin tocar
   la página de diagnóstico que comparte el .page-hero base.
   =================================================================== */

/* La página de servicio lleva .page-tax en <body>; el .page-hero común es
   el slate azul de diagnóstico. Aquí se reemplaza por el navy editorial. */
body.page-tax .page-hero {
	background: linear-gradient(135deg, var(--navy-1) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
}
body.page-tax .page-hero-overlay {
	background: linear-gradient(135deg, rgba(11, 41, 56, 0.92) 0%, rgba(13, 49, 69, 0.86) 50%, rgba(15, 58, 81, 0.8) 100%);
}
body.page-tax .page-hero-title em {
	font-style: normal;
	color: var(--hero-lime);
}
/* CTA primario del hero: navy en vez del azul slate heredado. */
body.page-tax .page-hero-cta-group .btn-primary {
	background: var(--hero-lime);
	color: var(--ink);
	box-shadow: none;
}
body.page-tax .page-hero-cta-group .btn-primary:hover {
	background: #bcd92a;
	transform: translateY(-3px);
}
/* La sección de confianza (promesa) con el borde lima de la casa. */
body.page-tax .promesa {
	border-left-color: var(--hero-lime);
}
body.page-tax .promesa-icon {
	background: var(--hero-navy);
}
/* CTA final: la página no hereda el navy azul del diagnóstico. Usa el fondo
   cream (--surface) y el acento primario lima - título en ink, primario en
   lima con texto ink, outline en borde ink - igual que el hero de la página. */
body.page-tax .section-blue {
	background: var(--surface);
	color: var(--ink);
}
body.page-tax .section-blue .cta-title {
	color: var(--ink);
}
body.page-tax .section-blue .cta-subtitle {
	color: var(--muted);
}
body.page-tax .section-blue .btn-primary {
	background: var(--ink);
	color: #fff;
	box-shadow: none;
}
body.page-tax .section-blue .btn-primary:hover {
	background: var(--hero-navy);
	transform: translateY(-2px);
}
body.page-tax .section-blue .btn-outline {
	border-color: var(--ink);
	color: var(--ink);
	background: transparent;
}
body.page-tax .section-blue .btn-outline:hover {
	background: var(--ink);
	color: var(--paper);
}

/* ===================================================================
   Diagnóstico financiero (página pública del quiz)
   La página lleva .page-diagnostico en <body>. El hero usa el azul
   predominante de DESIGN.md (Primary/Deep Navy #0B2938) con texto claro y
   acento lima; altura por contenido y mismo padding vertical que contacto.
   CTAs sobre navy: primario lima con texto ink, secundario outline blanco.
   Sin glow fintech ni glassmorphism.
   =================================================================== */

body.page-diagnostico .page-hero {
	min-height: 0;
	background: var(--hero-navy);
}
body.page-diagnostico .page-hero-overlay { display: none; }
body.page-diagnostico .page-hero-content {
	padding: calc(var(--navbar-height) + 2rem) clamp(1rem, 3vw, 3rem) 3.5rem;
}
/* Copia a la izquierda, imagen editorial a la derecha - igual que contacto. */
.diagnostico-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
/* Imagen a sangre por el borde derecho del hero, de altura completa. El borde
   izquierdo se funde con el navy del hero mediante un degradado, en vez de
   flotar como una tarjeta redondeada. */
.diagnostico-hero-visual {
	position: absolute;
	top: var(--navbar-height);
	right: 0;
	bottom: 0;
	width: min(46%, 820px);
	z-index: 0;
	overflow: hidden;
}
.diagnostico-hero-visual img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	display: block;
}
.diagnostico-hero-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--hero-navy) 0%, rgba(11, 41, 56, 0.9) 9%, rgba(11, 41, 56, 0) 40%);
	pointer-events: none;
}
/* Hero sobre navy: primario lima con texto ink, secundario outline blanco. */
body.page-diagnostico .page-hero-cta-group .btn-primary {
	background: var(--hero-lime);
	color: var(--ink);
	box-shadow: none;
}
body.page-diagnostico .page-hero-cta-group .btn-primary:hover {
	background: #bcd92a;
	transform: translateY(-2px);
}
body.page-diagnostico .page-hero-cta-group .btn-outline {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
	background: transparent;
	backdrop-filter: none;
}
body.page-diagnostico .page-hero-cta-group .btn-outline:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
	color: #fff;
}
/* CTA final (section-blue): fondo navy oscuro, primario también lime,
   outline blanco sobre navy - legible, sin glassmorphism. */
body.page-diagnostico .section-blue .btn-primary {
	background: var(--hero-lime);
	color: var(--ink);
	box-shadow: none;
}
body.page-diagnostico .section-blue .btn-primary:hover {
	background: #bcd92a;
	transform: translateY(-2px);
}
body.page-diagnostico .section-blue .btn-outline {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
	backdrop-filter: none;
}
body.page-diagnostico .section-blue .btn-outline:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
	color: #fff;
}
body.page-diagnostico .section-blue .cta-title {
	color: #fff;
}





/* ------------------------------------------------------------ contacto (01)
   Página de contacto: hero en el azul predominante de DESIGN.md (Primary/
   Deep Navy #0B2938) con slot de imagen editorial, formulario plano sobre
   papel cálido y columnas de canales. El UI sigue plano: bordes de 1px,
   radios moderados, sin glassmorphism ni sombras pesadas. */
body.page-contacto .page-hero {
	min-height: var(--page-hero-min);
	background: var(--hero-navy);
}
body.page-contacto .page-hero-overlay { display: none; }
body.page-contacto .page-hero-content {
	padding: calc(var(--navbar-height) + 2rem) clamp(1rem, 3vw, 3rem) 3.5rem;
}
body.page-contacto .page-hero-title em {
	font-style: normal;
	color: var(--hero-lime);
}
.contacto-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
/* Mismo tratamiento que diagnóstico: imagen a sangre por la derecha, altura
   completa y fundido hacia el navy en el borde izquierdo. */
.contacto-hero-visual {
	position: absolute;
	top: var(--navbar-height);
	right: 0;
	bottom: 0;
	width: min(46%, 820px);
	z-index: 0;
	overflow: hidden;
}
.contacto-hero-visual img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	display: block;
}
.contacto-hero-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--hero-navy) 0%, rgba(11, 41, 56, 0.9) 9%, rgba(11, 41, 56, 0) 40%);
	pointer-events: none;
}
.contacto-hero-copy .page-hero-text { margin-bottom: 0; }

/* Formulario + canales ---------------------------------------------------- */
.contacto-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(3rem, 6vw, 6rem);
	align-items: start;
}
.contacto-form-col .heading { text-align: left; margin-bottom: 0.75rem; }
.contacto-form-col .lede { margin-bottom: 2.5rem; }

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.form-field { display: flex; flex-direction: column; }
.form-field label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 0.5rem;
	color: var(--ink);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 0.9rem 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field ::placeholder { color: var(--faint); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--navy-1);
	box-shadow: 0 0 0 3px rgba(168, 203, 24, 0.35);
}
.form-privacy {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.75rem;
}
.form-privacy input[type="checkbox"] {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--navy-1);
	flex-shrink: 0;
}
.form-privacy label {
	font-weight: 400;
	letter-spacing: 0;
	margin-bottom: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--muted);
	cursor: pointer;
}
.form-privacy label a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form-submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 54px;
	padding: 0 30px;
}
.form-submit:disabled { opacity: 0.6; transform: none; cursor: wait; }
.form-status { margin: 0; font-size: 0.9375rem; color: var(--muted); min-height: 0; }
.form-status.is-error { color: #b3261e; }
.form-success-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 650; margin: 0 0 0.5rem; }
.form-success-text { margin: 0; color: var(--muted); }

/* Ubicación ---------------------------------------------------------------- */
.contacto-location-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(3rem, 6vw, 5rem);
	align-items: center;
}
.contacto-location-grid--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}
.contacto-location-grid--solo .contacto-location-copy .heading { margin-inline: auto; }
.contacto-location-visual img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	display: block;
}
.contacto-location-copy .heading { margin-top: 0.75rem; margin-bottom: 1rem; text-align: left; }
.contacto-location-grid--solo .contacto-location-copy .heading { text-align: center; }
.contacto-location-copy .lede { margin-bottom: 2rem; }
.contacto-address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 2rem;
}
.contacto-address span,
.contacto-address a { color: var(--ink); text-decoration: none; font-size: 1.0625rem; }
.contacto-address a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contacto-socials { display: flex; gap: 0.75rem; }
.contacto-socials .social-link {
	width: 42px;
	height: 42px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.contacto-socials .social-link svg { width: 17px; height: 17px; }
.contacto-socials .social-link:hover { background: rgba(168, 203, 24, 0.22); border-color: rgba(168, 203, 24, 0.6); transform: translateY(-2px); }

/* CTA final: navy como el hero, primario lima. */
body.page-contacto .section-blue { background: linear-gradient(135deg, var(--navy-1) 0%, var(--navy-2) 100%); }
body.page-contacto .section-blue .cta-title { color: #fff; }
body.page-contacto .section-blue .cta-subtitle { color: rgba(255, 255, 255, 0.72); }
body.page-contacto .section-blue .btn-primary {
	background: var(--hero-lime);
	color: var(--ink);
	box-shadow: none;
}
body.page-contacto .section-blue .btn-primary:hover { background: #bcd92a; transform: translateY(-2px); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
	.contacto-grid { grid-template-columns: 1fr; }
	.contacto-hero-grid { grid-template-columns: 1fr; }
	.diagnostico-hero-grid { grid-template-columns: 1fr; }
	/* En pantallas estrechas la imagen baja al flujo, debajo de la copia, a
	   ancho completo y con poca altura. El degradado ahora es vertical: funde
	   el borde superior de la imagen con el navy del hero para que no se vea
	   una línea que corta texto e imagen. */
	body.page-diagnostico .page-hero,
	body.page-contacto .page-hero { flex-direction: column; align-items: stretch; min-height: 0; }
	.contacto-hero-visual,
	.diagnostico-hero-visual {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		order: 1;
		width: 100%;
		max-width: none;
		height: min(46vw, 220px);
		margin: 0;
		border-radius: 0;
	}
	.contacto-hero-visual img,
	.diagnostico-hero-visual img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
		/* La propia imagen se desvanece por arriba: deja ver el azul del hero
		   detrás sin línea ni borde de recorte. */
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0.6) 42%, #000 78%);
		mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0.6) 42%, #000 78%);
	}
	.contacto-hero-visual::after,
	.diagnostico-hero-visual::after { display: none; }
	.contacto-location-grid { grid-template-columns: 1fr; }
	.contacto-location-grid--solo { gap: 0; }
	.contacto-location-visual { max-width: 640px; }
	.contacto-location-copy .heading { text-align: left; }
}
@media (max-width: 640px) {
	.form-row-2 { grid-template-columns: 1fr; }
}

/* ===================================================================
   Servicios (página /servicios)
   Reutiliza el hero navy de .page-tax y el hero con imagen a sangre de
   contacto (.contacto-hero-visual). Aquí: hero más compacto, índice de
   servicios y el bloque de detalle imagen + texto que alterna de lado.
   =================================================================== */
/* Mismo tamaño de hero que contacto (--page-hero-min). */
body.page-servicios .page-hero {
	min-height: var(--page-hero-min);
	/* Navy sólido como contacto: el navbar queda del mismo color que el borde
	   del fundido de la imagen, que arranca justo debajo de él. */
	background: var(--hero-navy);
}
body.page-servicios .page-hero-overlay { display: none; }
body.page-servicios .page-hero-content {
	padding: calc(var(--navbar-height) + 2rem) clamp(1rem, 3vw, 3rem) 3.5rem;
}
.servicios-hero-copy { max-width: 680px; }
.servicios-hero-copy .page-hero-text { margin-bottom: 2rem; }
.servicios-hero-copy .page-hero-title { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }

/* Eyebrows de encabezado de sección: mismo tamaño y verde lima de la marca en
   toda la página. */
body.page-servicios .section-head .eyebrow {
	margin-bottom: 1rem; color: var(--hero-lime);
	font-size: 1.15rem; font-weight: 800; letter-spacing: 0.16em;
}

/* Índice: accesos rápidos a cada servicio. Pastillas blancas con el icono en
   círculo lima; al pasar el cursor se invierten a navy con texto lima. ------ */
.svc-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 0.5rem; }
.svc-index-link {
	display: inline-flex; align-items: center; gap: 0.75rem;
	padding: 0.6rem 1.5rem 0.6rem 0.6rem;
	border: 2px solid var(--hero-lime); border-radius: var(--radius-pill);
	background: #fff; color: var(--ink);
	font-size: 0.95rem; font-weight: 700; text-decoration: none;
	transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.svc-index-link:hover {
	background: var(--hero-navy); color: var(--hero-lime); border-color: var(--hero-navy);
	transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11, 41, 56, 0.18);
}
.svc-index-icon {
	display: grid; place-items: center; width: 38px; height: 38px;
	border-radius: 50%; background: var(--hero-lime); color: var(--ink);
}
.svc-index-icon svg { width: 18px; height: 18px; stroke-width: 2; }

/* Acordeón horizontal de servicios ---------------------------------------------
   Cinco paneles con foto de fondo. El activo (.is-active) se expande con
   flex-grow y muestra el detalle; los demás son tiras con el nombre en
   vertical. Por debajo de 900px pasa a acordeón vertical. */
.svc-acc-wrap { background: var(--hero-navy); }
.svc-acc { display: flex; height: 600px; width: 100%; }
.svc-panel {
	position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: #fff;
	background: var(--navy-2); border-left: 1px solid rgba(255, 255, 255, 0.18);
	scroll-margin-top: var(--navbar-height);
	transition: flex-grow 0.75s var(--ease-out);
}
.svc-panel:first-child { border-left: 0; }
.svc-panel.is-active { flex-grow: 5.2; }

.svc-panel-media { position: absolute; inset: 0; }
.svc-panel-media img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(0.3); transform: scale(1.06);
	transition: transform 1.2s var(--ease-out), filter 0.6s var(--ease-out);
}
.svc-panel.is-active .svc-panel-media img { filter: none; transform: none; }
/* Marco que ocupa el lugar de la foto mientras el CMS no tiene una. */
.svc-panel-placeholder {
	position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1rem;
	background: linear-gradient(135deg, var(--navy-1) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
}
.svc-panel-placeholder-icon { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--hero-lime); }
.svc-panel-placeholder-icon svg { width: 44px; height: 44px; stroke-width: 1.5; }
.svc-panel-placeholder-note { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
/* Velo navy: uniforme en las tiras cerradas, degradado lateral en la abierta. */
.svc-panel::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(11, 41, 56, 0.35) 0%, rgba(11, 41, 56, 0.85) 100%);
	transition: background 0.6s var(--ease-out);
}
.svc-panel.is-active::after { background: linear-gradient(90deg, rgba(11, 41, 56, 0.94) 0%, rgba(11, 41, 56, 0.78) 42%, rgba(11, 41, 56, 0.1) 100%); }

/* Tira cerrada: icono arriba, número y nombre en vertical abajo. */
.svc-panel-toggle {
	position: absolute; inset: 0; z-index: 2; width: 100%; padding: 2rem 0;
	display: flex; flex-direction: column; align-items: center; justify-content: space-between;
	background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
	transition: opacity 0.35s var(--ease-out);
}
.svc-panel-toggle:focus-visible { outline: 2px solid var(--hero-lime); outline-offset: -4px; }
.svc-panel.is-active .svc-panel-toggle { opacity: 0; pointer-events: none; }
.svc-panel-icon {
	display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px;
	border-radius: 50%; background: var(--hero-lime); color: var(--ink);
}
.svc-panel-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.svc-panel-tab { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.svc-panel-num { font: 700 0.85rem/1 var(--font-display); letter-spacing: 0.14em; color: var(--hero-lime); }
.svc-panel-name {
	writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
	font: 700 1.25rem/1.1 var(--font-display); letter-spacing: -0.01em;
}

/* Panel abierto: el ancho del bloque es fijo para que el texto no se reacomode
   mientras el panel crece. */
.svc-panel-content {
	position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; box-sizing: border-box;
	width: clamp(340px, 40vw, 560px); padding: 0 clamp(1.5rem, 3vw, 3rem);
	display: flex; flex-direction: column; justify-content: center;
	opacity: 0; visibility: hidden; transform: translateX(-24px);
	transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s 0.35s;
}
.svc-panel.is-active .svc-panel-content {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity 0.5s var(--ease-out) 0.3s, transform 0.7s var(--ease-out) 0.3s, visibility 0s;
}
.svc-panel-kicker { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.svc-panel-label { font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hero-lime); }
.svc-panel-title { margin: 0 0 1rem; font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 650; line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.svc-panel-summary { margin: 0 0 0.9rem; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; color: #fff; }
.svc-panel-text { margin: 0 0 1.5rem; font-size: 0.95rem; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }
body.page-servicios .svc-panel-cta .btn-primary { background: var(--hero-lime); color: var(--ink); box-shadow: none; }
body.page-servicios .svc-panel-cta .btn-primary:hover { background: #bcd92a; color: var(--ink); transform: translateY(-2px); }

/* Tarjeta de canales de contacto (columna junto al formulario de /contacto):
   navy con un destello lima. */
.cta-card { position: relative; overflow: hidden; background: var(--hero-navy); color: #fff; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-lg); }
.cta-card::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(640px 420px at 92% 10%, rgba(168, 203, 24, 0.18), transparent 70%);
}
.cta-card-title { position: relative; margin: 0 0 0.75rem; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; color: #fff; text-align: left; }
.cta-card-text { position: relative; margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }

.cta-card-channels { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.cta-card-channel {
	display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; color: #fff; text-decoration: none;
	background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-md);
	transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
a.cta-card-channel:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--hero-lime); transform: translateX(4px); }
.cta-card-channel-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--hero-lime); color: var(--ink); }
.cta-card-channel-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.cta-card-channel-label { display: block; font: 700 0.7rem/1.4 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hero-lime); }
.cta-card-channel-value { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.cta-card-channel-note { display: block; margin-top: 0.15rem; font-size: 0.8125rem; line-height: 1.45; color: rgba(255, 255, 255, 0.65); }

/* CTA a contacto (final de /servicios): mismo fondo papel que la introducción
   (--paper), para separarla del acordeón navy de arriba y del footer oscuro.
   Frase con acento navy, un único botón lima y anillos finos como detalle. */
.contact-cta { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); text-align: center; }
.contact-cta::before,
.contact-cta::after {
	content: ""; position: absolute; border-radius: 50%; pointer-events: none;
	border: 1.5px solid rgba(168, 203, 24, 0.55);
}
.contact-cta::before { width: 520px; height: 520px; right: -140px; top: -200px; }
.contact-cta::after { width: 340px; height: 340px; left: -110px; bottom: -160px; border-color: rgba(11, 41, 56, 0.12); }
.contact-cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.contact-cta-title { margin: 0 0 1.25rem; max-width: 900px; font-size: clamp(2.25rem, 5.4vw, 4.5rem); font-weight: 650; line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); }
.contact-cta-title em { font-style: normal; color: var(--hero-navy); }
.contact-cta-text { margin: 0 0 2.25rem; max-width: 560px; font-size: 1.1875rem; line-height: 1.6; color: var(--muted); }
.contact-cta-button {
	display: inline-flex; align-items: center; gap: 0.9rem; padding: 1.05rem 1.35rem 1.05rem 2rem;
	border-radius: var(--radius-pill); background: var(--hero-lime); color: var(--ink);
	font: 700 1rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
	transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.contact-cta-button:hover { background: #bcd92a; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11, 41, 56, 0.18); }
.contact-cta-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--hero-lime); transition: transform 0.25s var(--ease-out); }
.contact-cta-arrow svg { width: 20px; height: 20px; }
.contact-cta-button:hover .contact-cta-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.svc-panel, .svc-panel::after, .svc-panel-media img, .svc-panel-toggle,
	.svc-panel-content, .contact-cta-button, .contact-cta-arrow { transition: none !important; }
}

@media (max-width: 1024px) {
	body.page-servicios .page-hero { flex-direction: column; align-items: stretch; min-height: 0; }
	.svc-acc { height: 560px; }
}
/* Acordeón vertical: cada panel es una franja con su cabecera; el detalle se
   despliega por debajo con una transición de altura. */
@media (max-width: 900px) {
	.svc-acc { flex-direction: column; height: auto; }
	.svc-panel { flex: none; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); transition: none; }
	.svc-panel:first-child { border-top: 0; }
	.svc-panel::after,
	.svc-panel.is-active::after { background: linear-gradient(180deg, rgba(11, 41, 56, 0.6) 0%, rgba(11, 41, 56, 0.88) 100%); }
	.svc-panel-toggle {
		position: relative; inset: auto; flex-direction: row; justify-content: flex-start; gap: 1rem;
		min-height: 84px; padding: 0 3.25rem 0 1.25rem; text-align: left;
	}
	.svc-panel.is-active .svc-panel-toggle { opacity: 1; pointer-events: auto; }
	.svc-panel-toggle::after {
		content: ""; position: absolute; right: 1.5rem; top: 50%; width: 0.6rem; height: 0.6rem;
		border-right: 2px solid var(--hero-lime); border-bottom: 2px solid var(--hero-lime);
		transform: translateY(-70%) rotate(45deg); transition: transform 0.4s var(--ease-out);
	}
	.svc-panel.is-active .svc-panel-toggle::after { transform: translateY(-30%) rotate(-135deg); }
	.svc-panel-tab { flex-direction: row-reverse; gap: 0.9rem; align-items: center; }
	.svc-panel-name { writing-mode: horizontal-tb; transform: none; white-space: normal; font-size: 1.15rem; }
	.svc-panel.is-active .svc-panel-kicker { display: none; }
	.svc-panel-content {
		position: relative; inset: auto; width: 100%; padding: 0; transform: none; opacity: 1; box-sizing: border-box;
		display: grid; grid-template-rows: 0fr; visibility: hidden;
		transition: grid-template-rows 0.5s var(--ease-out), visibility 0s 0.5s;
	}
	.svc-panel.is-active .svc-panel-content {
		grid-template-rows: 1fr; visibility: visible; transform: none;
		transition: grid-template-rows 0.5s var(--ease-out), visibility 0s;
	}
	.svc-panel-inner { overflow: hidden; min-height: 0; }
	.svc-panel-inner > * { margin-left: 1.25rem; margin-right: 1.25rem; }
	.svc-panel-inner > .svc-panel-cta { margin-bottom: 1.75rem; }
	.svc-panel-title { font-size: 1.6rem; }
}
@media (max-width: 640px) {
	.svc-panel-cta .btn { width: 100%; }
	.svc-index { justify-content: flex-start; }
}