/* Páginas legales de phoster.io — mismo sistema visual que la landing */
:root{
  --ink:#101A2B; --gold:#F8D96A; --gold-deep:#E6B93F; --bg:#FCFCFA; --muted:#5B6472;
  --line:rgba(16,25,43,.10); --gold-soft:#FDF6DC;
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; }
.fr{ font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.02em; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
a{ color:inherit; text-decoration:none; }

.mark .horizon{ fill:currentColor; }
.mark .light{ fill:var(--gold); }
.mark .ray{ stroke:var(--gold); stroke-width:4.2; stroke-linecap:round; }

/* NAV */
header{ position:sticky; top:0; z-index:40; background:rgba(252,252,250,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
nav{ max-width:1080px; margin:0 auto; padding:0 28px; height:66px; display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:9px; }
.logo .wm{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.navlinks{ display:flex; align-items:center; gap:22px; font-size:14px; color:var(--muted); }
.navlinks a:hover{ color:var(--ink); }
.lang{ font-family:inherit; font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer; background:none; transition:.25s; }
.lang:hover{ color:var(--ink); border-color:rgba(16,25,43,.28); }

/* DOCUMENTO */
.doc{ max-width:720px; margin:0 auto; padding:72px 28px 96px; }
.doc h1{ font-size:clamp(32px,5vw,46px); line-height:1.08; margin-top:14px; }
.doc .vig{ color:var(--muted); font-size:14px; margin-top:14px; }
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:30px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.tabs a{ font-size:13.5px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:7px 14px; transition:.25s; }
.tabs a:hover{ color:var(--ink); border-color:rgba(16,25,43,.28); }
.tabs a[aria-current="page"]{ color:var(--ink); background:var(--gold-soft); border-color:var(--gold-deep); }

.doc .lead{ font-size:17px; color:var(--ink); margin-top:34px; line-height:1.65; }
.doc h2{ font-family:'Fraunces',serif; font-weight:500; font-size:23px; letter-spacing:-.01em; margin-top:46px; line-height:1.25; }
.doc h3{ font-size:15px; font-weight:600; margin-top:24px; }
.doc p, .doc li{ font-size:15.5px; color:#2E3747; line-height:1.72; }
.doc p{ margin-top:14px; }
.doc ul{ margin-top:12px; padding-left:20px; }
.doc li{ margin-top:8px; }
.doc li::marker{ color:var(--gold-deep); }
.doc a.in{ border-bottom:1.5px solid var(--gold); }
.doc a.in:hover{ border-color:var(--gold-deep); }
.doc .box{ margin-top:20px; padding:18px 20px; background:var(--gold-soft); border-left:3px solid var(--gold-deep); border-radius:4px; }
.doc .box p{ margin-top:0; }
.doc .box p + p{ margin-top:10px; }
.doc dl{ margin-top:16px; display:grid; grid-template-columns:auto 1fr; gap:8px 22px; font-size:15.5px; }
.doc dt{ color:var(--muted); }
.doc dd{ color:var(--ink); }

[data-lang]{ display:none; }
html[lang="es"] [data-lang="es"], html[lang="en"] [data-lang="en"]{ display:block; }
html[lang="es"] span[data-lang="es"], html[lang="en"] span[data-lang="en"]{ display:inline; }

/* FOOTER */
footer{ border-top:1px solid var(--line); padding:36px 0 34px; }
.footbot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.footlegal{ display:flex; gap:18px; flex-wrap:wrap; }
.footlegal a:hover{ color:var(--ink); }

@media(max-width:760px){
  nav, .wrap{ padding:0 16px; }
  .doc{ padding:48px 16px 72px; }
  .navlinks .home{ display:none; }
  .doc dl{ grid-template-columns:1fr; gap:2px; }
  .doc dd{ margin-bottom:10px; }
}
.doc code{ font-size:13.5px; background:rgba(16,25,43,.06); padding:2px 6px; border-radius:4px; }