/* ESX Chatbot — páginas legales (términos, privacidad, arrepentimiento). Autocontenido; paleta de la landing. */
:root {
  color-scheme: dark;
  --lg-bg: #0A0E17;
  --lg-bg-2: #111827;
  --lg-card: #151D2B;
  --lg-border: #334155;
  --lg-text: #F1F5F9;
  --lg-text-2: #94A3B8;
  --lg-text-3: #64748B;
  --lg-primary: #10B981;
  --lg-primary-hover: #059669;
  --lg-link: #34D399;
  --lg-radius: 8px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--lg-bg); color: var(--lg-text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }

.lg-header { border-bottom: 1px solid var(--lg-border); background: var(--lg-bg-2); }
.lg-header__in { max-width: 760px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lg-header img { display: block; height: 38px; width: auto; }
.lg-header a.lg-back { color: var(--lg-text-2); font-size: .9rem; text-decoration: none; }
.lg-header a.lg-back:hover { color: var(--lg-link); }
.lg-main { max-width: 760px; margin: 0 auto; padding: 32px 16px 56px; }
.lg-note { display: inline-block; font-size: .75rem; color: var(--lg-text-3); border: 1px solid var(--lg-border); border-radius: 999px; padding: 2px 10px; margin-bottom: 16px; }
.lg-main h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.2; margin-bottom: 6px; }
.lg-meta { color: var(--lg-text-2); font-size: .9rem; margin-bottom: 24px; }
.lg-toc { background: var(--lg-card); border: 1px solid var(--lg-border); border-radius: var(--lg-radius); padding: 16px 20px; margin-bottom: 32px; }
.lg-toc strong { display: block; margin-bottom: 8px; }
.lg-toc ol { padding-left: 20px; columns: 1; }
.lg-toc li { margin: 4px 0; font-size: .95rem; }
.lg-toc a { color: var(--lg-link); text-decoration: none; }
.lg-toc a:hover, .lg-main article a:hover { text-decoration: underline; }
.lg-main article h2 { font-size: 1.25rem; margin: 36px 0 10px; scroll-margin-top: 16px; }
.lg-main article h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.lg-main article p, .lg-main article li { color: #d4d4d4; line-height: 1.75; font-size: 1rem; }
.lg-main article p { margin: 10px 0; }
.lg-main article ul, .lg-main article ol { padding-left: 22px; margin: 10px 0; }
.lg-main article li { margin: 6px 0; }
.lg-main article a { color: var(--lg-link); overflow-wrap: anywhere; }
.lg-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .92rem; display: block; overflow-x: auto; }
.lg-table th, .lg-table td { border: 1px solid var(--lg-border); padding: 8px 10px; text-align: left; vertical-align: top; color: #d4d4d4; }
.lg-table th { background: var(--lg-card); color: var(--lg-text); }
.lg-box { background: var(--lg-card); border: 1px solid var(--lg-border); border-left: 3px solid var(--lg-primary); border-radius: var(--lg-radius); padding: 12px 16px; margin: 14px 0; }
.lg-footer { border-top: 1px solid var(--lg-border); background: var(--lg-bg-2); }
.lg-footer__in { max-width: 760px; margin: 0 auto; padding: 24px 16px; font-size: .9rem; color: var(--lg-text-2); }
.lg-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }
.lg-footer a { color: var(--lg-text-2); }
.lg-footer a:hover { color: var(--lg-link); }
.lg-form { display: grid; gap: 14px; margin: 16px 0; }
.lg-form label { display: grid; gap: 6px; font-size: .92rem; color: var(--lg-text); }
.lg-form input, .lg-form textarea { background: var(--lg-bg); color: var(--lg-text); border: 1px solid var(--lg-border); border-radius: var(--lg-radius); padding: 12px; font: inherit; width: 100%; }
.lg-form input:focus, .lg-form textarea:focus { outline: 2px solid var(--lg-primary); outline-offset: 1px; }
.lg-btn { display: inline-block; background: var(--lg-primary); color: #fff; border: 0; border-radius: var(--lg-radius); padding: 14px 24px; font: inherit; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; }
.lg-btn:hover { background: var(--lg-primary-hover); }
.lg-btn--ghost { background: transparent; border: 1px solid var(--lg-border); color: var(--lg-text); }
.lg-btn--ghost:hover { background: var(--lg-card); }
.lg-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lg-err { color: #f87171; font-size: .9rem; min-height: 1.2em; }
@media (min-width: 640px) { .lg-main { padding-top: 48px; } .lg-toc ol { columns: 2; column-gap: 28px; } }