/* Marca LLOR: colores, letra y formas comunes del portal y de los documentos
   (presupuestos). Sale del logotipo de Juan Emilio (imagenes/llor2.svg) y de
   su tarjeta: fondo blanco, bandas gruesas en verde, la inclinación de la L
   grande y el relieve en verde más oscuro. La leen www.llor.net (la página)
   y el generador de presupuestos de pinturas-boronat.com, que la incrusta.
   Creada el 08/10/2026. */

:root {
  /* Verdes del logotipo, de claro a oscuro */
  --verde: #147039;          /* cara del grupo L-O-R */
  --verde-hondo: #0B522C;    /* cara de la L grande y de la base */
  --verde-sombra: #093418;   /* el relieve */
  --verde-noche: #06200F;    /* fondos oscuros (pie) */
  --verde-claro: #E9F2EC;    /* bandas claras y filas alternas */
  --verde-velo: #CFE3D6;     /* filetes sobre verde claro */

  /* Tinta y papel */
  --tinta: #102018;
  --tinta-suave: #4A5A51;
  --papel: #FFFFFF;
  --filete: #D3DCD5;

  /* La inclinación del logotipo: la L grande sube a 56,5° (33,5° desde la
     vertical); tan(33,5°) = 0,662. */
  --inclinacion: -33.5deg;
  --inclinacion-tan: 0.662;

  /* El relieve: desplazamiento de la sombra dura, hacia abajo y a la izquierda
     como en el logotipo */
  --relieve-x: -7px;
  --relieve-y: 7px;

  /* Letra: una sola familia, Archivo variable (peso 100-900, anchura 62-125 %) */
  --letra: 'ArchivoVar', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --anchura-titular: 115%;
  --peso-titular: 800;
}

/* Banda gruesa de la tarjeta */
.marca-banda {
  height: 12px;
  background: var(--verde-hondo);
}

/* Etiqueta inclinada como la L grande: el fondo se inclina, la letra no */
.marca-chip {
  position: relative;
  display: inline-block;
  padding: 3px 12px;
  font-family: var(--letra);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--verde-hondo);
  isolation: isolate;
}
.marca-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--verde-claro);
  border: 1px solid var(--filete);
  transform: skewX(var(--inclinacion));
}

/* Imagen con el relieve del logotipo */
.marca-relieve {
  border: 1px solid var(--verde-hondo);
  box-shadow: var(--relieve-x) var(--relieve-y) 0 var(--verde-sombra);
}