/* ══════════════════════════════════════════════════════════════════
   THE MARKET ATLAS — portada del capítulo (02/10)
   Tres versiones sobre la misma estructura:
   · atl-v1  postales: estampillas de cada país junto al texto regional
   · atl-v2  fotos: tarjetas con la foto de portada de cada país
   · atl-v3  índice: lista numerada; la foto aparece al pasar el cursor
   ══════════════════════════════════════════════════════════════════ */
#page-market.atl{--ink:#0A1240;--ink70:rgba(10,18,64,.72);--ink45:rgba(10,18,64,.46);--line:rgba(10,18,64,.12);--acc:#2D58F5;--tint:#F4F7FF}
#page-market.atl .hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#page-market.atl .chp-hero h1 .sub{font-size:.36em}
#page-market.atl .opening .op-deck{max-width:30ch}

/* regiones en la franja inferior del hero */
#page-market.atl .a-stats{padding:0}
#page-market.atl .a-stats-in{display:grid;grid-template-columns:repeat(3,1fr)}
#page-market.atl .a-stats-in a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:clamp(22px,2.4vw,34px) var(--gut);
  color:#fff;text-decoration:none;border-left:1px solid rgba(255,255,255,.2);transition:background .25s}
#page-market.atl .a-stats-in a:first-child{border-left:0}
#page-market.atl .a-stats-in a:hover{background:rgba(255,255,255,.08)}
#page-market.atl .a-stats-in b{font:600 clamp(17px,1.5vw,22px)/1.1 var(--rp-alt,var(--sans));letter-spacing:-.03em}
#page-market.atl .a-stats-in em{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7;font-style:normal;white-space:nowrap}

#page-market.atl .atl-body{background:#fff;color:var(--ink);padding:clamp(40px,5vw,80px) 0 clamp(60px,6vw,100px)}
#page-market.atl .a-k{display:block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
#page-market.atl .a-meta{display:inline-block;margin-top:20px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink45)}
#page-market.atl .atl-body h2{margin:0;font:600 clamp(32px,3.4vw,52px)/1 var(--rp-alt,var(--sans));letter-spacing:-.04em;color:var(--ink)}
#page-market.atl .a-go{font-style:normal;transition:transform .3s cubic-bezier(.16,1,.3,1)}
#page-market.atl a:hover .a-go{transform:translateX(4px)}
#page-market.atl .soon{cursor:default}

/* ═════ V1 · postales ═════ */
#page-market.atl-v1 .a1-reg{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(32px,5vw,96px);
  padding:clamp(56px,6vw,96px) max(64px,8.333vw);border-top:1px solid var(--line)}
#page-market.atl-v1 .a1-reg:first-child{border-top:0}
#page-market.atl-v1 .a1-side{position:sticky;top:110px;align-self:start}
#page-market.atl-v1 .a1-side p{margin:22px 0 0;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--ink70);max-width:46ch}
#page-market.atl-v1 .a1-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}
#page-market.atl-v1 .a1-c{position:relative;display:flex;flex-direction:column;height:100%;padding:clamp(18px,1.8vw,26px);border-radius:20px;
  background:var(--tint);color:var(--ink);text-decoration:none;transition:background .3s,transform .4s cubic-bezier(.16,1,.3,1)}
#page-market.atl-v1 a.a1-c:hover{background:#E7EDFF;transform:translateY(-4px)}
#page-market.atl-v1 .a1-st{display:block;width:clamp(86px,8vw,118px);margin-bottom:clamp(22px,2.4vw,34px)}
#page-market.atl-v1 .a1-st img{display:block;width:100%;height:auto;transform:rotate(-4deg);filter:drop-shadow(0 6px 14px rgba(10,18,64,.16));transition:transform .4s cubic-bezier(.16,1,.3,1)}
#page-market.atl-v1 a.a1-c:hover .a1-st img{transform:rotate(0) scale(1.04)}
#page-market.atl-v1 .a1-tx{margin-top:auto}
#page-market.atl-v1 .a1-tx b{display:block;font:600 clamp(20px,1.7vw,25px)/1.05 var(--rp-alt,var(--sans));letter-spacing:-.03em}
#page-market.atl-v1 .a1-tx small{display:block;margin-top:8px;font-size:14px;line-height:1.35;color:var(--ink70)}
#page-market.atl-v1 .a1-c .a-go{position:absolute;top:clamp(18px,1.8vw,26px);right:clamp(18px,1.8vw,26px);width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--acc);font-size:15px}
#page-market.atl-v1 .a1-c.soon{background:#fff;border:1px dashed var(--line)}
#page-market.atl-v1 .a1-c.soon img{filter:grayscale(1);opacity:.45}
#page-market.atl-v1 .a1-c.soon small{color:var(--ink45);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}

/* ═════ V2 · fotos ═════ */
#page-market.atl-v2 .a2-reg{padding:clamp(56px,6vw,96px) max(64px,8.333vw) 0}
#page-market.atl-v2 .a2-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,5vw,96px);align-items:start;
  padding-bottom:clamp(30px,3vw,44px);border-bottom:1px solid var(--line);margin-bottom:clamp(24px,2.6vw,36px)}
#page-market.atl-v2 .a2-head p{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--ink70)}
#page-market.atl-v2 .a2-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}
#page-market.atl-v2 .a2-c{position:relative;display:block;color:var(--ink);text-decoration:none}
#page-market.atl-v2 .a2-ph{position:relative;display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--tint)}
#page-market.atl-v2 .a2-ph:not(.a2-blank)>img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
#page-market.atl-v2 a.a2-c:hover .a2-ph:not(.a2-blank)>img:first-child{transform:scale(1.06)}
#page-market.atl-v2 .a2-ph .a2-st{position:absolute;top:14px;right:14px;width:clamp(48px,4.4vw,64px);height:auto;transform:rotate(5deg);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
#page-market.atl-v2 .a2-blank .a2-st{top:50%;right:50%;transform:translate(50%,-50%) rotate(-4deg);width:clamp(70px,6.4vw,92px);filter:grayscale(1);opacity:.4}
#page-market.atl-v2 .a2-tx{display:block;padding:16px 46px 0 2px}
#page-market.atl-v2 .a2-tx b{display:block;font:600 clamp(19px,1.6vw,24px)/1.05 var(--rp-alt,var(--sans));letter-spacing:-.03em}
#page-market.atl-v2 .a2-tx small{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:var(--ink70)}
#page-market.atl-v2 .a2-tx{position:relative}
#page-market.atl-v2 .a2-c .a-go{position:absolute;right:4px;top:16px;color:var(--acc);font-size:18px}
#page-market.atl-v2 .soon .a2-tx small{color:var(--ink45);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}

/* ═════ V3 · índice ═════ */
#page-market.atl-v3 .a3-tabs{position:sticky;top:100px;z-index:5;display:flex;gap:6px;width:max-content;margin:0 auto clamp(20px,2vw,30px);
  padding:5px;border-radius:999px;background:rgba(244,247,255,.92);backdrop-filter:blur(10px);border:1px solid var(--line)}
#page-market.atl-v3 .a3-tabs a{padding:10px 18px;border-radius:999px;font:600 13px var(--rp-alt,var(--sans));color:var(--ink70);text-decoration:none;transition:background .2s,color .2s}
#page-market.atl-v3 .a3-tabs a:hover{background:#fff;color:var(--ink)}
#page-market.atl-v3 .a3-reg{padding:clamp(48px,5vw,80px) max(64px,8.333vw) 0}
#page-market.atl-v3 .a3-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,5vw,96px);align-items:end;margin-bottom:clamp(26px,2.8vw,40px)}
#page-market.atl-v3 .a3-head h2{font-size:clamp(40px,4.6vw,72px)}
#page-market.atl-v3 .a3-head p{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--ink70)}
#page-market.atl-v3 .a3-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
#page-market.atl-v3 .a3-r{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr) 40px;align-items:center;gap:clamp(16px,2vw,32px);
  padding:clamp(18px,1.8vw,26px) 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:padding .35s cubic-bezier(.16,1,.3,1),background .25s}
#page-market.atl-v3 a.a3-r:hover{padding-left:14px;padding-right:14px;background:var(--tint)}
#page-market.atl-v3 .a3-r em{font:500 12px var(--mono);letter-spacing:.1em;color:var(--ink45);font-style:normal}
#page-market.atl-v3 .a3-r b{font:600 clamp(24px,2.4vw,36px)/1 var(--rp-alt,var(--sans));letter-spacing:-.035em}
#page-market.atl-v3 .a3-r small{font-size:15px;line-height:1.4;color:var(--ink70)}
#page-market.atl-v3 .a3-r i{font-style:normal;justify-self:end;color:var(--acc);font-size:20px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
#page-market.atl-v3 a.a3-r:hover i{transform:translateX(4px)}
#page-market.atl-v3 .a3-r.soon b{color:var(--ink45)}
#page-market.atl-v3 .a3-r.soon small{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink45)}
#page-market.atl-v3 .a3-peek{position:fixed;left:0;top:0;z-index:60;width:260px;aspect-ratio:4/3;border-radius:16px;overflow:hidden;pointer-events:none;
  opacity:0;scale:.9;transition:opacity .25s,scale .35s cubic-bezier(.16,1,.3,1);box-shadow:0 18px 40px rgba(10,18,64,.25)}
#page-market.atl-v3 .a3-peek.on{opacity:1;scale:1}
#page-market.atl-v3 .a3-peek img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:1000px){
  #page-market.atl-v1 .a1-reg,#page-market.atl-v2 .a2-head,#page-market.atl-v3 .a3-head{grid-template-columns:1fr}
  #page-market.atl-v1 .a1-side{position:static}
  #page-market.atl-v1 .a1-grid,#page-market.atl-v2 .a2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-market.atl-v3 .a3-r{grid-template-columns:44px minmax(0,1fr) 28px}
  #page-market.atl-v3 .a3-r small{grid-column:2;grid-row:2;margin-top:-8px}
}
@media(max-width:640px){
  #page-market.atl .a-stats-in{grid-template-columns:1fr}
  #page-market.atl .a-stats-in a{border-left:0;border-top:1px solid rgba(255,255,255,.2)}
  #page-market.atl-v1 .a1-reg,#page-market.atl-v2 .a2-reg,#page-market.atl-v3 .a3-reg{padding-left:var(--gut);padding-right:var(--gut)}
  #page-market.atl-v1 .a1-grid,#page-market.atl-v2 .a2-grid{grid-template-columns:1fr}
}

/* hero más bajo: sin bajada ni franja de regiones, sólo el título */
#page-market.atl .hv-full .chp-hero-in{padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(50px,5vw,80px)}
#page-market.atl .hv-full{min-height:0}
#page-market.atl .atl-desc{margin:clamp(20px,2vw,30px) 0 0;max-width:52ch;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:rgba(255,255,255,.78)}

/* hero: foto de ciudad desenfocada en lugar del video */
#page-market.atl .atl-hbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(14px) saturate(1.1);transform:scale(1.12)}
/* texto regional: igual que el cuerpo de los países (Roboto 16/1.6, destacado en 600) */
#page-market.atl .atl-txt p{margin:0;font-family:var(--rp-font)!important;font-size:16px;line-height:1.6;letter-spacing:0;color:var(--rp-text,rgba(10,18,64,.72))}
#page-market.atl .atl-txt p+p{margin-top:1.2em}
#page-market.atl .atl-txt .hl{font-family:inherit;font-weight:600;letter-spacing:0;color:var(--rp-strong,rgba(7,4,32,.7));background:none}
#page-market.atl .atl-hbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(10px) saturate(1.1);transform:scale(1.08)}

/* cifras destacadas por región: las mismas fichas que los KPIs de los países
   (la primera llena en azul, las demás en celeste) */
#page-market.atl .atl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:clamp(24px,2.4vw,34px)}
#page-market.atl .atl-kpi{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;padding:clamp(28px,2.6vw,40px) 18px 18px;border-radius:16px;background:#E9F9FF;color:#2D58F5}
#page-market.atl .atl-kpi:first-child{background:#2D58F5;color:#fff}
#page-market.atl .atl-kpi b{font-family:var(--rp-alt,var(--sans));font-size:clamp(34px,3vw,44px);font-weight:500;letter-spacing:-.05em;line-height:1;color:inherit}
#page-market.atl .atl-kpi b i{font-style:normal;font-size:.5em;letter-spacing:-.02em}
#page-market.atl .atl-kpi small{max-width:14em;font-family:var(--rp-font);font-size:14px;line-height:1.25;color:inherit;opacity:.9}
#page-market.atl .atl-txt .hl.kp{color:#2D58F5;font-weight:700}

/* matasellos "Financial technology for markets of the future" en el hero,
   donde los países llevan su estampilla */
#page-market.atl .chp-hero .pc-r{display:flex;align-items:center;justify-content:flex-end}
#page-market.atl .atl-postmark{display:block;width:clamp(240px,26vw,400px);height:auto;transform:rotate(-8deg);opacity:.9;pointer-events:none}
@media(max-width:900px){#page-market.atl .atl-postmark{width:200px;margin-top:20px}}
#page-market.atl .chp-hero .postcard{position:relative}
#page-market.atl .chp-hero .pc-r{position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:none}
#page-market.atl .chp-hero .pc-l{max-width:none}
#page-market.atl .chp-hero h1 .mk-name{white-space:nowrap}
/* entrada como un sello: cae grande desde arriba, golpea, rebota apenas y se asienta */
@keyframes atlStamp{
  0%{opacity:0;transform:rotate(-18deg) scale(1.9);filter:blur(6px)}
  55%{opacity:1;transform:rotate(-6deg) scale(.92);filter:blur(0)}
  72%{transform:rotate(-9deg) scale(1.03)}
  86%{transform:rotate(-7.5deg) scale(.99)}
  100%{opacity:.9;transform:rotate(-8deg) scale(1)}}
@keyframes atlStampInk{0%{opacity:0}55%{opacity:.35}100%{opacity:0}}
#page-market.atl .pc-r{isolation:isolate}
#page-market.atl .atl-postmark{animation:atlStamp .9s cubic-bezier(.3,.8,.3,1) .7s both}
#page-market.atl .pc-r::after{content:"";position:absolute;inset:10% 4% 10% 30%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),transparent);animation:atlStampInk .9s ease-out 1.15s both;pointer-events:none}
@media(prefers-reduced-motion:reduce){#page-market.atl .atl-postmark,#page-market.atl .pc-r::after{animation:none}}

/* matasellos junto al título: más chico y más tenue */
#page-market.atl .chp-hero .pc-r{opacity:.5}
#page-market.atl .atl-postmark{width:clamp(170px,17vw,260px)}
/* matasellos: sin golpe de sello, solo aparece con un fundido */
@keyframes atlFade{from{opacity:0}to{opacity:.9}}
#page-market.atl .atl-postmark{animation:atlFade 1.2s ease .5s both;transform:rotate(-8deg)}
#page-market.atl .pc-r::after{display:none}
/* abajo a la izquierda: en la columna vacía de la apertura, chico y tenue */
#page-market.atl .opening{position:relative}
#page-market.atl .atl-pm{position:absolute;left:var(--gut,48px);top:50%;transform:translateY(-50%);width:clamp(170px,17vw,260px);opacity:.5;pointer-events:none}
#page-market.atl .atl-pm .atl-postmark{width:100%}
@media(max-width:900px){#page-market.atl .atl-pm{position:static;transform:none;width:160px;margin:0 0 20px var(--gut,20px)}}

/* hero como BNPL: el video va nítido y el desenfoque cubre sólo la mitad
   izquierda, donde apoya el título, apagándose en degradé */
#page-market.atl .atl-hbg video{filter:saturate(1.1);transform:none}
#page-market.atl .hv-bg .atl-blur{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  -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%);
  background:linear-gradient(90deg,rgba(10,18,64,.5) 0%,rgba(10,18,64,.22) 40%,rgba(10,18,64,0) 60%)}
@media(max-width:900px){
  #page-market.atl .hv-bg .atl-blur{-webkit-mask-image:none;mask-image:none;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(10,18,64,.35)}}
#page-market.atl .hv-full .hero-video.atl-hbg{filter:none;transform:none}

/* hero más bajo: en la primera pantalla ya asoma la sección de abajo */
#page-market.atl .hv-full .chp-hero-in{padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(30px,4vh,48px)}
#page-market.atl .hv-full .opening,#page-market.atl .hv-full .op-r{min-height:0;height:auto}
#page-market.atl .hv-full .op-r{padding-top:clamp(28px,3.4vh,44px);padding-bottom:clamp(30px,3.6vh,48px)}
#page-market.atl .atl-body{padding-top:clamp(40px,5vh,64px)}
/* mobile: hero del atlas a escala */
@media(max-width:820px){
  #page-market.atl .chp-hero{min-height:0!important}
  #page-market.atl .chp-hero h1{font-size:clamp(40px,11.5vw,56px)!important;line-height:1!important}
  #page-market.atl .chp-hero h1 .mk-name{font-size:1em!important;white-space:normal!important;display:block}
  #page-market.atl .chp-hero h1 .tw{font-size:.48em!important;line-height:1.1!important;display:block;margin-top:.35em}
  #page-market.atl .chp-hero-in{padding-top:clamp(96px,26vw,120px)!important;padding-bottom:28px!important}
  #page-market.atl .opening{min-height:0!important}
  #page-market.atl .opening .lede{font-size:15px!important;line-height:1.55!important}
}
@media(max-width:1000px){
  #page-market.atl-v10 .p-reg{grid-template-columns:1fr!important;gap:28px!important;padding-left:20px!important;padding-right:20px!important}
  #page-market.atl-v10 .p-side{position:static!important;height:auto!important;transform:none!important}
}
@media(max-width:820px){
  html body #page-market.atl .hero-shell .chp-hero{min-height:0!important;height:auto!important}
  html body #page-market.atl .hero-shell .chp-hero-in{padding:100px 22px 28px!important}
}
@media(max-width:1000px){#page-market.atl-v10 .p-reg+.p-reg{padding-top:72px!important}}