/* ==========================================================================
   Obrería — páginas legales (/legal/impressum/ y /legal/datenschutz/).
   AÑADIDO sobre /conoce/conoce.css: misma paleta, mismo header y footer.
   Aquí solo vive lo propio de un texto legal largo: la marca de qué versión
   manda, las tablas y una medida de línea cómoda para leer en el móvil.
   ========================================================================== */

/* Estas páginas son TEXTO: una medida de línea algo más ancha que la landing
   (que es de tarjetas) se lee mejor sin obligar a hacer zoom. */
.legal {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.legal h1 {
  font-size: clamp(1.7rem, 6vw, 2.3rem);
}

.legal h2 {
  margin-top: var(--space-6);
  font-size: clamp(1.2rem, 4.5vw, 1.45rem);
}

.legal h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-text);
}

.legal p,
.legal li { color: var(--c-text); }

.legal ul,
.legal ol {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.3rem;
  margin: 0 0 var(--space-4);
}

.legal address {
  font-style: normal;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

/* Qué versión manda. No es decoración: es lo que evita que alguien tome la
   traducción de cortesía por el documento vinculante. */
.legal-version {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}
.legal-version--bindend { color: var(--c-accent); border-color: var(--c-accent); }

.legal-bloque {
  border-top: 1px solid var(--c-border);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
}

.legal-stand {
  margin-top: var(--space-6);
  color: var(--c-text-muted);
  font-size: 0.92rem;
}

/* Tabla de tratamientos y plazos. En un móvil no cabe una tabla de verdad, así
   que se apila: cada fila es un bloque con sus etiquetas delante. */
.legal-tabla {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.legal-tabla > li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.legal-tabla b { display: block; margin-bottom: var(--space-2); }
.legal-tabla dl { margin: 0; display: grid; gap: var(--space-2); }
.legal-tabla dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: var(--c-text-muted);
}
.legal-tabla dd { margin: 0; }

.legal-aviso {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.legal-nav {
  margin-bottom: var(--space-5);
  font-size: 0.95rem;
}
.legal-nav a { margin-right: var(--space-3); }

@media (min-width: 40rem) {
  .legal { padding-left: var(--space-6); padding-right: var(--space-6); }
}