/* =========================================================
   Páginas legales · términos y privacidad
   ---------------------------------------------------------
   Documentos largos de leer, no piezas de catálogo. Se sale a
   propósito del ritmo editorial de la home: una sola columna
   estrecha, jerarquía plana y ningún adorno.

   Lo que sí se respeta del manual: Inter, los neutros cálidos,
   petróleo como tinta, hairlines en vez de tarjetas y el
   subrayado amarillo en los enlaces.
   ========================================================= */

.legal-body { background: var(--papel); }

/* 68 caracteres es lo que se lee cómodo en un párrafo largo. */
.legal-wrap {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 var(--margen);
}

.legal-header {
  border-bottom: 1px solid var(--arena);
  padding: var(--space-6) 0;
  margin-bottom: var(--space-12);
}
.legal-header img { height: 26px; display: block; }

.legal-titulo {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.94;
  color: var(--petroleo-500);
  margin: 0 0 var(--space-4);
}

.legal-fecha {
  font-size: var(--size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-10);
}

.legal-entrada {
  font-size: var(--size-lg);
  line-height: 1.6;
  color: var(--text-body);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--arena);
  margin: 0 0 var(--space-12);
}

/* El índice. Sin viñetas: los números ya ordenan. */
.legal-indice { margin: 0 0 var(--space-12); padding: 0; list-style: none; }
.legal-indice li { margin-bottom: var(--space-2); }
.legal-indice a {
  color: var(--petroleo-500);
  text-decoration: none;
  border-bottom: 2px solid var(--amarillo-500);
  padding-bottom: 1px;
}
.legal-indice a:hover { background: var(--amarillo-100, #FDF6DA); }

.legal-seccion { padding-top: var(--space-12); }
.legal-seccion h2 {
  font-size: var(--size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--petroleo-500);
  margin: 0 0 var(--space-4);
}
.legal-seccion h3 {
  font-size: var(--size-md);
  font-weight: 700;
  color: var(--petroleo-500);
  margin: var(--space-6) 0 var(--space-2);
}
.legal-seccion p,
.legal-seccion li {
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 var(--space-4);
}
.legal-seccion ul { padding-left: 1.1rem; margin: 0 0 var(--space-4); }
.legal-seccion li { margin-bottom: var(--space-2); }
.legal-seccion a {
  color: var(--petroleo-500);
  border-bottom: 2px solid var(--amarillo-500);
  text-decoration: none;
}

/* Lo importante de cada apartado, sin recuadro ni sombra: una
   barra amarilla al margen, que es recurso de la marca. */
.legal-nota {
  border-left: 3px solid var(--amarillo-500);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  margin: var(--space-6) 0;
}
.legal-nota p:last-child { margin-bottom: 0; }

/* Datos que faltan por rellenar. Imposibles de pasar por alto:
   la idea es que chirríen hasta que se completen. */
.falta {
  background: var(--amarillo-500);
  color: var(--petroleo-500);
  font-weight: 700;
  padding: 0 0.35em;
  border-radius: 3px;
}

.legal-pie {
  border-top: 1px solid var(--arena);
  margin-top: var(--space-16);
  padding: var(--space-8) 0 var(--space-12);
  font-size: var(--size-sm);
  color: var(--text-muted);
}
.legal-pie a { color: var(--text-muted); border-bottom: 1px solid var(--arena); text-decoration: none; }
.legal-pie a:hover { color: var(--petroleo-500); border-bottom-color: var(--amarillo-500); }

@media print {
  .legal-indice, .legal-header img { display: none; }
  .falta { background: none; text-decoration: underline; }
}