/* Legal pages (Privacy Policy, Legal Notice) — reuses The Circle design tokens. */
:root{
  --ink:#18352c;
  --ink-2:#2e4b42;
  --cream:#f5f0e6;
  --paper:#fbf8f1;
  --line:rgba(24,53,44,.18);
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
h1,h2,h3,.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.03em}
img{max-width:100%;display:block}
a{color:inherit}
.container{width:min(1200px,calc(100% - 40px));margin:0 auto}
.legal-shell{width:min(820px,calc(100% - 40px));margin:0 auto}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:var(--ink-2)}

.legal-nav{background:var(--ink);color:var(--white)}
.legal-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0}
.legal-nav a{text-decoration:none}
.nav-brand-title{font-family:Georgia,'Times New Roman',serif;font-size:28px;line-height:1;color:rgba(255,255,255,.98);letter-spacing:-.03em}
.legal-nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:20px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.legal-nav-links a{color:rgba(255,255,255,.82)}
.legal-nav-links a:hover{color:#fff;text-decoration:underline}

.legal-hero{background:var(--cream);padding:64px 0 46px;border-bottom:1px solid var(--line)}
.legal-hero h1{font-size:clamp(36px,4.6vw,58px);line-height:1.02;margin:12px 0 14px}
.legal-hero p{margin:0;color:#50635c;font-size:15px}
.lang-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.lang-jump a{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--ink);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:.25s ease}
.lang-jump a:hover{background:var(--ink);color:var(--white)}

.legal-body{padding:56px 0 76px}
.legal-body section{margin-bottom:54px;scroll-margin-top:24px}
.legal-body h2{font-size:clamp(28px,3.2vw,38px);line-height:1.08;margin:0 0 6px;padding-top:8px}
.legal-body h2.lang-heading{padding-top:0;border-top:1px solid var(--line);padding-top:40px;margin-top:12px}
.legal-body h3{font-size:21px;margin:32px 0 8px}
.legal-body p{margin:0 0 14px;font-size:15px;color:#3d554e}
.legal-body ul{margin:0 0 16px;padding-left:20px;font-size:15px;color:#3d554e}
.legal-body li{margin-bottom:7px}
.legal-body a{color:var(--ink-2)}
.legal-body strong{color:var(--ink)}
.updated{display:inline-block;margin-top:6px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:#718079}
.note{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin:0 0 18px}
.note p:last-child{margin-bottom:0}
.back-home{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--white);font-size:13px;font-weight:700;text-decoration:none}

.footer{padding:40px 0 28px;background:var(--ink);color:var(--white)}
.footer-grid{display:flex;justify-content:space-between;gap:30px;align-items:end;flex-wrap:wrap}
.footer-brand-logo{display:block;height:auto;width:230px;max-width:100%;object-fit:contain}
.footer-links{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:12px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.footer-links a{color:rgba(255,255,255,.82);text-decoration:none}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-note{max-width:580px;color:rgba(255,255,255,.58);font-size:11px;line-height:1.6}

@media(max-width:600px){
  .container,.legal-shell{width:min(100% - 26px,1200px)}
  .legal-nav-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .legal-hero{padding:44px 0 34px}
  .legal-body{padding:40px 0 56px}
  .legal-body section{margin-bottom:42px}
  .footer-grid{display:block}
  .footer-note{margin-top:22px}
}

/* Language scoping — only the active language is ever rendered.
   Driven purely by the <html lang> attribute, so the page still shows one
   complete language if JavaScript never runs. */
html[lang="en"] .lang-es,
html[lang="es"] .lang-en{display:none}

/* Language switcher: a single small flag, matched to the scale of the nav
   labels. Height is fixed and width stays automatic so each flag keeps its own
   proportions and is never stretched or cropped. */
.flag{display:block;height:14px;width:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.38)}
.lang-switch{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:inherit;cursor:pointer;padding:7px 9px;line-height:0;border-radius:6px;opacity:.88;transition:opacity .25s ease,transform .25s ease}
.lang-switch:hover{opacity:1;transform:translateY(-1px)}
.lang-switch:focus-visible{outline:2px solid rgba(255,255,255,.75);outline-offset:2px}
