/* tipografías del sitio de dLocal (los mismos archivos que usa el reporte): Plus Jakarta Sans dLocal para títulos, etiquetas y cifras; Roboto dLocal para el texto corrido, como en el reporte */ @font-face{font-family:'Plus Jakarta Sans dLocal';src:url('../../fonts/PlusJakartaSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Plus Jakarta Sans dLocal';src:url('../../fonts/PlusJakartaSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Plus Jakarta Sans dLocal';src:url('../../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Plus Jakarta Sans dLocal';src:url('../../fonts/PlusJakartaSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Roboto dLocal';src:url('../../fonts/Roboto-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Roboto dLocal';src:url('../../fonts/Roboto-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Roboto dLocal';src:url('../../fonts/Roboto-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Roboto dLocal';src:url('../../fonts/Roboto-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Roboto dLocal';src:url('../../fonts/Roboto-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} /* ══ Tipografía del cuerpo · igual al Payments Report 2026 ═════════ Tomado de dlocal.com/dlocal-payments-report-2026 (desde "Payment friction is nearly universal…"): títulos 600 con interlineado 90 % y -0.02em; párrafos 16px/1.6 al 50 % del navy, 1.6em bajo el título y 1.2em entre párrafos, alineados a la izquierda; etiquetas 700 en azul; subtítulos 600/1.3; fuentes en itálica gris; cifras 500 con -5 % de tracking y el % a la mitad. */ #page-market .chp-body, #page-market .pov-b{ --rp-ink:#070420; --rp-text:hsl(246 78% 7% / 50%); --rp-strong:hsl(246 78% 7% / 70%); --rp-blue:#2D58F5; --rp-src:#9CA3AF; --rp-h:clamp(28px,2.78vw,40px); font-kerning:normal;font-feature-settings:"kern" 1;text-rendering:optimizeLegibility} /* títulos de sección */ #page-market .chp-body .sect-head h2, #page-market .chp-body h2.h2, #page-market .pov-b .pov-title{ font-family:var(--sans);font-size:var(--rp-h);font-weight:600;line-height:.9; letter-spacing:-.02em;color:var(--rp-ink);max-width:16em} #page-market .chp-body .sect-head{padding-bottom:calc(16px * 1.6)} /* párrafos */ #page-market .chp-body .rt{max-width:42em} #page-market .chp-body .rt p{ font-size:16px;line-height:1.6;letter-spacing:0;color:var(--rp-text); text-align:left;margin:0} #page-market .chp-body .rt p + p{margin-top:1.2em} #page-market .chp-body .rt{padding-bottom:0} #page-market .chp-body .rt + *{margin-top:calc(16px * 2.3)} #page-market .chp-body .rt strong, #page-market .chp-body .rt .hl{font-weight:600;color:var(--rp-strong);letter-spacing:0} /* subtítulos */ #page-market .chp-body h3, #page-market .chp-body .sub-h{ font-family:var(--sans);font-size:clamp(20px,1.53vw,22px);font-weight:600;line-height:1.3; letter-spacing:0;color:var(--rp-ink)} #page-market .chp-body .rt h3{margin:calc(16px * 2.4) 0 1em} #page-market .chp-body .rt h3:first-child{margin-top:0} /* etiquetas de gráficos y tablas */ #page-market .chp-body .chart-h{ font-family:var(--sans);font-size:18px;font-weight:700;line-height:1.3;letter-spacing:0; color:var(--rp-blue);margin:0 0 calc(18px * 1.7)} /* fuentes */ #page-market .chp-body .chart-src, #page-market .chp-body .src-note, #page-market .pov-b .chart-src{ font-family:var(--sans);font-size:14px;font-style:italic;font-weight:400;line-height:1.5; letter-spacing:0;text-transform:none;color:var(--rp-src);max-width:43em} #page-market .chp-body .chart-foot{padding-top:2.4em} #page-market .chp-body .src-note{padding-top:2.4em} /* cifras */ #page-market .chp-body .kpi b{font-family:var(--sans);font-size:clamp(40px,3.4vw,48px); font-weight:500;letter-spacing:-.05em;line-height:1} #page-market .chp-body .kpi b i{font-size:.5em;letter-spacing:-.02em} #page-market .chp-body .kpi small{font-size:16px;line-height:1.2;color:var(--rp-text)} #page-market #mixChart .stack-bar i b em{font-weight:500;letter-spacing:-.05em} @media(max-width:767px){ #page-market .chp-body,#page-market .pov-b{--rp-h:24px} #page-market .chp-body .rt p{font-size:14px} #page-market .chp-body .kpi small{font-size:14px}} /* ── navegación lateral, como el índice del reporte ── 13px, 700, mayúsculas con +0.08em, numerada; gris claro y la activa en azul con una rayita de 16px que entra desde la izquierda */ #page-market .secnav{gap:12px;counter-reset:secnav} #page-market .secnav a{counter-increment:secnav;gap:10px; font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.08em; text-transform:uppercase;color:#D8D8D8;transition:color .2s} #page-market .secnav a span::before{content:counter(secnav) ". "} #page-market .secnav a s{display:block;flex-shrink:0;width:0;height:1px;margin-right:-10px; background:#1043FA;transition:width .2s cubic-bezier(.33,1,.68,1),margin .2s cubic-bezier(.33,1,.68,1)} #page-market .secnav a.on{color:#1043FA;font-weight:700} #page-market .secnav a.on s{width:16px;margin-right:0;background:#1043FA} @media(hover:hover){#page-market .secnav a:hover{color:#1043FA}} /* ── sin líneas entre textos: las reglas quedan sólo entre secciones (.sect::before). Se van las de KPIs, títulos de gráfico, callouts, tarjetas y el bloque "The way locals pay". Las tablas conservan las suyas porque ordenan filas de datos. ── */ #page-market .chp-body .kpis, #page-market .chp-body .kpi, #page-market .chp-body .chart-h, #page-market .chp-body .callout, #page-market .chp-body .cn-card, #page-market .chp-body .cn-card + .cn-card, #page-market .bens, #page-market .bens *, #page-market .pov-b .pov-top, #page-market .pov-b.pov-stack .pov-apm{border-top:0!important;border-bottom:0!important;border-left-color:transparent} #page-market .chp-body .kpi{border-left:0!important} #page-market .pov-b .pov-top{padding-bottom:0} #page-market .pov-b.pov-stack .pov-apm{padding-top:0} /* ── un solo wrapper de texto: todo lo que no es gráfico (párrafos, KPIs, callouts, subtítulos, fuentes) arranca y termina en la misma columna de 42em. Sólo los gráficos y tablas pueden salirse. ── */ #page-market .chp-body{--wrap:672px} #page-market .chp-body .rt, #page-market .chp-body .kpis, #page-market .chp-body .callout, #page-market .chp-body .sub-h, #page-market .chp-body > .src-note, #page-market .chp-body .sect > .src-note{margin-left:var(--colx);margin-right:auto;max-width:var(--wrap);width:auto} #page-market .chp-body .kpis{gap:0 clamp(20px,2.4vw,36px)} #page-market .chp-body .kpi{max-width:none} /* la fuente dentro del texto: 14px itálica, separada 2.4em, sin doble aire */ #page-market .chp-body .rt p.src-note, #page-market .chp-body p.src-note{font-size:14px;line-height:1.5;font-style:italic;margin-top:2.4em;padding-top:0;color:var(--rp-src)} #page-market .chp-body .src-note a{color:inherit!important;text-decoration-color:rgba(156,163,175,.6)!important} @media(max-width:980px){ #page-market .chp-body .rt,#page-market .chp-body .kpis,#page-market .chp-body .callout, #page-market .chp-body .sub-h{margin-left:var(--gut);margin-right:var(--gut)}} #page-market .chp-body .kpi small{max-width:none} /* ── tablas, como las del reporte: tarjeta con borde fino y radio 20px, cabecera gris 14px/600 sin mayúsculas, filas de 18px con una regla gris entre ellas (la única línea permitida dentro del texto) ── */ #page-market .chp-body .bn, #page-market .chp-body .ng-rules{margin:calc(16px*2.4) auto calc(16px*2.4) var(--colx);max-width:700px; padding:6px 24px;border:1px solid #E9E9E9!important;border-radius:20px;background:#fff;overflow-x:auto} #page-market .chp-body .bn table{width:100%;border-collapse:collapse;min-width:0} #page-market .chp-body .bn thead tr{border-bottom:1px solid #E9E9E9} #page-market .chp-body .bn th{padding:14px 18px 14px 0;border:0!important; font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:#9CA3AF;text-align:left} #page-market .chp-body .bn td{padding:18px 18px 18px 0;border:0!important; font-size:16px;line-height:1.45;font-weight:400;color:#0A0A16;vertical-align:top} #page-market .chp-body .bn td:last-child,#page-market .chp-body .bn th:last-child{padding-right:0} #page-market .chp-body .bn tbody tr:not(:last-child) td{border-bottom:1px solid #E9E9E9!important} #page-market .chp-body .bn td:first-child{font-weight:700;color:#0A0A16;opacity:.9;white-space:normal} #page-market .chp-body .ngr-h,#page-market .chp-body .ngr{border-bottom:1px solid #E9E9E9!important} #page-market .chp-body .ngr:last-child{border-bottom:0!important} #page-market .chp-body .ngr-h{padding:14px 0} #page-market .chp-body .ngr-h span{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0; text-transform:none;color:#9CA3AF} #page-market .chp-body .ngr{padding:18px 0} #page-market .chp-body .ngr b{font-size:16px;font-weight:700;letter-spacing:0;line-height:1.35;color:#0A0A16;opacity:.9} #page-market .chp-body .ngr em{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0; text-transform:none;color:#2D58F5;padding-top:.1em} #page-market .chp-body .ngr p{font-size:16px;line-height:1.45;color:#0A0A16} @media(max-width:980px){#page-market .chp-body .bn,#page-market .chp-body .ng-rules{margin-left:var(--gut);margin-right:var(--gut);padding:6px 16px}} /* los títulos usan el mismo ancho que el texto: arrancan y cortan en la misma columna de 672px */ #page-market .chp-body .sect-head h2, #page-market .chp-body h2.h2{max-width:var(--wrap,672px);width:100%} #page-market .chp-body .sub-h, #page-market .chp-body .rt h3{max-width:var(--wrap,672px)} /* ── el mismo aire que el reporte ── márgenes laterales max(64px, 8.333vw); índice de 240px; entre índice y texto 80 / 130 / 180 / 280px según el ancho (980 / 1200 / 1400 / 1800); entre secciones 0.3 × section-y arriba y abajo de la regla */ #page-market .chp-body, #page-market .secnav{ --gut:max(64px,8.333vw); --navw:240px;--navgap:80px; --colx:calc(var(--gut) + var(--navw) + var(--navgap)); --sy:clamp(80px,17.5vh,160px)} @media(min-width:1200px){#page-market .chp-body,#page-market .secnav{--navgap:130px}} @media(min-width:1400px){#page-market .chp-body,#page-market .secnav{--navgap:180px}} @media(min-width:1800px){#page-market .chp-body,#page-market .secnav{--navgap:280px}} #page-market .secnav{width:var(--navw);margin-left:var(--gut)} #page-market .chp-body .sect-head{padding-top:calc(var(--sy) * .3)} #page-market .chp-body .sect{padding-bottom:calc(var(--sy) * .3);margin-top:calc(var(--sy) * .3)} #page-market .chp-body .sect:first-child{margin-top:0} /* los gráficos pueden salir del texto, pero respetan el margen derecho */ #page-market .chp-body .chart, #page-market .chp-body .chart.wide{margin-right:var(--gut)} @media(max-width:980px){ #page-market .chp-body,#page-market .secnav{--gut:20px;--colx:20px}} /* ── tooltip de los gráficos: aparece al pasar el mouse ── */ #tip{background:#fff!important;color:#070420;border:1px solid #E9E9E9!important;border-radius:10px; box-shadow:0 10px 30px -12px rgba(7,4,32,.28);padding:10px 14px;font-family:var(--sans); font-size:14px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums} #tip small{display:block;margin-bottom:2px;font-size:12px;font-weight:600;color:#9CA3AF} #tip.on{opacity:1;transform:none} /* ── nada rompe el wrapper: gráficos, tablas, barras y la tarjeta de cita arrancan y terminan en la misma columna de 672px que el texto ── */ #page-market .chp-body .chart, #page-market .chp-body .chart.wide, #page-market .chp-body .chart.duo, #page-market .chp-body .bn, #page-market .chp-body .ng-rules, #page-market .chp-body .bens, #page-market .chp-body .brq-band, #page-market .chp-body .mzn{ margin-left:var(--colx)!important;margin-right:auto!important; max-width:var(--wrap)!important;width:auto!important;box-sizing:border-box} #page-market .chp-body .mix-grid{margin-left:0!important} #page-market .chp-body .brq-band{grid-template-columns:minmax(0,1fr) clamp(120px,11vw,160px)} #page-market .chp-body .brq-band .brq-in{margin-left:0!important;margin-right:0!important} @media(max-width:980px){ #page-market .chp-body .chart,#page-market .chp-body .chart.wide,#page-market .chp-body .chart.duo, #page-market .chp-body .bn,#page-market .chp-body .ng-rules,#page-market .chp-body .bens, #page-market .chp-body .brq-band,#page-market .chp-body .mzn{margin-left:var(--gut)!important;margin-right:var(--gut)!important}} #page-market .chp-body .brq-band blockquote{font-size:clamp(17px,1.35vw,20px);line-height:1.5} /* ── columnas con el tamaño del reporte ── la columna de contenido va desde el fin del índice hasta el margen derecho de la página (1fr en el reporte). El texto corrido se queda en 42em; gráficos, KPIs, citas y bloques de datos usan la columna entera; las tablas, como en el reporte, hasta 700px. */ #page-market .chp-body .chart, #page-market .chp-body .chart.wide, #page-market .chp-body .chart.duo, #page-market .chp-body .kpis, #page-market .chp-body .callout, #page-market .chp-body .bens, #page-market .chp-body .brq-band, #page-market .chp-body .mzn{ margin-left:var(--colx)!important;margin-right:var(--gut)!important;max-width:none!important;width:auto!important} #page-market .chp-body .bn, #page-market .chp-body .ng-rules{margin-left:var(--colx)!important;margin-right:auto!important;max-width:700px!important} #page-market .chp-body .brq-band{grid-template-columns:minmax(0,1fr) clamp(150px,14.5vw,208px)} #page-market .chp-body .brq-band blockquote{font-size:clamp(18px,1.62vw,25px);line-height:1.45} @media(max-width:980px){ #page-market .chp-body .chart,#page-market .chp-body .chart.wide,#page-market .chp-body .chart.duo, #page-market .chp-body .kpis,#page-market .chp-body .callout,#page-market .chp-body .bens, #page-market .chp-body .brq-band,#page-market .chp-body .mzn,#page-market .chp-body .bn, #page-market .chp-body .ng-rules{margin-left:var(--gut)!important;margin-right:var(--gut)!important}} /* ── citas: el degradé azul del bloque "The survey was designed…" del reporte (c-survey) ── */ #page-market .chp-body .brq-band, #page-market .chp-body .brq{background-color:#0F47D6!important; background-image:linear-gradient(205deg,#0F47D6 25%,#6378FF)!important} #page-market .chp-body .brq-band .brq-bg::after{background:none!important} #page-market .chp-body .brq-band footer{border-top:0!important;padding-top:0} /* ── familias como en el reporte: --font (Roboto) para el texto corrido, las fuentes y las descripciones; --font-alt (Plus Jakarta) para títulos, etiquetas, cifras, índice y tablas ── */ #page-market{--rp-font:'Roboto dLocal',Roboto,system-ui,sans-serif;--rp-alt:'Plus Jakarta Sans dLocal','Plus Jakarta Sans',sans-serif} #page-market .chp-body .rt p, #page-market .chp-body .rt li, #page-market .chp-body .src-note, #page-market .chp-body .chart-src, #page-market .pov-b .chart-src, #page-market .chp-body .kpi small, #page-market .chp-body .bn td, #page-market .chp-body .ngr p, #page-market .chp-body .cleg li, #page-market .chp-body .h3, #page-market .chp-body .sub-h, #page-market .chp-body .rt h3{font-family:var(--rp-font)} #page-market .chp-body .sect-head h2, #page-market .chp-body h2.h2, #page-market .pov-b .pov-title, #page-market .pov-b .pov-h, #page-market .chp-body .chart-h, #page-market .chp-body .kpi b, #page-market .secnav a, #page-market .chp-body .bn th, #page-market .chp-body .ngr-h span, #page-market .chp-body .ngr b, #page-market .chp-body .ngr em, #page-market #mixChart .stack-bar i b, #tip{font-family:var(--rp-alt)} /* lo destacado dentro del texto sigue en la Roboto del párrafo */ #page-market .chp-body .rt .hl, #page-market .chp-body .rt strong, #page-market .chp-body .rt em, #page-market .chp-body .rt a, #page-market .chp-body .kpi small *, #page-market .chp-body .src-note *{font-family:inherit} /* todo el cuerpo arranca en Roboto, como el del reporte; sólo lo que usa --font-alt en el reporte vuelve a Plus Jakarta (reglas de arriba) */ #page-market .chp-body{font-family:var(--rp-font)} #page-market .chp-body .rt p{font-family:'Roboto dLocal',Roboto,system-ui,sans-serif!important} /* ── índice lateral: arranca a la altura del primer título y queda fijo arriba (como el del reporte, top = header + 40px), en lugar de aparecer a media pantalla recién en la segunda sección ── */ #page-market .secnav{top:130px!important;padding-top:calc(var(--sy) * .3 + 10px)!important} #page-market .secnav a span::before{content:none!important} /* apertura del hero: el título llega al mismo ancho que la bajada */ #page-market .op-r .op-deck, #page-market .op-r .lede{max-width:calc(42 * clamp(16px,1.45vw,21px))!important} #page-market .op-r .op-deck{width:100%} /* ── columna de contenido más ancha: menos aire entre índice y texto y el wrapper del texto crece hasta ocupar la columna (tope 820px) ── */ #page-market .chp-body,#page-market .secnav{--navgap:64px} @media(min-width:1200px){#page-market .chp-body,#page-market .secnav{--navgap:90px}} @media(min-width:1400px){#page-market .chp-body,#page-market .secnav{--navgap:120px}} @media(min-width:1800px){#page-market .chp-body,#page-market .secnav{--navgap:200px}} #page-market .chp-body{--wrap:min(820px,calc(100vw - var(--colx) - var(--gut)))} #page-market .chp-body .bn,#page-market .chp-body .ng-rules{max-width:var(--wrap)!important} #page-market .chp-body .kpis{max-width:var(--wrap)!important;margin-right:auto!important} #page-market .chp-body .chart,#page-market .chp-body .bn,#page-market .chp-body .ng-rules,#page-market .chp-body .mzn{margin-top:clamp(56px,5vw,80px)!important} /* ══ KPIs y gráficos con el lenguaje del reporte ══════════════════════ KPIs: fichas como el "stat feature" del reporte (99 % / 1 %): la primera llena en azul #2D58F5 con texto blanco, las otras en celeste #E9F9FF con texto azul; cifra 500 / -5 % y el % a la mitad, la descripción al lado y abajo. Columna de texto un poco más angosta. */ #page-market .chp-body{--wrap:min(740px,calc(100vw - var(--colx) - var(--gut)))} #page-market .chp-body .kpis{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important; gap:10px!important;margin-top:clamp(36px,3.4vw,52px)!important;margin-bottom:clamp(36px,3.4vw,52px)!important} #page-market .chp-body .kpi{display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:10px 14px; padding:clamp(40px,3.6vw,52px) 20px 20px!important;border-radius:16px;background:#E9F9FF!important;color:#2D58F5; border:0!important;max-width:none!important;min-height:0} #page-market .chp-body .kpi:first-child{background:#2D58F5!important;color:#fff} #page-market .chp-body .kpi b,#page-market .chp-body .kpi b i{color:inherit!important} #page-market .chp-body .kpi b{font-size:clamp(40px,3.6vw,52px);font-weight:500;letter-spacing:-.05em;line-height:1} #page-market .chp-body .kpi b i{font-size:.5em;letter-spacing:-.02em} #page-market .chp-body .kpi small{margin:0!important;max-width:11em!important;font-size:15px;line-height:1.25; color:inherit!important;opacity:.9} /* barras horizontales (como "What has changed most…"): pista gris muy suave con radio completo, relleno azul, etiqueta adentro y valor a la derecha en Plus Jakarta 600 */ #page-market .chp-body .bnpl-bars{gap:16px;padding-bottom:0} #page-market .chp-body .bnpl-bars .bb-axis{display:none} #page-market .chp-body .bnpl-bars .hb{grid-template-columns:minmax(0,1fr);position:relative} #page-market .chp-body .bnpl-bars .hb>div{height:30px;border-radius:999px;background:rgba(7,4,32,.04); margin-right:64px;overflow:visible} #page-market .chp-body .bnpl-bars .hb i{border-radius:999px;background:#2D58F5;min-width:30px} #page-market .chp-body .bnpl-bars .hb>span{position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:2; text-align:left;font-family:var(--rp-font);font-size:15px;font-weight:400;color:#fff;pointer-events:none;white-space:nowrap} #page-market .chp-body .bnpl-bars .hb.out>span{color:#070420;opacity:.8} #page-market .chp-body .bnpl-bars .hb b{position:absolute;right:-64px;width:56px;text-align:right;margin:0; font-family:var(--rp-alt);font-size:16px;font-weight:600;color:#070420} /* barras apiladas por categoría (Chile, Colombia): misma pista y radio */ #page-market .chp-body .hbars{gap:16px} #page-market .chp-body .hbars .hb{grid-template-columns:minmax(120px,20%) minmax(0,1fr);gap:20px} #page-market .chp-body .hbars .hb>span{font-family:var(--rp-font);font-size:15px;font-weight:400;color:#070420;opacity:.8;text-align:left} #page-market .chp-body .hbars .hb>div{height:30px;border-radius:999px;background:rgba(7,4,32,.04)} #page-market .chp-body .hbars .hb i b{font-family:var(--rp-alt);font-size:13px;font-weight:600;font-style:normal} /* columnas: radio suave arriba como las barras del reporte */ #page-market .chp-body .colchart .cc-a,#page-market .chp-body .colchart .cc-b{border-radius:10px} #page-market .chp-body .colchart .cc-a + .cc-b{border-radius:0 0 10px 10px} #page-market .chp-body .colchart .cc-a{border-radius:10px 10px 0 0} /* leyendas: cuadradito de 9px con radio 2.5px, texto 14px gris */ #page-market .chp-body .cleg li{font-family:var(--rp-font);font-size:14px;color:#6B7280} #page-market .chp-body .cleg li i{width:9px!important;height:9px!important;border-radius:2.5px;outline:0!important} /* ── separación entre secciones como en el reporte: 0.3 × section-y antes de la regla y 0.8 × section-y (0.3 de bloque + 0.5 del título) entre la regla y el título; el título un poco más separado del texto ── */ #page-market .chp-body .sect{margin-top:0!important;padding-bottom:calc(var(--sy) * .3)!important} #page-market .chp-body .sect-head{padding-top:calc(var(--sy) * .8)!important;padding-bottom:32px!important} #page-market .chp-body > .sect:first-of-type .sect-head{padding-top:calc(var(--sy) * .3)!important} #page-market .secnav{padding-top:calc(var(--sy) * .3 + 10px)!important} #page-market .chp-body .brq-band blockquote{font-family:var(--rp-alt)!important;font-size:clamp(16px,1.3vw,20px)!important;font-weight:500;line-height:1.5!important;letter-spacing:-.01em} /* ── callouts como el "split stat" del reporte, sin la gráfica: tarjeta con borde fino y radio 20px; la afirmación en Plus Jakarta azul, 600 / -4 % / interlineado 93 % ── */ #page-market .chp-body .callout{position:relative;margin-left:var(--colx)!important;margin-right:auto!important; max-width:var(--wrap)!important;margin-top:clamp(40px,4vw,56px)!important;margin-bottom:clamp(40px,4vw,56px)!important; padding:clamp(24px,2.4vw,32px) clamp(24px,2.6vw,36px)!important;border:1px solid #E9E9E9!important;border-radius:20px;background:#fff} #page-market .chp-body .callout::before{content:none!important} #page-market .chp-body .callout>.mono{display:block;margin:0 0 14px;font-family:var(--rp-alt);font-size:12px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:#9CA3AF} #page-market .chp-body .callout h4{font-family:var(--rp-alt)!important;font-size:clamp(20px,1.75vw,26px)!important; font-weight:600!important;letter-spacing:-.04em!important;line-height:.98!important;color:#2D58F5!important;max-width:24em} #page-market .chp-body .callout h4 em{font-style:normal;font-weight:600;color:inherit} #page-market .chp-body .callout .co-p{margin-top:16px;font-family:var(--rp-font);font-style:normal;font-size:16px; line-height:1.5;color:var(--rp-text);max-width:none} #page-market .chp-body .sect-head + .kpis,#page-market .chp-body .sect-head + .chart,#page-market .chp-body .sect-head + .callout,#page-market .chp-body .sect-head + .bn{margin-top:0!important} /* ── paleta única de gráficos (report_2026): primario #2D58F5, acento #5AC8FA, celeste #E9F9FF, neutro #C2C4CD, tinta #070420 ── */ #page-market .chp-body,#page-market .pov-b{--acc2:#2D58F5;--rp-primary:#2D58F5;--rp-accent:#5AC8FA; --rp-light:#E9F9FF;--rp-neutral:#C2C4CD} #page-market .chp-body .colchart .cc-a{background:var(--rp-primary)} #page-market .chp-body .colchart .cc-a b{color:var(--rp-primary)} #page-market .chp-body .colchart .cc-b{background:#DDE3F5} #page-market .chp-body .colchart .cc-b b{color:#070420} #page-market .chp-body .colchart .cc-lab{font-family:var(--rp-font);font-size:14px;color:#9CA3AF} #page-market .chp-body .bnpl-bars .hb i{background:var(--rp-primary)} #page-market .chp-body .linechart text{fill:#9CA3AF;font-family:var(--rp-font)} #page-market .chp-body .linechart line{stroke:#E9E9E9} /* ══ márgenes y columnas como report_2026 ══════════════════════════ página: 10px de marco (20px desde 768px), como .o-wrapper-xl; contenido: margen interno max(64px, 8.333vw); índice de 240px; entre índice y texto 80 / 130 / 180 / 280px (980 / 1200 / 1400 / 1800); texto de unos 700px (42em del reporte). */ :root{--frame:10px} @media(min-width:768px){:root{--frame:20px}} #page-market .chp-body,#page-market .secnav{--gut:max(64px,8.333vw);--navgap:80px} @media(min-width:1200px){#page-market .chp-body,#page-market .secnav{--navgap:130px}} @media(min-width:1400px){#page-market .chp-body,#page-market .secnav{--navgap:180px}} @media(min-width:1800px){#page-market .chp-body,#page-market .secnav{--navgap:280px}} #page-market .chp-body{--wrap:min(700px,calc(100vw - var(--colx) - var(--gut)))} /* barra superior: píldora de radio completo y del ancho de la página, como el header del sitio de dLocal */ .refnav,body.refnav-on .refnav{top:calc(var(--frame) + 10px)!important; width:calc(100vw - 2*var(--frame) - 40px)!important;max-width:none!important; border-radius:999px!important;padding:8px 14px 8px 22px!important; box-shadow:0 12px 30px -14px rgba(7,4,32,.22),0 0 0 1px rgba(7,4,32,.08)!important} #page-market .chp-body,#page-market .secnav{--gut:calc(max(64px,8.333vw) + 20px)} #page-market .chp-body .bn,#page-market .chp-body .ng-rules{margin-right:var(--gut)!important;max-width:none!important} /* columnas: la parte "resto" en el celeste del reporte, con texto tinta */ #page-market .chp-body .colchart .cc-b{background:#E9F9FF} /* tablas: la primera columna (el nombre) con más ancho */ #page-market .chp-body .bn th:first-child,#page-market .chp-body .bn td:first-child{width:24%;min-width:170px} /* lo último de cada sección no suma margen: el aire antes de la regla es siempre el mismo (0.3 × section-y), venga un texto, un gráfico o una cita */ #page-market .chp-body .sect > :last-child{margin-bottom:0!important} #page-market .chp-body .sect > .rt:last-child,#page-market .chp-body .sect > .chart:last-child{padding-bottom:0!important} #page-market .chp-body > .brq-band{margin-top:0!important;margin-bottom:calc(var(--sy) * .3)!important} /* gráficos: como la etiqueta del reporte (margin-block 2.3em 1.7em), menos aire entre el párrafo y el título azul y más entre el título y el gráfico */ #page-market .chp-body .chart,#page-market .chp-body .mzn{margin-top:clamp(40px,3.4vw,48px)!important} #page-market .chp-body .chart-h{margin:0 0 clamp(30px,2.6vw,40px)!important} #page-market .chp-body .chart-h + .colchart,#page-market .chp-body .chart-h + .ng-cols{margin-top:48px} #page-market .chp-body .colchart{margin-top:0!important;padding-top:36px!important;box-sizing:content-box} #page-market .chp-body .cleg li i{box-shadow:inset 0 0 0 1px rgba(7,4,32,.12)} .refnav,body.refnav-on .refnav{width:min(1120px,calc(100vw - 2*var(--frame) - 40px))!important} #page-market .op-r .op-deck,#page-market .op-r .lede{max-width:calc(36 * clamp(16px,1.45vw,21px))!important} /* dos bloques de texto seguidos se leen como uno: misma separación que entre párrafos (1.2em) */ #page-market .chp-body .rt + .rt{margin-top:1.2em!important;padding-top:0!important} #page-market .chp-body .rt{padding-top:0!important;padding-bottom:0!important} #page-market .chp-body .rt p{margin-bottom:0!important} /* aire antes de la regla entre secciones: igual al de la referencia (≈ la mitad del que hay entre la regla y el título) */ #page-market .chp-body .sect{padding-bottom:calc(var(--sy) * .5)!important} #page-market .chp-body > .brq-band{margin-bottom:calc(var(--sy) * .5)!important} #page-market .chp-body .bens + .rt{margin-top:32px!important} /* fuentes: siempre en mayúscula, como etiqueta */ #page-market .chp-body .chart-src,#page-market .chp-body .src-note,#page-market .chp-body p.src-note, #page-market .pov-b .chart-src,#page-market .chp-body .mzn .chart-src{font-family:var(--rp-alt)!important; font-size:11.5px!important;font-weight:600!important;font-style:normal!important;letter-spacing:.08em!important; text-transform:uppercase!important;line-height:1.5!important;color:#9CA3AF!important} /* tramo "resto" de las barras horizontales: nunca gris */ #page-market .chp-body .hbars .hb>div{background:#E9F9FF} /* cifras del hero: sin los rombos separadores */ #page-market .tk-track .tk-d{display:none!important} #page-market .tk-track .tk-i{margin-right:clamp(48px,5vw,88px)} /* bajada de un gráfico: como un párrafo (Roboto 16px gris), pegada al título azul; y la nota al pie del gráfico igual */ #page-market .chp-body .chart-note,#page-market .chp-body .chart .pov-cap{font-family:var(--rp-font)!important;font-size:16px!important; font-weight:400!important;letter-spacing:0!important;text-transform:none!important;line-height:1.6!important;color:var(--rp-text)!important} #page-market .chp-body .chart-h:has(+ .chart-note){margin-bottom:8px!important} #page-market .chp-body .chart-h + .chart-note{margin:0 0 clamp(30px,2.6vw,40px)!important} #page-market .chp-body .cleg + .chart-note{margin:18px 0 0!important} /* ── barras horizontales apiladas (Chile, Colombia) como las del reporte: leyenda arriba, una fila por categoría con la etiqueta a la izquierda, la barra sobre una pista muy suave con radio completo y el valor principal a la derecha en Plus Jakarta 600 ── */ #page-market .chp-body .chart:has(> .hbars){display:flex;flex-direction:column} #page-market .chp-body .chart:has(> .hbars) > *{order:3} #page-market .chp-body .chart:has(> .hbars) > .chart-h{order:0} #page-market .chp-body .chart:has(> .hbars) > .chart-note:first-of-type{order:1} #page-market .chp-body .chart:has(> .hbars) > .cleg{order:1;margin:0 0 36px!important} #page-market .chp-body .chart:has(> .hbars) > .hbars{order:2;margin:0!important} #page-market .chp-body .hbars{display:flex!important;flex-direction:column;gap:16px!important} #page-market .chp-body .hbars .hb{display:grid!important;grid-template-columns:minmax(140px,20%) minmax(0,1fr) 64px!important; align-items:center;gap:20px!important} #page-market .chp-body .hbars .hb>span{font-family:var(--rp-font);font-size:15px;line-height:1.1;color:#070420;opacity:.8;text-align:left} #page-market .chp-body .hbars .hb>div{display:flex;height:30px!important;border-radius:999px!important;overflow:hidden; background:rgba(7,4,32,.04)!important} #page-market .chp-body .hbars .hb i{height:100%;border-radius:0} #page-market .chp-body .hbars .hb i:first-child{border-radius:999px 0 0 999px} #page-market .chp-body .hbars .hb i b{display:none!important} #page-market .chp-body .hbars .hb-v{font-family:var(--rp-alt);font-size:16px;font-weight:600;color:#070420;text-align:right; font-variant-numeric:tabular-nums} #page-market .chp-body .hbars:hover .hb i:not(:hover){opacity:1!important} #page-market .chp-body .hbars:hover .hb:not(:hover){opacity:.45} #page-market .chp-body .hbars .hb{transition:opacity .2s} @media(max-width:640px){#page-market .chp-body .hbars .hb{grid-template-columns:1fr 52px!important} #page-market .chp-body .hbars .hb>span{grid-column:1/-1}} /* separación entre secciones simétrica: el mismo aire arriba y abajo de la regla (0.8 × section-y) */ #page-market .chp-body .sect{padding-bottom:calc(var(--sy) * .8)!important} #page-market .chp-body > .brq-band{margin-bottom:calc(var(--sy) * .8)!important} /* las citas rompen el wrapper hacia la izquierda */ #page-market .chp-body .brq-band{margin-left:calc(var(--colx) - clamp(48px,6vw,110px))!important} @media(max-width:980px){#page-market .chp-body .brq-band{margin-left:var(--gut)!important}} #page-market .chp-body .chart:has(> .hbars) > .chart-note{order:3!important;margin:24px 0 0!important} #page-market .chp-body .sect:has(> .brk:last-child){padding-bottom:0!important} #page-market .tk-track .tk-i{margin-right:clamp(28px,3vw,52px)!important} /* barra superior alineada al wrapper: arranca donde el índice y termina donde termina el contenido */ .refnav,body.refnav-on .refnav{width:calc(100vw - 2*(var(--frame) + max(64px,8.333vw) + 20px))!important;max-width:none!important} @media(max-width:980px){.refnav,body.refnav-on .refnav{width:calc(100vw - 2*var(--frame) - 40px)!important}} #page-market .tk-track .tk-i{padding:0 clamp(14px,1.4vw,24px)!important;margin-right:0!important} #page-market .chp-body .chart:has(> .hbars) > .chart-note{margin-top:40px!important}#page-market .chp-body .cleg + .chart-note{margin-top:32px!important} #page-market .chp-body .sect:has(+ .brq-band){padding-bottom:clamp(40px,3.4vw,56px)!important} /* columnas apiladas: un borde que envuelve toda la columna */ #page-market .chp-body .colchart .cc-a,#page-market .chp-body .colchart .cc-b, #page-market .chp-body .ng-cols .nc-bar{box-sizing:border-box} #page-market .chp-body .colchart .cc-a{border:2px solid #1B3AB8;border-bottom:0} #page-market .chp-body .colchart .cc-b{border:2px solid #1B3AB8;border-top:0} #page-market .chp-body .colchart .cc-a:only-of-type,#page-market .chp-body .colchart > div > .cc-b:first-child{border-top:2px solid #1B3AB8} #page-market .chp-body .ng-cols .nc-bar{border:2px solid #1B3AB8;border-radius:10px 10px 0 0;overflow:hidden} /* columnas: sin borde por columna; el borde envuelve todo el bloque del gráfico, como las tarjetas del reporte */ #page-market .chp-body .colchart .cc-a,#page-market .chp-body .colchart .cc-b, #page-market .chp-body .ng-cols .nc-bar{border:0!important} #page-market .chp-body .chart:has(.colchart),#page-market .chp-body .chart:has(.ng-cols){ border:1px solid #E9E9E9;border-radius:20px;padding:clamp(24px,2.6vw,36px)!important;box-sizing:border-box} /* todas las gráficas en tarjeta con borde */ #page-market .chp-body .chart:not(#mixChart){border:1px solid #E9E9E9;border-radius:20px; padding:clamp(24px,2.6vw,36px)!important;box-sizing:border-box} #page-market .chp-body .brq-band{margin-left:calc(var(--colx) - clamp(80px,9vw,170px))!important}@media(max-width:980px){#page-market .chp-body .brq-band{margin-left:var(--gut)!important}} #page-market .chp-body .brq-band{margin-left:calc(var(--colx) - clamp(60px,6.5vw,120px))!important;margin-right:calc(var(--gut) - clamp(40px,4vw,80px))!important}@media(max-width:980px){#page-market .chp-body .brq-band{margin-left:var(--gut)!important;margin-right:var(--gut)!important}} #page-market .chp-body .brq-band blockquote{font-size:clamp(18px,1.5vw,23px)!important} #page-market .chp-body .chart:has(> .hbars) > .cleg{order:2!important;margin:28px 0 0!important}#page-market .chp-body .chart:has(> .hbars) > .hbars{order:1!important}#page-market .chp-body .chart:has(> .hbars) > .chart-h{order:0!important} #page-market .chp-body .chart:has(> .hbars) > .cleg{margin:36px 0 0!important}#page-market .chp-body .chart:has(> .hbars) > .chart-note{margin-top:20px!important}#page-market .chp-body .chart .chart-src{padding-top:0!important;margin-top:20px!important} #page-market .chp-body .brk{margin-top:calc(var(--sy) * .5)!important}#page-market .chp-body .rt:has(+ .brk),#page-market .chp-body .chart:has(+ .brk){margin-bottom:0!important;padding-bottom:0!important} #page-market .chp-body .sect:has(+ .brk){padding-bottom:0!important} #page-market .chp-body .kpis:has(> .kpi:only-child){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}@media(max-width:640px){#page-market .chp-body .kpis:has(> .kpi:only-child){grid-template-columns:1fr!important}} #page-market .chp-body .brk{margin-top:calc(var(--sy) * .8)!important} /* KPI suelto: como el "split stat" del reporte — tarjeta con borde, cifra grande a la izquierda y la frase en Plus Jakarta azul al lado */ #page-market .chp-body .kpis:has(> .kpi:only-child){grid-template-columns:1fr!important} #page-market .chp-body .kpi:only-child{background:#fff!important;color:#2D58F5!important;border:1px solid #E9E9E9!important; border-radius:20px;padding:clamp(24px,2.6vw,36px) clamp(28px,3vw,44px)!important;flex-wrap:nowrap;align-items:center!important;gap:clamp(20px,3vw,48px)!important} #page-market .chp-body .kpi:only-child b{font-size:clamp(56px,5.2vw,80px)!important;flex:none;min-width:1.7em} #page-market .chp-body .kpi:only-child small{max-width:24em!important;font-family:var(--rp-alt)!important; font-size:clamp(20px,1.8vw,26px)!important;font-weight:600;letter-spacing:-.04em!important;line-height:.98!important;opacity:1;color:#2D58F5!important} @media(max-width:640px){#page-market .chp-body .kpi:only-child{flex-wrap:wrap}} /* ── callouts como el bloque "The survey was designed…" del reporte: fondo con el degradé azul, frase grande en blanco (Plus Jakarta, interlineado 90 %), rótulo en mayúsculas blanco ── */ #page-market .chp-body .callout{border:0!important;color:#fff; background-color:#0F47D6!important;background-image:linear-gradient(205deg,#0F47D6 25%,#6378FF)!important; padding:clamp(36px,4vw,64px) clamp(32px,4vw,64px)!important;border-radius:clamp(20px,2vw,28px)} #page-market .chp-body .callout>.mono{color:#fff!important;opacity:.9;font-size:11.5px;letter-spacing:.14em;margin-bottom:clamp(16px,1.6vw,24px)} #page-market .chp-body .callout h4{color:#fff!important;font-weight:500!important;font-size:clamp(26px,2.5vw,38px)!important; line-height:.98!important;letter-spacing:-.04em!important;max-width:17em} #page-market .chp-body .callout h4 em{color:#fff;font-weight:600} #page-market .chp-body .callout .co-p{color:rgba(255,255,255,.86)!important;margin-top:clamp(18px,1.8vw,26px)} /* ── Meeza by numbers con el lenguaje nuevo: tarjeta blanca con borde, título azul de gráfico, cifras Plus Jakarta 500 / -5 % con la unidad a la mitad, todas del mismo tamaño; la red al centro con el degradé de las citas; conectores punteados suaves ── */ #page-market .chp-body .mzn{background:#fff!important;border:1px solid #E9E9E9!important;border-radius:20px!important; padding:clamp(24px,2.6vw,36px)!important} #page-market .chp-body .mzn-h{font-family:var(--rp-alt);font-size:18px!important;font-weight:700!important;letter-spacing:0!important; line-height:1.3;color:#2D58F5!important;margin-bottom:clamp(30px,2.6vw,40px)!important} #page-market .chp-body .mzn-map{grid-template-columns:minmax(0,1fr) clamp(88px,8vw,116px) minmax(0,1fr)} #page-market .chp-body .mzn-col{gap:clamp(22px,2.4vw,36px)} #page-market .chp-body .mzn-n b{font-family:var(--rp-alt)!important;font-weight:500!important;letter-spacing:-.05em!important; font-size:clamp(44px,4vw,60px)!important;line-height:1!important;color:#2D58F5!important} #page-market .chp-body .mzn-in .mzn-n b{color:#070420!important} #page-market .chp-body .mzn-n b i{font-size:.5em;letter-spacing:-.02em;margin-left:2px} #page-market .chp-body .mzn-n small{font-family:var(--rp-font);font-size:15px!important;line-height:1.35;color:var(--rp-text)!important; margin-top:8px;max-width:16em} #page-market .chp-body .mzn-n::after{border-top:1px dashed #C9D3F6!important} #page-market .chp-body .mzn-n::before{width:6px!important;height:6px!important;margin-top:-3px!important;background:#2D58F5!important} #page-market .chp-body .mzn-hub{border-radius:999px;background-color:#0F47D6!important; background-image:linear-gradient(205deg,#0F47D6 25%,#6378FF)!important; box-shadow:0 0 0 8px rgba(45,88,245,.08),0 0 0 18px rgba(45,88,245,.04)!important} #page-market .chp-body .mzn-hub span{font-family:var(--rp-alt);font-size:clamp(15px,1.2vw,18px)!important;font-weight:600!important; letter-spacing:-.02em;color:#fff} #page-market .chp-body .mzn .chart-src{margin-top:clamp(28px,2.6vw,40px)!important} #page-market .chp-body .mzn .chart-src a{color:inherit!important;text-decoration-color:rgba(156,163,175,.6)!important} #page-market .chp-body .mzn-in .mzn-n{padding-right:clamp(64px,6.4vw,96px)!important}#page-market .chp-body .mzn-out .mzn-n{padding-left:clamp(64px,6.4vw,96px)!important} /* dos gráficos lado a lado: uno debajo del otro, a todo el ancho */ #page-market .chp-body .chart.duo{grid-template-columns:1fr!important;row-gap:clamp(40px,4vw,56px)!important} #page-market .chp-body .chart.duo .cd-i + .cd-i{padding-top:clamp(40px,4vw,56px);border-top:1px solid #E9E9E9} #page-market .chp-body .chart.duo .chart-h{font-size:18px!important} #page-market .chapnav{border-top:1px solid #E9E9E9} #page-market .chp-body .mzn-in .mzn-n b{color:#5AC8FA!important}#page-market .chp-body .mzn-in .mzn-n::before{background:#5AC8FA!important} #page-market .chp-body .callout{margin-left:calc(var(--colx) - clamp(60px,6.5vw,120px))!important;margin-right:calc(var(--gut) - clamp(40px,4vw,80px))!important;max-width:none!important}#page-market .chp-body .callout h4{max-width:20em}@media(max-width:980px){#page-market .chp-body .callout{margin-left:var(--gut)!important;margin-right:var(--gut)!important}} #page-market .chp-body .linechart text{font-size:11px}#page-market .chp-body .linechart text[font-weight]{font-size:12.5px} /* si el capítulo termina en foto, la navegación final va pegada y sin borde */ #page-market .chp-body:has(> .sect:last-of-type > .brk:last-child), #page-market .chp-body:has(> .brk:last-child){padding-bottom:0!important;margin-bottom:0!important} #page-market .chp-body:has(> .sect:last-of-type > .brk:last-child) .sect:last-of-type, #page-market .chp-body:has(> .sect:last-of-type > .brk:last-child) .brk:last-child{margin-bottom:0!important;padding-bottom:0!important} #page-market .chp-body:has(> .sect:last-of-type > .brk:last-child) ~ .chapnav, #page-market .chp-body:has(> .brk:last-child) ~ .chapnav{border-top:0;margin-top:0!important} #page-market .chp-body .nc-lab,#page-market .chp-body .ng-cols>.pre .nc-lab,#page-market .chp-body .cc-lab{font-family:var(--rp-font)!important;font-size:14px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;color:#9CA3AF!important} /* ── apariciones (ver 10-reveal.js): como report_2026 ── */ #page-market .rv2{transition:opacity 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s), filter 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s)!important} #page-market .rv2:not(.on){opacity:0!important;transform:translateY(80px) scale(.94)!important;filter:blur(5px)!important} #page-market .rv2.on{opacity:1!important;transform:none!important;filter:none!important} @media(prefers-reduced-motion:reduce){#page-market .rv2:not(.on){opacity:1!important;transform:none!important;filter:none!important}} /* índice lateral idéntico en todas las páginas (en BNPL vive dentro del cuerpo) */ #page-market .secnav a,#page-market .chp-body .secnav a{color:#D8D8D8!important} #page-market .secnav a.on,#page-market .chp-body .secnav a.on{color:#1043FA!important} #page-market .secnav a.on s,#page-market .chp-body .secnav a.on s{background:#1043FA!important} @media(hover:hover){#page-market .secnav a:hover,#page-market .chp-body .secnav a:hover{color:#1043FA!important}} #page-market .chp-body>.secnav{margin-top:0!important} #page-market .chp-body > .sect:first-of-type .sect-head{padding-top:calc(var(--sy) * .8)!important}#page-market .secnav{padding-top:calc(var(--sy) * .8 + 10px)!important} /* BNPL por mercado: mismo formato que las demás barras horizontales — país a la izquierda, barra sobre pista suave, valor a la derecha */ #page-market .chp-body .bnpl-bars{display:flex!important;flex-direction:column;gap:16px!important} #page-market .chp-body .bnpl-bars .hb{display:grid!important;grid-template-columns:minmax(140px,20%) minmax(0,1fr) 64px!important; align-items:center;gap:20px!important;position:static} #page-market .chp-body .bnpl-bars .hb>span{position:static!important;transform:none!important;color:#070420!important;opacity:.8; font-family:var(--rp-font);font-size:15px;white-space:normal} #page-market .chp-body .bnpl-bars .hb>div{display:contents!important} #page-market .chp-body .bnpl-bars .hb i{display:block;height:30px;width:auto!important;border-radius:999px;min-width:0; background:linear-gradient(90deg,var(--bar,#2D58F5) 0 var(--w),rgba(7,4,32,.04) var(--w) 100%)!important} #page-market .chp-body .bnpl-bars .hb b{position:static!important;width:auto;text-align:right;margin:0!important; font-family:var(--rp-alt);font-size:16px;font-weight:600;color:#070420} /* BNPL · ventajas: como las tablas de los países — tarjeta con borde fino y radio 20px, filas separadas por una regla gris, nombre en negrita 16px a la izquierda y descripción Roboto a la derecha */ #page-market .chp-body .bens{margin:clamp(40px,3.4vw,48px) var(--gut) clamp(40px,3.4vw,48px) var(--colx)!important;max-width:none!important; padding:6px 24px!important;border:1px solid #E9E9E9!important;border-radius:20px;background:#fff;list-style:none} #page-market .chp-body .bens li{display:grid!important;grid-template-columns:minmax(170px,30%) minmax(0,1fr)!important;gap:0 24px!important; padding:18px 0!important;border:0!important;border-bottom:1px solid #E9E9E9!important;align-items:start} #page-market .chp-body .bens li:last-child{border-bottom:0!important} #page-market .chp-body .bens li em{display:none!important} #page-market .chp-body .bens li h3{margin:0!important;font-family:var(--rp-font)!important;font-size:16px!important;font-weight:700!important; line-height:1.45!important;letter-spacing:0!important;color:#0A0A16!important;opacity:.9} #page-market .chp-body .bens li p{margin:0!important;font-family:var(--rp-font)!important;font-size:16px!important;line-height:1.45!important;color:#0A0A16!important} #page-market .chp-body .bens li p b{font-weight:400;color:inherit} @media(max-width:640px){#page-market .chp-body .bens li{grid-template-columns:1fr!important;gap:6px!important}} #page-market .chp-body .bens li p b{font-family:inherit!important;letter-spacing:0!important} /* aparición de las fotos de corte (10-reveal.js): sólo un fundido */ #page-market .brk.rvi{transition:opacity 1.2s cubic-bezier(.16,1,.3,1)} #page-market .brk.rvi:not(.on){opacity:0} #page-market .brk.rvi.on{opacity:1} /* el hero recorta todo con sus esquinas (el desenfoque del hero de BNPL se escapaba por la esquina inferior) */ #page-market .hero-shell{clip-path:inset(0 round clamp(18px,1.8vw,28px))} /* primera sección: el título un poco más arriba */ #page-market .chp-body > .sect:first-of-type .sect-head{padding-top:calc(var(--sy) * .55)!important} #page-market .secnav{padding-top:calc(var(--sy) * .55 + 10px)!important} #page-market .hv-photo .hv-blur{border-radius:inherit;clip-path:inset(0 round clamp(18px,1.8vw,28px))} #page-market .hero-shell{isolation:isolate;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black)} /* etiqueta "Success case" sobre el título (secciones con un caso real) */ #page-market .chp-body .case-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 14px 7px 12px;border-radius:999px; background:#E9F9FF;color:#2D58F5;font-family:var(--rp-alt);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1} #page-market .chp-body .case-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#2D58F5} #page-market .chp-body .sect-head:has(.case-tag){display:flex;flex-direction:column;align-items:flex-start} /* footer con el pattern de cuadraditos del overview */ footer.pg-foot{background-color:#2143E9!important; background-image:url("../../img/textures/texture-tiles-a.svg"), radial-gradient(45% 62% at 78% 78%,#4C6FF3 0%,#4869F2 18%,#4163F1 40%,#3A5AF0 62%,#3556F0 71%,#2B4BEC 86%,#2143E9 100%)!important; background-size:352px 352px,auto!important} /* navegación prev/next: misma flecha (SVG) en los dos lados para que los rótulos queden a la misma altura */ #page-market .cn-dir{height:16px;line-height:16px;align-items:center} #page-market .cn-dir i{display:block;flex:none;width:16px;height:16px;font-size:0!important;line-height:0;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3m4.5-4.5L3 8l4.5 4.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3m4.5-4.5L3 8l4.5 4.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} #page-market .cn-next .cn-dir i{transform:scaleX(-1)} #page-market .cn-dir{display:flex!important;margin:0} /* chapnav centrada entre la foto/contenido y el footer: mismo aire arriba y abajo */ #page-market .chapnav{padding-bottom:0!important} #page-market .chapnav .cn-card{padding-top:clamp(56px,5vw,80px)!important;padding-bottom:clamp(56px,5vw,80px)!important} /* ══ MOBILE / TABLET (≤980px) · reset de columnas ══════════════════ las variables de escritorio se redefinieron más arriba sin media query; acá se vuelve a una sola columna con 20px de margen */ @media(max-width:980px){ #page-market .chp-body,#page-market .secnav{--gut:20px!important;--navw:0px!important;--navgap:0px!important;--colx:20px!important;--wrap:calc(100vw - 2*var(--frame,0px) - 40px)!important} #page-market .chp-body .sect-head{padding-left:20px!important;padding-right:20px!important} #page-market .chp-body .rt,#page-market .chp-body .kpis,#page-market .chp-body .chart,#page-market .chp-body .callout, #page-market .chp-body .brq-band,#page-market .chp-body .bn,#page-market .chp-body .ng-rules,#page-market .chp-body .bens, #page-market .chp-body .tbl,#page-market .chp-body table,#page-market .chp-body .src-note,#page-market .chp-body .mzn, #page-market .chp-body .sub-h,#page-market .chp-body .duo,#page-market .chp-body .sect > *:not(.sect-head):not(.brk){ margin-left:20px!important;margin-right:20px!important;max-width:none!important;width:auto!important} #page-market .chp-body h2.h2,#page-market .chp-body .rt h3{max-width:none!important} #page-market .chp-body .kpis{grid-template-columns:1fr!important} #page-market .chp-body .chart{padding:20px 16px!important;overflow-x:auto} #page-market .chp-body table{display:block;overflow-x:auto} #page-market .chapnav{padding:0!important} #page-market .chapnav .cn-pair{grid-template-columns:1fr!important} #page-market .chapnav .cn-card{padding:40px 20px!important;border-left:0!important} #page-market .chapnav .cn-next{border-top:1px solid #E9E9E9} } @media(max-width:980px){ #page-market .chp-body .brq-band{grid-template-columns:minmax(0,1fr)!important;padding:32px 24px!important} #page-market .chp-body .brq-band .brq-in{grid-column:1/-1!important;max-width:none!important} #page-market .chp-body .brq-band blockquote{font-size:18px!important} } @media(max-width:640px){ /* tablas como fichas: una fila = una tarjeta, cada dato con su columna arriba */ #page-market .chp-body .bn{padding:0!important;border:0!important;background:none!important} #page-market .chp-body .bn table{display:block!important;overflow:visible!important;border:0!important} #page-market .chp-body .bn thead{display:none!important} #page-market .chp-body .bn tbody{display:flex!important;flex-direction:column;gap:12px} #page-market .chp-body .bn tr{display:block!important;padding:18px 20px!important;border:1px solid #E9E9E9!important;border-radius:16px!important;background:#fff} #page-market .chp-body .bn td{display:block!important;width:auto!important;min-width:0!important;padding:0!important;border:0!important} #page-market .chp-body .bn td + td{margin-top:12px} #page-market .chp-body .bn td:first-child{font-family:var(--rp-alt,'Plus Jakarta Sans dLocal');font-weight:600;font-size:17px;color:#070420} #page-market .chp-body .bn td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:4px; font:600 10.5px/1.2 'Plus Jakarta Sans dLocal','Plus Jakarta Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9CA3AF} /* BNPL beneficios: título arriba, texto abajo */ #page-market .chp-body .bens li{display:block!important} #page-market .chp-body .bens li h3{margin-bottom:6px!important;max-width:none!important} } /* mobile: separaciones entre secciones más cortas */ @media(max-width:980px){#page-market .chp-body,#page-market .secnav,#page-market{--sy:64px!important}} @media(max-width:640px){#page-market .chp-body,#page-market .secnav,#page-market{--sy:52px!important}} @media(max-width:980px){ #page-market .chapnav .cn-next{text-align:right!important;align-items:flex-end!important} #page-market .chapnav .cn-next .cn-dir{flex-direction:row-reverse!important;justify-content:flex-start!important} #page-market .chapnav .cn-next b,#page-market .chapnav .cn-next p{margin-left:auto!important;text-align:right!important} } /* mobile: barras horizontales con nombre y valor arriba, barra a todo el ancho debajo */ @media(max-width:640px){ #page-market .chp-body .bnpl-bars{gap:18px!important} #page-market .chp-body .bnpl-bars .hb{display:block!important;position:relative;padding-top:26px} #page-market .chp-body .bnpl-bars .hb>span{position:absolute!important;left:0!important;top:0!important;transform:none!important;color:#070420!important;opacity:.8;font-size:15px!important} #page-market .chp-body .bnpl-bars .hb>div{position:static!important;width:100%!important;height:14px!important;margin:0!important} #page-market .chp-body .bnpl-bars .hb i{min-width:14px!important} #page-market .chp-body .bnpl-bars .hb b{position:absolute!important;right:0!important;top:0!important;width:auto!important;font-size:15px!important;line-height:20px} #page-market .chp-body .hbars .hb{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"lab val" "bar bar";row-gap:8px!important} #page-market .chp-body .hbars .hb>span{grid-area:lab} #page-market .chp-body .hbars .hb>div{grid-area:bar;width:100%!important;height:14px!important} #page-market .chp-body .hbars .hb>.hb-v{grid-area:val} } /* mobile: gráficos de línea legibles (el SVG se escala ~0.4, compensamos tamaños) */ @media(max-width:640px){ #page-market .chp-body .linechart svg{overflow:visible} #page-market .chp-body .linechart svg polyline,#page-market .chp-body .linechart svg path{stroke-width:5px!important} #page-market .chp-body .chart{padding:20px 14px!important} } @media(max-width:640px){ #page-market .chp-body .linechart{margin:0 -6px} #page-market .chp-body .chart:has(.linechart){padding:20px 10px!important} } @media(max-width:640px){ #page-market .chp-body .linechart{overflow:visible!important} #page-market .chp-body .linechart svg{width:88%!important;display:block} } @media(max-width:640px){ #page-market .chp-body .linechart svg{width:86%!important} #page-market .chp-body .linechart svg polyline,#page-market .chp-body .linechart svg path{stroke-width:7px!important} } @media(max-width:640px){ #page-market .chp-body .linechart svg polyline,#page-market .chp-body .linechart svg path{stroke-width:2.5px!important} } /* mobile: Meeza en una columna (hub arriba, cifras 2×2 debajo, sin conectores) */ @media(max-width:640px){ #page-market .chp-body .mzn-map{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-areas:"hub hub" "in out";gap:20px 16px!important} #page-market .chp-body .mzn-hub{grid-area:hub;justify-self:start;width:auto!important;height:auto!important;padding:10px 20px!important;margin:0 0 4px!important} #page-market .chp-body .mzn-in{grid-area:in}#page-market .chp-body .mzn-out{grid-area:out} #page-market .chp-body .mzn-col{display:flex!important;flex-direction:column;gap:20px!important} #page-market .chp-body .mzn-n{padding:0!important;align-items:flex-start!important;text-align:left!important} #page-market .chp-body .mzn-n::before,#page-market .chp-body .mzn-n::after{display:none!important} #page-market .chp-body .mzn-n b{font-size:40px!important} #page-market .chp-body .mzn-n small{font-size:14px!important} } @media(max-width:640px){#page-market .chp-body .linechart svg{width:100%!important}#page-market .chp-body .linechart{margin:0!important}} /* mobile: las gráficas aprovechan todo el ancho posible */ @media(max-width:640px){ #page-market .chp-body .sect .chart,#page-market .chp-body .chart,#page-market .chp-body .chart.mzn,#page-market .chp-body .chart.duo{ margin-left:12px!important;margin-right:12px!important;padding:20px 14px!important} #page-market .chp-body .chart .chart-h{font-size:17px!important} } /* mobile: Meeza como el desktop pero vertical — entradas arriba, hub al medio, salidas abajo */ @media(max-width:640px){ #page-market .chp-body .mzn-map{grid-template-columns:1fr!important;grid-template-areas:"in" "hub" "out"!important;gap:0!important;position:relative} #page-market .chp-body .mzn-col{display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:none!important;gap:12px!important} #page-market .chp-body .mzn-n{align-items:center!important;text-align:center!important;padding:16px 8px!important;border-radius:16px;position:relative} #page-market .chp-body .mzn-in .mzn-n{background:#F2FBFF} #page-market .chp-body .mzn-out .mzn-n{background:#F3F6FF} #page-market .chp-body .mzn-n b{font-size:38px!important;line-height:1} #page-market .chp-body .mzn-n small{font-size:13.5px!important;margin-top:6px} /* conectores verticales punteados hacia el hub */ #page-market .chp-body .mzn-n::before{display:none!important} #page-market .chp-body .mzn-n::after{display:block!important;content:"";position:absolute;left:50%;width:0!important;height:22px;border-top:0!important;border-left:1.5px dashed #9DB3F7!important;transform:translateX(-50%)} #page-market .chp-body .mzn-in .mzn-n::after{top:100%;bottom:auto;right:auto} #page-market .chp-body .mzn-out .mzn-n::after{bottom:100%;top:auto;right:auto} #page-market .chp-body .mzn-hub{grid-area:hub;justify-self:center!important;margin:22px 0!important;padding:12px 28px!important;box-shadow:0 0 0 8px rgba(45,88,245,.08),0 0 0 16px rgba(45,88,245,.04)!important} } @media(max-width:640px){ #page-market .chp-body .mzn-map .mzn-in .mzn-n,#page-market .chp-body .mzn-map .mzn-out .mzn-n{padding:18px 10px!important;justify-content:flex-start!important;align-items:center!important;text-align:center!important} #page-market .chp-body .mzn-map .mzn-n small{max-width:none!important;width:100%} } /* mobile: Meeza sólo con las 4 cifras (sin hub ni conectores) */ @media(max-width:640px){ #page-market .chp-body .mzn-hub{display:none!important} #page-market .chp-body .mzn-n::after,#page-market .chp-body .mzn-n::before{display:none!important} #page-market .chp-body .mzn-map{gap:12px!important} } @media(max-width:640px){#page-market .chp-body .mzn-map{grid-template-areas:"in" "out"!important}} /* enlaces a lo que todavía no existe: se ven, pero no llevan a ningún lado */ .side .side-row.soon{opacity:.38;cursor:default;pointer-events:none} .side .side-ref{margin-top:28px} .side .side-ref + .side-ref{margin-top:0;padding-top:0;border-top:0} .side .side-ref>.side-row{grid-template-columns:minmax(0,1fr);padding-left:0} .side .side-ref>.side-row:hover{padding-left:6px} .side .side-row[data-href]{cursor:pointer} .pg-foot-chapters a.soon{opacity:.45;cursor:default} #page-market .cn-card.soon{cursor:default;pointer-events:none} #page-market .cn-card.soon b{opacity:.45} #page-market .hero-crumb a.soon,#page-market .hero-crumb a.cur:not([href]){cursor:default} /* referencias al pie del índice: chicas y en línea */ .side .side-refs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:26px} .side .side-refs a,.side .side-refs span{font:600 12px var(--sans);letter-spacing:.02em;color:rgba(10,18,64,.38);text-decoration:none;transition:color .2s} .side .side-refs a:hover{color:#1043FA} .side .side-refs span{color:#1043FA} /* aviso de copyright: abajo de todo en el pie, muy chico */ footer.pg-foot{flex-wrap:wrap} .pg-foot-legal{flex:0 0 100%;margin:clamp(8px,1vw,14px) 0 0;padding-top:clamp(18px,2vw,26px);border-top:1px solid rgba(255,255,255,.16); font:400 12px/1.6 var(--sans);letter-spacing:.01em;color:rgba(255,255,255,.6);text-align:left} .pg-foot-legal strong{font-weight:700;color:rgba(255,255,255,.75)} /* la miga del hero queda por encima del título grande (que la tapaba y no dejaba clickear) */ #page-market .hero-crumb{position:relative;z-index:5} /* ── pestaña de dLocal pegada al borde derecho + The Local Code en la barra ── */ .dl-tag{position:fixed;right:0;top:auto;bottom:clamp(40px,7vh,90px);z-index:185;display:grid;place-items:center; width:50px;height:150px;transform:none; background:#2143E9;color:#fff;border-radius:14px 0 0 14px;text-decoration:none; box-shadow:0 12px 30px -12px rgba(33,67,233,.6);transition:width .25s cubic-bezier(.22,1,.36,1),background .25s} .dl-tag .dl-mark{position:absolute;left:50%;top:50%;display:block;width:100px;height:auto;fill:#fff;transform:translate(-50%,-50%) rotate(-90deg)} .dl-tag:hover{width:58px;background:#1A36D6} @media(max-width:820px){.dl-tag{display:none}} @media(min-width:821px){ .refnav.lc-lead,body.refnav-on .refnav.lc-lead{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)!important} } .refnav.lc-lead .ref-lead .ref-lc{display:flex;margin:0;padding:0;border:0} .refnav.lc-lead .ref-lead .ref-lc::after{display:none} /* el menú de contenidos abre desde la izquierda (junto a la hamburguesa) */ .side{left:var(--frame);right:auto;transform:translateX(calc(-100% - var(--frame)));box-shadow:30px 0 80px rgba(8,16,64,.3)} .side.on{transform:none} /* hamburguesa del hero, a la izquierda del logo */ #page-market .nav-logo .nav-burger{display:grid;place-items:center;flex:0 0 auto;width:clamp(42px,3.4vw,50px);height:clamp(42px,3.4vw,50px); margin-right:clamp(6px,.8vw,12px);border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.08); color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,color .25s,border-color .25s} #page-market .nav-logo .nav-burger:hover{background:#fff;color:#2143E9;border-color:#fff} #page-market .nav-logo .nav-burger i{display:grid;gap:4px;font-style:normal;font-size:0} #page-market .nav-logo .nav-burger i::before,#page-market .nav-logo .nav-burger i::after,#page-market .nav-logo .nav-burger i s{ content:"";display:block;width:17px;height:1.6px;border-radius:2px;background:currentColor} body.side-open #page-market .nav-logo .nav-burger{opacity:0;pointer-events:none} body.side-open .nav-logo .nav-burger{opacity:0;pointer-events:none} /* ══ barra flotante: vidrio oscuro con blur (ref. moderna) ══ */ .refnav,body.refnav-on .refnav{ background:rgba(16,20,46,.52)!important;color:#fff!important; -webkit-backdrop-filter:blur(22px) saturate(1.5)!important;backdrop-filter:blur(22px) saturate(1.5)!important; border:1px solid rgba(255,255,255,.16)!important;border-radius:22px!important;padding:8px 8px 8px 10px!important; box-shadow:0 18px 50px -18px rgba(6,10,40,.55),inset 0 1px 0 rgba(255,255,255,.08)!important} .refnav .ref-lead::after{background:rgba(255,255,255,.18)!important} .refnav .ref-burger{color:#fff!important} .refnav .ref-burger:hover{background:rgba(255,255,255,.1)!important} .refnav .ref-lc .lc-ink{fill:#fff!important} .refnav .ref-lc .lc-alt{fill:#ADE2FF!important} .refnav .ref-path span{color:rgba(255,255,255,.6)!important} .refnav .ref-path em{color:rgba(255,255,255,.3)!important} .refnav .ref-path b{color:#fff!important} .refnav .ref-jump{color:#fff!important;border-radius:15px!important;transition:background .25s,color .25s} .refnav .ref-jump small{color:rgba(255,255,255,.55)!important} .refnav .ref-jump strong{color:#fff!important} .refnav .ref-jump i{border:1px solid rgba(255,255,255,.28)!important;color:#fff!important;background:transparent!important} .refnav .ref-jump.prev:hover{background:rgba(255,255,255,.1)!important} /* "siguiente" como el CTA de la referencia: pastilla blanca */ .refnav .ref-jump.next{background:#fff!important;color:#0A1240!important;padding:7px 8px 7px 18px!important} .refnav .ref-jump.next small{color:rgba(10,18,64,.5)!important} .refnav .ref-jump.next strong{color:#0A1240!important} .refnav .ref-jump.next i{background:#2143E9!important;border-color:#2143E9!important;color:#fff!important} .refnav .ref-jump.next:hover{background:#EEF2FF!important} .refnav .ref-jump[disabled]{background:transparent!important} .refnav .ref-jump.next{justify-self:end;width:auto!important} .refnav,body.refnav-on .refnav{background:linear-gradient(100deg,rgba(14,18,44,.74),rgba(26,32,72,.62))!important} /* ══ barra flotante: vidrio CLARO con blur (reemplaza la versión oscura) ══ */ .refnav,body.refnav-on .refnav{ background:rgba(255,255,255,.64)!important;color:#0A1240!important; border:1px solid rgba(255,255,255,.85)!important; -webkit-backdrop-filter:blur(24px) saturate(1.6)!important;backdrop-filter:blur(24px) saturate(1.6)!important; box-shadow:0 16px 44px -20px rgba(10,18,64,.35),0 0 0 1px rgba(10,18,64,.06)!important} .refnav .ref-lead::after{background:rgba(10,18,64,.12)!important} .refnav .ref-burger{color:#0A1240!important} .refnav .ref-burger:hover{background:rgba(10,18,64,.06)!important} .refnav .ref-lc .lc-ink{fill:#0A1240!important} .refnav .ref-lc .lc-alt{fill:#1043FA!important} .refnav .ref-path span{color:rgba(10,18,64,.55)!important} .refnav .ref-path em{color:rgba(10,18,64,.25)!important} .refnav .ref-path b{color:#0A1240!important} .refnav .ref-jump{color:#0A1240!important} .refnav .ref-jump small{color:rgba(10,18,64,.45)!important} .refnav .ref-jump strong{color:#0A1240!important} .refnav .ref-jump i{border:1px solid rgba(10,18,64,.16)!important;color:#0A1240!important;background:rgba(255,255,255,.6)!important} .refnav .ref-jump.prev:hover{background:rgba(10,18,64,.05)!important} .refnav .ref-jump.next{background:#2143E9!important;color:#fff!important} .refnav .ref-jump.next small{color:rgba(255,255,255,.7)!important} .refnav .ref-jump.next strong{color:#fff!important} .refnav .ref-jump.next i{background:#fff!important;border-color:#fff!important;color:#2143E9!important} .refnav .ref-jump.next:hover{background:#1A36D6!important} /* hamburguesa del hero: sin aro, sólo el ícono */ #page-market .nav-logo .nav-burger{width:auto!important;height:auto!important;padding:8px 6px!important;border:0!important;border-radius:0!important; background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;margin-right:clamp(14px,1.6vw,24px)!important} #page-market .nav-logo .nav-burger i{gap:5px!important} #page-market .nav-logo .nav-burger i::before,#page-market .nav-logo .nav-burger i::after,#page-market .nav-logo .nav-burger i s{width:22px!important;height:2px!important} #page-market .nav-logo .nav-burger:hover{background:none!important;color:#ADE2FF!important} /* "siguiente" sin destacar: igual que "anterior" */ .refnav .ref-jump.next{background:transparent!important;color:#0A1240!important;padding:7px 10px!important} .refnav .ref-jump.next small{color:rgba(10,18,64,.45)!important} .refnav .ref-jump.next strong{color:#0A1240!important} .refnav .ref-jump.next i{background:rgba(255,255,255,.6)!important;border:1px solid rgba(10,18,64,.16)!important;color:#0A1240!important} .refnav .ref-jump.next:hover{background:rgba(10,18,64,.05)!important} /* barra flotante: sin borde y con una sombra apenas perceptible */ .refnav,body.refnav-on .refnav{border:0!important;box-shadow:0 6px 24px -10px rgba(10,18,64,.16)!important;background:rgba(255,255,255,.72)!important} /* menú: las ramas largas (África, 6 países) no se cortan */ .side-sub.open{max-height:2400px!important} /* Glossary y Data & Sources como ítems del menú */ .side li:has(> .side-extra):first-of-type{} /* logo del hero: el hover es sólo opacidad, sin cambiar colores */ #page-market .nav-lc .lc-mark{transition:opacity .25s var(--ease)} #page-market .nav-lc:hover .lc-alt{fill:#ADE2FF!important} #page-market .nav-lc:hover .lc-ink{fill:#fff!important} #page-market .nav-lc:hover .lc-mark{opacity:.68} /* menú sin numeración */ .side .side-row em{display:none!important} .side .side-row,.side .side-sub li>.side-row{grid-template-columns:minmax(0,1fr) 24px!important} .side .side-sub li>.side-row{padding-left:18px} .side .side-sub .side-sub li>.side-row{padding-left:36px} /* la última fila de un submenú abierto mantiene su línea para separar del capítulo siguiente */ .side .side-sub li:last-child>.side-row{border-bottom:1px solid rgba(10,18,64,.1)!important} .side .side-list>li:last-child>.side-row{border-bottom:0!important} /* navegación de capítulos al pie: títulos más chicos */ #page-market .chapnav .cn-card b{font-size:clamp(30px,3.1vw,48px)!important;line-height:1.02!important;letter-spacing:-.04em!important} /* pie: esquinas superiores redondeadas, igual que abajo */ #page-market .pg-foot,.pg-foot{border-radius:clamp(18px,1.9vw,28px)!important;overflow:hidden} /* ítem activo del menú: sin barrita, sólo texto en azul */ .side .side-row.cur::before{display:none!important} .side .side-row.cur b,.side .side-sub .side-row.cur b{color:#2143E9!important} /* breadcrumb de la barra: tramos clickeables */ .refnav .ref-path a{font:500 13px var(--sans);letter-spacing:-.01em;color:rgba(10,18,64,.55);text-decoration:none;white-space:nowrap;transition:color .2s} .refnav .ref-path a:hover{color:#2143E9} .refnav nav.ref-path{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0} /* gráficos de línea: etiquetas de valores más chicas */ #page-market .chp-body .linechart text{font-size:13px!important} #page-market .chp-body .linechart text[font-weight]{font-size:15px!important} /* menú lateral pegado al borde izquierdo, a toda la altura, con el logo arriba */ .side{left:0!important;top:0!important;bottom:0!important;border-radius:0 clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px) 0!important;transform:translateX(-100%)} .side.on{transform:none!important} .side .side-h{justify-content:space-between!important} .side .side-lc{display:flex;align-items:center;text-decoration:none} .side .side-lc .lc-mark{display:block;height:40px;width:auto} .side .side-lc .lc-ink{fill:#0A1240!important} .side .side-lc .lc-alt{fill:#1043FA!important} .side .side-lc:hover .lc-mark{opacity:.7} .side .side-lc img{display:block;height:clamp(78px,6.4vw,96px);width:auto} .side .side-h{align-items:flex-start!important} .side .side-lc{margin-left:14px} /* barra flotante: sombra en capas, más nítida y moderna */ .refnav,body.refnav-on .refnav{box-shadow:0 1px 1px rgba(10,18,64,.04),0 2px 4px rgba(10,18,64,.04),0 12px 24px -6px rgba(10,18,64,.10),0 28px 48px -16px rgba(10,18,64,.12)!important} /* anterior / siguiente: flecha simple, sin círculo */ .refnav .ref-jump i,.refnav .ref-jump.next i{border:0!important;background:none!important;width:auto!important;height:auto!important;font-size:18px!important;color:#0A1240!important;transition:transform .25s cubic-bezier(.22,1,.36,1)} .refnav .ref-jump.prev:hover i{transform:translateX(-3px)} .refnav .ref-jump.next:hover i{transform:translateX(3px)} .refnav .ref-jump:hover{background:transparent!important} /* menú lateral: los ítems aparecen escalonados al abrir */ @media(prefers-reduced-motion:no-preference){ .side .side-lc,.side .side-list>li{opacity:0;transform:translateX(-14px);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)} .side.on .side-lc,.side.on .side-list>li{opacity:1;transform:none} .side.on .side-lc{transition-delay:.12s} .side.on .side-list>li:nth-child(1){transition-delay:0.20s} .side.on .side-list>li:nth-child(2){transition-delay:0.24s} .side.on .side-list>li:nth-child(3){transition-delay:0.28s} .side.on .side-list>li:nth-child(4){transition-delay:0.32s} .side.on .side-list>li:nth-child(5){transition-delay:0.36s} .side.on .side-list>li:nth-child(6){transition-delay:0.40s} .side.on .side-list>li:nth-child(7){transition-delay:0.44s} .side.on .side-list>li:nth-child(8){transition-delay:0.48s} .side.on .side-list>li:nth-child(9){transition-delay:0.52s} .side.on .side-list>li:nth-child(10){transition-delay:0.56s} .side.on .side-list>li:nth-child(11){transition-delay:0.60s} .side.on .side-list>li:nth-child(12){transition-delay:0.64s} } .refnav,body.refnav-on .refnav{box-shadow:0 1px 1px rgba(10,18,64,.025),0 2px 4px rgba(10,18,64,.025),0 10px 20px -8px rgba(10,18,64,.06),0 24px 40px -18px rgba(10,18,64,.07)!important} .refnav,body.refnav-on .refnav{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} .refnav,body.refnav-on .refnav{box-shadow:none!important} .refblur{height:calc(var(--frame) + 140px)!important} /* anterior / siguiente: hover sin fondo, sólo se mueve la flecha */ .refnav .ref-jump.prev:hover,.refnav .ref-jump.next:hover,body.refnav-on .refnav .ref-jump:hover{background:transparent!important;box-shadow:none!important} /* botón Contents del hero: colores del sitio y hover suave */ #page-market .nav-r button{color:#0A1240!important;background:#fff!important;transition:color .35s ease,background .35s ease,transform .35s cubic-bezier(.22,1,.36,1)!important} #page-market .nav-r button:hover{background:#EEF2FF!important;color:#2143E9!important;transform:translateY(-1px)} @media(min-width:981px){.refnav,body.refnav-on .refnav{width:min(1040px,calc(100vw - 2*var(--frame) - 80px))!important}} .refnav,body.refnav-on .refnav{box-shadow:0 1px 2px rgba(10,18,64,.04),0 6px 18px -8px rgba(10,18,64,.08)!important} @media(min-width:981px){.refnav,body.refnav-on .refnav{width:min(1140px,calc(100vw - 2*var(--frame) - 60px))!important}} /* mobile: sólo ícono de menú a la izquierda, sin botón Contents */ #page-market .nav-logo .nav-mburger{display:none} @media(max-width:820px){ #page-market .nav-r{display:none!important} #page-market .nav-logo .nav-mburger{display:grid;place-items:center;width:40px;height:40px;margin:0 10px 0 -8px;padding:0;border:0;background:none;color:#fff;cursor:pointer;flex:none} #page-market .nav-logo .nav-mburger i{display:grid;gap:5px;font-size:0} #page-market .nav-logo .nav-mburger i::before,#page-market .nav-logo .nav-mburger i::after,#page-market .nav-logo .nav-mburger i s{content:"";display:block;width:22px;height:2px;border-radius:2px;background:currentColor} } /* mobile, barra fija: sin fondo, logo grande con "by dLocal", sin capítulo activo */ .refnav .ref-lcm{display:none} @media(max-width:820px){ .refnav,body.refnav-on .refnav{background:transparent!important;box-shadow:none!important} .refnav .ref-path,.refnav .ref-lead .ref-lc,.refnav>.ref-lc{display:none!important} .refnav .ref-lead::after{display:none!important} .refnav .ref-lcm{display:flex;align-items:center;margin-left:4px} .refnav .ref-lcm img{display:block;height:58px;width:auto} .refblur{height:calc(var(--frame) + 120px)!important} } @media(max-width:820px){ .refblur{left:0!important;right:0!important;height:calc(var(--frame) + 112px)!important; background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 55%,rgba(255,255,255,0) 100%)!important; -webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important; -webkit-mask-image:none!important;mask-image:none!important} .refnav .ref-lcm img{height:50px} } /* mobile, barra fija = mismo look que el hero: franja oscura con blur, hamburguesa y logo blancos */ @media(max-width:820px){ .refblur{background:linear-gradient(180deg,rgba(14,20,56,.92) 0%,rgba(14,20,56,.82) 62%,rgba(14,20,56,0) 100%)!important; -webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important} .refnav .ref-burger{color:#fff!important} .refnav .ref-lcm{display:flex!important;flex-direction:row!important;align-items:center;gap:12px;margin-left:6px;background:none!important;padding:0!important} .refnav .ref-lcm .nav-lc .lc-mark{height:44px;width:auto;display:block} .refnav .ref-lcm .nav-lc .lc-ink{fill:#fff!important} .refnav .ref-lcm .nav-lc .lc-alt{fill:#ADE2FF!important} .refnav .ref-lcm>span{display:inline-flex;align-items:center;gap:8px;font-size:0;color:rgba(255,255,255,.6)} .refnav .ref-lcm>span::before{content:"BY";font:700 9px var(--sans);letter-spacing:.2em} .refnav .ref-lcm>span img{height:17px;width:auto;display:block} } /* mobile, barra fija: sólo blur (sin color), hamburguesa y logo en la misma posición y tamaño que en el hero */ @media(max-width:820px){ .refblur{background:none!important;-webkit-backdrop-filter:blur(18px) saturate(1.3)!important;backdrop-filter:blur(18px) saturate(1.3)!important; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)!important} .refnav,body.refnav-on .refnav{left:0!important;right:0!important;width:auto!important;transform:none!important;top:31px!important;height:40px!important;min-height:0!important;padding:0 0 0 23px!important;border-radius:0!important} .refnav .ref-lead{gap:21px!important;padding:0!important;margin:0!important} .refnav .ref-burger{width:40px!important;height:40px!important;border-radius:0!important} .refnav .ref-burger i{gap:5px!important} .refnav .ref-burger i::before,.refnav .ref-burger i::after,.refnav .ref-burger i s{width:22px!important;height:2px!important} .refnav .ref-lcm{margin-left:0!important} .refnav .ref-lcm .nav-lc .lc-mark{height:47px!important} .refnav .ref-burger{color:#0A1240!important} .refnav .ref-lcm .nav-lc .lc-ink{fill:#0A1240!important} .refnav .ref-lcm .nav-lc .lc-alt{fill:#1043FA!important} .refnav .ref-lcm>span{color:rgba(10,18,64,.5)!important} .refnav .ref-lcm>span img{filter:none;content:url("../../img/dlocal-logo-dark.svg?v=1")} } @media(max-width:820px){.refnav,body.refnav-on .refnav{top:27px!important}.refnav .ref-lcm>span::before{content:"BY"!important;display:inline!important;font:700 10px var(--sans)!important;letter-spacing:.2em!important;color:rgba(10,18,64,.45)!important}} /* mobile: sin "by dLocal" en la barra fija; blur sólo en la esquina superior izquierda; pestaña dLocal chica */ @media(max-width:820px){ .refnav .ref-lcm>span{display:none!important} .refblur{left:0!important;right:auto!important;width:min(260px,70vw)!important;height:130px!important; -webkit-mask-image:radial-gradient(120% 100% at 0 0,#000 45%,transparent 100%)!important;mask-image:radial-gradient(120% 100% at 0 0,#000 45%,transparent 100%)!important} .dl-tag{display:grid!important;width:30px;height:92px;border-radius:10px 0 0 10px;bottom:24px} .dl-tag .dl-mark{width:60px} .dl-tag:hover{width:34px} } /* mobile: sobre fondos oscuros, hamburguesa y logo en blanco */ @media(max-width:820px){ .refnav .ref-burger,.refnav .ref-lcm .lc-mark path{transition:color .25s,fill .25s} body.nav-over-dark .refnav .ref-burger{color:#fff!important} body.nav-over-dark .refnav .ref-lcm .nav-lc .lc-ink{fill:#fff!important} body.nav-over-dark .refnav .ref-lcm .nav-lc .lc-alt{fill:#ADE2FF!important} } /* gráficos mobile (acompaña xchart-m.js) */ @media(max-width:820px){ #page-market .xchart svg{overflow:visible} #page-market .xchart svg text{font-size:20px!important} #page-market .xchart svg text[font-size="20"]{font-size:25px!important} #page-market .xchart svg text[font-size="12.5"]{font-size:19px!important} #page-market .xchart.xm-line svg text[font-size="12.5"]{font-size:22px!important} #page-market .xchart svg text[font-size="12"],#page-market .xchart svg text[font-size="11"]{font-size:20px!important} .xm-h{display:flex;flex-direction:column;gap:16px;margin-top:6px} .xm-row{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0F1F4} .xm-row>b{font:600 14px/1.3 var(--rp-alt,var(--sans));color:#0A1240;margin-bottom:2px} .xm-b{display:flex;align-items:center;gap:8px} .xm-bar{height:14px;border-radius:4px;flex:none} .xm-v{font:600 13px/1 var(--sans);white-space:nowrap} .xm-v i{font-style:normal;font-weight:500;color:#9CA3AF} } /* mobile: tabla antes/ahora como tarjetas limpias */ @media(max-width:820px){ #page-market .chp-body .bn table,#page-market .chp-body .bn tbody{display:block!important} #page-market .chp-body .bn tbody{display:flex!important;flex-direction:column;gap:14px} #page-market .chp-body .bn tbody tr{padding:22px 22px 20px!important;border:0!important;border-radius:18px!important;background:#F4F6FF!important} #page-market .chp-body .bn tbody tr td,#page-market .chp-body .bn tbody tr:not(:last-child) td{border:0!important;padding:0!important} #page-market .chp-body .bn tbody tr td:first-child{font:700 18px/1.25 var(--rp-alt,'Plus Jakarta Sans',sans-serif)!important;color:#2143E9!important;opacity:1!important;margin-bottom:14px} #page-market .chp-body .bn tbody tr td:nth-child(2){font-size:14.5px!important;line-height:1.5!important;color:#83828F!important;padding-bottom:14px!important;border-bottom:1px solid rgba(10,18,64,.08)!important} #page-market .chp-body .bn tbody tr td:nth-child(3){margin-top:14px!important;font-size:15.5px!important;line-height:1.5!important;color:#0A1240!important;font-weight:500} #page-market .chp-body .bn td[data-label]:not(:first-child)::before{font:700 10.5px/1 var(--sans)!important;letter-spacing:.14em!important;text-transform:uppercase;margin-bottom:8px!important;color:#9CA3AF!important} #page-market .chp-body .bn tbody tr td:nth-child(3)::before{color:#2143E9!important} } @media(max-width:820px){ #page-market .chp-body .bn{margin-left:0!important;margin-right:0!important;padding:0!important;width:auto!important} #page-market .chp-body .bn table{margin:0!important;width:100%!important} } /* mobile: gráfico de barras apiladas (Saudi) todavía más legible */ @media(max-width:820px){ #page-market .xchart:not(.xm-line) svg text[font-size="13"]{font-size:27px!important} #page-market .xchart:not(.xm-line) svg text[font-size="20"]{font-size:31px!important;transform:translateY(-12px)} #page-market .xchart:not(.xm-line) svg text[font-size="12.5"]{font-size:20px!important;transform:translateY(-2px)} #page-market .xchart:not(.xm-line) svg text[font-size="12"]{font-size:24px!important} } @media(max-width:820px){#page-market .xchart:not(.xm-done){padding-left:16px}} @media(max-width:820px){ #page-market .xchart:not(.xm-line) svg text[font-size="12.5"][fill="#0A1240"]{font-size:25px!important;transform:translateY(-4px)} #page-market .xchart:not(.xm-line) svg text[font-size="12"][text-anchor="end"]{font-size:19px!important} } @media(max-width:820px){ #page-market .xchart.xm-line{padding-left:0} #page-market .xchart.xm-line svg text[font-size="12.5"]{font-size:24px!important;transform:translateY(-3px)} #page-market .xchart.xm-line svg text[font-size="12"]{font-size:20px!important} } @media(max-width:820px){ .xm-v2{display:flex;flex-direction:column;gap:18px;margin-top:6px} .xm-st-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} .xm-st-h b{font:600 14px var(--sans);color:#6B7280} .xm-st-h strong{font:700 18px var(--rp-alt,var(--sans));color:#0A1240} .xm-st-h em{font:600 12.5px var(--sans);font-style:normal;color:#2D58F5;margin-left:6px} .xm-st-bar{display:flex;height:34px;border-radius:9px;overflow:hidden} .xm-st-bar span{display:flex;align-items:center;justify-content:center;font:600 13px var(--sans)} .xm-v2 .xm-row{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid #F0F1F4} .xm-v2 .xm-row:last-child{border-bottom:0} .xm-v2 .xm-row>b{font:600 15px/1.3 var(--rp-alt,var(--sans));color:#0A1240} .xm-gb{display:grid;grid-template-columns:78px 1fr 50px;align-items:center;gap:10px} .xm-gn{font:500 12.5px var(--sans);color:#6B7280} .xm-gt{display:block} .xm-gt .xm-bar{display:block;height:14px;border-radius:4px} .xm-gv{font:700 14px var(--sans);color:#0A1240;text-align:right} } @media(max-width:820px){#page-market .xchart.xm-line{padding-top:16px;overflow:visible}} /* textos del contenido +1px (no títulos) */ #page-market .chp-body .rt p:not(.src-note),#page-market .chp-body .rt li{font-size:17px} @media(max-width:767px){#page-market .chp-body .rt p:not(.src-note),#page-market .chp-body .rt li{font-size:15px}} #page-market .cn-card p{display:none!important} /* quotes: cargo sin mayúsculas */ #page-market .brq footer small,#page-market .qwho small{text-transform:none!important;letter-spacing:0!important;font-family:var(--rp-font,var(--sans))!important;font-size:14px!important} #page-market .brq footer small,#page-market .qwho small{font-family:"Plus Jakarta Sans dLocal","Plus Jakarta Sans",sans-serif!important;font-weight:500!important} #page-market .brq footer small,#page-market .qwho small{margin-top:2px!important;line-height:1.3!important;display:block} #page-market .qwho b{line-height:1.2!important;margin:0!important} .pg-foot-chapters em{display:none!important} /* chapnav: nombre en una línea con ellipsis */ #page-market .cn-card b{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #page-market .cn-card b{max-width:68%}#page-market .cn-card.cn-next b{margin-left:auto} @media(max-width:640px){#page-market .cn-card b{max-width:100%}} #page-market .cn-card b{line-height:1.2!important;padding-bottom:.14em;margin-bottom:-.14em} /* chapnav: hasta dos líneas (la de abajo la más larga) y los nombres alineados abajo entre sí */ #page-market .cn-card b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;padding-bottom:0!important;margin-bottom:0!important;line-height:1.05!important} #page-market .chapnav .cn-card{display:flex!important;flex-direction:column} #page-market .chapnav .cn-card b{margin-top:auto!important} #page-market .chapnav .cn-card.cn-next{align-items:flex-end;text-align:right} #page-market .chapnav .cn-card{justify-content:flex-end!important}#page-market .chapnav .cn-card b{margin-top:0!important} #page-market .chapnav .cn-card .cn-dir{margin-bottom:14px!important} #page-market .refnav{border-radius:999px!important} html body .refnav,html body.refnav-on .refnav{border-radius:999px!important} /* etiquetas de UI (menu, breadcrumb, previous/next, secciones, tags): mismo tratamiento tipográfico — Plus Jakarta, semibold, mayúsculas y tracking abierto — sin tocar color ni tamaño */ html body .refnav small,html body .refnav .ref-path a,html body .refnav .ref-path b, html body .nav-r button,html body .side-h button, #page-market .hero-crumb a,#page-market .sect-head .mono,#page-market .cn-dir,#page-market .case-tag, #page-market .secnav a span,#page-market .chp-side a span{ font-family:"Plus Jakarta Sans dLocal","Plus Jakarta Sans",sans-serif!important;font-weight:600!important; text-transform:uppercase!important;letter-spacing:.2em!important;line-height:1.2!important} html body .refnav .ref-path a,html body .refnav .ref-path b{font-size:11px!important} html body .refnav .ref-path b{font-weight:700!important} html body .refnav small,html body .refnav .ref-path a,html body .refnav .ref-path b,html body .nav-r button,html body .side-h button,#page-market .hero-crumb a,#page-market .sect-head .mono,#page-market .cn-dir,#page-market .case-tag,#page-market .secnav a span,#page-market .chp-side a span{letter-spacing:.1em!important} /* breadcrumb del header: vuelve a su estilo original (sin mayúsculas) */ html body .refnav .ref-path a{text-transform:none!important;letter-spacing:-.01em!important;font-weight:500!important;font-size:13px!important;line-height:normal!important} html body .refnav .ref-path b{text-transform:none!important;letter-spacing:-.02em!important;font-weight:650!important;font-size:15.5px!important;line-height:normal!important} #page-market .chp-hero h1 .mk-name{margin-left:-.1em!important} #page-market .hero-crumb a,#page-market .hero-crumb{font-weight:700!important} html body #page-market .chp-hero h1 .mk-name{margin-left:-.11em!important} html body .refnav .ref-path b{font-size:13px!important} /* cortes de foto con esquinas redondeadas */ #page-market .chp-body .brk{border-radius:28px!important;overflow:hidden!important;margin-left:clamp(16px,2vw,32px)!important;margin-right:clamp(16px,2vw,32px)!important} @media(max-width:640px){#page-market .chp-body .brk{border-radius:18px!important;margin-left:12px!important;margin-right:12px!important}} /* chapnav con más aire */ #page-market .chapnav .cn-card{padding-top:clamp(80px,7vw,120px)!important;padding-bottom:clamp(80px,7vw,120px)!important} @media(max-width:640px){#page-market .chapnav .cn-card{padding-top:52px!important;padding-bottom:52px!important}} #page-market .chp-body .brk{width:auto!important;max-width:none!important} html body .refnav .ref-path a,html body .refnav .ref-path b{font-size:14.5px!important} #page-market .case-tag{font-weight:700!important} #page-market .lede,#page-market .lede *{font-weight:inherit!important;color:inherit!important;background:none!important;text-decoration:none!important} /* "The way locals pay": separado del hero y con márgenes laterales como los cortes de foto */ #page-market section.pmb.pv-x{margin-top:clamp(24px,2.4vw,40px)!important} #page-market section.pmb.pv-x .pvx-in{margin-left:clamp(16px,2vw,32px)!important;margin-right:clamp(16px,2vw,32px)!important;width:auto!important;border-radius:28px!important} @media(max-width:640px){#page-market section.pmb.pv-x{margin-top:16px!important}#page-market section.pmb.pv-x .pvx-in{margin-left:12px!important;margin-right:12px!important;border-radius:18px!important}} #page-market section.pmb.pv-x .pvx-in{padding-top:clamp(56px,5.5vw,84px)!important}@media(max-width:640px){#page-market section.pmb.pv-x .pvx-in{padding-top:40px!important}} @media(min-width:981px){html body #page-market section.pmb.pv-x .pvx-in{padding-top:max(64px,calc(9.72vw))!important;padding-bottom:max(64px,calc(9.72vw))!important}} @media(min-width:981px){html body #page-market section.pmb.pv-x .pvx-in{padding-top:calc(max(64px,8.333vw) + 20px)!important;padding-bottom:calc(max(64px,8.333vw) + 20px)!important}} /* intro del hero: título y texto con el mismo estilo de texto */ #page-market .opening .op-deck{font-size:inherit!important;font-weight:400!important;letter-spacing:inherit!important;margin:0 0 1em!important} #page-market .opening .op-r .op-deck,#page-market .opening .op-r .lede{font-family:inherit;font-size:20.88px;line-height:1.5!important;font-weight:400!important;letter-spacing:-.005em} @media(max-width:767px){#page-market .opening .op-r .op-deck,#page-market .opening .op-r .lede{font-size:17px}} html body #page-market .opening .op-r .op-deck{font-family:Roboto,"Plus Jakarta Sans",sans-serif!important;font-size:20.88px!important;line-height:1.5!important;font-weight:400!important;letter-spacing:normal!important;color:inherit!important} @media(max-width:767px){html body #page-market .opening .op-r .op-deck{font-size:inherit!important}} @media(max-width:767px){html body #page-market .opening .op-r .op-deck{font-size:17px!important;line-height:1.5!important}} html body #page-market section.pmb.pv-x{margin-top:212px!important}@media(max-width:640px){html body #page-market section.pmb.pv-x{margin-top:144px!important}} html body #page-market section.pmb.pv-x{margin-top:clamp(72px,6.5vw,110px)!important}@media(max-width:640px){html body #page-market section.pmb.pv-x{margin-top:56px!important}} html body #page-market .hero-crumb a,html body #page-market .hero-crumb,html body #page-market .hero-crumb *{font-weight:800!important} html body .nav-r button{font-weight:700!important} @media(min-width:821px){#page-market .xm-done>svg{display:block!important}#page-market .xm-done>.xm-h,#page-market .xm-done>.xm-v2,#page-market .xm-done .xm-leg{display:none!important}} #page-market .chp-body .kpis + .rt.kpi-src{margin-top:18px!important} #page-market .kpi b i.u{margin-left:.12em} /* fuentes ("Source: …"): sin mayúsculas, tipografía de texto */ html body #page-market .src-note,html body #page-market .src-note *,html body #page-market .chart-src,html body #page-market .chart-src *{text-transform:none!important;letter-spacing:0!important;font-family:Roboto,"Roboto dLocal",system-ui,sans-serif!important;font-size:13px!important;font-weight:400!important;line-height:1.5!important} #page-market .chp-body .kpis + .rt.kpi-src{margin-top:20px!important;margin-bottom:36px!important} @media(min-width:641px){#page-market .chp-body .linechart text{font-size:17px!important}#page-market .chp-body .linechart text[font-weight]{font-size:19px!important}} #page-market#page-market .src-note,#page-market#page-market .src-note *,#page-market#page-market .chart-src,#page-market#page-market .chart-src *{text-transform:none!important;letter-spacing:0!important;font-family:Roboto,"Roboto dLocal",system-ui,sans-serif!important;font-size:13px!important;font-weight:400!important} /* referencias de gráficos: más grandes y centradas */ #page-market#page-market .chp-body .cleg{align-items:center;gap:10px 28px} #page-market#page-market .chp-body .cleg li{display:inline-flex;align-items:center;gap:10px;font-size:16px!important;line-height:1.2!important} #page-market#page-market .chp-body .cleg li i{width:12px!important;height:12px!important;border-radius:3px!important;flex:none;transform:translateY(.5px)} @media(max-width:640px){#page-market#page-market .chp-body .cleg li{font-size:14.5px!important}#page-market#page-market .chp-body .cleg li i{width:11px!important;height:11px!important}} /* tooltip de gráficos: plano, sin borde ni sombra */ html body #tip{background:#fff!important;color:#070420!important;border:0!important;box-shadow:0 2px 10px rgba(7,4,32,.12)!important;border-radius:6px!important;padding:8px 11px!important;font:500 13.5px/1.35 Roboto,system-ui,sans-serif!important;letter-spacing:0!important} html body #tip small{color:#9CA3AF!important;font:400 12px/1.3 Roboto,system-ui,sans-serif!important;margin-bottom:2px} #page-market#page-market .chp-body .cleg{justify-content:center} @media(min-width:641px){#page-market .chp-body .linechart text[text-anchor="middle"]{transform:translateY(8px)}} /* tooltip con la tipografía del handbook */ html body #tip{font:650 15px/1.3 "Plus Jakarta Sans dLocal","Plus Jakarta Sans",sans-serif!important;letter-spacing:-.01em!important;border-radius:12px!important;padding:10px 14px 11px!important;box-shadow:0 6px 20px -8px rgba(33,67,233,.28)!important;color:#070420!important} html body #tip small{font:600 10.5px/1.2 "Plus Jakarta Sans dLocal","Plus Jakarta Sans",sans-serif!important;text-transform:uppercase!important;letter-spacing:.1em!important;color:#2143E9!important;margin-bottom:5px!important} /* KPI suelto en variante suave: fondo celeste, sin borde */ #page-market#page-market .chp-body .kpis.kpi-soft .kpi{background:#EEF3FF!important;border:0!important;box-shadow:none!important} /* success case (bloque con banda azul), compartido */ #page-market .chp-body .sect-head:has(.case-band){display:block!important} #page-market .chp-body .case-band{position:relative;overflow:hidden;width:100%;box-sizing:border-box;margin:0 0 34px;padding:clamp(28px,3.2vw,44px) clamp(28px,3.4vw,48px) clamp(32px,3.6vw,48px);border-radius:24px;color:#fff;isolation:isolate; background:radial-gradient(110% 140% at 0% 100%,#4A9BE8 0%,rgba(74,155,232,0) 55%),linear-gradient(135deg,#2E55D9 0%,#2B4FE0 45%,#2440D8 100%)} #page-market .chp-body .case-band .cb-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} #page-market .chp-body .case-band .case-tag{margin:0!important;background:rgba(255,255,255,.16)!important;color:#fff!important} #page-market .chp-body .case-band .case-tag::before{background:#fff!important} #page-market .chp-body .case-band .cb-logos{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px)} #page-market .chp-body .case-band .cb-logos img{height:clamp(22px,2vw,28px);width:auto;filter:brightness(0) invert(1)} #page-market .chp-body .case-band .cb-logos .cd-r{height:clamp(18px,1.6vw,22px)} #page-market .chp-body .case-band .cb-logos .cd-plus{font:300 clamp(18px,1.6vw,22px)/1 "Plus Jakarta Sans",sans-serif;opacity:.85} #page-market .chp-body .case-band h2.h2{margin:clamp(56px,6vw,96px) 0 0!important;max-width:16em;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important} @media(max-width:640px){#page-market .chp-body .case-band{border-radius:18px;padding:22px 20px 26px}#page-market .chp-body .case-band h2.h2{margin-top:44px!important}} /* success case: la banda azul y el cuerpo unidos por un filete vertical (sin fondo) */ #page-market .chp-body .case-band{margin-bottom:0!important;border-radius:24px 24px 24px 0!important} #page-market .chp-body .case-band h2.h2{text-wrap:balance;max-width:none!important} #page-market .chp-body .sect-head:has(.case-band) ~ .rt,#page-market .chp-body .sect-head:has(.case-band) ~ .kpis{border-left:2px solid rgba(43,79,224,.22);padding-left:clamp(28px,3.4vw,48px)!important;box-sizing:border-box} #page-market .chp-body .sect-head:has(.case-band) ~ .rt{padding-top:clamp(32px,3vw,44px)!important;margin-top:0!important} #page-market .chp-body .sect-head:has(.case-band) ~ .kpis{margin-top:0!important;padding-top:clamp(28px,2.6vw,36px)!important;padding-bottom:4px} @media(max-width:640px){#page-market .chp-body .case-band{border-radius:18px 18px 18px 0!important}#page-market .chp-body .sect-head:has(.case-band) ~ .rt,#page-market .chp-body .sect-head:has(.case-band) ~ .kpis{padding-left:18px!important}} #page-market .chp-body .sect-head:has(.case-band) ~ .rt,#page-market .chp-body .sect-head:has(.case-band) ~ .kpis{border-left:0!important} #page-market .chp-body .case-band{border-radius:24px!important;margin-top:clamp(48px,5vw,72px)!important} @media(max-width:640px){#page-market .chp-body .case-band{border-radius:18px!important;margin-top:36px!important}} #page-market .chp-body .sect-head:has(.case-band) ~ .kpis .kpi{border:0!important;background:none!important;box-shadow:none!important;padding-left:0!important} /* success case: un solo borde que envuelve todo (sin fondo); KPI con su borde */ #page-market .chp-body .case-block{background:none!important;border:1px solid rgba(10,18,64,.12);border-radius:28px;overflow:hidden;padding:0 0 clamp(32px,3.4vw,48px);margin-left:var(--colx)!important;margin-right:var(--gut)!important;margin-top:clamp(48px,5vw,72px)} #page-market .chp-body .case-block .sect-head{margin:0!important;padding:0!important} #page-market .chp-body .case-block .case-band{margin:0 0 clamp(28px,3vw,40px)!important;border-radius:0!important;width:100%!important} #page-market .chp-body .case-block .rt,#page-market .chp-body .case-block .kpis{margin-left:0!important;margin-right:0!important;max-width:none!important;padding-left:clamp(28px,3.4vw,48px)!important;padding-right:clamp(28px,3.4vw,48px)!important;box-sizing:border-box} #page-market .chp-body .case-block .kpis .kpi{border:1px solid rgba(10,18,64,.10)!important;background:#fff!important;padding-left:revert-layer!important} @media(max-width:820px){#page-market .chp-body .case-block{margin-left:20px!important;margin-right:20px!important;border-radius:20px}#page-market .chp-body .case-block .rt,#page-market .chp-body .case-block .kpis{padding-left:20px!important;padding-right:20px!important}} #page-market .chp-body section:has(.case-block){padding-top:clamp(64px,6vw,96px)!important} #page-market .chp-body .case-block{margin-top:0!important} #page-market .chp-body .case-block .sect-head:has(.case-band) ~ .kpis .kpi{border:1px solid rgba(10,18,64,.10)!important;background:#fff!important;padding:revert-layer} #page-market .chp-body .case-block .sect-head:has(.case-band) ~ .kpis .kpi{border:0!important;background:#EEF3FF!important} html body #page-market .chp-body .case-block .sect-head:has(.case-band) ~ .kpis .kpi{padding:clamp(28px,3vw,40px) clamp(32px,3.6vw,52px)!important} html body #page-market .chp-body .case-block .case-band{margin-bottom:clamp(24px,2.4vw,32px)!important} html body #page-market .chp-body .case-block .sect-head:has(.case-band) ~ .rt{padding-top:0!important;margin-top:0!important} html body #page-market .chp-body .case-block{padding-bottom:clamp(28px,2.8vw,40px)!important} html body #page-market .chp-body .case-block .sect-head:has(.case-band) ~ .kpis{padding-bottom:0!important;margin-bottom:0!important} #page-market .chp-body .case-block > .chart{margin:clamp(28px,3vw,40px) clamp(28px,3.4vw,48px) 0!important;max-width:none!important;width:auto!important} @media(max-width:820px){#page-market .chp-body .case-block > .chart{margin:24px 20px 0!important}} #page-market#page-market .chp-body .cleg li{font-weight:400!important} #page-market#page-market .chp-body .chart:not(:has(> .hbars)) .cleg{margin-top:34px!important} @media(max-width:640px){#page-market#page-market .chp-body .chart:not(:has(> .hbars)) .cleg{margin-top:24px!important}} #page-market#page-market .chp-body .case-block > .chart{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;margin:clamp(36px,3.6vw,52px) clamp(28px,3.4vw,48px) 0!important} @media(max-width:820px){#page-market#page-market .chp-body .case-block > .chart{margin:28px 20px 0!important}} /* KPIs con el primero destacado: ocupa todo el ancho */ #page-market#page-market .chp-body .kpis.kpis-lead{display:grid!important;grid-template-columns:1fr 1fr!important} #page-market#page-market .chp-body .kpis.kpis-lead .kpi:first-child{grid-column:1 / -1} @media(max-width:640px){#page-market#page-market .chp-body .kpis.kpis-lead{grid-template-columns:1fr!important}} /* rangos: guion a tamaño de cifra */ #page-market .kpi b .rng{font-style:normal;margin:0 .04em;font-size:1em!important;vertical-align:baseline} @media(max-width:640px){ #page-market#page-market .chp-body .kpis.kpis-lead .kpi{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important} #page-market#page-market .chp-body .kpis.kpis-lead .kpi small{max-width:none!important;margin:0!important} } /* KPI destacado (primero, a todo el ancho): formato del KPI suelto, en azul */ #page-market#page-market .chp-body .kpis.kpis-lead .kpi:first-child{display:flex!important;flex-direction:row!important;flex-wrap:nowrap;align-items:center!important;gap:clamp(20px,3vw,48px)!important;border-radius:20px;padding:clamp(24px,2.6vw,36px) clamp(28px,3vw,44px)!important;min-height:0!important} #page-market#page-market .chp-body .kpis.kpis-lead .kpi:first-child b{font-size:clamp(56px,5.2vw,80px)!important;flex:none;min-width:1.7em;margin:0!important} #page-market#page-market .chp-body .kpis.kpis-lead .kpi:first-child small{max-width:13em!important;text-wrap:balance;font-family:var(--rp-alt)!important;font-size:clamp(20px,1.8vw,26px)!important;font-weight:600!important;letter-spacing:-.04em!important;line-height:.98!important;margin:0!important;color:#fff!important} @media(max-width:640px){#page-market#page-market .chp-body .kpis.kpis-lead .kpi:first-child{flex-wrap:wrap;flex-direction:row!important}} /* KPIs dentro de un success case: todos en celeste con texto azul */ #page-market#page-market .chp-body .case-block .kpis .kpi,#page-market#page-market .chp-body .case-block .kpis .kpi b,#page-market#page-market .chp-body .case-block .kpis .kpi small{color:#2D58F5!important} #page-market#page-market .chp-body .case-block .kpis .kpi b i{color:inherit!important} #page-market#page-market .chp-body .rt + .kpis:not(.case-block .kpis){margin-top:clamp(22px,2vw,30px)!important} html body #page-market#page-market .chp-body .case-block .kpis .kpi:not(:only-child){padding:clamp(24px,2.2vw,32px) clamp(20px,2vw,28px)!important} #page-market#page-market .chp-body .colchart .cc-didi:first-child{border-radius:10px 10px 0 0!important}#page-market#page-market .chp-body .colchart .cc-didi + .cc-a{border-radius:0!important} /* success case: logos alineados por línea de base (abajo) y a la altura de x de dLocal */ #page-market#page-market .chp-body .case-band .cb-logos{--lgd:clamp(18px,1.6vw,22px);align-items:flex-end!important} #page-market#page-market .chp-body .case-band .cb-logos img{height:calc(var(--lgd)*1.05)!important;width:auto;display:block} #page-market#page-market .chp-body .case-band .cb-logos img.cd-r{height:var(--lgd)!important} #page-market#page-market .chp-body .case-band .cb-logos .cd-plus{display:flex;align-items:center;height:calc(var(--lgd)*.675);line-height:1} #page-market#page-market .chp-body .case-band .cb-logos img[alt="Kueski"]{height:calc(var(--lgd)*1.25)!important} #page-market#page-market .chp-body .case-band .cb-logos img[alt="OXXO Pay"]{height:calc(var(--lgd)*1.15)!important} #page-market#page-market .chp-body .case-band .cb-logos img[alt="MODO"]{height:calc(var(--lgd)*1)!important} #page-market#page-market .chp-body .case-band .cb-logos img[alt="Verve"]{height:calc(var(--lgd)*1.36)!important;transform:translateY(calc(var(--lgd)*.12))} #page-market#page-market .chp-body .kpis.kpis-lead .kpi:not(:first-child){display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-end!important;gap:12px!important}#page-market#page-market .chp-body .kpis.kpis-lead .kpi:not(:first-child) small{max-width:none!important;margin:0!important} /* barras horizontales con varios tramos: porcentaje dentro de cada color */ #page-market .chp-body .hbars .hb.hb-in i{display:flex;align-items:center;justify-content:center;position:relative} #page-market .chp-body .hbars .hb.hb-in i .hb-iv{font:600 13.5px/1 "Plus Jakarta Sans dLocal","Plus Jakarta Sans",sans-serif;font-style:normal;color:#fff;pointer-events:none;white-space:nowrap} #page-market .chp-body .hbars .hb.hb-in i[style*="#5AC8FA"] .hb-iv,#page-market .chp-body .hbars .hb.hb-in i[style*="#E9F9FF"] .hb-iv,#page-market .chp-body .hbars .hb.hb-in i[style*="#DCE4FE"] .hb-iv{color:#070420} /* links del cuerpo: todo el texto del link (incluidas cifras destacadas) toma el mismo color */ #page-market .chp-body .rt a:hover *,#page-market .chp-body .rt a:focus-visible *{color:inherit!important} /* barra única a todo el ancho, sin etiqueta de fila */ #page-market#page-market .chp-body .hbars.hbars-full .hb{grid-template-columns:minmax(0,1fr)!important;gap:0!important} #page-market#page-market .chp-body .hbars.hbars-full .hb>div{height:52px!important} #page-market#page-market .chp-body .hbars.hbars-full .hb .hb-iv{font-size:16px} @media(max-width:640px){#page-market#page-market .chp-body .hbars.hbars-full .hb>div{height:44px!important}} #page-market#page-market .chp-body .case-band .cb-logos img[alt="Pix"]{height:calc(var(--lgd)*1.5)!important} #page-market#page-market .chp-body .case-band .cb-logos img[alt="Yape"]{height:calc(var(--lgd)*1.75)!important} #page-market#page-market .chp-body .case-band .cb-logos img[alt="GCash"]{height:calc(var(--lgd)*1.1)!important} #page-market#page-market .chp-body .case-block > .chart + .rt{margin-top:clamp(36px,3.6vw,52px)!important} /* gráfico dentro de success case: que no recorte la primera letra del título */ #page-market#page-market .chp-body .case-block > .chart{overflow:visible!important} #page-market#page-market .chp-body .case-block > .chart .chart-h{padding-left:1px} @media(max-width:640px){#page-market#page-market .chp-body .rt .src-note{margin-left:0!important;margin-right:0!important}} #page-market#page-market .chp-body .bn .bn-h{padding-left:2px} @media(max-width:640px){#page-market#page-market .chp-body .bn:has(.bn-h){overflow:visible!important}} /* Pix: la palabra se apoya en la línea de base (la bajada "powered by" queda debajo) */ #page-market#page-market .chp-body .case-band .cb-logos img[alt="Pix"]{height:calc(var(--lgd)*1.25)!important;transform:translateY(calc(var(--lgd)*.31))} /* success case: tag, logos y título entran escalonados cuando entra la banda */ #page-market .chp-body .case-band .case-tag,#page-market .chp-body .case-band .cb-logos,#page-market .chp-body .case-band h2.h2{transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)} #page-market .chp-body .case-band.rv-rise:not(.in) .case-tag,#page-market .chp-body .case-band.rv-rise:not(.in) .cb-logos,#page-market .chp-body .case-band.rv-rise:not(.in) h2.h2{opacity:0;transform:translateY(16px)} #page-market .chp-body .case-band.in .case-tag{transition-delay:.25s} #page-market .chp-body .case-band.in .cb-logos{transition-delay:.4s} #page-market .chp-body .case-band.in h2.h2{transition-delay:.55s} /* mobile: sin cifras dentro de las barras (quedan en el tooltip) y barras horizontales más altas */ @media(max-width:640px){ #page-market#page-market .chp-body .hbars .hb i b,#page-market#page-market .chp-body .hbars .hb .hb-iv,#page-market#page-market .chp-body .hbars .hb .hb-v,#page-market#page-market .chp-body .colchart b{display:none!important} #page-market#page-market .chp-body .hbars .hb>div{height:30px!important} #page-market#page-market .chp-body .hbars.hbars-full .hb>div{height:44px!important} } @media(max-width:640px){ /* "The way locals pay" llega al mismo margen que el hero */ #page-market#page-market .pmb.pv-x .pvx-in{margin-left:0!important;margin-right:0!important} /* columnas: siempre entran en el ancho */ #page-market#page-market .chp-body .colchart{gap:6px!important} #page-market#page-market .chp-body .colchart>div{min-width:0!important} #page-market#page-market .chp-body .colchart .cc-lab{font-size:11.5px!important;line-height:1.25;overflow-wrap:anywhere} } @media(max-width:640px){#page-market#page-market .chp-body .case-band .case-tag{display:none!important}} @media(max-width:640px){html body #page-market#page-market section.pmb.pv-x{margin-top:12px!important}} @media(max-width:640px){#page-market#page-market .chp-body .ng-cols b,#page-market#page-market .chp-body .nc-bar b{display:none!important}} /* mobile: hero y "The way locals pay" unidos en un solo bloque */ @media(max-width:640px){ html body #page-market#page-market section.pmb.pv-x{margin-top:0!important} html body #page-market#page-market .hero-shell:has(~ * section.pmb.pv-x),html body #page-market#page-market .hero-shell{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important} html body #page-market#page-market section.pmb.pv-x .pvx-in{border-top-left-radius:0!important;border-top-right-radius:0!important} } @media(max-width:640px){html body #page-market#page-market .hero-shell{clip-path:inset(0 round 18px 18px 0 0)!important}} /* success case: más logos alineados por línea de base */ #page-market#page-market .chp-body .case-band .cb-logos img[alt="Easypaisa"]{height:calc(var(--lgd)*1.29)!important;transform:translateY(calc(var(--lgd)*.32))} #page-market#page-market .chp-body .case-band .cb-logos img[alt="JazzCash"]{height:calc(var(--lgd)*1.4)!important;transform:translateY(calc(var(--lgd)*.36))} #page-market#page-market .chp-body .case-band .cb-logos img[alt="GCash"]{height:calc(var(--lgd)*1.35)!important;transform:translateY(calc(var(--lgd)*.3))} #page-market#page-market .chp-body .case-band .cb-logos img[alt="Yape"]{height:calc(var(--lgd)*1.75)!important;transform:translateY(calc(var(--lgd)*.48))} @media(max-width:640px){#page-market#page-market .chp-body .case-band .cb-logos:has(img:nth-of-type(3)){--lgd:15px;gap:10px!important}} #page-market#page-market .chp-body .case-band .cb-logos .cd-plus{transform:translateY(calc(var(--lgd)*-.1))} /* botón Menu: texto y líneas en azul */ html body #page-market:is(.mf2,:has(.mf-hero),:not(:has(.hv-photo,.stamp-svg))) .nav-r button{color:#2143E9!important} html body #page-market:is(.mf2,:has(.mf-hero),:not(:has(.hv-photo,.stamp-svg))) .nav-r button i::before,html body #page-market:is(.mf2,:has(.mf-hero),:not(:has(.hv-photo,.stamp-svg))) .nav-r button i::after,html body #page-market:is(.mf2,:has(.mf-hero),:not(:has(.hv-photo,.stamp-svg))) .nav-r button i s{background:#2143E9!important} /* headings de todos los heros: peso 500, tracking un poco más abierto */ html body #page-market .chp-hero h1.h1,html body #page-market .chp-hero h1.h1 .mk-name{font-weight:500!important;letter-spacing:-.035em!important} /* Glossary y Data & Sources: el hero también redondeado abajo */ html body #page-market#page-market.rf > .hero-shell:not(#x){border-bottom-left-radius:28px!important;border-bottom-right-radius:28px!important;overflow:hidden} @media(max-width:900px){html body #page-market#page-market.rf > .hero-shell:not(#x){border-radius:24px!important}} /* navegación de capítulos: títulos largos en dos líneas como mucho (Account-to-Account / (A2A)) */ @media(min-width:641px){html body #page-market .chapnav .cn-card b{max-width:none!important;white-space:nowrap}} /* gráficas de línea apiladas (duo, ej. Egipto): números en proporción al ancho */ @media(min-width:641px){html body #page-market .chp-body .chart.duo .linechart text{font-size:12.5px!important}html body #page-market .chp-body .chart.duo .linechart text[font-weight]{font-size:14px!important}} /* KPIs: entrada más rápida y corta */ html body #page-market .chp-body .kpis > .kpi.rv2{transition:opacity .6s ease calc(var(--d,0s)*.5),transform .7s cubic-bezier(.16,1,.3,1) calc(var(--d,0s)*.5),filter .6s ease calc(var(--d,0s)*.5)!important} html body #page-market .chp-body .kpis > .kpi.rv2:not(.on){transform:translateY(36px) scale(.97)!important;filter:blur(3px)!important} /* todos los headings con el tracking de "Financial technology for markets of the future" (medido: -0.04em) */ html body #page-market :is(h1,h2,h3,h4),html body #page-market :is(h1,h2,h3,h4) :is(span,em,b,i), html body #page-market .chp-hero h1.h1 .mk-name,html body #page-market .chp-hero h1.h1 .tw, html body #page-market .lp-go-card b,html body #page-market .cn-card b{letter-spacing:-.04em!important} html body #page-market#page-market:not(#x) :is(h1,h2,h3,h4):not(#x),html body #page-market#page-market:not(#x) :is(h1,h2,h3,h4):not(#x) :is(span,em,b,i), html body #page-market#page-market:not(#x) .chp-hero h1.h1 .mk-name:not(#x),html body #page-market#page-market:not(#x) .chp-hero h1.h1 .tw:not(#x), html body #page-market#page-market:not(#x) .lp-go-card b:not(#x),html body #page-market#page-market:not(#x) .cn-card b:not(#x){letter-spacing:-.04em!important} /* icono de menú de la barra fija: sin hover */ html body .refnav .ref-burger:hover,html body .refnav .ref-burger:focus{background:transparent!important} /* KPIs: cifras de ancho fijo mientras cuentan, para que no salten */ html body #page-market .kpis .kpi b{font-variant-numeric:tabular-nums} /* KPI de texto (sin cifra) */ html body #page-market .kpis .kpi.kpi-txt b{font-size:clamp(30px,2.6vw,40px)!important;line-height:1.05!important;letter-spacing:-.04em!important} /* KPIs: un poco de aire entre la cifra y el % / unidad */ html body #page-market .kpis .kpi b > i:not(.u){margin-left:.06em} /* callout dentro de un success case: ancho completo de la tarjeta */ html body #page-market#page-market .chp-body .case-block > .callout:not(#x){margin:clamp(32px,3.2vw,44px) clamp(28px,3.4vw,48px) 0!important;max-width:none!important;width:auto!important} @media(max-width:820px){html body #page-market#page-market .chp-body .case-block > .callout:not(#x){margin:28px 20px 0!important}} html body #page-market#page-market#page-market .chp-body .case-band .cb-logos img[alt^="Bank transfer"]{height:calc(var(--lgd)*1.6)!important;max-height:none!important;width:auto!important;transform:translateY(calc(var(--lgd)*.22))!important} /* ── callouts sutiles (páginas de África y Medio Oriente): sin fondo ni rótulo, una línea azul a la izquierda y la frase del doc en tono de texto; no cortan el flujo ── */ html body #page-market#page-market .chp-body .callout.co-soft:not(#x){background:none!important;background-image:none!important; border:0!important;border-left:2px solid #2D58F5!important;border-radius:0!important;box-shadow:none!important;color:#0A1240; padding:2px 0 2px clamp(18px,1.6vw,24px)!important;max-width:42em!important} html body #page-market#page-market .chp-body .sect > .callout.co-soft:not(#x){margin:clamp(28px,2.8vw,40px) auto clamp(28px,2.8vw,40px) var(--colx)!important} html body #page-market#page-market .chp-body .callout.co-soft:not(#x)::before, html body #page-market#page-market .chp-body .callout.co-soft:not(#x)::after{content:none!important} html body #page-market#page-market .chp-body .callout.co-soft:not(#x) h4{color:#0A1240!important;font-family:var(--rp-alt)!important; font-size:clamp(18px,1.45vw,22px)!important;font-weight:500!important;line-height:1.3!important;letter-spacing:-.02em!important;max-width:none!important;margin:0!important} html body #page-market#page-market .chp-body .callout.co-soft:not(#x) h4 em{color:#2D58F5!important;font-style:normal!important;font-weight:600!important} html body #page-market#page-market .chp-body .callout.co-soft:not(#x)>.mono{color:#2D58F5!important;opacity:1;font-size:12px;letter-spacing:.08em;margin-bottom:8px} html body #page-market#page-market .chp-body .callout.co-soft:not(#x) .co-p{color:rgba(10,18,64,.68)!important;font-size:16px;margin-top:10px!important} @media(max-width:980px){html body #page-market#page-market .chp-body .sect > .callout.co-soft:not(#x){margin-left:var(--gut)!important;margin-right:var(--gut)!important}} /* subtítulo dentro de un success case: alineado con el texto de la tarjeta */ html body #page-market#page-market .chp-body .case-block > .h3.sub-h:not(#x){margin:clamp(32px,3.2vw,44px) clamp(28px,3.4vw,48px) 0!important;max-width:none!important;width:auto!important} html body #page-market#page-market .chp-body .case-block > .h3.sub-h:not(#x) + .rt{margin-top:14px!important} @media(max-width:820px){html body #page-market#page-market .chp-body .case-block > .h3.sub-h:not(#x){margin:28px 20px 0!important}} /* payflex: el logo tiene descendente (y), se baja un poco para alinearlo ópticamente con dLocal */ html body #page-market#page-market .cb-logos img[src*="payflex"]:not(#x){transform:translateY(14%)} /* ── split stat (main + dos datos menores), como el bloque del survey ── */ #page-market .chp-body .sst{margin:clamp(32px,3.4vw,48px) auto 0 var(--colx);max-width:var(--wrap);width:auto; border:1px solid #E9E9E9;border-radius:20px;background:#fff;padding:clamp(26px,3vw,44px) clamp(18px,2vw,22px) clamp(18px,2vw,22px)} #page-market .chp-body .sst-main{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,48px);align-items:center;padding:0 clamp(8px,2vw,30px)} #page-market .chp-body .sst-main b{font-family:var(--rp-alt);font-weight:500;letter-spacing:-.05em;line-height:.9;font-size:clamp(56px,6.4vw,104px);color:#2D58F5;white-space:nowrap} #page-market .chp-body .sst-main b i{font-style:normal;font-size:.5em;letter-spacing:-.02em} #page-market .chp-body .sst-main b i:first-child{margin-right:.12em} #page-market .chp-body .sst-main p{margin:0;font-family:var(--rp-alt);font-weight:600;font-size:clamp(20px,1.8vw,28px);line-height:1;letter-spacing:-.04em;color:#2D58F5;max-width:16em} #page-market .chp-body .sst-split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px);margin-top:clamp(36px,3.6vw,52px)} #page-market .chp-body .sst-split::before{content:"";position:absolute;left:50%;top:-22px;bottom:0;width:1.5px;margin-left:-.75px;background:#2D58F5} #page-market .chp-body .sst-split::after{content:"";position:absolute;left:50%;top:-26px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#2D58F5} #page-market .chp-body .sst-c{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);border-radius:14px;background:#EAF7FE;color:#2D58F5; padding:clamp(18px,1.8vw,24px) clamp(20px,2vw,30px)} #page-market .chp-body .sst-c.sst-on{background:#2D58F5;color:#fff} #page-market .chp-body .sst-c b{font-family:var(--rp-alt);font-weight:500;letter-spacing:-.04em;line-height:1;font-size:clamp(30px,2.8vw,42px);white-space:nowrap} #page-market .chp-body .sst-c b i{font-style:normal;font-size:.55em;letter-spacing:-.01em} #page-market .chp-body .sst-c span{font-size:clamp(15px,1.15vw,18px);line-height:1.3} @media(max-width:980px){#page-market .chp-body .sst{margin-left:var(--gut);margin-right:var(--gut);max-width:none}} @media(max-width:700px){#page-market .chp-body .sst-main{grid-template-columns:1fr;gap:10px} #page-market .chp-body .sst-split{grid-template-columns:1fr}#page-market .chp-body .sst-split::before,#page-market .chp-body .sst-split::after{display:none}} /* split stat: sin la línea entre los datos de abajo; el principal un poco más chico */ #page-market .chp-body .sst-split::before,#page-market .chp-body .sst-split::after{display:none} #page-market .chp-body .sst-split{margin-top:clamp(26px,2.8vw,40px)} #page-market .chp-body .sst-main b{font-size:clamp(48px,5.2vw,84px)} /* ── columnas simples con el % grande siempre visible (success cases) ── */ #page-market .sb-cols{display:grid;grid-template-columns:repeat(3,minmax(0,140px));justify-content:center;gap:clamp(12px,1.6vw,24px);align-items:end; height:clamp(230px,24vw,320px);margin-top:clamp(20px,2.4vw,32px);border-bottom:1px solid #E6E9F2} #page-market .sb-c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%} #page-market .sb-c b{font-family:var(--rp-alt);font-weight:600;letter-spacing:-.045em;line-height:1;font-size:clamp(30px,3.2vw,48px);color:#2D58F5;margin-bottom:12px} #page-market .sb-c b i{font-style:normal;font-size:.6em;margin-left:2px} #page-market .sb-bar{display:block;width:100%;height:calc(var(--h) * .72);min-height:6px;border-radius:12px 12px 0 0;background:#C9D4F5} #page-market .sb-c:nth-child(2) .sb-bar{background:#8FA8FA} #page-market .sb-c:last-child .sb-bar{background:#2D58F5} #page-market .sb-m{position:absolute;bottom:-30px;font-size:14px;color:var(--tx-70);white-space:nowrap} #page-market .chp-body .sbars .chart-note{margin-top:52px} /* split stat con titular en texto (sin número) y rótulo sobre los dos datos */ #page-market .chp-body .sst-txt .sst-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #page-market .chp-body .sst-txt .sst-main b{font-size:clamp(30px,3vw,46px);line-height:1;white-space:normal;letter-spacing:-.045em} #page-market .chp-body .sst-txt .sst-main p{font-family:var(--rp-font);font-weight:400;font-size:clamp(16px,1.25vw,19px);line-height:1.4;letter-spacing:0;color:var(--tx-70,#5b6488)} #page-market .chp-body .sst-k{margin:clamp(26px,2.8vw,38px) clamp(8px,2vw,30px) 0;font-family:var(--rp-alt);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#2D58F5} #page-market .chp-body .sst-k + .sst-split{margin-top:12px} /* Bre-B: columnas de hitos con logo en el título */ #page-market .chp-body .sb-hl{display:flex;align-items:center;gap:12px} #page-market .chp-body .sb-logo{height:clamp(22px,2vw,28px);width:auto} #page-market .sb-y{margin-top:10px;font-size:13px;color:var(--tx-70)} #page-market .sb-0 .sb-bar{min-height:3px;height:3px;background:#C9D4F5} #page-market .sb-m em{font-style:normal;opacity:.75} #page-market .sb-keys .sb-cols{grid-template-columns:repeat(3,minmax(0,150px))} #page-market .sb-keys .sb-c:nth-child(2) .sb-bar{background:#8FA8FA} @media(max-width:700px){#page-market .chp-body .sst-txt .sst-main{grid-template-columns:1fr}#page-market .sb-m em{display:block;text-align:center}} /* split stat con titular en texto: más chico, titular y bajada apilados */ #page-market .chp-body .sst-txt .sst-main{grid-template-columns:1fr;gap:8px} #page-market .chp-body .sst-txt .sst-main b{font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-.04em;line-height:1.05} #page-market .chp-body .sst-txt .sst-main p{max-width:36em} #page-market .chp-body .sst{margin-bottom:clamp(36px,3.6vw,52px)!important} #page-market .chp-body .sst + .rt{margin-top:0!important} #page-market .chp-body .sst{margin-top:clamp(36px,3.6vw,52px)!important;margin-bottom:0!important} #page-market .chp-body .sst + .rt{margin-top:clamp(36px,3.6vw,52px)!important;padding-top:0!important} /* Khipu: el % es claramente el share de Khipu; rótulo "Khipu share" sobre el primero y el último */ #page-market .khc .cc-a b{position:relative} #page-market .khc .colchart > div:first-child .cc-a b::before,#page-market .khc .colchart > div:nth-last-child(1) .cc-a b::before{ content:"Khipu share";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap; font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#2A9BD0} /* success case dentro de la misma sección: aire normal arriba, sin línea divisoria */ html body #page-market#page-market .chp-body .sect > :not(.sect-head) + .case-block:not(#x){margin-top:clamp(40px,4vw,56px)!important} /* sección que sigue a la cita de banda: menos aire (antes quedaba muy despegada) */ html body #page-market#page-market .chp-body .brq-band:not(#x){margin-bottom:clamp(40px,4vw,64px)!important} html body #page-market#page-market .chp-body .brq-band + .sect:not(#x){padding-top:0!important} html body #page-market#page-market .chp-body .brq-band + .sect:not(#x) > .sect-head{padding-top:clamp(40px,4vw,64px)!important} /* columnas apiladas: el % de arriba más grande */ html body #page-market#page-market .colchart .cc-a > b:not(#x){font-family:var(--rp-alt);font-size:clamp(20px,2vw,30px);font-weight:600;letter-spacing:-.04em;line-height:1} html body #page-market#page-market .colchart .cc-a > b:not(#x){position:absolute;top:auto;bottom:calc(100% + 10px)} html body #page-market#page-market .chp-body .brq-band + .sect > .case-block:first-child:not(#x){margin-top:clamp(40px,4vw,64px)!important} html body #page-market#page-market .chp-body .brq-band + .sect:has(> .case-block:first-child):not(#x){padding-top:clamp(40px,4vw,64px)!important} /* ══ llamadas numeradas y fuentes al final de la página ══ */ #page-market sup.fn{font-size:.62em;line-height:0;vertical-align:super;margin-left:1px} #page-market sup.fn a{color:#2F55F0;text-decoration:none;font-weight:600} #page-market .fnotes{list-style:none;counter-reset:fn;margin:clamp(40px,4vw,60px) var(--gut,24px) 0 var(--colx);max-width:var(--wrap,720px);padding:18px 0 clamp(48px,5vw,80px);border-top:1px solid #E3E8F2;font-size:13px;line-height:1.5;color:#7A8095} #page-market .fnotes li{counter-increment:fn;display:flex;gap:10px} #page-market .fnotes li + li{margin-top:6px} #page-market .fnotes li::before{content:counter(fn);color:#2F55F0;font-weight:600;min-width:1em} #page-market .fnotes a.link{color:inherit} /* ══ callout de texto (una frase con dato destacado) ══ */ #page-market .chp-body .kpis.kpis-say{grid-template-columns:1fr!important} #page-market .chp-body .kpis-say .kpi.kpi-say{display:block!important;min-height:0!important;padding:clamp(26px,2.8vw,40px) clamp(28px,3vw,44px)!important;background:linear-gradient(135deg,#2F55F0 0%,#1D3FE0 100%)!important;border:0!important} #page-market .chp-body .kpis-say .kpi-say p{margin:0!important;max-width:30em;font:500 clamp(20px,1.75vw,26px)/1.3 var(--rp-alt,var(--sans))!important;letter-spacing:-.015em;color:#BFE3FF!important} #page-market .chp-body .kpis-say .kpi-say strong{color:#fff;font-weight:600} #page-market .chp-body .kpis-say .kpi-say sup.fn a{color:#BFE3FF} #page-market .chp-body .kpis-say .kpi-say .say-h{display:block;margin-bottom:8px;font-size:1.15em} /* dos callouts de texto lado a lado */ #page-market .chp-body .kpis.kpis-say.kpis-say2{grid-template-columns:1fr 1fr!important} #page-market .chp-body .kpis-say2 .kpi-say + .kpi-say{background:#EAF6FE!important} #page-market .chp-body .kpis-say2 .kpi-say + .kpi-say p{color:#5B6FB8!important} #page-market .chp-body .kpis-say2 .kpi-say + .kpi-say strong{color:#2F55F0} @media(max-width:767px){#page-market .chp-body .kpis.kpis-say.kpis-say2{grid-template-columns:1fr!important}} /* ══ mobile: heros con foto ══ */ @media(max-width:900px){ /* el fondo del hero cierra con esquinas redondeadas también abajo */ #page-market .hv-photo .hv-bg{border-radius:clamp(18px,1.8vw,28px)} /* el blur se aplica sobre la imagen (no backdrop-filter), así aparece de inmediato */ html body #page-market .hv-photo .hv-blur{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} html body #page-market .hv-photo .hero-video img,html body #page-market .hv-photo .hero-video video{filter:blur(8px);transform:scale(1.08)} html body #page-market .lp-hero-blur .hero-video img,html body #page-market .lp-hero-blur .hero-video video{filter:blur(22px) saturate(1.05)} } @media(max-width:900px){#page-market .hv-photo .hv-bg{clip-path:inset(0 round clamp(18px,1.8vw,28px));-webkit-clip-path:inset(0 round clamp(18px,1.8vw,28px))}} @media(max-width:900px){html body #page-market .hero-shell.hv-photo:not(#x){border-radius:clamp(18px,1.8vw,28px)!important;overflow:hidden}} /* nav: logo dLocal siempre con su proporción (Safari) y, en mobile, logo + by dLocal más a la izquierda */ img[src*="dlocal-logo.svg"]{aspect-ratio:953.89/217.44} @media(max-width:767px){#page-market .nav .nav-lc{margin-left:-10px}} /* mobile: "by dLocal" un poco más grande */ @media(max-width:767px){html body #page-market .nav-logo > span img{height:18px!important;width:auto!important;max-width:none!important} html body #page-market .nav-logo > span{gap:7px!important} html body #page-market .nav-logo > span::before{font-size:11px!important}} @media(max-width:767px){html body #page-market#page-market .nav .nav-logo > span:not(#x){gap:7px!important} html body #page-market#page-market .nav .nav-logo > span:not(#x)::before{margin-right:-2px}} @media(max-width:820px){html body #refnav.refnav .ref-lead:not(#x){gap:11px!important}} /* menú lateral: solo la cruz, un poco más grande */ html body .side-h #sideClose{gap:0;padding:6px} html body .side-h #sideClose i{font-size:20px!important} /* menú lateral: logo en azul, un poco más grande y más separado de la lista */ html body .side .side-lc img{height:clamp(98px,7.5vw,112px)!important} html body .side .side-lc{margin-top:14px!important} html body .side .side-list{margin-top:clamp(18px,2vw,28px)!important} /* menú lateral: mismo tamaño en todos los niveles y sangría más marcada */ html body .side .side-row b,html body .side .side-sub li>.side-row b,html body .side .side-sub .side-sub li>.side-row b{font-size:clamp(17px,1.3vw,19px)!important} html body .side .side-sub li>.side-row:not(#x){padding-left:28px!important} html body .side .side-sub li>.side-row:not(#x):hover{padding-left:32px!important} html body .side .side-sub .side-sub li>.side-row:not(#x){padding-left:44px!important} html body .side .side-sub .side-sub li>.side-row:not(#x):hover{padding-left:48px!important} /* menú lateral: hijos y nietos con menos peso */ html body .side .side-sub .side-row b:not(#x){font-weight:400!important} html body .side .side-sub .side-row.cur b:not(#x){font-weight:600!important} /* "The way locals pay": menos aire alrededor del bloque (se veía sobredimensionado) */ @media(min-width:981px){html body #page-market#page-market section.pmb.pv-x .pvx-in:not(#x){padding-top:calc(max(48px,5vw) + 20px)!important;padding-bottom:max(48px,5vw)!important;padding-left:clamp(28px,4vw,64px)!important;padding-right:clamp(28px,4vw,64px)!important}} /* casos de éxito: sin aire extra arriba dentro del marco (la cabecera azul arranca arriba) */ html body #page-market#page-market .chp-body .case-block > .sect-head:not(#x){padding-top:0!important} /* highlights de un solo color: callout suave todo azul, frase destacada todo blanco */ html body #page-market#page-market .chp-body .callout.co-soft:not(#x) h4,html body #page-market#page-market .chp-body .callout.co-soft:not(#x) h4 em{color:#2D58F5!important;font-weight:500!important} #page-market .chp-body .kpis-say .kpi-say p,#page-market .chp-body .kpis-say .kpi-say p strong{color:#fff!important;font-weight:500!important} #page-market .chp-body .kpis-say .kpi-say sup.fn a{color:#fff!important} #page-market .chp-body .kpis-say2 .kpi-say + .kpi-say p,#page-market .chp-body .kpis-say2 .kpi-say + .kpi-say p strong{color:#2F55F0!important} #page-market .chp-body .callout:not(.co-soft) h4 em{color:inherit!important} /* frase destacada con pregunta: la pregunta como etiqueta chica, el dato como protagonista */ #page-market .chp-body .kpis-say .kpi-say .say-h{display:block!important;margin:0 0 14px!important;font:600 13px/1.3 var(--mono,var(--sans))!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#fff!important;opacity:.72} /* Bre-B: textos del gráfico en un solo gris, subtítulo al tamaño de las notas */ #page-market .chp-body .sb-keys .sb-y{font-size:15px!important;color:var(--tx-70)!important;margin-top:8px!important} #page-market .chp-body .sb-keys .sb-m,#page-market .chp-body .sb-keys .sb-m em{color:var(--tx-70)!important;opacity:1!important} #page-market .chp-body .sb-keys .chart-note{color:var(--tx-70)!important} /* menos aire entre la foto de corte y el título que sigue */ html body #page-market .chp-body .brk + .sect{padding-top:0!important} html body #page-market .chp-body .brk + .sect > .sect-head{padding-top:24px!important} /* Bre-B: logo contra la esquina derecha */ #page-market .chp-body .sb-keys .sb-hl{justify-content:space-between} #page-market .chp-body .sb-keys .sb-hl .sb-logo{order:2;margin-left:auto} /* Nequi + dLocal: alinear la línea base de los logos */ #page-market .cb-logos img[alt="Nequi"]{transform:translateY(3px)} /* Chile Khipu: solo mes 1 y 7, columnas angostas y centradas */ #page-market .chp-body .khc .colchart{justify-content:center!important;gap:clamp(40px,6vw,96px)!important} #page-market .chp-body .khc .colchart>div{flex:0 0 clamp(110px,12vw,170px)!important;max-width:170px!important} html body #page-market .chp-body .brk + .sect > .sect-head{padding-top:clamp(48px,4.6vw,72px)!important} /* menos aire entre una sección y la siguiente */ #page-market .chp-body .sect + .sect > .sect-head{padding-top:calc(var(--sy) * .55)!important} /* subtítulo de gráfico */ #page-market .chp-body .chart .chart-sub{margin:8px 0 0;font:500 clamp(16px,1.3vw,19px)/1.35 var(--rp-alt,var(--sans));letter-spacing:-.01em;color:var(--tx-70)} /* un solo callout por bloque */ #page-market .chp-body .kpis.kpis-1{grid-template-columns:1fr!important} #page-market .chp-body .kpis-1 .kpi{min-height:0!important} #page-market .chp-body .kpi-logo b img{height:clamp(40px,3.4vw,54px);width:auto;display:block;filter:brightness(0) invert(1)} /* título de gráfico más grande cuando lleva subtítulo */ #page-market .chp-body .chart .chart-h:has(+ .chart-sub){font-size:clamp(19px,1.55vw,23px)!important;line-height:1.2!important} /* callout único: banda azul, texto blanco */ #page-market#page-market .chp-body .kpis.kpis-1 .kpi{display:flex!important;flex-direction:row!important;align-items:center!important;gap:clamp(20px,3vw,44px)!important;padding:clamp(26px,2.8vw,40px) clamp(28px,3vw,44px)!important;border-radius:20px!important;border:0!important;background:linear-gradient(135deg,#2F55F0 0%,#1D3FE0 100%)!important} #page-market#page-market .chp-body .kpis.kpis-1 .kpi b,#page-market#page-market .chp-body .kpis.kpis-1 .kpi b i{color:#fff!important;flex:none;margin:0!important} #page-market#page-market .chp-body .kpis.kpis-1 .kpi small{color:#fff!important;margin:0!important;font-size:clamp(19px,1.6vw,24px)!important;line-height:1.2!important;max-width:22em} #page-market .chp-body .chart .bnpl-bars + .chart-note{margin-top:28px!important} /* BNPL: dos success cases chicos */ #page-market .chp-body .mini-cases{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);margin:clamp(22px,2.4vw,32px) auto clamp(26px,2.6vw,36px) var(--colx);max-width:var(--wrap)} #page-market .chp-body .mcase{padding:clamp(22px,2.2vw,30px);border:1px solid #DCE4FE;border-radius:20px;background:#fff} #page-market .chp-body .mcase-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} #page-market .chp-body .mcase-top img{height:26px;width:auto} #page-market .chp-body .mcase b{display:block;font:600 clamp(40px,3.6vw,54px)/1 var(--rp-alt,var(--sans));letter-spacing:-.04em;color:#2D58F5;margin-bottom:10px} #page-market .chp-body .mcase b i{font-style:normal;font-size:.55em;margin-left:2px} #page-market .chp-body .mcase p{margin:0!important;font-size:15px!important;line-height:1.5!important;color:#6B7280!important} @media(max-width:980px){#page-market .chp-body .mini-cases{margin-left:var(--gut);margin-right:var(--gut)}} @media(max-width:640px){#page-market .chp-body .mini-cases{grid-template-columns:1fr}} /* aparición de bloques nuevos */ .ap-w{opacity:0;translate:0 26px;transition:opacity .8s ease,translate .9s cubic-bezier(.16,1,.3,1)} .ap-w.ap-on{opacity:1;translate:none} .mq-mini.ap-w{opacity:1;translate:none} .mq-mini.ap-w>*{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .8s cubic-bezier(.16,1,.3,1)} .mq-mini.ap-w>figcaption{transition-delay:.25s} .mq-mini.ap-w.ap-on>*{opacity:1;translate:none} .mini-cases.ap-w{opacity:1;translate:none} .mini-cases.ap-w>.mcase{opacity:0;translate:0 24px;transition:opacity .7s ease,translate .9s cubic-bezier(.16,1,.3,1)} .mini-cases.ap-w>.mcase+.mcase{transition-delay:.12s} .mini-cases.ap-w.ap-on>.mcase{opacity:1;translate:none} @media(prefers-reduced-motion:reduce){.ap-w,.ap-w>*{opacity:1!important;translate:none!important;clip-path:none!important}} #page-market .chp-body .mcase-top{justify-content:flex-start!important} #page-market .chp-body .mcase{position:relative} #page-market .chp-body .mcase-top{position:absolute;top:clamp(22px,2.2vw,30px);right:clamp(22px,2.2vw,30px);margin:0!important} @media(max-width:640px){.dbr3{display:none}} /* sello en el hero de cada APM (solo desktop) */ .hero-stamp{display:none} @media(min-width:1024px){ html body #page-market .chp-hero .hero-stamp{display:block!important;position:absolute!important;right:auto!important;bottom:auto!important;margin:0!important;width:clamp(96px,8vw,128px)!important;height:auto;z-index:4;pointer-events:none;filter:drop-shadow(0 14px 24px rgba(5,4,24,.35));opacity:0;transform:scale(1.9) rotate(-20deg);animation:heroStamp .6s cubic-bezier(.3,1.6,.5,1) 1.1s forwards} @keyframes heroStamp{0%{opacity:0;transform:translateY(-30px) scale(1.9) rotate(-20deg)}60%{opacity:1;transform:scale(.9) rotate(10deg)}100%{opacity:1;transform:scale(1) rotate(8deg)}} } html body #page-market .chp-body .brk + .sect:has(> .case-block:first-child){padding-top:clamp(48px,4.6vw,72px)!important} #page-market .chp-body .case-src{margin-top:clamp(18px,2vw,26px)!important;padding-top:0!important} #page-market#page-market .chp-body .case-block > .case-src{margin:clamp(20px,2.2vw,30px) clamp(28px,3.4vw,48px) 0!important} #page-market .chp-body:has(> .fnotes:last-child) ~ .chapnav{border-top:1px solid #E9E9E9!important} #page-market .chp-body .callout:not(.co-soft) .case-src,#page-market .chp-body .callout:not(.co-soft) .chart-src{color:rgba(255,255,255,.72)!important} /* pie: los capitulos quedan en la misma fila que la marca aunque los titulos sean largos */ @media(min-width:1181px){footer.pg-foot .pg-foot-nav{flex:1 1 0!important;min-width:0}footer.pg-foot .pg-foot-chapters{gap:10px clamp(10px,1vw,18px)!important}footer.pg-foot .pg-foot-chapters b{font-size:12.5px!important}} /* pie: legales + glosario y fuentes */ footer.pg-foot .pg-foot-bot{flex:0 0 100%;display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(20px,3vw,56px);margin:clamp(8px,1vw,14px) 0 0;padding-top:clamp(18px,2vw,26px);border-top:1px solid rgba(255,255,255,.16)} footer.pg-foot .pg-foot-bot .pg-foot-legal{flex:1 1 auto;margin:0;padding:0;border:0} .pg-foot-util{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,1.6vw,24px);flex:0 0 auto} .pg-foot-util a{font:500 12.5px/1.6 var(--sans);color:rgba(255,255,255,.75);white-space:nowrap;text-decoration:none;transition:color .22s} .pg-foot-util a:hover{color:#fff;text-decoration-color:#fff} @media(max-width:1180px){footer.pg-foot .pg-foot-bot{flex-direction:column-reverse;align-items:center;text-align:center;gap:14px}footer.pg-foot .pg-foot-bot .pg-foot-legal{text-align:center}} @media(min-width:1181px){html body footer.pg-foot .pg-foot-chapters:not(#x){gap:10px clamp(12px,1.15vw,22px)!important}html body footer.pg-foot .pg-foot-chapters b:not(#x){font-size:clamp(12.5px,.96vw,14px)!important}} @media(min-width:1181px){html body footer.pg-foot:not(#x){column-gap:clamp(20px,2vw,36px)!important}html body footer.pg-foot .pg-foot-brand:not(#x){gap:clamp(12px,1.1vw,18px)}html body footer.pg-foot .pg-foot-chapters:not(#x){flex-wrap:nowrap!important;justify-content:flex-end}} @media(min-width:1181px){html body footer.pg-foot .pg-foot-brand:not(#x){--lg:clamp(16px,1.5vw,23px)}html body footer.pg-foot .pg-foot-brand img:not(#x){width:clamp(72px,4.9vw,90px)}} .pg-foot-legal br.lg-br{display:none}@media(min-width:1181px){.pg-foot-legal br.lg-br{display:inline}} html body footer.pg-foot .pg-foot-chapters:not(#x):not(#y){flex-wrap:wrap!important;justify-content:flex-end!important;row-gap:10px!important} html body footer.pg-foot .pg-foot-brand:not(#x){flex:0 0 auto!important} html body footer.pg-foot .pg-foot-chapters:not(#x):not(#y){column-gap:clamp(10px,.95vw,15px)!important} html body footer.pg-foot .pg-foot-chapters b:not(#x):not(#y){font-size:clamp(12.5px,.8vw,13px)!important} @media (min-width:901px){html body footer.pg-foot .pg-foot-nav:not(#x):not(#y){flex:1 1 0!important;min-width:0}html body footer.pg-foot .pg-foot-chapters:not(#x):not(#y){justify-content:flex-end!important;flex-wrap:nowrap!important;column-gap:clamp(12px,1.1vw,18px)!important;row-gap:12px!important}html body footer.pg-foot .pg-foot-chapters b:not(#x):not(#y){font-size:clamp(11.5px,.86vw,12.5px)!important;letter-spacing:-.01em!important}html body footer.pg-foot:not(#x){align-items:center!important}} html body .side .side-row.cur:not(#x),html body .side .side-row.cur:not(#x) b,html body .side .side-row.on[aria-current]:not(#x),html body .side .side-row.on[aria-current]:not(#x) b{color:#2143E9!important;-webkit-text-fill-color:#2143E9!important} html body .side button.side-row:not(#x){-webkit-appearance:none;appearance:none;background:none;font:inherit;text-align:left;width:100%} @media (min-width:901px) and (max-width:1239px){html body footer.pg-foot .pg-foot-nav:not(#x):not(#y){flex:0 0 100%!important}html body footer.pg-foot .pg-foot-chapters:not(#x):not(#y){justify-content:flex-start!important;flex-wrap:wrap!important}} @media (max-width:900px){html body #page-market .chp-hero .h1 .tw:not(#x):not(#y){margin-top:12px!important}} @media (max-width:900px){html body #page-market .h1 > .sub:not(#x):not(#y){margin-top:12px!important;display:block}html body #page-market .stamp:not(#x):not(#y){width:136px!important}html body #page-market .mor-go2 .lp-go-card:not(#x):not(#y){padding:6px 6px 6px 16px!important;gap:8px!important;font-size:14px!important}html body #page-market .mor-go2 .lp-go-card:not(#x):not(#y) b{font-size:14px!important}html body #page-market .mor-go2 .lp-go-card:not(#x):not(#y) i{width:24px!important;height:24px!important;font-size:12px!important}html body #page-market .mor-go2:not(#x):not(#y){gap:8px!important}html body #page-market .ai-stack:not(#x):not(#y){max-width:none!important;width:100%!important;grid-template-columns:1fr!important}} @media (max-width:900px){html body #page-market.vhero .chp-hero:not(#x):not(#y){height:460px!important;min-height:0!important}html body #page-market.vhero .chp-hero .h1 .tw:not(#x):not(#y){display:block!important;margin-top:16px!important}html body #page-market .ai-end:not(#x):not(#y){padding-top:72px!important;padding-bottom:72px!important}html body #page-market .ai-brk img:not(#x):not(#y){object-position:68% 40%!important}} @media (max-width:900px){html body #page-market .mor-go2 .lp-go-card:not(#x):not(#y){min-height:0!important;height:auto!important}html body footer.pg-foot .pg-foot-bot:not(#x):not(#y){padding-top:30px!important}html body footer.pg-foot .pg-foot-util:not(#x):not(#y){margin-bottom:24px!important}} @media (max-width:900px){html body #page-market.mf2:not(.lpm) .chp-hero .h1 .mk-name:not(#x):not(#y){font-size:40px!important}html body #page-market.mf2:not(.lpm) .chp-hero .h1 .tw:not(#x):not(#y){margin-top:18px!important}} @media (max-width:900px),(pointer:coarse){html body #page-market .stamp:not(#x):not(#y){filter:none!important}} html body .pg-foot-util button{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;font:500 12.5px/1.6 var(--sans);color:rgba(255,255,255,.75);white-space:nowrap;transition:color .22s}html body .pg-foot-util button:hover{color:#fff} html body #show-consent-btn:not(#x){display:none!important} html body #page-market#page-market .chp-body .case-band .cb-logos:not(#x) img[alt="Khipu"],html body #page-market#page-market .chp-body .case-band .cb-logos:not(#x) img[alt="Nequi"]{transform:translateY(16%)}