/* Hoja compartida por aviso-legal.html y privacidad.html.
   Mismo sistema visual que la portada, en versión sobria: aquí se viene a
   leer, no a mirar. Los tokens son los mismos que en index.html, así que
   cambiar la marca allí y aquí es cambiar los mismos cuatro valores. */

:root{
  --tinta:#0C0D0F; --grafito:#3D4147; --piedra:#6A6F77;
  --acero:#8B929B; --acero-txt:#585F68; --acero-velo:#F2F3F5;
  --linea:rgba(12,13,15,.11);
  --r-lg:18px; --r-md:13px; --r-xs:6px;
}
*,*::before,*::after{ box-sizing:border-box }
body{
  margin:0; padding:0 0 80px; color:var(--tinta);
  font-family:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px; line-height:1.68;
  background:#fff;
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-text-size-adjust:100%;
}

.wrap{ width:min(760px, 100% - 44px); margin-inline:auto }

/* La cabecera va en negro, como la barra de la portada: es lo que hace que
   estas dos páginas se lean como parte de la misma web y no como un anexo
   de otro sitio. */
header.top{
  background:var(--tinta); color:#fff;
  margin:0 0 34px; padding:0;
}
header.top .wrap{
  padding:20px 0 19px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.brand{
  display:inline-flex; align-items:center; gap:11px;
  font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:19px;
  color:#fff; text-decoration:none; letter-spacing:-.022em;
}
.brand svg{ flex:none }
.back{ font-size:13px; color:rgba(255,255,255,.72); text-decoration:none;
       display:inline-flex; align-items:center; gap:7px; transition:color .3s ease }
.back:hover{ color:#fff }

h1{ font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:34px;
    color:var(--tinta); margin:0 0 10px; line-height:1.12; letter-spacing:-.02em }
.lead{ color:var(--piedra); margin:0 0 34px }
h2{ font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:19px;
    color:var(--tinta); margin:34px 0 12px }
p{ margin:0 0 14px }
ul{ margin:0 0 14px; padding-left:20px }
li{ margin-bottom:7px }
a{ color:var(--acero-txt) }
a:hover{ color:var(--tinta) }
code{ font-size:.92em; background:var(--acero-velo); padding:1px 6px;
      border-radius:var(--r-xs); border:1px solid var(--linea) }

.card{
  border-radius:var(--r-lg); padding:22px 24px; margin:0 0 22px;
  background:var(--acero-velo); border:1px solid var(--linea);
}

/* DATO QUE FALTA. Era amarillo chillón, como en la portada, y en la portada
   se ha quitado: un recado interno no pinta nada en una página que ve un
   cliente. Aquí NO se puede quitar, y la diferencia es importante: lo que
   falta en estas dos páginas no es una mejora, es lo que exige el artículo
   10 de la LSSI. Un aviso legal que parece completo y no lo está es peor
   que uno que avisa.
   Así que se queda, pero en la paleta de la casa: fondo de acero y un filete
   a la izquierda. Se ve sin gritar. */
.pend{
  background:var(--acero-velo); color:var(--grafito);
  border-left:3px solid var(--tinta); border-radius:0 var(--r-xs) var(--r-xs) 0;
  padding:2px 10px; font-size:13px; font-weight:600;
  display:inline-block; line-height:1.5;
}
.pend-block{ display:block; padding:14px 18px; border-radius:0 var(--r-md) var(--r-md) 0; margin:0 0 18px }

footer{ margin-top:44px; padding-top:22px; border-top:1px solid var(--linea);
        font-size:13px; color:var(--piedra); display:flex; gap:18px; flex-wrap:wrap }
footer a{ color:var(--piedra); text-decoration:none }
footer a:hover{ color:var(--tinta) }

:focus-visible{ outline:2px solid var(--acero-txt); outline-offset:3px; border-radius:var(--r-xs) }
header.top :focus-visible{ outline-color:#fff }

@media (max-width:620px){ h1{ font-size:28px } }
@media (min-width:1400px){ .wrap{ width:min(840px, 100% - 60px) } body{ font-size:17px } }