/* ═══ Legal documents in the «ex» look (/terms, /oferta, /privacy, /refund-policy, /acceptable-use-policy,
   /fair-usage, /consent). Loaded after ex-ui.css and scoped to .ex: the documents keep their markup and
   wording (prod must stay == git), only the look changes. Contents sticks on the left on wide screens. ═══ */
.ex .legal-hero{max-width:1320px;margin:0 auto;padding:clamp(28px,4vw,56px) var(--pad) clamp(28px,3.5vw,48px);text-align:left}
.ex .legal-hero h1{margin:clamp(20px,3vw,36px) 0 0;max-width:20ch;font-family:var(--disp);font-weight:600;font-size:clamp(34px,4.8vw,68px);line-height:1.03;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.ex .legal-meta{justify-content:flex-start;margin-top:20px;gap:10px 16px;color:var(--mu);font-size:14px}
.ex .lm-badge{border:0;padding:6px 12px;background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold-tx);font-size:13px;font-weight:600}
.ex .section-divider{display:none}

.ex .legal-wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad) clamp(64px,8vw,120px)}
/* with contents: two columns — the contents spans every row so it can stick, the rest goes right */
.ex .legal-wrap:has(>.legal-toc){display:grid;grid-template-columns:280px minmax(0,1fr);gap:0 clamp(32px,5vw,80px);align-items:start}
.ex .legal-wrap:has(>.legal-toc)>.legal-toc{grid-column:1;grid-row:1 / span 40}
.ex .legal-wrap:has(>.legal-toc)>:not(.legal-toc){grid-column:2}
.ex .legal-toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;margin:0;padding:22px;border:0;border-radius:20px;background:var(--g1)}
.ex .legal-toc h2{margin:0 0 12px;font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mu)}
.ex .legal-toc ol{columns:1}
.ex .legal-toc li{margin-bottom:8px;font-size:14.5px;line-height:1.35}
.ex .legal-toc a{color:var(--mu);transition:color .2s}
.ex .legal-toc a:hover{color:var(--ink)}

.ex .legal-body{max-width:76ch}
.ex .legal-body section{margin-bottom:clamp(32px,3.5vw,48px);scroll-margin-top:96px}
.ex .legal-body h2{margin:0 0 14px;font-family:var(--disp);font-weight:600;font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.03em;color:var(--ink)}
.ex .legal-body h2 .num{color:var(--gold-tx)}
.ex .legal-body p,.ex .legal-body li{font-size:16px;line-height:1.7;color:var(--mu)}
.ex .legal-body ul{padding-left:1.25em}
.ex .legal-body li::marker{color:var(--gold)}
.ex .legal-body strong{color:var(--ink)}
.ex .legal-body a,.ex .legal-disclaimer a{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 60%,transparent);text-underline-offset:3px}
.ex .legal-lead{color:var(--ink)}
.ex .legal-contact-box{max-width:76ch;margin-top:20px;padding:24px;border:0;border-radius:20px;background:var(--g1);box-shadow:inset 0 0 0 2px var(--gold)}
.ex .legal-contact-box h3{margin:0 0 8px;font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.03em;color:var(--ink)}
.ex .legal-contact-box p{font-size:15px;color:var(--mu)}
.ex .legal-contact-box a{color:var(--gold-tx)}
.ex .legal-disclaimer{max-width:76ch;margin-top:20px;color:var(--mu);font-size:14px;line-height:1.6}
.ex .legal-requisites{padding:20px 22px;border:0;border-radius:16px;background:var(--g1)}
.ex .legal-requisites dt{color:var(--mu);font-size:14.5px}
.ex .legal-requisites dd{color:var(--ink);font-size:15px}

@media (max-width:1023px){
  .ex .legal-wrap:has(>.legal-toc){display:block}
  .ex .legal-toc{position:static;max-height:none;margin-bottom:clamp(28px,4vw,40px)}
  .ex .legal-toc ol{columns:2;column-gap:24px}
}
@media (max-width:639px){.ex .legal-toc ol{columns:1}}
@media print{.ex .legal-toc{display:none}.ex .legal-wrap:has(>.legal-toc){display:block}}