/* Las páginas de texto legal: privacidad, términos y borrado de datos.

   UN SOLO ARCHIVO PARA LAS TRES. La portada lleva su CSS dentro porque es una
   sola página y así se abre de un tirón; estas son varias y comparten el mismo
   aspecto, así que el navegador se lo descarga una vez y lo reutiliza.

   MISMA PALETA QUE LA PORTADA pero fondo claro y columna estrecha: esto no se
   mira, se LEE — y encima lo va a leer un revisor de Google en un monitor y un
   chofer en un teléfono. El texto oscuro sobre claro cansa menos en párrafos
   largos que el fondo de noche del héroe. */
:root{
  --verde-600:#0b8f66; --verde-700:#08795a; --noche-900:#080c18;
  --tinta:#16202f; --tinta-suave:#4a5768; --regla:#dfe6ef;
  --fondo:#f7f9fc; --papel:#fff;
  --ancho:760px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62;
  -webkit-text-size-adjust:100%;
}
.barra{
  background:#080c18; color:#fff; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.barra a{color:#fff; text-decoration:none; font-weight:700; display:flex; align-items:center; gap:8px;}
.barra nav a{font-weight:500; opacity:.75; margin-left:16px; font-size:15px;}
.barra nav a:hover{opacity:1;}

main{max-width:var(--ancho); margin:0 auto; padding:34px 20px 70px;}
.hoja{background:var(--papel); border:1px solid var(--regla); border-radius:16px; padding:30px 28px;}

h1{font-size:31px; line-height:1.2; margin:0 0 6px; letter-spacing:-.5px;}
h2{font-size:21px; margin:34px 0 10px; letter-spacing:-.2px; padding-top:6px; border-top:1px solid var(--regla);}
h3{font-size:17px; margin:22px 0 6px;}
p,li{color:var(--tinta);}
.fecha{color:var(--tinta-suave); font-size:14.5px; margin:0 0 22px;}
ul{padding-left:22px;} li{margin:6px 0;}
a{color:#0b6fbf;}
strong{font-weight:700;}
code{background:#eef2f7; padding:1px 6px; border-radius:5px; font-size:14.5px;}

/* Lo que hay que ver aunque se lea en diagonal: qué se recoge y para qué. */
.clave{
  background:#f0fbf6; border:1px solid #b9e7d3; border-left:4px solid var(--verde-600);
  border-radius:10px; padding:14px 16px; margin:18px 0;
}
.clave p:first-child{margin-top:0;} .clave p:last-child{margin-bottom:0;}

.aviso{
  background:#fff8e8; border:1px solid #f3dfae; border-left:4px solid #d99a12;
  border-radius:10px; padding:14px 16px; margin:18px 0;
}

table{width:100%; border-collapse:collapse; margin:16px 0; font-size:15.5px;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--regla); vertical-align:top;}
th{background:#f2f6fb; font-weight:700;}
.tabla-envuelta{overflow-x:auto;}

.pie{max-width:var(--ancho); margin:0 auto; padding:0 20px 50px; color:var(--tinta-suave); font-size:14.5px;}
.pie a{margin-right:14px;}

.btn{
  display:inline-block; background:var(--verde-600); color:#fff; text-decoration:none;
  padding:12px 20px; border-radius:10px; font-weight:700; margin:6px 8px 6px 0;
}
.btn--linea{background:transparent; color:var(--tinta); border:1px solid var(--regla);}

@media (max-width:560px){
  body{font-size:16px;} h1{font-size:25px;} .hoja{padding:22px 18px;}
  main{padding:22px 14px 50px;}
}