/* =====================================================================
   RV25 Relojería · PÁGINA LEGAL
   ---------------------------------------------------------------------
   Página propia: legal/ (contenido en paginas/legal.html). De arriba
   hacia abajo:

     .legal-portada      "Información legal", título, datos del vendedor
                         (responsable) e índice de documentos
     .legal-doc          un documento: Términos · Reembolsos (franja
                         arena, .legal-doc-destacado) · Privacidad ·
                         Cookies · PQR. Cabecera a la izquierda (quieta
                         al bajar en computador) y el texto a la derecha.
     .legal-final        contacto (reusa .ayuda-final de ayuda.css)

   El texto se lee cómodo: 16–17px, renglones de ~70 letras, y cada
   apartado (h3) numerado solo con un contador.
   En la vista de una sola página va dentro de .ventana-ayuda (ayuda.css).
   ===================================================================== */

/* La barra de arriba es fija: el contenido empieza debajo de ella */
.pagina-legal main { padding-top: 64px; }
.legal-pagina [id] { scroll-margin-top: 72px; }

/* --- Portada --- */
.legal-portada {
  padding: calc(var(--seccion) * .8) max(var(--margen), calc((100% - var(--ancho)) / 2)) 56px;
  border-bottom: 1px solid var(--arena-2);
}
.legal-antetitulo {
  font: 600 11px/1.2 var(--letra); letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento-texto);
}
.legal-portada-titulo {
  margin-top: 14px;
  font: 400 clamp(40px, 10vw, 84px)/1 var(--titulo); letter-spacing: -0.03em;
  text-wrap: balance;
}
.legal-intro { margin-top: 14px; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--tinta-suave); }

/* Datos del vendedor: filas etiqueta | valor */
.legal-responsable {
  display: grid; margin: 36px 0 0;
  border-top: 1px solid var(--arena-2);
}
.legal-responsable div {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--arena-2);
}
.legal-responsable dt {
  padding-top: 2px;
  font: 500 11px/1.4 var(--letra); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.legal-responsable dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.legal-responsable a { color: var(--tinta); }

/* Índice de documentos */
.legal-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.legal-indice a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--radio-pildora);
  background: var(--arena); color: var(--tinta);
  font: 500 14px/1.2 var(--letra); text-decoration: none;
  transition: background-color .15s ease;
}
.legal-indice a:hover { background: var(--arena-2); }

/* --- Cada documento --- */
.legal-doc {
  display: grid; gap: 28px;
  padding: var(--seccion) max(var(--margen), calc((100% - var(--ancho)) / 2));
  border-bottom: 1px solid var(--arena-2);
}
.legal-doc-destacado { background: var(--arena); border-bottom: 0; }

.legal-titulo {
  margin-top: 12px;
  font: 400 clamp(32px, 8vw, 52px)/1.04 var(--titulo); letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Texto del documento */
.legal-texto { counter-reset: apartado; min-width: 0; max-width: 46em; }
.legal-texto h3 {
  counter-increment: apartado;
  display: flex; gap: 12px; align-items: baseline;
  margin-top: 36px;
  font: 400 22px/1.25 var(--titulo); letter-spacing: -0.01em;
}
.legal-texto h3:first-child { margin-top: 0; }
.legal-texto h3::before {
  content: counter(apartado);
  flex: none;
  font: 600 13px/1 var(--letra); color: var(--acento-texto);
}
.legal-texto p,
.legal-texto li { font-size: 16px; line-height: 1.65; color: var(--tinta); }
.legal-texto p { margin-top: 12px; }
.legal-texto ul,
.legal-texto ol { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 22px; }
.legal-texto li::marker { color: var(--acento-texto); }
.legal-texto a { color: var(--acento-texto); font-weight: 600; text-underline-offset: 3px; }
.legal-texto code { font-size: .92em; padding: 1px 5px; background: var(--arena); border-radius: 3px; }
.legal-doc-destacado .legal-texto code { background: var(--marfil); }

/* --- Computador: cabecera a la izquierda (quieta al bajar), texto a la derecha --- */
@media (min-width: 960px) {
  .legal-doc { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; }
  .legal-cabeza { position: sticky; top: 96px; }
  .ventana-ayuda .legal-cabeza { top: 72px; }
  .legal-responsable { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .legal-texto p,
  .legal-texto li { font-size: 17px; }
}