/* ══════════════════════════════════════════════════════════════════
   El cuerpo del capítulo pasa a fondo blanco.
   El hero (título, apertura, video y cifras) sigue sobre el azul:
   el corte se da justo donde arranca .chp-body.
   Todo acá está scopeado a #page-market .chp-body para ganarle
   por especificidad al skin oscuro, sin tocarlo.
   ══════════════════════════════════════════════════════════════════ */
#page-market .chp-body{
  --tx:#0A1240;                    /* navy: títulos y cifras       */
  --tx-70:rgba(10,18,64,.72);      /* texto corrido                */
  --tx-45:rgba(10,18,64,.46);      /* etiquetas, fuentes, ejes     */
  --ln:rgba(10,18,64,.13);         /* reglas principales           */
  --ln2:rgba(10,18,64,.09);        /* reglas internas              */
  --acc2:#1043FA;                  /* azul dLocal: acentos y datos */
  background:#fff;color:var(--tx);
  padding-top:clamp(12px,1.6vw,22px)}

/* ── navegación lateral ── */
#page-market .chp-body .secnav a{color:var(--tx-45)}
#page-market .chp-body .secnav a.on,
#page-market .chp-body .secnav a:hover{color:var(--tx)}
#page-market .chp-body .secnav a.on s{background:var(--acc2)}

/* ── secciones y texto ── */
#page-market .chp-body .sect::before{background:var(--ln)}
#page-market .chp-body .sect-head h2{color:var(--tx)}
#page-market .chp-body .sect-head>.mono,
#page-market .chp-body .mono{color:var(--tx-45)}
#page-market .chp-body .rt p{color:var(--tx-70)}
#page-market .chp-body .hl{color:var(--tx);font-weight:700}
#page-market .bn td:first-child{white-space:nowrap}
#page-market .hv-full .lede a,
#page-market .hv-full .lede .hl a{color:#fff!important;text-decoration-color:rgba(255,255,255,.55)!important}
#page-market .hv-full .lede a:hover,
#page-market .hv-full .lede .hl a:hover{color:rgba(255,255,255,.72)!important;text-decoration-color:rgba(255,255,255,.4)!important}
#page-market .chp-body a[href^="http"],
#page-market .chp-body .hl a,
#page-market .chp-body .brq footer b a{color:var(--tx)!important;text-decoration-color:rgba(10,18,64,.4)!important}
#page-market .chp-body a[href^="http"]:hover,
#page-market .chp-body .hl a:hover,
#page-market .chp-body .brq footer b a:hover{color:var(--acc2)!important;text-decoration-color:var(--acc2)!important}
#page-market .chp-body .src-note a{color:var(--tx-45)!important;text-decoration-color:rgba(10,18,64,.3)!important}
#page-market .chp-body .src-note a:hover{color:var(--tx)!important;text-decoration-color:rgba(10,18,64,.45)!important}
#page-market .chp-body .src-note{margin-top:0;padding-top:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-45)}

/* ── KPIs ── */
#page-market .chp-body .kpis{border-top-color:var(--ln)}
#page-market .chp-body .kpi{border-left-color:var(--ln2)}
#page-market .chp-body .kpi b{color:var(--acc2)}
#page-market .chp-body .kpi b i{color:var(--acc2)}
#page-market .chp-body .kpi small{color:var(--tx-45)}

/* ── gráficos ── */
#page-market .chp-body .chart-h{color:var(--tx);border-color:rgba(10,18,64,.22)}
#page-market .chp-body .chart-src{color:var(--tx-45)}
/* ── sources: un solo estilo en todo el capítulo ── */
#page-market .chp-body .chart-src,
#page-market .chp-body .src-note{margin-top:0;padding-top:22px;font-family:var(--mono);
  font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-45);line-height:1.5}

/* ── menos reglas: el capítulo respira ── */
#page-market .chp-body .chart-h{border-bottom:0;padding-bottom:0;margin-bottom:6px}
#page-market .chp-body .kpi{border-left:0}
#page-market .chp-body .kpis{gap:0 clamp(20px,3vw,48px);margin-bottom:clamp(30px,3.2vw,44px)}
#page-market .chp-body .kpi{padding-bottom:0}
#page-market .chp-body .kpi small{margin-top:10px}
#page-market .chp-body .chart-note{font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-45);margin-bottom:22px}

/* ── etiquetas dentro de la barra ── */
#page-market #mixChart .stack-bar i{position:relative;overflow:hidden}
#page-market #mixChart .stack-bar i b{position:absolute;left:clamp(16px,1.6vw,26px);
  top:clamp(16px,1.7vw,26px);display:flex;align-items:baseline;gap:clamp(7px,.8vw,12px);
  white-space:nowrap;pointer-events:none}
#page-market #mixChart .stack-bar i b em{font-style:normal;font-size:clamp(22px,3.2vw,50px);
  font-weight:500;letter-spacing:-.04em;line-height:1}
#page-market #mixChart .stack-bar i b s{text-decoration:none;font-family:var(--sans);
  font-size:clamp(13px,1.15vw,16px);font-weight:600;letter-spacing:-.01em;opacity:.88}

/* ── años: columna a la izquierda del gráfico ── */
/* el gráfico recupera el ancho del wrapper; la columna de años sale afuera */
#page-market #mixChart{--yrcol:96px;--yrgap:clamp(14px,1.5vw,22px)}
#page-market .mix-grid{display:grid;grid-template-columns:var(--yrcol) minmax(0,1fr);
  gap:var(--yrgap);align-items:start;margin-top:clamp(20px,2.4vw,32px);
  margin-left:calc(-1 * (var(--yrcol) + var(--yrgap)))}
#page-market .yd-cap{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-45);margin-bottom:14px}
#page-market .yd-side{position:relative;padding-left:20px;cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none;outline:0}
#page-market .yd-side::before{content:"";position:absolute;left:3px;top:9px;bottom:9px;width:2px;
  border-radius:2px;background:rgba(10,18,64,.12)}
#page-market .yd-fill{position:absolute;left:3px;top:9px;width:2px;height:0;border-radius:2px;
  background:var(--acc2);transition:height .38s var(--ease)}
#page-market .yd-dot{position:absolute;left:4px;top:9px;width:11px;height:11px;border-radius:50%;
  background:var(--acc2);transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px rgba(16,67,250,.15);transition:top .38s var(--ease),box-shadow .2s}
#page-market .yd-side button{display:block;width:100%;text-align:left;padding:11px 0;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--tx-45);background:none;
  transition:color .26s var(--ease)}
#page-market .yd-side button:hover{color:var(--tx)}
#page-market .yd-side button.on{color:var(--acc2)}
#page-market #mixChart .stack-bar{cursor:ew-resize;border-radius:14px;overflow:hidden}
@media(max-width:1180px){
  /* sin margen suficiente afuera, la columna vuelve adentro del wrapper */
  #page-market .mix-grid{margin-left:0}}
@media(max-width:820px){
  #page-market .mix-grid{grid-template-columns:1fr;gap:20px;margin-left:0}
  #page-market .yd-side{display:flex;gap:clamp(14px,3vw,28px);padding:0 0 0 0}
  #page-market .yd-side::before,#page-market .yd-fill,#page-market .yd-dot{display:none}
  #page-market .yd-side button{width:auto;padding:4px 0}}

/* ── pie del gráfico: fuente y alcance en una línea ── */
#page-market .chp-body .chart-foot{display:flex;flex-wrap:wrap;gap:4px 10px;padding-top:22px}
#page-market .chp-body .chart-foot .chart-src{padding-top:0}
#page-market .chp-body .chart-foot .proj::before{content:"\00b7";margin-right:10px}

#page-market .chp-body .cleg li{color:var(--tx-70)}
#page-market .chp-body .cleg li i{outline:1px solid rgba(10,18,64,.08);
  outline-offset:-1px}
#page-market .chp-body .linechart text{fill:var(--tx-45)}
#page-market .chp-body .linechart line{stroke:var(--ln)}
#page-market .chp-body .colchart .cc-a{background:var(--acc2)}
#page-market .chp-body .colchart .cc-a b{color:var(--acc2)}
#page-market .chp-body .colchart .cc-b{background:#D9E2F8}
#page-market .chp-body .colchart .cc-b b{color:var(--tx)}
#page-market .chp-body .colchart .cc-lab{color:var(--tx-45)}

/* ── tablas ── */
#page-market .chp-body .bn th{color:var(--tx-45);border-color:rgba(10,18,64,.26)}
#page-market .chp-body .bn td{color:var(--tx-70);border-color:var(--ln2)}
#page-market .chp-body .bn td:first-child{color:var(--tx)}

/* ── cita: vuelve al gris frío del diseño original, no al blanco ── */
#page-market .chp-body .brq{background:#EFF3F9;color:var(--tx)}
#page-market .chp-body .brq blockquote{color:var(--tx)}
#page-market .chp-body .brq .qm{color:var(--acc2)}
#page-market .chp-body .brq footer small{color:var(--tx-45)}

/* ── cierre de sección ── */
#page-market .chp-body .callout{border-top-color:rgba(10,18,64,.2)}
#page-market .chp-body .callout,
#page-market .chp-body .callout h4{color:var(--tx)}
#page-market .chp-body .callout>.mono{color:var(--acc2)}
@media(max-width:820px){}
@media(max-width:820px){}

/* ── callout: una sola afirmación, sin repetir las cifras ── */
#page-market .chp-body .callout{
  position:relative;border:0;border-radius:0;background:none;box-shadow:none;
  padding:clamp(4px,.6vw,8px) 0 clamp(4px,.6vw,8px) clamp(22px,2.6vw,38px);
  margin-top:clamp(30px,3.4vw,48px);margin-bottom:clamp(46px,5vw,70px)}
#page-market .chp-body .callout::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:var(--acc2)}
#page-market .chp-body .callout>.mono{display:block;color:var(--acc2);margin-bottom:14px}
#page-market .chp-body .callout h4{color:var(--tx);font-weight:500;
  font-size:clamp(23px,2.5vw,38px);letter-spacing:-.032em;line-height:1.2;
  max-width:19em;margin-bottom:0}

/* ── el quote es la banda separadora del capítulo: de lado a lado ── */
#page-market .chp-body .brq-band{position:relative;overflow:hidden;
  margin:clamp(22px,2.4vw,40px) 0 0;width:100%;max-width:none;border-radius:0;
  background:#0A1240;color:#fff;display:flex;align-items:center;
  min-height:clamp(360px,34vw,470px);
  padding:clamp(44px,4.6vw,68px) 0}
#page-market .chp-body .brq-band .brq-bg{position:absolute;inset:0;overflow:hidden}
#page-market .chp-body .brq-band .brq-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(84deg,rgba(10,18,64,.94) 0%,rgba(10,18,64,.86) 40%,rgba(10,18,64,.6) 100%)}
/* el interior arranca y termina donde lo hacen los gráficos */
#page-market .chp-body .brq-band .brq-in{position:relative;z-index:2;padding:0;
  margin-left:calc(var(--colx) - clamp(16px,5vw,110px));
  margin-right:clamp(28px,7vw,150px);max-width:min(74ch,none)}
/* la cita y la firma arrancan en el mismo borde que el resto del capítulo */
#page-market .chp-body .brq-band blockquote,
#page-market .chp-body .brq-band footer{margin-left:0}
#page-market .chp-body .brq-band .qm{display:block;
  font-family:var(--sans);font-size:clamp(104px,9.2vw,164px);
  line-height:.58;font-weight:700;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:2.2px #ADE2FF;
  margin:0 0 clamp(14px,1.6vw,26px) -.075em}
#page-market .chp-body .brq-band blockquote{color:#fff;font-size:clamp(18px,1.62vw,25px);
  font-weight:500;line-height:1.45;letter-spacing:-.014em;max-width:none}
#page-market .chp-body .brq-band footer{display:flex;align-items:center;gap:14px;
  margin:clamp(16px,1.8vw,26px) 0 0}
#page-market .chp-body .brq-band .ava{flex:0 0 auto;display:block;width:54px;height:54px;
  border-radius:50%;overflow:hidden;margin:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.28)}
#page-market .chp-body .brq-band .ava img{width:100%;height:100%;object-fit:cover;display:block}
#page-market .chp-body .brq-band .qwho{display:flex;flex-direction:column;gap:3px}
#page-market .chp-body .brq-band footer b{font-size:16.5px;font-weight:600;color:#fff}
#page-market .chp-body .brq-band footer b a{color:#fff!important;
  text-decoration-color:rgba(255,255,255,.5)!important}
#page-market .chp-body .brq-band footer b a:hover{color:#ADE2FF!important;
  text-decoration-color:rgba(173,226,255,.6)!important}
#page-market .chp-body .brq-band footer small{font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#ADE2FF}
@media(max-width:980px){
  #page-market .chp-body .brq-band{min-height:0}
  #page-market .chp-body .brq-band .brq-in{margin-left:var(--gut);margin-right:var(--gut);
    max-width:none}
  #page-market .chp-body .brq-band .brq-bg::after{
    background:linear-gradient(180deg,rgba(10,18,64,.7) 0%,rgba(10,18,64,.92) 100%)}}

#page-market .chp-body .stack-bar i b{color:var(--tx)}
@media(max-width:760px){
  #page-market .chp-body .kpi{border-top-color:var(--ln2)}}

/* ══ el azul se muda del contenedor de página al bloque del hero ══
   Así el degradado deja de ser el fondo de toda la tarjeta y pasa a ser
   una pieza propia, que puede cerrar con curva contra el cuerpo blanco. */
#page-market{background:#fff}
#page-market .hero-shell{
  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%)}

/* la tarjeta del capítulo terminaba en azul contra el fondo blanco de la
   página; ahora termina en blanco, así que necesita un filo propio */
#page-market{box-shadow:0 0 0 1px rgba(10,18,64,.09)}

/* ══ la sombra de la barra flotante era azul (rgba(13,0,149,.14)):
   sobre el cuerpo blanco teñía el papel. Pasa a neutra. ══ */
body.refnav-on .refnav{box-shadow:0 10px 34px rgba(10,10,10,.12),
  0 2px 6px rgba(10,10,10,.05)}
.refnav{box-shadow:0 10px 34px rgba(10,10,10,.12),0 2px 6px rgba(10,10,10,.05)}

/* la barra flotante ya es blanca: sobre el cuerpo blanco necesita borde */
body.refnav-on .refnav{border-color:rgba(11,13,22,.16)}