/* ==========================================================================
   modal.css — Card grande para leer Privacidad / Términos sin salir de la página.
   Usa <dialog> nativo: foco atrapado y Escape para cerrar vienen gratis del
   navegador. Reutiliza la tipografía de .legal__body (legal.css) para el cuerpo.
   ========================================================================== */
.legal-modal {
  padding: 0; border: 0; border-radius: var(--r-xl);
  width: min(760px, calc(100vw - 32px)); max-height: min(84vh, 860px);
  box-shadow: 0 60px 120px -30px rgba(15, 27, 51, .5);
  overflow: hidden; color: var(--text);
}
.legal-modal::backdrop { background: rgba(15, 27, 51, .6); backdrop-filter: blur(3px); }
.legal-modal[open] { display: flex; flex-direction: column; animation: legal-in .3s var(--ease); }
@keyframes legal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.legal-modal__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--line-light); background: var(--white);
}
.legal-modal__title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.legal-modal__close {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); color: var(--slate); transition: background .2s, color .2s;
}
.legal-modal__close:hover { background: var(--navy); color: var(--white); }
.legal-modal__close svg { width: 18px; height: 18px; }

.legal-modal__body { flex: 1; overflow-y: auto; padding: 32px 28px 40px; background: var(--white); }
.legal-modal__body .legal__body { max-width: none; }
.legal-modal__loading { padding: 60px 0; text-align: center; color: var(--slate); font-size: 15px; }

@media (max-width: 560px) {
  .legal-modal { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .legal-modal__body { padding: 24px 20px 32px; }
}

/* Con el modal abierto no se scrollea la página de fondo, y el scroll del modal no se "escapa" hacia ella */
html.is-modal-open { overflow: hidden; }
.legal-modal__body { overscroll-behavior: contain; }