/* Lectura legal: las páginas de confianza comparten el mismo lenguaje visual
   que el producto, pero con una densidad tranquila para documentos largos. */
:root {
    --legal-page: #f3f7fc;
    --legal-surface: #ffffff;
    --legal-surface-muted: #f8fbff;
    --legal-ink: #0b1533;
    --legal-muted: #566078;
    --legal-line: #dbe2ee;
    --legal-line-strong: #b7c6dc;
    --legal-blue: #1463e6;
    --legal-blue-strong: #0a56d4;
    --legal-focus: #0a56d4;
}

:root[data-theme="dark"] {
    --legal-page: #081427;
    --legal-surface: #0f1d35;
    --legal-surface-muted: #122442;
    --legal-ink: #f5f8ff;
    --legal-muted: #bdc9dc;
    --legal-line: #2b4162;
    --legal-line-strong: #4e668a;
    --legal-blue: #8ab7ff;
    --legal-blue-strong: #a7c8ff;
    --legal-focus: #9bc1ff;
}

* { box-sizing: border-box; }

body.legal-page {
    min-height: 100vh;
    margin: 0;
    background: var(--legal-page);
    color: var(--legal-ink);
    font-family: "Onest", sans-serif;
    line-height: 1.65;
}

/* En documentos largos el fondo debe ayudar a leer, no competir con el texto. */

.legal-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    min-height: 72px;
    gap: 12px;
    padding: 0 clamp(20px, 4vw, 58px);
    border-bottom: 1px solid var(--legal-line);
    background: var(--legal-surface);
}

.legal-navbar h1,
.legal-brand-wrap { margin: 0; }
.legal-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--legal-ink);
    font-size: clamp(1.3rem, 2.1vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -.045em;
    text-decoration: none;
}

.legal-navbar .legal-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-left: auto;
    padding: 0 14px;
    border: 1px solid var(--legal-line);
    border-radius: 11px;
    color: var(--legal-ink);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}

.legal-navbar .legal-back:hover { border-color: var(--legal-blue); color: var(--legal-blue-strong); }
.legal-navbar .nav-utilidades { margin-left: 0; border-left-color: var(--legal-line); }

.legal-container {
    width: min(100% - 40px, 800px);
    margin: 0 auto;
    padding: clamp(44px, 7vw, 76px) 0 48px;
}

.legal-document-header {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--legal-line);
}

.legal-container h1 {
    max-width: 18ch;
    margin: 0;
    color: var(--legal-ink);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.03;
    letter-spacing: -.05em;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.legal-container .fecha {
    display: inline-flex;
    margin-top: 14px;
    color: var(--legal-muted);
    font-size: .88rem;
    font-weight: 650;
}

.legal-document-header > p {
    max-width: 67ch;
    margin: 18px 0 0;
    color: var(--legal-muted);
    font-size: 1rem;
}

.legal-container h2 {
    margin: 44px 0 14px;
    padding-top: 22px;
    border-top: 1px solid var(--legal-line);
    color: var(--legal-ink);
    font-size: clamp(1.22rem, 2.6vw, 1.48rem);
    line-height: 1.2;
    letter-spacing: -.025em;
    border-left: 0;
    padding-left: 0;
}

.legal-container h3 {
    margin: 28px 0 8px;
    color: var(--legal-ink);
    font-size: 1rem;
    line-height: 1.35;
}

.legal-container h2 + h3 { margin-top: 18px; }
.legal-container p,
.legal-container li { color: var(--legal-muted); font-size: .98rem; }
.legal-container p { margin: 0 0 14px; }
.legal-container ul,
.legal-container ol { margin: 0 0 16px; padding-left: 1.25rem; }
.legal-container li { margin: 0 0 8px; padding-left: .15rem; }
.legal-container strong { color: var(--legal-ink); }

.legal-container a {
    color: var(--legal-blue-strong);
    font-weight: 700;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}
.legal-container a:hover { text-decoration-thickness: 2px; }

.highlight-box {
    margin: 26px 0;
    padding: 18px 20px;
    border: 1px solid var(--legal-line-strong);
    border-radius: 14px;
    background: var(--legal-surface-muted);
    color: var(--legal-muted);
    font-size: .95rem;
}
.highlight-box p:last-child { margin-bottom: 0; }

.tabla-datos {
    display: table;
    width: 100%;
    margin: 18px 0 22px;
    border: 1px solid var(--legal-line);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--legal-surface);
    color: var(--legal-muted);
    font-size: .9rem;
}
.tabla-datos th,
.tabla-datos td {
    padding: 12px 14px;
    border-right: 1px solid var(--legal-line);
    border-bottom: 1px solid var(--legal-line);
    text-align: left;
    vertical-align: top;
}
.tabla-datos th { background: var(--legal-surface-muted); color: var(--legal-ink); font-weight: 750; }
.tabla-datos tr > :last-child { border-right: 0; }
.tabla-datos tr:last-child > * { border-bottom: 0; }

.legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    width: min(100% - 40px, 800px);
    margin: 0 auto;
    padding: 28px 0 36px;
    border-top: 1px solid var(--legal-line);
    color: var(--legal-muted);
    font-size: .86rem;
}
.legal-footer a { color: var(--legal-muted); font-weight: 700; text-decoration: none; }
.legal-footer a:hover { color: var(--legal-blue-strong); text-decoration: underline; text-underline-offset: .2em; }
.legal-footer .legal-copyright { flex-basis: 100%; text-align: center; }

.legal-brand:focus-visible,
.legal-back:focus-visible,
.legal-container a:focus-visible,
.legal-footer a:focus-visible {
    outline: 3px solid var(--legal-focus);
    outline-offset: 3px;
}

@media (max-width: 620px) {
    .legal-navbar { min-height: 64px; padding: 8px 12px; gap: 8px; }
    .legal-navbar .legal-back { min-height: 44px; padding: 0 10px; font-size: .8rem; white-space: nowrap; }
    .legal-navbar .nav-utilidades { display: inline-flex; align-items: center; min-height: 44px; padding-left: 0; border-left: 0; }
    .legal-container { width: min(100% - 32px, 800px); padding-top: 38px; }
    .legal-document-header { padding-bottom: 22px; }
    .legal-container h2 { margin-top: 34px; padding-top: 18px; }
    .legal-container p,
    .legal-container li { font-size: .96rem; }
    .highlight-box { padding: 16px; }
    .tabla-datos {
        display: block;
        overflow-x: auto;
        white-space: normal;
        -webkit-overflow-scrolling: touch;
    }
    .tabla-datos th,
    .tabla-datos td { min-width: 150px; }
    .legal-footer { width: min(100% - 32px, 800px); justify-content: flex-start; padding-top: 24px; }
    .legal-footer .legal-copyright { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    body.legal-page *, body.legal-page *::before, body.legal-page *::after { transition-duration: .01ms !important; }
}