/* ============================================================================ Momix — Privacidad y Términos. Se apoya en home.css (tokens de color y tipografía) y agrega solo lo de una página de texto largo: una columna angosta y jerarquía clara. Un documento legal que no se puede leer no cumple su función, aunque diga todo lo que tiene que decir. Respeta claro/oscuro por los mismos tokens que la home, así que no define ningún color literal. ============================================================================ */ .lg-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; border-bottom:1px solid var(--bord); background:var(--card); } .lg-logo { display:inline-flex; align-items:center; gap:9px; text-decoration:none; } .lg-nav { display:flex; align-items:center; gap:6px; } .lg-nav a { min-height:44px; display:inline-flex; align-items:center; padding:0 13px; border-radius:9px; text-decoration:none; color:var(--mut); font:600 13.5px 'Manrope',sans-serif; transition:background .16s, color .16s; } .lg-nav a:hover { background:var(--inb); color:var(--head); } .lg-nav a[aria-current="page"] { background:var(--inb); color:var(--head); } .lg-lang { border:1px solid var(--bord); } /* 68ch: el renglón cómodo para leer seguido. Más ancho y el ojo pierde el salto de línea. */ .lg-wrap { max-width:68ch; margin:0 auto; padding:44px 24px 90px; color:var(--head); } .lg-wrap h1 { font:700 clamp(26px,4vw,34px)/1.2 'Outfit','Manrope',sans-serif; margin:0 0 6px; text-wrap:balance; } .lg-sub { margin:0 0 34px; color:var(--mut); font-size:14px; } .lg-wrap section { margin:0 0 30px; } .lg-wrap h2 { font:700 18px/1.3 'Manrope',sans-serif; margin:0 0 10px; text-wrap:balance; } .lg-wrap p { margin:0 0 12px; font-size:15.5px; line-height:1.68; color:var(--mut); } .lg-wrap p strong { color:var(--head); font-weight:700; } .lg-wrap a { color:var(--head); text-decoration:underline; text-underline-offset:2px; } .lg-wrap a:hover { color:#0B6E63; } .lg-foot { margin-top:44px; padding-top:22px; border-top:1px solid var(--bord); font-size:14px; color:var(--mut); } @media (max-width:640px) { .lg-head { padding:12px 14px; } .lg-wrap { padding:30px 18px 80px; } /* La barra fija de la PWA vive abajo del todo: sin esto el último renglón queda debajo. */ .lg-foot { margin-bottom:76px; } } /* El tema lo elige el visitante en la home y se guarda en localStorage; acá se aplica en porque el script corre antes de que exista . Se traduce a las mismas variables que usa home.css para `body.dark`, así que las dos superficies no se pueden separar. */ html.pre-dark body { --pg:#0B1220; --head:#F1F5F9; --kick:#94A3B8; --mut:#CBD5E1; --card:#111D33; --bord:#233047; --inb:#0B1220; background:var(--pg); color:var(--head); } .lg-body { background:var(--pg); color:var(--head); } /* ── Formulario de contacto sobre datos personales ─────────────────────────────────────────── Reemplaza al `mailto:` que estaba acá: la dirección ya no se imprime, para que no la coseche un scraper (pedido de Máximo, 2026-08-26). El canal se conserva — es por donde se ejercen los derechos de la Ley 25.326 — y lo que cambia es la forma. */ .lg-form { display:flex; flex-direction:column; gap:6px; margin:14px 0 0; } .lg-lbl { font:600 13px 'Manrope',sans-serif; color:var(--head); margin-top:8px; } .lg-in { width:100%; padding:11px 13px; border:1px solid var(--bord); border-radius:10px; background:var(--card); color:var(--head); font:400 15px 'Manrope',sans-serif; } .lg-in:focus-visible { outline:2px solid #22D3A6; outline-offset:1px; border-color:transparent; } .lg-ta { resize:vertical; min-height:96px; } .lg-btn { align-self:flex-start; margin-top:12px; min-height:44px; padding:0 22px; border:0; border-radius:999px; background:#22D3A6; color:#08111F; font:600 15px 'Manrope',sans-serif; cursor:pointer; } .lg-btn:hover { filter:brightness(1.06); } .lg-btn:focus-visible { outline:2px solid var(--head); outline-offset:2px; } /* El honeypot: fuera de la vista pero NO con display:none — algunos bots ignoran los ocultos así, y los lectores de pantalla ya lo saltean por el aria-hidden y el tabindex negativo. */ .lg-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .lg-ok { padding:11px 14px; border-radius:10px; background:#D9F2E7; color:#0B6E4F; font-weight:600; } .lg-err { padding:11px 14px; border-radius:10px; background:#FCE3E3; color:#A32B2B; font-weight:600; }