/* ─────────────────────────────────────────────────────────────
   Kunko · sistema editorial de datos.

   La direccion de arte del sitio, en un solo lugar. Nacio en
   /recupero-fintech y desde aca se aplica al resto.

   La regla: el grafico ES el argumento, no decora el texto.
   Nada de grillas de tarjetas iguales.

   Vive aca: tipografia, rejilla, nav, hero, secciones, franja a
   sangre, FAQ, cierre, footer, reveal.
   NO vive aca: los graficos propios de cada pagina. Esos se
   escriben en la pagina, porque son su argumento.
   ───────────────────────────────────────────────────────────── */
  :root{
    --bg:#f6f4ee; --paper:#fff; --ink:#15122e; --ink2:#5b5875; --mut:#9d99b3;
    --pink:#e91e8a; --amber:#f5a623; --em:#12a874; --red:#e5484d;
    --rule:rgba(21,18,46,.11); --deep:#0f0d20;
  }

  /* ── ESCALA DE INTERLINEADO ──
     Habia seis valores casi iguales haciendo el mismo trabajo (1.5, 1.55,
     1.6, 1.62, 1.7, 1.72) y otros seis para titulares. Eso no es una escala,
     es deriva: el texto se lee distinto de una seccion a otra sin motivo.
     Cinco pasos alcanzan, y cada uno tiene un trabajo. */
  :root{
    --lh-titular:.94;   /* h1, donde el bloque tiene que compactar */
    --lh-tit2:1.03;     /* h2 y h3 */
    --lh-corto:1.18;    /* titulos de tarjeta y de fila */
    --lh-texto:1.65;    /* parrafo de lectura */
    --lh-dato:1.5;      /* texto chico, pies y etiquetas */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink);
       -webkit-font-smoothing:antialiased;line-height:var(--lh-texto);font-size:17px;
       font-variant-numeric:tabular-nums;overflow-x:hidden}
  a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
  ::selection{background:var(--pink);color:#fff}

  /* ── EL MARGEN LATERAL EN PANTALLAS CHICAS ──
     Los bloques de seccion escribian su espaciado con el atajo
     `padding: X 0`. Ese atajo tambien fija el lateral en cero y, por
     especificidad, le gana al de `.shell`. Arriba de 1240px no se notaba,
     porque el margen lo daba el `margin:0 auto`; abajo de ese ancho el texto
     quedaba pegado al borde de la pantalla en las 53 paginas. Por eso el
     espaciado vertical va en longhand: deja pasar el lateral. */

  /* rejilla editorial: columna angosta de lectura, graficos que rompen */
  .shell{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
  .read{max-width:660px}

  /* Nav: mas aire arriba, logo mas chico y un subrayado que crece desde
     la izquierda en vez de un cambio de color seco. */
  .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 0 26px}
  .nav .logo{height:23px;transition:opacity .2s}
  .nav a:hover .logo{opacity:.66}
  .nav .links{display:flex;gap:32px;align-items:center;font-size:13.5px;font-weight:500;
              color:var(--ink2);letter-spacing:-.005em}
  .nav .links a:not(.cta){position:relative;padding:4px 0}
  .nav .links a:not(.cta)::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
              background:var(--pink);transition:width .28s cubic-bezier(.2,.7,.2,1)}
  .nav .links a:not(.cta):hover{color:var(--ink)}
  .nav .links a:not(.cta):hover::after{width:100%}
  .nav .links .cta{padding:11px 22px;background:var(--ink);color:#fff;border-radius:999px;
              font-weight:600;transition:background .2s,transform .18s}
  .nav .links .cta:hover{background:var(--pink);transform:translateY(-1px)}
  .nav .links .cta::after{display:none}
  @media(max-width:980px){.nav .links a:not(.cta){display:none}.nav{padding:22px 0 20px}}

  .crumbs{font-family:'Space Mono',monospace;font-size:11px;color:var(--mut);padding:10px 0 0}
  .crumbs a:hover{color:var(--pink)} .crumbs i{font-style:normal;opacity:.4;margin:0 7px}

  /* HERO editorial */
  .hero{padding-block:clamp(56px,9vw,128px) clamp(48px,7vw,88px)}
  .eyebrow{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;
           letter-spacing:.16em;color:var(--pink);display:flex;align-items:center;gap:14px;margin-bottom:30px}
  .eyebrow::after{content:'';height:1px;flex:1;max-width:120px;background:currentColor;opacity:.3}
  h1{font-family:'Satoshi','Poppins',sans-serif;font-weight:900;
     font-size:clamp(44px,8.4vw,96px);line-height:var(--lh-titular);letter-spacing:-.042em;
     max-width:14ch;text-wrap:balance;margin-bottom:34px}
  h1 em{font-style:normal;color:var(--pink)}
  .stand{font-size:clamp(19px,2.1vw,25px);line-height:1.42;color:var(--ink2);max-width:32ch;font-weight:400}
  .stand b{color:var(--ink);font-weight:600}

  /* secciones con numero colgado */
  section.blk{padding-block:clamp(72px,10vw,148px);position:relative}
  .num{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.16em;
       color:var(--mut);text-transform:uppercase;margin-bottom:18px}
  h2{font-family:'Satoshi','Poppins',sans-serif;font-weight:900;
     font-size:clamp(30px,4.4vw,54px);line-height:var(--lh-tit2);letter-spacing:-.032em;
     max-width:17ch;text-wrap:balance;margin-bottom:26px}
  h2 em{font-style:normal;color:var(--pink)}
  p{margin-bottom:20px;color:var(--ink2);max-width:62ch}
  p b{color:var(--ink);font-weight:600}
  p.lead{font-size:20px;line-height:1.58;color:var(--ink)}

  /* franja oscura a sangre */
  .bleed{background:var(--deep);color:#fff;padding-block:clamp(64px,9vw,120px);margin:clamp(40px,6vw,80px) 0}
  .bleed p{color:rgba(255,255,255,.66)}
  .bleed .num{color:rgba(255,255,255,.34)}
  .pull{font-family:'Satoshi','Poppins',sans-serif;font-size:clamp(26px,3.6vw,44px);font-weight:900;
        line-height:1.14;letter-spacing:-.03em;max-width:20ch;text-wrap:balance;color:#fff;margin-bottom:0}
  .pull em{font-style:normal;color:var(--pink)}

  /* pie de grafico: la nota que explica como se lee lo de arriba */
  .eje{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
       color:var(--mut);margin-top:16px;max-width:1040px}
  .eje b{color:var(--pink);font-weight:700}


  /* ── TABLAS DE DATOS ──
     Sin bordes de caja: solo reglas horizontales, como una tabla de anuario.
     El numero manda, asi que va en el peso de la marca y con cifras de ancho fijo. */
  table{width:100%;border-collapse:collapse;margin:26px 0 10px;font-size:15px;max-width:1040px}
  th{text-align:left;font-family:'Space Mono',monospace;font-size:9.5px;text-transform:uppercase;
     letter-spacing:.14em;color:var(--mut);font-weight:700;padding:0 16px 11px 0;
     border-bottom:1px solid var(--ink)}
  td{padding:15px 16px 15px 0;border-bottom:1px solid var(--rule);color:var(--ink2);vertical-align:top}
  td:last-child,th:last-child{padding-right:0}
  td b{color:var(--ink);font-weight:600}
  tr:hover td{background:rgba(21,18,46,.017)}

  /* linea de fuente al pie de cada bloque de datos */
  .src{font-family:'Space Mono',monospace;font-size:10.5px;line-height:1.7;color:var(--mut);
       margin:10px 0 0;max-width:1040px}
  .src a{color:var(--pink);text-decoration:underline}
  .src i{font-style:italic}

  /* bloque de nota: advertencia metodologica, lectura, caveat */
  .box{border-left:3px solid var(--pink);padding:4px 0 4px 26px;margin:34px 0;max-width:66ch}
  .box.em{border-left-color:var(--em)} .box.am{border-left-color:var(--amber)}
  .box .lb{font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;
           text-transform:uppercase;color:var(--pink);margin-bottom:10px}
  .box.em .lb{color:var(--em)} .box.am .lb{color:var(--amber)}
  .box p:last-child{margin-bottom:0}

  .warn{border-left:3px solid var(--amber);padding:4px 0 4px 26px;margin:38px 0;max-width:64ch}
  .warn .k{font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;
           text-transform:uppercase;color:var(--amber);margin-bottom:10px}
  .warn p{margin:0}

  .faq{max-width:760px;margin-top:32px;border-top:1px solid var(--rule)}
  .faq details{border-bottom:1px solid var(--rule);padding:22px 0}
  .faq summary{font-family:'Satoshi','Poppins',sans-serif;font-weight:700;font-size:18.5px;letter-spacing:-.018em;
               cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'+';color:var(--pink);font-weight:700;font-size:24px;line-height:.9;flex-shrink:0}
  .faq details[open] summary::after{content:'\2212'}
  .faq details p{margin:14px 0 0;font-size:16px}

  .end{padding-block:clamp(60px,8vw,110px) clamp(70px,9vw,120px)}
  .end h2{font-size:clamp(32px,5.4vw,64px);max-width:15ch}
  .btn{display:inline-flex;align-items:center;gap:11px;font-size:16px;font-weight:600;
       padding:17px 32px;background:var(--pink);color:#fff;border-radius:999px;margin-top:14px;
       transition:transform .15s,box-shadow .25s;box-shadow:0 14px 34px -14px rgba(233,30,138,.6)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(233,30,138,.7)}

  footer{background:var(--ink);color:#fff;padding:48px 0 36px}
  .frow{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
        padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.12)}
  footer .logo{height:26px;filter:brightness(0) invert(1)}
  .fnav{display:flex;gap:18px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:11.5px;
        font-weight:700;text-transform:uppercase}
  .fnav a{color:rgba(255,255,255,.7)} .fnav a:hover{color:#fff}
  .fine2{margin-top:20px;font-family:'Space Mono',monospace;font-size:11px;color:rgba(255,255,255,.45);line-height:1.7}

  /* El contenido no puede depender de que el JavaScript corra: si el
     observador falla o el script se bloquea, la pagina queda en blanco.
     Por eso el estado oculto solo se aplica cuando hay JS (html.js). */
  .rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  html.js .rv{opacity:0;transform:translateY(18px)}
  html.js .rv.in{opacity:1;transform:none}
  .rv.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

  /* ── JERARQUIA DE ENCABEZADOS, SIN REPETIRSE ──
     Todas las secciones venian igual: numerito arriba, h2 debajo, siempre
     al ras izquierdo y del mismo tamano. Leidas en fila, se vuelven ruido.
     Estas variantes cambian el peso y la posicion segun lo que la seccion
     tiene que hacer, y se combinan con el grafico de cada pagina. */

  /* Apertura: el encabezado ocupa el ancho y pesa como un segundo hero. */
  .blk--apertura h2{font-size:clamp(36px,6vw,74px);max-width:15ch;letter-spacing:-.038em}
  .blk--apertura .num{margin-bottom:24px}

  /* Lateral: el rotulo se va al margen y el titular arranca a la altura del texto.
     Sirve para secciones de detalle que no deben competir con la anterior. */
  @media(min-width:1000px){
    .blk--lateral{display:grid;grid-template-columns:180px 1fr;gap:0 48px;align-items:start}
    .blk--lateral .num{grid-column:1;margin:10px 0 0;text-align:right}
    .blk--lateral > :not(.num){grid-column:2}
  }

  /* Menor: para cierres de seccion y bloques de apoyo. */
  .blk--menor h2{font-size:clamp(25px,3.2vw,38px);max-width:22ch;letter-spacing:-.026em}

  /* Centrada: se usa una sola vez por pagina, donde hay un giro de argumento. */
  .blk--centro{text-align:center}
  .blk--centro h2{max-width:19ch;margin-left:auto;margin-right:auto}
  .blk--centro .num{justify-content:center}
  .blk--centro .read{margin-left:auto;margin-right:auto}

  /* El numero de seccion como cifra grande al margen, no como etiqueta. */
  .num--cifra{font-size:15px;color:var(--ink);display:flex;align-items:baseline;gap:12px}
  .num--cifra b{font-family:'Satoshi','Poppins',sans-serif;font-size:44px;font-weight:900;
                line-height:.8;letter-spacing:-.04em;color:var(--pink)}

  /* Seccion que contiene un collage asomando por el borde. */
  .blk--concollage{position:relative;overflow:hidden}
  .blk--concollage > *:not(.col){position:relative;z-index:1}

  /* ── CREDENCIAL ──
     El sitio afirmaba 'Platinum Partner de Customer.io' en 55 paginas y no
     mostraba el badge en ninguna. Una credencial verificable se muestra. */
  .credencial{display:flex;align-items:center;gap:clamp(20px,3vw,38px);flex-wrap:wrap;
              margin:clamp(28px,4vw,44px) 0 0;padding:22px 0;
              border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);max-width:1040px}
  .credencial img{display:block;height:auto}
  .credencial .badge{width:clamp(150px,17vw,196px)}
  .credencial .marca{width:clamp(104px,12vw,136px);opacity:.9}
  .credencial p{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:0;max-width:38ch}
  .credencial p b{color:var(--ink);font-weight:600}