/* Hoja compartida por los tres documentos legales.
   Aquí sí hay archivo aparte y no CSS en línea: son tres páginas con el mismo
   aspecto, y tres copias del mismo bloque se desincronizan a la primera.

   El marfil es papel, no fondo: aparece cuando hay algo que leer con calma, y
   un documento legal es el caso más claro que tiene este producto. */
:root{
  --night:#0D1512; --studio:#0A0F0D; --deep:#0F2A22;
  --gold:#C9A86A; --ivory:#F4EFE8; --ink:#101010;
  --text:#ECE6DD; --dim:rgba(236,230,221,.60); --faint:rgba(236,230,221,.38);
  --line:rgba(201,168,106,.30); --line-soft:rgba(201,168,106,.16);
  --rule:rgba(16,16,16,.12);
  --disp:"Marcellus",Georgia,"Times New Roman",serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(18px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--night);color:var(--text);
  font:400 16px/1.7 var(--ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

header{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px var(--pad);
  background:rgba(13,21,18,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft)}
header .mono{height:26px;width:auto}
.langs{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px}
.langs button{background:none;border:0;cursor:pointer;color:var(--faint);
  font:500 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  padding:7px 11px;border-radius:999px}
.langs button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}

/* La hoja: papel marfil sobre el verde, con el ancho de una columna de lectura */
main{padding:clamp(28px,5vw,64px) var(--pad) 0}
.sheet{max-width:820px;margin:0 auto;background:var(--ivory);color:var(--ink);
  padding:clamp(28px,5vw,72px);border:1px solid var(--line-soft)}
.kick{font:500 11px/1.4 var(--ui);letter-spacing:.20em;text-transform:uppercase;
  color:#8A7442;margin:0 0 14px}
h1{font-family:var(--disp);font-weight:400;font-size:clamp(28px,4.4vw,40px);
  line-height:1.14;margin:0 0 10px}
.stamp{font-size:13px;color:rgba(16,16,16,.55);margin:0 0 30px;
  padding-bottom:26px;border-bottom:1px solid var(--rule)}
h2{font-family:var(--disp);font-weight:400;font-size:clamp(20px,2.4vw,25px);
  line-height:1.25;margin:40px 0 12px;padding-top:26px;border-top:1px solid var(--rule)}
h2:first-of-type{border-top:0;padding-top:0}
h3{font-family:var(--ui);font-weight:600;font-size:15.5px;margin:24px 0 8px}
p,li{color:rgba(16,16,16,.80);margin:0 0 14px}
li{margin:0 0 9px}
ul,ol{padding-left:22px;margin:0 0 16px}
strong{color:var(--ink);font-weight:600}
.lead{font-size:17px;color:rgba(16,16,16,.88)}

/* Lo que hay que pactar expresamente: se lee aunque se lea en diagonal. */
.box{border:1px solid rgba(16,16,16,.22);background:rgba(201,168,106,.10);
  padding:20px 22px;margin:22px 0}
.box p:last-child,.box li:last-child{margin-bottom:0}
.box .t{font:600 11px/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:#7A6534;margin:0 0 10px}

/* Hueco pendiente de cerrar. Va marcado en el documento, no en una nota aparte:
   un hueco que solo vive en un correo se publica sin rellenar. */
.gap{background:#F6E2B8;border-bottom:1px solid #B08A3A;padding:0 4px;
  font-weight:600;color:#5B4715}

table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
th,td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:1px solid var(--rule)}
th{font:600 11px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(16,16,16,.55)}
.wrap-x{overflow-x:auto}

.toc{margin:0 0 34px;padding:0;list-style:none;columns:2;column-gap:34px}
.toc li{margin:0 0 7px;font-size:14.5px;break-inside:avoid}
.toc a{color:#6E5A2E;text-decoration:none;border-bottom:1px solid rgba(110,90,46,.3)}
.toc a:hover{border-bottom-color:#6E5A2E}
@media(max-width:620px){.toc{columns:1}}

footer{max-width:820px;margin:0 auto;padding:30px var(--pad) 56px;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center}
footer a,footer span{color:var(--faint);font-size:12.5px;text-decoration:none}
footer a:hover{color:var(--dim)}
footer a[aria-current="page"]{color:var(--gold)}

[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}