/* La marca de Vanster en código: lo fijo. Los colores y las letras del manual de identidad de 2019 de Jasmina
   (../../fuentes/adjuntos/2026-11-06-jasmina-manual-de-identidad-de-vanster-and-lei-2019.pdf), y sus tres recursos: la diéresis,
   la etiqueta amarilla y los corchetes. Una web la usa con <link rel="stylesheet" href="marca.css"> y escribe con estos nombres.
   Las letras (Mulish, Special Elite y DM Serif Display) se cargan aparte, de Google Fonts. Lo explicado, en la ficha (../perfil.md).
   El fucsia de hoy está por confirmar con Jasmina: el manual dice #CE0F69, la web pinta #EE3364 y el logotipo mide #C00050. */
:root{
  /* los colores */
  --fucsia:#CE0F69;  --fucsia-50:#E687B4;  --fucsia-20:#F5CFE1;     /* Pantone 214 C, con sus tintas al 50 y al 20 % */
  --amarillo:#FDBA12; --amarillo-50:#FEDC88; --amarillo-20:#FFF1D0; /* Pantone 1235 C: las etiquetas y lo que hay que mirar */
  --negro:#282829;   --negro-50:#939394;   --negro-20:#D4D4D4;     /* Pantone Black al 95 % */
  --noche:#0E0E0F;   /* el negro de fondo de los claims, como en el book */
  --blanco:#FFFFFF;  /* el suelo: en la web, dos tercios de la pantalla */
  --gris:#F3F3F2;    /* un blanco roto, para separar una tarjeta del suelo */
  /* las letras */
  --texto:'Mulish',system-ui,sans-serif;         /* todo: el texto, los titulares y las cifras */
  --maquina:'Special Elite',ui-monospace,monospace; /* las etiquetas, los números de página y el claim en mayúsculas */
  --serif:'DM Serif Display',Georgia,serif;        /* el claim entre corchetes y las citas */
  /* el movimiento: sale rápido y llega despacio; la página, con más peso */
  --sal:cubic-bezier(.22,1,.36,1); --pagina:cubic-bezier(.76,0,.24,1);
  /* la diéresis como forma, con las medidas del logotipo (dos puntos de 15 a 24,5 de centro a centro): se recorta con mask y
     se pinta con el color que toque; así sale redonda y nítida a cualquier tamaño. Ancho = alto × 2,633 */
  --dieresis-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39.5 15'%3E%3Ccircle cx='7.5' cy='7.5' r='7.5'/%3E%3Ccircle cx='32' cy='7.5' r='7.5'/%3E%3C/svg%3E");

  /* los nombres del motor de los manuales (.claude/skills/disenador/herramientas/manual/), con los colores de Vanster */
  --papel:var(--gris); --carta:var(--blanco); --tinta:var(--negro); --tinta-2:#5C5C5E; --tinta-3:#8C8C8E; --apagado:#C9C9CB;
  --lima:var(--amarillo); --lima-s:var(--amarillo-20); --lima-t:var(--fucsia); --bosque:var(--fucsia); --rojo:#C00050;
  --linea:rgba(40,40,41,.08); --linea-2:rgba(40,40,41,.16);
}
/* la etiqueta: en amarillo, a máquina, en mayúsculas y con las esquinas redondeadas, con su flecha si señala algo. <span class="etv">branding</span> */
.etv{display:inline-flex;align-items:center;gap:.6em;border-radius:6px;background:var(--amarillo);color:var(--negro);font:400 .82em/1 var(--maquina);letter-spacing:.14em;text-transform:uppercase;padding:.55em .8em .5em;white-space:nowrap}
.etv.flecha::before{content:"→";letter-spacing:0}
/* los corchetes: el claim y lo que se cita. <span class="cor">Your online &amp; offline creative partner</span> */
.cor::before{content:"[\2009";color:var(--amarillo)}
.cor::after{content:"\2009]";color:var(--amarillo)}
/* la diéresis, como en el logotipo: SIEMPRE sobre una sola letra baja sin rasgo alto ni punto propio (mejor la «a»; si no, o, e,
   u), justo encima de la altura de la x, cada punto del 30 % de esa altura: m<span class="di">a</span>no. Sobre una cifra:
   <span class="di alta">6</span>. Nunca sobre una palabra entera ni sobre una mayúscula. Color: --di */
.di{position:relative}
.di::before{content:"";position:absolute;left:50%;top:.283em;width:.408em;height:.155em;transform:translateX(-50%);background:var(--di,var(--fucsia));-webkit-mask:var(--dieresis-m) center/contain no-repeat;mask:var(--dieresis-m) center/contain no-repeat;pointer-events:none}
.di.alta::before{top:.083em}