/* Hoja compartida de las páginas legales. Reusa los tokens de la landing (capa-v3.html)
   en vez de duplicar sus ~70KB de CSS: acá solo se necesita tipografía y texto corrido. */
:root{
  --ink:#070C14; --ink-2:#0B1220; --ink-3:#101A2C;
  --line:#1B2740; --line-soft:rgba(255,255,255,.07);
  --text:#EEF3FA; --muted:#94A3BC; --dim:#7684A0;
  --gold:#E3B341; --gold-soft:rgba(227,179,65,.12); --gold-line:rgba(227,179,65,.34);
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px;
  --r-sm:8px; --r-md:14px;
  --shell:min(760px, 100% - 2 * var(--s-3));   /* medida de lectura, más angosta que la landing */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.shell{width:var(--shell); margin-inline:auto}

header.bar{
  border-bottom:1px solid var(--line); background:rgba(7,12,20,.9);
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:10;
}
header.bar .shell{display:flex; align-items:center; justify-content:space-between; height:64px; gap:var(--s-3)}
.brand{
  font-weight:600; letter-spacing:-.02em; font-size:1.05rem;
  color:var(--text); text-decoration:none;
}
.brand span{color:var(--gold)}
.bar a.back{color:var(--muted); text-decoration:none; font-size:.9rem}
.bar a.back:hover{color:var(--text)}

main{padding:var(--s-6) 0 var(--s-6)}
h1{
  font-size:clamp(1.9rem, 1.3rem + 2vw, 2.6rem); font-weight:500; letter-spacing:-.03em;
  line-height:1.15; margin:0 0 var(--s-2);
}
.updated{
  font-family:var(--mono); font-size:.78rem; color:var(--dim);
  text-transform:uppercase; letter-spacing:.08em; margin:0 0 var(--s-5);
}
h2{
  font-size:1.18rem; font-weight:600; letter-spacing:-.01em;
  margin:var(--s-5) 0 var(--s-2); padding-top:var(--s-2);
  border-top:1px solid var(--line-soft);
}
h3{font-size:1rem; font-weight:600; margin:var(--s-3) 0 var(--s-1)}
p{margin:0 0 var(--s-2); color:var(--muted)}
ul,ol{margin:0 0 var(--s-2); padding-left:1.35em; color:var(--muted)}
li{margin-bottom:.4em}
strong{color:var(--text); font-weight:500}
a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-line)}
a:hover{border-bottom-color:var(--gold)}

table{width:100%; border-collapse:collapse; margin:var(--s-2) 0 var(--s-3); font-size:.92rem}
th,td{text-align:left; padding:.6em .8em; border-bottom:1px solid var(--line-soft); vertical-align:top}
th{color:var(--text); font-weight:500; border-bottom-color:var(--line)}
td{color:var(--muted)}
/* Las tablas no pueden hacer scrollear la página: se desplazan dentro de su caja. */
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

.nota{
  background:var(--ink-2); border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:var(--r-sm); padding:var(--s-2) var(--s-3); margin:var(--s-3) 0;
}
.nota p:last-child{margin-bottom:0}
.nota strong{color:var(--gold)}

/* Marca los datos que faltan por definir antes de publicar. Deliberadamente llamativo:
   la idea es que no se pueda publicar sin darse cuenta. */
.pendiente{
  background:var(--gold-soft); border:1px dashed var(--gold-line); border-radius:4px;
  padding:.1em .45em; color:var(--gold); font-family:var(--mono); font-size:.85em;
}

footer.pie{border-top:1px solid var(--line); padding:var(--s-4) 0; margin-top:var(--s-6)}
footer.pie .shell{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); justify-content:space-between}
footer.pie p{margin:0; font-size:.85rem; color:var(--dim)}
footer.pie nav{display:flex; gap:var(--s-3); flex-wrap:wrap}
footer.pie nav a{color:var(--muted); border-bottom:none; font-size:.85rem}
footer.pie nav a:hover{color:var(--text)}

@media (max-width:600px){
  main{padding:var(--s-5) 0}
  body{font-size:15px}
}