/* ==========================================================================
   HEYAMIX — páginas legales (/impressum/ y /datenschutz/), 21/09/2026.
   Se carga DESPUÉS de /assets/css/style.css y reutiliza sus variables — cero
   colores/tamaños nuevos, mismo criterio que instrucciones-frontend.md.
   Mismo patrón que GUARDIO/WEB/impressum/impressum.css (misma estructura de
   clases), pero mapeado a los tokens propios de HEYAMIX (--color-*, --espacio-*,
   --radio*, --tam-texto-*) en vez de inventar un segundo design system.
   ========================================================================== */

/* ---------- Saltar al contenido (accesibilidad, oculto hasta el foco) --- */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  display: inline-block;
  margin: var(--espacio-1) var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-2);
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radio-chico);
  color: var(--color-texto-marca);
  font-weight: 700;
}

.legal-header {
  padding: var(--espacio-3) var(--espacio-3) var(--espacio-2);
  text-align: center;
}

.legal-marca {
  display: inline-block;
  font-size: var(--tam-texto-grande);
  font-weight: 700;
  color: var(--color-texto-marca);
  text-decoration: none;
}

/* ---------- Contenedor de lectura (línea de texto ≤ ~70ch) ---------- */
.legal-wrap {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--espacio-2);
  padding-bottom: var(--espacio-4);
}

.legal-hero {
  padding: var(--espacio-2) 0 var(--espacio-1);
}

.legal-hero h1 {
  font-size: var(--tam-texto-titulo);
  color: var(--color-texto-marca);
  margin: 0 0 var(--espacio-1);
}

.legal-hero .lead {
  margin: 0;
  color: var(--color-text-suave);
  max-width: 62ch;
}

/* ---------- Bloques ---------- */
.legal-bloque {
  padding-top: var(--espacio-3);
  border-top: 1px solid var(--color-borde);
  margin-top: var(--espacio-3);
}

.legal-bloque h2 {
  font-size: var(--tam-texto-grande);
  color: var(--color-text);
  margin: 0 0 var(--espacio-1);
}

.legal-bloque h3 {
  font-size: var(--tam-texto-base);
  color: var(--color-text);
  margin: var(--espacio-2) 0 var(--espacio-1);
}

.legal-bloque p,
.legal-bloque li {
  color: var(--color-text-suave);
  margin-bottom: var(--espacio-1);
  max-width: 68ch;
}

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

.legal-bloque ul {
  padding-left: var(--espacio-3);
}

/* Bloque destacado (aviso sobre el servicio) */
.legal-bloque--nota {
  background: var(--color-surface);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-2);
  border-top-width: 1px;
}

/* ---------- Datos del titular ---------- */
.legal-datos {
  font-style: normal;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.75;
  background: var(--color-surface);
  border-radius: var(--radio-chico);
  padding: var(--espacio-2);
  max-width: 34ch;
}

/* ---------- Lista de contacto ---------- */
.legal-lista {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  gap: 6px var(--espacio-2);
  align-items: baseline;
  margin: 0;
}

.legal-lista dt {
  font-weight: 700;
  color: var(--color-text-suave);
  font-size: 15px;
}

.legal-lista dd {
  margin: 0;
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- Traducción de cortesía ---------- */
.legal-cortesia {
  margin-top: var(--espacio-4);
  background: var(--color-surface);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-3) var(--espacio-2);
}

.legal-cortesia h2 {
  font-size: var(--tam-texto-grande);
  color: var(--color-text);
}

.legal-cortesia h3 {
  font-size: var(--tam-texto-base);
  color: var(--color-text);
  margin-top: var(--espacio-3);
  margin-bottom: var(--espacio-1);
}

.legal-cortesia p,
.legal-cortesia li {
  color: var(--color-text-suave);
  margin-bottom: var(--espacio-1);
  max-width: 68ch;
}

.legal-cortesia ul {
  padding-left: var(--espacio-3);
}

.legal-nota {
  color: var(--color-text-suave);
  font-style: italic;
  font-size: 15px;
}

/* ---------- Pie de la página legal ---------- */
.legal-fecha {
  margin-top: var(--espacio-3);
  color: var(--color-text-suave);
  font-size: 14px;
  text-align: center;
}