/* =============================================
   LEGAL PAGE — Documentos legales
   Reutiliza los tokens y componentes de style.css
   (nav, footer, botones, .container, scroll-top).
   ============================================= */

/* ---- Encabezado de la página legal ---- */
.legal-hero {
  position: relative;
  padding: var(--spacing-60) 0 var(--spacing-32);
  background-color: var(--color-eclipse-gray);
  border-bottom: 1px solid var(--color-lunar-violet);
  overflow: hidden;
}

.legal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-electric-cyan);
  opacity: 0.07;
  pointer-events: none;
}

.legal-hero > .container {
  position: relative;
  z-index: 1;
}

.legal-hero__sub {
  margin-top: var(--spacing-16);
  max-width: 640px;
  color: var(--color-faded-gray);
  font-size: 17px;
}

/* ---- Layout: submenú + contenido ---- */
.legal-section {
  padding-top: var(--spacing-48);
}

.legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-32);
  align-items: start;
}

/* ---- Submenú lateral ---- */
.legal-nav {
  min-width: 0;
}

.legal-nav__title {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faded-gray);
  margin-bottom: var(--spacing-12);
  padding-left: var(--spacing-4);
}

.legal-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.legal-nav__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--color-faded-gray);
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.legal-nav__link:hover {
  color: var(--color-light-ghost);
  background-color: rgba(41, 42, 77, 0.35);
}

.legal-nav__link.is-active {
  color: var(--color-light-ghost);
  background-color: var(--color-twilight-violet);
  border-color: var(--color-lunar-violet);
  font-weight: var(--font-weight-medium);
}

.legal-nav__num {
  font-size: 12px;
  font-feature-settings: "tnum";
  color: var(--color-steel-gray);
  min-width: 20px;
}

.legal-nav__link.is-active .legal-nav__num {
  color: var(--color-electric-cyan);
}

/* ---- Contenido del documento ---- */
.legal-content {
  min-width: 0;
}

.legal-doc[hidden] {
  display: none;
}

.legal-doc {
  background-color: var(--color-twilight-violet);
  border: var(--card-border);
  border-radius: var(--radius-xl);
  padding: clamp(var(--spacing-24), 4vw, var(--spacing-48));
  animation: legal-fade 0.25s ease;
}

@keyframes legal-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.legal-doc__title {
  font-family: var(--font-index);
  font-size: clamp(24px, 3.5vw, var(--text-heading));
  line-height: var(--leading-heading);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-16);
}

.legal-doc h2 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-36);
  margin-bottom: var(--spacing-12);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-gunmetal-gray);
}

.legal-doc h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.legal-doc h3 {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-24);
  margin-bottom: var(--spacing-8);
}

.legal-doc h4 {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-faded-gray);
  margin-top: var(--spacing-20);
  margin-bottom: var(--spacing-8);
}

.legal-doc p {
  color: var(--color-faded-gray);
  margin-bottom: var(--spacing-16);
  line-height: 1.7;
}

.legal-doc strong {
  color: var(--color-light-ghost);
  font-weight: var(--font-weight-semibold);
}

/* Bloque de metadatos (última actualización / versión) */
.legal-doc__title + p {
  font-size: 14px;
  color: var(--color-steel-gray);
  border-left: 2px solid var(--color-lunar-violet);
  padding-left: var(--spacing-12);
}

.legal-doc__title + p strong {
  color: var(--color-faded-gray);
}

/* ---- Listas ---- */
.legal-list {
  list-style: none;
  margin: 0 0 var(--spacing-16);
  padding: 0;
}

.legal-list li {
  position: relative;
  padding-left: var(--spacing-24);
  margin-bottom: var(--spacing-8);
  color: var(--color-faded-gray);
  line-height: 1.7;
}

ul.legal-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-electric-cyan);
}

ol.legal-list {
  counter-reset: legal-ol;
}

ol.legal-list > li {
  counter-increment: legal-ol;
}

ol.legal-list > li::before {
  content: counter(legal-ol);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-electric-cyan);
  font-feature-settings: "tnum";
}

/* ---- Blockquote / callout ---- */
.legal-quote {
  background-color: rgba(21, 46, 88, 0.28);
  border-left: 3px solid var(--color-vibrant-blue);
  border-radius: var(--radius-sm);
  padding: var(--spacing-16) var(--spacing-20);
  margin: 0 0 var(--spacing-20);
}

.legal-quote p {
  margin-bottom: var(--spacing-8);
  color: var(--color-light-ghost);
}

.legal-quote p:last-child {
  margin-bottom: 0;
}

/* ---- Tablas ---- */
.table-responsive {
  overflow-x: auto;
  margin: 0 0 var(--spacing-20);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gunmetal-gray);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: var(--font-inter);
}

.legal-table th {
  background: var(--color-gunmetal-gray);
  color: var(--color-faded-gray);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-12);
  text-align: left;
  white-space: nowrap;
}

.legal-table td {
  padding: var(--spacing-12);
  border-top: 1px solid var(--color-gunmetal-gray);
  color: var(--color-faded-gray);
  vertical-align: top;
}

.legal-table td strong {
  color: var(--color-light-ghost);
}

.legal-table tbody tr:hover {
  background: rgba(41, 42, 77, 0.25);
}

/* ---- Código ---- */
.legal-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--color-ash-slate);
  border: 1px solid var(--color-gunmetal-gray);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--color-golden-glow);
}

.legal-code {
  background: var(--color-void-black);
  border: 1px solid var(--color-gunmetal-gray);
  border-radius: var(--radius-md);
  padding: var(--spacing-16);
  overflow-x: auto;
  margin: 0 0 var(--spacing-20);
}

.legal-code code {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-faded-gray);
  font-size: 13px;
  white-space: pre;
}

/* ---- Separador ---- */
.legal-sep {
  display: none; /* las secciones ya se separan con el borde superior de h2 */
}

/* =============================================
   DESKTOP (>= 900px)
   ============================================= */
@media (min-width: 900px) {
  .legal-layout {
    grid-template-columns: 260px 1fr;
    gap: var(--spacing-48);
  }

  .legal-nav {
    position: sticky;
    top: calc(var(--nav-height) + var(--spacing-20));
  }
}

/* =============================================
   MÓVIL (< 900px): submenú horizontal deslizable
   ============================================= */
@media (max-width: 899px) {
  .legal-nav {
    position: sticky;
    top: var(--nav-height);
    z-index: 50;
    margin: 0 calc(-1 * var(--spacing-24));
    padding: var(--spacing-12) var(--spacing-24);
    background-color: rgba(4, 6, 28, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-lunar-violet);
  }

  .legal-nav__title {
    display: none;
  }

  .legal-nav__list {
    flex-direction: row;
    gap: var(--spacing-8);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .legal-nav__list::-webkit-scrollbar {
    display: none;
  }

  .legal-nav__link {
    white-space: nowrap;
    padding: 8px 14px;
    background-color: var(--color-twilight-violet);
    border-color: var(--color-lunar-violet);
    font-size: 14px;
  }

  .legal-nav__num {
    display: none;
  }
}