/*
 * Cedrus — main stylesheet
 * Sistema de marca lockeado en sesión 3 (handoff Claude Design 2026-05-24).
 *
 * Estructura:
 *   1. Tokens (paleta OKLCH definitiva + tipografía + spacing)
 *   2. Reset / base
 *   3. Paper grain overlay
 *   4. Type system + helpers
 *   5. Reveal-on-scroll
 *   6. Wordmark + monogram
 *   7. Buttons
 *   8. Progress bar
 *   9. Header
 *  10. Side nav rail
 *  11. Hero + counters + editorial images
 *  12. Ticker marquee
 *  13. Institutional dark spread (Quiénes somos)
 *  14. Services tabs
 *  15. Why (diferenciadores)
 *  16. Closing dark CTA
 *  17. Site footer colophon
 *  18. Page templates (genéricas + 404 + privacy + terms)
 *  19. WhatsApp float (mantenido como respaldo en pages que no son home)
 *  20. Accessibility utilities
 *  21. Reduced motion
 */

/* ─── 1. Tokens ────────────────────────────────────────────────────── */
:root {
	/* Bone — canvas / surfaces */
	--bone-50:  oklch(0.988 0.003 82);
	--bone-100: oklch(0.972 0.005 80);
	--bone-200: oklch(0.948 0.007 78);

	/* Stone — warm neutral spine (100 → 950) */
	--stone-100: oklch(0.940 0.006 72);
	--stone-200: oklch(0.895 0.008 70);
	--stone-300: oklch(0.820 0.010 68);
	--stone-400: oklch(0.720 0.011 66);
	--stone-500: oklch(0.605 0.011 64);
	--stone-600: oklch(0.475 0.011 62);
	--stone-700: oklch(0.355 0.011 60);
	--stone-800: oklch(0.255 0.010 58);
	--stone-900: oklch(0.185 0.009 56);
	--stone-950: oklch(0.125 0.007 54);

	/* Burgundy — primary accent */
	--burgundy-100: oklch(0.918 0.028 27);
	--burgundy-300: oklch(0.730 0.090 25);
	--burgundy-500: oklch(0.495 0.118 25);
	--burgundy-600: oklch(0.410 0.105 25);
	--burgundy-700: oklch(0.340 0.085 24);
	--burgundy-800: oklch(0.265 0.060 23);

	/* Brass — ornament only, NEVER body text on bone */
	--brass-200: oklch(0.855 0.045 73);
	--brass-300: oklch(0.780 0.062 71);
	--brass-400: oklch(0.705 0.072 69);
	--brass-500: oklch(0.640 0.075 67);
	--brass-700: oklch(0.450 0.055 61);

	/* Semantic aliases */
	--c-bg:            var(--bone-100);
	--c-surface-alt:   var(--bone-200);
	--c-divider:       var(--stone-200);
	--c-border:        var(--stone-300);
	--c-border-strong: var(--stone-400);
	--c-text-muted:    var(--stone-600);
	--c-text-soft:     var(--stone-700);
	--c-text:          var(--stone-900);
	--c-ink:           var(--stone-950);
	--c-accent:        var(--burgundy-600);
	--c-accent-hover:  var(--burgundy-700);
	--c-accent-press:  var(--burgundy-800);
	--c-accent-soft:   var(--burgundy-100);
	--c-ornament:      var(--brass-500);
	--c-focus-ring:    var(--burgundy-500);

	/* Tipografía */
	--ff-display: "Newsreader", "Times New Roman", Georgia, serif;
	--ff-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--ff-feat-body:    "ss01" 1, "cv11" 1, "calt" 1, "kern" 1;
	--ff-feat-tabular: "tnum" 1, "lnum" 1;
	--ff-feat-prop:    "pnum" 1, "lnum" 1;
	--ff-feat-display: "kern" 1, "calt" 1, "liga" 1;

	/* Layout */
	--container:  1320px;
	--gutter:     clamp(20px, 4vw, 56px);
	--section-y:  clamp(80px, 11vw, 168px);

	/* Motion */
	--ease-out:  cubic-bezier(0.20, 0.65, 0.30, 0.95);
	--ease-soft: cubic-bezier(0.30, 0.10, 0.10, 0.99);
}

/* ─── 2. Reset / base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
html, body { padding: 0; }
body {
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.62;
	font-feature-settings: var(--ff-feat-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a, button, .btn, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a, button, .btn { touch-action: manipulation; }
:root { color-scheme: light; }
::selection { background: var(--burgundy-300); color: var(--stone-950); }

:focus-visible {
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 3px;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ─── 3. Paper grain overlay ───────────────────────────────────────── */
body::before {
	content: "";
	position: fixed; inset: 0;
	pointer-events: none;
	z-index: 1;
	background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.05  0 0 0 0 0.03  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.55;
	mix-blend-mode: multiply;
}
main, header, footer, .progress-bar, .side-nav, .wa-float { position: relative; z-index: 2; }

/* ─── 4. Type system + helpers ─────────────────────────────────────── */
.eyebrow {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	display: inline-block;
}
.eyebrow.with-rule { padding-top: 12px; border-top: 1px solid var(--c-border); }
.eyebrow.accent    { color: var(--c-accent); border-color: var(--c-accent); }
.eyebrow.brass     { color: var(--brass-400); border-color: var(--brass-400); }

.display-1 {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(44px, 7.4vw, 108px);
	line-height: 1.00;
	letter-spacing: -0.022em;
	color: var(--c-ink);
	font-variation-settings: "opsz" 72;
	text-wrap: balance;
}
.display-1 em { font-style: italic; color: var(--c-accent); font-weight: 400; }

.h1 {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(34px, 4.6vw, 60px);
	line-height: 1.06;
	letter-spacing: -0.016em;
	color: var(--c-ink);
	font-variation-settings: "opsz" 50;
	text-wrap: balance;
}
.h1 em { font-style: italic; color: var(--c-accent); font-weight: 400; }

.h2 {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1.10;
	letter-spacing: -0.012em;
	color: var(--c-ink);
	font-variation-settings: "opsz" 42;
	text-wrap: balance;
}
.h2 em { font-style: italic; color: var(--c-accent); font-weight: 400; }

.lede {
	font-family: var(--ff-body);
	font-weight: 400;
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.55;
	color: var(--c-text-soft);
	text-wrap: pretty;
}

/* Default heading styles for prose / non-home pages */
h1, h2, h3, h4 {
	font-family: var(--ff-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-ink);
}
h1 { font-size: clamp(34px, 4.6vw, 60px); }
h2 { font-size: clamp(28px, 3.6vw, 46px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }
h4 { font-size: 17px; }

/* ─── 5. Reveal-on-scroll ──────────────────────────────────────────── */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }

/* ─── 6. Wordmark + monogram ───────────────────────────────────────── */
.wordmark {
	font-family: var(--ff-display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.008em;
	color: currentColor;
	font-variation-settings: "opsz" 40;
	white-space: nowrap;
	display: inline-block;
}
.mark-ring { display: inline-block; vertical-align: middle; }

/* ─── 7. Buttons ───────────────────────────────────────────────────── */
.btn {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 14px 22px;
	border-radius: 2px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: background 220ms var(--ease-out),
	            color 220ms var(--ease-out),
	            border-color 220ms var(--ease-out),
	            transform 220ms var(--ease-out);
}
.btn--primary { background: var(--c-accent); color: var(--bone-100); }
.btn--primary:hover { background: var(--c-accent-hover); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-border);
}
.btn--ghost:hover { border-color: var(--c-ink); }
.btn .arrow {
	font-family: var(--ff-display);
	font-weight: 500;
	transition: transform 240ms var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }
.btn--link {
	padding: 0;
	background: transparent;
	color: var(--c-accent);
	border: 0;
	gap: 6px;
}

/* ─── 8. Progress bar ──────────────────────────────────────────────── */
.progress-bar {
	position: fixed; top: 0; left: 0; right: 0;
	height: 2px; z-index: 60;
	pointer-events: none;
}
.progress-bar__fill {
	height: 100%;
	background: var(--c-accent);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 60ms linear;
}

/* ─── 9. Header ────────────────────────────────────────────────────── */
.site-header {
	position: sticky; top: 0;
	z-index: 50;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: oklch(0.972 0.005 80 / 0.78);
	border-bottom: 1px solid transparent;
	transition: border-color 280ms var(--ease-out),
	            background 280ms var(--ease-out),
	            padding 280ms var(--ease-out);
}
.site-header.is-scrolled {
	border-bottom-color: var(--c-divider);
	background: oklch(0.972 0.005 80 / 0.94);
}
.site-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 22px var(--gutter);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 36px;
	transition: padding 280ms var(--ease-out);
}
.site-header.is-scrolled .site-header__inner { padding: 14px var(--gutter); }

.site-brand {
	display: flex; align-items: center; gap: 14px;
	text-decoration: none; color: var(--c-ink);
}
.site-brand__divider {
	width: 1px; height: 26px; background: var(--c-border);
}
.site-brand .wordmark { font-size: 22px; }

.site-nav {
	display: flex; justify-content: center; gap: clamp(20px, 2.6vw, 40px);
}
.site-nav__link {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.01em;
	color: var(--c-text);
	text-decoration: none;
	position: relative;
	padding: 6px 0;
	transition: color 200ms var(--ease-out);
}
.site-nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 1px;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 280ms var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link.is-active { color: var(--c-ink); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }

.site-phone {
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 400;
	font-size: 14px;
	color: var(--c-text-soft);
	text-decoration: none;
	letter-spacing: 0.005em;
	transition: color 200ms var(--ease-out);
}
.site-phone:hover { color: var(--c-accent); }
.site-phone strong {
	font-style: normal;
	font-weight: 500;
	font-family: var(--ff-body);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	display: block;
	margin-bottom: 2px;
}

@media (max-width: 980px) {
	.site-nav, .site-phone { display: none; }
	.site-header__inner { grid-template-columns: 1fr auto; }
	.site-brand .wordmark { font-size: 19px; }
}

/* ─── 9b. Mobile nav (toggle + overlay) ────────────────────────────── */
.nav-toggle { display: none; }
@media (max-width: 980px) {
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		margin-right: -10px;
		justify-self: end;
		color: var(--c-ink);
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	display: block;
	width: 24px; height: 1.5px;
	background: currentColor;
	transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; left: 0; top: -7px; }
.nav-toggle__bars::after  { position: absolute; left: 0; top: 7px; }
body.nav-open .nav-toggle__bars { background: transparent; }
body.nav-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 48;
	background: var(--c-bg);
	padding: calc(env(safe-area-inset-top) + 92px) var(--gutter) calc(env(safe-area-inset-bottom) + 36px);
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 320ms;
	overscroll-behavior: contain;
	overflow-y: auto;
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 981px) { .mobile-nav { display: none; } }

.mobile-nav__list {
	list-style: none; margin: 0; padding: 0;
	border-top: 1px solid var(--c-divider);
}
.mobile-nav__link {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--c-divider);
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(28px, 8vw, 40px);
	line-height: 1.05;
	letter-spacing: -0.012em;
	color: var(--c-ink);
	text-decoration: none;
	font-variation-settings: "opsz" 48;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.mobile-nav__arrow { color: var(--c-accent); font-size: 0.7em; }
.mobile-nav__cta {
	margin-top: auto;
	padding-top: 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}
.mobile-nav__phone {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 18px;
	color: var(--c-text-soft);
	text-decoration: none;
}

/* ─── 10. Side nav rail (≥1100px) ──────────────────────────────────── */
.side-nav {
	position: fixed;
	right: 24px; top: 50%;
	transform: translateY(-50%);
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-end;
}
.side-nav__link {
	display: flex; align-items: center; gap: 12px;
	text-decoration: none;
	color: var(--c-text-muted);
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 9.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: color 220ms var(--ease-out);
}
.side-nav__label {
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
	pointer-events: none;
}
.side-nav__dot {
	width: 8px; height: 8px;
	border-radius: 999px;
	border: 1px solid var(--c-border);
	background: transparent;
	transition: background 220ms var(--ease-out),
	            border-color 220ms var(--ease-out),
	            transform 220ms var(--ease-out);
}
.side-nav__link:hover { color: var(--c-ink); }
.side-nav__link:hover .side-nav__label { opacity: 1; transform: none; }
.side-nav__link:hover .side-nav__dot { border-color: var(--c-ink); }
.side-nav__link.is-active { color: var(--c-accent); }
.side-nav__link.is-active .side-nav__dot {
	background: var(--c-accent);
	border-color: var(--c-accent);
	transform: scale(1.25);
}
.side-nav__link.is-active .side-nav__label { opacity: 1; transform: none; }

.side-nav.on-dark .side-nav__link { color: var(--stone-500); }
.side-nav.on-dark .side-nav__link:hover { color: var(--bone-100); }
.side-nav.on-dark .side-nav__dot { border-color: var(--stone-700); }
.side-nav.on-dark .side-nav__link.is-active { color: var(--brass-300); }
.side-nav.on-dark .side-nav__link.is-active .side-nav__dot {
	background: var(--brass-300);
	border-color: var(--brass-300);
}

@media (max-width: 1100px) { .side-nav { display: none; } }

/* ─── 11. Hero + counters + editorial images ───────────────────────── */
.hero {
	padding: clamp(88px, 12vw, 176px) 0 clamp(72px, 9vw, 128px);
	position: relative;
	overflow: hidden;
}
.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 48px;
	align-items: end;
	position: relative;
	z-index: 2;
}
.hero .display-1 { margin-top: 28px; max-width: 14ch; }
.hero .lede { max-width: 50ch; margin-top: 32px; }
.hero__cta-row {
	margin-top: 44px;
	display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.hero__right {
	display: flex; flex-direction: column;
	align-items: flex-end; gap: 24px;
	text-align: right;
}

.hero__wall {
	position: absolute;
	right: -10%; top: -8%;
	width: clamp(800px, 100vw, 1200px);
	height: clamp(800px, 100vw, 1200px);
	opacity: 0.045;
	pointer-events: none;
	z-index: 0;
	transform: translateY(0);
	will-change: transform;
}

.hero__counters {
	margin-top: clamp(72px, 9vw, 112px);
	padding-top: 28px;
	border-top: 1px solid var(--c-divider);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 4vw, 56px);
}
.counter__num {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(48px, 6.6vw, 84px);
	line-height: 1;
	letter-spacing: -0.026em;
	color: var(--c-ink);
	font-variation-settings: "opsz" 72;
	font-feature-settings: var(--ff-feat-prop);
	display: block;
	margin-bottom: 18px;
}
.counter__num .suf {
	color: var(--c-accent);
	font-style: italic;
	font-size: 0.66em;
	vertical-align: 0.18em;
	margin-left: 4px;
	font-weight: 400;
}
.counter__lab {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	padding-top: 14px;
	border-top: 1px solid var(--c-divider);
	max-width: 22ch;
}

@media (max-width: 880px) {
	.hero__counters { grid-template-columns: 1fr; gap: 28px; }
	.hero__grid { grid-template-columns: 1fr; gap: 56px; align-items: start; }
	.hero__right { align-items: flex-start; text-align: left; }
}

/* Editorial images — sepia treatment global */
.editorial-img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
	filter: sepia(0.20) saturate(0.78) contrast(1.05) brightness(0.96);
	transition: filter 320ms var(--ease-out), transform 6000ms var(--ease-out);
	background: var(--c-surface-alt);
}
.editorial-img.dark-mode {
	filter: grayscale(0.55) sepia(0.18) contrast(1.10) brightness(0.78) saturate(0.7);
	background: var(--stone-800);
}

.hero-portrait { margin: 0; width: 100%; }
.hero-portrait__wrap {
	width: 100%;
	aspect-ratio: 4 / 5.2;
	overflow: hidden;
	border-radius: 2px;
	background: var(--c-surface-alt);
	position: relative;
}
.hero-portrait__wrap::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, oklch(0.972 0.005 80 / 0.18) 100%);
	pointer-events: none;
}
.hero-portrait:hover .editorial-img { transform: scale(1.014); }

.hero-image {
	margin-top: clamp(64px, 8vw, 104px);
	position: relative;
	z-index: 2;
}
.hero-figure { margin: 0; position: relative; }
.hero-figure__wrap {
	width: 100%;
	aspect-ratio: 22 / 9;
	overflow: hidden;
	border-radius: 2px;
	background: var(--c-surface-alt);
	position: relative;
}
.hero-figure__wrap::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 60%, oklch(0.972 0.005 80 / 0.12) 100%);
	pointer-events: none;
}
.hero-figure:hover .editorial-img { transform: scale(1.012); }

.institutional-figure { margin: clamp(56px, 8vw, 96px) 0 0; }
.institutional-figure__wrap {
	width: 100%;
	aspect-ratio: 22 / 9;
	overflow: hidden;
	border-radius: 2px;
	background: var(--stone-800);
	position: relative;
}
.institutional-figure__wrap::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, oklch(0.125 0.007 54 / 0.0) 50%, oklch(0.125 0.007 54 / 0.42) 100%);
	pointer-events: none;
}

/* ─── 12. Ticker marquee ───────────────────────────────────────────── */
.ticker {
	overflow: hidden;
	border-top: 1px solid var(--c-divider);
	border-bottom: 1px solid var(--c-divider);
	background: var(--c-bg);
	padding: 22px 0;
	position: relative;
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}
.ticker__track {
	display: inline-flex; align-items: center; gap: 48px;
	animation: ticker 80s linear infinite;
	white-space: nowrap;
	will-change: transform;
}
.ticker__track > span {
	display: inline-flex; align-items: center; gap: 48px;
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}
.ticker__track .accent { color: var(--c-accent); }
.ticker__track .star {
	color: var(--c-ornament);
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
@keyframes ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ─── 13. Institutional dark spread (Quiénes somos) ────────────────── */
.institutional {
	background: var(--stone-950);
	color: var(--bone-100);
	padding: var(--section-y) 0;
	position: relative;
	overflow: hidden;
}
.institutional::before {
	content: "";
	position: absolute; inset: 0;
	background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.4;
	mix-blend-mode: screen;
	pointer-events: none;
}
.institutional > * { position: relative; z-index: 1; }
.institutional .head {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 56px;
	margin-bottom: clamp(56px, 7vw, 96px);
}
.institutional .head h2 {
	font-family: var(--ff-display);
	font-weight: 300;
	font-size: clamp(32px, 4.2vw, 60px);
	line-height: 1.08;
	letter-spacing: -0.018em;
	color: var(--bone-100);
	max-width: 22ch;
	font-variation-settings: "opsz" 60;
	text-wrap: balance;
}
.institutional .head h2 em { font-style: italic; color: var(--brass-300); font-weight: 300; }

.spread {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	gap: 48px;
	align-items: start;
	position: relative;
}
.spread__rule {
	background: var(--stone-800); width: 1px;
	align-self: stretch;
}
.spread .col p {
	color: var(--stone-300);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 20px;
	max-width: 38ch;
	text-wrap: pretty;
}
.spread .col p strong { color: var(--bone-100); font-weight: 500; }
.spread .col p em { color: var(--brass-300); font-style: italic; }

.dropcap::first-letter {
	font-family: var(--ff-display);
	font-weight: 300;
	font-style: italic;
	font-size: 5.4em;
	line-height: 0.84;
	float: left;
	margin: 8px 12px 0 -4px;
	color: var(--brass-300);
	font-variation-settings: "opsz" 72;
}

@media (max-width: 880px) {
	.institutional .head { grid-template-columns: 1fr; gap: 14px; }
	.spread { grid-template-columns: 1fr; gap: 32px; }
	.spread__rule { display: none; }
}

/* ─── 14. Services tabs ────────────────────────────────────────────── */
.services { padding: var(--section-y) 0; position: relative; }
.services__head {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 56px;
	margin-bottom: clamp(56px, 7vw, 88px);
}
.services__head .right { max-width: 64ch; }
.services__head .h2 { margin-bottom: 24px; }
.services__head .lede { margin-top: 0; }

.services__tabs {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) 2fr;
	gap: clamp(36px, 6vw, 88px);
	align-items: start;
}

.tabs-list {
	list-style: none; margin: 0; padding: 0;
	border-top: 1px solid var(--c-border);
}
.tabs-list li {
	display: block;
	border-bottom: 1px solid var(--c-divider);
}
.tabs-list button {
	width: 100%;
	background: none; border: 0;
	padding: 22px 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.18;
	letter-spacing: -0.010em;
	color: var(--c-text-soft);
	display: grid;
	grid-template-columns: 48px 1fr 14px;
	gap: 16px;
	align-items: baseline;
	transition: color 240ms var(--ease-out);
	font-variation-settings: "opsz" 36;
}
.tabs-list button .num {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 0.72em;
	color: var(--c-accent);
	line-height: 1;
}
.tabs-list button .ind {
	font-family: var(--ff-display);
	font-weight: 300;
	font-style: italic;
	font-size: 0.8em;
	color: var(--c-text-muted);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
	line-height: 1;
}
.tabs-list li.is-active button { color: var(--c-ink); }
.tabs-list li.is-active button .ind {
	opacity: 1;
	transform: none;
	color: var(--c-accent);
}
.tabs-list li:not(.is-active) button:hover { color: var(--c-text); }

.tabs-panels { position: relative; min-height: 540px; }
.panel {
	position: absolute; inset: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(16px);
	transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.panel.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	position: relative;
}
.panel__head {
	display: flex; align-items: baseline; gap: 18px;
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--c-divider);
}
.panel__big-num {
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(60px, 7.4vw, 96px);
	line-height: 0.85;
	color: var(--c-accent);
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 72;
}
.panel__lab {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin-bottom: 6px;
}
.panel h3 {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.06;
	letter-spacing: -0.014em;
	color: var(--c-ink);
	margin: 0;
	font-variation-settings: "opsz" 50;
}
.panel p {
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.68;
	color: var(--c-text);
	margin: 0 0 20px;
	max-width: 56ch;
	text-wrap: pretty;
}
.panel__rows {
	margin-top: 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--c-divider);
}
.panel__rows .lab {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin-bottom: 12px;
}
.panel__rows ul {
	list-style: none; margin: 0; padding: 0;
}
.panel__rows ul li {
	font-family: var(--ff-body);
	font-size: 14px;
	color: var(--c-text);
	line-height: 1.55;
	padding: 6px 0 6px 16px;
	position: relative;
	border-bottom: 1px solid var(--c-divider);
}
.panel__rows ul li:last-child { border-bottom: 0; }
.panel__rows ul li::before {
	content: "";
	position: absolute;
	left: 0; top: 1.05em;
	width: 8px; height: 1px;
	background: var(--c-ornament);
}
.panel__rows .row--who p {
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 400;
	font-size: 17px;
	color: var(--c-text);
	margin: 0;
	line-height: 1.5;
	max-width: 28ch;
}

@media (max-width: 880px) {
	.services__head { grid-template-columns: 1fr; gap: 14px; }
	.services__tabs { grid-template-columns: 1fr; gap: 24px; }
	.tabs-list button { font-size: 22px; padding: 18px 0; }
	.tabs-list button .ind { display: none; }
	.panel { position: relative; }
	.panel:not(.is-active) { display: none; }
	.tabs-panels { min-height: 0; }
	.panel__rows { grid-template-columns: 1fr; }
	.panel__big-num { font-size: 60px; }
}

/* ─── 15. Why (diferenciadores) ────────────────────────────────────── */
.why {
	padding: var(--section-y) 0;
	background: var(--c-surface-alt);
	border-top: 1px solid var(--c-divider);
	border-bottom: 1px solid var(--c-divider);
}
.why__head {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 56px;
	margin-bottom: clamp(56px, 7vw, 88px);
}
.why__head .right { max-width: 64ch; }
.why__head .h2 { margin-bottom: 24px; }

.diff-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--c-border);
}
.diff {
	padding: 36px 36px 48px;
	border-right: 1px solid var(--c-divider);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.diff:last-child { border-right: 0; }
.diff__big-num {
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(72px, 9vw, 132px);
	line-height: 0.78;
	color: var(--c-accent);
	letter-spacing: -0.024em;
	font-variation-settings: "opsz" 72;
	margin-left: -6px;
}
.diff h3 {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.16;
	letter-spacing: -0.010em;
	color: var(--c-ink);
	margin: 0;
	max-width: 18ch;
	text-wrap: balance;
	font-variation-settings: "opsz" 36;
}
.diff h3 em { font-style: italic; color: var(--c-accent); font-weight: 400; }
.diff p {
	font-family: var(--ff-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--c-text);
	margin: 0;
	max-width: 34ch;
	text-wrap: pretty;
}
.diff__footnote {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px dashed var(--c-border);
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 13.5px;
	color: var(--c-text-muted);
	line-height: 1.5;
}

@media (max-width: 880px) {
	.why__head { grid-template-columns: 1fr; gap: 14px; }
	.diff-grid { grid-template-columns: 1fr; }
	.diff { padding: 36px 0; border-right: 0; border-bottom: 1px solid var(--c-divider); }
	.diff:last-child { border-bottom: 0; }
}

/* ─── 16. Closing dark CTA ─────────────────────────────────────────── */
.closing {
	background: var(--stone-950);
	color: var(--bone-100);
	padding: clamp(120px, 18vw, 240px) 0;
	overflow: hidden;
	position: relative;
}
.closing::before {
	content: "";
	position: absolute; inset: 0;
	background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.4;
	mix-blend-mode: screen;
	pointer-events: none;
}
.closing__mark {
	position: absolute;
	right: -10%; top: 50%;
	transform: translateY(-50%);
	width: clamp(540px, 78vw, 880px);
	height: auto;
	opacity: 0.4;
	pointer-events: none;
	z-index: 1;
}
.closing__mark circle {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	stroke-linecap: butt;
}
.closing.is-activated .closing__mark circle {
	transition: stroke-dashoffset 2200ms var(--ease-out);
	stroke-dashoffset: 0;
}
.closing.is-activated .closing__mark circle:nth-child(2) { transition-delay: 120ms; }
.closing.is-activated .closing__mark circle:nth-child(3) { transition-delay: 240ms; }
.closing.is-activated .closing__mark circle:nth-child(4) { transition-delay: 360ms; }

.closing .container { position: relative; z-index: 2; }
.closing__inner { max-width: 740px; }
.closing .display-1 {
	color: var(--bone-100);
	max-width: 14ch;
	margin-top: 28px;
}
.closing .display-1 em { color: var(--brass-300); }
.closing .lede {
	color: var(--stone-300);
	margin-top: 30px;
	max-width: 52ch;
}
.closing__actions {
	margin-top: 48px;
	display: flex; gap: 16px; flex-wrap: wrap;
	align-items: center;
}
.closing .btn--primary {
	background: var(--brass-400);
	color: var(--stone-950);
}
.closing .btn--primary:hover { background: var(--brass-300); }
.closing .btn--ghost {
	color: var(--bone-100);
	border-color: var(--stone-700);
}
.closing .btn--ghost:hover { border-color: var(--bone-100); }
.closing__channel {
	margin-top: 28px;
	padding-top: 14px;
	border-top: 1px solid var(--stone-800);
	max-width: 56ch;
	display: flex; gap: 24px;
	flex-wrap: wrap;
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 14px;
	color: var(--stone-400);
	line-height: 1.5;
}
.closing__channel strong {
	color: var(--brass-300);
	font-weight: 500;
	font-style: normal;
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 4px;
}

/* ─── 17. Site footer colophon ─────────────────────────────────────── */
.site-footer {
	background: var(--c-bg);
	padding: clamp(72px, 9vw, 120px) 0 32px;
	border-top: 0;
	position: relative;
	margin-top: auto;
	flex: 0 0 auto;
}
.site-footer__colophon {
	display: grid;
	grid-template-columns: minmax(280px, 1.8fr) 1fr 1fr 1fr 1fr;
	gap: 48px;
	align-items: start;
	border-top: 1px solid var(--c-border);
	padding-top: 56px;
}
.col-brand .wordmark {
	font-size: clamp(26px, 2.8vw, 38px);
	color: var(--c-ink);
	line-height: 1.0;
	display: block;
	letter-spacing: 0.005em;
	font-variation-settings: "opsz" 40;
}
.col-brand .tag {
	margin-top: 22px;
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 400;
	font-size: 17px;
	color: var(--c-text-soft);
	line-height: 1.45;
	max-width: 24ch;
	letter-spacing: -0.004em;
}
.col-brand .ornament-line {
	width: 56px; height: 1px;
	background: var(--c-ornament);
	margin: 22px 0;
}
.site-footer .col h4 {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin: 0 0 16px;
}
.site-footer .col ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 8px;
}
.site-footer .col a {
	font-family: var(--ff-body);
	font-size: 14.5px;
	color: var(--c-text);
	text-decoration: none;
	line-height: 1.45;
	transition: color 200ms var(--ease-out);
}
.site-footer .col a:hover { color: var(--c-accent); }
.site-footer .col p {
	font-family: var(--ff-body);
	font-size: 14.5px;
	color: var(--c-text);
	margin: 0 0 6px;
	line-height: 1.55;
}
.site-footer .col p strong {
	font-weight: 500;
	color: var(--c-ink);
	display: block;
}

.site-footer__bottom {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid var(--c-divider);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.site-footer__terms {
	display: flex; gap: 24px; flex-wrap: wrap;
}
.site-footer__terms a,
.site-footer__copyright {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	text-decoration: none;
	transition: color 200ms var(--ease-out);
}
.site-footer__terms a:hover { color: var(--c-accent); }

@media (max-width: 600px) {
	.site-footer__colophon { grid-template-columns: 1fr; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ─── 18. Page templates (genéricas + 404 + privacy + terms) ───────── */
.site-main {
	flex: 1 0 auto;
}

.page--default,
.page--fallback,
.page--404 {
	padding-block: clamp(80px, 11vw, 160px) clamp(96px, 13vw, 200px);
}
.page__header {
	max-width: 56rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
	margin-bottom: clamp(48px, 7vw, 88px);
}
.page__eyebrow {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin-bottom: var(--gutter);
	padding-top: 12px;
	border-top: 1px solid var(--c-accent);
	display: inline-block;
}
.page__title { margin-bottom: 20px; }
.page__lede {
	font-size: clamp(17px, 1.35vw, 20px);
	color: var(--c-text-soft);
	max-width: 50ch;
	line-height: 1.55;
}

.page__content { padding-inline: var(--gutter); }

.prose {
	max-width: 44rem;
	margin-inline: auto;
}
.prose > * + * { margin-top: 1.5rem; }
.prose h2 { margin-top: 3rem; font-family: var(--ff-display); font-size: clamp(28px, 3.6vw, 38px); }
.prose h3 { margin-top: 2rem; font-family: var(--ff-display); font-size: clamp(20px, 2.2vw, 24px); }
.prose p { font-size: 17px; line-height: 1.7; color: var(--c-text); text-wrap: pretty; }
.prose a { color: var(--c-accent); text-decoration-color: currentColor; text-underline-offset: 0.24em; }
.prose blockquote {
	margin-block: 2rem;
	padding-left: 1.5rem;
	border-left: 2px solid var(--c-ornament);
	font-family: var(--ff-display);
	font-size: clamp(20px, 2vw, 24px);
	font-style: italic;
	color: var(--c-text-soft);
}
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose ul li, .prose ol li { line-height: 1.7; }
.prose ul li + li, .prose ol li + li { margin-top: 0.5rem; }
.prose hr { border: 0; height: 1px; background: var(--c-divider); margin-block: 3rem; }

/* 404 specific */
.page--404 { text-align: center; }
.page--404 .page__header { margin-bottom: var(--gutter); }
.page-404__nav {
	display: flex; gap: 12px;
	justify-content: center; flex-wrap: wrap;
	margin-top: 32px;
}
.page-404__link {
	padding: 12px 22px;
	border: 1px solid var(--c-border);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--c-ink);
	transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.page-404__link:hover { border-color: var(--c-ink); color: var(--c-accent); }

/* ─── 18b. Quiénes somos (page-quienes-somos) ──────────────────────── */
.qs-hero {
	padding: clamp(88px, 10vw, 124px) 0 clamp(40px, 5vw, 60px);
}
.qs-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
}
.qs-hero .display-1 { margin-top: 16px; max-width: 22ch; }
.qs-hero .lede { margin-top: 20px; max-width: 56ch; }

/* Editorial split (origen / equipo) */
.qs-section { padding: var(--section-y) 0; position: relative; }
.qs-head {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 56px;
	margin-bottom: clamp(48px, 6vw, 80px);
}
.qs-head .right { max-width: 30ch; }
.qs-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(36px, 5vw, 64px);
	align-items: start;
}
.qs-cols .col p {
	font-family: var(--ff-body);
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--c-text);
	margin: 0 0 18px;
	max-width: 42ch;
	text-wrap: pretty;
}
.qs-cols .col p:last-child { margin-bottom: 0; }
.qs-cols .col p strong { font-weight: 500; color: var(--c-ink); }
.qs-cols .col p em { font-style: italic; color: var(--c-accent); }
.qs-cols .dropcap::first-letter { color: var(--c-accent); }

@media (max-width: 880px) {
	.qs-head { grid-template-columns: 1fr; gap: 14px; }
	.qs-cols { grid-template-columns: 1fr; gap: 24px; }
}

/* Proceso (cómo trabajamos) */
.qs-process-list { border-top: 1px solid var(--c-border); }
.qs-step {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: clamp(20px, 4vw, 56px);
	padding: clamp(28px, 4vw, 44px) 0;
	border-bottom: 1px solid var(--c-divider);
	align-items: baseline;
}
.qs-step__num {
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 0.9;
	color: var(--c-accent);
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 60;
}
.qs-step__body { max-width: 60ch; }
.qs-step__body h3 {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--c-ink);
	margin: 0 0 10px;
	font-variation-settings: "opsz" 40;
}
.qs-step__body p {
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--c-text-soft);
	margin: 0;
	text-wrap: pretty;
}

@media (max-width: 720px) {
	.qs-step { grid-template-columns: 1fr; gap: 6px; }
}

/* Link "Conocer la firma" dentro de la sección institucional del home */
.institutional__more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: 18px;
	border-top: 1px solid var(--stone-800);
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--brass-300);
	text-decoration: none;
	transition: color 220ms var(--ease-out);
}
.institutional__more .arrow {
	font-family: var(--ff-display);
	transition: transform 240ms var(--ease-out);
}
.institutional__more:hover { color: var(--bone-100); }
.institutional__more:hover .arrow { transform: translateX(4px); }

/* ─── 18c. Servicios (hub + detalle) ───────────────────────────────── */
/* Hub hero */
.svc-hero { padding: clamp(116px, 15vw, 196px) 0 clamp(48px, 6vw, 80px); }
.svc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: end;
}
.svc-hero .display-1 { margin-top: 26px; max-width: 13ch; }
.svc-hero .lede { max-width: 46ch; }
@media (max-width: 880px) {
	.svc-hero__grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

/* Hub índice de líneas */
.svc-index-wrap { padding: 0 0 var(--section-y); }
.svc-index {
	list-style: none; margin: 0; padding: 0;
	border-top: 1px solid var(--c-border);
}
.svc-index__item { border-bottom: 1px solid var(--c-divider); }
.svc-index__link {
	display: grid;
	grid-template-columns: 64px 1fr 24px;
	gap: clamp(16px, 3vw, 40px);
	align-items: center;
	padding: clamp(28px, 4vw, 48px) 0;
	text-decoration: none;
	color: inherit;
	transition: transform 320ms var(--ease-out);
}
.svc-index__link:hover { transform: translateX(12px); }
.svc-index__num {
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 30px);
	color: var(--c-accent);
	line-height: 1;
	font-variation-settings: "opsz" 36;
}
.svc-index__title {
	display: block;
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 42px);
	line-height: 1.08;
	letter-spacing: -0.014em;
	color: var(--c-ink);
	font-variation-settings: "opsz" 50;
	transition: color 220ms var(--ease-out);
}
.svc-index__link:hover .svc-index__title { color: var(--c-accent); }
.svc-index__tagline {
	display: block;
	margin-top: 8px;
	font-family: var(--ff-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--c-text-muted);
	max-width: 52ch;
}
.svc-index__arrow {
	font-family: var(--ff-display);
	font-size: 22px;
	color: var(--c-text-muted);
	justify-self: end;
	transition: transform 240ms var(--ease-out), color 240ms var(--ease-out);
}
.svc-index__link:hover .svc-index__arrow { transform: translateX(5px); color: var(--c-accent); }
@media (max-width: 600px) {
	.svc-index__link { grid-template-columns: 40px 1fr; }
	.svc-index__arrow { display: none; }
}

/* Detalle — hero */
.svc-detail-hero { padding: clamp(112px, 14vw, 184px) 0 clamp(40px, 5vw, 64px); }
.svc-crumb {
	display: flex; align-items: center; gap: 12px;
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin-bottom: 28px;
}
.svc-crumb a { color: var(--c-accent); text-decoration: none; }
.svc-crumb a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.svc-detail-hero .display-1 { max-width: 16ch; }
.svc-detail-hero .lede { margin-top: 30px; max-width: 56ch; }

/* Detalle — body */
.svc-body { padding: clamp(48px, 7vw, 96px) 0 var(--section-y); }
.svc-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
.svc-body__intro p {
	font-family: var(--ff-body);
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--c-text);
	margin: 0 0 18px;
	max-width: 46ch;
	text-wrap: pretty;
}
.svc-body__intro p:last-child { margin-bottom: 0; }
.svc-body__intro .dropcap::first-letter { color: var(--c-accent); }

.svc-body__aside {
	border-top: 1px solid var(--c-border);
	padding-top: 8px;
}
.svc-block { padding: 24px 0; border-bottom: 1px solid var(--c-divider); }
.svc-block:last-child { border-bottom: 0; }
.svc-block__lab {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin: 0 0 16px;
}
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li {
	font-family: var(--ff-body);
	font-size: 15px;
	color: var(--c-text);
	line-height: 1.5;
	padding: 9px 0 9px 18px;
	position: relative;
	border-bottom: 1px solid var(--c-divider);
}
.svc-list li:last-child { border-bottom: 0; }
.svc-list li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.95em;
	width: 9px; height: 1px;
	background: var(--c-ornament);
}
.svc-who {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 17px;
	line-height: 1.5;
	color: var(--c-text-soft);
	margin: 0;
	max-width: 36ch;
}
@media (max-width: 880px) {
	.svc-body__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Detalle — otras líneas */
.svc-more {
	padding: var(--section-y) 0;
	background: var(--c-surface-alt);
	border-top: 1px solid var(--c-divider);
}
.svc-more__list {
	list-style: none; margin: 28px 0 0; padding: 0;
	border-top: 1px solid var(--c-border);
}
.svc-more__link {
	display: grid;
	grid-template-columns: 48px 1fr 20px;
	gap: 20px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--c-divider);
	text-decoration: none;
	color: inherit;
	transition: transform 320ms var(--ease-out);
}
.svc-more__link:hover { transform: translateX(10px); }
.svc-more__num {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 18px;
	color: var(--c-accent);
	line-height: 1;
}
.svc-more__title {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--c-ink);
	font-variation-settings: "opsz" 40;
	transition: color 220ms var(--ease-out);
}
.svc-more__link:hover .svc-more__title { color: var(--c-accent); }
.svc-more__arrow {
	font-family: var(--ff-display);
	font-size: 18px;
	color: var(--c-text-muted);
	justify-self: end;
	transition: transform 240ms var(--ease-out), color 240ms var(--ease-out);
}
.svc-more__link:hover .svc-more__arrow { transform: translateX(5px); color: var(--c-accent); }

/* ─── 18d. Contacto ────────────────────────────────────────────────── */
.contact-hero { padding: clamp(112px, 14vw, 184px) 0 clamp(36px, 5vw, 60px); }
.contact-hero .display-1 { max-width: 15ch; margin-top: 26px; }
.contact-hero .lede { margin-top: 28px; max-width: 54ch; }

.contact-body { padding: clamp(40px, 6vw, 72px) 0 var(--section-y); }
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
	gap: clamp(36px, 5vw, 80px);
	align-items: start;
}

.contact-channels {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--c-border);
}
.contact-channel {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 0;
	border-bottom: 1px solid var(--c-divider);
	text-decoration: none;
	color: inherit;
	transition: transform 280ms var(--ease-out);
}
a.contact-channel:hover { transform: translateX(8px); }
.contact-channel__lab {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}
.contact-channel__val {
	font-family: var(--ff-display);
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.3;
	color: var(--c-ink);
	transition: color 200ms var(--ease-out);
}
a.contact-channel:hover .contact-channel__val { color: var(--c-accent); }
.contact-channel__hint {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 13.5px;
	color: var(--c-text-muted);
}

/* Form area */
.contact-form-card {
	border: 1px solid var(--c-border);
	border-radius: 2px;
	padding: clamp(24px, 4vw, 40px);
	background: var(--bone-50);
}
.contact-form-card__note {
	font-family: var(--ff-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-text-soft);
	margin: 0 0 28px;
	padding: 14px 16px;
	background: var(--c-accent-soft);
	border-left: 2px solid var(--c-accent);
}
.contact-form-card__note strong { color: var(--c-accent-press); }
.contact-form-card__note a { color: var(--c-accent); }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-field > span {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--c-text);
}
.cf-field > span small { color: var(--c-text-muted); font-weight: 400; letter-spacing: 0; }
.cf-field input,
.cf-field select,
.cf-field textarea {
	font-family: var(--ff-body);
	font-size: 15px;
	color: var(--c-ink);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: 2px;
	padding: 12px 14px;
	transition: border-color 200ms var(--ease-out);
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus { border-color: var(--c-accent); outline: none; }
.cf-field textarea { resize: vertical; min-height: 120px; }
.cf-field input:disabled,
.cf-field select:disabled,
.cf-field textarea:disabled {
	background: var(--c-surface-alt);
	color: var(--c-text-muted);
	cursor: not-allowed;
}
.cf-consent {
	display: flex; gap: 12px; align-items: flex-start;
	font-family: var(--ff-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-text-soft);
}
.cf-consent input { margin-top: 3px; flex: 0 0 auto; }
.cf-consent a { color: var(--c-accent); }
.contact-form .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.contact-form .btn:disabled:hover { background: var(--c-accent); }

@media (max-width: 880px) {
	.contact-grid { grid-template-columns: 1fr; gap: 40px; }
	.cf-row { grid-template-columns: 1fr; }
}

/* Mapa */
.contact-map-wrap { padding: 0 0 var(--section-y); }
.contact-map {
	border: 1px solid var(--c-border);
	border-radius: 2px;
	overflow: hidden;
	line-height: 0;
	filter: grayscale(0.35) contrast(1.02);
}
.contact-map iframe { display: block; width: 100%; }

/* ─── 18e. Legales — hub ────────────────────────────────────────────── */
.legal-hub { padding: clamp(112px, 14vw, 184px) 0 var(--section-y); }
.legal-hub__list {
	list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0;
	border-top: 1px solid var(--c-border);
}
.legal-hub__link {
	display: grid;
	grid-template-columns: 1fr 24px;
	gap: 24px;
	align-items: center;
	padding: clamp(24px, 3.5vw, 40px) 0;
	border-bottom: 1px solid var(--c-divider);
	text-decoration: none;
	color: inherit;
	transition: transform 300ms var(--ease-out);
}
.legal-hub__link:hover { transform: translateX(12px); }
.legal-hub__title {
	display: block;
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(22px, 2.8vw, 32px);
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--c-ink);
	font-variation-settings: "opsz" 42;
	transition: color 220ms var(--ease-out);
}
.legal-hub__link:hover .legal-hub__title { color: var(--c-accent); }
.legal-hub__desc {
	display: block;
	margin-top: 8px;
	font-family: var(--ff-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--c-text-muted);
	max-width: 56ch;
}
.legal-hub__arrow {
	font-family: var(--ff-display);
	font-size: 20px;
	color: var(--c-text-muted);
	justify-self: end;
	transition: transform 240ms var(--ease-out), color 240ms var(--ease-out);
}
.legal-hub__link:hover .legal-hub__arrow { transform: translateX(5px); color: var(--c-accent); }

/* Documento legal — refinos sobre .prose */
.page--legal .page__content.prose { max-width: 50rem; }
.page--legal .prose h2 { font-size: clamp(22px, 2.6vw, 30px); }
.page--legal .prose h2:first-child { margin-top: 0; }

/* ─── 19. WhatsApp float (non-home pages) ──────────────────────────── */
.wa-float {
	position: fixed;
	bottom: 24px; right: 24px;
	width: 52px; height: 52px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--c-ink);
	color: var(--bone-100);
	border-radius: 50%;
	box-shadow: 0 6px 20px color-mix(in oklch, var(--c-ink), transparent 70%);
	z-index: 55;
	text-decoration: none;
	transition: transform 220ms var(--ease-out), background 200ms var(--ease-out);
}
.wa-float:hover { transform: translateY(-2px); background: var(--c-accent); }

.home .wa-float { display: none; } /* La home tiene su propio CTA WhatsApp en el closing */

/* ─── 20. Accessibility utilities ──────────────────────────────────── */
.sr-only-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; top: 0; left: 0;
	padding: 8px 16px;
	background: var(--c-ink); color: var(--bone-100);
	text-decoration: none; z-index: 100;
}
.skip-link:focus { outline: 2px solid var(--bone-100); outline-offset: -4px; }

/* ─── 21. 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;
	}
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	.ticker__track { animation: none; }
	.hero__wall { transform: none !important; }
}