.ref-dl{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;color:#0A1240}
.ref-dl .dl-mark{display:block;height:16px;width:auto;fill:currentColor;transition:opacity .22s var(--ease)}
.ref-dl:hover .dl-mark{opacity:.68}
@media(max-width:820px){.ref-dl{display:none}}

/* ══ hero con foto fija en lugar de video ══ */
#page-market .hero-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#page-market .brk img,#page-market .brq-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#page-market .brk img{filter:blur(16px) saturate(1.18);transform:scale(1.14)}
#page-market .chp-body .brq-band .brq-bg img{transform:scale(1.04)}

/* ══ métodos de pago: bajo el hero, rótulo chico arriba, fichas con borde centradas;
      si no entran en una fila se vuelven carrusel ══ */
#page-market .pmb.pmb-top{position:relative;z-index:2;background:#fff;color:#0A1240;
  padding:clamp(40px,4.2vw,62px) var(--gut) clamp(22px,2.4vw,34px);text-align:center}
#page-market .pmb.pmb-top .pm-cap{margin:0 0 clamp(14px,1.5vw,20px);font:600 10.5px var(--sans);
  letter-spacing:.18em;text-transform:uppercase;color:rgba(10,18,64,.46)}
#page-market .pm-car{position:relative;margin:0 auto;max-width:1240px}
#page-market .pm-vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
#page-market .pm-vp::-webkit-scrollbar{display:none}
#page-market .pmb .idx{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:nowrap;justify-content:center;
  gap:clamp(8px,.9vw,12px);width:max-content;min-width:100%}
#page-market .pmb .idx li{flex:0 0 clamp(118px,9.6vw,146px);scroll-snap-align:start;display:flex;align-items:center;
  justify-content:center;background:#fff;border:1px solid rgba(10,18,64,.13);border-radius:12px;overflow:hidden;
  height:clamp(62px,5.2vw,76px);padding:0 12px;transition:border-color .2s var(--ease)}
#page-market .pmb .idx li:hover{border-color:rgba(10,18,64,.3)}
#page-market .pmb .lg{display:flex;align-items:center;justify-content:center;padding:0;min-height:0;width:100%}
#page-market .pmb .lg img{display:block;width:auto;max-width:100%;height:var(--h,26px)}
#page-market .pm-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(10,18,64,.16);background:#fff;color:#0A1240;
  font:500 16px var(--sans);cursor:pointer;place-items:center;transition:opacity .2s,border-color .2s}
#page-market .pm-nav:hover{border-color:rgba(10,18,64,.4)}
#page-market .pm-nav[disabled]{opacity:.3;cursor:default}
#page-market .pm-nav.prev{left:0}#page-market .pm-nav.next{right:0}
@media(max-width:640px){}
#page-market .gchart svg:hover .pt:not(:hover) rect{opacity:.45}
#page-market .hbars:hover .hb i:not(:hover){opacity:.5}
@media(max-width:640px){}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE REVISIÓN — 18/09
   1) cita: tarjeta azul, del ancho de los gráficos, foto con la forma
      de la coma de marca
   2) "Proof in the numbers": las cifras dejan de ir destacadas
   3) métodos de pago: tres columnas angostas, alineadas al contenido
   4) barra de navegación: d·local a la izquierda, The Local Code y el
      breadcrumb juntos en el centro
   5) corte de imagen antes de "New features"
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · la cita deja de ser una banda a sangre ──────────────────────
   Antes: foto de portada a todo lo ancho con un velo azul encima; el
   texto peleaba contra la imagen. Ahora es una tarjeta del mismo azul
   que ya usan los datos (--acc2), con el mismo ancho que los gráficos
   del capítulo, y la foto recortada con la coma de la marca. */
#page-market .chp-body .brq-band{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,14.5vw,208px);
  align-items:start;gap:clamp(24px,2.6vw,44px);
  width:auto;max-width:none;min-height:0;
  margin:clamp(6px,.8vw,14px) clamp(20px,1.9vw,38px) clamp(48px,5vw,74px)
         calc(var(--colx) - clamp(16px,5.6vw,126px));
  padding:clamp(28px,2.9vw,46px);
  background:var(--acc2);border-radius:clamp(18px,1.9vw,26px);
  overflow:hidden;color:#fff}

/* la foto: columna derecha, recortada con la coma de marca. La máscara
   lleva la geometría exacta del logotipo (un cuadrado arriba y la cola
   que baja curvando a la izquierda) y la proporción se fija con
   aspect-ratio para que no se deforme en ningún ancho. */
#page-market .chp-body .brq-band .brq-bg{
  position:relative;inset:auto;grid-column:2;grid-row:1;align-self:start;
  /* el tope de la foto coincide con el primer renglón de la cita: se
     descuenta el alto de la comilla (0.6em de su cuerpo) y su margen */
  margin-top:calc(clamp(54px,4.6vw,76px)*.6 + clamp(12px,1.3vw,20px));
  width:100%;aspect-ratio:171/308;height:auto;border-radius:0;overflow:hidden;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20171%20308'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20L170.5,0%20L170.5,222.88%20A125.81,83.57%200%200%201%2031,305.94%20L31,231.57%20L45.14,231.57%20A53.72,53.72%200%200%200%2098.36,170.5%20L0,170.5%20Z'%20fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20171%20308'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20L170.5,0%20L170.5,222.88%20A125.81,83.57%200%200%201%2031,305.94%20L31,231.57%20L45.14,231.57%20A53.72,53.72%200%200%200%2098.36,170.5%20L0,170.5%20Z'%20fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#page-market .chp-body .brq-band .brq-bg::after{display:none}
#page-market .chp-body .brq-band .brq-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}

/* el texto vuelve a empezar en el borde de la tarjeta */
#page-market .chp-body .brq-band .brq-in{
  grid-column:1;grid-row:1;margin:0;padding:0;max-width:none}
#page-market .chp-body .brq-band .qm{
  font-size:clamp(54px,4.6vw,76px);line-height:.6;
  -webkit-text-stroke:0;color:#ADE2FF;
  margin:0 0 clamp(12px,1.3vw,20px) -.04em}
#page-market .chp-body .brq-band blockquote{
  color:#fff;font-size:clamp(17px,1.45vw,23px);line-height:1.5;
  font-weight:500;letter-spacing:-.01em;max-width:48ch}
#page-market .chp-body .brq-band footer{
  margin-top:clamp(20px,2.2vw,32px)}
#page-market .chp-body .brq-band .ava{
  width:clamp(44px,3.4vw,50px);height:clamp(44px,3.4vw,50px);
  box-shadow:0 0 0 1px rgba(255,255,255,.35)}
#page-market .chp-body .brq-band footer small{color:#ADE2FF}

@media(max-width:900px){
  #page-market .chp-body .brq-band{
    grid-template-columns:1fr;justify-items:start;
    margin-left:var(--gut);margin-right:var(--gut)}
  #page-market .chp-body .brq-band .brq-bg{
    grid-column:1;grid-row:1;width:clamp(120px,36vw,170px);margin-top:0}
  #page-market .chp-body .brq-band .brq-in{grid-column:1;grid-row:2}
  #page-market .chp-body .brq-band blockquote{max-width:none}
}

/* ── 2 · "Proof in the numbers": las cifras no van destacadas ──────── */
/* (el bloque de cifras se quitó del HTML: el gráfico ya las muestra) */

/* ── 3 · métodos de pago: tres columnas angostas al inicio de la
      columna de contenido, con el rótulo en estilo de titular ─────── */
/* la sección vive fuera de .chp-body, así que no hereda sus tokens
   claros: se declaran acá para poder usarlos igual que en el capítulo */
#page-market .pmb.pmb-top{
  --tx:#0A1240;--tx-45:rgba(10,18,64,.46);--ln:rgba(10,18,64,.13);
  --pmh:clamp(22px,2.1vw,27px);   /* alto óptico base de los logos */
  border-bottom:1px solid rgba(10,18,64,.13);
  text-align:left;
  padding:clamp(72px,7.6vw,116px) clamp(28px,7vw,150px) clamp(76px,8.4vw,128px) var(--colx)}
#page-market .pmb.pmb-top .pm-cap{
  font:600 clamp(28px,2.8vw,42px)/1.1 var(--sans);
  letter-spacing:-.028em;text-transform:none;color:var(--tx);
  max-width:18em;margin:0 0 clamp(14px,1.4vw,20px)}
/* bajada breve, con el mismo tono que el texto corrido del capítulo */
#page-market .pmb.pmb-top .pm-lede{
  max-width:46ch;margin:0 0 clamp(30px,3.2vw,46px);
  font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:rgba(10,18,64,.72)}
#page-market .pmb.pmb-top .pm-car{margin:0;max-width:none;padding:0}
#page-market .pmb.pmb-top .pm-vp{overflow:visible;padding:0;
  -webkit-mask-image:none;mask-image:none}
#page-market .pmb.pmb-top .pm-nav{display:none!important}
/* fichas bajas y anchas, dos por fila: el logo a la izquierda y el tipo
   —APM o tarjeta local— alineado a la derecha. Sin el nombre del método,
   que el logo ya lo dice. */
#page-market .pmb.pmb-top .idx{
  display:grid;grid-template-columns:repeat(3,minmax(0,clamp(170px,17vw,240px)));
  justify-content:start;
  gap:clamp(8px,.9vw,12px);width:auto;min-width:0;margin:0}
#page-market .pmb.pmb-top .idx li{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:clamp(10px,1.2vw,16px);width:auto;height:auto;
  background:#fff;border:1px solid var(--ln);border-radius:14px;
  padding:clamp(15px,1.6vw,20px) clamp(14px,1.5vw,19px);
  transition:border-color .2s var(--ease)}
#page-market .pmb.pmb-top .idx li:hover{border-color:rgba(10,18,64,.28)}
#page-market .pmb.pmb-top .lg{display:flex;align-items:center;justify-content:flex-start;
  width:auto;min-height:clamp(26px,2.6vw,34px)}
/* los logos no se miden por su alto de archivo sino por su peso visual:
   cada uno lleva su propio coeficiente contra --pmh para que la mancha
   que dejan sea pareja (Pix venía mucho más grande que el resto) */
#page-market .pmb.pmb-top .lg img{height:var(--pmh);max-width:100%;width:auto}
#page-market .pmb.pmb-top .idx li:nth-child(1) .lg img{height:calc(var(--pmh)*1.10)}
#page-market .pmb.pmb-top .idx li:nth-child(2) .lg img{height:calc(var(--pmh)*1.05)}
#page-market .pmb.pmb-top .idx li:nth-child(3) .lg img{height:calc(var(--pmh)*.98)}
#page-market .pmb.pmb-top .idx li:nth-child(4) .lg img{height:calc(var(--pmh)*1.09)}
#page-market .pmb.pmb-top .idx li:nth-child(5) .lg img{height:calc(var(--pmh)*1.02)}
#page-market .pmb.pmb-top .idx li:nth-child(6) .lg img{height:calc(var(--pmh)*.97)}
#page-market .pm-type{flex:0 0 auto;text-align:right;
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-45)}
@media(max-width:900px){
  #page-market .pmb.pmb-top{padding-left:var(--gut);padding-right:var(--gut)}
}
@media(max-width:760px){
  #page-market .pmb.pmb-top .idx{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  #page-market .pmb.pmb-top .idx{grid-template-columns:1fr}
}

/* ── 4 · barra de navegación superior ────────────────────────────────
   d·local queda solo a la izquierda, junto al menú; The Local Code pasa
   al centro con el breadcrumb a su lado. El "by" se va: separados los
   dos logos, el endoso no se lee. */
.refnav{grid-template-columns:auto minmax(0,1fr) auto auto minmax(0,1fr)}
.refnav .ref-lead{gap:10px}
.refnav .ref-dl .dl-mark{height:18px}
/* el filete no llega a los bordes de la barra (se recorta al 58 %) y el
   logo queda pegado al breadcrumb */
.refnav .ref-lc{position:relative;margin-right:0;padding-right:18px}
/* el breadcrumb compensa el gap de la grilla para que el filete quede
   a la misma distancia de los dos lados */
.refnav .ref-path{padding-left:10px}
.refnav .ref-lc::after{content:"";position:absolute;right:0;top:21%;bottom:21%;
  width:1px;background:rgba(11,13,22,.14)}
.refnav .ref-lc .lc-mark{height:37px}
@media(max-width:1080px){
  .refnav .ref-lc{margin-right:0;padding-right:14px}
  .refnav .ref-lc .lc-mark{height:33px}
}
/* en angosto d·local ya se oculta (regla previa) y el breadcrumb se
   reduce a "Brazil": el centro queda logo + país, que es lo que hay
   que leer de un vistazo */
@media(max-width:820px){
  .refnav,body.refnav-on .refnav{
    grid-template-columns:auto auto minmax(0,1fr)}
  .refnav .ref-lc{margin-right:0;padding-right:10px;border-right:0}
  .refnav .ref-lc .lc-mark{height:28px}
  .refnav .ref-lead{padding-right:8px;margin-right:0}
}

/* ── 6 · el nav lateral arranca en los métodos de pago ───────────────
   Pasa a ir antes de esa sección —su primer ítem— y conserva el mismo
   top de siempre; sólo se despega del hero para entrar a la altura del
   titular. Al salir de .chp-body deja de heredar sus tokens claros, así
   que se repiten acá para que no quede blanco sobre blanco. */
#page-market .secnav{margin-top:clamp(44px,4.6vw,68px)}
#page-market .secnav a{color:rgba(10,18,64,.46)}
#page-market .secnav a.on,
#page-market .secnav a:hover{color:#0A1240}
#page-market .secnav a.on s{background:#2D58F5}

/* ── 5 · corte de imagen entre secciones ─────────────────────────────
   El mismo recurso que cierra "Pix at work", ahora también antes de
   "New features": corta el capítulo y le da aire al titular. */
#page-market .chp-body>.brk-mid{margin-top:clamp(46px,5vw,80px)}
#page-market .chp-body>.brk-mid+.sect::before{display:none}
/* las dos bandas de separación miden lo mismo: la de "New features" fija
   la medida y la del cierre del capítulo la iguala */
#page-market .brk-mid,
#page-market .sect>.brk-a{height:clamp(300px,42vh,520px)}
/* cada banda trae su propia foto, así que no van desenfocadas como
   cuando reutilizaban la del hero */
#page-market .brk-photo img{filter:none;transform:none}
#page-market .brk-photo::after{
  background:linear-gradient(180deg,rgba(16,26,71,.14),rgba(16,26,71,.22))}
@media(max-width:820px){
  #page-market .brk-mid,
  #page-market .sect>.brk-a{height:clamp(220px,32vh,320px)}
}

/* ══════════════════════════════════════════════════════════════════
   LOCAL PAYMENTS · BNPL
   Parte de la hoja de Brazil. Cambios propios de esta página:
   1) hero sin foto: el fondo es el azul de la portada (overview),
      con su foco de luz y la trama de baldosas
   2) sin estampilla ni cinta de cifras en el hero
   3) gráfico de barras horizontales (cuota de BNPL en retail)
   4) grilla de ventajas y cita sin foto
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · hero en el azul de la portada ───────────────────────────── */
#page-market .hv-full.hv-plain{background:#2143E9}
#page-market .hv-plain .hv-bg{
  background-color:#2143E9;
  background-image:radial-gradient(45% 62% at 78% 78%,
    #4C6FF3 0%,#4869F2 18%,#4163F1 40%,#3A5AF0 62%,
    #3556F0 71%,#2B4BEC 86%,#2143E9 100%)}
/* la trama de la portada reemplaza al velo que protegía el texto sobre
   la foto: acá el fondo es plano y no hace falta oscurecer */
#page-market .hv-plain .hv-bg::after{
  background:url("../../img/textures/texture-tiles-a.svg") 0 0/352px 352px}
#page-market .hv-plain .hv-bg::before{content:"";position:absolute;inset:0;
  background:url("../../img/textures/texture-tiles-b.svg") -97px 61px/352px 352px}
/* sin cinta de cifras, el hero cierra con la apertura */
#page-market .hv-plain .opening{border-bottom:0}
#page-market .hv-plain .op-r{padding-bottom:clamp(44px,5vw,80px)}

/* ── 2 · sin estampilla: el titular ocupa todo el ancho ──────────── */
#page-market .hv-plain .postcard{grid-template-columns:minmax(0,1fr)}
/* "BNPL" es el titular; la bajada del documento va debajo, a menor
   cuerpo, para que la sigla siga siendo la pieza gráfica */
#page-market .hv-plain h1 br{display:none}
#page-market .hv-plain .tw{display:block;margin-top:.12em;
  font-size:.46em;font-weight:500;letter-spacing:-.03em;line-height:1.05;
  color:rgba(255,255,255,.86)}

/* el índice lateral vuelve a vivir dentro del cuerpo */
#page-market .chp-body>.secnav{margin-top:clamp(28px,3vw,44px)}

/* ── 3 · barras horizontales ─────────────────────────────────────── */
#page-market .bnpl-bars{position:relative;display:grid;gap:10px;margin-top:30px;
  padding-bottom:28px}
#page-market .bnpl-bars .hb{display:grid;grid-template-columns:118px minmax(0,1fr);
  align-items:center;gap:18px;transition:opacity .2s}
#page-market .bnpl-bars .hb>span{font-size:14.5px;font-weight:500;color:var(--tx);text-align:right}
#page-market .bnpl-bars .hb>div{position:relative;display:flex;align-items:center;height:34px}
#page-market .bnpl-bars .hb i{display:block;height:100%;width:0;border-radius:0 6px 6px 0;
  background:var(--acc2);transition:width 1.1s var(--ease)}
#page-market .bnpl-bars.in .hb i,
#page-market .chart.in .bnpl-bars .hb i{width:var(--w)}
#page-market .bnpl-bars .hb b{flex:none;margin-left:12px;font-size:14.5px;font-weight:600;
  color:var(--tx);font-variant-numeric:tabular-nums}
#page-market .bnpl-bars:hover .hb:not(:hover){opacity:.4}
/* eje: líneas guía de fondo, alineadas con la columna de las barras */
#page-market .bb-axis{position:absolute;top:0;bottom:0;left:136px;right:0;pointer-events:none}
#page-market .bb-axis span{position:absolute;top:0;bottom:0;border-left:1px dashed var(--ln2);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--tx-45)}
#page-market .bb-axis span{padding-top:0;display:flex;align-items:flex-end;
  transform:translateX(0)}
#page-market .bb-axis span::after{content:none}
#page-market .bb-axis span{line-height:1;padding-left:5px}
@media(max-width:640px){
  #page-market .bnpl-bars .hb{grid-template-columns:86px minmax(0,1fr);gap:10px}
  #page-market .bnpl-bars .hb>span{font-size:13px}
  #page-market .bb-axis{left:96px}}

/* ── 4a · ventajas: grilla de dos columnas con filete arriba ─────── */
/* ── beneficios como pauta editorial: una fila por punto, no una grilla 2×2.
      El número queda en su propia columna y el título y el texto se alinean
      en dos anchos fijos, así la lectura baja en vertical sin zigzag. ── */
#page-market .bens{list-style:none;display:block;padding:0;
  margin:clamp(8px,1vw,14px) clamp(28px,7vw,150px) clamp(40px,4.4vw,64px) var(--colx);
  border-top:1px solid var(--ln)}
#page-market .bens li{display:grid;
  grid-template-columns:clamp(30px,2.6vw,42px) minmax(0,.9fr) minmax(0,1.25fr);
  gap:0 clamp(14px,1.8vw,30px);align-items:start;
  border-bottom:1px solid var(--ln);padding:clamp(20px,2.2vw,30px) 0;
  transition:background-color .25s ease}
#page-market .bens li:hover{background-color:rgba(10,18,64,.022)}
#page-market .bens em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.14em;color:var(--acc2);margin:0;padding-top:.45em}
#page-market .bens h3{font-size:clamp(18px,1.6vw,23px);font-weight:600;letter-spacing:-.022em;
  line-height:1.22;color:var(--tx);margin:0;padding-right:clamp(8px,1.4vw,26px)}
#page-market .bens p{font-size:15.5px;line-height:1.6;color:var(--tx-70);margin:0;max-width:44em}
#page-market .bens p b{color:var(--tx);font-weight:700}
@media(max-width:900px){#page-market .bens{margin-left:var(--gut);margin-right:var(--gut)}}
@media(max-width:760px){
  #page-market .bens li{grid-template-columns:clamp(34px,8vw,48px) minmax(0,1fr);
    gap:0 clamp(14px,3vw,20px)}
  #page-market .bens h3{margin-bottom:8px}
  #page-market .bens p{grid-column:2}
}

/* ── 4b · cita sin foto: la coma de marca queda como pieza gráfica ── */
#page-market .chp-body .brq-nophoto .brq-bg{
  background:linear-gradient(165deg,#5AC8FA 0%,#ADE2FF 100%)}
#page-market .chp-body .brq-nophoto{margin-top:clamp(20px,2.4vw,40px)}
#page-market .chp-body .brq-band .ava-ini{display:grid;place-items:center;
  background:#fff;color:var(--acc2);font:700 15px/1 var(--sans);letter-spacing:.02em}

/* sin foto, la tarjeta de la cita centra texto y coma en vertical */
#page-market .chp-body .brq-nophoto{align-items:center}
#page-market .chp-body .brq-nophoto .brq-bg{align-self:center;margin-top:0}
#page-market .chp-body .brq-nophoto .brq-in{align-self:center}
@media(max-width:900px){
  #page-market .chp-body .brq-nophoto{align-items:start}}

/* ── alineación óptica del titular ───────────────────────────────────
   A este cuerpo, el blanco lateral de las letras se nota: la B de BNPL
   trae 0,077em de lado izquierdo (más el padding de .02em del degradé)
   y la N de la bajada 0,083em. Se compensan para que la sigla, la bajada
   y el breadcrumb arranquen sobre la misma vertical. */
#page-market .hv-plain .mk-name{margin-left:-.097em}
#page-market .hv-plain .tw{margin-left:-.083em}

/* ── mobile: la cita va sin foto. El recorte con la coma es una pieza
      de composición horizontal; apilado sobre el texto sólo suma un
      hueco alto, así que se oculta y el quote queda a una columna. ── */
@media(max-width:900px){
  #page-market .chp-body .brq-band .brq-bg{display:none}
  #page-market .chp-body .brq-band .brq-in{grid-column:1;grid-row:1}
}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE REVISIÓN — 29/09
   1) hero más bajo y sin foto: a la derecha, el vector de Local
      Payments del overview (los dos círculos montados sobre dos líneas),
      que se arma solo y queda respirando
   2) una sola banda de separación, con foto, entre "A different route"
      y "Turning credit into conversion"
   3) la coma de la cita queda con el degradé, sin dibujo adentro
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · hero ────────────────────────────────────────────────────── */
#page-market .hv-plain .chp-hero-in{padding-top:clamp(56px,9vh,110px)}
#page-market .hv-plain .postcard{grid-template-columns:minmax(0,1fr)}
#page-market .lp-hero-art{--lp-acc:#CFE0FF;width:clamp(180px,17vw,260px);aspect-ratio:4/3}
#page-market .lp-hero-art .lp-vec{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:1060px){
  #page-market .hv-plain .postcard{grid-template-columns:1fr}
  #page-market .hv-plain .pc-r{justify-self:start}
  #page-market .lp-hero-art{width:clamp(140px,36vw,190px)}}

/* ── 2 · banda con foto ──────────────────────────────────────────── */
#page-market .chp-body>.brk{margin-top:clamp(46px,5vw,80px);height:clamp(300px,42vh,520px)}
#page-market .chp-body>.brk+.sect::before{display:none}
#page-market .brk-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#page-market .brk-photo::after{background:linear-gradient(180deg,rgba(16,26,71,.1),rgba(16,26,71,.18))}
@media(max-width:820px){#page-market .chp-body>.brk{height:clamp(220px,32vh,320px)}}

/* ── movimiento (mismo par llegada / reposo que el overview) ──────── */
@media(prefers-reduced-motion:no-preference){
  #page-market .lp-art .a-draw{stroke-dasharray:1;stroke-dashoffset:1}
  #page-market .lp-art .a-in{opacity:0}
  #page-market .lp-art.on .a-draw{animation:lpDraw 1.15s var(--ease) var(--d,0s) both}
  @keyframes lpDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  #page-market .lp-art.on .a-in{transform-box:fill-box;transform-origin:center;
    animation:lpIn .6s var(--ease) var(--d,0s) both}
  @keyframes lpIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
  #page-market .lp-art.on .a-grow{animation:lpGrow 5s ease-in-out var(--d,0s) infinite}
  @keyframes lpGrow{0%,100%{r:var(--r0)}50%{r:var(--r1)}}
}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE REVISIÓN — 29/09 (tarde)
   1) fondo del hero: el dibujo de Local Payments del overview (pares de
      círculos montados sobre líneas), en grande y tenue, que se arma al
      entrar y después se queda deslizando despacio mientras dure el hero
   2) la coma de la cita lleva foto
   ══════════════════════════════════════════════════════════════════ */
#page-market .hv-plain .hv-bg .lp-hero-bg{position:absolute;inset:0;width:100%;height:100%;
  z-index:1;opacity:.11;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 18%,#000 62%);mask-image:linear-gradient(90deg,transparent 18%,#000 62%)}
#page-market .hv-plain .hv-bg .lp-hero-bg g g{transform-box:fill-box}
@media(prefers-reduced-motion:no-preference){
  #page-market .lp-art.on .a-drift{animation:lpDrift var(--dur,18s) ease-in-out 2s infinite alternate}
  @keyframes lpDrift{from{transform:translateX(0)}to{transform:translateX(var(--dx,40px))}}
}
@media(max-width:760px){#page-market .hv-plain .hv-bg .lp-hero-bg{opacity:.08}}

#page-market .chp-body .brq-photo .brq-bg{background:none}
#page-market .chp-body .brq-photo .brq-bg img{object-position:58% 40%}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE REVISIÓN — 01/10
   1) hero con foto de lifestyle: el titular respira y la animación
      deja de competir con él
   2) la banda entre "A different route" y "Turning credit into
      conversion" pasa a ser la animación de Local Payments
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · hero con foto ───────────────────────────────────────────── */
#page-market .hv-plain.hv-photo{background:#101A3C}
#page-market .hv-plain.hv-photo .hv-bg{background:none}
#page-market .hv-plain.hv-photo .hv-bg::before,
#page-market .hv-photo .hero-video::before{display:none}
/* la foto va nítida: es la protagonista. La persona ya viene a la
   derecha, así que el encuadre se corre hacia ese lado y el titular
   queda sobre la vereda y los edificios */
#page-market .hv-photo .hero-video{filter:none;transform:none}
#page-market .hv-photo .hero-video img{inset:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 30%}
/* velo sólo del lado del titular y abajo, donde apoya la apertura */
#page-market .hv-plain.hv-photo .hv-bg::after{
  background:
    linear-gradient(90deg,rgba(10,18,64,.66) 0%,rgba(10,18,64,.36) 36%,rgba(10,18,64,0) 60%),
    linear-gradient(180deg,rgba(10,18,64,.25) 0%,rgba(10,18,64,0) 22%,rgba(10,18,64,0) 45%,rgba(10,18,64,.8) 100%)}
@media(max-width:900px){
  /* en angosto el texto ocupa todo el ancho: la foto vuelve a su encuadre */
  #page-market .hv-photo .hero-video img{object-position:68% 40%}
  #page-market .hv-plain.hv-photo .hv-bg::after{background:rgba(10,18,64,.5)}}

/* ── 2 · banda con la animación ──────────────────────────────────── */
#page-market .brk-art{
  background-color:#2143E9;
  background-image:radial-gradient(60% 80% at 50% 50%,#4C6FF3 0%,#3A5AF0 45%,#2143E9 100%)}
#page-market .brk-art::after{
  background:url("../../img/textures/texture-tiles-a.svg") 0 0/352px 352px;opacity:.6}
#page-market .brk-art .lp-band-art{position:absolute;inset:8% 0;width:100%;height:84%;
  z-index:1;opacity:.9;overflow:visible}
#page-market .brk-art .lp-band-art>g{stroke-width:1.8}
#page-market .brk-art .lp-band-art g g{transform-box:fill-box}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE REVISIÓN — 01/10 (tarde)
   1) la animación de círculos vuelve al hero: muy grande, en absoluto
      sobre la foto y apenas visible, como una marca de agua que respira
   2) la banda vuelve a ser foto (nueva)
   3) la coma de la cita lleva el skyline
   ══════════════════════════════════════════════════════════════════ */
#page-market .hv-photo .hv-bg .lp-hero-float{
  position:absolute;z-index:1;pointer-events:none;
  right:-10%;top:-18%;height:136%;width:auto;aspect-ratio:480/460;
  opacity:.16;overflow:visible;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}
#page-market .hv-photo .hv-bg .lp-hero-float>g{stroke:#fff;stroke-width:1.6}
#page-market .hv-photo .hv-bg .lp-hero-float g g{transform-box:fill-box}
/* el velo queda debajo de los círculos para que no los apague */
#page-market .hv-plain.hv-photo .hv-bg::after{z-index:0}
#page-market .hv-photo .hero-video{z-index:0}
@media(max-width:900px){
  #page-market .hv-photo .hv-bg .lp-hero-float{right:-30%;opacity:.12}}


/* la foto es casi toda cielo: se acerca hacia las torres para que llenen la coma */
#page-market .chp-body .brq-photo .brq-bg img[src*="quote-skyline"]{object-position:80% 50%;
  transform:scale(1.55);transform-origin:82% 78%}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE REVISIÓN — 01/10 (cierre)
   La animación sale del hero y se monta sobre la foto de la banda, con
   un velo azul para que los trazos blancos se lean. Es el vector de la
   tarjeta 02 del overview (pares de círculos sobre dos líneas), con las
   líneas a todo el ancho y los pares deslizándose despacio.
   ══════════════════════════════════════════════════════════════════ */
#page-market .chp-body>.brk.brk-blue{height:clamp(340px,54vh,620px)}
/* la foto sube para que se vea la caja que está por agarrar */
#page-market .brk-blue img{object-position:50% 50%}
#page-market .brk-photo.brk-blue::after{z-index:1;
  background:radial-gradient(60% 90% at 70% 70%,rgba(76,111,243,.30) 0%,rgba(58,90,240,.36) 45%,rgba(33,67,233,.44) 100%)}
#page-market .brk-blue .lp-band-art{position:absolute;inset:0;width:100%;height:100%;
  z-index:2;opacity:.36;pointer-events:none}
#page-market .brk-blue .lp-band-art g g{transform-box:fill-box}
@media(max-width:820px){#page-market .chp-body>.brk.brk-blue{height:clamp(260px,40vh,360px)}}

/* hero: el pasillo. Banda: la calle. Los círculos de la banda se mueven
   más: recorren más trecho, en ciclos más cortos, y cada uno late a su
   propio ritmo (--gd) en vez de todos juntos */
@media(prefers-reduced-motion:no-preference){
  #page-market .brk-blue.lp-art.on .a-grow{animation:lpGrow var(--gd,5s) ease-in-out var(--d,0s) infinite}
  #page-market .brk-blue.lp-art.on .a-drift{animation:lpDrift var(--dur,10s) ease-in-out .8s infinite alternate}
}

/* desenfoque sobre toda la mitad izquierda del hero, donde apoyan los
   textos; se apaga en degradé antes de llegar a la persona */
#page-market .hv-photo .hv-blur{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 58%);
          mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 58%)}
@media(max-width:900px){
  #page-market .hv-photo .hv-blur{-webkit-mask-image:none;mask-image:none;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}