/* ──────────────────────────────────────────────────────────────────────────
   Estilos compartidos para las páginas públicas / legales de Trinity
   (privacy, terms, legal, about, contact). Autocontenido sobre el
   Design System (trinity-design-system.css). Cumple la CSP de producción.
   ────────────────────────────────────────────────────────────────────────── */

.legal-body {
    margin: 0;
    background: var(--t-bg-primary);
    color: var(--t-gray-800);
    font-family: var(--t-font-family);
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Cabecera ── */
.legal-header {
    background: var(--t-secondary);
    border-bottom: 3px solid var(--t-primary);
}
.legal-header__inner {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--t-space-4, 16px) var(--t-space-6, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.legal-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.legal-brand img { width: 36px; height: 36px; border-radius: var(--t-radius-md, 8px); }
.legal-brand span {
    font-size: var(--t-text-lg, 1.125rem);
    font-weight: var(--t-font-bold, 700);
    color: var(--t-white, #fff);
}
.legal-brand span b { color: var(--t-primary); font-weight: var(--t-font-bold, 700); }
.legal-header__back {
    font-size: var(--t-text-sm, .875rem);
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s ease;
}
.legal-header__back:hover { color: var(--t-white, #fff); }

/* ── Contenido ── */
.legal-main {
    flex: 1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: var(--t-space-10, 40px) var(--t-space-6, 24px);
    box-sizing: border-box;
}
.legal-main h1 {
    font-size: var(--t-text-3xl, 1.875rem);
    font-weight: var(--t-font-bold, 700);
    color: var(--t-gray-900);
    margin: 0 0 8px;
}
.legal-updated {
    font-size: var(--t-text-sm, .875rem);
    color: var(--t-gray-500);
    margin: 0 0 var(--t-space-8, 32px);
}
.legal-main h2 {
    font-size: var(--t-text-xl, 1.25rem);
    font-weight: var(--t-font-semibold, 600);
    color: var(--t-gray-900);
    margin: var(--t-space-8, 32px) 0 var(--t-space-3, 12px);
    padding-top: var(--t-space-2, 8px);
}
.legal-main h3 {
    font-size: var(--t-text-md, 1rem);
    font-weight: var(--t-font-semibold, 600);
    color: var(--t-gray-800);
    margin: var(--t-space-5, 20px) 0 var(--t-space-2, 8px);
}
.legal-main p,
.legal-main li { font-size: var(--t-text-md, 1rem); color: var(--t-gray-700); }
.legal-main ul { padding-left: 1.4em; margin: 0 0 var(--t-space-4, 16px); }
.legal-main li { margin-bottom: 6px; }
.legal-main a { color: var(--t-primary); text-decoration: none; }
.legal-main a:hover { text-decoration: underline; }

/* Tarjeta de datos del responsable */
.legal-card {
    background: var(--t-white, #fff);
    border: 1px solid var(--t-gray-200);
    border-left: 4px solid var(--t-primary);
    border-radius: var(--t-radius-lg, 12px);
    padding: var(--t-space-5, 20px) var(--t-space-6, 24px);
    margin: var(--t-space-4, 16px) 0 var(--t-space-6, 24px);
}
.legal-card p { margin: 4px 0; }
.legal-card .legal-card__label { color: var(--t-gray-500); font-size: var(--t-text-sm, .875rem); }

/* ── Pie ── */
.legal-footer {
    background: var(--t-secondary);
    color: rgba(255, 255, 255, .6);
    padding: var(--t-space-8, 32px) var(--t-space-6, 24px);
    margin-top: auto;
}
.legal-footer__inner {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--t-text-sm, .875rem);
}
.legal-footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.legal-footer__links a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    transition: color .15s ease;
}
.legal-footer__links a:hover { color: var(--t-primary); }
.legal-footer__copy { color: rgba(255, 255, 255, .45); }

@media (max-width: 600px) {
    .legal-footer__inner { flex-direction: column; align-items: flex-start; }
}