/* ============================================================ Unobis — Legal Pages stylesheet Standalone, portable, system fonts. Reutilizable entre todos los clientes Unobis sin acoplamiento al sistema visual de cada web. El cliente puede personalizar el acento sobreescribiendo --legal-accent en el Light/dark mode automático via prefers-color-scheme. ============================================================ */ :root { /* ---------------------------------------------------------------- Light theme — fondo neutro (no compite con el cliente), acento cyan Unobis oscurecido para legibilidad sobre claro. ---------------------------------------------------------------- */ --legal-bg: #FAFAF7; --legal-bg-tint: #F4F2EC; --legal-surface: #FFFFFF; --legal-surface-2: #F6F7FA; --legal-ink: #0B0D1A; /* Unobis dark-base como tinta */ --legal-ink-muted: #4A4F5E; --legal-ink-soft: #6B7280; /* Unobis muted */ --legal-rule: rgba(11, 13, 26, 0.10); --legal-rule-strong: rgba(11, 13, 26, 0.20); /* Acento Unobis (cyan oscurecido para light) */ --legal-accent: #0891B2; --legal-accent-hover: #0E7490; --legal-accent-soft: rgba(0, 200, 255, 0.08); /* Acento secundario (purple Unobis, uso muy puntual) */ --legal-purple: #7C3AED; --legal-purple-soft: rgba(124, 58, 237, 0.06); /* Typography */ --legal-font-sans: "Inter", "ui-sans-serif", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --legal-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; /* Layout */ --legal-radius: 12px; --legal-radius-sm: 8px; --legal-container: min(720px, 92vw); --legal-ease: cubic-bezier(0.32, 0.72, 0, 1); } @media (prefers-color-scheme: dark) { :root { /* ---------------------------------------------------------------- Dark theme — paleta Unobis nativa. ---------------------------------------------------------------- */ --legal-bg: #0B0D1A; /* Unobis dark-base */ --legal-bg-tint: #0E1124; --legal-surface: #12152A; /* Unobis dark-surface */ --legal-surface-2: #161A33; --legal-ink: #E8EAF0; /* Unobis white */ --legal-ink-muted: #B0B5C8; --legal-ink-soft: #6B7280; /* Unobis muted */ --legal-rule: #1E2240; /* Unobis separator */ --legal-rule-strong: rgba(232, 234, 240, 0.20); --legal-accent: #00C8FF; /* Unobis cyan original */ --legal-accent-hover: #33D4FF; --legal-accent-soft: rgba(0, 200, 255, 0.10); --legal-purple: #7C3AED; /* Unobis purple */ --legal-purple-soft: rgba(124, 58, 237, 0.12); color-scheme: dark; } } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--legal-font-sans); font-size: 16px; line-height: 1.65; color: var(--legal-ink); background: var(--legal-bg); font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; } img, svg { max-width: 100%; display: block; } a { color: var(--legal-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--legal-accent) 32%, transparent); transition: color 200ms var(--legal-ease), border-color 200ms var(--legal-ease); } a:hover { color: var(--legal-accent-hover); border-bottom-color: var(--legal-accent); } h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.015em; color: var(--legal-ink); } button { font-family: inherit; cursor: pointer; } ul, ol { padding-left: 0; list-style: none; margin: 0; } /* ============================================================ LAYOUT — HEADER · MAIN · FOOTER ============================================================ */ .legal-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--legal-bg); } .legal-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--legal-bg) 92%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--legal-rule); } .legal-header__inner { width: var(--legal-container); max-width: 1100px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; } .legal-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--legal-ink); border-bottom: 0; letter-spacing: -0.005em; } .legal-back:hover { color: var(--legal-accent); border-bottom: 0; } .legal-back__arrow { display: inline-block; transition: transform 220ms var(--legal-ease); } .legal-back:hover .legal-back__arrow { transform: translateX(-3px); } .legal-lang { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px; border: 1px solid var(--legal-rule); border-radius: 999px; background: var(--legal-surface); } .legal-lang__btn { appearance: none; background: transparent; border: 0; padding: 4px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--legal-ink-soft); border-radius: 999px; transition: background 200ms var(--legal-ease), color 200ms var(--legal-ease); } .legal-lang__btn:hover { color: var(--legal-ink); } .legal-lang__btn.is-active { background: var(--legal-accent-soft); color: var(--legal-accent); } .legal-main { flex: 1; padding: clamp(40px, 7vw, 80px) 0 clamp(48px, 9vw, 100px); } .legal-content { width: var(--legal-container); margin-inline: auto; } .legal-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--legal-accent); margin: 0 0 18px; } .legal-title { font-size: clamp(36px, 5.5vw, 54px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 500; margin: 0 0 16px; } .legal-updated { font-size: 13px; color: var(--legal-ink-soft); margin: 0 0 48px; padding-bottom: 24px; border-bottom: 1px solid var(--legal-rule); } /* ============================================================ SECTIONS ============================================================ */ .legal-section { margin-bottom: 42px; } .legal-section:last-child { margin-bottom: 0; } .legal-section h2 { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.2; margin: 0 0 16px; } .legal-section h3 { font-size: 17px; line-height: 1.3; margin: 24px 0 12px; } .legal-section p { font-size: 15.5px; line-height: 1.72; color: var(--legal-ink-muted); margin: 0 0 12px; } .legal-section p:last-child { margin-bottom: 0; } .legal-section p strong { color: var(--legal-ink); font-weight: 600; } .legal-section code { font-family: var(--legal-font-mono); font-size: 0.88em; padding: 2px 6px; border-radius: 4px; background: var(--legal-accent-soft); color: var(--legal-accent); border: 1px solid color-mix(in srgb, var(--legal-accent) 16%, transparent); } /* ---------- Lists ---------- */ .legal-list { margin: 12px 0 16px; } .legal-list li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 15.5px; line-height: 1.72; color: var(--legal-ink-muted); } .legal-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--legal-accent); } .legal-list li strong { color: var(--legal-ink); font-weight: 600; } /* ---------- Data definition list (Aviso Legal table-like) ---------- */ .legal-data { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 12px 24px; margin: 16px 0 0; padding: 22px 26px; background: var(--legal-surface-2); border: 1px solid var(--legal-rule); border-radius: var(--legal-radius); } .legal-data dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--legal-ink-soft); padding-top: 2px; } .legal-data dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--legal-ink); } .legal-data dd a { font-weight: 500; } /* ---------- Tables (cookies) ---------- */ .legal-table { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: 14.5px; } .legal-table th, .legal-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--legal-rule); vertical-align: top; color: var(--legal-ink-muted); } .legal-table thead th { font-size: 11.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--legal-ink-soft); border-bottom: 1px solid var(--legal-rule-strong); } .legal-table td code { white-space: nowrap; } /* ---------- Callout (Resumen Cookies) — signature Unobis gradient ---------- */ .legal-callout { position: relative; padding: 22px 26px; background: linear-gradient(135deg, var(--legal-accent-soft) 0%, var(--legal-purple-soft) 100%), var(--legal-surface); border: 1px solid color-mix(in srgb, var(--legal-accent) 20%, transparent); border-radius: var(--legal-radius); overflow: hidden; } .legal-callout::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--legal-accent) 0%, var(--legal-purple) 100%); opacity: 0.65; } .legal-callout h2 { font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--legal-accent); margin: 0 0 10px; } .legal-callout p { color: var(--legal-ink); } /* ---------- Highlight de placeholder pendiente ---------- */ .legal-placeholder { display: inline-block; padding: 2px 8px; background: rgba(234, 179, 8, 0.16); border: 1px dashed rgba(234, 179, 8, 0.7); border-radius: 4px; font-family: var(--legal-font-mono); font-size: 0.86em; color: #92400E; } @media (prefers-color-scheme: dark) { .legal-placeholder { background: rgba(252, 211, 77, 0.12); border-color: rgba(252, 211, 77, 0.55); color: #FCD34D; } } /* ============================================================ FOOTER ============================================================ */ .legal-footer { border-top: 1px solid var(--legal-rule); padding: 28px 0 36px; background: var(--legal-bg-tint); } .legal-footer__inner { width: var(--legal-container); max-width: 1100px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .legal-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: 13.5px; } .legal-footer__nav a { color: var(--legal-ink-muted); border-bottom: 0; } .legal-footer__nav a:hover { color: var(--legal-accent); } .legal-footer__nav span[aria-hidden] { color: var(--legal-ink-soft); opacity: 0.6; } .legal-footer__copy { font-size: 12.5px; color: var(--legal-ink-soft); margin: 0; } .legal-footer__copy a { color: var(--legal-accent); font-weight: 500; border-bottom: 0; } /* ============================================================ i18n (data-lang) ============================================================ */ [data-lang="es"] { display: none; } html[lang="es"] [data-lang="ca"] { display: none; } html[lang="es"] [data-lang="es"] { display: revert; } /* ============================================================ ACCESSIBILITY ============================================================ */ :focus-visible { outline: 2px solid var(--legal-accent); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 640px) { .legal-data { grid-template-columns: 1fr; gap: 4px 0; padding: 18px 20px; } .legal-data dt { padding-top: 12px; } .legal-data dt:first-of-type { padding-top: 0; } .legal-table { font-size: 13.5px; } .legal-table th, .legal-table td { padding: 10px 8px; } .legal-header__inner { padding: 12px 0; gap: 10px; } .legal-back { font-size: 14px; } }