/* Hoja compartida por las paginas legales.

   Misma estructura que la portada y el blog desde el 05/09/2026: barra oscura,
   cuerpo sobre crema y pie oscuro. Antes eran oscuras de arriba abajo y, al
   pasar el resto del sitio a fondo claro, se quedaron como las dos unicas
   paginas negras. La medida de linea sigue siendo corta: es texto que hay que
   leer entero, no ojear.

   El nombre lleva fecha a proposito: el CSS se sirve con cache, y cambiar el
   contenido sin cambiar la URL deja a los que ya han estado aqui viendo la
   hoja vieja sobre el HTML nuevo. Cada cambio de fondo, nombre nuevo.

   Todos los grises van medidos contra el fondo real sobre el que caen. */

:root{
  --indigo:#1E2A47; --indigo-hondo:#141C30; --indigo-pie:#0F1626;
  --mostaza:#D99E2B; --mostaza-claro:#EFBB55; --oro-texto:#8A5F12; --oro-hover:#6B4A0D;
  --crema:#F7F3EA; --crema-honda:#F2ECDF; --blanco:#FFFFFF; --crudo:#F2EDE3;
  --tinta:#1A2338; --texto-cuerpo:#4A5568;
  --gris-2:#5C6880; --gris-3:#66718A;
  --gris-frio:#C4CDDE; --gris-tenue:#8D9AB2; --gris-pie:#828DA6;
  --borde:#33436B; --borde-claro:#E4DCCB; --borde-fino:#EFE7D8;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --texto:"Public Sans","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--texto); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
.env{width:100%; max-width:720px; margin-inline:auto; padding:0 24px}
a{color:var(--oro-texto)}
a:hover{color:var(--oro-hover)}
a:focus-visible{outline:3px solid var(--mostaza); outline-offset:3px; border-radius:4px}

.barra{background:var(--indigo-hondo); border-bottom:1px solid var(--borde)}
.barra .env{display:flex; align-items:center; height:66px; max-width:1120px}
.marca{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--crema)}
.marca:hover{color:var(--crema)}
.marca img{width:38px; height:38px; border-radius:50%; display:block}
.marca b{font-family:var(--display); font-weight:800; font-size:1.06rem; white-space:nowrap}
@media(max-width:620px){
  .marca img{width:32px; height:32px}
  .marca b{font-size:.98rem}
}

main{padding:60px 0 80px}
h1{
  font-family:var(--display); font-weight:800; font-size:clamp(2rem,5vw,2.7rem);
  line-height:1.1; letter-spacing:-.02em; color:var(--tinta);
  margin:0 0 10px; text-wrap:balance;
}
.fecha{color:var(--gris-2); font-size:.9rem; margin:0 0 44px}
h2{
  font-family:var(--display); font-weight:600; font-size:1.3rem;
  margin:44px 0 12px; letter-spacing:-.012em; color:var(--tinta);
}
p{margin:0 0 18px; color:var(--texto-cuerpo)}
ul{margin:0 0 18px; padding-left:22px; color:var(--texto-cuerpo)}
li{margin-bottom:9px}
li::marker{color:var(--oro-texto)}
strong{color:var(--tinta); font-weight:600}

/* Aviso de lo que falta por rellenar. Sobre crema, el relleno mostaza al 8 %
   se pierde: se pinta sobre blanco con la banda de oro a la izquierda. */
.pendiente{
  border:1px solid var(--borde-claro); border-left:5px solid var(--mostaza);
  border-radius:0 10px 10px 0; background:var(--blanco);
  padding:22px 24px; margin:0 0 34px;
}
.pendiente p:last-child{margin-bottom:0}
.pendiente strong{color:var(--oro-texto)}

.datos{
  background:var(--blanco); border:1px solid var(--borde-claro); border-radius:12px;
  box-shadow:0 8px 24px rgba(26,35,56,.06);
  padding:22px 24px; margin:0 0 18px;
}
.datos dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 20px}
.datos dt{color:var(--gris-2); font-size:.9rem}
.datos dd{margin:0; color:var(--tinta)}
/* Aclaracion del NIF-IVA. Va subordinada al numero para que no compita con el
   NIF, que es el dato que exige el articulo 10.1.e) LSSI-CE. --gris-2 es
   #5C6880: 5,60:1 sobre blanco, medido por contraste.py. */
.datos dd .matiz{color:var(--gris-2); font-size:.86rem}


@media(max-width:600px){
  .datos dl{grid-template-columns:1fr; gap:2px 0}
  .datos dd{margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){ *{transition:none!important} }

/* Estrellas y flechas dibujadas, no escritas: ninguna de las cinco tipografias
   del sitio tiene U+2605 ni U+2192 (medido comparando anchos contra la generica
   del sistema), asi que como texto los pintaba el sistema operativo del visitante.
   Van en em para que sigan al texto, y en currentColor para heredar su color. */
.ico{width:1em; height:1em; fill:currentColor; vertical-align:-.13em; flex:none}
.ico-flecha{width:1.08em; height:1.08em; margin-left:.34em; vertical-align:-.2em}
.estrellas .ico{width:.95em; height:.95em}
.estrellas{display:inline-flex; gap:1.5px; align-items:center}

/* Descriptor bajo el nombre: el nombre solo no dice que es esta web. En columna,
   dentro del flex en fila de .marca, que no se toca. */
.marca-txt{display:flex; flex-direction:column; gap:1px; line-height:1.14}
.marca-txt small{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.055em; color:#8D9AB2; font-weight:500}
@media(max-width:520px){ .marca-txt small{display:none} }