/* Circlay — estilos de las páginas legales. IndieLob, 2026.
   Siempre en claro, como la landing. */

:root{
  --bg:#f7f7fa; --surface:#ffffff; --raised:#f1f1f5;
  --text:#141416; --text-2:#52525b; --text-3:#8a8a94;
  --line:#e3e3e8; --accent:#2f6fed;
  --ok-bg:#edf6f1; --ok-line:#cfe6da; --ok-text:#1d4a33;
  --warn-bg:#fcf3e9; --warn-line:#efd9bd; --warn-text:#5e3e12;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
/* franja de color de la marca, arriba del todo */
body::before{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg,#3fae8c,#f07a5a,#e9a23b,#7b63f0,#d4608f,#4d8ff0);
}
.wrap{max-width:820px; margin:0 auto; padding:0 24px 96px}
header.doc{padding:56px 0 32px; border-bottom:1px solid var(--line); margin-bottom:40px}
.brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:30px; text-decoration:none; color:var(--text)}
.brand img{width:76px; height:76px; border-radius:17px; box-shadow:0 10px 30px -12px rgba(20,20,40,.45)}
.brand span{font-size:22px; font-weight:700; letter-spacing:-.02em}
h1{font-size:clamp(28px,5vw,40px); line-height:1.15; letter-spacing:-.025em; margin:0 0 14px; font-weight:700}
.meta{color:var(--text-3); font-size:14px; margin:0}
.meta span{white-space:nowrap}
.meta span+span::before{content:"·"; margin:0 8px; color:var(--line)}
.callout{
  background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok-text);
  border-radius:14px; padding:20px 22px; margin:32px 0 8px;
}
.callout p{margin:0; color:inherit}
.callout p + p{margin-top:10px}
.callout strong{font-weight:700; color:inherit}
.callout.warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-text)}
.callout.warn a{color:var(--warn-text)}
.toc{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin:36px 0 48px}
.toc h2{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin:0 0 12px; font-weight:700}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:32px}
.toc li{margin:4px 0; break-inside:avoid; font-size:14.5px}
.toc a{color:var(--text-2); text-decoration:none}
.toc a:hover{color:var(--text); text-decoration:underline}
@media (max-width:640px){.toc ol{columns:1}}
section{margin:0 0 44px; scroll-margin-top:24px}
h2{font-size:20px; letter-spacing:-.015em; margin:0 0 14px; font-weight:700; display:flex; gap:12px; align-items:baseline}
h2 .num{color:var(--accent); font-variant-numeric:tabular-nums; font-size:15px; font-weight:650; min-width:22px}
h3{font-size:16px; margin:26px 0 8px; font-weight:700}
p{margin:0 0 14px; color:var(--text-2)}
p.lead{color:var(--text)}
ul,ol.body{margin:0 0 14px; padding-left:22px; color:var(--text-2)}
li{margin:7px 0}
strong{color:var(--text); font-weight:650}
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; margin:18px 0 20px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:14.5px}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text-2)}
th{color:var(--text); font-weight:650; background:var(--raised); white-space:nowrap}
tr:last-child td{border-bottom:none}
td strong{color:var(--text)}
.pill{display:inline-block; font-size:12px; font-weight:650; padding:2px 9px; border-radius:99px; border:1px solid var(--line); background:var(--raised); color:var(--text-2)}
.pill.no{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-text)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin:18px 0}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.nolist{list-style:none; padding-left:0}
.nolist li{position:relative; padding-left:26px}
.nolist li::before{content:"✕"; position:absolute; left:4px; top:0; color:var(--text-3); font-size:13px; font-weight:700}
footer.doc{border-top:1px solid var(--line); margin-top:56px; padding-top:28px; color:var(--text-3); font-size:14px}
footer.doc p{color:var(--text-3)}
footer.doc a{color:var(--text-2)}
footer.doc .links{margin-bottom:16px; display:flex; flex-wrap:wrap; gap:8px 18px}
a{color:var(--accent)}
.langbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:22px 0 0}
.langbar .lbl{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-weight:700; margin-right:2px}
.langbar a{font-size:13px; line-height:1.4; text-decoration:none; color:var(--text-2); border:1px solid var(--line); background:var(--surface); padding:4px 11px; border-radius:99px; white-space:nowrap}
.langbar a:hover{color:var(--text); border-color:var(--text-3)}
.langbar a[aria-current="true"]{background:var(--text); color:#fff; border-color:var(--text); font-weight:650}
.langbar + header.doc{padding-top:30px}
@media print{
  body{background:#fff; color:#000; font-size:11pt}
  body::before,.langbar,.toc{display:none}
  section{page-break-inside:auto} h2{page-break-after:avoid}
}