/* ══════════════════════════════════════════════════════════════
   HEADER — marca apilada + pastilla Contents blanca (ref. adjunta)
   ══════════════════════════════════════════════════════════════ */
/* mismo margen lateral que el contenido del hero (--gut), para que la marca
   arranque en el mismo eje que el breadcrumb y el titular */
#page-market .nav{
  padding:clamp(18px,1.7vw,26px) var(--gut)!important;
  align-items:flex-start}

/* ── marca: "The Local Code" arriba, "BY d·local" abajo ── */
/* mismo armado que en la barra de capítulos, en claro: el nombre apilado
   en tres renglones y el endoso apoyado en el último */
#page-market .nav-logo{
  --lg:clamp(18px,1.8vw,26px);
  flex-direction:row!important;align-items:center!important;
  justify-content:flex-start;gap:calc(var(--lg)*.6);padding:0!important;
  color:#fff;text-decoration:none}
#page-market .nav-logo>span{
  display:inline-flex;align-items:center;gap:calc(var(--lg)*.26);
  font-size:0;line-height:0}
/* el "BY" baja un pelo: el logo es casi toda minúscula y su masa vive en el
   tercio inferior, así que centrar cajas puras lo deja alto */
#page-market .nav-logo>span::before{
  content:"BY";font-family:var(--sans);font-size:calc(var(--lg)*.36);
  font-weight:700;letter-spacing:.2em;line-height:1;margin-right:-.2em;
  position:relative;top:calc(var(--lg)*.045);
  color:rgba(255,255,255,.5)}
#page-market .nav-logo>span img{
  width:calc(var(--lg)*2.9);height:auto;display:block}

/* ── las dos marcas de la barra, cada una a su destino ──
   The Local Code vuelve al home del micrositio; d·local sale al sitio de
   dLocal. El logotipo va vectorial —el archivo original— y se recolorea
   por CSS, porque viene en negro y acá va sobre azul. El alto se mide
   contra --lg, la misma unidad que usan el endoso y el "BY": 2,6 es el
   alto de mancha que tenían los tres renglones a line-height .9 */
#page-market .nav-lc{display:block;flex:0 0 auto}
#page-market .nav-lc .lc-mark{display:block;height:calc(var(--lg)*2.6);width:auto}
#page-market .nav-lc .lc-ink{fill:#fff}
#page-market .nav-lc .lc-alt{fill:#ADE2FF}
#page-market .nav-lc .lc-ink,#page-market .nav-lc .lc-alt{transition:fill .24s var(--ease)}
#page-market .nav-lc:hover .lc-alt{fill:#fff}
#page-market .nav-dl{display:block;transition:opacity .24s var(--ease)}
#page-market .nav-dl:hover{opacity:.68}

/* ── pastilla Contents: fondo blanco, tipografía y hamburguesa en azul ── */
#page-market .nav-r{padding:0;align-items:flex-start;gap:0}
#page-market .nav-r button{
  display:inline-flex;align-items:center;gap:18px;
  height:auto;padding:15px 22px 15px 28px;border:0;border-radius:99px;
  background:#fff;color:#0A0A0A;backdrop-filter:none;
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;line-height:1;
  box-shadow:0 2px 16px rgba(8,20,90,.12);
  transition:background .25s var(--ease),color .25s var(--ease),
             box-shadow .25s var(--ease)}
#page-market .nav-r button:hover{
  background:#0A0A0A;color:#fff;border:0;
  box-shadow:0 4px 22px rgba(8,20,90,.2)}
#page-market .nav-r button i{
  display:grid;gap:4px;font-style:normal;font-size:0;transition:none}
#page-market .nav-r button:hover i{transform:none}
#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:18px;height:2px;
  background:currentColor;border-radius:2px;text-decoration:none}

@media(max-width:640px){
  #page-market .nav-logo{--lg:18px}
  #page-market .nav-r button{gap:12px;padding:11px 16px 11px 18px;font-size:10px}
}

/* ══════════════════════════════════════════════════════════════
   PANEL DE CONTENIDOS — entra por la derecha y corre la página
   ══════════════════════════════════════════════════════════════ */
:root{--side-w:min(420px,84vw)}

body.side-open #page-market .nav-r button{opacity:0;pointer-events:none}
body.side-open .ref-burger{opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
#page-market .nav-r button{transition:background .25s var(--ease),
  color .25s var(--ease),box-shadow .25s var(--ease),opacity .3s var(--ease)}

.side{position:fixed;top:var(--frame);right:var(--frame);bottom:var(--frame);
  z-index:200;width:var(--side-w);display:flex;flex-direction:column;
  border-radius:clamp(16px,1.6vw,24px);background:#fff;color:#0A1240;
  padding:clamp(24px,2.6vw,38px) clamp(22px,2.4vw,34px);
  box-shadow:-30px 0 80px rgba(8,16,64,.3);
  transform:translateX(calc(100% + var(--frame)));
  visibility:hidden;
  transition:transform .5s var(--ease),visibility 0s linear .5s}
.side.on{transform:none;visibility:visible;
  transition:transform .5s var(--ease),visibility 0s}

.side-h{display:flex;align-items:center;justify-content:flex-end;gap:20px;
  margin-bottom:clamp(20px,2.4vw,32px)}
.side-h button{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(10,18,64,.62);transition:color .22s var(--ease)}
.side-h button:hover{color:#2B46E2}
.side-h button i{font-style:normal;font-size:14px;line-height:1}

.side-list{list-style:none;overflow-y:auto;flex:1;min-height:0;
  padding-bottom:clamp(10px,1.4vw,18px);
  scrollbar-width:none;-ms-overflow-style:none;
  transition:-webkit-mask-image .3s ease,mask-image .3s ease}
.side-list::-webkit-scrollbar{width:0;height:0;display:none}
.side-list li:last-child>.side-row{border-bottom:0}
/* mientras queda contenido abajo, la última fila se desvanece en vez de cortarse */
.side-list.more{
  -webkit-mask-image:linear-gradient(180deg,#000 0 calc(100% - 46px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 calc(100% - 46px),transparent 100%)}

/* fila de capítulo */
.side-row{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 24px;
  gap:12px;align-items:baseline;width:100%;
  padding:clamp(11px,1.2vw,14px) 0 clamp(11px,1.2vw,14px) 14px;
  border-bottom:1px solid rgba(10,18,64,.1);
  transition:padding-left .26s var(--ease)}
.side-row::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:3px;
  border-radius:2px;background:#2B46E2;opacity:0;transition:opacity .26s var(--ease)}
.side-row em{font-style:normal;font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.1em;color:rgba(10,18,64,.4)}
.side-row b{font-family:var(--sans);font-size:clamp(16px,1.4vw,20px);font-weight:500;
  letter-spacing:-.03em;color:rgba(10,18,64,.82);transition:color .22s var(--ease)}
.side-row s{align-self:center;justify-self:end;width:9px;height:9px;margin-right:6px;
  border-right:1.6px solid rgba(10,18,64,.35);border-bottom:1.6px solid rgba(10,18,64,.35);
  text-decoration:none;transform:rotate(45deg);transform-origin:60% 60%;
  transition:transform .3s var(--ease),border-color .22s var(--ease)}
.side-row:hover{padding-left:20px}
.side-row:hover b{color:#0A1240}
.side-row:hover s{border-color:#2B46E2}
.side-row[aria-expanded="true"] s{transform:rotate(-135deg)}

/* ramas anidadas */
.side-sub{overflow:hidden;max-height:0;transition:max-height .42s var(--ease)}
.side-sub.open{max-height:700px}
/* nivel 2 — regiones */
.side-sub li>.side-row{grid-template-columns:38px minmax(0,1fr) 24px;gap:10px;
  padding-top:12px;padding-bottom:12px;padding-left:26px;
  border-bottom:1px solid rgba(10,18,64,.07)}
.side-sub li>.side-row:hover{padding-left:32px}
.side-sub li>.side-row em{font-size:10px;letter-spacing:.06em;color:rgba(10,18,64,.36)}
.side-sub .side-sub li>.side-row em{font-size:9.5px;color:rgba(10,18,64,.32)}
.side-sub li>.side-row b{font-size:17px;font-weight:500;color:rgba(10,18,64,.7)}
/* nivel 3 — países */
.side-sub .side-sub li>.side-row{padding-left:44px;padding-top:11px;padding-bottom:11px;
  grid-template-columns:46px minmax(0,1fr);gap:10px}
.side-sub .side-sub li>.side-row:hover{padding-left:50px}
.side-sub .side-sub li>.side-row b{font-size:16px;color:rgba(10,18,64,.64)}
.side-sub .side-row.cur b{color:#2B46E2;font-weight:700}
.side-sub .side-row.cur::before{opacity:1}

.side-scrim{position:fixed;inset:0;z-index:195;background:rgba(8,16,64,.42);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s}
body.side-open .side-scrim{opacity:1;visibility:visible;transition-delay:0s}

/* ══════════════════════════════════════════════════════════════
   HERO — breadcrumb sobre el titular
   ══════════════════════════════════════════════════════════════ */
#page-market .hero-crumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-bottom:clamp(18px,2.4vw,30px);
  font-family:var(--sans);font-size:clamp(10px,.82vw,12px);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;line-height:1}
#page-market .hero-crumb a{
  color:rgba(255,255,255,.55);text-decoration:none;
  transition:color .22s var(--ease)}
#page-market .hero-crumb a:hover{color:#fff}
#page-market .hero-crumb em{
  font-style:normal;font-size:1.15em;font-weight:400;letter-spacing:0;
  color:rgba(255,255,255,.3)}
#page-market .hero-crumb a.cur{color:#ADE2FF}
#page-market .hero-crumb a.cur:hover{color:#fff}
@media(max-width:640px){
  #page-market .hero-crumb{gap:8px;letter-spacing:.16em}
}

/* bandas de separación a todo el ancho — reutilizan el video del hero, desenfocado */
#page-market .brk{position:relative;z-index:6;overflow:hidden;
  width:100vw;margin:0 0 0 calc(50% - 50vw);height:clamp(420px,62vh,760px);
  background:#2840DB}
/* cuando la banda cierra una sección necesita despegarse del texto que
   la precede; entre secciones no, porque ahí el aire lo pone la sección */
#page-market .sect>.brk{margin-top:clamp(56px,6vw,104px)}
#page-market .brk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(40,64,219,.3),rgba(16,26,71,.42))}
@media(max-width:820px){
  #page-market .brk{height:clamp(300px,46vh,420px)}
}
/* ══ header: pastilla blanca, centrada y curva ══ */
/* la pastilla Contents va sobre el video: el contraste ya la despega */
#page-market .nav-r button,
#page-market .nav-r button:hover{box-shadow:none}

/* Sin sombra. El filo usa el mismo recurso que ya tenía la página para
   cerrarse contra el blanco — #page-market lleva 0 0 0 1px rgba(10,18,64,.09) —
   y el mismo valor que --ln2, la regla interna del cuerpo. Aro navy al 9%,
   no gris al 17%: cierra la forma sin leerse como contorno dibujado. */
.refnav,body.refnav-on .refnav{
  left:50%;top:calc(var(--frame) + 14px);
  width:min(1120px,calc(100vw - 2*var(--frame) - 40px));
  padding:7px 10px;border-radius:16px;
  background:#fff;color:#0B0D16;border:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 0 0 1px rgba(10,18,64,.09)}
.refnav{transform:translate(-50%,-16px)}
body.refnav-on .refnav{transform:translate(-50%,0)}

/* ══════════════════════════════════════════════════════════════
   NAVEGACIÓN DE CAPÍTULOS — menú + marca a la izquierda
   ══════════════════════════════════════════════════════════════ */
.refnav,body.refnav-on .refnav{width:var(--wrapw)}
:root{--wrapw:min(1240px,calc(100vw - 2*var(--frame) - 40px))}
/* margen lateral que deja el bloque exactamente del ancho de la barra,
   centrado, en cualquier viewport */
#page-market{--wrapg:calc((100% - var(--wrapw))/2)}
.refnav{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)}

.ref-lead{position:relative;display:flex;align-items:center;gap:12px;
  padding:4px 20px 4px 4px;margin-right:4px}
/* la divisoria no llega a los bordes de la barra: se recorta al 62 % */
.ref-lead::after{content:"";position:absolute;right:0;top:19%;bottom:19%;
  width:1px;background:rgba(11,13,22,.14)}

/* ── el mismo ícono que abre el panel desde el hero ── */
.ref-burger{display:grid;place-items:center;flex:0 0 auto;
  width:42px;height:42px;border-radius:10px;
  color:#0A0A0A;background:transparent;cursor:pointer}
.ref-burger i{display:grid;gap:4px;font-style:normal;font-size:0}
.ref-burger i::before,.ref-burger i::after,.ref-burger i s{
  content:"";display:block;width:18px;height:2px;
  background:currentColor;border-radius:2px;text-decoration:none}

/* ── la marca, con el mismo armado que en el overview: el nombre ocupa
      todo el primer renglón y abajo "by" y el logo comparten línea base,
      con el logo tirado 3 px a la izquierda para cerrar el espacio que
      deja el letter-spacing del "by" ── */
/* ── en la barra flotante va sólo el logotipo de The Local Code, que
      vuelve al home del micrositio. Con los colores del archivo original
      —tinta navy y el azul dLocal en "local"— porque la barra es blanca ── */
.ref-lc{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.ref-lc .lc-mark{display:block;height:38px;width:auto;
  transition:opacity .22s var(--ease)}
.ref-lc .lc-ink{fill:#0A1240}
.ref-lc .lc-alt{fill:#1043FA}
.ref-lc:hover .lc-mark{opacity:.72}
@media(max-width:760px){}