/* ============================================================
   PÁGINAS LEGALES — /terminos y /privacidad
   Hasta el 30-10-2026 estas vistas usaban clases de la hoja de la
   portada (.shell, .page-title-bar) sin cargarla: el texto salía pegado
   al borde, sin márgenes entre secciones y con las listas sin viñetas
   (tienda.css las deja sin estilo). Esta hoja es sólo de estas dos
   páginas y usa las variables de tienda.css.
   ============================================================ */

.legal-page{
  background: var(--bg);
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* ── Encabezado ─────────────────────────────────────────────── */
.legal-cabecera{
  background: linear-gradient(125deg, #334957 0%, #425c6d 100%);
  border-bottom: 1px solid #bcc8ce;
  color: #fff;
  padding-block: clamp(32px, 5vw, 56px);
}
.legal-cabecera .contenedor{
  max-width: 1180px;
}
.legal-cabecera__antetitulo{
  color: #c9d4db;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.legal-cabecera h1{
  margin: 8px 0 10px;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}
.legal-cabecera__version{
  color: #dce3e8;
  font-size: 15px;
}

/* ── Cuerpo: índice a la izquierda, texto a la derecha ──────── */
.legal-cuerpo{
  max-width: 1180px;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
  padding-top: clamp(24px, 4vw, 48px);
}

.legal-indice{
  position: sticky;
  top: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 14px 16px;
  counter-reset: legal-indice;
}
.legal-indice__titulo{
  padding-inline: 8px;
  margin-bottom: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.legal-indice ol{
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-indice li{
  counter-increment: legal-indice;
}
.legal-indice li a{
  display: flex;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.35;
}
.legal-indice li a::before{
  content: counter(legal-indice) ".";
  flex: 0 0 22px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
}
.legal-indice li a:hover,
.legal-indice li a:focus-visible{
  background: var(--surface-2);
  color: var(--brand);
}
.legal-indice__otro{
  margin: 14px 8px 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}
.legal-indice__otro a{
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Texto ──────────────────────────────────────────────────── */
.legal-texto{
  max-width: 820px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04);
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4.5vw, 56px);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.7;
}
.legal-texto p{
  margin: 0 0 14px;
}
.legal-texto .legal-intro{
  margin-bottom: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
}
.legal-texto h2{
  margin: 40px 0 12px;
  /* Que el salto desde el índice no deje el título bajo el buscador. */
  scroll-margin-top: 110px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.legal-texto .legal-intro + h2{
  margin-top: 32px;
}
.legal-texto ul{
  margin: 0 0 16px;
}
.legal-texto li{
  position: relative;
  margin-bottom: 8px;
  padding-left: 24px;
}
.legal-texto li::before{
  content: "";
  position: absolute;
  left: 7px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.legal-texto strong{
  color: var(--text);
}
.legal-texto a{
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-texto .legal-nota{
  margin: 40px 0 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Pantallas angostas: el índice va arriba y deja de seguir ── */
@media (max-width: 900px){
  .legal-cuerpo{
    grid-template-columns: minmax(0, 1fr);
  }
  .legal-indice{
    position: static;
  }
  .legal-indice ol{
    columns: 2;
    column-gap: 16px;
  }
  .legal-indice li{
    break-inside: avoid;
  }
  .legal-texto{
    max-width: none;
  }
}
@media (max-width: 560px){
  .legal-indice ol{
    columns: 1;
  }
  /* En el teléfono el índice no debe ocupar toda la primera pantalla. */
  .legal-indice li a{
    padding-block: 4px;
  }
  .legal-texto{
    font-size: 15px;
    border-radius: 12px;
  }
  .legal-texto .legal-intro{
    font-size: 16px;
  }
  .legal-texto h2{
    margin-top: 32px;
    font-size: 19px;
  }
}