/* =========================================================================
   Páginas legales — aviso legal, privacidad y cookies

   Hoja independiente y ligera: estas páginas no necesitan el layout completo
   de la landing, solo tipografía legible y la paleta de la marca. Las
   variables se heredan de styles.css, que se carga antes.
   ========================================================================= */

.legal-page {
  background: var(--white);
  color: var(--ink);
  font-family: var(--ff-text);
  line-height: 1.7;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.legal-head {
  background: var(--teal-deep);
  color: var(--on-dark);
  padding: var(--s7) 0 var(--s6);
}

.legal-head__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  margin-bottom: var(--s5);
}

.legal-head__back:hover,
.legal-head__back:focus-visible { color: var(--white); text-decoration: underline; }

.legal-head__brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.legal-head__brand img { width: 44px; height: 44px; border-radius: 10px; }

.legal-head__brand span {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.0625rem;
}

.legal-head h1 {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  margin: 0;
}

.legal-head__date {
  color: var(--on-dark-soft);
  font-size: 0.875rem;
  margin-top: var(--s3);
}

/* ── Contenido ────────────────────────────────────────────────────────── */

.legal-body { padding: var(--s7) 0 var(--s8); }
.legal-body > section + section { margin-top: var(--s6); }

.legal-body h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  color: var(--ink);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--teal-line);
}

.legal-body h3 {
  font-family: var(--ff-text);
  font-size: 1.0625rem;
  margin: var(--s5) 0 var(--s2);
}

.legal-body p,
.legal-body li { color: var(--ink-soft); }
.legal-body p { margin: 0 0 var(--s3); }
.legal-body ul { margin: 0 0 var(--s3); padding-left: 1.25rem; }
.legal-body li { margin-bottom: var(--s2); }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--teal); }

/* ── Tabla de datos ───────────────────────────────────────────────────── */

.legal-table {
  border: 1px solid var(--teal-line);
  border-radius: var(--radius-tile);
  overflow: hidden;
  margin: var(--s4) 0;
}

.legal-table__row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--teal-line);
}

.legal-table__row:last-child { border-bottom: 0; }

.legal-table__key {
  flex: 0 0 13rem;
  padding: var(--s3) var(--s4);
  background: rgba(47, 111, 115, 0.06);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9375rem;
}

.legal-table__val {
  flex: 1 1 16rem;
  padding: var(--s3) var(--s4);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

@media (max-width: 34rem) {
  .legal-table__key { flex-basis: 100%; }
}

/* Tabla de cookies: necesita scroll propio en móvil, no debe empujar la página */
.legal-scroll { overflow-x: auto; margin: var(--s4) 0; }

.legal-grid {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.legal-grid th,
.legal-grid td {
  border: 1px solid var(--teal-line);
  padding: var(--s3) var(--s4);
  text-align: left;
  vertical-align: top;
}

.legal-grid th { background: rgba(47, 111, 115, 0.06); color: var(--ink); font-weight: 600; }
.legal-grid td { color: var(--ink-soft); }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.legal-foot {
  border-top: 1px solid var(--teal-line);
  margin-top: var(--s7);
  padding-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.legal-foot nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.legal-foot a { color: var(--teal); }

.legal-page .container {
  max-width: 52rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}