/* =====================================================================
   Spottune Colombia · legal pages (/legal/privacidad, /legal/cookies,
   /legal/terminos). Scoped to body.page-legal. Tokens only, calm
   reading typography, print-friendly. Global classes (.crumbs, .eyebrow,
   .lead, .callout, .btn*, .table) come from components.css/base.css.
   ===================================================================== */

.page-legal main{background:var(--st-white)}
.page-legal .legal{max-width:calc(760px + 48px);margin:0 auto;padding:clamp(28px,4vw,56px) 24px clamp(64px,8vw,112px)}
.page-legal .legal>*{min-width:0}
.page-legal .legal [id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.page-legal .crumbs{margin-bottom:28px}

/* ---------------------------------------------------------------- head */
.legal-head{padding-bottom:28px;border-bottom:1px solid var(--st-line);margin-bottom:32px}
.legal-head .eyebrow{margin:0 0 14px}
.legal-head h1{font-size:clamp(30px,4.2vw,44px);line-height:1.12;font-weight:var(--w-bold);letter-spacing:-.01em;margin:0 0 16px;color:var(--st-black)}
.legal-head .lead{margin:0 0 18px;max-width:60ch}
.legal-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:var(--fs-caption);font-weight:var(--w-light);line-height:1.5;color:var(--st-gray-text)}
.legal-meta time{font-weight:var(--w-medium);color:var(--st-black)}

/* ---------------------------------------------------------------- table of contents */
.legal-toc{margin:0 0 40px;padding:22px 26px;background:var(--st-cream);border:1px solid var(--st-line);border-radius:var(--r)}
.legal-toc h2{font-size:var(--fs-eyebrow);font-weight:var(--w-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--st-gray-text);margin:0 0 12px;line-height:1.4}
.legal-toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:32px}
.legal-toc li{break-inside:avoid;margin:0 0 8px;font-size:15px;line-height:1.45;font-weight:var(--w-light)}
.legal-toc a{color:var(--st-black);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.legal-toc a:hover{color:var(--st-teal);border-bottom-color:currentColor;text-decoration:none}
@media (max-width:640px){.legal-toc ol{columns:1}.legal-toc{padding:18px 20px}}

/* ---------------------------------------------------------------- body copy */
.legal-body h2{font-size:clamp(21px,2.2vw,26px);font-weight:var(--w-medium);letter-spacing:-.01em;line-height:1.25;margin:44px 0 14px;padding-top:26px;border-top:1px solid var(--st-line);text-wrap:balance}
.legal-body>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body h3{font-size:17px;font-weight:var(--w-medium);letter-spacing:0;margin:26px 0 8px}
.legal-body p,.legal-body li,.legal-body dd,.legal-body dt{font-size:16px;line-height:1.65;font-weight:var(--w-light)}
.legal-body p{margin:0 0 1em}
.legal-body ul,.legal-body ol{margin:0 0 1.1em;padding-left:1.3em}
.legal-body li{margin:0 0 .5em}
.legal-body li::marker{color:var(--st-gray-text)}
.legal-body strong,.legal-body b{font-weight:var(--w-medium)}
.legal-body a{color:var(--st-teal);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--st-gray);text-underline-offset:.16em}
.legal-body a:hover{text-decoration-color:currentColor}
.legal-body code{font-family:var(--font);font-size:.94em;font-weight:var(--w-medium);color:var(--st-black);background:var(--st-cream);border:1px solid var(--st-line);border-radius:var(--r-sm);padding:1px 7px;white-space:nowrap}
.legal-body .callout{margin:0 0 28px}
.legal-body .callout ul{margin-bottom:0}
.legal-body .callout p,.legal-body .callout li{font-size:15px}
.legal-body .note{margin:-6px 0 18px}

/* identification data (dl) */
.legal-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0 0 1.2em;padding:18px 22px;border:1px solid var(--st-line);border-radius:var(--r);background:var(--st-white)}
.legal-dl dt{font-size:13px;font-weight:var(--w-medium);letter-spacing:.02em;color:var(--st-gray-text);padding-top:2px}
.legal-dl dd{margin:0}
@media (max-width:560px){.legal-dl{grid-template-columns:1fr;gap:2px}.legal-dl dd{margin-bottom:10px}}

/* definitions (terms glossary) */
.legal-defs{margin:0 0 1.2em}
.legal-defs dt{font-weight:var(--w-medium);margin-top:10px}
.legal-defs dd{margin:0 0 4px}

/* clearly marked placeholders the client must fill before go-live */
.legal-ph{background:var(--st-cream);color:var(--st-black);border:1px dashed var(--st-gray-text);border-radius:var(--r-sm);padding:0 6px;font-weight:var(--w-medium)}

/* cookie tables (reuse .table-wrap / .table from components.css) */
.legal-body .table-wrap{margin:14px 0 20px}
.legal-body .table{font-size:14px}
.legal-body .table th,.legal-body .table td{padding:12px 16px}
.legal-body .table td{line-height:1.55}
.legal-body .table td:first-child{white-space:nowrap}
.legal-body .table code{white-space:nowrap}

/* inline action row (e.g. cookie preferences button) */
.legal-actions{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 8px}

/* ---------------------------------------------------------------- contact block */
.legal-contact{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;margin:18px 0 0;padding:22px 26px;background:var(--st-cream);border:1px solid var(--st-line);border-radius:var(--r)}
.legal-contact address{margin:0;font-size:15px;line-height:1.6;font-weight:var(--w-light)}
.legal-contact address strong{display:block;font-weight:var(--w-medium);margin-bottom:2px}
.legal-contact .btn{flex:0 0 auto}
@media (max-width:560px){.legal-contact{padding:18px 20px}.legal-contact .btn{width:100%}}

/* ---------------------------------------------------------------- related documents */
.legal-related{margin-top:56px;padding-top:26px;border-top:1px solid var(--st-line)}
.legal-related h2{font-size:var(--fs-eyebrow);font-weight:var(--w-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--st-gray-text);margin:0 0 14px;line-height:1.4}
.legal-related ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.legal-related li{margin:0}
.legal-related a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--st-black);border-radius:var(--r-pill);color:var(--st-black);font-size:14px;font-weight:var(--w-medium);text-decoration:none;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.legal-related a:hover{background:var(--st-black);color:var(--st-white);text-decoration:none}

/* ---------------------------------------------------------------- print */
@media print{
  .page-legal .legal{max-width:100%;padding:0}
  .page-legal .crumbs,.legal-related,.legal-actions,.legal-contact .btn{display:none!important}
  .legal-head,.legal-body h2{border-color:var(--st-gray)}
  .legal-body h2,.legal-body h3{break-after:avoid}
  .legal-toc,.legal-dl,.legal-contact,.legal-body .callout,.legal-body .table-wrap,.legal-body tr{break-inside:avoid}
  .legal-toc,.legal-contact,.legal-body .callout,.legal-body code,.legal-ph{background:none;border-color:var(--st-gray)}
  .legal-body p,.legal-body li,.legal-body dd,.legal-body dt{font-size:11pt;line-height:1.5}
  .legal-body a{color:var(--st-black);text-decoration:underline}
  .legal-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:var(--st-gray-text);word-break:break-all}
  .legal-body a[href^="/"]::after{content:" (spottune.com.co" attr(href) ")";font-size:9pt;color:var(--st-gray-text)}
  .legal-toc a::after,.legal-body a[href^="#"]::after,.legal-body a[href^="mailto:"]::after{content:none!important}
  .legal-head::after{content:"spottune.com.co · Spottune Colombia (Audiocity) · WhatsApp +57 301 794 9887 · comercial@audiocity.com.co";display:block;margin-top:12px;font-size:9pt;font-weight:var(--w-light);color:var(--st-gray-text)}
}