/* ==========================================================================
   Términos y Política de privacidad (resources/views/legales/*) — 2026.
   Self-contained on rd-tokens.css, with the landing's «Pulso» look: a light header,
   a lavender band with the title (violet and lime accents), then a long, calm
   reading page with a sticky table of contents.
   ========================================================================== */

html.lg { background: #fff; scroll-padding-top: 88px; }
html.lg body.legal {
    margin: 0; background: var(--rd-bg, #F5F4FA); color: var(--rd-text, #0F1020);
    font-family: var(--rd-font, "Instrument Sans", system-ui, sans-serif); font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; overflow-x: clip;
}
.legal *, .legal *::before, .legal *::after { box-sizing: border-box; }
.legal :where(h1, h2, h3, p, ul, ol) { margin: 0; }
.lg-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--rd-gutter, 24px); }

.lg-saltar { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: #fff; color: var(--rd-noche); font-weight: 700; text-decoration: none; }
.lg-saltar:focus { top: 12px; }
.legal :focus-visible { outline: 3px solid var(--rd-ring, rgba(91, 61, 245, .35)); outline-offset: 2px; border-radius: 6px; }

/* ---- Header: one row, nothing overlaps ---- */
.lg-cab {
    position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px);
    background: color-mix(in srgb, #fff 88%, transparent);
    -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px);
    border-bottom: 1px solid var(--rd-line, #E4E1F0);
}
.lg-cab-in { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.lg-marca { display: inline-flex; align-items: center; gap: 9px; color: var(--rd-text, #0F1020); letter-spacing: -.04em; text-decoration: none; font-family: var(--rd-font-display, sans-serif); font-weight: 760; font-stretch: 100%; font-size: 21px; flex: none; }
.lg-marca img { width: 30px; height: 30px; }
.lg-docs { display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 999px; background: #F3F1FF; }
.lg-docs a { padding: 7px 16px; border-radius: 999px; color: var(--rd-text-2, #3A3D52); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; }
.lg-docs a:hover { color: var(--rd-text, #0F1020); }
.lg-docs a[aria-current] { background: #fff; color: var(--rd-text, #0F1020); box-shadow: 0 1px 2px rgba(15, 16, 32, .1); }
.lg-volver { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 10px; border: 0; background: #0F1020; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s; border-radius: 999px; }
.lg-volver:hover { background: #26284A; }

/* ---- Hero ---- */
.lg-hero {
    position: relative; isolation: isolate; overflow: hidden; color: var(--rd-text, #0F1020); padding: clamp(40px, 7vw, 76px) 0 clamp(44px, 7vw, 72px);
    background: radial-gradient(700px 420px at 90% 0%, rgba(197, 240, 74, .35), transparent 62%), radial-gradient(600px 380px at 0% 100%, rgba(91, 61, 245, .14), transparent 62%), linear-gradient(180deg, #fff, #F3F1FF);
}
.lg-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(91, 61, 245, .14) 1px, transparent 1.2px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.lg-hero h1 { font-family: var(--rd-font-display, sans-serif); font-weight: 800; font-stretch: 100%; font-size: clamp(36px, 5.4vw, 68px); line-height: .98; letter-spacing: -.05em; max-width: 18ch; text-wrap: balance; }
.lg-lead { margin-top: 16px; max-width: 62ch; color: var(--rd-text-2, #3A3D52); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; text-wrap: pretty; }
.lg-meta { display: inline-flex; margin-top: 18px; padding: 6px 12px; border-radius: 999px; background: var(--rd-lima, #C5F04A); color: #0F1020; font-size: 13.5px; font-weight: 600; }

/* ---- Draft notice ---- */
.legal-aviso { margin: 28px 0 0; padding: 14px 18px; border-radius: 14px; background: #FEF9C3; border: 1px solid #EAB308; color: #5B4500; font-size: 14px; }
.legal-aviso code { background: rgba(0, 0, 0, .07); padding: 1px 6px; border-radius: 6px; }

/* ---- Reading layout ---- */
.lg-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; padding: 40px 0 96px; align-items: start; }
.lg-grid > * { min-width: 0; }
.legal-toc { position: sticky; top: 88px; max-height: calc(100dvh - 110px); overflow: auto; font-size: 14px; }
.legal-toc p { font-size: 13px; font-weight: 700; color: var(--rd-muted, #5C5F73); margin-bottom: 10px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rd-line, #E4E1F0); }
.legal-toc a { display: block; padding: 6px 12px; margin-left: -2px; border-left: 2px solid transparent; color: var(--rd-muted, #5C5F73); text-decoration: none; line-height: 1.35; transition: color .2s, border-color .2s; }
.legal-toc a:hover { color: var(--rd-text, #0F1020); }
.legal-toc a.on { color: var(--rd-azul, #5B3DF5); border-left-color: var(--rd-azul, #5B3DF5); font-weight: 650; }

.legal-body { background: var(--rd-surface, #fff); border: 1px solid var(--rd-line, #E4E1F0); border-radius: 20px; padding: 12px clamp(20px, 4vw, 52px) 40px; box-shadow: 0 1px 2px rgba(15, 16, 32, .04), 0 12px 32px -18px rgba(15, 16, 32, .18); outline: none; }
.legal-body section { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--rd-line, #E4E1F0); scroll-margin-top: 88px; }
.legal-body section:first-child { border-top: 0; margin-top: 0; padding-top: 28px; }
.legal-body h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; font-family: var(--rd-font-display, sans-serif); font-weight: 720; font-stretch: 100%; font-size: clamp(21px, 2vw, 25px); line-height: 1.2; letter-spacing: -.015em; color: var(--rd-text, #0F1020); }
.lg-num { flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--rd-primary-soft, rgba(91, 61, 245, .08)); color: var(--rd-azul, #5B3DF5); font-family: var(--rd-font, sans-serif); font-size: 13px; font-weight: 700; transform: translateY(-2px); }
.legal-body h3 { margin: 22px 0 8px; font-size: 16.5px; font-weight: 700; color: var(--rd-text, #0F1020); }
.legal-body p, .legal-body li { font-size: 16.5px; line-height: 1.72; color: #3A3D52; max-width: 72ch; }
.legal-body p { margin-bottom: 14px; }
.legal-body ul, .legal-body ol { padding-left: 22px; margin: 0 0 16px; }
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--rd-azul, #5B3DF5); }
.legal-body a { color: var(--rd-primary-text, #4A2FE0); text-underline-offset: 3px; }
.legal-body strong { color: var(--rd-text, #0F1020); }
.legal-body code { font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--rd-surface-3, #F1EFFB); }
.legal-nota { margin: 6px 0 16px; padding: 14px 18px; border-radius: 12px; background: var(--rd-surface-2, #FAF9FE); border-left: 4px solid var(--rd-turquesa, #17A86B); }
.legal-nota p { margin: 0; font-size: 15.5px; }
.legal-fin { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rd-line, #E4E1F0); font-size: 15px !important; color: var(--rd-muted, #5C5F73) !important; }
.pendiente { background: #FEF9C3; border: 1px solid #EAB308; border-radius: 5px; padding: 0 6px; font-weight: 600; font-size: .92em; color: #5B4500; }

.legal-table-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--rd-line, #E4E1F0); border-radius: 12px; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.legal-body th, .legal-body td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rd-line, #E4E1F0); vertical-align: top; color: #3A3D52; }
.legal-body tr:last-child td { border-bottom: 0; }
.legal-body th { font-size: 13px; font-weight: 700; color: var(--rd-muted, #5C5F73); background: var(--rd-surface-2, #FAF9FE); }
.legal-body .ck-inline { border-color: var(--rd-line, #E4E1F0) !important; background: var(--rd-surface-2, #FAF9FE); }

/* ---- Footer ---- */
.lg-pie { padding: 28px 0 calc(36px + env(safe-area-inset-bottom, 0px)); background: var(--rd-noche, #0F1020); color: #9597B3; font-size: 14px; }
.lg-pie-in { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.lg-pie a { color: #C9CADB; }

/* ---- Tablet & phone ---- */
@media (max-width: 960px) {
    .lg-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; }
    .legal-toc { position: static; max-height: none; background: var(--rd-surface, #fff); border: 1px solid var(--rd-line, #E4E1F0); border-radius: 16px; padding: 16px 18px; }
    .legal-toc ol { border-left: 0; columns: 2; column-gap: 24px; }
    .legal-toc a { border-left: 0; padding: 5px 0; margin: 0; }
}
@media (max-width: 680px) {
    .lg-cab-in { flex-wrap: wrap; gap: 10px 12px; padding-bottom: 10px; min-height: 0; padding-top: 10px; }
    .lg-volver { margin-left: auto; min-height: 38px; padding: 7px 12px; font-size: 13.5px; }
    .lg-docs { order: 3; width: 100%; margin: 0; justify-content: stretch; }
    .lg-docs a { flex: 1; text-align: center; }
    .legal-toc ol { columns: 1; }
    .legal-body { border-radius: 16px; }
    .legal-body p, .legal-body li { font-size: 16px; }
}

@media print {
    html.lg, html.lg body.legal { background: #fff; }
    .lg-cab, .legal-toc, .lg-saltar, .wa-float, .lg-pie { display: none !important; }
    .lg-hero { background: none; color: #000; padding: 0 0 16px; }
    .lg-lead, .lg-meta { color: #333; }
    .lg-grid { display: block; padding: 0; }
    .legal-body { border: 0; box-shadow: none; padding: 0; }
}