/* 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{
  --ash:#7A464C; --mist:#3D1A1E; --bone:#200C0F;
  --red-deep:#AD0E2C; --red-ink:#7A0A1F;
  --r-lg:18px; --r-md:13px; --r-xs:6px;
}
*,*::before,*::after{ box-sizing:border-box }
body{
  margin:0; padding:0 0 80px; color:var(--mist);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.68;
  background:#FFF1EF;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,#FFFFFF,#FFF1EE 55%,#FFE3DD);
}
.wrap{ width:min(760px, 100% - 44px); margin-inline:auto }

header.top{
  padding:34px 0 30px; margin-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.8);
  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(--bone); text-decoration:none; letter-spacing:-.02em }
.back{ font-size:13px; color:var(--ash); text-decoration:none;
       display:inline-flex; align-items:center; gap:7px }
.back:hover{ color:var(--red-deep) }

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

.card{
  border-radius:var(--r-lg); padding:22px 24px; margin:0 0 22px;
  background:linear-gradient(155deg, rgba(255,255,255,.64), rgba(255,255,255,.36));
  border:1px solid rgba(255,255,255,.88);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,1), 0 12px 30px -18px rgba(120,20,30,.4);
}

/* 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 rgba(255,255,255,.8);
        font-size:13px; color:var(--ash); display:flex; gap:18px; flex-wrap:wrap }
footer a{ color:var(--ash); text-decoration:none }
footer a:hover{ color:var(--bone) }

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

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