/* Estilos de las tres paginas legales. Van en un archivo aparte y no dentro de
   cada una porque son documentos que se editan: tres copias del mismo CSS se
   desincronizan a la primera correccion.
   Sin shader ni animaciones: esto se viene a leer, no a mirar. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#05060f;
  --ink:#f4f6fb;
  --muted:#a8b0c6;
  --brand-soft:#9aa6ff;
  --line:rgba(255,255,255,.10);
  --mono:'Space Grotesk',ui-monospace,monospace;
}

/* Las mismas fuentes propias de la portada, con la ruta desde /legal/ */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;
  padding:clamp(1.5rem,5vw,3rem) clamp(1.2rem,5vw,2rem) 5rem;
}

/* Un fondo quieto que recuerda al de la portada sin costar nada */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vmax 50vmax at 18% -10%,rgba(61,71,235,.20),transparent 62%),
    radial-gradient(50vmax 45vmax at 92% 108%,rgba(122,92,255,.16),transparent 66%);
}

.hoja{max-width:44rem;margin:0 auto}

.volver{
  display:inline-block;margin-bottom:2.6rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s;
}
.volver:hover,.volver:focus-visible{color:var(--ink);border-bottom-color:var(--line)}

h1{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.2;letter-spacing:-.01em;
}
.fecha{
  margin-top:.7rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(168,176,198,.72);
}

h2{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(1.05rem,3vw,1.25rem);line-height:1.3;
  margin:2.8rem 0 .9rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
h3{
  font-family:var(--mono);font-weight:500;font-size:.95rem;
  margin:1.8rem 0 .6rem;color:var(--ink);
}

p,li{color:var(--muted);font-size:clamp(.94rem,2.4vw,1rem)}
p+p{margin-top:1rem}
ul,ol{margin:1rem 0 0 1.2rem}
li+li{margin-top:.5rem}
strong{color:var(--ink);font-weight:500}

a{color:var(--brand-soft);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(154,166,255,.4)}
a:hover,a:focus-visible{text-decoration-color:currentColor}

/* Ficha de identificación: lo que exige el artículo 50 de la Ley 1480 */
.ficha{
  margin-top:1.2rem;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.025);padding:1.2rem 1.3rem;
}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem}
.ficha dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(168,176,198,.72);padding-top:.22rem;white-space:nowrap;
}
.ficha dd{color:var(--ink);font-size:.96rem}
@media (max-width:30rem){
  .ficha dl{grid-template-columns:1fr;gap:.15rem}
  .ficha dd{margin-bottom:.7rem}
}

/* Hueco por llenar. Sale en amarillo chillón a propósito: es imposible publicar
   la página sin darse cuenta de que falta un dato. */
.pendiente{
  background:#ffd34d;color:#2a1f00;font-weight:600;
  padding:.05em .4em;border-radius:4px;font-size:.9em;
  font-family:var(--mono);letter-spacing:.02em;
}

.pie{
  margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(168,176,198,.68);display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;
}
.pie a{color:inherit;text-decoration:none}
.pie a:hover,.pie a:focus-visible{color:var(--ink)}
.pie a:focus-visible{outline:1px solid var(--brand-soft);outline-offset:3px;border-radius:4px}

/* En el telefono, zonas de toque de 44 px para volver (median 23 de alto) y
   para los enlaces del pie (17). Lo que se ve no cambia: crece solo el area
   que responde al dedo. */
@media (max-width:48rem){
  .volver,.pie a{position:relative}
  .volver::after,.pie a::after{content:'';position:absolute}
  .volver::after{inset:-.7rem -.4rem}
  .pie a::after{inset:-.85rem -.4rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}