/* COMPRA_SEGURA_V2: the shop's «Compra segura» page (CMS BJM_TRUST_CMS_ID), always light like the storefront.
   Same tokens and font as «Cómo comprar». Documents are real Suite templates with sample data. */
@font-face{font-family:"BJM HowToBuy Manrope";src:url("../../../../themes/classic-pablito/assets/fonts/bjm-how-to-buy-manrope.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
body#cms:has(#bjm-safe) #main>.page-header{display:none}
body#cms .bjm-safe-page{padding:0;border:0;box-shadow:none;background:#fff}
#bjm-safe{--brand:#7828C8;--brand-ink:#5a1d99;--brand-wash:#f4eefc;--ink:#17141c;--muted:#67616f;--line:#ebe7f0;--wash:#f8f6fb;--paper:#fff;--desk:#efeaf5;--amber:#fff6e0;--amber-line:#f0d99a;--amber-ink:#6b4a00;--font:"BJM HowToBuy Manrope","Segoe UI",system-ui,sans-serif;color-scheme:light;
 max-width:1280px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--font);text-align:left}
#bjm-safe *{box-sizing:border-box}
#bjm-safe a{color:inherit}
#bjm-safe button{font:inherit}
#bjm-safe a:focus,#bjm-safe button:focus{outline:0}
#bjm-safe a:focus-visible,#bjm-safe button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
#bjm-safe h1,#bjm-safe h2{color:var(--ink);font-family:var(--font);text-transform:none}
#bjm-safe p{margin:0}

#bjm-safe .hero{padding-block:24px 56px;display:grid;gap:18px;max-width:860px}
#bjm-safe .eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
#bjm-safe h1{margin:0;font-size:clamp(34px,4.6vw,56px);line-height:1.05;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
#bjm-safe h1 em{font-style:normal;color:var(--brand)}
#bjm-safe .lead{font-size:19px;color:var(--muted);max-width:62ch}
#bjm-safe .acts{display:flex;gap:10px;flex-wrap:wrap}
#bjm-safe .btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding-inline:20px;border-radius:14px;font-weight:800;font-size:15px;text-decoration:none;border:0;cursor:pointer}
#bjm-safe .btn.p{background:var(--brand);color:#fff}
#bjm-safe .btn.s{background:var(--brand-wash);color:var(--brand-ink)}

#bjm-safe .blk{padding-block:56px;border-top:1px solid var(--line);scroll-margin-top:90px}
#bjm-safe h2{margin:0 0 6px;font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.01em;font-weight:800;text-wrap:balance}
#bjm-safe .sub{color:var(--muted);margin-bottom:28px}
#bjm-safe .two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
#bjm-safe .acct{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center}
#bjm-safe .two>*,#bjm-safe .acct>*,#bjm-safe .viewer>*{min-width:0}
#bjm-safe .prose{display:grid;gap:14px;max-width:52ch}
#bjm-safe .prose .k{font-size:18px}

#bjm-safe .reg{border-top:2px solid var(--ink);margin:0}
#bjm-safe .reg>div{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
#bjm-safe .reg dt{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:3px}
#bjm-safe .reg dd{margin:0;font-size:17px;font-weight:600;overflow-wrap:anywhere}
#bjm-safe .reg dd a{text-decoration:none}
#bjm-safe .mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
#bjm-safe .reg .chk{display:inline-flex;align-items:center;gap:4px;margin-left:10px;font-size:14px;font-weight:700;color:var(--brand-ink);text-decoration:none;border-bottom:1.5px solid currentColor}
#bjm-safe .reg .hint{display:block;margin-top:4px;font-size:13.5px;font-weight:500;color:var(--muted)}

#bjm-safe .zoom{position:relative;margin:0;border-radius:6px;background:#fff;box-shadow:0 1px 0 var(--line),0 18px 40px rgba(60,30,110,.12);overflow:hidden}
#bjm-safe .zoom .img{aspect-ratio:3.05;background-repeat:no-repeat;background-size:212.8% auto;background-position:0 90.6%}
#bjm-safe .zoom .mark{position:absolute;left:3.6%;top:18.5%;width:58%;height:11.5%;background:rgba(255,214,0,.32);border-radius:3px;mix-blend-mode:multiply}
#bjm-safe .zoom figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);background:var(--wash)}
#bjm-safe .never{margin-top:8px;border:1px solid var(--amber-line);background:var(--amber);border-radius:12px;padding:16px 18px;color:var(--amber-ink)}
#bjm-safe .never b{display:block;color:#3d2a00;font-size:17px;margin-bottom:4px}

#bjm-safe .viewer{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
#bjm-safe .viewer.js{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
#bjm-safe .steps{display:none}
#bjm-safe .viewer.js .steps{display:grid;gap:4px;align-content:start}
#bjm-safe .step{position:relative;display:grid;gap:4px;width:100%;text-align:left;border:0;background:none;border-radius:12px;padding:16px 18px 16px 22px;cursor:pointer;color:var(--muted)}
#bjm-safe .step::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--line)}
#bjm-safe .step .bar{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--brand);transform:scaleY(0);transform-origin:top}
#bjm-safe .step .when{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
#bjm-safe .step .t{font-size:20px;font-weight:800;color:var(--ink);line-height:1.2}
#bjm-safe .step .d{display:none;font-size:15px}
#bjm-safe .step[aria-selected=true]{background:var(--wash);color:var(--ink)}
#bjm-safe .step[aria-selected=true] .when{color:var(--brand)}
#bjm-safe .step[aria-selected=true] .d{display:block;color:var(--muted)}
#bjm-safe .step[aria-selected=true] .bar{transform:none}
#bjm-safe .run .step[aria-selected=true] .bar{transform:scaleY(0);animation:bjmSafeFill 7s linear forwards}
#bjm-safe .paused .step[aria-selected=true] .bar{animation-play-state:paused}
@keyframes bjmSafeFill{to{transform:scaleY(1)}}
#bjm-safe .desk{background:var(--desk);border-radius:18px;padding:clamp(18px,3vw,40px);display:grid;gap:40px}
#bjm-safe .viewer.js .desk{gap:0}
#bjm-safe .doc{margin:0;display:grid;gap:18px}
#bjm-safe .doc[hidden]{display:none}
#bjm-safe .stepd{display:none;color:var(--muted)}
#bjm-safe .viewer:not(.js) .stepd{display:block;font-weight:600;color:var(--ink)}
#bjm-safe .cap{margin:0 auto -6px;max-width:640px;width:100%;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a7f99}
#bjm-safe .sheet{position:relative;margin:0 auto;width:100%;max-width:640px;background:#fff;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 20px 50px rgba(60,30,110,.16)}
#bjm-safe .sheet img{display:block;width:100%;height:auto;border-radius:4px}
#bjm-safe .pin{position:absolute;width:28px;height:28px;margin-top:-14px;border-radius:50%;border:2px solid #fff;background:var(--ink);color:#fff;font-weight:800;font-size:13px;line-height:24px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.25);transition:transform .15s,background-color .15s}
#bjm-safe .pin-l{left:-14px}
#bjm-safe .pin-r{right:-14px}
#bjm-safe .pin.on{background:var(--brand);transform:scale(1.15)}
#bjm-safe .notes{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px;max-width:640px;width:100%}
#bjm-safe .notes li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.45;padding:4px 6px;border-radius:8px}
#bjm-safe .notes li i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:12px;line-height:24px;text-align:center}
#bjm-safe .notes li.on{background:#fff}
#bjm-safe .notes li.on i{background:var(--brand)}
#bjm-safe .doc.is-in{animation:bjmSafeFade .35s ease}
@keyframes bjmSafeFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

#bjm-safe .end{margin-block:8px 56px;background:var(--brand);color:#fff;border-radius:22px;padding:clamp(22px,3.5vw,40px);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
#bjm-safe .end h2{color:#fff;margin:0 0 4px}
#bjm-safe .end p{color:#eadcfb}
#bjm-safe .end .btn{background:#fff;color:var(--brand-ink)}

@media (prefers-reduced-motion:reduce){#bjm-safe .doc.is-in{animation:none}#bjm-safe .pin{transition:none}}
@media (max-width:760px){
 #bjm-safe .hero{padding-block:16px 40px}
 #bjm-safe .lead{font-size:17px}
 #bjm-safe .blk{padding-block:40px}
 #bjm-safe .two,#bjm-safe .acct,#bjm-safe .viewer.js{grid-template-columns:minmax(0,1fr)}
 #bjm-safe .acct .zoom{order:2}
 #bjm-safe .reg>div{grid-template-columns:minmax(0,1fr);gap:2px}
 #bjm-safe .reg .chk{display:flex;width:max-content;margin:6px 0 0}
 #bjm-safe .viewer.js .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #bjm-safe .step{padding:12px 8px 14px;text-align:center;border-radius:10px;background:var(--wash)}
 #bjm-safe .step::before{left:10px;right:10px;top:auto;bottom:0;width:auto;height:3px}
 #bjm-safe .step .bar{left:10px;right:10px;top:auto;bottom:0;width:auto;height:3px;transform:scaleX(0);transform-origin:left}
 #bjm-safe .step[aria-selected=true]{background:var(--brand-wash)}
 #bjm-safe .step[aria-selected=true] .bar{transform:none}
 #bjm-safe .run .step[aria-selected=true] .bar{transform:scaleX(0);animation-name:bjmSafeFillX}
 #bjm-safe .step .when{font-size:10.5px;letter-spacing:.06em}
 #bjm-safe .step .t{font-size:15px}
 #bjm-safe .step[aria-selected=true] .d{display:none}
 #bjm-safe .viewer.js .stepd{display:block}
 #bjm-safe .desk{padding:16px 24px;border-radius:14px}
 #bjm-safe .notes{grid-template-columns:minmax(0,1fr)}
 #bjm-safe .pin{width:24px;height:24px;margin-top:-12px;font-size:12px;line-height:20px}
 #bjm-safe .pin-l{left:-22px}
 #bjm-safe .pin-r{right:-22px}
 #bjm-safe .end{border-radius:16px}
}
@keyframes bjmSafeFillX{to{transform:scaleX(1)}}