/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--gmint);z-index:1001;transition:width .1s linear;width:0}

/* ============================================================
   HERO — LEGAL (centered)
   ============================================================ */
.hero{padding:100px 0 56px;text-align:center}
.h-updated{font-family:var(--m);font-size:11px;color:var(--muted);letter-spacing:.5px}

/* ============================================================
   LEGAL LAYOUT — SIDEBAR + CONTENT
   ============================================================ */
.legal-section{padding:40px 0 0}
.lg-layout{display:flex;flex-direction:column;gap:0;padding:40px 0 0;max-width:820px;margin:0 auto}

/* SIDEBAR TOC */
.lg-side{display:none}
.lg-side-inner{position:sticky;top:90px}
.toc{margin-bottom:28px}
.toc-title{font-family:var(--m);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc a{display:block;font-size:12px;color:var(--muted);padding:5px 0 5px 14px;border-left:2px solid var(--bdr);transition:.2s;line-height:1.4}
.toc a:hover,.toc a.active{color:var(--mint);border-left-color:var(--mint)}

/* ============================================================
   LEGAL BODY — PROSE
   ============================================================ */
.lg-body{min-width:0;flex:1}
.prose{font-size:14px;color:rgba(255,255,255,.78);line-height:1.8}
.prose h2{font-size:clamp(18px,3vw,24px);font-weight:700;letter-spacing:-.5px;margin:40px 0 14px;color:var(--white);scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(15px,2.2vw,18px);font-weight:600;letter-spacing:-.2px;margin:24px 0 10px;color:var(--white)}
.prose p{margin-bottom:16px}
.prose a{color:var(--mint);text-decoration:underline;text-decoration-color:rgba(100,228,168,.3);text-underline-offset:3px;transition:.2s}
.prose a:hover{text-decoration-color:var(--mint)}
.prose strong{color:var(--white);font-weight:600}
.prose ul,.prose ol{margin:0 0 16px 20px;color:rgba(255,255,255,.72)}
.prose li{margin-bottom:6px;padding-left:4px}
.prose li::marker{color:var(--mint)}
.prose hr{border:none;height:1px;background:var(--bdr);margin:32px 0}

/* TABLE */
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:13px}
.prose th{text-align:left;padding:10px 14px;background:rgba(100,228,168,.06);border:1px solid var(--bdr);font-weight:600;color:var(--white);font-size:12px}
.prose td{padding:10px 14px;border:1px solid var(--bdr);color:rgba(255,255,255,.72);vertical-align:top}
.prose tr:hover td{background:rgba(255,255,255,.02)}

/* ============================================================
   CALLOUT
   ============================================================ */
.callout{background:rgba(100,228,168,.05);border:1px solid rgba(100,228,168,.15);border-radius:12px;padding:16px 18px;margin:20px 0;display:flex;gap:12px}
.callout-ic{font-size:18px;flex-shrink:0;margin-top:2px}
.callout p{font-size:13px;color:rgba(255,255,255,.72);line-height:1.6;margin:0}
.callout strong{color:var(--white)}

/* WARNING variant */
.callout-w{background:rgba(255,180,50,.06);border:1px solid rgba(255,180,50,.2)}
.callout-w strong{color:#ffcb57}

/* INFO variant */
.callout-i{background:rgba(100,148,237,.06);border:1px solid rgba(100,148,237,.2)}
.callout-i strong{color:#93b5f7}

/* ============================================================
   SECTION NUMBER
   ============================================================ */
.s-num{font-family:var(--m);font-size:11px;color:var(--mint);letter-spacing:.5px;display:block;margin-bottom:4px}

/* ============================================================
   RELATED LINKS
   ============================================================ */
.rl-g{display:grid;grid-template-columns:1fr;gap:12px;margin-top:40px;padding-top:32px;border-top:1px solid var(--bdr)}
.rl{display:flex;align-items:center;gap:14px;padding:16px;background:var(--bgc);border:1px solid var(--bdr);border-radius:12px;transition:.3s}
.rl:hover{border-color:rgba(100,228,168,.18);transform:translateY(-2px);background:rgba(255,255,255,.055)}
.rl-ic{width:40px;height:40px;min-width:40px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:18px}
.rl h4{font-size:14px;font-weight:600;margin-bottom:2px}
.rl p{font-size:11px;color:var(--muted)}

/* ============================================================
   RISK LEVEL CARDS (riesgos)
   ============================================================ */
.rsk-g{display:grid;grid-template-columns:1fr;gap:12px;margin:24px 0}
.rsk{padding:18px;background:var(--bgc);border:1px solid var(--bdr);border-radius:12px;display:flex;gap:14px;transition:.3s}
.rsk:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.rsk-ic{width:40px;height:40px;min-width:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
.rsk-ic--high{background:rgba(239,68,68,.12);color:#ef4444}
.rsk-ic--med{background:rgba(251,191,36,.12);color:#fbbf24}
.rsk-ic--low{background:rgba(100,228,168,.1);color:var(--mint)}
.rsk h4{font-size:14px;font-weight:600;margin-bottom:3px}
.rsk p{font-size:12px;color:var(--muted);line-height:1.55}
.rsk-lvl{font-family:var(--m);font-size:9px;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;display:inline-block;margin-top:6px}
.rsk-lvl--high{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.rsk-lvl--med{background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.2)}
.rsk-lvl--low{background:rgba(100,228,168,.08);color:var(--mint);border:1px solid rgba(100,228,168,.15)}

/* ============================================================
   COMPLIANCE PILLAR CARDS (compliance)
   ============================================================ */
.cp-g{display:grid;grid-template-columns:1fr;gap:12px;margin:24px 0}
.cp{padding:20px;background:var(--bgc);border:1px solid var(--bdr);border-radius:12px;display:flex;gap:14px;transition:.3s}
.cp:hover{border-color:rgba(100,228,168,.15);background:rgba(255,255,255,.05)}
.cp-ic{width:44px;height:44px;min-width:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--grad)}
.cp h4{font-size:14px;font-weight:600;margin-bottom:4px}
.cp p{font-size:12px;color:var(--muted);line-height:1.55}

/* ============================================================
   TIMELINE (compliance)
   ============================================================ */
.tl{position:relative;margin:24px 0;padding-left:24px}
.tl::before{content:'';position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--bdr)}
.tl-i{position:relative;margin-bottom:20px}
.tl-i:last-child{margin-bottom:0}
.tl-i::before{content:'';position:absolute;left:-24px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--mint);z-index:1}
.tl-i h4{font-size:13px;font-weight:600;margin-bottom:2px}
.tl-i p{font-size:12px;color:var(--muted);line-height:1.55}
.tl-i .tl-tag{font-family:var(--m);font-size:10px;color:var(--mint);letter-spacing:.5px;margin-bottom:4px;display:block}

/* ============================================================
   600px — TABLET
   ============================================================ */
@media(min-width:600px){
  .hero{padding:110px 0 70px}
  .rsk-g{grid-template-columns:repeat(2,1fr)}
  .cp-g{grid-template-columns:repeat(2,1fr)}
  .rl-g{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ============================================================
   960px — DESKTOP
   ============================================================ */
@media(min-width:960px){
  .hero{padding:140px 0 80px}
  .lg-layout{flex-direction:row;gap:48px;max-width:960px}
  .lg-side{display:block;width:200px;flex-shrink:0;order:-1}
  .lg-body{min-width:0;flex:1}
}