/* ============================================================
   AMPLI — Luxury Tech design system
   Premium white 65% · Primary blue 25% · Editorial black 8% ·
   Metallic green 2% (highlights only).
   Identity is re-skinnable: change the tokens, keep the build.
   ============================================================ */

/* ── Fonts (self-hosted) ────────────────────────────────────── */
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-italic-400.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-italic-500.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
/* Soporte (para entornos donde Satoshi no esté disponible) — DM Sans, variable. */
@font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
	/* Color — AMPLI brand refresh (Neoro / Norma, jul 2026) — hex oficiales. */
	--bg:          #F5F7FF;   /* Blanco ampli */
	--surface:     #FFFFFF;
	--ink:         #0B0C17;   /* Negro ampli */
	--ink-soft:    #4E5261;
	--blue:        #2A4CF6;   /* Azul ampli (principal) */
	--blue-deep:   #1A34C9;   /* azul intenso derivado para profundidad */
	--blue-mid:    #94A6F9;   /* Azul / lila medio (secundario) */
	--blue-ghost:  #EDF0FE;
	--green:       #70F2AA;   /* Verde Pop (acento) */
	--green-ink:   #0B8F5A;   /* verde legible para texto sobre claro */

	/* Type — Satoshi (principal) + DM Sans (soporte). Sin serif: los acentos
	   "editoriales" usan Satoshi itálica (.serif). */
	--font-display: 'Satoshi', 'DM Sans', 'Helvetica Neue', sans-serif;
	--font-body:    'Satoshi', 'DM Sans', 'Helvetica Neue', sans-serif;
	--font-serif:   'Satoshi', 'DM Sans', sans-serif;

	/* Shape — "curvas" carried over from the current AMPLI site */
	--r-sm: 12px;
	--r-md: 20px;
	--r-lg: 32px;
	--r-xl: 48px;

	--shadow-soft: 0 20px 60px -20px rgb(10 12 40 / .18);
	--shadow-card: 0 8px 30px -12px rgb(10 12 40 / .22);

	--pad-x: clamp(20px, 5vw, 84px);
	--section-gap: clamp(56px, 7vw, 112px);

	--ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ── Reset / base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: clamp(16px, 1.05vw, 18px);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
em.serif, .serif { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }

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

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* Reveal helpers — .line mask reveals driven by GSAP */
.line { display: block; overflow: hidden; }
.line-inner { display: inline-block; will-change: transform; }
html.no-js .line-inner { transform: none !important; opacity: 1 !important; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
	position: relative;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 28px;
	border-radius: 999px;
	font-family: var(--font-body); font-weight: 700; font-size: 15px;
	letter-spacing: .01em;
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .35s, color .35s;
	will-change: transform;
}
.btn span { position: relative; z-index: 1; }
.btn-lg { padding: 17px 34px; font-size: 16px; }
.btn-xl { padding: 20px 44px; font-size: 17px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 30px -10px rgb(42 76 246 / .55); }
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgb(42 76 246 / .6); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--blue); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--green); color: var(--ink); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(11 12 16 / .16); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }
.btn-arrow { transition: transform .3s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ── Kicker / section heads ─────────────────────────────────── */
.kicker {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-soft);
}
.kicker a { color: inherit; }
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.kicker-invert { color: rgb(255 255 255 / .72); }

.section-head { padding: 0 var(--pad-x); margin: 0 auto var(--pad-x); max-width: 1520px; }
.section-head .kicker { margin-bottom: 18px; }
.section-title { font-size: clamp(34px, 5vw, 72px); max-width: 18ch; }
.section-title-sm { font-size: clamp(24px, 3vw, 40px); }
.section-sub { margin-top: 18px; font-size: clamp(17px, 1.4vw, 21px); color: var(--ink-soft); }
/* Salto de línea sólo en desktop (títulos con corte definido a mano). */
@media (max-width: 760px) { br.br-desk { display: none; } }

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	transition: transform .4s var(--ease-out), background-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { background: rgb(245 247 255 / .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 1px 0 rgb(11 12 16 / .06); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px var(--pad-x); max-width: 1680px; margin: 0 auto;
}
.footer-logo { height: clamp(38px, 4.6vw, 58px); width: auto; display: block; }
.brand img.custom-logo { max-height: 40px; width: auto; }

/* Inline brand wordmark (5 paths = letters a·m·p·l·i, en orden L→R). */
.brand { display: inline-flex; }
.brand-logo { height: 30px; width: auto; display: block; overflow: visible; }
.brand-logo path {
	fill: var(--blue);
	transform-box: fill-box; transform-origin: 50% 100%;
	opacity: 0; animation: logo-letter .55s var(--ease-out) forwards;
	transition: fill .3s var(--ease-out);
}
.brand-logo path:nth-of-type(1) { animation-delay: .05s; }
.brand-logo path:nth-of-type(2) { animation-delay: .12s; }
.brand-logo path:nth-of-type(3) { animation-delay: .19s; }
.brand-logo path:nth-of-type(4) { animation-delay: .26s; }
.brand-logo path:nth-of-type(5) { animation-delay: .33s; }
@keyframes logo-letter {
	from { opacity: 0; transform: translateY(32%) scale(.86); }
	to   { opacity: 1; transform: none; }
}
/* Hover: solo cambia de color al verde (no desaparece ni se mueve). */
.brand:hover .brand-logo path { fill: var(--green); }
@media (prefers-reduced-motion: reduce) {
	.brand-logo path { opacity: 1; animation: none !important; }
}

.site-nav { display: flex; align-items: center; gap: 34px; }
.nav-list { display: flex; gap: 30px; }
.nav-list a {
	font-weight: 500; font-size: 15.5px; color: var(--ink);
	position: relative; padding: 4px 0;
}
.nav-list a::after {
	content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
	background: var(--green); transform: scaleX(0); transform-origin: right;
	transition: transform .35s var(--ease-out);
}
.nav-list a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-cta { padding: 11px 24px; font-size: 14px; }

.nav-toggle { display: none; background: none; border: 0; padding: 10px; }
.nav-toggle-bar { display: block; width: 26px; height: 2px; background: var(--ink); margin: 6px 0; transition: transform .3s var(--ease-out), opacity .3s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-nav {
	display: none; flex-direction: column; gap: 22px;
	padding: 24px var(--pad-x) 40px;
	background: var(--bg); box-shadow: 0 30px 40px -20px rgb(11 12 16 / .15);
}
.mobile-nav-list { display: flex; flex-direction: column; gap: 14px; }
.mobile-nav-list a { font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.mobile-nav[data-open] { display: flex; }
.site-header:has(.mobile-nav[data-open]) { background: var(--bg); }

@media (max-width: 900px) {
	.site-nav { display: none; }
	.nav-toggle { display: block; }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(120px, 16vh, 180px) var(--pad-x) clamp(80px, 10vh, 140px);
	overflow: clip;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.hero-orb-blue { width: 46vw; height: 46vw; right: -12vw; top: -14vw; background: radial-gradient(circle, rgb(42 76 246 / .35), transparent 70%); }
.hero-orb-green { width: 30vw; height: 30vw; left: -10vw; bottom: -8vw; background: radial-gradient(circle, rgb(112 242 170 / .28), transparent 70%); }

/* Hero centrado (estilo hubb.mx) */
.hero-inner {
	position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: clamp(34px, 5vw, 68px); max-width: 1120px; margin: 0 auto; width: 100%;
}
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-copy .kicker { margin-bottom: 24px; }
.hero-title {
	font-size: clamp(48px, 8vw, 124px);
	font-weight: 600; letter-spacing: -0.03em; line-height: .98;
}
.hero-title-accent { font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--blue); letter-spacing: -0.02em; }
.hero-sub { margin: 28px auto 0; font-size: clamp(18px, 1.6vw, 24px); color: var(--ink-soft); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; justify-content: center; }

.hero-stats { display: flex; gap: clamp(28px, 4vw, 64px); margin: 64px 0 0; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dt { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 40px); color: var(--ink); order: 1; }
.hero-stats dd { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); order: 2; max-width: 16ch; }

.hero-reels { position: relative; height: clamp(300px, 38vh, 440px); width: 100%; max-width: 680px; margin: 0 auto; }
.hero-reel {
	position: absolute; margin: 0;
	width: clamp(150px, 17vw, 224px); aspect-ratio: 9 / 16;
	border-radius: var(--r-md); overflow: hidden;
	box-shadow: var(--shadow-soft);
	background: var(--blue-ghost);
}
.hero-reel video, .hero-reel img { width: 100%; height: 100%; object-fit: cover; }
.hero-reel-1 { left: 4%; top: 12%; rotate: -8deg; z-index: 2; }
.hero-reel-2 { left: 50%; translate: -50% 0; top: 0; rotate: 2deg; z-index: 3; }
.hero-reel-3 { right: 4%; top: 10%; rotate: 8deg; z-index: 1; }
.hero-reel-tag {
	position: absolute; left: 10px; bottom: 10px;
	background: rgb(255 255 255 / .9); backdrop-filter: blur(8px);
	color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em;
	padding: 5px 10px; border-radius: 999px;
}

/* Transición al blanco de la sección siguiente: degradé suave en vez de la curva
   SVG, que leía como un separador raro entre el hero y el board. */
.hero::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
	height: clamp(120px, 16vh, 220px);
	background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--surface) 88%);
	pointer-events: none; z-index: 0;
}

@media (max-width: 1020px) {
	.hero-inner { grid-template-columns: 1fr; }
	.hero-reels { height: 320px; max-width: 520px; }
	.hero-stats { flex-wrap: wrap; }
}

/* ── Logos marquee ──────────────────────────────────────────── */
.logos { background: var(--surface); padding: clamp(48px, 6vw, 84px) 0; }
.logos-label { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 34px; padding: 0 var(--pad-x); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: clamp(40px, 5vw, 80px); padding-right: clamp(40px, 5vw, 80px); }
/* Los logos NO van en una caja de tamaño fijo: encajar un wordmark 5:1 (Lenovo,
   Liverpool) y una marca cuadrada (Opera, DAZN) en la misma caja hace que la
   cuadrada se vea el doble de grande. Cada logo se dimensiona por "área"
   aparente — --logo-scale lo calcula logos.php a partir del ratio real de la
   imagen (que debe venir recortada, ver scripts/trim-logos.php). */
.marquee-group { --logo-area: clamp(46px, 4.6vw, 66px); }
.marquee-group li { flex: 0 0 auto; display: grid; place-items: center; height: clamp(54px, 5.8vw, 80px); }
.marquee-group img {
	height: calc(var(--logo-area) * var(--logo-scale, .62)); width: auto; max-width: none;
	filter: grayscale(1) contrast(1.05); opacity: .8; mix-blend-mode: multiply;
	transition: filter .3s, opacity .3s;
}
.marquee-group img:hover { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
	.marquee-group { gap: 36px; padding-right: 36px; --logo-area: 54px; }
	.marquee-group li { height: 84px; }
}

/* ── Content That Performs — UGC carousel (Stories style) ─────── */
/* Blanco como las secciones vecinas: sin background propio heredaba el lavanda
   del body y quedaba una franja de otro color justo detrás del carrusel. */
.performs { background: var(--surface); padding: var(--section-gap) 0; overflow: hidden; }
.performs-head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); padding: 0 var(--pad-x); }
/* max-width: none anula el 18ch de .section-title, pensado para títulos alineados
   a la izquierda; acá el ancho lo pone .performs-head y el bloque va centrado. */
.performs-title { margin: 0 auto; max-width: none; }
.performs-lines { margin: 16px 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2vw, 26px); color: var(--ink-soft); }
.performs-lines span { color: var(--blue); }
.performs-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.performs-track { display: flex; width: max-content; animation: performsMarquee 60s linear infinite; }
.performs-marquee:hover .performs-track { animation-play-state: paused; }
.performs-group { display: flex; align-items: center; gap: clamp(16px, 1.6vw, 26px); padding-left: clamp(16px, 1.6vw, 26px); }
.performs-card {
	position: relative; flex: 0 0 auto;
	width: clamp(184px, 15vw, 236px); aspect-ratio: 9 / 16;
	border-radius: 20px; overflow: hidden; background: #14161f;
	box-shadow: 0 2px 6px rgba(11,12,40,.1), 0 18px 44px rgba(11,12,40,.16);
}
.performs-card video, .performs-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.performs-badge {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
	background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
	font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
}
/* Stories scroll right → left. */
@keyframes performsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .performs-track { animation: none; } }

/* ── Video Wall ─────────────────────────────────────────────── */
.wall { background: var(--surface); padding: var(--section-gap) 0; }
.wall-frame {
	position: relative; margin: 0 auto; max-width: 1680px;
	border-radius: var(--r-xl); overflow: clip;
	background: var(--ink);
	height: clamp(560px, 92vh, 860px);
}
.wall-columns {
	position: absolute; inset: -12% 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 18px);
	padding: 0 clamp(10px, 1.2vw, 18px);
}
.wall-col { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px); will-change: transform; }
.wall-col-2 { translate: 0 -6%; }
.wall-col-4 { translate: 0 -9%; }
.wall-tile { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 9 / 16; background: #14161f; }
.wall-tile video, .wall-tile img { width: 100%; height: 100%; object-fit: cover; }
.wall-tile-tag {
	position: absolute; left: 10px; bottom: 10px;
	background: rgb(11 12 16 / .55); backdrop-filter: blur(8px);
	color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em;
	padding: 5px 10px; border-radius: 999px;
}

.wall-overlay {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: radial-gradient(ellipse at center, rgb(11 12 16 / .32) 0%, rgb(11 12 16 / .12) 55%, transparent 80%);
	padding: var(--pad-x);
}
.wall-card {
	text-align: center; color: #fff; max-width: 760px;
	background: rgb(11 12 16 / .38);
	border: 1px solid rgb(255 255 255 / .14);
	backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
	border-radius: var(--r-lg);
	padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 84px);
	box-shadow: 0 40px 90px -30px rgb(0 0 0 / .5);
}
.wall-title { font-size: clamp(36px, 5.4vw, 76px); letter-spacing: -0.02em; }
.wall-sub { margin-top: 16px; font-size: clamp(16px, 1.6vw, 22px); color: rgb(255 255 255 / .82); }
.wall-metric { color: var(--green); font-family: var(--font-display); font-weight: 700; font-size: 1.25em; margin-right: .18em; }

@media (max-width: 760px) {
	.wall-frame { border-radius: var(--r-lg); height: 78vh; }
	.wall-columns { grid-template-columns: repeat(3, 1fr); }
	.wall-col-4 { display: none; }
}

/* ── Engine (pinned stack) ──────────────────────────────────── */
.engine { padding: var(--section-gap) 0 0; background: var(--surface); }
.engine-stack { position: relative; max-width: 1360px; margin: 0 auto; padding: 0 var(--pad-x) var(--section-gap); }
.engine-card {
	position: sticky; top: 12vh;
	display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 72px);
	align-items: center;
	background: var(--bg);
	border: 1px solid rgb(11 12 16 / .07);
	border-radius: var(--r-lg);
	padding: clamp(32px, 4.5vw, 72px);
	margin-bottom: 26px;
	box-shadow: var(--shadow-card);
	min-height: 62vh;
	overflow: clip;
}
.engine-card-2 { top: 14vh; background: var(--blue-ghost); }
.engine-card-3 { top: 16vh; }
.engine-card-4 { top: 18vh; background: var(--ink); color: #fff; }
.engine-card-4 .engine-card-text { color: rgb(255 255 255 / .75); }
.engine-num {
	font-family: var(--font-serif); font-style: italic; font-size: clamp(48px, 6vw, 96px);
	color: var(--blue); line-height: 1; display: block; margin-bottom: 18px;
}
.engine-card-4 .engine-num { color: var(--green); }
.engine-card-title { font-size: clamp(30px, 3.8vw, 56px); margin-bottom: 16px; }
.engine-card-text { font-size: clamp(16px, 1.4vw, 20px); color: var(--ink-soft); max-width: 40ch; }
.engine-card-media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; max-height: 52vh; justify-self: end; width: 100%; max-width: 420px; background: var(--blue-ghost); }
.engine-card-media img, .engine-card-media video { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
	.engine-card { grid-template-columns: 1fr; min-height: 0; }
	.engine-card-media { max-width: 100%; aspect-ratio: 16 / 10; }
}

/* ── Services index ─────────────────────────────────────────── */
.services { background: var(--surface); padding: var(--section-gap) 0; }
.services-index { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad-x); border-top: 1px solid rgb(11 12 16 / .1); }
.service-row {
	position: relative;
	display: grid; grid-template-columns: 72px 1.1fr 1.4fr 48px; gap: clamp(14px, 2.5vw, 40px);
	align-items: center;
	padding: clamp(26px, 3.4vw, 44px) 0;
	border-bottom: 1px solid rgb(11 12 16 / .1);
	transition: padding-left .4s var(--ease-out);
}
/* Lift the hovered row above its siblings so its preview video always sits
   in front of the next rows' text (each row is its own stacking context). */
.service-row:hover { padding-left: 18px; z-index: 20; }
.service-num { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 1.6vw, 24px); color: var(--ink-soft); transition: color .3s; }
.service-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.02em; transition: color .3s; }
/* padding-right reserves the right zone for the hover phone so descriptions never
   sit under it (the phone spans this row plus its neighbours). */
.service-desc { font-size: clamp(14px, 1.2vw, 17px); color: var(--ink-soft); padding-right: clamp(64px, 9vw, 150px); }
.service-arrow {
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	border: 1.5px solid rgb(11 12 16 / .16); color: var(--ink);
	transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ease-out);
}
.service-row:hover .service-num { color: var(--green-ink); }
.service-row:hover .service-name { color: var(--blue); }
.service-row:hover .service-arrow { background: var(--blue); border-color: var(--blue); color: #fff; transform: rotate(-45deg); }

/* Preview en un frame de iPhone (Dynamic Island), al borde derecho sobre la flecha
   (a la derecha del texto explicativo, sin taparlo). */
.service-preview {
	position: absolute; right: clamp(6px, 1vw, 22px); left: auto; top: 50%;
	width: clamp(120px, 10.5vw, 168px); aspect-ratio: 9 / 19.5;
	padding: 5px; background: #0B0C17;
	border-radius: 30px; overflow: hidden;
	box-shadow: var(--shadow-soft), inset 0 0 0 1.5px rgb(255 255 255 / .12);
	opacity: 0; transform: translateY(-46%) rotate(4deg) scale(.92);
	transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
	pointer-events: none; z-index: 5;
}
/* Dynamic Island: pill negra flotante centrada arriba, por encima del video. */
.service-preview::before {
	content: ''; position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 3;
	width: 30%; min-width: 42px; height: 9px; background: #000; border-radius: 999px;
	box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .08);
}
.service-row:hover .service-preview { opacity: 1; transform: translateY(-50%) rotate(4deg) scale(1); }
.service-preview video { width: 100%; height: 100%; object-fit: cover; border-radius: 25px; }

.services-cta { display: flex; justify-content: center; padding: 56px var(--pad-x) 0; }

@media (max-width: 860px) {
	.service-row { grid-template-columns: 44px 1fr 40px; }
	.service-desc { display: none; }
	.service-preview { display: none; }
}

/* ── LatAm ──────────────────────────────────────────────────── */
.latam { background: var(--surface); padding: 0 0 var(--section-gap); }
.latam-inner {
	position: relative; max-width: 1680px; margin: 0 auto;
	display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 90px);
	align-items: center;
	background: linear-gradient(145deg, var(--blue-deep) 0%, var(--blue) 62%, #2E51F5 100%);
	color: #fff;
	border-radius: var(--r-xl);
	padding: clamp(52px, 7vw, 120px) clamp(28px, 6vw, 110px);
	overflow: clip;
}
.latam-inner::after {
	content: ''; position: absolute; right: -18%; top: -30%;
	width: 60%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, rgb(112 242 170 / .2), transparent 65%);
	pointer-events: none;
}
.latam-title { font-size: clamp(38px, 5.6vw, 84px); margin: 22px 0 30px; letter-spacing: -0.02em; }
.latam-title .serif { color: var(--green); }
.latam-lines { display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px; }
.latam-lines li { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 32px); color: rgb(255 255 255 / .92); }
.latam-sub { color: rgb(255 255 255 / .72); font-size: clamp(15px, 1.3vw, 19px); margin-bottom: 44px; }

.latam-offices { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.latam-offices li {
	background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14);
	border-radius: var(--r-md); padding: 18px 20px;
	display: flex; flex-direction: column; gap: 2px;
	backdrop-filter: blur(6px);
}
.latam-flag { font-size: 22px; margin-bottom: 6px; }
.latam-offices strong { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.latam-offices span:last-child { font-size: 13.5px; color: rgb(255 255 255 / .66); }

.latam-map { position: relative; }
.latam-map svg { width: 100%; max-height: 600px; color: rgb(255 255 255 / .42); }
.latam-dots rect { opacity: .8; }
.marker-core { fill: var(--green); }
.marker-pulse { fill: none; stroke: var(--green); stroke-width: .5; opacity: .8; transform-origin: center; transform-box: fill-box; animation: pulse 2.6s var(--ease-out) infinite; }
.latam-marker:nth-of-type(2) .marker-pulse { animation-delay: .5s; }
.latam-marker:nth-of-type(3) .marker-pulse { animation-delay: 1s; }
@keyframes pulse { 0% { transform: scale(.3); opacity: .9; } 80% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }
.latam-arrow { stroke: var(--green); stroke-width: .35; opacity: .55; }
.latam-city { fill: #fff; font-family: var(--font-display); font-weight: 600; font-size: 3px; letter-spacing: -0.02px; }

@media (max-width: 980px) {
	.latam-inner { grid-template-columns: 1fr; border-radius: var(--r-lg); margin: 0; }
	.latam { padding: 0 0 var(--section-gap); }
	.latam-offices { grid-template-columns: 1fr; }
	.latam-map { max-width: 380px; margin: 0 auto; }
}
.latam, .wall { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ── Content grid ───────────────────────────────────────────── */
.cgrid { background: var(--surface); padding: 0 var(--pad-x) var(--section-gap); }
.cgrid .section-head { padding: 0; }
.cgrid-sub .serif { color: var(--blue); font-size: 1.12em; }
.cgrid-grid {
	max-width: 1520px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px);
}
.cgrid-card { margin: 0; }
.cgrid-media {
	position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 9 / 16;
	background: var(--blue-ghost);
	box-shadow: 0 6px 24px -12px rgb(10 12 40 / .25);
	transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.cgrid-card:hover .cgrid-media { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.cgrid-media video, .cgrid-media img { width: 100%; height: 100%; object-fit: cover; }
.cgrid-sound {
	position: absolute; right: 10px; top: 10px; z-index: 2;
	width: 36px; height: 36px; border-radius: 50%; border: 0;
	display: grid; place-items: center;
	background: rgb(11 12 16 / .55); color: #fff; backdrop-filter: blur(8px);
	opacity: 0; transition: opacity .3s;
}
.cgrid-card:hover .cgrid-sound, .cgrid-sound[data-on] { opacity: 1; }
.cgrid-sound .icon-sound { display: none; }
.cgrid-sound[data-on] .icon-sound { display: block; }
.cgrid-sound[data-on] .icon-muted { display: none; }
.cgrid-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 4px 0; }
.cgrid-brand { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.cgrid-metric { font-size: 12.5px; font-weight: 700; color: var(--green-ink); background: rgb(112 242 170 / .14); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

.cgrid-cta { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 72px); }

@media (max-width: 1080px) { .cgrid-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cgrid-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── CTA ────────────────────────────────────────────────────── */
.cta { padding: 0 var(--pad-x) var(--section-gap); background: var(--surface); }
.cta-inner {
	position: relative; max-width: 1680px; margin: 0 auto; text-align: center;
	background: var(--ink); color: #fff;
	border-radius: var(--r-xl);
	padding: clamp(72px, 10vw, 160px) clamp(24px, 6vw, 120px);
	overflow: clip;
}
.cta-inner::before {
	content: ''; position: absolute; left: 50%; top: -40%; translate: -50% 0;
	width: 80%; aspect-ratio: 2/1; border-radius: 50%;
	background: radial-gradient(ellipse, rgb(42 76 246 / .5), transparent 70%);
	pointer-events: none;
}
.cta-title { position: relative; font-size: clamp(38px, 6.4vw, 96px); letter-spacing: -0.025em; max-width: 16ch; margin: 0 auto; }
.cta-lead { position: relative; margin: 16px auto 0; color: rgb(255 255 255 / .72); font-size: clamp(15px, 1.3vw, 18px); max-width: 46ch; }
.cta-toggle { position: relative; display: inline-flex; gap: 6px; margin: 30px auto 0; padding: 5px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; }
.cta-toggle-btn { padding: 11px 26px; border: 0; border-radius: 999px; background: transparent; color: rgb(255 255 255 / .72); font-family: var(--font-body); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background-color .3s, color .3s; }
.cta-toggle-btn.is-active { background: var(--green); color: var(--ink); }
.cta-actions { position: relative; margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.wa-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wa-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 18px; border-radius: 999px;
	font-size: 14px; font-weight: 700;
	background: rgb(11 12 16 / .05); color: var(--ink);
	border: 1px solid rgb(11 12 16 / .1);
	transition: background-color .3s, transform .3s var(--ease-out);
}
.wa-chip:hover { background: var(--green); transform: translateY(-2px); }
.wa-chip-invert { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .18); }
.wa-chip-invert:hover { background: var(--green); color: var(--ink); }
.wa-flag { font-size: 17px; }

.cta-form { position: relative; max-width: 640px; margin: 32px auto 0; text-align: left; }

/* WPForms "modern" markup is driven by CSS custom properties — override those
   (not the individual rules) so fields, placeholders, labels and the button all
   adapt to the dark CTA card in one shot. !important guarantees the win over the
   plugin's inline per-form <style> block regardless of its specificity. */
.cta-form .wpforms-container-full {
	--wpforms-field-background-color: rgba(255,255,255,0.07) !important;
	--wpforms-field-border-color: rgba(255,255,255,0.20) !important;
	--wpforms-field-text-color: rgba(255,255,255,0.92) !important;
	--wpforms-field-menu-color: #ffffff !important;
	--wpforms-label-color: rgba(255,255,255,0.9) !important;
	--wpforms-label-sublabel-color: rgba(255,255,255,0.6) !important;
	--wpforms-field-border-radius: var(--r-sm) !important;
	--wpforms-button-background-color: var(--green) !important;
	--wpforms-button-background-color-alt: var(--green) !important;
	--wpforms-button-text-color: var(--ink) !important;
	--wpforms-button-text-color-alt: var(--ink) !important;
	--wpforms-button-border-radius: 999px !important;
}
/* Placeholder: modern markup paints it with the field text color; force a softer white. */
.cta-form .wpforms-container input::placeholder,
.cta-form .wpforms-container textarea::placeholder { color: rgba(255,255,255,0.45) !important; opacity: 1; }
/* Native select dropdown renders on the OS surface — keep dark text on white. */
.cta-form .wpforms-container select option { color: var(--ink); background: #fff; }
.cta-form .wpforms-container input:not([type="submit"]),
.cta-form .wpforms-container select,
.cta-form .wpforms-container textarea { padding: 14px 18px; font-family: var(--font-body); }
/* Lighter placeholders so they read clearly on the dark form. */
.cta-form .wpforms-container input::placeholder,
.cta-form .wpforms-container textarea::placeholder { color: rgba(255,255,255,.62) !important; opacity: 1; }
.cta-form .wpforms-container select:invalid,
.cta-form .wpforms-container .wpforms-field-select-style-modern .choices__placeholder { color: rgba(255,255,255,.62) !important; opacity: 1; }
/* WPForms locks the select to a short fixed height that clips our padded text. */
.cta-form .wpforms-container select { height: auto !important; min-height: 52px; }
.cta-form .wpforms-container .wpforms-required-label { color: var(--green) !important; }
.cta-form .wpforms-container input[type="checkbox"],
.cta-form .wpforms-container input[type="radio"] { accent-color: var(--green); }
.cta-form .wpforms-container .wpforms-field { margin-bottom: 18px; }
.cta-form .wpforms-container button[type="submit"] { padding: 16px 38px !important; font-weight: 700; font-size: 16px; transition: transform .3s var(--ease-out), background-color .3s; display: inline-flex !important; align-items: center; justify-content: center; text-align: center; min-width: 172px; line-height: 1; }
.cta-form .wpforms-container button[type="submit"]:hover { transform: translateY(-2px); background: #fff !important; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: #fff; padding: 0 var(--pad-x); }
.footer-inner { max-width: 1520px; margin: 0 auto; padding: clamp(56px, 7vw, 100px) 0 36px; }
.footer-top {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
	padding-bottom: 48px; border-bottom: 1px solid rgb(255 255 255 / .12);
}
.footer-tagline { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 48px); letter-spacing: -0.02em; }
.footer-tagline .serif { color: var(--green); margin-left: 8px; }
.footer-grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 64px);
	padding: 56px 0;
}
.footer-col-brand p { color: rgb(255 255 255 / .6); margin-top: 14px; max-width: 30ch; }
.footer-heading { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .5); margin-bottom: 18px; font-family: var(--font-body); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgb(255 255 255 / .85); transition: color .25s; }
.footer-col a:hover { color: var(--green); }
.footer-offices li { display: flex; align-items: center; gap: 8px; color: rgb(255 255 255 / .85); }
.footer-col .wa-chips { justify-content: flex-start; margin-top: 16px; }
.footer-col .wa-chip { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .16); }
.footer-col .wa-chip:hover { background: var(--green); color: var(--ink); }
.lang-switch { flex-direction: row !important; gap: 12px !important; margin-top: 22px; text-transform: uppercase; font-size: 13px; font-weight: 700; }
.lang-switch .current-lang a { color: var(--green); }
.footer-bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
	padding-top: 28px; border-top: 1px solid rgb(255 255 255 / .12);
	font-size: 13.5px; color: rgb(255 255 255 / .5);
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { color: rgb(255 255 255 / .5); }
.footer-legal a:hover { color: #fff; }
.footer-credit { color: rgb(255 255 255 / .5); }
.footer-credit a { color: rgb(255 255 255 / .8); font-weight: 700; text-decoration: none; transition: color .25s; }
.footer-credit a:hover { color: var(--green); }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Inner pages ────────────────────────────────────────────── */
.page-hero { padding: clamp(150px, 20vh, 240px) var(--pad-x) clamp(48px, 7vw, 96px); max-width: 1520px; margin: 0 auto; }
.page-hero-compact { padding-bottom: clamp(32px, 4vw, 56px); }
.page-hero .kicker { margin-bottom: 20px; }
.page-hero-title { font-size: clamp(40px, 6.4vw, 96px); letter-spacing: -0.025em; max-width: 16ch; }
.page-hero-sub { margin-top: 22px; font-size: clamp(17px, 1.5vw, 22px); color: var(--ink-soft); max-width: 52ch; }
.page-hero-sub-wide { max-width: 64ch; }

/* Services page */
.service-blocks { display: flex; flex-direction: column; gap: var(--section-gap); padding-bottom: var(--section-gap); }
.service-block {
	display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 96px);
	align-items: center; max-width: 1520px; margin: 0 auto; padding: 0 var(--pad-x); width: 100%;
}
.service-block-flip .service-block-media { order: 2; }
.service-block-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 9/16; max-width: 420px; justify-self: center; box-shadow: var(--shadow-soft); background: var(--blue-ghost); width: 100%; }
.service-block-media video { width: 100%; height: 100%; object-fit: cover; }
.service-block-title { font-size: clamp(34px, 4.6vw, 68px); margin: 10px 0 18px; }
.service-block-lead { font-size: clamp(17px, 1.5vw, 22px); color: var(--ink-soft); margin-bottom: 18px; max-width: 46ch; }
.service-block-body { color: var(--ink-soft); margin-bottom: 30px; max-width: 56ch; }
@media (max-width: 860px) { .service-block { grid-template-columns: 1fr; } .service-block-flip .service-block-media { order: 0; } }

/* ── About ──────────────────────────────────────────────────── */
/* Fondo blanco como el resto del sitio: los paneles claros (datos, CTA) tienen
   que contrastar contra blanco, no contra el lavanda del body. */
body.page-template-page-about { background: var(--surface); }
.about-hero { padding: clamp(140px, 18vh, 220px) var(--pad-x) clamp(40px, 5vw, 72px); max-width: 1520px; margin: 0 auto; }
.about-hero .kicker { margin-bottom: 22px; }
.about-hero-title { font-size: clamp(40px, 6vw, 88px); letter-spacing: -0.03em; line-height: 1.02; max-width: 15ch; }
.about-hero-accent { color: var(--blue); }
/* Columna angosta a la izquierda, como el mockup: el texto no cruza la página. */
.about-intro { margin-top: clamp(26px, 3vw, 40px); max-width: 52ch; }
.about-intro p { color: var(--ink-soft); margin: 0 0 16px; font-size: clamp(16px, 1.15vw, 18px); }
.about-intro p:last-child { margin-bottom: 0; }

.about-stats { max-width: 1520px; margin: 0 auto; padding: 0 var(--pad-x) var(--section-gap); }
.about-stats-panel {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px);
	background: var(--blue-ghost); border-radius: var(--r-lg);
	padding: clamp(28px, 3.4vw, 52px) clamp(26px, 3.2vw, 56px);
}
.about-stat { display: flex; flex-direction: column; gap: 6px; }
.about-stat-icon { color: var(--blue); margin-bottom: 12px; }
.about-stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.about-stat-lab { color: var(--ink-soft); font-size: clamp(14px, 1vw, 16px); max-width: 16ch; }

.about-body { padding: 0 var(--pad-x) var(--section-gap); max-width: 1520px; margin: 0 auto; }

.about-team { max-width: 1520px; margin: 0 auto; padding: 0 var(--pad-x) var(--section-gap); }
.about-team-head { margin-bottom: clamp(32px, 4vw, 56px); }
.about-team-head .kicker { margin-bottom: 20px; }
.about-team-title { font-size: clamp(34px, 5vw, 72px); letter-spacing: -0.03em; margin: 0; }
.about-team-brand { color: var(--blue); }
.about-team-sub { margin: 18px 0 0; color: var(--ink-soft); font-size: clamp(16px, 1.2vw, 19px); max-width: 46ch; }

.about-team-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 38px) clamp(18px, 2vw, 32px);
}
.person-photo {
	position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden;
	background: var(--blue-ghost); margin-bottom: 14px;
}
/* Duotono azul para que fotos de fuentes distintas lean como un mismo set.
   Se ajusta con --duotone sin tocar cada imagen. */
.person-photo img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: var(--duotone, grayscale(1) sepia(1) hue-rotate(196deg) saturate(3.4) brightness(.98) contrast(1.06));
	transition: transform .5s var(--ease-out);
}
.person:hover .person-photo img { transform: scale(1.035); }
.person-photo.is-placeholder {
	display: grid; place-items: center;
	background: linear-gradient(155deg, var(--blue-ghost) 0%, var(--blue-mid) 100%);
}
.person-initials {
	font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
	font-size: clamp(28px, 3vw, 44px); color: var(--blue-deep); opacity: .55;
}
.person-name { margin: 0; font-weight: 700; font-size: clamp(14px, 1vw, 16px); letter-spacing: -0.01em; }
.person-role { margin: 3px 0 0; color: var(--blue); font-size: clamp(13px, .95vw, 15px); }

@media (max-width: 1020px) { .about-stats-panel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .about-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  {
	.about-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about-stats-panel { grid-template-columns: 1fr; }
}

/* ── Banda de CTA (About y páginas internas) ─────────────────── */
.cta-band { max-width: 1520px; margin: 0 auto; padding: 0 var(--pad-x) var(--section-gap); }
.cta-band-panel {
	display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px);
	background: var(--blue-ghost); border-radius: var(--r-lg);
	padding: clamp(24px, 2.8vw, 40px) clamp(24px, 3vw, 48px);
}
.cta-band-mark {
	flex: 0 0 auto; display: grid; place-items: center;
	width: clamp(48px, 4.4vw, 68px); aspect-ratio: 1; border-radius: 50%;
	background: var(--blue); box-shadow: 0 10px 28px -10px rgb(42 76 246 / .6);
}
.cta-band-mark svg { width: 52%; height: auto; }
.cta-band-title {
	flex: 1 1 auto; margin: 0;
	font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em;
	font-size: clamp(22px, 2.6vw, 38px); line-height: 1.1; max-width: 18ch;
}
.cta-band-btn { flex: 0 0 auto; margin-left: auto; } /* pegado al borde derecho del panel */
@media (max-width: 720px) {
	.cta-band-panel { flex-wrap: wrap; }
	.cta-band-title { flex-basis: 100%; max-width: none; }
}

/* ── Blog ───────────────────────────────────────────────────── */
.post-grid { max-width: 1520px; margin: 0 auto; padding: 0 var(--pad-x) var(--section-gap); }
.post-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 2.6vw, 40px); }
.post-cards-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.post-card-link { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-md); overflow: hidden; background: var(--surface); border: 1px solid rgb(11 12 16 / .07); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.post-card-link:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.post-card-media { aspect-ratio: 16/9; overflow: hidden; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.post-card-link:hover .post-card-media img { transform: scale(1.04); }
.post-card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.post-card-body time { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.post-card-title { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.18; }
.post-card-body p { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 980px) { .post-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .post-cards { grid-template-columns: 1fr; } }

.pagination { display: flex; justify-content: center; margin-top: 56px; }
.pagination .nav-links, .pagination { gap: 6px; }
.pagination a, .pagination span.current, .pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px;
	border-radius: 999px; font-weight: 700; font-size: 15px;
}
.pagination a:hover { background: var(--blue-ghost); color: var(--blue); }
.pagination .current { background: var(--ink); color: #fff; }

/* Single post */
.post-single { max-width: 920px; margin: 0 auto; padding: clamp(150px, 20vh, 220px) clamp(20px, 4vw, 44px) 0; }
/* content already lives inside the constrained .post-single — don't double-pad it */
.post-single-content { max-width: none; padding-left: 0; padding-right: 0; }
.post-single-head .kicker { margin-bottom: 18px; }
.post-single-title { font-size: clamp(32px, 4.6vw, 60px); letter-spacing: -0.02em; line-height: 1.06; }
.post-single-meta { margin-top: 20px; display: flex; gap: 10px; color: var(--ink-soft); font-size: 14.5px; }
.post-single-hero { margin: 44px 0 0; }
.post-single-hero img { border-radius: var(--r-md); width: 100%; }
.post-single-content { padding: 48px 0 0; }
.post-single-footer { padding: 40px 0 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li a, .tag-list li { font-size: 13px; font-weight: 700; }
.tag-list a { background: var(--blue-ghost); color: var(--blue); border-radius: 999px; padding: 6px 14px; display: inline-block; }
.post-related { max-width: 1360px; margin: 0 auto; padding: var(--section-gap) var(--pad-x); }
.post-related .section-title-sm { margin-bottom: 32px; }

/* Prose (post content + legal pages) */
.prose { max-width: 820px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); font-size: clamp(16.5px, 1.15vw, 19px); line-height: 1.75; color: #23242c; }
.prose h2, .prose h3 { margin: 1.8em 0 .6em; letter-spacing: -0.01em; }
.prose h2 { font-size: clamp(24px, 2.4vw, 34px); }
.prose h3 { font-size: clamp(20px, 1.8vw, 26px); }
.prose p { margin: 0 0 1.2em; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--r-sm); margin: 1.6em auto; }
.prose a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--green); font-family: var(--font-serif); font-style: italic; font-size: 1.15em; color: var(--ink); }
.prose table { border-collapse: collapse; width: 100%; margin: 1.6em 0; font-size: .92em; }
.prose th, .prose td { border: 1px solid rgb(11 12 16 / .12); padding: 10px 14px; text-align: left; }
.prose th { background: var(--blue-ghost); font-weight: 700; }
.page-content { padding-bottom: var(--section-gap); }

/* ── Motion preferences ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.marquee-track { animation: none; }
	.line-inner { transform: none !important; opacity: 1 !important; }
}