/* Estilos de las paginas legales. Mismos tokens que index.html: si alli
   cambia la paleta, hay que tocarla aqui tambien (son ficheros sueltos,
   el sitio no tiene build). */
:root{
  --page: 1080px;
  --bg:        #f0f0f0;
  --panel:     #f7f7f7;
  --panel-alt: #e6e6e6;
  --fg:        #131313;
  --muted:     #686868;
  --faint:     #9b9b9b;
  --rule:      #cecece;
  --rule-hard: #b1b1b1;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --u: 8px;
}
*,*::before,*::after{ box-sizing:border-box; border-radius:0 !important; }
html,body{ margin:0; padding:0; }
html{ scrollbar-gutter:stable; background:var(--bg); scrollbar-color:var(--rule-hard) var(--bg); }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:13px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
::selection{ background:var(--fg); color:var(--bg); }

.frame{
  width:min(var(--page), 100%); margin:0 auto;
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
  min-height:100vh;
}
.hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--u)*3) calc(var(--u)*4);
  border-bottom:1px solid var(--rule);
}
.hdr .logo{ font-weight:700; letter-spacing:-.02em; text-decoration:none; }
.hdr .logo span{ font-weight:400; color:var(--muted); }
.hdr .back{ font-size:11px; color:var(--muted); text-decoration:none;
  border:1px solid var(--rule-hard); padding:4px 10px; }
.hdr .back:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }

main{ padding:calc(var(--u)*6) calc(var(--u)*4) calc(var(--u)*8); max-width:760px; }
h1{ font-size:26px; line-height:1.15; letter-spacing:-.03em; margin:0 0 6px; }
.upd{ color:var(--faint); font-size:11px; margin:0 0 calc(var(--u)*5); }
h2{ font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  margin:calc(var(--u)*5) 0 calc(var(--u)*1.5); padding-top:calc(var(--u)*2);
  border-top:1px solid var(--rule); }
p,li{ margin:0 0 calc(var(--u)*1.5); color:var(--fg); }
ul{ margin:0 0 calc(var(--u)*2); padding-left:20px; }
li::marker{ color:var(--faint); }
dl{ margin:0 0 calc(var(--u)*2); }
dt{ color:var(--muted); font-size:11px; letter-spacing:.04em; text-transform:uppercase; margin-top:10px; }
dd{ margin:0; }

/* Hueco que Julen tiene que rellenar: imposible no verlo. */
.ph{
  font-weight:500; background:var(--panel-alt); color:var(--fg);
  border:1px dashed var(--rule-hard); padding:1px 6px; font-style:normal;
}
.aviso{
  border:1px solid var(--rule-hard); background:var(--panel);
  padding:calc(var(--u)*2) calc(var(--u)*2.5); margin:0 0 calc(var(--u)*4); font-size:12px;
}
table{ border-collapse:collapse; width:100%; font-size:11.5px; margin:0 0 calc(var(--u)*2); }
th,td{ border:1px solid var(--rule); padding:7px 9px; text-align:left; vertical-align:top; }
th{ color:var(--muted); font-weight:500; background:var(--panel); }

.legal{ padding:14px calc(var(--u)*4); font-size:10.5px; color:var(--faint);
  border-top:1px solid var(--rule); display:flex; justify-content:space-between;
  gap:12px; flex-wrap:wrap; }
.legal a{ color:var(--muted); text-decoration:none; }
.legal a:hover{ color:var(--fg); text-decoration:underline; }
.legal nav{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width:860px){
  .hdr,main,.legal{ padding-left:16px; padding-right:16px; }
  h1{ font-size:22px; }
}