/* Talental legal pages (/terms, /privacidad): shares the landing brand tokens + system */ :root { --canvas: #EFE9DB; --paper: #E5DDC8; --card: #F0EBDD; --tint: #DACFB3; --ink: #1C1B16; --ink-2: #4A4639; --stone: #807866; --rule: #C6BCA1; --rule-soft: #D5CBB0; --olive: #5C6B3F; --olive-press: #44512E; --olive-light: #9DAE7C; --on-olive: #F4F0E2; --font-sans: "DM Sans", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; --container: 1200px; --gutter: 32px; --gutter-sm: 22px; --tr-mono: 0.06em; --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 180ms; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { background: var(--canvas); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "kern"; } ::selection { background: var(--olive); color: var(--on-olive); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; border-radius: 2px; } .wrap { max-width: 1080px; margin: 0 auto; padding-inline: var(--gutter); } @media (max-width: 640px) { .wrap { padding-inline: var(--gutter-sm); } } .dot { color: var(--olive); } /* Language visibility: JS sets data-lang on */ [data-lang="es"] [lang="en"] { display: none; } [data-lang="en"] [lang="es"] { display: none; } /* ---- NAV (matches landing) ---- */ .nav { position: sticky; top: 0; z-index: 30; background: rgba(239, 233, 219, 0.78); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--rule); } .nav__inner { max-width: var(--container); margin: 0 auto; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; } @media (max-width: 640px) { .nav__inner { padding: 16px var(--gutter-sm); } } .wordmark { display: inline-flex; align-items: center; } .wordmark__img { display: block; height: 34px; width: auto; } .nav__actions { display: inline-flex; align-items: center; gap: 22px; } .nav__link { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); text-transform: uppercase; color: rgba(28, 27, 22, 0.7); transition: color var(--dur) var(--ease); } .nav__link:hover { color: var(--olive); } .nav__cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--on-olive); background: var(--olive); padding: 9px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background var(--dur) var(--ease); } .nav__cta:hover { color: var(--on-olive); background: var(--olive-press); } @media (max-width: 520px) { .nav__link { display: none; } } /* ---- LEGAL PAGE HEAD ---- */ .legal { padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 96px); } .legal__head { border-bottom: 1px solid var(--rule); padding-bottom: clamp(28px, 4vw, 40px); } .legal__title { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; max-width: 20ch; } .legal__meta { margin-top: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--stone); } /* Language toggle pills */ .legal__lang { margin-top: clamp(22px, 3vw, 30px); display: inline-flex; align-items: center; gap: 8px; } .lang-pill { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--ink-2); background: transparent; border: 1px solid var(--rule); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .lang-pill:hover { border-color: var(--olive); color: var(--olive); } .lang-pill[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: var(--on-olive); } .lang-pill[aria-pressed="true"]:hover { background: var(--olive-press); color: var(--on-olive); } /* ---- LAYOUT: sticky TOC + body ---- */ .legal__layout { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; } @media (max-width: 900px) { .legal__layout { grid-template-columns: 1fr; gap: 36px; } } .legal__toc { position: sticky; top: 96px; } @media (max-width: 900px) { .legal__toc { position: static; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); padding: 20px 22px; } } .legal__toc-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--olive); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; } .legal__toc-label::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--olive); flex: none; } .legal__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .legal__toc li { counter-increment: toc; } .legal__toc a { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; line-height: 1.4; color: var(--stone); transition: color var(--dur) var(--ease); } .legal__toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 10px; color: var(--rule); padding-top: 2px; flex: none; transition: color var(--dur) var(--ease); } .legal__toc a:hover { color: var(--olive); } .legal__toc a:hover::before { color: var(--olive); } .legal__toc a[aria-current="true"] { color: var(--ink); } .legal__toc a[aria-current="true"]::before { color: var(--olive); } /* Unnumbered TOC (privacy notice) */ .legal__toc--plain ol { counter-reset: none; } .legal__toc--plain a::before { content: none; } /* ---- LEGAL BODY ---- */ .legal__body { min-width: 0; max-width: 68ch; } .legal__body section { scroll-margin-top: 96px; } .legal__body section + section { margin-top: clamp(36px, 4vw, 52px); border-top: 1px solid var(--rule-soft); padding-top: clamp(32px, 4vw, 44px); } .legal__body h2 { margin: 0 0 18px; font-family: var(--font-sans); font-weight: 500; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); display: flex; gap: 14px; } .legal__body h2 .legal__num { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: var(--tr-mono); color: var(--olive); padding-top: 8px; flex: none; } .legal__body h3 { margin: clamp(24px, 3vw, 32px) 0 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--olive); } .legal__body p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--ink-2); } .legal__body p:last-child { margin-bottom: 0; } .legal__body strong { color: var(--ink); font-weight: 500; } .legal__body a:not(.btn-primary) { color: var(--olive); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule); transition: text-decoration-color var(--dur) var(--ease); } .legal__body a:not(.btn-primary):hover { text-decoration-color: var(--olive); } .legal__body ul, .legal__body ol.legal__list { margin: 0 0 14px; padding-left: 20px; font-size: 16px; line-height: 1.7; color: var(--ink-2); } .legal__body li { margin-bottom: 8px; } .legal__body li::marker { color: var(--olive); } .legal__body ul { list-style: none; padding-left: 0; } .legal__body ul > li { position: relative; padding-left: 20px; } .legal__body ul > li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--olive-light); } /* ---- TLDR SUMMARY TABLE ---- */ .legal__tldr { margin: clamp(28px, 4vw, 40px) 0 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); overflow: hidden; } .legal__tldr-head { padding: 16px 22px; border-bottom: 1px solid var(--rule); background: var(--paper); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--olive); } .legal__table-scroll { overflow-x: auto; } .legal__tldr table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; } .legal__tldr th, .legal__tldr td { padding: 14px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-soft); } .legal__tldr tr:last-child th, .legal__tldr tr:last-child td { border-bottom: 0; } .legal__tldr th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--ink); white-space: nowrap; } .legal__tldr thead th { color: var(--stone); background: transparent; } .legal__tldr td { color: var(--ink-2); } /* ---- COMPARISON BOXES (guarantee: applies / does not apply) ---- */ .legal__compare { margin: clamp(24px, 3vw, 32px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .legal__compare { grid-template-columns: 1fr; } } .legal__box { border: 1px solid var(--rule); border-radius: 8px; background: var(--card); padding: 22px; } .legal__box--yes { border-color: rgba(92, 107, 63, 0.45); } .legal__box--no { background: var(--paper); } .legal__box-head { margin: 0 0 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tr-mono); text-transform: uppercase; display: flex; align-items: center; gap: 9px; } .legal__box--yes .legal__box-head { color: var(--olive); } .legal__box--no .legal__box-head { color: var(--stone); } .legal__box-head svg { width: 14px; height: 14px; flex: none; } .legal__box ul { margin: 0; } .legal__box li { font-size: 15px; line-height: 1.6; } .legal__box--no li::before { background: var(--stone); } /* ---- CLOSING CTA ---- */ .legal__cta { margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--rule); padding-top: clamp(36px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .legal__cta h3 { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.02em; color: var(--ink); max-width: 22ch; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--olive); color: var(--on-olive); font-family: var(--font-sans); font-weight: 500; font-size: 15px; padding: 14px 22px; border-radius: 6px; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn-primary:hover { background: var(--olive-press); } .btn-primary:active { transform: translateY(0.5px); } .btn-primary svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); } .btn-primary:hover svg { transform: translateX(3px); } /* ---- FOOTER (matches landing) ---- */ .footer-strip { background: var(--ink); color: var(--canvas); border-top: 1px solid rgba(157, 174, 124, 0.25); } .footer-strip__inner { max-width: var(--container); margin: 0 auto; padding: 28px var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-mono); text-transform: uppercase; color: rgba(239,233,219,0.55); } @media (max-width: 640px) { .footer-strip__inner { padding: 24px var(--gutter-sm); grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; } } .footer-strip__left { justify-self: start; } .footer-strip__right { justify-self: end; display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; } @media (max-width: 640px) { .footer-strip__left, .footer-strip__right { justify-self: center; justify-content: center; } } .footer-strip__left .wordmark__img { height: 26px; } .footer-strip a { color: rgba(239,233,219,0.7); } .footer-strip a:hover { color: var(--olive-light); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }