/* Los estilos de /legal (D-22). Hoja aparte y no dentro de `escaparate.css` por
 * el criterio nº 4: la portada la abre todo el pueblo y esto lo abre quien va a
 * leerlo. Se apoya en `escaparate.css`, que ya trae la cabecera y viene de la
 * caché de la portada; aquí solo está la tipografía de texto largo, que la
 * portada no necesita porque en la portada no se lee nada.
 */
.legal { max-width: 44rem; margin: 0 auto; padding: 0 var(--s-4) var(--s-5); }
.legal h1 { font-size: 1.5rem; margin: var(--s-5) 0 var(--s-4); }
.legal h2 { font-size: 1.3rem; margin: 0 0 var(--s-3); }
.legal h3 { font-size: 1.1rem; margin: var(--s-4) 0 var(--s-2); color: var(--casa-hondo); }
.legal p, .legal li { line-height: 1.6; }
.legal p { margin: 0 0 var(--s-3); }
.legal ul { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.legal li { margin-bottom: var(--s-2); }
.legal a { color: var(--casa); }

/* El resumen de arriba: lo que hay que leer si no se va a leer nada más. */
.legal-corto {
  background: var(--casa-suave); border-left: 4px solid var(--casa);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
}

.legal-indice { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); }
.legal-indice a {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 999px;
  padding: var(--s-2) var(--s-3); font-size: 1rem; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}

.legal-bloque {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: var(--s-4); margin: 0 0 var(--s-4); box-shadow: var(--relieve);
  scroll-margin-top: 80px;
}
.legal-fecha { font-size: 1rem; color: var(--tinta-suave); text-align: center; }

/* Un hueco sin rellenar se ve. No se disimula: es lo que hace que se arregle. */
.pendiente { background: var(--brasa-suave); color: var(--brasa); font-weight: 700; padding: 0 var(--s-1); }
.legal-aviso {
  background: var(--brasa-suave); border-left: 4px solid var(--brasa);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); color: var(--brasa);
}

/* El enlace legal al pie de la portada: presente, y sin robarle sitio a nada. */

/* Los créditos de las fotos de muestra (D-24): una lista larga que se lee
   buscando un nombre, no de corrido. */
.creditos { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.creditos li { margin-bottom: var(--s-1); font-size: 1rem; }

/* La pantalla del cepillo (/ir/<id>, spec 2026-09-09): los dos botones uno
   debajo del otro y con el mismo peso; la petición, en el fondo suave de la
   casa. Vive aquí y no en escaparate.css por el criterio nº 4. */
.cepillo-pide { background: var(--casa-suave); border-left: 4px solid var(--casa); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); }
.cepillo-botones { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-4) 0; }
/* `.legal a` (clase + elemento) pesa más que `.btn-primary` (clase) y pintaba
   el texto del botón del azul del fondo: el director lo vio en su móvil el
   09-09, invisible. Dos clases ganan a las dos reglas. */
.legal .btn-primary { color: var(--papel); }