/* ══ "The way locals pay" destacado arriba, a todo el ancho ══════════ Toma el bloque "Survey" del report_2026: título grande, una fila con rótulo + años, y un bento de fichas. Va antes de las dos columnas. */ #page-market .pv-x{margin:calc(var(--sy,140px)*.5) max(64px,8.333vw) 0!important;padding:0!important;background:none;border:0;box-shadow:none} #page-market .pv-x #mixChart{margin:0;border:0;max-width:none} #page-market .pvx-in{border-radius:clamp(20px,2vw,28px);padding:clamp(48px,5vw,88px) clamp(28px,4.4vw,72px)} #page-market .pvx-title{margin:0;max-width:12em;font-family:var(--rp-alt);font-size:clamp(36px,4vw,64px);font-weight:600;line-height:.9;letter-spacing:-.03em} #page-market .pvx-meta{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap; margin-top:clamp(32px,4vw,64px);padding-top:20px;border-top:1px solid currentColor;border-color:rgba(7,4,32,.1)} #page-market .pvx-k{font-family:var(--rp-alt);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase} #page-market .pvx-k span{letter-spacing:.14em} /* años */ #page-market .pv-x .yr-h .yd-side{display:flex!important;gap:2px;padding:3px!important;border-radius:999px;background:rgba(7,4,32,.05);position:relative} #page-market .pv-x .yr-h .yd-side::before,#page-market .pv-x .yr-h .yd-fill{display:none!important} #page-market .pv-x .yr-h .yd-dot{position:absolute;top:3px!important;bottom:3px!important;height:auto!important;border-radius:999px!important;background:#fff!important; box-shadow:0 1px 3px rgba(7,4,32,.12)!important;transform:none!important;transition:left .35s cubic-bezier(.33,1,.68,1),width .35s!important} #page-market .pv-x .yr-h .yd-side button{position:relative;z-index:1;padding:8px 15px!important;font-family:var(--rp-alt)!important;font-size:13px!important; font-weight:600!important;color:#9CA3AF!important;line-height:1;background:none;border:0;cursor:pointer} #page-market .pv-x .yr-h .yd-side button.on{color:#070420!important} /* bento */ #page-market .pvx-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);grid-template-areas:"lead chart" "apm chart";gap:12px;margin-top:clamp(24px,2.6vw,36px)} #page-market .pvx-b{position:relative;overflow:hidden;border-radius:22px;padding:clamp(24px,2.4vw,32px) clamp(22px,2.2vw,30px)} #page-market .pvx-lead{grid-area:lead;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(220px,20vw,300px)} #page-market .pvx-lead img{position:absolute;right:0;top:5%;width:60%;opacity:.5;transform:translateX(30%);pointer-events:none} #page-market .pvx-chart{grid-area:chart} #page-market .pvx-apm{grid-area:apm} #page-market [data-pv=lead]{position:relative} #page-market [data-pv=lead] b{display:block;font-family:var(--rp-alt);font-weight:500;font-size:clamp(64px,6.4vw,104px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums} #page-market [data-pv=lead] b i{font-style:normal;font-size:.5em;letter-spacing:-.02em} #page-market [data-pv=lead] p{margin:16px 0 0;max-width:15em;font-family:var(--rp-alt);font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.04em;line-height:1} #page-market [data-pv=lead] p strong{font-weight:700} #page-market .pvx-label{margin:0 0 clamp(24px,2.6vw,36px);font-family:var(--rp-alt);font-size:clamp(20px,1.7vw,24px);font-weight:600;letter-spacing:-.04em;line-height:1} #page-market [data-pv=rows]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px} #page-market [data-pv=rows] li{display:grid;grid-template-columns:minmax(120px,30%) minmax(0,1fr) 48px;align-items:center;gap:20px} #page-market [data-pv=rows] span{font-family:var(--rp-font);font-size:15px;font-weight:500;opacity:.8;line-height:1.1} #page-market [data-pv=rows] em{display:block;height:26px;border-radius:999px;overflow:hidden} #page-market [data-pv=rows] s{display:block;height:100%;width:0;border-radius:999px;transition:width 1.2s cubic-bezier(.33,1,.68,1)} #page-market [data-pv=rows] strong{font-family:var(--rp-alt);font-size:15px;font-weight:600;text-align:right;opacity:.75;font-variant-numeric:tabular-nums} #page-market .pvx-chart .chart-src{display:block;margin-top:24px!important;padding:0!important} #page-market .pvx-apm h3{margin:0 0 16px;font-family:var(--rp-alt);font-size:clamp(20px,1.7vw,24px);font-weight:600;letter-spacing:-.04em;line-height:1} #page-market .pvx-apm .pov-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} #page-market .pvx-apm .pov-logos li{display:flex;align-items:center;justify-content:center;height:58px;border-radius:14px;background:#fff} #page-market .pvx-apm .pov-logos img{height:calc(var(--h,26px)*.72);width:auto;max-width:80%} #page-market .pv-x .mix-main{display:none} /* ── 5 · banda con el degradé del bloque Survey ── */ #page-market .pv-x5 .pvx-in{background-color:#0F47D6;background-image:linear-gradient(205deg,#0F47D6 25%,#6378FF);color:#fff} #page-market .pv-x5 .pvx-meta{border-color:rgba(255,255,255,.22)} #page-market .pv-x5 .pvx-b{background:rgba(255,255,255,.06)} #page-market .pv-x5 [data-pv=rows] em{background:rgba(255,255,255,.12)} #page-market .pv-x5 [data-pv=rows] s{background:#95D4FF} #page-market .pv-x5 [data-pv=rows] li.top s{background:#fff} #page-market .pv-x5 .chart-src{color:rgba(255,255,255,.6)!important} #page-market .pv-x5 .yr-h .yd-side{background:rgba(255,255,255,.14)} #page-market .pv-x5 .yr-h .yd-side button{color:rgba(255,255,255,.75)!important} #page-market .pv-x5 .yr-h .yd-side button.on{color:#0F47D6!important} /* ── 6 · bento blanco: fichas celestes, la cifra líder con el degradé ── */ #page-market .pv-x6 .pvx-in{background:#fff;border:1px solid #E9E9E9;color:#070420} #page-market .pv-x6 .pvx-title{color:#070420} #page-market .pv-x6 .pvx-k{color:#9CA3AF} #page-market .pv-x6 .pvx-b{background:#F4F7FF} #page-market .pv-x6 .pvx-lead{background-color:#0F47D6;background-image:linear-gradient(205deg,#0F47D6 25%,#6378FF);color:#fff} #page-market .pv-x6 .pvx-label,#page-market .pv-x6 .pvx-apm h3{color:#2D58F5} #page-market .pv-x6 [data-pv=rows] em{background:rgba(45,88,245,.08)} #page-market .pv-x6 [data-pv=rows] s{background:#5AC8FA} #page-market .pv-x6 [data-pv=rows] li.top s{background:#2D58F5} #page-market .pv-x6 [data-pv=rows] span,#page-market .pv-x6 [data-pv=rows] strong{color:#070420} /* ── 7 · abierto, sin caja: título + cifra a la izquierda, píldoras a la derecha ── */ #page-market .pv-x7 .pvx-in{padding:clamp(24px,2.4vw,40px) 0 0;color:#070420} #page-market .pv-x7 .pvx-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"lead chart" "apm chart";gap:clamp(24px,3vw,48px) clamp(32px,5vw,96px)} #page-market .pv-x7 .pvx-b{padding:0;border-radius:0;overflow:visible} #page-market .pv-x7 .pvx-lead{min-height:0;justify-content:flex-start;color:#2D58F5} #page-market .pv-x7 .pvx-lead img{display:none} #page-market .pv-x7 .pvx-k{color:#9CA3AF} #page-market .pv-x7 .pvx-label{font-size:18px;font-weight:700;letter-spacing:0;color:#2D58F5;margin-bottom:24px} #page-market .pv-x7 .pvx-apm h3{font-size:16px;letter-spacing:0;color:#070420} #page-market .pv-x7 .pvx-apm .pov-logos li{background:#F4F7FF} #page-market [data-pv=bars]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px} #page-market [data-pv=bars] li{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);width:var(--bw);padding:16px 20px;border-radius:12px; background:#E9F9FF;color:#2D58F5;transition:width .9s cubic-bezier(.33,1,.68,1)} #page-market [data-pv=bars] li.fill{background:#2D58F5;color:#fff} #page-market [data-pv=bars] b{flex:none;min-width:2.6em;font-family:var(--rp-alt);font-weight:500;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.05em;line-height:1} #page-market [data-pv=bars] b i{font-style:normal;font-size:.7em} #page-market [data-pv=bars] span{font-family:var(--rp-font);font-size:16px;line-height:1} @media(max-width:980px){ #page-market .pv-x{margin:40px 20px 0!important} #page-market .pvx-grid,#page-market .pv-x7 .pvx-grid{grid-template-columns:1fr;grid-template-areas:"lead" "chart" "apm"} #page-market [data-pv=rows] li{grid-template-columns:1fr 44px}#page-market [data-pv=rows] span{grid-column:1/-1}} #page-market .pv-x .chart-src{font-family:var(--rp-alt)!important;font-size:11.5px!important;font-weight:600!important;font-style:normal!important; letter-spacing:.08em!important;text-transform:uppercase!important;color:#9CA3AF!important} #page-market .pv-x5 .chart-src{color:rgba(255,255,255,.6)!important} #page-market .pv-x7 .pvx-in{padding-left:0!important;padding-right:0!important} /* ══ versión final (5) en todos los países: pegada al hero, más baja, años y rótulo dentro de la ficha del gráfico ══ */ #page-market .pv-x5{margin:10px 0 0!important} #page-market .pv-x5 .pvx-in{padding:clamp(28px,3vw,44px) clamp(28px,3.4vw,52px)!important} #page-market .pv-x5 .pvx-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr)!important;grid-template-areas:"side chart"!important;margin-top:0!important;gap:12px} #page-market .pv-x5 .pvx-side{grid-area:side;display:flex;flex-direction:column;gap:12px} #page-market .pv-x5 .pvx-title{font-size:clamp(28px,2.6vw,40px)!important;margin:0 0 6px;max-width:none} #page-market .pv-x5 .pvx-lead{min-height:0!important;padding-top:clamp(22px,2vw,28px)!important;padding-bottom:clamp(22px,2vw,28px)!important} #page-market .pv-x5 [data-pv=lead] b{font-size:clamp(52px,5vw,80px)} #page-market .pv-x5 [data-pv=lead] p{margin-top:10px;font-size:clamp(17px,1.4vw,21px)} #page-market .pv-x5 .pvx-apm h3{font-size:16px;letter-spacing:-.01em;margin-bottom:12px} #page-market .pv-x5 .pvx-apm .pov-logos li{height:48px} #page-market .pv-x5 .pvx-chart{display:flex;flex-direction:column} #page-market .pv-x5 .pvx-chead{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:clamp(22px,2.2vw,32px)} #page-market .pv-x5 .pvx-label{margin:0!important;font-size:clamp(17px,1.4vw,21px)} #page-market .pv-x5 .pvx-label span{font-weight:500;opacity:.75} #page-market .pv-x5 [data-pv=rows]{gap:12px;flex:1;justify-content:center} #page-market .pv-x5 [data-pv=rows] em{height:22px} #page-market .pv-x5 .pvx-chart .chart-src{margin-top:20px!important} #page-market .hero-shell + .pv-x5,#page-market .hero-shell ~ .pv-x5{position:relative;z-index:2} @media(max-width:980px){#page-market .pv-x5 .pvx-grid{grid-template-columns:1fr!important;grid-template-areas:"side" "chart"!important}} /* separada del hero y alineada al wrapper del contenido (índice → margen) */ #page-market .pv-x5{margin:clamp(32px,3vw,48px) max(64px,8.333vw) 0!important} @media(max-width:980px){#page-market .pv-x5{margin:24px 20px 0!important}} /* título como el del bloque Survey del reporte */ #page-market .pv-x5 .pvx-title{font-weight:500!important;letter-spacing:-.035em!important;line-height:.9!important;font-size:clamp(32px,3vw,46px)!important;margin-bottom:10px!important} /* logos más separados */ #page-market .pv-x5 .pvx-apm .pov-logos{gap:12px!important} #page-market .pv-x5 .pvx-apm h3{margin-bottom:18px!important} #page-market .pv-x5{margin-left:calc(max(64px,8.333vw) + 20px)!important;margin-right:calc(max(64px,8.333vw) + 20px)!important}@media(max-width:980px){#page-market .pv-x5{margin-left:20px!important;margin-right:20px!important}} /* título arriba, separado del bento, como el bloque Survey; más aire y la misma separación del hero que entre secciones */ #page-market .pv-x5{margin-top:calc(var(--sy,140px) * .8)!important} #page-market .pv-x5 .pvx-in{padding:clamp(48px,5vw,88px) clamp(32px,4vw,64px)!important} #page-market .pv-x5 .pvx-title{font-size:clamp(36px,3.6vw,56px)!important;margin:0 0 clamp(40px,5vw,80px)!important;max-width:12em} #page-market .pv-x5 .pvx-grid{gap:16px!important} #page-market .pv-x5 .pvx-side{gap:16px} #page-market .pv-x5 .pvx-lead{padding:clamp(28px,2.8vw,40px) clamp(26px,2.6vw,36px)!important} #page-market .pv-x5 .pvx-apm{padding:clamp(26px,2.6vw,36px)!important} #page-market .pv-x5 .pvx-chart{padding:clamp(28px,2.8vw,40px) clamp(28px,2.8vw,40px)!important} #page-market .pv-x5 [data-pv=rows]{gap:16px} /* banda de lado a lado (como el hero) con el contenido dentro del wrapper */ #page-market .pv-x5{margin-left:0!important;margin-right:0!important} #page-market .pv-x5 .pvx-in{border-radius:clamp(18px,1.8vw,28px)!important; padding:clamp(56px,5.4vw,96px) calc(max(64px,8.333vw) + 20px)!important} #page-market .pvx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,64px)} #page-market .pv-x5 .pvx-title{font-size:clamp(30px,2.8vw,42px)!important;margin:0!important} #page-market .pv-x5 .pvx-chead{margin-bottom:clamp(24px,2.4vw,32px)!important} @media(max-width:980px){#page-market .pv-x5 .pvx-in{padding:44px 20px!important}} /* pegado al hero + label más grande + h3 apms más separado */ #page-market .pv-x5{margin-top:12px!important} #page-market .pv-x5 .pvx-label{font-size:clamp(20px,1.7vw,25px)!important} #page-market .pv-x5 .pvx-apm h3{margin-bottom:28px!important} /* pegado al hero, sin separación: la banda sube por debajo de la curva del hero */ #page-market .hero-shell{position:relative;z-index:3!important} #page-market .pv-x5{position:relative;z-index:1!important;margin-top:-90px!important} #page-market .pv-x5 .pvx-in{padding-top:calc(clamp(56px,5.4vw,96px) + 90px)!important} /* logos de APMs en dos columnas */ #page-market .pv-x5 .pvx-apm .pov-logos{grid-template-columns:repeat(2,minmax(0,1fr))!important} /* bloque más bajo: cuadrante de la cifra más compacto y % más chico */ #page-market .pv-x5 .pvx-lead{padding:clamp(22px,2.2vw,30px) clamp(26px,2.6vw,36px)!important} #page-market .pv-x5 [data-pv=lead] b{font-size:clamp(48px,4.6vw,72px)} #page-market .pv-x5 [data-pv=lead] p{margin-top:10px;font-size:clamp(17px,1.4vw,20px)} #page-market .pv-x5 .pvx-chart{display:flex;flex-direction:column} /* pattern de cuadraditos (igual que el overview) sobre el gradiente */ #page-market .pv-x5 .pvx-in{background-color:#2143E9!important; background-image:url("../../img/textures/texture-tiles-soft.svg"), radial-gradient(45% 62% at 78% 78%,#4C6FF3 0%,#4869F2 18%,#4163F1 40%,#3A5AF0 62%,#3556F0 71%,#2B4BEC 86%,#2143E9 100%)!important; background-size:352px 352px,auto!important} #page-market .pv-x5 .pvx-lead img{display:none!important} /* logos de APMs más grandes: misma altura base y el ancho limitado por la ficha */ #page-market .pv-x5 .pvx-apm .pov-logos li{height:64px!important} #page-market .pv-x5 .pvx-apm .pov-logos img{height:calc(var(--h,30px)*1.15)!important;min-height:30px;max-height:44px;max-width:72%!important;object-fit:contain} #page-market .pv-x5 .pvx-apm .pov-logos img[alt="Tarjeta Naranja"],#page-market .pv-x5 .pvx-apm .pov-logos img[alt="Pago Fácil"]{height:44px!important;max-height:48px} /* ajuste: logos un poco más contenidos */ #page-market .pv-x5 .pvx-apm .pov-logos img{height:calc(var(--h,28px)*.95)!important;min-height:24px;max-height:34px;max-width:60%!important} #page-market .pv-x5 .pvx-apm .pov-logos img[alt="Tarjeta Naranja"],#page-market .pv-x5 .pvx-apm .pov-logos img[alt="Pago Fácil"]{height:38px!important;max-height:38px} /* gráfico derecho: las barras ocupan todo el alto, valores más grandes */ #page-market .pv-x5 .pvx-chart{display:flex!important;flex-direction:column} #page-market .pv-x5 .pvx-chart [data-pv=rows]{flex:1 1 auto;justify-content:space-between;gap:12px;padding:8px 0} #page-market .pv-x5 [data-pv=rows] em{height:clamp(30px,2.6vw,40px)!important} #page-market .pv-x5 [data-pv=rows] span{font-size:clamp(15px,1.25vw,18px)!important} #page-market .pv-x5 [data-pv=rows] strong{font-size:clamp(18px,1.6vw,24px)!important;font-family:'Plus Jakarta Sans dLocal','Plus Jakarta Sans',sans-serif;font-weight:600;letter-spacing:-.03em} #page-market .pv-x5 [data-pv=rows] li{grid-template-columns:minmax(120px,30%) minmax(0,1fr) 64px!important} #page-market .pv-x5 .pvx-chart .chart-foot,#page-market .pv-x5 .pvx-chart .chart-src{margin-top:24px} /* barras del mix: más finas y valores moderados */ #page-market .pv-x5 [data-pv=rows] em{height:clamp(22px,1.8vw,28px)!important} #page-market .pv-x5 [data-pv=rows] span{font-size:clamp(14px,1.1vw,16px)!important} #page-market .pv-x5 [data-pv=rows] strong{font-size:clamp(16px,1.3vw,20px)!important} #page-market .pv-x5 .pvx-chart [data-pv=rows]{justify-content:space-evenly;padding:16px 0} @media(max-width:980px){#page-market .pv-x5 [data-pv=rows] li{grid-template-columns:minmax(0,1fr) 48px!important;grid-template-areas:"l l" "b v";row-gap:8px!important} #page-market .pv-x5 [data-pv=rows] span{grid-area:l}#page-market .pv-x5 [data-pv=rows] em{grid-area:b}#page-market .pv-x5 [data-pv=rows] strong{grid-area:v;text-align:right}} /* barras: término medio */ #page-market .pv-x5 [data-pv=rows] em{height:clamp(22px,1.8vw,28px)!important} #page-market .pv-x5 [data-pv=rows] span{font-size:clamp(14px,1.05vw,16px)!important} #page-market .pv-x5 [data-pv=rows] strong{font-size:clamp(16px,1.3vw,19px)!important} #page-market .pv-x5 [data-pv=rows] li{grid-template-columns:minmax(120px,30%) minmax(0,1fr) 52px!important} #page-market .pv-x5 .pvx-chart [data-pv=rows]{justify-content:space-evenly;padding:12px 0} /* nombres más grandes, barras más juntas, alcance en segunda línea */ #page-market .pv-x5 [data-pv=rows] span{font-size:clamp(15px,1.25vw,18px)!important} #page-market .pv-x5 .pvx-chart [data-pv=rows]{justify-content:center!important;gap:clamp(14px,1.3vw,20px)!important} #page-market .pv-x5 .pvx-label span{display:block;margin-top:6px} /* tag "Local card" en las fichas de APMs */ #page-market .pv-x5 .pvx-apm .pov-logos li{position:relative} #page-market .pv-x5 .pvx-apm .pov-logos .pm-type{position:absolute;top:7px;right:8px;padding:3px 6px;border-radius:999px;background:#E9F9FF;color:#2D58F5; font:600 8px/1 'Plus Jakarta Sans dLocal','Plus Jakarta Sans',sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase} /* ══ mobile ══ */ @media(max-width:980px){ /* orden: cifra → gráfico → métodos de pago al final */ #page-market .pv-x5 .pvx-grid{display:flex!important;flex-direction:column;gap:12px!important} #page-market .pv-x5 .pvx-side{display:contents!important} #page-market .pv-x5 .pvx-lead{order:1} #page-market .pv-x5 .pvx-chart{order:2} #page-market .pv-x5 .pvx-apm{order:3} /* año elegido visible: píldora blanca con texto azul */ #page-market .pv-x5 .yr-h .yd-dot{display:none!important} #page-market .pv-x5 .yr-h .yd-side button{border-radius:999px!important;color:rgba(255,255,255,.85)!important} #page-market .pv-x5 .yr-h .yd-side button.on{background:#fff!important;color:#2D58F5!important} /* barras: nombre y valor arriba, barra a todo el ancho */ #page-market .pv-x5 [data-pv=rows]{gap:16px!important} #page-market .pv-x5 [data-pv=rows] li{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"lab val" "bar bar";row-gap:8px!important;column-gap:12px!important} #page-market .pv-x5 [data-pv=rows] span{grid-area:lab;font-size:15px!important} #page-market .pv-x5 [data-pv=rows] em{grid-area:bar;height:14px!important} #page-market .pv-x5 [data-pv=rows] strong{grid-area:val;font-size:16px!important;text-align:right} } @media(max-width:980px){ #page-market .pv-x5 .pvx-top .pvx-title{width:100%} #page-market .pv-x5 .pvx-top .yr-drag{margin-left:0!important;margin-top:14px} } /* ── entrada en cascada de cada pieza (12-pov-x.js) ── */ #page-market .pv-x.pvx-anim:not(.pvx-done) :is(.pvx-title,.pvx-top .yr-drag,.pvx-lead,.pvx-apm h3,.pvx-apm .pov-logos li,.pvx-chart,.pvx-label,[data-pv=rows] li,.pvx-chart .chart-src){ opacity:0;transform:translateY(18px) scale(.98); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--pi,0)*60ms)} #page-market .pv-x.pvx-anim.pvx-seen:not(.pvx-done) :is(.pvx-title,.pvx-top .yr-drag,.pvx-lead,.pvx-apm h3,.pvx-apm .pov-logos li,.pvx-chart,.pvx-label,[data-pv=rows] li,.pvx-chart .chart-src){ opacity:1;transform:none} @media (min-width:981px){#page-market .pv-x5 .pvx-side>.pvx-apm{flex:1 1 auto!important;height:auto!important;max-height:none!important}}