/* ══════════════════════════════════════════════════════════════
   TABLET Y TELÉFONO
   El capítulo está armado sobre dos columnas: una banda lateral de
   ~34vw con la navegación de secciones y los rótulos, y el texto a la
   derecha. Abajo de 1100px esa banda no tiene ancho para existir, así
   que --colx pasa a valer lo mismo que el canal y todo el cuerpo
   arranca de un solo borde. Va al final de la hoja para ganarle a las
   capas anteriores de #page-market sin tener que tocarlas.
   ══════════════════════════════════════════════════════════════ */
/* Arriba de 900 la banda lateral todavía entra y la navegación de
   secciones sigue en pantalla: sólo se angosta. */
@media(min-width:901px) and (max-width:1180px){
  #page-market{--colx:30vw}
#page-market .rt,
#page-market .kpis,
#page-market .callout,
#page-market .bn{
    margin-right:clamp(20px,3vw,60px)}
}

@media(max-width:900px){
  #page-market{--colx:var(--gut)}
  #page-market .secnav{display:none}
#page-market .rt,
#page-market .kpis,
#page-market .bn,
#page-market .chart,
#page-market .chart.wide,
#page-market .chp-body .callout{
    margin-left:var(--gut);margin-right:var(--gut)}
#page-market .rt{max-width:min(100%,64ch)}
#page-market .chart,
#page-market .chart.wide,
#page-market .kpis,
#page-market .bn,
#page-market .chp-body .callout{max-width:none}
  #page-market .sect-head{padding-left:var(--gut);padding-right:var(--gut)}
  #page-market .sect-head>.mono{position:static;width:auto;margin-bottom:12px}
  #page-market .chp-body .callout{padding-left:clamp(18px,4vw,26px)}

  /* Los KPIs se separan con reglas que en escritorio son verticales, entre
     columnas. Apilados esas reglas quedan cruzando el bloque por el medio,
     debajo de cada dato. Se van: separa el aire. */
  #page-market .kpis,#page-market .chp-body .kpis{border-top:0}
  #page-market .kpi,#page-market .chp-body .kpi{
    border-top:0;border-left:0;border-bottom:0;
    padding-top:0;padding-bottom:clamp(24px,6.4vw,32px)}
  #page-market .kpi:last-child,#page-market .chp-body .kpi:last-child{
    padding-bottom:clamp(8px,2.4vw,14px)}
}

/* tablas anchas: se desplazan solas en vez de romper la caja */
@media(max-width:1100px){
#page-market .bn{overflow-x:auto;-webkit-overflow-scrolling:touch}
#page-market .bn table{min-width:520px}
}

/* ── barra flotante en pantallas angostas ──────────────────────── */
/* Con cuatro celdas —menú, anterior, ruta, siguiente— no entra nada:
   quedan los dos saltos como botones circulares y el nombre del
   mercado en el medio. */
@media(max-width:820px){
  .refnav,body.refnav-on .refnav{
    grid-template-columns:auto auto minmax(0,1fr) auto;
    gap:4px;min-height:54px;padding:6px 8px;border-radius:14px}
  .ref-lead{gap:8px;padding-right:8px}
  .ref-lc{display:none}
  .ref-lead::after{display:none}
  .ref-jump{padding:4px}
  .ref-jump small,.ref-jump strong{display:none}
  .ref-path{padding:6px 6px;justify-content:center}
  .ref-path span,.ref-path em{display:none}
  .ref-path b{font-size:14.5px}
}

/* ── vertical angosto: el hero y el pie se apilan ──────────────── */
@media(max-width:760px){
  :root{--frame:clamp(6px,1.6vw,10px)}
  #page-market{--gut:clamp(18px,5.4vw,30px)}
  #page-market .chp-hero h1{font-size:clamp(40px,12.5vw,68px);line-height:.92}
  #page-market .hv-full .chp-hero-in{padding-top:clamp(96px,26vw,150px)}
  #page-market .chp-body .callout h4{max-width:none}
  #page-market .cn-card{padding-left:0;padding-right:0}
  #page-market .cn-next{text-align:left}
  #page-market .cn-next .cn-dir{flex-direction:row}
  #page-market .cn-card+.cn-card{border-left:0;border-top:1px solid var(--ln2)}
  .pg-foot{align-items:flex-start;gap:26px}
  .pg-foot-chapters{justify-content:flex-start;gap:12px 20px}
}

/* ── barra flotante en teléfono: menú, marca y ruta ────────────── */
/* Los saltos entre mercados ya viven en el pie del capítulo; acá lo que
   hace falta es saber dónde se está parado. La ruta se recorta con
   puntos suspensivos cuando no entra. */
@media(max-width:820px){
  .refnav,body.refnav-on .refnav{
    grid-template-columns:auto minmax(0,1fr);
    gap:4px;min-height:54px;padding:6px 10px;border-radius:14px}
  .ref-lead{gap:6px;padding-right:8px}
  /* en el ancho del teléfono entra una marca sola: queda la de la
     publicación, que además es la que vuelve al home */
  .ref-lc{display:flex}
  .ref-lc .lc-mark{height:30px}
  .ref-jump{display:none}
  /* La ruta deja de ser una fila flex y vuelve a ser un solo renglón de
     texto: así los puntos suspensivos son del bloque entero y no uno por
     tramo, que era lo que dejaba "04. … › L… › Brazil". */
  .refnav .ref-path{display:block;text-align:left;
    padding:6px 2px;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .refnav .ref-path span,.refnav .ref-path em,.refnav .ref-path b{
    display:inline;min-width:0;overflow:visible;text-overflow:clip}
  .refnav .ref-path span{font-size:13px}
  .refnav .ref-path em{font-size:13px;margin:0 5px}
  .refnav .ref-path b{font-size:14px}
}

/* ── barra apilada del mix: la etiqueta se apila y se recorta sola ── */
/* En escritorio el porcentaje y el nombre van en una línea; en teléfono
   los tramos angostos no dan ese ancho y los rótulos se pisaban. */
@media(max-width:900px){
  #page-market #mixChart .stack-bar i{container-type:inline-size}
  #page-market #mixChart .stack-bar i b{
    flex-direction:column;align-items:flex-start;gap:2px;
    left:clamp(10px,3vw,18px);top:clamp(10px,3vw,18px)}
  #page-market #mixChart .stack-bar i b em{font-size:clamp(17px,5vw,26px)}
  #page-market #mixChart .stack-bar i b s{font-size:11px}
  @container (max-width:104px){
    #page-market #mixChart .stack-bar i b s{display:none}
  }
  @container (max-width:54px){
    #page-market #mixChart .stack-bar i b{display:none}
  }
}

/* ── teléfono: hero más compacto y pie sólo con la marca ───────── */
@media(max-width:760px){
  /* el endoso de dLocal crece sin arrastrar al lockup: sube el
     multiplicador, no la escala del bloque */
  #page-market .nav-logo>span img{width:calc(var(--lg) * 3.9)}
  #page-market .hv-full .chp-hero-in{padding-top:clamp(62px,15vw,96px)}
  /* el índice de capítulos ya está en el panel de contenidos */
  .pg-foot{justify-content:center;align-items:center;text-align:center}
  .pg-foot-nav{display:none}
  .pg-foot-brand{justify-content:center}
}