/* ═══════════════════════════════════════════════════════════════
   KUNKO · sistema visual editorial
   Implementacion del sistema definido por Codex sobre el sitio real.

   Por que existe esta hoja y no un rediseno pagina por pagina:

   El sitio son 51 paginas de HTML estatico escritas en dos
   plantillas distintas, cada una con su CSS embebido. Reescribir
   la marcacion de las 51 pondria en riesgo el contenido, el JSON-LD,
   las herramientas y los juegos, que es justamente lo que hay que
   conservar intacto.

   Las dos plantillas ya declaran sus colores como variables. Asi
   que redefinir esas variables aca, con esta hoja cargada ULTIMA,
   reviste el sitio entero sin tocar una linea de contenido.

   Regla de convivencia: esta hoja solo pisa apariencia. Nunca
   display, position ni grid-template de un componente existente,
   porque ahi es donde se rompen las columnas.

   Contrato: docs/DESIGN_SYSTEM.md e INTERACTION_SPEC.md del
   repositorio de Codex.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. FICHAS ──
   Un solo lugar. Las dos plantillas leen de aca. */
:root,
html {
  /* Codex */
  --ink:        #111027;
  --ink-2:      #1c193a;
  --paper:      #f4f1e8;
  --white:      #fffefa;
  --pink:       #ff2e93;
  --coral:      #ff6b55;
  --mint:       #41d6a3;
  --yellow:     #ffc83d;
  --muted:      #686678;
  --line:       rgba(17, 16, 39, .16);

  /* Nombres que ya usaban las paginas, apuntando a las fichas nuevas.
     Sin esto habria que editar las 51 paginas a mano. */
  --bg:         var(--paper);
  --navy:       var(--ink);
  --deep:       #0c0b1d;
  --ink2:       var(--muted);
  --gray:       var(--muted);
  --gray2:      #8a8798;
  --mut:        #8a8798;
  --rule:       var(--line);
  --rule2:      rgba(17, 16, 39, .24);
  --amber:      var(--yellow);
  --em:         var(--mint);
  --emerald:    var(--mint);
  --red:        var(--coral);
  --dsoft:      #b7b4c8;
  --dmute:      #8a8798;
  --blue:       #3b82f6;
}

body { background: var(--paper); color: var(--ink); }
::selection { background: var(--pink); color: #fff; }

/* ── 2. TIPOGRAFIA ──
   Grotesca editorial, grande y directa. El tracking negativo crece
   con el cuerpo: en un titular de 100 px la misma apertura que en
   uno de 30 se lee floja. */
h1, h2, h3, .big, .hero h1 {
  font-family: 'Satoshi', 'Poppins', Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-wrap: balance;
}
h1, .hero h1 { letter-spacing: -.075em; line-height: .91; }
h2, .big     { letter-spacing: -.065em; line-height: .96; }
h3           { letter-spacing: -.045em; line-height: 1.05; }

/* Los rotulos: 9 a 11 px, versalitas, mucho tracking. */
.eyebrow, .kick, .num, .section-kicker, .riel-tag, .zona, .hito,
.tag, .kx, .ttag {
  letter-spacing: .15em;
  font-weight: 900;
  text-transform: uppercase;
}
.eyebrow, .kick, .section-kicker { color: var(--pink); }

/* Los numeros son evidencia o secuencia, nunca decoracion. */
body { font-variant-numeric: tabular-nums; }

/* ── 3. ACCIONES ──
   Redondeadas y claras. La magenta marca la decision. */
.btn, .kf-boton, .button, .cta, .seccta, .capsub, .lead-sub, .sub {
  border-radius: 99px;
  font-weight: 900;
  letter-spacing: -.01em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover, .kf-boton:hover, .button:hover { transform: translateY(-2px); }

.btn.pk, .button-primary, .kf-boton {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 12px 30px rgba(255, 46, 147, .22);
}
.btn.pk:hover, .kf-boton:hover { background: var(--pink); box-shadow: 0 18px 40px rgba(255, 46, 147, .3); }
.nav .links .cta { background: var(--ink); color: #fff; }
.nav .links .cta:hover { background: var(--pink); }

/* ── 4. SUPERFICIES ──
   Los paneles oscuros representan sistemas, y viven en cajas
   redondeadas: no inundan la pagina entera. */
/* Las secciones van a filo recto y a sangre: el borde redondeado las
   convierte en tarjetas gigantes, que es lo contrario de una franja. El
   radio queda solo para lo que de verdad es un panel accionable. */
.sec.nv, .bleed, .banda, .webisec, .cta-end, .ctaband { border-radius: 0; }
.sec.nv, .bleed, .banda, .webisec { background: var(--ink); color: #fff; }
.cta-end, .ctaband { background: var(--ink); }

.console, .signal-card, .embed-shell { border-radius: 22px; }
.jcanvas, .oveja { border-radius: 0; }

/* Bordes de bajo contraste. Sombra solo donde hay algo accionable. */
.tool, .rlist, .box, .card, table, .capture, .quote {
  border-color: var(--line);
}

/* ── 5. RITMO ──
   120 px en escritorio, 84 en telefono. El aire es parte del
   sistema: sin el, la tipografia grande se lee apretada. */
section.sec, section.blk { padding-top: clamp(84px, 9vw, 120px); padding-bottom: clamp(84px, 9vw, 120px); }
section.sec[style*="padding-top:0"], section.blk[style*="padding-top:0"] { padding-top: 0; }

/* ── LA REJA, UNA SOLA PARA TODO EL SITIO ──
   Habia cuatro contenedores distintos conviviendo: .wrap (1240), .shell
   (1240), .wrap.narrow (860) y el .nav con el suyo. Al navegar, el margen
   izquierdo saltaba de 42 px a 437 px segun la pagina: se leia como cuatro
   sitios distintos.

   Ahora todos comparten el mismo ancho y la misma canaleta, asi que el
   borde izquierdo del contenido cae SIEMPRE en el mismo lugar.

   La medida de lectura no desaparece: se mueve del contenedor al texto.
   Un parrafo sigue teniendo su ancho comodo, pero el contenedor no se
   angosta, y por eso los titulares y los graficos no se corren. */
.wrap, .shell, main.wrap, main.shell, .nav, .hero-grid, .trust-row {
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(22px, 4vw, 64px);
  padding-right: clamp(22px, 4vw, 64px);
}
/* .narrow dejaba de angostar el contenedor: la medida va en el texto. */
.wrap.narrow, main.wrap.narrow, .narrow { max-width: 1380px; }
main.wrap.narrow > p,
main.wrap.narrow > ul,
main.wrap.narrow > ol,
main.wrap.narrow > h2,
main.wrap.narrow > h3,
main.wrap.narrow > .faq,
main.wrap.narrow > table,
main.wrap.narrow > .box,
.narrow > header p, .narrow > div > p.answer, .narrow > div > .answer {
  max-width: 74ch;
}
main.wrap.narrow > h2 { max-width: 20ch; }
/* Sin excepciones al padding: la regla que anulaba el del hero le pegaba
   a `<div class="wrap hero-grid">` de la home y la dejaba pegada al borde.
   Cuando dos contenedores se anidan de verdad, el de adentro pierde el
   suyo, y eso se resuelve por anidamiento, no por etiqueta. */
.wrap .wrap:not(.nav), .wrap .shell:not(.nav),
.shell .wrap:not(.nav), .shell .shell:not(.nav),
main.wrap > .wrap:not(.nav), main.shell > .shell:not(.nav) {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ── 6. NADA DE DECORACION ──
   Sin glassmorphism, sin halos, sin iconografia al azar. Si un
   elemento no explica nada, no va. */
.hero::before, .ovsec::before, .sec::before { background: none !important; }

/* ── 7. MOVIMIENTO ──
   Solo si revela como una senal se vuelve decision. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 8. ACCESIBILIDAD ──
   Foco visible siempre. El color nunca es la unica senal. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 9. SIN DESBORDE HORIZONTAL ──
   Un solo elemento que se pase de ancho arruina el telefono. */
/* `clip` en vez de `hidden`, y solo en html.

   `overflow-x:hidden` en body lo convierte en contenedor de scroll, y un
   contenedor de scroll anula el position:sticky de todo lo que tiene
   adentro. Por eso el header no se pegaba: la declaracion estaba, pero
   el body se la comia en silencio.

   `clip` recorta igual y NO crea contenedor de scroll. Se verifico que
   hace falta: sin ninguna regla, 10 de las 52 desbordan a 390px. */
/* Va en body, NO en html: `overflow-x:clip` sobre el elemento raiz se
   propaga al viewport y deja al documento entero sin scroll. Medido. */
body { overflow-x: clip; }

/* Y hay que DESACTIVAR el que declaran editorial.css y los <style> de 21
   paginas. No alcanza con no declararlo aca: si no se anula, esas 22
   paginas siguen con el body convertido en contenedor de scroll y el
   header sigue sin pegarse justo ahi. */

img, svg, video, canvas, table { max-width: 100%; }

/* ── 10. HEADER ──
   Uno solo para las 51 paginas: pegajoso, lienzo calido traslucido, marca
   compacta, enlaces de decision y un CTA oscuro. Antes el script que lo
   volvia pegajoso estaba en 21 paginas y faltaba en 30, asi que el header
   se comportaba distinto segun donde estuvieras parado. */
.nav.shell, .nav.wrap { max-width: 1380px; }
.nav {
  min-height: 74px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}
.nav .logo { height: 22px; }
.nav .links { gap: 30px; font-size: 13px; font-weight: 700; }
.nav .links a:not(.cta) { letter-spacing: -.01em; }
.nav .links a:not(.cta)::after { background: var(--pink); height: 2px; bottom: -6px; }
.nav .links .cta {
  min-height: 44px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 980px) { .nav { min-height: 64px; } }

/* ── 11. PIEZAS DE COLLAGE ──
   Van en su PROPIA seccion, entre dos existentes. Meterlas dentro de un
   layout que ya tiene su reja fue lo que rompio las columnas: una reja de
   dos columnas adentro de otra no cabe. Como hermana de seccion no puede
   chocar con nada. */
.pieza { display: grid; grid-template-columns: 1fr .78fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.pieza--inv { grid-template-columns: .78fr 1fr; }
.pieza--inv .pieza-txt { order: 2; }
.pieza--inv .pieza-img { order: 1; }
.pieza-img { margin: 0; line-height: 0; max-width: 420px; }
.pieza-img img { width: 100%; height: auto; display: block; }
.pieza-img figcaption {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  line-height: 1.6; margin-top: 14px;
}
.pieza-txt p { font-size: clamp(19px, 2vw, 26px); line-height: 1.45; margin: 0; max-width: 30ch;
               letter-spacing: -.02em; }
.pieza-txt .k {
  display: block; font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pink); margin-bottom: 18px;
}
.sec.nv .pieza-txt p, .bleed .pieza-txt p { color: rgba(255,255,255,.8); }
@media (max-width: 860px) {
  .pieza, .pieza--inv { grid-template-columns: 1fr; gap: 30px; }
  .pieza--inv .pieza-txt, .pieza--inv .pieza-img { order: initial; }
  .pieza-img { max-width: 300px; }
}

/* Respiracion muy leve, un solo gesto. */
@keyframes kk-resp { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018); } }
.pieza-img img { animation: kk-resp 9s cubic-bezier(.37,0,.63,1) infinite; transform-origin: 50% 60%; }
@media (prefers-reduced-motion: reduce) { .pieza-img img { animation: none; } }

/* Cuando <main> ya da el ancho, la pieza solo necesita su propio aire. */
.pieza-suelta { margin: clamp(56px, 8vw, 96px) 0; }

/* La insignia oficial de partner, en lugar del dibujo en CSS que habia. */
.ciobadge-img { width: clamp(160px, 18vw, 210px); height: auto; display: block; }

/* ── LA TIRA DE PARTNERS ──
   Cada marca tiene proporcion distinta: un logo apaisado y uno cuadrado con
   el mismo ancho se leen con peso muy distinto. Se limitan por ALTURA, que
   es lo que el ojo compara, y se le da un poco mas a los que son solo
   palabra, que visualmente pesan menos. */
.toolsec .tool img { max-height: 34px; width: auto; max-width: 78%; }
.toolsec .tool img[src*="customerio"] { max-height: 30px; }
.toolsec .tool img[src*="mixpanel"]   { max-height: 26px; }
.toolsec .tool img[src*="braze"]      { max-height: 30px; }
.toolsec .tool img[src*="klaviyo"]    { max-height: 46px; }
.toolsec .tool .wm { font-size: 21px; letter-spacing: -.03em; }
.toolsec .tool { min-height: 116px; }

/* ── 12 y 18. AIRE ENTRE FRANJAS ──
   Dos secciones seguidas quedaban pegadas: el titular de una empezaba casi
   donde terminaba el parrafo de la anterior. El aire ES el sistema, no un
   sobrante. Una franja oscura necesita todavia mas, porque el cambio de
   fondo comprime la lectura si no tiene respiro. */
section.sec + section.sec { padding-top: clamp(96px, 10vw, 144px); }
.sec.nv, .bleed, .banda { padding-top: clamp(96px, 10vw, 140px); padding-bottom: clamp(96px, 10vw, 140px); }
.sec .eyebrow, .sec .kick, .blk .num { margin-bottom: clamp(24px, 3vw, 38px); }
.sec .eyebrow + h2, .sec .kick + h1, .blk .num + h2 { margin-top: 0; }

/* ── 29. SIN REDONDEOS SUELTOS ──
   El radio queda solo donde hay un panel accionable de verdad. Cualquier
   caja informativa va a filo recto, como el resto del sitio. */
.box, .card, .tool, .rlist, .prod, .cgrid > *, .ex, .ebgrid > *,
.tcard, .rel-c, .qwrow, .neu-img, .pq-img, .capture, .quote, .gains > * {
  border-radius: 0;
}

/* ── PARTNERS Y STACK, SEPARADOS ──
   Estaban en la misma tira, asi que una insignia de partner y una
   herramienta que solo operamos se leian igual. Son dos afirmaciones
   distintas y ahora se declaran por separado, con la segunda mas silenciosa.
   Del brief: "Separar claramente 'Marcas que confian' de 'Stack que
   operamos'. No mezclar prueba social con logos de herramientas." */
.parts { display: grid; gap: clamp(40px, 5vw, 64px); margin-top: 44px; }
.parts-b { display: block; }
.parts-k {
  display: block; font-family: 'Space Mono', monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}
.parts-fila { display: flex; flex-wrap: wrap; gap: 14px; }
.parts-fila .tool { flex: 1 1 190px; max-width: 250px; }
/* La segunda fila pesa menos: no es una credencial. */
.parts-fila--quieta .tool { opacity: .62; transition: opacity .2s; }
.parts-fila--quieta .tool:hover { opacity: 1; }
.parts-fila--quieta .tool img { max-height: 26px; }

/* ── EL HERO, EN LA MISMA REJA ──
   En blog, score y recursos el titular arrancaba en 328, 238 y 308 px
   mientras el logo caia en 88: tres verticales distintas en la misma
   pantalla. El hero deja de traer su propio ancho. */
/* Solo cuando el hero NO es el contenedor: en las paginas editoriales el
   hero lleva .shell y es el que pone la canaleta. */
header.hero:not(.shell):not(.wrap), header.hd:not(.shell):not(.wrap) {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
header.hero > .wrap, header.hero > .shell,
header.hd > .wrap, header.hd > .shell {
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(22px, 4vw, 64px);
  padding-right: clamp(22px, 4vw, 64px);
}
/* Cuando el titular cuelga directo del hero, la canaleta la pone el hero. */
/* Solo cuando el hero no trae contenedor propio. Si el hero es .shell
   la canaleta ya la puso el, y sumarla de nuevo daba doble margen: en
   benchmarks el titular arrancaba 57 px adentro del resto del texto. */
header.hero:not(.shell):not(.wrap) > h1,
header.hero:not(.shell):not(.wrap) > p,
header.hero:not(.shell):not(.wrap) > .eyebrow,
header.hero:not(.shell):not(.wrap) > .kick,
header.hero:not(.shell):not(.wrap) > .stand,
header.hero:not(.shell):not(.wrap) > .ctas,
header.hero:not(.shell):not(.wrap) > div:not([class]) {
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(22px, 4vw, 64px);
  padding-right: clamp(22px, 4vw, 64px);
}

/* El hero del Score traia su propia reja y arrancaba 150 px adentro. */
header.hero .in.sc-hero-grid, .hero .in.sc-hero-grid,
header.hero .sc-hero-grid, .wrap.sc-hero-grid { max-width: 1380px; margin-left: auto; margin-right: auto;
                padding-left: clamp(22px, 4vw, 64px); padding-right: clamp(22px, 4vw, 64px); }

/* ── 16. TESTIMONIOS ──
   Eran tres capturas de pantalla con el texto en ingles quemado adentro. No
   se podian traducir, no los leia Google y pesaban 290 KB. Pasan a HTML: en
   espanol, indexables y con la atribucion legible por un lector de pantalla. */
.citas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(18px,2.4vw,40px); margin-top: clamp(30px,3.4vw,48px);
         margin-top: 44px; border-top: 1px solid var(--line); }
.cita { margin: 0; padding: 40px 46px 40px 0; border-right: 1px solid var(--line); }
.cita:last-child { border-right: 0; padding-right: 0; }
.cita blockquote { margin: 0 0 30px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.cita figcaption b { display: block; font-size: 15px; letter-spacing: -.02em; }
.cita figcaption span { display: block; font-family: 'Space Mono', monospace; font-size: 10px;
                        letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
@media (max-width: 860px) {
  .citas { grid-template-columns: 1fr; }
  .cita { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .cita:last-child { border-bottom: 0; }
}

/* ── 20. LA IMAGEN RECORTADA ──
   .pq-img se estiraba a la altura de la fila y anclaba la imagen abajo, asi
   que cuando la columna de texto era mas corta la cabeza quedaba afuera. */
.pq-img { align-self: center; align-items: center; min-height: 0; }
.pq-img img { object-fit: contain; object-position: center; }

/* ── 1. AIRE DEL HERO ──
   El contenido arrancaba pegado al header y el CTA quedaba encima del texto. */
header.hero { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 96px); }
header.hero .kx, header.hero .eyebrow, header.hero .kick { margin-bottom: clamp(22px, 2.6vw, 34px); }
header.hero h1 { margin-bottom: clamp(22px, 2.6vw, 32px); }
header.hero .sub, header.hero .stand, header.hero .answer { margin-bottom: clamp(30px, 3.4vw, 44px); }
header.hero .ctas { gap: 14px; margin-bottom: clamp(28px, 3vw, 40px); }
header.hero .trust { margin-top: clamp(12px, 2vw, 24px); }

/* ── 9. CARRUSEL DE PRESENCIA REGIONAL ──
   No es un ticker financiero: las banderas son collages de papel, van
   grandes, con aire entre ellas y a paso muy lento. Lo que tiene que
   transmitir es conocimiento de la region, no cotizaciones pasando.

   La tira esta duplicada y se desplaza exactamente la mitad, asi que el
   ciclo cierra sin salto. La copia va con aria-hidden para que un lector
   de pantalla no lea veinte paises dos veces. */
.carrusel { overflow: hidden; margin-top: clamp(40px, 5vw, 64px);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.carrusel-tira { display: flex; gap: clamp(28px, 4vw, 56px); list-style: none;
                 margin: 0; padding: 0; width: max-content;
                 animation: kk-desfile 40s linear infinite; }
.carrusel:hover .carrusel-tira { animation-play-state: paused; }
@keyframes kk-desfile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bandera { flex: 0 0 auto; width: clamp(150px, 15vw, 210px); }
.bandera img { width: 100%; height: auto; display: block; }
.bandera span {
  display: block; margin-top: 12px;
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* Quien pide menos movimiento ve la tira quieta, y puede recorrerla a mano. */
@media (prefers-reduced-motion: reduce) {
  .carrusel { overflow-x: auto; }
  .carrusel-tira { animation: none; }
}

/* ── 3. LA TIRA DE PARTNERS, CORREGIDA ──
   Tres cosas estaban mal y las tres necesitan ganarle a `.toolsec .tool`,
   que pesa mas que un `.tool` suelto:

   1. Tarjeta blanca con esquinas redondeadas: es el objeto que sacamos de
      todo el resto del sitio.
   2. `filter:grayscale(1); opacity:.55` sobre los logos. Deformaba los
      colores oficiales de cada marca, que es justo lo que no se hace con
      una identidad ajena. Ademas dejaba la franja gris y apagada.
   3. Alturas distintas: cada logo se leia con un peso distinto. */
.toolsec .tool {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 18px 12px;
  min-height: 92px;
}
.toolsec .tool:hover { transform: none; box-shadow: none; }
.toolsec .tool img {
  filter: none;
  opacity: 1;
  height: auto;
  max-height: 30px;
  max-width: 84%;
}
.toolsec .tool img[src*="klaviyo"] { max-height: 44px; }
.toolsec .tool img[src*="mixpanel"] { max-height: 24px; }
.toolsec .tool .wm { color: var(--ink); opacity: .82; }
.toolsec .tool:hover .wm { opacity: 1; }

/* La fila se reparte pareja en vez de dejar una sola abajo. */
.parts-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 20px; }
.parts-fila--quieta { grid-template-columns: repeat(3, 1fr); max-width: 620px; }
.parts-fila .tool { max-width: none; }
@media (max-width: 900px) { .parts-fila { grid-template-columns: repeat(2, 1fr); } }

/* La etiqueta de partner deja de ser una pastilla flotante. */
.toolsec .ttag {
  position: static; display: block; margin-top: 10px; background: none;
  color: var(--muted); font-size: 8.5px; letter-spacing: .14em;
}
.toolsec .tool { flex-direction: column; }
.toolsec .tool img[src*="customerio-logo"] { max-height: 26px; }

/* El desfile se corta a filo en los dos bordes. Un desvanecido corto hace que
   las banderas entren y salgan del cuadro en vez de quedar rebanadas. */
.carrusel{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}


/* ─────────────────────────────────────────────────────────────
   El articulo del blog, uno solo.

   Los ocho posts se escribieron en seis estructuras distintas:
   main.post, div.art, header.ahero, header.phero, header.post-hero
   y el hero generico. Cuatro centraban la columna con margin:auto
   y cuatro no, asi que el titular arrancaba en 88, 340, 364, 398 o
   404 px segun cual abrieras. Leidos de corrido, parecian de
   sitios distintos.

   La columna queda anclada a la izquierda, en la misma vertical
   que el logo y que el titular de cualquier otra pagina. El ancho
   de lectura lo pone la medida del texto, no un centrado: eso es
   lo que mantiene la mancha comoda sin romper la reja del sitio.
   ───────────────────────────────────────────────────────────── */

main.post, .art, .body, .phero, .ahero, .post-hero, .ahero .in {
  max-width: 1380px;
  margin-left: auto; margin-right: auto;
  padding-left: clamp(22px, 4vw, 64px);
  padding-right: clamp(22px, 4vw, 64px);
}

/* Anidados no vuelven a poner canaleta: seria doble margen. */
main.post .phero, main.post .body, main.post .art,
.wrap .post-hero, .wrap .art, .wrap .body,
.art .body, .post-hero > .wrap, .phero > .wrap, .ahero > .wrap,
.ahero > .wrap > .in {
  max-width: none;
  padding-left: 0; padding-right: 0;
  margin-left: 0; margin-right: 0;
}

/* La medida de lectura. Se aplica al texto, no al contenedor,
   asi el titular y los graficos pueden salir de la columna. */
main.post p, main.post ul, main.post ol, main.post blockquote,
.art p, .art ul, .art ol, .art blockquote,
.body p, .body ul, .body ol, .body blockquote,
.phero .stand, .phero .lede, .post-hero .stand, .post-hero .lede,
.ahero .stand, .ahero .lede {
  max-width: 68ch;
}

/* El titular respira mas que el cuerpo: llega hasta 22 palabras
   por linea seria ilegible, pero 68ch lo parte demasiado corto. */
main.post h1, .art h1, .phero h1, .ahero h1, .post-hero h1 { max-width: 20ch; }
main.post h2, .art h2, .body h2 { max-width: 26ch; }


/* El bloque destacado del articulo. Venia como tarjeta flotante con
   esquina redondeada y sombra, y ademas se estiraba a todo el ancho
   mientras el texto que lo rodea mide 68ch: quedaba desalineado con
   su propia columna. Pasa a ser el acento de linea a la izquierda,
   que es el mismo objeto que usan las propuestas. */
.capsule, .callout, .mbox, .cta-box, .answer {
  max-width: 68ch;
  margin-left: 0; margin-right: auto;   /* iba centrado y quedaba flotando
                                           lejos de su propia columna */
  background: rgba(17,16,39,.035);
  border: 0; border-left: 3px solid var(--pink, #e91e8a);
  border-radius: 0; box-shadow: none;
}
.capsule p, .callout p, .mbox p, .cta-box p, .answer p { max-width: none; }

/* En algunos posts el bloque cuelga directo del <body>, sin contenedor
   que le de la canaleta, y quedaba pegado al borde de la ventana. */
body > .capsule, body > .callout, body > .mbox, body > .cta-box, body > .answer {
  margin-left: clamp(22px, 4vw, 64px);
}


/* ─────────────────────────────────────────────────────────────
   Los CTA, con jerarquia.

   El problema: en la home habia tres tratamientos distintos y los
   dos del hero pesaban casi lo mismo. Uno relleno magenta, otro
   con borde y fondo transparente, ambos del mismo alto, la misma
   tipografia y el mismo radio. Dos botones parejos no son una
   decision, son una duda: el visitante tiene que leer los dos
   para entender cual es el camino.

   Ahora hay UNA accion principal y el resto se subordina.
   ───────────────────────────────────────────────────────────── */

/* La accion principal. Mas grande, mas contraste, y el brillo
   magenta que ya usa la marca en el titular. */
.btn.pk, .button-primary, .kf-boton, .ctaprim {
  font-size: clamp(15px, 1.15vw, 17px);
  padding: 18px 34px;
  box-shadow: 0 14px 34px -8px rgba(255, 46, 147, .45);
}
.btn.pk:hover, .kf-boton:hover, .ctaprim:hover {
  box-shadow: 0 20px 46px -8px rgba(255, 46, 147, .58);
}

/* La flecha se corre al pasar el mouse: dice "esto lleva a algun
   lado" sin agregar una palabra. */
.btn svg { transition: transform .22s ease; }
.btn:hover svg { transform: translateX(4px); }

/* La accion secundaria deja de competir. No es un boton mas chico:
   es otra cosa. Sin caja, subrayado fino, peso normal. Asi el ojo
   cae primero en la magenta y despues encuentra la alternativa. */
.ctas .btn:not(.pk):not(.cta) {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink, #111027);
  padding: 18px 4px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
  border-bottom: 2px solid var(--line, rgba(17,16,39,.16));
}
.ctas .btn:not(.pk):not(.cta):hover {
  transform: none;
  border-bottom-color: var(--pink, #e91e8a);
  color: var(--pink, #e91e8a);
}

/* Las dos van en fila con aire propio, no apiladas por descarte
   del wrap. En pantalla angosta bajan una debajo de la otra. */
.ctas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 26px; margin-top: clamp(28px, 3vw, 38px);
}
.ctas .btn { margin-left: 0 !important; }
@media (max-width: 620px) {
  .ctas { flex-direction: column; align-items: stretch; }
  .ctas .btn { justify-content: center; }
  /* La secundaria no se estira. Con align-items:stretch el subrayado cruzaba
     todo el ancho y dejaba de leerse como accion: parecia una linea divisoria
     con un texto encima. Ajustado al texto, vuelve a leerse como enlace. */
  .ctas .btn:not(.pk):not(.cta) { align-self: center; padding: 10px 4px 8px; }
}

/* El CTA del header es el unico que acompana toda la navegacion.
   A 13px se leia como un enlace mas de la barra. */
.nav .links .cta {
  font-size: 14px;
  padding: 13px 22px;
  font-weight: 800;
}


/* Los enlaces dentro del texto tienen que verse. En el subtitulo del
   hero, el enlace a la definicion quedaba del mismo color y peso que
   el resto: nadie iba a saber que era clickeable. */
/* En magenta y en negrita, un enlace de ocho palabras dentro del
   subtitulo del hero gritaba mas que el propio boton. Queda en tinta
   con el subrayado magenta: se ve que es un enlace, y el ojo sigue
   cayendo primero en la accion. */
.sub a, .stand a, .answer a, .tsub a, main p a, .prose p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--pink, #e91e8a);
}
.sub a:hover, .stand a:hover, .answer a:hover, .tsub a:hover,
main p a:hover, .prose p a:hover { color: var(--pink, #e91e8a); }


/* El CTA de la banda de cierre era un tercer tratamiento: dos puntos
   mas chico que el principal y con menos peso.

   Primero lo puse magenta como el de arriba y fue peor: la banda YA es
   magenta, asi que el boton desaparecio adentro. Sobre una banda de
   color el boton se define por contraste con la banda, no por repetir
   el color de la marca. Va blanco con tinta navy, que es el par de
   maximo contraste que tenemos, y del mismo tamano que el principal. */
.cta .btn.lt, .btn.lt {
  background: #fff;
  color: var(--ink, #111027);
  border-color: #fff;
  font-size: clamp(15px, 1.15vw, 17px);
  padding: 18px 34px;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .3);
}
.cta .btn.lt:hover, .btn.lt:hover {
  background: #fff; color: var(--ink, #111027);
  box-shadow: 0 24px 54px -10px rgba(0, 0, 0, .4);
}

/* Y el enlace que lo acompana, subordinado como en el hero. */
.sec.cta .row a:not(.btn) {
  color: #fff; font-weight: 700; font-size: 15px;
  border-bottom: 2px solid rgba(255,255,255,.45);
  padding-bottom: 3px; text-decoration: none;
}
.sec.cta .row a:not(.btn):hover { border-bottom-color: #fff; }
/* El titular y el parrafo de la banda van centrados, asi que la fila
   de acciones tambien: si no, el boton cuelga a la izquierda de un
   bloque que esta al medio y se lee como un error de maqueta. */
.sec.cta .row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 16px 28px;
}

/* Las bandas de cierre no llevan esquina redondeada, como el resto. */
.sec.cta, .sec.cta .wrap, section.cta { border-radius: 0; }

/* Los proximos pasos del cierre. Eran tres filas con un enlace en
   monospace de 10px alineado a la derecha: el ojo no los lee como algo
   clickeable, y con tres opciones del mismo peso tampoco hay un primer
   paso. Ahora la fila entera responde y el primer paso pesa mas. */
.circ .crc {
  display: grid; align-items: center;
  transition: background .2s ease, border-color .2s ease;
  border-top: 1px solid var(--line, rgba(17,16,39,.16));
}
.circ .crc:hover { background: rgba(255, 46, 147, .04); border-top-color: var(--pink, #e91e8a); }

.circ .crc .go {
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: 0;
  text-transform: none; color: var(--pink, #e91e8a);
  border-bottom: 2px solid rgba(255, 46, 147, .35);
  padding-bottom: 3px; white-space: nowrap;
  transition: border-color .2s ease;
}
.circ .crc:hover .go { border-bottom-color: var(--pink, #e91e8a); }

/* El primero es el paso que recomendamos: va con boton, no con enlace. */
.circ .crc:first-child .go {
  background: var(--pink, #e91e8a); color: #fff;
  border: 0; border-radius: 99px; padding: 14px 26px;
  box-shadow: 0 12px 28px -8px rgba(255, 46, 147, .5);
}
.circ .crc:first-child:hover .go { box-shadow: 0 18px 38px -8px rgba(255, 46, 147, .62); }
.circ .crc:first-child h3 { color: var(--ink, #111027); }


/* ─────────────────────────────────────────────────────────────
   Hiper-relevancia: el bloque que confronta.

   Estaba como dos tarjetas redondeadas flotando, con el 53% del alto
   de la seccion vacio. Y el argumento del bloque es una confrontacion
   -un envio a todos contra cuatro mensajes que llegan en su momento-
   asi que la maqueta tiene que confrontar tambien.

   Dos mitades pegadas, sin gap y sin radio, partidas por una linea.
   La mitad viva se va al borde de la pantalla: el contraste es de
   territorio, no de dos cajitas del mismo tamano.
   ───────────────────────────────────────────────────────────── */

#relevancia .rel-grid {
  grid-template-columns: .9fr 1.1fr;
  gap: 0;
  margin-top: clamp(36px, 4vw, 54px);
  border-top: 1px solid var(--line, rgba(17,16,39,.16));
}
#relevancia .rel-c {
  background: none; border: 0; border-radius: 0;
  padding: clamp(30px, 3.2vw, 46px) clamp(30px, 3.2vw, 48px) clamp(30px, 3.2vw, 46px) 0;
}

/* La mitad muerta: el mensaje tachado y, debajo, el eco de haberlo
   mandado a toda la base. */
#relevancia .rel-bad { position: relative; }
#relevancia .rel-bad .rel-msg { max-width: 22ch; }
#relevancia .rel-bad .eco {
  display: flex; flex-direction: column; gap: 7px; margin-top: 22px;
}
#relevancia .rel-bad .eco i {
  display: block; height: 9px; border-radius: 0;
  background: var(--line, rgba(17,16,39,.16));
}
#relevancia .rel-bad .eco i:nth-child(1) { width: 78%; opacity: .85 }
#relevancia .rel-bad .eco i:nth-child(2) { width: 78%; opacity: .6 }
#relevancia .rel-bad .eco i:nth-child(3) { width: 78%; opacity: .38 }
#relevancia .rel-bad .eco i:nth-child(4) { width: 78%; opacity: .2 }
#relevancia .rel-bad .eco i:nth-child(5) { width: 78%; opacity: .1 }

/* La mitad viva, sangrada hasta el borde de la ventana. */
#relevancia .rel-good {
  background: var(--ink, #111027);
  border-radius: 0;
  padding-left: clamp(30px, 3.2vw, 48px);
  padding-right: clamp(30px, 3.2vw, 48px);
  margin-right: calc(-1 * clamp(22px, 4vw, 64px));
  border-left: 0;
}
#relevancia .rel-good::before { display: none; }
#relevancia .rel-good ul { gap: clamp(14px, 1.6vw, 20px); }
#relevancia .rel-good li {
  padding-bottom: clamp(14px, 1.6vw, 20px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
#relevancia .rel-good li:last-child { border-bottom: 0; padding-bottom: 0; }
#relevancia .rel-eth { margin-top: clamp(30px, 3.4vw, 44px); max-width: 30ch; }

@media (max-width: 760px) {
  /* Una columna arriba de otra. La regla de index.html no alcanzaba:
     este archivo carga al final del body y #relevancia .rel-grid le gana
     por especificidad, asi que el corte hay que declararlo tambien aca. */
  #relevancia .rel-grid { grid-template-columns: 1fr; }
  #relevancia .rel-good { margin-right: 0; }
  #relevancia .rel-c { padding-right: 0; }
}

/* La animacion: los mensajes entran de a uno a medida que el bloque
   sube. Cada uno llega cuando le toca, que es literalmente de lo que
   habla el bloque.

   Va con animation-timeline, que corre en el compositor y no necesita
   una linea de JS. Detras de @supports: donde no existe, la lista se
   ve entera y quieta, que es el comportamiento correcto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #relevancia .rel-good li {
      animation: kk-llega linear both;
      animation-timeline: view();
    }
    #relevancia .rel-good li:nth-child(1) { animation-range: entry 4%  cover 20%; }
    #relevancia .rel-good li:nth-child(2) { animation-range: entry 10% cover 26%; }
    #relevancia .rel-good li:nth-child(3) { animation-range: entry 16% cover 32%; }
    #relevancia .rel-good li:nth-child(4) { animation-range: entry 22% cover 38%; }
  }
}
@keyframes kk-llega {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}


/* ─────────────────────────────────────────────────────────────
   Grillas que se quedaron con un solo hijo.

   Al retirar contenido, las grillas quedaron con las columnas
   vacias: la de webinars es de dos y tiene uno, la de recursos
   era de cuatro y tenia uno. Una tarjeta sola en una grilla de
   cuatro no se lee como "hay uno", se lee como "faltan tres".

   Cuando queda uno solo, deja de ser grilla y pasa a ser una
   fila a lo ancho: el titulo a la izquierda, el detalle a la
   derecha. Ocupa el ancho porque tiene con que, no por relleno.
   ───────────────────────────────────────────────────────────── */

.webigrid:has(> .webi:only-child),
.ebgrid:has(> .eb:only-child) { grid-template-columns: 1fr; max-width: none; }

.webi:only-child, .eb:only-child {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding-right: 0;
}
.webi:only-child .cob, .eb:only-child .ebt { grid-column: 1; margin-bottom: 8px; }
.webi:only-child h3, .eb:only-child h3 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.webi:only-child p, .eb:only-child p { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.webi:only-child .go, .eb:only-child .ebc { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
@media (max-width: 860px) {
  .webi:only-child, .eb:only-child { grid-template-columns: 1fr; }
  .webi:only-child p, .eb:only-child p,
  .webi:only-child .go, .eb:only-child .ebc { grid-column: 1; grid-row: auto; }
}

/* Las secciones que quedaron con poco contenido no necesitan el
   mismo respiro vertical que las que llevan una grilla entera. */
#garantia, #webinars { padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(56px, 6vw, 84px); }
#garantia .terms { columns: 2; column-gap: clamp(32px, 4vw, 64px); max-width: none; }
@media (max-width: 760px) { #garantia .terms { columns: 1; } }


/* El tunel. Los anillos estaban topeados en 780 px, asi que en una
   pantalla de 1440 usaban el 54% del ancho y la mitad del alto de la
   seccion quedaba vacia alrededor. Es una pieza inmersiva: o entra en
   el cuadro o no vale la pena. Se le sube el tope y se le saca el
   respiro sobrante. */
#tunnel .tring { width: min(94vw, 1180px);
  margin-left: calc(min(94vw, 1180px) / -2);
  margin-top:  calc(min(94vw, 1180px) / -2); }
#tunnel .vp { width: 260px; height: 260px; }
#tunnel { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); }

/* Hiper-relevancia respiraba de mas: la mitad del alto de la seccion
   era aire alrededor de dos columnas cortas. */
#relevancia { padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 88px); }
#relevancia .rel-c { padding-top: clamp(26px, 2.6vw, 36px); padding-bottom: clamp(26px, 2.6vw, 36px); }
#relevancia .lede { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────────
   La tipografia base, una sola vez.

   Siete paginas -servicios, benchmarks, metodologia, recupero,
   seguridad, agencia-retencion y el webinar- nunca declararon
   font-family en body. Sin declaracion, el navegador usa su
   valor inicial, que es Times: el header cambiaba de tipografia
   al navegar de una seccion a otra.

   Estaba escrito en 44 de las 51 paginas y faltaba en 7. Eso no
   se arregla agregandolo en siete lugares mas: se declara una
   vez, aca, en la hoja que carga ultima en todas.
   ───────────────────────────────────────────────────────────── */

html, body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* El header no hereda de nadie: se declara solo, para que ninguna
   pagina pueda cambiarle la voz. */
.nav, .nav .links, .nav .links a, .nav .logo {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
}
.nav .links a:not(.cta) {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
}

/* Y el logo con una sola medida, en la hoja y no en el HTML. */
.nav .logo, nav.nav img.logo { height: 23px; width: auto; }
@media (max-width: 980px) { .nav .logo, nav.nav img.logo { height: 21px; } }


/* ─────────────────────────────────────────────────────────────
   El tablero del hero, aplastado.

   El mapa de estados estaba topeado en 236 px de alto contra 626
   de ancho: una proporcion de 2,65 a 1. Los nodos se apilaban en
   una banda finita, las etiquetas se pisaban entre si y los aros
   de Mixpanel y Customer.io quedaban rozando el borde de arriba.

   El canvas calcula las posiciones sobre su propio alto, asi que
   darle aire reparte los nodos sin tocar una linea de JS.

   No se le sube el alto y listo: eso empujaba el hero 150 px y lo
   sacaba de la primera pantalla de una laptop. Se le saca al feed
   lo que le sobra y se lo pasa al mapa, que es donde esta el
   argumento.
   ───────────────────────────────────────────────────────────── */

.console .cstage { height: clamp(250px, 34vh, 340px); }
/* El escenario del motor mantiene su proporcion en vez de una altura fija.
   Al ensanchar la columna del titular, el canvas se angosto de 638 a 525px
   con la misma altura y el grafo quedaba comprimido en horizontal: se veia
   estirado. Con aspect-ratio conserva el 2.08 original a cualquier ancho.
   Debajo de 940px la columna es unica y ahi sigue mandando la altura. */
@media (min-width: 941px) {
  .console .cstage { height: auto; aspect-ratio: 2.08 / 1; min-height: 210px; }
}
.console .cfeed  { height: 74px; padding-top: 9px; padding-bottom: 9px; }
.console .chans  { padding-top: 12px; padding-bottom: 12px; }
.console .cfoot  { padding-top: 14px; padding-bottom: 14px; }


/* ─────────────────────────────────────────────────────────────
   La voz tipografica, un registro mas fino.

   Veniamos con Satoshi en peso 900 y -0.075em de tracking: una
   letra de cartel. Grita bien en un titular de tres palabras y
   se vuelve pesada en una pagina entera de lectura.

   Geist es una grotesca de apertura ancha y ojo grande. A peso
   600 dice lo mismo con la mitad del ruido, y el tracking puede
   volver cerca de lo normal, que es lo que la hace respirar.

   El peso 900 no desaparece: queda para el numero suelto y para
   el cierre, donde la escala es el argumento.
   ───────────────────────────────────────────────────────────── */

h1, h2, h3, h4, .big, .hero h1, .eyebrow, .btn, .nav .links a {
  font-family: 'Geist', 'Satoshi', system-ui, -apple-system, sans-serif;
}

h1, .hero h1 { font-weight: 600; letter-spacing: -.035em; line-height: .98; }
h2, .big     { font-weight: 600; letter-spacing: -.032em; line-height: 1.02; }
h3           { font-weight: 600; letter-spacing: -.024em; line-height: 1.14; }
h4           { font-weight: 600; letter-spacing: -.02em; }

/* El cuerpo tambien: Poppins es redonda y simpatica, y al lado de
   Geist se lee blanda. */
html, body, p, li, td, .sub, .lede, .stand {
  font-family: 'Geist', 'Poppins', system-ui, -apple-system, sans-serif;
}
p, li, .sub, .lede, .stand { font-weight: 400; letter-spacing: -.005em; }
b, strong { font-weight: 600; }

/* Los botones y el header, en el mismo registro. */
.btn, .button, .kf-boton { font-weight: 600; letter-spacing: -.01em; }
.nav .links a:not(.cta) { font-weight: 500; letter-spacing: -.005em; }
.nav .links .cta { font-weight: 600; }

/* El eyebrow sigue en mono, que es el contrapunto del sistema. */
.eyebrow, .kick { font-family: 'Space Mono', monospace; font-weight: 700; }

/* Donde la escala ES el argumento, vuelve el peso alto. */
.final-cta h2, .sec.cta h2, .cifra, .num, .proof-metrics strong,
.cfoot b, .stat b { font-weight: 800; letter-spacing: -.05em; }


/* ═════════════════════════════════════════════════════════════
   EL CHROME: header y pie, uno solo para las 52.

   Antes se construia con JS: nav.js buscaba el <nav>, lo envolvia y
   movia el resultado. Eso producia tres bugs a la vez -salto de
   maqueta en cada carga, el header adentro o afuera del body segun
   la plantilla, y un HierarchyRequestError que dejaba la 404 sin
   header- y ninguno se podia arreglar desde una hoja de estilos.

   Ahora es markup estatico e identico, escrito por normalizar.py.
   ═════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  height: 74px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  /* El fondo va de borde a borde, pero el contenido cae en la misma
     vertical que el titular de la pagina. Sin esto el logo arranca en
     57px y el h1 en 88, y el salto se nota al bajar. */
  padding-inline: max(clamp(22px, 4vw, 64px), calc(50% - 690px + clamp(22px, 4vw, 64px)));
  background: rgba(244, 241, 232, .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line, rgba(17,16,39,.16));
}
.site-header .brand { display: inline-flex; align-items: center; width: fit-content; }
.site-header .brand img { height: 34px; width: auto; display: block; } /* 1.5x sobre los 23px originales */

.site-nav { display: flex; gap: 30px; justify-self: center; }
.site-nav a {
  position: relative; font-size: 15px; font-weight: 500;
  letter-spacing: -.005em; color: var(--ink, #111027); text-decoration: none;
}
/* El subrayado crece desde la izquierda: dice "esto es un enlace"
   sin ocupar espacio cuando no lo estas mirando. */
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -8px;
  width: 100%; height: 2px; background: var(--pink, #ff2e93);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--pink, #ff2e93); font-weight: 600; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px; border-radius: 99px;
  background: var(--ink, #111027); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: transform .2s ease;
}
.header-cta span { color: var(--pink, #ff2e93); }
.header-cta:hover { transform: translateY(-1px); }

/* La barra de progreso de lectura, pegada al borde de abajo del header. */
.kprog {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--pink, #ff2e93); transition: width .1s linear;
}

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
}
@media (max-width: 760px) {
  .site-header { height: 64px; padding: 0 18px; }
  .header-cta { padding: 11px 16px; font-size: 13px; gap: 8px; }
}


/* ── El pie ────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line, rgba(17,16,39,.16));
  margin-top: clamp(60px, 8vw, 110px);
  background: none;
}
.pie-cols {
  display: grid; grid-template-columns: 1.8fr repeat(4, 1fr);
  gap: 60px 40px;
  padding-top: 70px; padding-bottom: 30px;
}
.pie-marca img { height: 26px; width: auto; display: block; margin-bottom: 18px; }
.pie-marca p {
  color: var(--muted, #686678); font-size: 13px; line-height: 1.5;
  max-width: 320px; margin: 0;
}
.pie-cols > div:not(.pie-marca):not(.pie-grupo):not(.pie-legal) {
  display: flex; flex-direction: column; gap: 13px;
}
.pie-cols b {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink, #111027); margin-bottom: 4px;
}
.pie-cols a { color: var(--muted, #686678); font-size: 13px; text-decoration: none; }
.pie-cols a:hover { color: var(--pink, #ff2e93); }

.pie-grupo {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding-top: 26px; border-top: 1px solid var(--line, rgba(17,16,39,.16));
}
.pie-grupo span {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink, #111027);
}
.pie-grupo a { font-size: 12px; }

.pie-legal {
  grid-column: 1 / -1;
  padding-top: 22px; border-top: 1px solid var(--line, rgba(17,16,39,.16));
  color: var(--muted, #686678); font-size: 10px; line-height: 1.6;
}

@media (max-width: 1050px) {
  .pie-cols { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pie-cols { grid-template-columns: 1fr; }
}


/* ═════════════════════════════════════════════════════════════
   LA VOZ TIPOGRAFICA

   El hallazgo que define esto: la version de referencia carga Geist y
   NUNCA la aplica. Su CSS declara Arial/Helvetica, y como no declara
   font-weight en ningun titular, el reset los deja en peso 400.

   O sea: lo "premium" no viene de una fuente cara. Viene de display
   gigante en peso REGULAR con tracking muy negativo, contrastado
   contra micro-UI en peso 900. Nosotros teniamos exactamente lo
   contrario: Satoshi 900 en los titulares. Mismos colores, mismo
   tracking, resultado opuesto.

   Y se van las tres cargas externas. Eran 3 requests bloqueantes en
   cada una de las 52 paginas para conseguir algo que la referencia
   consigue sin ninguno.
   ═════════════════════════════════════════════════════════════ */

:root {
  --tipo: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --tipo-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html, body, p, li, td, th, input, select, textarea, button,
.sub, .lede, .stand, .answer, .tsub {
  font-family: var(--tipo);
}

/* La metrica del cuerpo, una sola para las 52. Habia tres: 16/1.55,
   16/1.60 y 17/1.65. La ultima es la de las siete paginas editoriales,
   y es lo que hacia que /servicios "se viera distinta" sin que hubiera
   una sola serif en todo el sitio. */
body {
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Los titulares: grandes y finos. El peso 400 es el cambio. */
h1, h2, h3, h4, h5, h6, .big, .hero h1 {
  font-family: var(--tipo);
  font-weight: 400;
}
h1, .hero h1  { font-size: clamp(52px, 6.6vw, 102px); letter-spacing: -.075em; line-height: .91; }
h2, .big      { font-size: clamp(42px, 5.3vw, 78px);  letter-spacing: -.065em; line-height: .96; }
h3            { font-size: clamp(24px, 2.2vw, 30px);  letter-spacing: -.045em; line-height: 1.06; }
h4            { font-size: 19px; letter-spacing: -.03em; line-height: 1.2; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--pink, #ff2e93); }

/* Y el contrapunto: todo lo corto va en 900, que es lo que sostiene la
   pagina cuando los titulares dejan de gritar. */
.eyebrow, .kick, .tag, .ttag, .rel-k, .lbl, .cob, .ebt, .mc,
.section-kicker, .crumbs, .fine, .fine2, .dgl, .pie-cols b, .pie-grupo span {
  font-family: var(--tipo-mono);
  font-weight: 700;
}
.eyebrow, .section-kicker {
  font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
}
.tag, .ttag { font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }

.btn, .button, .kf-boton, .header-cta, .site-nav a { font-family: var(--tipo); }
.btn, .button, .kf-boton { font-weight: 900; letter-spacing: -.005em; }
.header-cta { font-weight: 900; }
.site-nav a { font-weight: 700; }
.site-nav a[aria-current="page"] { font-weight: 900; }

p, li, .sub, .lede, .stand { font-weight: 400; letter-spacing: -.003em; }
b, strong { font-weight: 700; }

/* Donde la escala ES el argumento, el peso vuelve a subir. */
.cifra, .num, .cf b, .stat b, .leak-number, .proof-metrics strong {
  font-weight: 900; letter-spacing: -.07em;
}


/* Las paginas declaran el peso del titular con selectores que pesan mas
   que `h1` a secas (`.hero h1`, `.post-hero h1`...). Cargar ultima no
   alcanza contra la especificidad: hay que igualarla. */
.hero h1, .post-hero h1, .phero h1, .ahero h1, .hd h1, .art h1,
header h1, main h1, .subhero h1, .wrap h1, .shell h1,
.hero h2, .hd h2, header h2, main h2,
.hero h3, .hd h3, header h3, main h3 {
  font-weight: 400;
}
.hero h1, .post-hero h1, .phero h1, .ahero h1, .hd h1, header h1, main h1 {
  letter-spacing: -.075em; line-height: .91;
}


/* ═════════════════════════════════════════════════════════════
   EL CIERRE: captura, escalera y circuito.

   El problema que resuelve: 65 de los ~100 CTA del cuerpo apuntaban a
   /agenda, y 19 de 20 bloques de cierre decian literalmente la misma
   frase. Un visitante que acaba de leer un articulo no esta a un paso
   de una llamada de 30 minutos: esta a un paso de probar algo que no
   le cuesta nada.

   Ahora hay dos peldanos visibles y un circuito de tres.
   ═════════════════════════════════════════════════════════════ */

.captura { padding: clamp(64px, 7vw, 100px) 0 clamp(40px, 5vw, 64px); }
.captura-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 80px); align-items: start;
}
.captura h2 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.05em; line-height: 1.02; margin: 0 0 18px; }
.captura-lede { color: var(--muted, #686678); font-size: 16px; line-height: 1.6; max-width: 46ch; margin: 0; }
.captura-lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.captura-lista li {
  position: relative; padding-left: 22px; font-size: 14.5px;
  color: var(--muted, #686678); line-height: 1.5;
}
.captura-lista li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--pink, #ff2e93); font-weight: 900;
}
@media (max-width: 860px) { .captura-grid { grid-template-columns: 1fr; } }

.cierre { padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 7vw, 100px); }
.cierre-h { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.045em; line-height: 1.05; margin: 14px 0 clamp(28px, 3.5vw, 44px); max-width: 22ch; }

/* Los dos peldanos. El primero pesa mas porque es el que no cuesta nada. */
.escalera { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line, rgba(17,16,39,.16)); }
.peldano {
  display: grid; gap: 8px; align-content: start;
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px) clamp(26px, 3vw, 38px) 0;
  text-decoration: none; color: inherit;
  transition: background .2s ease;
}
.peldano + .peldano { padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--line, rgba(17,16,39,.16)); }
.peldano:hover { background: rgba(255, 46, 147, .04); }
.peldano-n {
  font-family: var(--tipo-mono); font-size: 10px; font-weight: 900;
  letter-spacing: .14em; color: var(--pink, #ff2e93);
}
.peldano-t { font-size: clamp(19px, 1.9vw, 25px); letter-spacing: -.03em; line-height: 1.12; }
.peldano-d { color: var(--muted, #686678); font-size: 14px; line-height: 1.5; max-width: 34ch; }
.peldano-go {
  margin-top: 10px; font-size: 14px; font-weight: 900;
  color: var(--ink, #111027); display: inline-flex; align-items: center; gap: 8px;
}
.peldano-go em { font-style: normal; color: var(--pink, #ff2e93); transition: transform .2s ease; }
.peldano:hover .peldano-go em { transform: translateX(4px); }
.peldano-1 .peldano-t { font-weight: 400; }
@media (max-width: 700px) {
  .escalera { grid-template-columns: 1fr; }
  .peldano + .peldano { padding-left: 0; border-left: 0; border-top: 1px solid var(--line, rgba(17,16,39,.16)); }
}

/* El circuito: tres salidas laterales, en linea de base. */
.circuito { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(30px, 4vw, 48px); }
.circ-a {
  display: grid; gap: 6px; align-content: start;
  padding: 22px clamp(20px, 2.4vw, 32px) 22px 0;
  border-top: 1px solid var(--line, rgba(17,16,39,.16));
  text-decoration: none; color: inherit; transition: border-color .2s ease;
}
.circ-a:hover { border-top-color: var(--pink, #ff2e93); }
.circ-a b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.circ-a span { color: var(--muted, #686678); font-size: 13.5px; line-height: 1.45; }
.circ-a i { font-style: normal; color: var(--pink, #ff2e93); font-weight: 900; font-size: 13px; margin-top: 4px; }
@media (max-width: 760px) { .circuito { grid-template-columns: 1fr; } }

.captura-copy { min-width: 0; }
.peldano-2 .peldano-t { font-weight: 400; }

/* El badge acredita, pero solo sirve si el comprador puede comprobarlo.
   Va envuelto en un enlace al directorio oficial de Customer.io. El enlace
   no cambia el aspecto: solo suma cursor, foco visible y destino. */
.ciobadge-link { display: inline-block; line-height: 0; border: 0; text-decoration: none; }
.ciobadge-link:focus-visible { outline: 2px solid var(--pink, #e91e8a); outline-offset: 3px; }
.ciobadge-link:hover { opacity: .88; }

/* El header mide 74px y se queda pegado arriba. Sin esto, los 106 enlaces con
   ancla del sitio aterrizan con el titulo tapado por el propio header. */
html { scroll-padding-top: 92px; }

/* El H1 de la home, en dos lineas.
   kunko.css sube todos los h1 a 95px, y con el titular nuevo eso lo partia en
   cuatro lineas, con un corte feo en "Mas clientes que / vuelven". La direccion
   de arte pide maximo dos lineas en escritorio y, si el visual compite con el
   titular, reducir el visual. Asi que la columna de texto gana ancho, el motor
   cede, y el h1 vuelve a los 76px que la propia pagina ya declaraba.
   Va acotado a .hero-grid, que existe solo en la home. */
.hero-home { grid-template-columns: 1.3fr 1fr; }
.hero-home h1 { font-size: clamp(40px, 5.6vw, 76px); }
@media (max-width: 940px) {
  .hero-home { grid-template-columns: 1fr; }
}

/* El logo de la empresa arriba del nombre: la cita se apoya en la marca, no
   solo en la persona. Escala de grises para no competir con el texto. */
/* Las citas tienen largos distintos, asi que el bloque de atribucion se ancla
   abajo y los tres logos quedan sobre la misma linea. */
.cita { display:flex; flex-direction:column; }
.cita blockquote { flex:0 0 auto; }
.cita-logo { display:block; height:22px; width:auto; align-self:flex-start; margin:auto 0 18px;
  filter:grayscale(1); opacity:.62; }
.cita:hover .cita-logo { filter:none; opacity:1; }
#proof .seccta { margin-top: clamp(34px, 3.6vw, 52px); }