/* ===========================================================================
   legal.css
   ---------------------------------------------------------------------------
   Paginas legales. Prioridad absoluta: que se puedan leer.

   Estos documentos son los que alguien abre cuando tiene una duda o un
   reclamo. Una columna angosta, buen interlineado y titulos claros importan
   mas aqui que en cualquier otra pantalla del sitio.
   =========================================================================== */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 52px 20px 90px;
}

.legal__titulo {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  line-height: 1.03;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.legal__fecha {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--papel-2);
  margin-bottom: 34px;
}

.legal h2 {
  font-family: var(--display);
  font-size: 1.24rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 40px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--tinta-3);
}

.legal h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 24px 0 10px;
}

.legal p { margin-bottom: 15px; color: var(--papel-2); line-height: 1.72; }
.legal strong { color: var(--papel); }

.legal ul, .legal ol {
  margin: 0 0 18px 22px;
  color: var(--papel-2);
  line-height: 1.72;
}
.legal li { margin-bottom: 9px; }

.legal a { color: var(--suerte); text-decoration: underline; }

/* Bloque de datos del organizador */
.datos-legales {
  background: var(--tinta-2);
  border: 1px solid var(--tinta-3);
  border-radius: var(--radio);
  padding: 24px;
  margin-bottom: 30px;
}

.datos-legales dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.datos-legales dt { font-size: .82rem; color: var(--papel-2); }
.datos-legales dd { font-size: .92rem; font-weight: 700; }

/* Marcador de lo que falta por definir.
   Se ve a proposito: es una lista de pendientes, no decoracion. */
.pendiente {
  background: rgba(232, 69, 95, .14);
  border: 1px dashed var(--sello);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--sello);
  font-weight: 700;
}

.aviso-legal {
  background: rgba(255, 201, 60, .1);
  border: 1px solid var(--suerte);
  border-radius: var(--radio);
  padding: 18px 20px;
  margin-bottom: 30px;
  font-size: .92rem;
}

.indice {
  background: var(--tinta-2);
  border: 1px solid var(--tinta-3);
  border-radius: var(--radio);
  padding: 22px 24px;
  margin-bottom: 34px;
}

.indice ol { margin: 0 0 0 20px; }
.indice a { color: var(--papel-2); text-decoration: none; }
.indice a:hover { color: var(--suerte); }

@media (max-width: 640px) {
  .legal { padding: 32px 16px 60px; }
  .datos-legales dl { grid-template-columns: 1fr; gap: 4px 0; }
  .datos-legales dd { margin-bottom: 12px; }
}