/* =============================================================================
   KRAK STUDIO — Sistema de diseño (SPEC §1) + Header, Hero, Marcas, Dolores,
   Posicionamiento y ADN inmobiliario (§3–§8).
   Regla de oro: ningún color, radio, sombra, tamaño o duración fuera de §1.
   ============================================================================= */

/* ── Reset propio ────────────────────────────────────────────────────────────
   Va primero y es obligatorio: el tema ya no carga el runtime de Tailwind, y
   era su preflight el que aportaba border-box. Sin esto, cualquier elemento con
   width:100% + padding lateral (empezando por .k-wrap / .k-wrap-wide, que
   suman 2 × --gutter) se pasa del ancho del viewport y aparece scroll
   horizontal en toda la página.
   ──────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── 1.2 Rampas de marca ─────────────────────────────────────────────────── */
:root {
	--blue-900:#08407c; --blue-800:#1c5288; --blue-700:#396696;
	--blue-500:#6a8cb0; --blue-300:#9cb2ca; --blue-100:#cdd8e4; --blue-050:#eef3f8;

	--slate-700:#7c8594; --slate-500:#969da9; --slate-300:#b0b5be;
	--slate-200:#caced4; --slate-100:#e4e6e9;

	--steel-800:#4e586e; --steel-600:#5f687c; --steel-400:#838a99;
	--steel-300:#a6abb6; --steel-200:#c9ccd3;

	--gray-400:#c3c3c3; --gray-300:#cfcfcf; --gray-200:#dbdbdb;
	--gray-150:#e7e7e7; --gray-100:#f3f3f3;

	--ink-900:#14161c; --ink-800:#1c2230; --white:#ffffff;

	/* Tokens semánticos de la unidad Studio */
	--st-principal:      #ffffff;
	--st-superficie-alt: #f6f7f9;
	--st-superficie-soft:#f8f9fa;
	--st-fondo:          #eaedf0;
	--st-borde:          #d6dbe2;
	--st-borde-control:  #808a9a;

	--st-accent:       #08407c;
	--st-accent-2:     #396696;
	--st-accent-soft:  #cdd8e4;
	--st-accent-wash:  #eef4fb;
	--st-accent-vivid: #0f62c4;
	--st-accent-light: #7fb0ff;
	--st-ink:          #0d0f14;
	--st-ink-raise:    #171a21;

	--st-text:       #10131a;
	--st-text-muted: #4d5665;
	--st-text-faint: #646c7a;

	--focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #08407c;

	/* 1.1 Tipografía */
	--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* 1.3 Espaciado */
	--section-y: clamp(4.5rem, 9vw, 9.5rem);
	--gutter:    clamp(1.25rem, 4vw, 3rem);
	--maxw:      1240px;

	/* 1.4 Radios */
	--r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

	/* 1.5 Sombras */
	--shadow-1: 0 1px 2px rgb(20 22 28 / .04), 0 1px 1px rgb(20 22 28 / .03);
	--shadow-2: 0 2px 4px rgb(20 22 28 / .04), 0 6px 14px -6px rgb(20 22 28 / .08);
	--shadow-3: 0 1px 2px rgb(20 22 28 / .05), 0 10px 22px -8px rgb(20 22 28 / .12),
	            0 30px 60px -30px rgb(8 64 124 / .16);
	--shadow-4: 0 2px 4px rgb(20 22 28 / .05), 0 18px 40px -12px rgb(20 22 28 / .16),
	            0 48px 90px -40px rgb(8 64 124 / .24);

	/* 1.6 Easings */
	--ease-out-soft:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	-webkit-text-size-adjust: 100%;
}

body.k-body {
	margin: 0;
	font-family: var(--font-sans);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background: #ffffff;
	color: #10131a;
	/* `clip`, NO `hidden`. `hidden` convierte al body en contenedor de scroll
	   (overflow-y pasa a auto) y rompe TODO position:sticky de la página
	   —Estrategia y el aside del FAQ—. `clip` recorta sin crear contenedor de
	   scroll, así que el sticky sigue vivo.
	   Hace falta porque el estado oculto de data-reveal="right" espera
	   desplazado 24px a la derecha (§2.1) y en mobile eso desborda hasta que
	   el elemento entra. */
	overflow-x: clip;
}

/* Los resets van envueltos en :where() a propósito: así quedan en especificidad
   de clase y cualquier regla de componente posterior les gana. Sin esto,
   `.k-body h2` (0,1,1) pisaría a `.k-head__title` (0,1,0) y la escala
   tipográfica de §1.1 no se aplicaría. */
.k-body :where(h1, h2, h3, h4) {
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.06;
	text-wrap: balance;
}
.k-body :where(p) { margin: 0; text-wrap: pretty; }
.k-body :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.k-body :where(img, video, svg) { display: block; max-width: 100%; }
.k-body :where(a) { color: inherit; text-decoration: none; }
.k-body :where(button, input, select, textarea) { font: inherit; color: inherit; }
.k-body :where(blockquote, figure) { margin: 0; }

/* ── 1.13 Accesibilidad ──────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #08407c;
	border-radius: 6px;
}
::selection { background: #08407c; color: #fff; }

.k-skip {
	position: fixed;
	top: .75rem; left: .75rem;
	z-index: 200;
	background: #08407c;
	color: #fff;
	font-size: 14px; font-weight: 600;
	border-radius: 6px;
	padding: .7rem 1.1rem;
	transform: translateY(-160%);
	transition: transform .25s ease;
}
.k-skip:focus-visible { transform: translateY(0); }

.k-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 1.3 Contenedores ────────────────────────────────────────────────────── */
.k-wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.k-wrap-wide {
	width: 100%;
	max-width: 1480px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.k-section { padding-block: var(--section-y); position: relative; }

/* ── 1.1 Encabezados de sección ──────────────────────────────────────────── */
.k-head { display: grid; gap: 1.15rem; }
.k-head--center { justify-items: center; text-align: center; }
.k-head__title {
	font-size: clamp(2.125rem, 1.35rem + 3.4vw, 4rem);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -0.035em;
	color: var(--st-text);
}
.k-head--center .k-head__title { margin-inline: auto; }
.k-head__lead {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	font-weight: 400;
	line-height: 1.62;
	color: var(--st-text-muted);
	max-width: 56ch;
}

/* ── 1.1 Eyebrow ─────────────────────────────────────────────────────────── */
.k-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--st-text-faint);
	margin: 0;
}
.k-eyebrow::before {
	content: '';
	flex: none;
	width: 1.75rem;
	height: 1px;
	background: var(--st-accent);
}
.k-eyebrow--plain::before { content: none; }
.k-eyebrow--on-dark { color: var(--st-accent-light); }
.k-eyebrow--on-dark::before { background: var(--st-accent-light); }

/* ── 1.7 Botones ─────────────────────────────────────────────────────────── */
.k-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .95rem 1.6rem;
	border-radius: 6px;
	border: 1px solid transparent;
	background: #08407c;
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: -.01em;
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	box-shadow: var(--shadow-2);
	transition: transform .4s var(--ease-out-expo), box-shadow .4s var(--ease-out-expo),
	            background-color .3s var(--ease-out-soft), color .3s var(--ease-out-soft),
	            border-color .3s var(--ease-out-soft);
}
.k-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .18) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform .7s var(--ease-out-expo);
}
.k-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); background-color: #062f5c; }
.k-btn:hover::after { transform: translateX(120%); }
.k-btn:active { transform: translateY(0); }

.k-btn--outline {
	background: transparent;
	color: #08407c;
	border-color: #08407c;
	box-shadow: none;
}
.k-btn--outline:hover { background-color: #08407c; color: #fff; box-shadow: var(--shadow-2); }

.k-btn--ghost-dark {
	background: transparent;
	color: #fff;
	border-color: rgb(255 255 255 / .28);
	box-shadow: none;
}
.k-btn--ghost-dark:hover { background-color: #fff; color: #0d0f14; border-color: #fff; }

.k-btn--sm { padding: .65rem 1.15rem; font-size: .875rem; }

/* ── 1.8 Card base ───────────────────────────────────────────────────────── */
.k-card {
	position: relative;
	background: #ffffff;
	border: 1px solid #d6dbe2;
	border-radius: 16px;
	transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo),
	            border-color .4s var(--ease-out-soft);
}
.k-card:hover { transform: translateY(-4px); border-color: #08407c; box-shadow: var(--shadow-3); }

/* ── 1.9 Subrayado del sistema ───────────────────────────────────────────── */
.k-underline {
	position: relative;
	display: inline-block;
	padding-bottom: .55rem;
}
.k-underline::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	height: 2px;
	width: 2rem;
	background: #08407c;
	transition: width .55s var(--ease-out-expo);
}

/* ── 1.10 Rieles editoriales ─────────────────────────────────────────────── */
.k-rails { display: none; }
@media (min-width: 1024px) {
	.k-rails {
		position: absolute;
		inset-block: 0;
		left: 50%;
		transform: translateX(-50%);
		width: min(100% - (2 * var(--gutter)), 1240px);
		display: flex;
		justify-content: space-between;
		pointer-events: none;
		z-index: 0;
	}
	.k-rails span {
		width: 1px;
		background: linear-gradient(to bottom, transparent,
			color-mix(in srgb, #d6dbe2 85%, transparent) 12%,
			color-mix(in srgb, #d6dbe2 85%, transparent) 88%, transparent);
	}
}

/* ── 1.11 Textura de grano ───────────────────────────────────────────────── */
.k-grain { position: relative; }
.k-grain::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: .55;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
	background-size: 140px 140px;
}
.k-grain--on-dark::before { opacity: .4; mix-blend-mode: overlay; }

/* ── 1.12 Placeholders ───────────────────────────────────────────────────── */
.k-ph {
	display: grid;
	place-items: center;
	width: 100%;
	background-color: #eaedf0;
	background-image: repeating-linear-gradient(-45deg, transparent 0 10px,
		color-mix(in srgb, #d6dbe2 60%, transparent) 10px 11px);
	border: 1px dashed #d6dbe2;
	border-radius: 10px;
}
.k-ph__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--st-text-muted);
	background: color-mix(in srgb, #ffffff 88%, transparent);
	border: 1px solid #d6dbe2;
	border-radius: 999px;
	padding: .3rem .7rem;
	text-align: center;
}
.k-ph--dark {
	background-color: #171a21;
	background-image: repeating-linear-gradient(-45deg, transparent 0 10px,
		rgb(255 255 255 / .06) 10px 11px);
	border-color: rgb(255 255 255 / .16);
}

/* ── 2.1 Sistema de reveals (gateado detrás de html.js) ──────────────────── */
.js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	will-change: opacity, transform;
}
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(24px, 0, 0); }
.js [data-reveal="scale"] { transform: translate3d(0, 18px, 0) scale(0.97); }

.js [data-reveal].is-ready {
	opacity: 1 !important;
	transform: none !important;
}

/* ── 2.6 Text scroll fill ────────────────────────────────────────────────── */
.js .k-fillw { opacity: .16; }

/* ── 2.3 Cursor personalizado ────────────────────────────────────────────── */
.k-cursor {
	position: fixed;
	top: 0; left: 0;
	width: 14px; height: 14px;
	margin: -7px 0 0 -7px;
	z-index: 9999;
	pointer-events: none;
	mix-blend-mode: difference;
	opacity: 0;
	transition: opacity .3s var(--ease-out-soft);
}
html.k-cursor-on .k-cursor { opacity: 1; }
.k-cursor span {
	display: block;
	width: 100%; height: 100%;
	border-radius: 50%;
	background: #ffffff;
	transform: scale(1);
	transition: transform .45s var(--ease-out-expo);
}
.k-cursor.is-hot  span { transform: scale(3.2); }
.k-cursor.is-text span { transform: scale(0.55); }
.k-cursor.is-down span { transform: scale(2.2); }
html.k-cursor-on,
html.k-cursor-on .k-body :where(a, button, div, span, section, header, footer, li, h1, h2, h3, p, svg) { cursor: none; }
html.k-cursor-on .k-body :where(input, textarea, select) { cursor: auto; }
@media not all and ((hover: hover) and (pointer: fine)) {
	.k-cursor { display: none; }
}

/* =============================================================================
   §3 HEADER
   ============================================================================= */
.k-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 90;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .5s var(--ease-out-soft), border-color .5s var(--ease-out-soft),
	            box-shadow .5s var(--ease-out-soft), backdrop-filter .5s var(--ease-out-soft);
}
.k-header.is-stuck {
	background: color-mix(in srgb, #ffffff 82%, transparent);
	-webkit-backdrop-filter: saturate(1.6) blur(16px);
	backdrop-filter: saturate(1.6) blur(16px);
	border-bottom-color: #d6dbe2;
	box-shadow: 0 1px 0 rgb(255 255 255 / .6), 0 10px 30px -18px rgb(20 22 28 / .35);
}
.k-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	height: 5.25rem;
	transition: height .5s var(--ease-out-expo);
}
.k-header.is-stuck .k-header__inner { height: 4.25rem; }

/* 3.3 Logo */
.k-logo {
	display: inline-flex;
	align-items: center;
	color: var(--st-accent);
	flex: none;
}
.k-lockup { display: inline-flex; align-items: center; gap: .6rem; }
.k-lockup__mark {
	flex: none;
	width: 1.55rem;
	height: 1.9375rem;
	transition: transform .6s var(--ease-out-expo);
}
.k-logo:hover .k-lockup__mark { transform: scale(1.07); }
.k-lockup__word {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	font-size: 15px;
	letter-spacing: .14em;
	line-height: 1;
}
.k-lockup__word b { font-weight: 900; }
.k-lockup__word > span {
	font-weight: 400;
	letter-spacing: .2em;
	color: var(--st-accent-2);
}

/* 3.4 Nav */
/* margin-inline: auto (no sólo -start): el espacio libre se reparte igual a los
   dos lados, así el nav queda centrado entre el logo y el bloque de acciones. */
.k-nav {
	display: none;
	margin-inline: auto;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.k-nav a {
	position: relative;
	display: inline-block;
	padding-block: .35rem;
	font-size: .875rem;
	font-weight: 500;
	color: var(--st-text);
	transition: color .3s var(--ease-out-soft);
}
.k-nav a::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	height: 1.5px;
	width: 0;
	background: var(--st-accent);
	transition: width .45s var(--ease-out-expo);
}
.k-nav a:hover { color: var(--st-accent); }
.k-nav a:hover::after { width: 100%; }

/* 3.5 / 3.6 Acciones */
.k-header__actions { display: none; align-items: center; gap: 1.25rem; }
.k-header__mail {
	font-size: .875rem;
	font-weight: 500;
	color: var(--st-text-muted);
	transition: color .3s var(--ease-out-soft);
}
.k-header__mail:hover { color: var(--st-accent); }

/* 3.7 Burger */
.k-burger {
	margin-inline-start: auto;
	flex: none;
	display: grid;
	place-content: center;
	gap: 5px;
	width: 2.75rem;
	height: 2.75rem;
	background: color-mix(in srgb, #ffffff 70%, transparent);
	border: 1px solid #808a9a;
	border-radius: 6px;
	color: var(--st-text);
	cursor: pointer;
	padding: 0;
}
/* :not(.k-sr) es necesario: el span de lectores de pantalla vive dentro del
   botón y si no se lo excluye se dibuja como una tercera barra. */
.k-burger span:not(.k-sr) {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: transform .4s var(--ease-out-expo);
}
.k-burger[aria-expanded="true"] span:nth-of-type(1) { transform: translateY(3.25px) rotate(45deg); }
.k-burger[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* 3.8 Panel mobile */
.k-menu {
	background: #ffffff;
	border-top: 1px solid #d6dbe2;
	border-bottom: 1px solid #d6dbe2;
	box-shadow: var(--shadow-3);
	padding: 1.25rem var(--gutter) 1.75rem;
}
.k-menu[hidden] { display: none; }
.k-menu__list { display: block; }
.k-menu__list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 1rem;
	border-bottom: 1px solid #d6dbe2;
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	opacity: 0;
	transform: translateY(10px);
	animation: k-menu-in .5s var(--ease-out-expo) forwards;
	animation-delay: calc(var(--i) * 55ms + 60ms);
}
.k-menu__list a svg { width: 14px; height: 14px; color: var(--st-accent); flex: none; }
@keyframes k-menu-in { to { opacity: 1; transform: none; } }
.k-menu__foot {
	margin-top: 1.5rem;
	display: grid;
	gap: .9rem;
	justify-items: start;
}
.k-menu__foot a[href^="mailto"] { font-size: 15px; color: var(--st-text-muted); }

/* 3.9 Breakpoint del header */
@media (min-width: 900px) {
	.k-nav, .k-header__actions { display: flex; }
	.k-burger, .k-menu { display: none !important; }
}

/* =============================================================================
   §4 HERO
   ============================================================================= */
.hero {
	position: relative;
	background: #ffffff;
	overflow: hidden;
	padding-top: clamp(7rem, 12vw, 9.5rem);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.hero::after {
	content: '';
	position: absolute;
	top: -30%; left: -10%;
	width: min(60vw, 780px);
	height: min(60vw, 780px);
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle, color-mix(in srgb, #08407c 7%, transparent) 0%, transparent 68%);
}
.hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 980px) {
	.hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: clamp(3rem, 6vw, 5.5rem);
	}
}
.hero__copy { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); justify-items: start; }
.hero__title {
	font-size: clamp(2.5rem, 1.2rem + 5.6vw, 5.25rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.045em;
	color: var(--st-text);
}
.hero__lineWrap { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title em { font-style: normal; color: #08407c; }
.hero__lead {
	max-width: 52ch;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.62;
	color: var(--st-text-muted);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .35rem; }
.hero__note { font-size: .875rem; color: var(--st-text-faint); }

/* 4.4 Panel de video */
.hero__videoFrame {
	border: 1px solid #d6dbe2;
	border-radius: 24px;
	overflow: hidden;
	background: #f6f7f9;
	box-shadow: var(--shadow-4);
	position: relative;
}
.hero__video {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hero__videoPh { aspect-ratio: 4 / 5; border: 0; border-radius: 0; }
.hero__videoTag {
	position: absolute;
	left: 1rem; bottom: 1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .75rem;
	border-radius: 999px;
	background: color-mix(in srgb, #0d0f14 72%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: rgb(255 255 255 / .9);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.hero__videoTag i {
	display: block;
	width: 0.4375rem; height: 0.4375rem;
	border-radius: 50%;
	background: #ff4d4d;
	animation: hero-rec 2s ease-in-out infinite;
}
@keyframes hero-rec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* 4.5 Regla animada */
.hero__rule {
	position: relative;
	z-index: 1;
	height: 1px;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	background: linear-gradient(90deg, #08407c, #d6dbe2 70%, transparent);
	transform-origin: left center;
}
.js .hero__rule { transform: scaleX(0); }

/* =============================================================================
   §5 BANDA DE MARCAS
   ============================================================================= */
.marcas {
	background: #f6f7f9;
	border-block: 1px solid #d6dbe2;
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
	overflow: hidden;
}
.marcas__grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 860px) {
	.marcas__grid {
		grid-template-columns: minmax(0, max-content) 1px minmax(0, 1fr);
		gap: clamp(1.75rem, 3.5vw, 3rem);
	}
}
.marcas__label {
	display: block;
	max-width: 17ch;
	line-height: 1.75;
	color: var(--st-text-muted);
}
.marcas__rule { display: none; }
@media (min-width: 860px) {
	.marcas__rule {
		display: block;
		width: 1px;
		align-self: stretch;
		min-height: 4rem;
		background: linear-gradient(to bottom, transparent 0%, #d6dbe2 16%, #08407c 50%, #d6dbe2 84%, transparent 100%);
	}
}
.marcas__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 90%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 90%, transparent 100%);
}
.marcas__track {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	width: max-content;
	will-change: transform;
	/* 28 marcas por copia (~5000px). La SPEC pedía 44s con 8 placeholders, o sea
	   ~40px/s: con la tira real esa duración dispararía la velocidad a ~110px/s.
	   96s devuelve el ritmo original. Al cambiar la cantidad de marcas, recalcular. */
	animation: k-marquee-scroll 96s linear infinite;
}
@keyframes k-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
.marcas__viewport:hover .marcas__track,
.marcas__viewport:focus-within .marcas__track { animation-play-state: paused; }
/* Cada archivo ya viene normalizado en un lienzo de alto fijo, con el logo
   escalado ópticamente adentro. Por eso acá sólo se fija el alto: el ancho sale
   de la proporción del archivo y no hay dos logos compitiendo por tamaño. */
.marcas__logo {
	display: block;
	flex: none;
	width: auto;
	height: 3rem;
	filter: grayscale(1);
	opacity: .55;
	transition: opacity .4s var(--ease-out-soft), filter .4s var(--ease-out-soft);
}
.marcas__viewport:hover .marcas__logo:hover { opacity: 1; filter: grayscale(0); }

/* =============================================================================
   §6 DOLORES
   ============================================================================= */
.dolores { background: #f8f9fa; }
.dolores .k-head__title { max-width: 22ch; }

/* Base: mobile, reduced-motion y sin JS → columna única centrada. */
.dolores__stack {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	display: grid;
	gap: 1.25rem;
	max-width: 46rem;
	margin-inline: auto;
}
/* .dolor es el wrapper que anima GSAP; .dolor__card es el inner que lleva el
   hover. Nunca poner un transform de :hover sobre el elemento que anima GSAP. */
.dolor__card {
	position: relative;
	height: 100%;
	display: grid;
	align-content: start;
	gap: .85rem;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	background: #ffffff;
	border: 1px solid var(--st-borde);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-2);
	overflow: hidden;
	transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo),
	            border-color .4s var(--ease-out-soft);
}
.dolor__card::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	height: 2px;
	width: 0;
	background: var(--st-accent);
	transition: width .65s var(--ease-out-expo);
}
.dolor__card:hover {
	transform: translateY(-5px);
	border-color: var(--st-accent);
	box-shadow: var(--shadow-3);
}
.dolor__card:hover::after { width: 100%; }

.dolor__count { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem; }
.dolor__num {
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--st-borde);
}
.dolor__total { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; color: var(--st-text-faint); }
.dolor__title {
	font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: var(--st-text);
}
.dolor__body { font-size: 1rem; line-height: 1.62; color: var(--st-text-muted); max-width: 52ch; }
.dolor__sintoma {
	margin-top: .5rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--st-borde);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .75rem;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--st-accent);
}
.dolor__sintoma-label {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--st-text-faint);
}

/* Modo mazo: sólo cuando el JS agrega .is-stacked (≥900px, sin reduced-motion). */
.dolores.is-stacked {
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	align-content: center;
	padding-block: calc(4.25rem + clamp(1.5rem, 4vh, 3rem)) clamp(1.5rem, 4vh, 3rem);
}
.dolores.is-stacked .dolores__stack {
	gap: 0;
	margin-top: clamp(2rem, 4vh, 3rem);
	/* las cards entrantes emergen desde el borde inferior del mazo */
	clip-path: inset(-5rem -5rem 0 -5rem);
}
.dolores.is-stacked .dolor {
	grid-area: 1 / 1;
	align-self: stretch;
	transform-origin: top center;
}

/* =============================================================================
   §7 POSICIONAMIENTO (sección negra)
   ============================================================================= */
.posic {
	position: relative;
	background: #0d0f14;
	color: #fff;
	padding-block: clamp(4.5rem, 9vw, 8rem);
	overflow: hidden;
}
.js .posic[data-blackwipe] { clip-path: inset(0 0 100% 0); }
.js .posic[data-blackwipe].is-ready { clip-path: inset(0 0 0% 0); }
.posic__glow {
	position: absolute;
	top: -20%; right: -10%;
	width: min(55vw, 720px);
	height: min(55vw, 720px);
	pointer-events: none;
	background: radial-gradient(circle, color-mix(in srgb, #7fb0ff 16%, transparent) 0%, transparent 65%);
}
.posic__inner { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.posic__title {
	margin-top: 1.35rem;
	max-width: 20ch;
	font-size: clamp(2rem, 1.15rem + 3.7vw, 4rem);
	line-height: 1.03;
	letter-spacing: -0.035em;
	color: #ffffff;
}
.posic__title [data-scrollfill] { color: #7fb0ff; }
.posic__body { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 900px) {
	.posic__body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
}
.posic__text {
	max-width: 58ch;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	line-height: 1.68;
	color: rgb(255 255 255 / .68);
}
.posic__quote {
	align-self: center;
	max-width: 30ch;
	padding-left: 1.35rem;
	border-left: 2px solid #7fb0ff;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
	line-height: 1.42;
	letter-spacing: -0.025em;
	color: #7fb0ff;
	font-style: normal;
	margin: 0;
}
.posic__quote strong {
	display: inline-block;
	margin-top: .35rem;
	font-weight: 700;
	color: #ffffff;
}
.posic__units {
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid rgb(255 255 255 / .12);
	display: grid;
	gap: 1rem;
}
@media (min-width: 900px) { .posic__units { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.unit {
	position: relative;
	isolation: isolate;
	padding: clamp(1.35rem, 2.4vw, 1.85rem);
	background: rgb(255 255 255 / .03);
	border: 1px solid rgb(255 255 255 / .1);
	border-radius: 16px;
	transition: transform .5s var(--ease-out-expo), background-color .45s var(--ease-out-soft),
	            border-color .45s var(--ease-out-soft);
}
.unit::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(circle 260px at var(--gx, 50%) var(--gy, 50%),
		color-mix(in srgb, #7fb0ff 26%, transparent) 0%, transparent 70%);
	opacity: 0;
	transition: opacity .45s var(--ease-out-soft);
}
.unit:hover {
	transform: translateY(-4px);
	background: rgb(255 255 255 / .06);
	border-color: color-mix(in srgb, #7fb0ff 55%, transparent);
}
.unit:hover::after { opacity: 1; }
.unit i {
	display: block;
	width: 0.4375rem; height: 0.4375rem;
	border-radius: 50%;
	background: #7fb0ff;
	margin-bottom: 1rem;
}
.unit h3 { font-size: 1.0625rem; letter-spacing: -0.025em; color: #fff; }
.unit p { margin-top: .35rem; font-size: 0.875rem; color: rgb(255 255 255 / .55); }

/* =============================================================================
   §8 ADN INMOBILIARIO
   ============================================================================= */
.adn { background: #ffffff; }
.adn .k-head__title { max-width: 14ch; }
.adn__diagram {
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
	display: grid;
	gap: 1.5rem;
	align-items: center;
}
@media (min-width: 1000px) {
	.adn__diagram {
		grid-template-columns: minmax(0, 1fr) clamp(120px, 12vw, 170px) minmax(0, 1.15fr);
		align-items: stretch;
		gap: 0;
	}
}
.adn__origen {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: #eaedf0;
	border: 1px solid #08407c;
	border-radius: 16px;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .6);
}
.adn__origenTitle {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #08407c;
	padding-bottom: 1.1rem;
	margin-bottom: 1.35rem;
	border-bottom: 1px solid color-mix(in srgb, #08407c 25%, transparent);
}
.adn__list { display: grid; gap: .9rem; }
.adn__item {
	display: flex;
	align-items: center;
	gap: .85rem;
	font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.35;
	color: var(--st-text);
}
.adn__disc {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.375rem; height: 1.375rem;
	border-radius: 50%;
	background: #08407c;
	box-shadow: 0 0 0 3px color-mix(in srgb, #08407c 12%, transparent);
}
.adn__disc svg { width: 13px; height: 13px; color: #fff; }

.adn__conn {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: .6rem;
	padding-block: .5rem;
	height: 100%;
}
@media (min-width: 1000px) { .adn__conn { padding-inline: 1rem; } }
.adn__connLabel {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--st-text-faint);
	white-space: nowrap;
}
.adn__arrowH { display: none; width: 100%; height: 24px; color: #08407c; }
.adn__arrowV { display: block; width: 24px; height: 60px; color: #08407c; }
@media (min-width: 1000px) {
	.adn__arrowH { display: block; }
	.adn__arrowV { display: none; }
}

.adn__targets { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .adn__targets { grid-template-rows: repeat(3, minmax(0, 1fr)); height: 100%; } }
.target {
	padding: clamp(1.25rem, 2.2vw, 1.6rem);
	display: grid;
	align-content: center;
	gap: .4rem;
}
@media (min-width: 1000px) {
	.target { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; column-gap: 1rem; row-gap: .15rem; }
	.target h3 { grid-column: 1; }
	.target p { grid-column: 2; grid-row: 1; }
}
.target h3 { font-size: 1.0625rem; letter-spacing: -0.025em; color: var(--st-text); }
.target p { font-size: 0.875rem; line-height: 1.55; color: var(--st-text-muted); }