/* ============================================================
   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; }
/* scroll-padding: el header es fijo, así que sin esto al saltar a un ancla
   (por ejemplo #contact desde otra página) el título queda tapado. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: clamp(90px, 12vh, 130px); }
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). */
/* Títulos cortados a mano: la segunda línea toma el azul de marca. */
.title-accent { color: var(--blue); }

/* ── 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; overflow: visible; }
.footer-logo path { fill: #fff; transform-box: fill-box; transform-origin: 50% 100%; }
/* Al hover repite el revelado en cascada del logo del header. `backwards` deja
   cada letra invisible durante su delay, que es lo que arma la cascada. */
.footer-logo:hover path { animation: logo-letter .5s var(--ease-out) backwards; }
.footer-logo:hover path:nth-of-type(2) { animation-delay: .07s; }
.footer-logo:hover path:nth-of-type(3) { animation-delay: .14s; }
.footer-logo:hover path:nth-of-type(4) { animation-delay: .21s; }
.footer-logo:hover path:nth-of-type(5) { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
	.footer-logo:hover path { animation: none !important; }
}
.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: clamp(15px, 1.25vw, 19px); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 34px; padding: 0 var(--pad-x); }
/* Dos filas (México y Brasil) que corren en sentidos opuestos. */
.logos-rows { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 36px); }
.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-rev .marquee-track { animation-direction: reverse; }
.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 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, 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); }
/* Sin sombra: las sombras de las tarjetas se sumaban entre sí y teñían de gris
   todo el fondo del slider (el hueco entre tarjetas medía 232,232,235 en vez de
   blanco), y esa banda gris hacía visible el corte en los bordes. */
.performs-card {
	position: relative; flex: 0 0 auto;
	width: clamp(184px, 15vw, 236px); aspect-ratio: 9 / 16;
	border-radius: 20px; overflow: hidden; background: #14161f;
}
.performs-card video, .performs-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El badge va arriba a la derecha: como ícono redondo si la marca lo tiene
   cargado, y si no con el nombre en una píldora. */
.performs-badge {
	position: absolute; top: 12px; right: 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;
}
.performs-badge-icon {
	padding: 0; width: 38px; height: 38px; overflow: hidden;
	box-shadow: 0 2px 10px rgb(11 12 40 / .22), inset 0 0 0 1.5px rgb(255 255 255 / .9);
}
.performs-badge-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 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; }
/* Cuadrada: los cuatro videos del Engine vienen cuadrados de origen, y la caja
 * 4:5 anterior les recortaba arriba y abajo (pedido de Pablo del 6/8). */
.engine-card-media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1 / 1; justify-self: end; width: 100%; max-width: min(420px, 52vh); background: var(--blue-ghost); }
.engine-card-media img, .engine-card-media video { width: 100%; height: 100%; object-fit: contain; }

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

	/* Sin sticky. La pila de tarjetas necesita un viewport alto: en un teléfono
	 * cada tarjeta mide casi lo mismo que la pantalla, así que en vez de apilarse
	 * se tapaban entre sí y se leía la mitad de cada una. Van una abajo de otra. */
	.engine-card,
	.engine-card-2,
	.engine-card-3,
	.engine-card-4 { position: static; top: auto; }
	.engine-card { margin-bottom: 18px; }
}

/* ── 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%;
	/* 9/18 y no 9/19.5: con el frame más largo que el video, `cover` recortaba
	   los costados y se comía los banners de las piezas (creator ads sobre todo). */
	width: clamp(120px, 10.5vw, 168px); aspect-ratio: 9 / 18;
	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%) 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%) scale(1); }
/* contain: la pieza entra entera, sin recortes. Las bandas quedan del color del
   frame, así que se lee como un teléfono reproduciendo el video. */
.service-preview video { width: 100%; height: 100%; object-fit: contain; background: #0B0C17; 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); }
/* En Services la CTA queda pegada al bloque oscuro de TikTok Shop: dos zonas
 * oscuras chocando, y el borde redondeado del panel deja una línea blanca que
 * se lee como un error. Acá sí hace falta aire arriba. */
.service-blocks + .cta { padding-top: var(--section-gap); }
.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. */
/* Misma altura para todos los campos de una fila. El select traía su propio
 * min-height y quedaba 13 px más alto que los inputs de al lado. */
.cta-form .wpforms-container select { height: auto !important; }
.cta-form .wpforms-container input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.cta-form .wpforms-container select { min-height: 52px; box-sizing: border-box; line-height: 22px; }
/* Selector de país del teléfono. Lo dibuja intl-tel-input con fondo blanco, y
 * el color blanco que le ponemos a los campos del formulario se hereda adentro
 * del desplegable: quedaba blanco sobre blanco y sólo se veían las banderas. */
.cta-form .wpforms-container .iti__dropdown-content,
.cta-form .wpforms-container .iti__country-list { background: #fff; color: var(--ink); }
.cta-form .wpforms-container .iti__country,
.cta-form .wpforms-container .iti__country-name,
.cta-form .wpforms-container .iti__dial-code,
.cta-form .wpforms-container .iti__search-input { color: var(--ink) !important; }
.cta-form .wpforms-container .iti__dial-code { opacity: .6; }
.cta-form .wpforms-container .iti__search-input { background: #fff; min-height: 0; }
.cta-form .wpforms-container .iti__country.iti__highlight,
.cta-form .wpforms-container .iti__country[aria-selected="true"] { background: rgb(42 76 246 / .08); }

.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); }
/* ── Selector de idioma (header, mobile y footer) ───────────── */
.lang-switch {
	display: flex; align-items: center; flex-direction: row !important;
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.lang-switch a { transition: color .25s; }

/* Header: tres siglas separadas por una barrita, la activa en negro. */
.lang-switch-header { gap: 0 !important; }
.lang-switch-header .lang-item + .lang-item { margin-left: 9px; padding-left: 9px; border-left: 1px solid rgb(11 12 23 / .16); }
.lang-switch-header a { color: rgb(11 12 23 / .42); }
.lang-switch-header a:hover { color: var(--blue); }
.lang-switch-header .is-current a { color: var(--ink); }

.lang-switch-mobile { gap: 18px !important; }
.lang-switch-mobile a { color: var(--ink-soft); font-size: 15px; }
.lang-switch-mobile .is-current a { color: var(--blue); }

.lang-switch-footer { gap: 12px !important; margin-top: 22px; }
.lang-switch-footer .is-current 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); }
/* ── Services: bloques con identidad fija ───────────────────── */
/* El copy de cada servicio es largo. En vez de una columna de texto corrido, el
 * número, el nombre y el video quedan fijos a la izquierda mientras se lee, y
 * cada bloque ocupa el ancho completo con su propio fondo, así se leen como
 * capítulos y no como un muro. */
.service-blocks { display: block; padding-bottom: 0; }
/* La columna izquierda se ata al ancho del video en vez de tomar una fracción
 * del ancho total: con `.82fr` medía ~490 px y el video 263, así que quedaba un
 * hueco muerto de 200 y pico entre el video y el texto. */
.service-block {
	display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(28px, 3.6vw, 64px);
	align-items: start; padding: clamp(56px, 8vw, 132px) var(--pad-x);
	scroll-margin-top: 0;
	background: var(--surface);
	border-top: 1px solid rgb(11 12 23 / .07);
}
.service-block > * { max-width: 1520px; }
.service-block:nth-child(even) { background: var(--bg); }
/* Con la clase sola perdía contra el :nth-child de arriba y el bloque oscuro
 * salía claro, con el texto blanco encima. */
.service-block.service-block-dark { background: var(--ink); color: #fff; border-top-color: rgb(255 255 255 / .1); }

.service-block-aside { position: sticky; top: clamp(96px, 13vh, 140px); }
.service-block-id { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.service-block-num {
	font-family: var(--font-serif); font-style: italic; font-weight: 500;
	font-size: clamp(30px, 3.4vw, 52px); line-height: 1; color: var(--blue);
}
.service-block-dark .service-block-num { color: var(--green); }
.service-block-title { font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -0.03em; line-height: 1.02; margin: 0; }

/* La caja se dimensiona por el ALTO y el ancho sale del aspecto. Antes tenía
 * ancho fijo y un max-height que la achataba: el aspect-ratio no se cumplía y
 * `cover` recortaba el video por abajo, justo donde va el cierre de la pieza.
 * `contain` es la garantía de que nunca se corte, sea cual sea el video. */
/* Manda el ancho de la columna, y el alto sale del aspecto. El tope por altura
 * de pantalla va sobre el ANCHO para que el aspecto se siga cumpliendo exacto y
 * `contain` no tenga que poner bandas. */
.service-block-media {
	border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 9 / 16;
	width: min(100%, calc(72vh * 9 / 16)); height: auto;
	box-shadow: var(--shadow-soft); background: var(--ink);
}
.service-block-media video { width: 100%; height: 100%; object-fit: contain; }

.service-block-lead {
	font-size: clamp(21px, 2vw, 32px); line-height: 1.24; letter-spacing: -0.02em;
	color: var(--ink); margin: 0 0 clamp(22px, 2.4vw, 34px); max-width: 22ch;
	font-family: var(--font-display); font-weight: 600;
}
.service-block-dark .service-block-lead { color: #fff; }

.service-block-body { color: var(--ink-soft); margin-bottom: 34px; max-width: 62ch; }
.service-block-dark .service-block-body { color: rgb(255 255 255 / .72); }
.service-block-body p { margin: 0 0 16px; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.62; }
/* El primer párrafo entra más grande: baja del titular al cuerpo sin salto. */
.service-block-body > p:first-child { font-size: clamp(17px, 1.3vw, 20px); color: var(--ink); }
.service-block-dark .service-block-body > p:first-child { color: #fff; }

/* Subsección: regla arriba, para que se lea como un capítulo aparte. */
.service-block-body h3 {
	font-family: var(--font-display); font-size: clamp(21px, 1.8vw, 28px); font-weight: 600;
	color: var(--ink); letter-spacing: -0.015em; margin: clamp(38px, 4vw, 56px) 0 14px;
	padding-top: clamp(24px, 2.6vw, 34px); border-top: 1px solid rgb(11 12 23 / .1);
	display: flex; align-items: baseline; gap: 12px;
}
.service-block-body h3::before {
	content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%;
	background: var(--blue); translate: 0 -.15em;
}
.service-block-dark .service-block-body h3::before { background: var(--green); }
.service-block-dark .service-block-body h3 { color: #fff; border-top-color: rgb(255 255 255 / .16); }

/* Cita destacada: una frase del propio texto, sacada del párrafo y puesta en
 * grande. Es lo que corta el bloque de texto y le da respiro. */
.service-block-body blockquote {
	margin: clamp(30px, 3.4vw, 46px) 0; padding: 0 0 0 clamp(18px, 2vw, 28px);
	border-left: 3px solid var(--blue); position: relative;
}
.service-block-body blockquote p {
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(21px, 2.1vw, 31px); line-height: 1.2; letter-spacing: -0.022em;
	color: var(--ink); margin: 0; text-wrap: balance;
}
.service-block-dark .service-block-body blockquote { border-left-color: var(--green); }
.service-block-dark .service-block-body blockquote p { color: #fff; }

.service-block-body h4 {
	font-size: 12.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
	color: var(--blue); margin: 30px 0 0; font-family: var(--font-body);
	display: inline-flex; align-items: center; gap: 9px;
}
.service-block-body h4::before { content: ''; width: 22px; height: 2px; background: var(--blue); border-radius: 2px; }
.service-block-dark .service-block-body h4 { color: var(--green); }
.service-block-dark .service-block-body h4::before { background: var(--green); }

/* La lista de entregables como panel: deja de parecer más texto. */
.service-block-body ul {
	columns: 2; column-gap: clamp(20px, 2.4vw, 40px);
	margin: 16px 0 6px; padding: clamp(20px, 2.2vw, 28px);
	list-style: none; border-radius: var(--r-md);
	background: rgb(42 76 246 / .045); border: 1px solid rgb(42 76 246 / .1);
}
.service-block-dark .service-block-body ul { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .12); }
.service-block-body ul li {
	break-inside: avoid; position: relative; padding-left: 20px; margin-bottom: 10px;
	font-size: clamp(14.5px, 1.02vw, 16px); line-height: 1.45;
}
.service-block-body ul li:last-child { margin-bottom: 0; }
.service-block-body ul li::before {
	content: ''; position: absolute; left: 0; top: .5em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}
.service-block-cta { margin-top: 6px; }
.service-block-dark .service-block-cta { background: var(--green); color: var(--ink); }

/* Hero de la página, con el índice de servicios. */
/* Hero de Services centrado, igual que el del About (pedido de Pablo). */
.page-hero-services { max-width: 1100px; text-align: center; }
.page-hero-services .kicker { justify-content: center; }
.page-hero-services .page-hero-title { max-width: 18ch; margin-inline: auto; }
.page-hero-services .page-hero-lead { margin-inline: auto; }
.page-hero-services .services-jump { justify-content: center; }

.page-hero-lead { margin-top: 22px; max-width: 62ch; }
.page-hero-lead p { font-size: clamp(17px, 1.4vw, 21px); color: var(--ink-soft); margin: 0 0 14px; line-height: 1.6; }
.services-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.services-jump a {
	display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
	border: 1px solid rgb(11 12 23 / .14); font-size: 14.5px; font-weight: 600; color: var(--ink);
	transition: background .25s var(--ease-out), border-color .25s, color .25s, transform .25s var(--ease-out);
}
.services-jump a:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }

@media (max-width: 860px) {
	.service-block { grid-template-columns: 1fr; gap: 22px; padding: clamp(44px, 11vw, 72px) var(--pad-x); }
	.service-block-aside { position: static; }
	/* Mismo criterio que en desktop: el tope por alto de pantalla va sobre el
	 * ancho, así el aspecto se cumple exacto y no aparecen bandas al costado. */
	.service-block-media { width: min(100%, calc(62vh * 9 / 16)); height: auto; aspect-ratio: 9 / 16; margin-inline: auto; }
	.service-block-body ul { columns: 1; }
	.service-block-lead { max-width: none; font-size: clamp(20px, 5.4vw, 26px); }
	.service-block-body blockquote p { font-size: clamp(19px, 5vw, 25px); }
	.service-block-body h3 { margin-top: 30px; padding-top: 22px; }

	/* Acordeones: lo que en desktop es una lista abierta acá va plegado. */
	.service-fold { border-top: 1px solid rgb(11 12 23 / .12); }
	.service-fold:last-of-type { border-bottom: 1px solid rgb(11 12 23 / .12); }
	.service-block-dark .service-fold { border-color: rgb(255 255 255 / .16); }
	.service-fold summary {
		display: flex; align-items: center; gap: 10px; cursor: pointer;
		padding: 16px 0; list-style: none;
		font-family: var(--font-display); font-weight: 600; font-size: 17px;
		color: var(--ink); letter-spacing: -0.01em;
	}
	.service-block-dark .service-fold summary { color: #fff; }
	.service-fold summary::-webkit-details-marker { display: none; }
	/* La flecha va al final y gira al abrir. */
	.service-fold summary::after {
		content: ''; margin-left: auto; flex: none;
		width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		rotate: 45deg; translate: 0 -2px; opacity: .5;
		transition: rotate .3s var(--ease-out);
	}
	.service-fold[open] summary::after { rotate: -135deg; translate: 0 2px; }
	.service-fold-n {
		font-family: var(--font-body); font-size: 12px; font-weight: 700;
		color: var(--blue); background: rgb(42 76 246 / .1);
		padding: 2px 8px; border-radius: 999px; line-height: 1.6;
	}
	.service-block-dark .service-fold-n { color: var(--green); background: rgb(255 255 255 / .1); }
	.service-fold > :not(summary) { animation: fold-in .35s var(--ease-out); }
	.service-fold ul { margin-top: 0; margin-bottom: 16px; background: none; border: 0; padding: 0 0 4px; }
	.service-fold p { margin-bottom: 14px; }
	.service-fold h4 { margin-top: 0; }
}
@keyframes fold-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── 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); }
/* Todo el About va centrado (referencia: wearekomodo.com/about). */
.about-hero { padding: clamp(140px, 18vh, 220px) var(--pad-x) clamp(40px, 5vw, 72px); max-width: 1200px; margin: 0 auto; text-align: center; }
.about-hero .kicker { justify-content: center; margin-bottom: 22px; }
.about-hero-title { font-size: clamp(40px, 6vw, 88px); letter-spacing: -0.03em; line-height: 1.02; max-width: 17ch; margin: 0 auto; }
.about-hero-accent { color: var(--blue); }
.about-intro { margin: clamp(28px, 3.2vw, 44px) auto 0; max-width: 68ch; }
.about-intro p { color: var(--ink-soft); margin: 0 0 16px; font-size: clamp(16px, 1.2vw, 19px); }
.about-intro p:last-child { margin-bottom: 0; }

.about-stats { max-width: 1520px; margin: 0 auto; padding: 0 var(--pad-x) var(--section-gap); }
/* 6 datos en dos filas de 3: el panel va más ancho que el de 4 y respira mejor. */
.about-stats-panel {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 52px);
	background: var(--blue-ghost); border-radius: var(--r-lg);
	padding: clamp(32px, 3.8vw, 60px) clamp(30px, 3.6vw, 64px);
}
.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, 48px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.about-stat-lab { color: var(--ink-soft); font-size: clamp(14px, 1.05vw, 17px); max-width: 18ch; }

.about-story { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad-x) var(--section-gap); text-align: center; }
.about-story-title { font-size: clamp(30px, 4.2vw, 60px); letter-spacing: -0.03em; margin: 0 auto; max-width: 20ch; }
.about-story-body { margin: clamp(24px, 2.6vw, 38px) auto 0; max-width: 68ch; }

/* Con foto de los fundadores: texto a la izquierda, foto a la derecha. */
.about-story.has-photo {
	max-width: 1360px; text-align: left;
	display: grid; grid-template-columns: 1fr .85fr; align-items: center;
	gap: clamp(32px, 5vw, 84px);
}
.about-story.has-photo .about-story-title { margin: 0; max-width: 16ch; }
.about-story.has-photo .about-story-body { margin-left: 0; margin-right: 0; max-width: none; }
.about-story-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
/* Sin recorte: la caja toma el alto de la foto. Forzar un aspecto acá era lo
 * que, sumado al tamaño recortado, dejaba a los fundadores sin cabeza. */
.about-story-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
	.about-story.has-photo { grid-template-columns: 1fr; text-align: center; }
	.about-story.has-photo .about-story-title { margin: 0 auto; }
	.about-story-photo { order: -1; }
}
.about-story-body p { color: var(--ink-soft); margin: 0 0 16px; font-size: clamp(16px, 1.2vw, 19px); }
.about-story-body p:last-child { margin-bottom: 0; }

.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); text-align: center; }
.about-team-head .kicker { justify-content: center; margin-bottom: 20px; }
.about-team-title { font-size: clamp(34px, 5vw, 72px); letter-spacing: -0.03em; margin: 0 auto; max-width: 20ch; }
.about-team-brand { color: var(--blue); }
.about-team-sub { margin: 18px auto 0; color: var(--ink-soft); font-size: clamp(16px, 1.2vw, 19px); max-width: 62ch; }

.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. Al hover se cae el filtro y
   aparece la foto original (pedido de Pablo, mail del 28/7). */
/* El <filter> vive en page-about.php. Se oculta sin display:none, que en varios
   navegadores desactiva el filtro. */
.ampli-duotone-def { position: absolute; width: 0; height: 0; overflow: hidden; }
.person-photo img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: var(--duotone, url(#ampli-duotone));
	transition: transform .5s var(--ease-out), filter .45s var(--ease-out);
}
.person:hover .person-photo img,
.person:focus-within .person-photo img { transform: scale(1.035); filter: none; }

/* Con las dos fotos cargadas no hace falta filtro: se cruzan una sobre otra. */
.person-photo.has-duo img { filter: none; position: absolute; inset: 0; }
.person-photo.has-duo .person-color { opacity: 0; transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); }
.person:hover .person-photo.has-duo .person-color,
.person:focus-within .person-photo.has-duo .person-color { opacity: 1; }

@media (hover: none) {
	/* Sin hover no hay forma de revelarla, así que la foto va en color. */
	.person-photo img { filter: none; }
	.person-photo.has-duo .person-duo { display: none; }
	.person-photo.has-duo .person-color { opacity: 1; }
}
.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); } }
/* En el About la franja de logos no repite el título: ya lo dice la sección. */
.page-template-page-about .logos { padding-top: 0; }
@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); }

/* Logos de clientes en las páginas heredadas del Divi. Cada uno vino como un
   <figure> suelto y a tamaño natural eran 18 o 22 imágenes de ~676 px en
   columna. La clase se la pone `scripts/achicar-logos-divi.php`. Van con
   max-width/max-height y no con una caja fija, para no deformar ninguno: los
   hay cuadrados con mucho aire y otros recortados al logo. */
.prose figure.logo-cliente { display: inline-flex; align-items: center; justify-content: center; width: 150px; height: 84px; margin: 0 4px 4px 0; vertical-align: middle; }
.prose figure.logo-cliente img { max-width: 140px; max-height: 84px; width: auto; height: auto; margin: 0; }

/* Los campos agrupados de WPForms (`layout`) traen su propio margen abajo, y el
   último campo de adentro ya tiene el suyo: donde terminaba un grupo el hueco
   salía el doble que entre los demás campos. Se ve feo justo en el formulario
   de creadores, que tiene dos grupos. */
.cta-form .wpforms-container .wpforms-field-layout { margin-bottom: 0; padding-bottom: 0; }

/* ── Confirmación de los formularios ────────────────────────── */
/* WPForms la dibuja verde pálido con texto gris y esquinas rectas, y la banda
   de contacto es un panel casi negro: quedaba ilegible y de otro sitio. Va con
   los colores de marca y el verde sólo como acento. */
.cta-form .wpforms-container .wpforms-confirmation-container-full,
.cta-form .wpforms-container .wpforms-confirmation-container {
	background: rgb(255 255 255 / .06) !important;
	border: 1px solid rgb(112 242 170 / .4) !important;
	border-radius: var(--r-md) !important;
	color: #fff !important;
	padding: clamp(28px, 3.4vw, 44px) clamp(22px, 3vw, 40px) !important;
	margin: 0 !important;
	text-align: center;
}
.cta-form .wpforms-confirmation-container-full p,
.cta-form .wpforms-confirmation-container p {
	color: #fff !important;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.5;
	margin: 0;
	max-width: 34ch;
	margin-inline: auto;
}
/* Tilde de "listo", dibujado en CSS para no sumar un asset. */
.cta-form .wpforms-confirmation-container-full::before,
.cta-form .wpforms-confirmation-container::before {
	content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 18px;
	border-radius: 50%; background: var(--green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.6l5.2 5.2L20 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat,
	         linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.6l5.2 5.2L20 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat,
	      linear-gradient(#000, #000);
	mask-composite: exclude;
}

/* ── Case studies ───────────────────────────────────────────── */
.page-hero-cases { max-width: 1100px; text-align: center; }
.page-hero-cases .kicker { justify-content: center; }
.page-hero-cases .page-hero-title { max-width: 20ch; margin-inline: auto; }
.page-hero-cases .page-hero-lead { margin-inline: auto; }

.case-list {
	max-width: 1520px; margin: 0 auto; padding: 0 var(--pad-x) var(--section-gap);
	display: grid; gap: clamp(20px, 2.4vw, 36px);
}
.case-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.case-card-link {
	display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
	color: inherit; text-decoration: none;
}
.case-card:nth-child(even) .case-card-link { grid-template-columns: .95fr 1.05fr; }
.case-card:nth-child(even) .case-card-body { order: 2; }
.case-card-body { padding: clamp(30px, 3.4vw, 60px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.case-card-meta { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.case-card-brand { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 60px); letter-spacing: -0.03em; line-height: 1; margin: 0; }
.case-card-lead { font-size: clamp(16px, 1.3vw, 20px); color: var(--ink-soft); max-width: 34ch; margin: 0; }
.case-card-metrics { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(22px, 2.6vw, 44px); }
.case-card-metrics li { display: flex; flex-direction: column; gap: 4px; }
.case-metric-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.03em; line-height: 1; color: var(--blue); }
.case-metric-lab { font-size: clamp(13px, 1vw, 15px); color: var(--ink-soft); max-width: 20ch; }
.case-card-cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--blue); }
.case-card-arrow { transition: transform .3s var(--ease-out); }
.case-card-link:hover .case-card-arrow { transform: translateX(6px); }

.case-card-media { align-self: stretch; overflow: hidden; }
.case-card-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-card-phones {
	display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 1.6vw, 26px);
	background: var(--blue-ghost); padding: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px) 0;
}
.case-card-phones .case-phone { width: min(180px, 40%); }
.case-card-phones .case-phone:first-child { transform: translateY(clamp(14px, 2vw, 30px)); }

/* El "teléfono": marco dibujado en CSS, porque las capturas vienen sin él. */
.case-phone {
	display: block; position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden;
	background: var(--ink); border: 4px solid var(--ink);
	box-shadow: 0 18px 40px -18px rgb(10 12 40 / .5);
}
.case-phone img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px; }

.case-card-plain .case-card-link { grid-template-columns: 1fr; }
.case-card-plain .case-card-body { max-width: 1100px; }
.case-card-plain .case-card-lead { max-width: 60ch; }

/* Ficha del caso */
.page-hero-case { max-width: 1100px; }
.page-hero-case .page-hero-title { max-width: 22ch; }

.case-metrics { max-width: 1520px; margin: 0 auto; padding: 0 var(--pad-x); }
.case-metrics-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(30px, 3.6vw, 56px) clamp(28px, 3.4vw, 60px);
}
.case-metric { display: flex; flex-direction: column; gap: 6px; }
.case-metrics-panel .case-metric-num { font-size: clamp(30px, 3.2vw, 48px); }

.case-shots { max-width: 1520px; margin: 0 auto; padding: var(--section-gap) var(--pad-x) 0; }
.case-shots-title { font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.02em; margin: 0 0 clamp(22px, 2.4vw, 36px); }
.case-shots-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 34px); }
.case-shot-link { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.case-phone video { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 18px; background: var(--ink); }
/* Botón, no enlace: la pieza se reproduce acá y no lleva a ningún lado. */
.case-shot-play-btn { width: 100%; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: center; }
.case-shot-play-btn.is-playing { cursor: default; }
.case-shot-play-btn.is-playing .case-shot-play { opacity: 0; pointer-events: none; }
.case-shot-link .case-phone { transition: transform .4s var(--ease-out); }
a.case-shot-link:hover .case-phone { transform: translateY(-6px); }
/* El play va en una esquina y no en el centro: una de las capturas ya trae su
   propio botón encima del video y los dos se pisaban. */
.case-shot-play {
	position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%;
	background: rgb(255 255 255 / .94); box-shadow: 0 8px 22px -6px rgb(10 12 40 / .7);
	transition: transform .3s var(--ease-out), opacity .3s;
}
.case-shot-play::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
	border-left: 12px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
	transform: translateX(2px);
}
a.case-shot-link:hover .case-shot-play { transform: scale(1.08); }
.case-shot-handle { font-size: 14px; color: var(--ink-soft); text-align: center; }

.case-body { max-width: 1520px; margin: 0 auto; padding: var(--section-gap) var(--pad-x) 0; display: grid; gap: clamp(36px, 4vw, 64px); }
.case-block { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: clamp(24px, 3.4vw, 60px); align-items: start; }
.case-block-title { font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -0.025em; margin: 0; position: sticky; top: 120px; }
.case-block-copy p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.7; color: var(--ink-soft); margin: 0 0 1em; }
.case-block-copy p:last-child { margin-bottom: 0; }
.case-list-checks { list-style: none; margin: 1.2em 0 0; padding: 0; display: grid; gap: 12px; }
.case-list-checks + p { margin-top: 1.3em; }
.case-list-checks li { position: relative; padding-left: 30px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: var(--ink-soft); }
.case-list-checks li::before {
	content: ""; position: absolute; left: 0; top: .48em; width: 14px; height: 8px;
	border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
	transform: rotate(-45deg);
}
.case-list-results li { font-weight: 600; color: var(--ink); }
.case-list-results li::before { border-color: var(--green-ink); }
.case-block-outro { grid-template-columns: minmax(0, 300px) 1fr; }
.case-block-outro .case-block-copy p { font-size: clamp(17px, 1.35vw, 21px); color: var(--ink); }

.case-more { max-width: 1520px; margin: 0 auto; padding: var(--section-gap) var(--pad-x) 0; }
.case-more-grid { list-style: none; margin: clamp(20px, 2.4vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.case-more-item a {
	display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
	background: var(--surface); border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 34px);
	box-shadow: var(--shadow-card); transition: transform .35s var(--ease-out);
}
.case-more-item a:hover { transform: translateY(-4px); }
.case-more-brand { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.02em; }
.case-more-head { color: var(--ink-soft); font-size: 15px; }

@media (max-width: 1020px) {
	.case-metrics-panel { grid-template-columns: repeat(2, 1fr); }
	.case-shots-grid { grid-template-columns: repeat(2, 1fr); }
	.case-more-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
	.case-card-link,
	.case-card:nth-child(even) .case-card-link { grid-template-columns: 1fr; }
	.case-card:nth-child(even) .case-card-body { order: 0; }
	.case-card-phones { padding-bottom: clamp(20px, 4vw, 32px); }
	.case-card-phones .case-phone:first-child { transform: none; }
	.case-block,
	.case-block-outro { grid-template-columns: 1fr; }
	.case-block-title { position: static; }
}

/* ── 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; }
}