/* La marca de SelfEmployed en código: lo fijo. Los colores, las letras y la rayita; nada de aquí cambia sin el dueño de la marca.
   Una web la usa con <link rel="stylesheet" href="marca.css"> y escribe con estos nombres (var(--lima), class="ra"…), nunca con
   el código del color a mano. Las letras (Inter, Archivo 900 y Outfit 800, solo para el logotipo) se cargan aparte, de Google Fonts
   o alojadas en la web. Los mismos valores, explicados, en la ficha de la marca (../perfil.md): si cambian, cambian en los dos.
   Expats Adviser lee este archivo y solo cambia la tinta por la pizarra (04-expats-adviser/marca/identidad/marca.css). */
:root{
  /* los colores */
  --papel:#F6F7F2;    /* el fondo de todo */
  --carta:#FDFDFB;    /* las tarjetas y el blanco: el blanco puro no se usa */
  --tinta:#14160F; --tinta-2:#5A5D50; --tinta-3:#8E9184; --apagado:#B9BCB0;   /* la letra y sus grises */
  --lima:#C0D22B;     /* el acento: la rayita y lo que hay que mirar, poco y siempre en lo importante */
  --lima-t:#7F8E0F;   /* la lima tostada: cuando la lima tiene que ser letra sobre claro (el logotipo, una cifra grande); nunca texto pequeño */
  --lima-s:#F2F5D6;   /* la lima suave, de fondo */
  --bosque:#1F3A14;   /* el verde bosque: los botones y un fondo con calma */
  --terra:#BC7757;    /* la terracota, todo lo negativo: en formas (una barra, un punto) */
  --terra-o:#9A5537;  /* lo negativo como letra sobre claro */
  --terra-c:#D49A7E;  /* lo negativo como letra sobre oscuro */
  --rojo:var(--terra-o);
  --linea:rgba(20,22,15,.075); --linea-2:rgba(20,22,15,.14);
  /* el movimiento: la curva de la marca, que sale rápido y llega despacio */
  --sal:cubic-bezier(.23,1,.32,1);
  /* las letras */
  --letra:'Inter',system-ui,sans-serif;
  --letra-cifra:'Archivo','Inter',sans-serif;
  --letra-logo:'Outfit',sans-serif;
  /* la rayita en el texto: 0,26 em de alto y casi entera bajo la línea de las letras, que solo roza (0,03 em por encima) */
  --ra-h:.26em; --ra-b:.01em; --ra-ba:-.02em;
}
/* las cifras: Archivo 900, con los números del mismo ancho */
.cifra{font-family:var(--letra-cifra);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
/* la rayita: <span class="ra">lo que importa</span>; detrás de las letras, con las esquinas del logotipo, girada −1°
   (marca.js la inclina menos en una frase larga). Sobre oscuro sigue en lima; para otro color, --ra. En una cifra, un poco más baja. */
.ra{position:relative;isolation:isolate;white-space:nowrap}
.ra::before{content:"";position:absolute;z-index:-1;left:-.03em;right:-.01em;bottom:var(--ra-b);height:var(--ra-h);background:var(--ra,var(--lima));border-radius:.12em .05em .14em .05em;transform:rotate(var(--ra-g,-1deg)) scaleX(var(--ra-x,1));transform-origin:center}
.cifra .ra::before{bottom:var(--ra-ba)}