/* ==========================================================================
   LEGAL.CSS · Páginas legales (Aviso, Privacidad, Cookies)
   ==========================================================================
   - Hero ink con breadcrumb
   - Body con TOC en columnas
   - Tablas legales para datos estructurados
   - Callouts de resumen
   
   Cargado por: /legal/aviso-legal/, /legal/privacidad/, /legal/cookies/
   ========================================================================== */

/* ============================================================
   LEGAL · Aviso legal, Privacidad, Cookies
   ============================================================ */
.legal-hero {
  background: var(--c-ink); color: var(--c-bone);
  padding: clamp(80px, 11vh, 130px) 0 clamp(50px, 6vh, 80px);
  position: relative; overflow: hidden;
}
.legal-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(148, 250, 166, .06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask: radial-gradient(ellipse at 30% 40%, black, transparent 75%);
  -webkit-mask: radial-gradient(ellipse at 30% 40%, black, transparent 75%);
  pointer-events: none;
}
.legal-hero-content { max-width: 820px; position: relative; z-index: 2; }
.legal-hero .breadcrumb {
  margin-bottom: 24px; font-family: var(--ff-mono); font-size: 11px;
  color: var(--c-grey-300); letter-spacing: .04em;
}
.legal-hero .breadcrumb a { color: var(--c-grey-100); transition: color .2s ease; }
.legal-hero .breadcrumb a:hover { color: var(--c-mint); }
.legal-hero .breadcrumb .sep { margin: 0 8px; opacity: .5; }
.legal-hero h1 {
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(36px, 5vw, 56px); line-height: 1.05;
  letter-spacing: -.035em; color: var(--c-bone); margin-bottom: 18px;
}
.legal-hero h1 .italic { color: var(--c-mint); font-style: italic; font-weight: 600; }
.legal-hero p.lede {
  font-size: 16px; line-height: 1.6; color: var(--c-grey-100); max-width: 640px;
}
.legal-hero .legal-meta {
  display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px;
  padding-top: 24px; border-top: 1px solid rgba(148, 250, 166, .12);
  font-family: var(--ff-mono); font-size: 11px; color: var(--c-grey-300);
  letter-spacing: .04em;
}

.legal-body-wrap {
  background: var(--c-paper); padding: clamp(50px, 7vh, 90px) 0 clamp(60px, 8vh, 110px);
}
.legal-body {
  max-width: 760px; margin: 0 auto; padding: 0 var(--gutter);
  font-family: var(--ff-sans); font-size: 16px; line-height: 1.7; color: var(--c-grey-700);
}
.legal-body > * + * { margin-top: 1.2em; }
.legal-body h2 {
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2;
  letter-spacing: -.025em; color: var(--c-ink);
  margin-top: 2em; margin-bottom: .5em; scroll-margin-top: 100px;
}
.legal-body h2 .italic { color: var(--c-mint-deep); font-style: italic; font-weight: 600; }
.legal-body h3 {
  font-family: var(--ff-sans); font-weight: 700;
  font-size: 18px; line-height: 1.3;
  color: var(--c-ink); margin-top: 1.6em; margin-bottom: .4em;
  scroll-margin-top: 100px;
}
.legal-body p strong { color: var(--c-ink); font-weight: 600; }
.legal-body a {
  color: var(--c-mint-deep); font-weight: 500;
  border-bottom: 1px solid rgba(79, 208, 106, .35);
}
.legal-body a:hover { border-color: var(--c-mint-deep); color: var(--c-ink); }
.legal-body ul, .legal-body ol { padding-left: 22px; margin: .8em 0; }
.legal-body li { margin-bottom: 6px; line-height: 1.6; }
.legal-body li::marker { color: var(--c-mint-deep); }

.legal-body .legal-table-wrap { overflow-x: auto; margin: 1.4em 0; border-radius: 12px; border: 1px solid rgba(3, 33, 40, .08); }
.legal-body table {
  width: 100%; border-collapse: collapse;
  font-family: var(--ff-sans); font-size: 14px; background: white;
}
.legal-body th {
  background: rgba(3, 33, 40, .04); font-weight: 600; color: var(--c-ink);
  text-align: left; padding: 10px 12px;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid rgba(3, 33, 40, .08);
}
.legal-body td {
  padding: 10px 12px; line-height: 1.5;
  border-bottom: 1px solid rgba(3, 33, 40, .05);
  color: var(--c-grey-700); vertical-align: top;
}
.legal-body td strong { color: var(--c-ink); }
.legal-body tr:last-child td { border-bottom: 0; }

.legal-body .legal-callout {
  background: linear-gradient(135deg, rgba(79, 208, 106, .08), rgba(79, 208, 106, .03));
  border: 1px solid rgba(79, 208, 106, .2);
  border-radius: 12px; padding: 18px 22px; margin: 1.4em 0;
  font-size: 14.5px; line-height: 1.6;
}
.legal-body .legal-callout strong { color: var(--c-ink); }

.legal-body .legal-toc {
  background: white; border: 1px solid rgba(3, 33, 40, .08);
  border-radius: 14px; padding: 22px 26px; margin-bottom: 36px;
}
.legal-body .legal-toc h2 {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-grey-500); font-weight: 600; margin: 0 0 12px;
  font-family: var(--ff-mono);
}
.legal-body .legal-toc ol {
  list-style: decimal; padding-left: 20px; margin: 0;
  columns: 2; column-gap: 36px;
}
.legal-body .legal-toc li { margin-bottom: 4px; font-size: 14px; }
.legal-body .legal-toc a { border-bottom: none; }
.legal-body .legal-toc a:hover { border-bottom: 1px solid rgba(79, 208, 106, .35); }
@media (max-width: 640px) { .legal-body .legal-toc ol { columns: 1; } }