:root{
  --ink:#072A4C; --ink-deep:#04182C; --paper:#FFFFFF;
  --steel:#EDF0F3; --rule:#C8D0D8; --dim:#56697A; --copper:#B0632E;
  --display:"Archivo",system-ui,sans-serif;
  --data:"Martian Mono",ui-monospace,monospace;
  --gutter:clamp(1.25rem,5vw,5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-weight:400;
  font-size:clamp(.9375rem,.92rem + .15vw,1rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

.top{background:var(--ink);color:#fff;padding-block:1.5rem}
.top__in{
  max-width:56rem;margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.top a{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;color:#fff}
.top svg{width:26px;height:auto;color:#fff;flex:none}
.top b{font-family:var(--data);font-size:.6875rem;letter-spacing:.2em;font-weight:400;text-transform:uppercase}
.lang{display:flex;gap:1px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.lang button{
  font-family:var(--data);font-size:.625rem;letter-spacing:.08em;
  padding:.4rem .65rem;border:0;cursor:pointer;background:transparent;color:rgba(255,255,255,.7);
}
.lang button[aria-pressed="true"]{background:#fff;color:var(--ink)}

.doc{max-width:56rem;margin-inline:auto;padding:clamp(3rem,7vw,5rem) var(--gutter) clamp(4rem,9vw,7rem)}
.doc h1{
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 108;
  font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em;
}
.doc__meta{font-family:var(--data);font-size:.6875rem;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-top:1.25rem}
.doc__intro{margin-top:2rem;padding-bottom:2.25rem;border-bottom:1px solid var(--rule);max-width:68ch}
.doc h2{
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 104;
  font-size:clamp(1.1rem,2.2vw,1.3rem);letter-spacing:-.01em;
  margin-top:3rem;padding-bottom:.75rem;border-bottom:1px solid var(--rule);
}
.doc h2 + p,.doc h2 + ul{margin-top:1.25rem}
.doc p{max-width:68ch}
.doc p + p{margin-top:1rem}
.doc ul{margin-top:1.25rem;padding:0;list-style:none;display:grid;gap:.75rem;max-width:68ch}
.doc li{padding-left:1.4rem;position:relative}
.doc li::before{content:"";position:absolute;left:0;top:.72em;width:.75rem;height:1px;background:var(--rule)}
.doc strong{font-weight:600}
.doc .note{
  margin-top:1.75rem;background:var(--steel);border:1px solid var(--rule);
  padding:clamp(1.1rem,2.5vw,1.5rem);font-size:.9375rem;
}
.doc__foot{
  margin-top:4rem;padding-top:2rem;border-top:1px solid var(--rule);
  font-family:var(--data);font-size:.6875rem;line-height:2;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:.75rem;
}
.doc__foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.1rem}
.doc__foot a:hover{border-bottom-color:var(--ink)}

[data-lang="en"] [data-es]{display:none}
[data-lang="es"] [data-en]{display:none}