/* ============================================================
   SPENCER ENTERTAINMENT — PÁGINAS LEGALES
   Lectura cómoda y lenguaje claro. Un documento legal que no
   se entiende no protege a nadie: ni al cliente ni a la empresa.
   ============================================================ */

.legal { padding-block: var(--sp-16) var(--sp-24); }

.legal__head {
  padding-bottom: var(--sp-8);
  margin-bottom: var(--sp-10);
  border-bottom: 1px solid var(--c-border-soft);
}
.legal__title { margin-block: var(--sp-4) var(--sp-4); }
.legal__updated {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--c-text-4);
}
.legal__updated svg { width: 14px; height: 14px; }

/* Resumen en lenguaje sencillo antes del texto formal.
   Nadie lee 3.000 palabras: esto sí se lee, y es lo que
   realmente genera confianza. */
.legal__tldr {
  position: relative; overflow: hidden;
  padding: var(--sp-6);
  margin-bottom: var(--sp-12);
  background:
    radial-gradient(520px circle at 8% -40%, rgba(212,175,55,.10), transparent 62%),
    var(--c-card);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.legal__tldr::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--hl-gold);
}
.legal__tldr h2 {
  font-size: var(--fs-base); font-weight: var(--fw-semi);
  margin-bottom: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--c-gold-lt);
}
.legal__tldr h2 svg { width: 18px; height: 18px; }
.legal__tldr ul { display: grid; gap: var(--sp-3); }
.legal__tldr li {
  display: flex; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.6;
}
.legal__tldr li svg {
  width: 16px; height: 16px; color: var(--c-gold);
  flex-shrink: 0; margin-top: 3px;
}

/* --- Contenido --- */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: var(--fs-h3); font-weight: var(--fw-semi);
  margin-top: var(--sp-12); margin-bottom: var(--sp-4);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-border-soft);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-size: var(--fs-base); font-weight: var(--fw-semi);
  margin-top: var(--sp-7); margin-bottom: var(--sp-3);
}
.prose p, .prose li {
  color: var(--c-text-2);
  font-size: var(--fs-base);
  line-height: 1.8;
}
.prose p + p { margin-top: var(--sp-4); }
.prose ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.prose ul li { display: flex; gap: var(--sp-3); }
.prose ul li::before {
  content: ""; flex-shrink: 0;
  width: 5px; height: 5px; margin-top: 12px;
  border-radius: 50%; background: var(--c-gold);
}
.prose strong { color: var(--c-text); font-weight: var(--fw-semi); }
.prose a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--c-gold-lt); }

/* Dato pendiente de completar antes de publicar */
.pendiente {
  display: inline-block;
  padding: 1px 8px; border-radius: var(--r-xs);
  background: rgba(245,158,11,.14);
  border: 1px dashed rgba(245,158,11,.5);
  color: var(--c-warning);
  font-size: .9em; font-weight: var(--fw-medium);
}

/* Bloque de contacto al final */
.legal__contact {
  margin-top: var(--sp-12);
  padding: var(--sp-6);
  background: var(--c-card);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.legal__contact h2 { margin: 0 0 var(--sp-4); padding: 0; border: 0; font-size: var(--fs-base); }
.legal__contact .footer__contact { gap: var(--sp-3); }

/* Navegación entre documentos legales */
.legal__nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-border-soft);
}
.legal__nav a {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); color: var(--c-text-3);
  background: var(--c-glass);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-full);
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.legal__nav a:hover { color: var(--c-gold); border-color: rgba(212,175,55,.3); }
.legal__nav a[aria-current="page"] {
  color: var(--c-gold-lt);
  border-color: rgba(212,175,55,.34);
  background: var(--c-gold-soft);
}