/* ══════════ header ══════════
   igual a la referencia: marca a la izquierda, Chapters a la derecha,
   sobre el azul y sin fijarse al scroll ══ */
.nav{position:static!important;height:auto!important;display:flex!important;
  align-items:center!important;justify-content:space-between;gap:20px;
  padding:clamp(22px,3vw,40px) clamp(20px,5vw,90px)!important;background:transparent}
.nav-logo{flex-direction:row!important;align-items:center;gap:14px;padding:0!important;
  background:transparent!important;color:#fff}
.nav-logo>span{display:inline-flex;align-items:center;gap:9px;font-size:0}
.nav-logo>span::before{content:"BY";font-size:10px;font-weight:700;letter-spacing:.2em;
  color:rgba(255,255,255,.45)}
.nav-logo>span img{height:clamp(17px,1.5vw,22px);width:auto;display:block}
.nav-r{display:flex;align-items:center}
.nav-r button{display:inline-flex;align-items:center;gap:14px;height:clamp(44px,3.6vw,54px);
  padding:0 clamp(20px,1.8vw,28px);border-radius:99px;border:1px solid rgba(255,255,255,.34);
  background:transparent;color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:background .24s var(--ease),color .24s var(--ease)}
.nav-r button:hover{background:#fff;color:#1B2CC4;border-color:#fff}
.nav-r button i{display:grid;gap:3.5px;font-style:normal;font-size:0}
.nav-r button i::before,.nav-r button i::after,.nav-r button i s{content:"";display:block;
  width:17px;height:1.8px;background:currentColor;border-radius:2px;text-decoration:none}

/* ══ sólo la página de Brasil: sin portada, sin capítulos ══
   el fondo lo sigue definiendo el propio report (azul, texto blanco) ══ */
.page{display:block}
/* un solo wrapper: header, hero y stats comparten el mismo margen lateral */
#page-market{--gut:clamp(20px,5vw,90px)}

#page-market .chp-hero{padding-top:0}
#page-market .chp-hero>.nav,#page-market .chp-hero-in{padding-left:var(--gut);padding-right:var(--gut)}
/* la columna de texto: más ancha y más separada del borde derecho */
#page-market{--colx:34vw}
#page-market .rt,
#page-market .chart,
#page-market .kpis,
#page-market .callout,
#page-market .bn{margin-right:clamp(28px,7vw,150px)}
/* el hero respira más */
#page-market .chp-hero-in{padding-top:clamp(18px,3vh,40px)}
#page-market .chp-hero h1{max-width:15em}

/* ══════════ líneas separadoras de lado a lado ══════════ */
#page-market .sect{position:relative;padding-top:2px}
#page-market .sect::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--hair)}
#page-market .sect-head{padding-top:clamp(34px,4.4vw,64px)}
/* la etiqueta mono queda al margen izquierdo, fuera de la columna de texto */
#page-market .sect-head{position:relative}
#page-market .sect-head>.mono{position:absolute;left:var(--gut);top:clamp(34px,4.4vw,64px);
  width:calc(var(--colx) - var(--gut) - 40px);margin:0}
@media(max-width:980px){#page-market .sect-head>.mono{position:static;width:auto;margin-bottom:12px}}

/* ══════════ un gráfico que se pasa del ancho de la columna ══════════ */
#page-market .chart.wide{margin-right:calc(50% - 50vw);padding-right:var(--gut)}
#page-market .chart.wide .dist-bar,#page-market .chart.wide .stack-bar{height:clamp(120px,20vh,220px)}
@media(max-width:900px){#page-market .chart.wide{margin-right:var(--gut)}}

/* ══════════ correcciones ══════════ */
/* el header vuelve al wrapper: el reset con !important le ganaba */
#page-market .nav{padding-left:var(--gut)!important;padding-right:var(--gut)!important}
#page-market b i,
#page-market .kpi i{font-style:normal}
/* sin kickers en las separaciones */
#page-market .sect-head>.mono{display:none}
/* gráficos: un poco más anchos que la columna de texto */
#page-market .chart{margin-left:calc(var(--colx) - clamp(16px,5vw,110px))}
#page-market .chart.wide{margin-left:calc(var(--colx) - clamp(16px,5vw,110px));
  margin-right:calc(50% - 50vw);padding-right:var(--gut)}
/* la foto de César, despegada del texto */
#page-market .brq footer{display:flex;align-items:center;gap:18px;
  margin-top:clamp(30px,4vw,56px);padding-top:clamp(20px,2.6vw,32px);
  border-top:1px solid rgba(10,10,10,.12)}
#page-market .brq .ava{flex:0 0 auto;margin-bottom:0;width:72px;height:72px}
#page-market .brq footer b{display:block}
#page-market .brq .qwho{display:flex;flex-direction:column;gap:3px}
#page-market .brq footer small{display:block;margin-top:2px;color:rgba(10,10,10,.55)}

/* ══════════ el bloque de apertura, como una sola pieza ══════════ */
/* la primera columna de las cifras usa el mismo ancho que la columna de texto,
   así el titular, los datos y la bajada caen sobre la misma retícula */
#page-market .chp-hero{padding-bottom:0}
#page-market .chp-hero-in{padding-bottom:clamp(24px,3.4vw,44px)}
@media(max-width:980px){
}

/* ══════════ apertura: bajada y texto conviven, las cifras cierran ══════════ */
#page-market .opening{display:grid;grid-template-columns:var(--colx) minmax(0,1fr);
  border-top:1px solid var(--hair)}
#page-market .op-r{padding:clamp(26px,3vw,46px) clamp(28px,7vw,150px) clamp(30px,4vw,56px)
  clamp(24px,3vw,44px);border-left:1px solid var(--hair)}
#page-market .op-r .lede{font-size:clamp(16px,1.45vw,21px);line-height:1.5;max-width:42em}
@media(max-width:980px){
  #page-market .opening{grid-template-columns:1fr}
  #page-market .op-r{border-left:0;border-top:1px solid var(--hair);padding-left:var(--gut);
    padding-right:var(--gut)}
}

/* ══════════ los KPIs siguen la misma lógica de reglas, sin tarjetas ══════════ */
#page-market .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid #fff;margin-left:var(--colx);margin-right:clamp(28px,7vw,150px)}
#page-market .kpi{background:none!important;border:0;border-left:1px solid var(--hair2);
  border-radius:0;backdrop-filter:none;max-width:none;padding:20px clamp(14px,1.6vw,24px) 26px}
#page-market .kpi:first-child{border-left:0;padding-left:0}
#page-market .kpi b{font-size:clamp(28px,2.8vw,42px);font-weight:500;letter-spacing:-.04em}
#page-market .kpi small{margin-top:12px;color:var(--fg-60)}
@media(max-width:760px){#page-market .kpis{grid-template-columns:1fr}
  #page-market .kpi{border-left:0;border-top:1px solid var(--hair2);padding-left:0}}

/* ══════════ marco, fondo y header del handbook ══════════ */
:root{--frame:clamp(8px,0.9vw,14px)}
html,body{background:#fff!important;background-image:none!important}
body{padding:var(--frame)}
#page-market{border-radius:clamp(18px,1.8vw,28px);overflow:clip;
  background:linear-gradient(180deg,rgba(13,0,149,.18),rgba(13,0,149,.38)),
    radial-gradient(120% 86% at 50% 0%,#33B6FF 0%,#3A57EA 50%,#2840DB 100%)}
#page-market .chp-hero{background:transparent}
/* header: marca a la izquierda, Contents a la derecha */
#page-market .nav{padding:clamp(24px,3vw,46px) clamp(20px,3vw,46px)!important;
  align-items:flex-start}
#page-market .nav-logo{flex-direction:row;align-items:center;gap:14px;
  font-size:clamp(20px,1.9vw,28px);font-weight:800;letter-spacing:-.045em;line-height:1}
#page-market .nav-logo>span{display:inline-flex;align-items:center;gap:9px;font-size:0}
#page-market .nav-logo>span::before{content:"BY";font-family:var(--sans);font-size:10px;
  font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.38)}
#page-market .nav-logo>span img{width:clamp(84px,5.8vw,104px);height:auto}
/* La marca de la barra son dos piezas con dos destinos: el logotipo de
   The Local Code vuelve al home del micrositio y el de dLocal sale al
   sitio de dLocal. El logotipo va vectorial —el archivo original, no
   texto armado a mano— y se recolorea por CSS porque el original viene
   en negro y acá va sobre azul. Alto en em para que siga escalando con
   el cuerpo que ya tenía la barra. */

#page-market .nav-r button{height:auto;padding:11px 20px;border-radius:99px;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#fff;
  backdrop-filter:blur(14px);font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
#page-market .nav-r button:hover{background:#fff;color:#2247F1;border-color:#fff}
#page-market .nav-r button i{display:grid;gap:3px;font-style:normal;font-size:0}
#page-market .nav-r button i::before,#page-market .nav-r button i::after,
#page-market .nav-r button i s{content:"";display:block;width:15px;height:1.5px;
  background:currentColor;border-radius:2px;text-decoration:none}
/* el margen lateral acompaña al marco */
#page-market{--gut:clamp(20px,4.4vw,74px)}

/* ══════════ video del hero, de lado a lado ══════════ */
#page-market .hero-video{position:relative;width:100%;height:clamp(240px,44vh,520px);
  overflow:hidden;background:#0D0095}
#page-market .hero-video::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,18,64,.32),rgba(11,18,64,.08) 40%,rgba(11,18,64,.34))}

/* ══════════ la navegación lateral vuelve, despegada de la línea ══════════ */
#page-market .secnav{top:calc(34vh + 26px);padding-top:clamp(18px,2.4vw,32px)}
#page-market .sect{padding-top:0}
#page-market .hero-video::after{background:
  linear-gradient(180deg,rgba(11,18,64,.42),rgba(11,18,64,.16) 42%,rgba(11,18,64,.5))}

/* ══════════ el bloque de cierre del caso, con la misma retícula ══════════ */
#page-market .callout{background:none;border:0;border-top:1px solid #fff;border-radius:0;
  padding:clamp(22px,2.6vw,34px) 0 clamp(26px,3vw,40px);max-width:none;
  margin-left:var(--colx);margin-right:clamp(28px,7vw,150px)}
#page-market .callout>.mono{display:block;margin-bottom:14px;color:var(--fg-60)}
#page-market .callout h4{font-size:clamp(20px,2vw,30px);font-weight:500;letter-spacing:-.03em;
  line-height:1.24;max-width:22em;margin-bottom:clamp(18px,2.2vw,28px)}
@media(max-width:820px){}

/* ══════════ barra flotante: aparece al subir, se va al bajar ══════════ */
.refnav{position:fixed;left:50%;top:calc(var(--frame) + 14px);z-index:190;
  width:min(1120px,calc(100vw - 2*var(--frame) - 40px));
  display:grid;grid-template-columns:minmax(180px,.8fr) minmax(300px,1.4fr) minmax(180px,.8fr);
  align-items:center;gap:8px;min-height:64px;padding:7px 10px;
  border:1px solid rgba(11,13,22,.12);border-radius:16px;background:rgba(255,255,255,.96);
  color:#0B0D16;box-shadow:0 12px 42px rgba(13,0,149,.14);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-16px);
  transition:opacity .28s ease,transform .38s var(--ease),visibility 0s linear .38s}
body.refnav-on .refnav{opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);transition:opacity .28s ease,transform .38s var(--ease),visibility 0s}
body.quote-view #page-market .secnav{opacity:0;pointer-events:none;transition:opacity .3s ease}
#page-market .secnav{transition:opacity .3s ease}
.refnav button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
.ref-jump{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 10px;border-radius:10px;
  text-align:left;transition:.2s}
.ref-jump.next{justify-content:flex-end;text-align:right}
.ref-jump:hover{background:#F2F2F2}
.ref-jump i{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;
  border:1px solid rgba(11,13,22,.15);border-radius:50%;font-style:normal;color:#2B46E2}
.ref-jump small{display:block;font:700 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(11,13,22,.38)}
.ref-jump strong{display:block;max-width:19ch;margin-top:2px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font:650 13px var(--sans);letter-spacing:-.02em}
.ref-path{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;
  padding:8px 14px;border-radius:10px;border:1px solid transparent}
.ref-path b{font:650 15.5px var(--sans);letter-spacing:-.02em;white-space:nowrap}
.ref-path em{font-style:normal;color:rgba(11,13,22,.28)}
.ref-path span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 12px var(--sans);letter-spacing:.02em;color:rgba(11,13,22,.52)}
@media(max-width:820px){.refnav{grid-template-columns:auto minmax(0,1fr) auto}
  .ref-jump strong{display:none}.ref-path span{display:none}}

.refnav{grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr)}
.ref-path{padding:8px 18px}

/* ══ banda blureada, detrás de la barra flotante ══ */
.refblur{position:fixed;top:0;left:var(--frame);right:var(--frame);
  height:calc(var(--frame) + 104px);z-index:180;
  pointer-events:none;opacity:0;transition:opacity .28s ease;
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  -webkit-mask-image:linear-gradient(180deg,#000 0 58%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 58%,transparent 100%)}
body.refnav-on .refblur{opacity:1}

/* ══ ruta del capítulo en la barra ══ */
.ref-path{gap:9px;white-space:nowrap}
.ref-path span{font:500 13px var(--sans);letter-spacing:-.01em;color:rgba(11,13,22,.5)}
.ref-path em{font-style:normal;font-size:13px;color:rgba(11,13,22,.28)}
.ref-path b{font:650 15.5px var(--sans);letter-spacing:-.02em}
.ref-path:hover span{color:rgba(11,13,22,.75)}
@media(max-width:1080px){.ref-path span,.ref-path em{display:none}}

/* ══════════ hero C · sólo tipografía y cifras, el video después ══════════ */
#page-market .chp-hero{padding-bottom:0}
#page-market .chp-hero-in{padding:clamp(30px,6vw,90px) var(--gut) clamp(24px,3.4vw,44px)}
#page-market .chp-hero h1{font-size:clamp(46px,9.2vw,148px);line-height:.91;letter-spacing:-.05em;
  max-width:none}
/* el video queda como banda ancha, después de la apertura */
#page-market .hero-video{height:clamp(220px,38vh,420px);margin:0}

/* ══ apertura en una sola columna: bajada y texto juntos ══ */
#page-market .opening{grid-template-columns:var(--colx) minmax(0,1fr)}
#page-market .opening::before{content:"";display:block}
#page-market .op-r{border-left:1px solid var(--hair)}
#page-market .op-deck{margin-bottom:clamp(18px,2.2vw,28px);
  font-size:clamp(19px,1.85vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.3;
  max-width:22em;color:#fff}
/* el video, un poco más alto */
#page-market .hero-video{height:clamp(340px,64vh,720px)}
@media(max-width:980px){#page-market .opening{grid-template-columns:1fr}
  #page-market .opening::before{display:none}}

/* ══════════ hero E · las cifras se apoyan sobre el video ══════════ */
#page-market .hero-video{height:clamp(420px,74vh,820px)}
#page-market .hero-video::after{background:
  linear-gradient(180deg,rgba(11,18,64,.22) 0%,rgba(11,18,64,.1) 30%,rgba(13,0,149,.82) 100%)}
#page-market .opening{border-top:1px solid var(--hair)}
@media(max-width:820px){
  #page-market .hero-video{height:clamp(280px,44vh,420px)}}
#page-market .opening{border-top:0}
/* ══ el degradado del video toma el azul del sitio ══ */
#page-market .hero-video::after{background:
  linear-gradient(180deg,rgba(43,70,226,.18) 0%,rgba(40,64,219,.10) 26%,
    rgba(40,64,219,.72) 68%,#2840DB 100%)}
/* ══ el fondo del hero abre el capítulo ═════════════════════════════
   Mismo gesto que la portada: el fondo se asienta desde un acercamiento
   corto, en una capa propia y con la misma curva, antes de que entre el
   contenido. Y un velo plano encima: el video venía compitiendo con el
   titular en blanco y el contraste quedaba duro. */
#page-market .hero-video::before{content:"";position:absolute;inset:0;
  z-index:1;pointer-events:none;background:rgba(8,14,48,.3)}
#page-market .hero-video.rv-rise{opacity:0;transform:none}
#page-market .hero-video.rv-rise.in{animation:heroBgIn 1.15s var(--rve) both}
@keyframes heroBgIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  #page-market .hero-video.rv-rise{opacity:1}
  #page-market .hero-video.rv-rise.in{animation:none}}

/* ══ vuelve la línea bajo el título; se va la que separa las cifras del contenido ══ */
#page-market .opening{border-top:1px solid var(--hair)!important}
#page-market .chp-body>.sect:first-of-type::before{display:none}
/* la navegación interna, más despegada del video */
#page-market .secnav{top:calc(34vh + 26px);padding-top:clamp(46px,7vw,104px)}

:root{--rve:cubic-bezier(.16,1,.3,1)}.rev{opacity:0}.rv-rise{opacity:0;transform:translateY(12px);transition:opacity .85s ease var(--b,0ms),transform .95s var(--rve) var(--b,0ms)}.rv-rise.in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.rev,.rv-rise{opacity:1!important;transform:none!important}}

/* la nav lateral se apaga al llegar al pie (ver 02-navigation.js) */
body.secnav-end #page-market .secnav{opacity:0;pointer-events:none}