/* 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. */

:root{
  --gris:#5C5C5C; --negro:#121212; --linea:#E6E6E6;
  --rojo:#C8102E; --rojo-osc:#8A0B20;
  --r-lg:18px; --r-md:13px; --r-xs:6px;
}
*,*::before,*::after{ box-sizing:border-box }
body{
  margin:0; padding:0 0 80px; color:var(--negro);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.68;
  background:#fff;
}

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

header.top{
  padding:34px 0 30px; margin-bottom:34px;
  border-bottom:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.brand{ font-family:"Syne",system-ui,sans-serif; font-weight:800; font-size:20px;
        color:var(--negro); text-decoration:none; letter-spacing:-.02em }
.back{ font-size:13px; color:var(--gris); text-decoration:none;
       display:inline-flex; align-items:center; gap:7px }
.back:hover{ color:var(--rojo) }

h1{ font-family:"Syne",system-ui,sans-serif; font-weight:700; font-size:34px;
    color:var(--negro); margin:0 0 10px; line-height:1.12; letter-spacing:-.02em }
.lead{ color:var(--gris); margin:0 0 34px }
h2{ font-family:"Syne",system-ui,sans-serif; font-weight:700; font-size:19px;
    color:var(--negro); margin:34px 0 12px }
p{ margin:0 0 14px }
ul{ margin:0 0 14px; padding-left:20px }
li{ margin-bottom:7px }
a{ color:var(--rojo) }
a:hover{ color:var(--rojo) }

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

/* Marcador de dato que falta. Amarillo a propósito: tiene que molestar. */
.pend{
  background:#FFF3A8; color:#4A3B00; border:1px dashed #C9A800;
  border-radius:var(--r-xs); padding:2px 8px; font-size:13px; font-weight:600;
  display:inline-block; line-height:1.5;
}
.pend-block{ display:block; padding:14px 16px; border-radius:var(--r-md); margin:0 0 18px }

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

:focus-visible{ outline:2px solid var(--rojo); outline-offset:3px; border-radius:var(--r-xs) }

@media (max-width:620px){ h1{ font-size:28px } }