/* ===========================================================================
   Marca — gemelo vanilla · isotipo (X) ↔ wordmark «exante»
   Ficha (fuente de la verdad): design-system/COMPONENTE_MARCA.md
   Original del que baja: design-system/catalogo-cd/components/BrandMark.jsx
   ---------------------------------------------------------------------------
   FRONTERA CON EL SHELL — se escribe aquí para que nadie la cruce por descuido:
   la ZONA de marca es del Shell (`.exds-tb-brand`) y esta pieza NO la redefine.
   El Shell aporta el bloque contenedor y el alto de la barra, y es él quien
   coloca a esta pieza dentro de esa zona:
       .exds-tb-brand      { position:absolute; left:0; top:0; width:var(--sbw); … }
       .exds-tb-brand > svg { position:absolute; top:20px; }
   (design-system/componentes/shell/shell.css:373 y :376)
   Esta pieza sólo posee: su tamaño, su tinta, su recorte y su DERIVA HORIZONTAL
   (la propiedad `left`, que escribe el JS fotograma a fotograma). El `top` y el
   `position` son del Shell. Montada fuera del Shell, quien la monte debe darle
   un contenedor posicionado — ver `ejemplo.html`.
   =========================================================================== */

.exds-marca {
  /* --- Perillas de la pieza. Se leen desde marca.js con getComputedStyle, así
     que cambiar el valor AQUÍ cambia el gesto: no hay un segundo número escrito
     en el JavaScript. --- */

  /* ⛔ 400ms, ATADA AL TOKEN — DECIDIDO 2026-09-12, retira el `MOTION-ALLOW` que vivía aquí.
     `DECISION-FUENTE: Ricardo, 2026-09-12 — «decision 3: A (homologar también backoffice)».`
     La opción A era que el logo pase a 400ms y termine a la vez que la barra lateral.
     Antes esta línea decía «320ms = --motion-slow» y eso llevaba semanas siendo FALSO: el
     token subió a 400ms (`colors_and_type.css:1213`) y el número escrito aquí se quedó
     atrás — el logo llegaba 80ms antes que la barra que dice acompañar. Un valor COPIADO
     de un token dejó de seguirlo el día que el token cambió; sólo la REFERENCIA sobrevive
     a eso, así que ahora es una, no un número. */
  --exds-marca-dur: var(--motion-slow, 400ms);

  /* Valores de RESERVA de la deriva horizontal — se usan SÓLO si `marca.js` no encuentra
     ningún ícono de módulo en el documento (pieza montada sin Shell, o antes de que la
     barra pinte sus módulos). El mecanismo PRINCIPAL ya no vive aquí como número: mide en
     vivo `.exds-sb-ico` y estos dos quedan como el peor caso, degradando con dignidad
     (regla del método, §5-bis). Son los del canon original (`BrandMark.jsx:44`).
     ⛔ RETIRADO 2026-09-12 como fuente de la verdad de la posición (lo era hasta hoy):
     `DECISION-FUENTE: Ricardo, 2026-09-12 — «depende de posicion de iconos de modulos de
     barra lateral. el isotipo debe estar alineado a ellos».` Los otros dos pares medidos
     (canon viejo y producción) se conservan en la ficha con su fecha, no aquí — esto ya
     no es una pregunta abierta, es un valor de emergencia. */
  --exds-marca-left-iso: -16px;
  --exds-marca-left-wm:   18px;

  /* Alto del lienzo. El ancho NO es un valor suelto: sale de la proporción del
     arte (viewBox 1767 × 409), igual que en el original
     (`width: (height * 1767) / 409`). */
  --exds-marca-h: 24px;

  display: block;
  overflow: visible;
  height: var(--exds-marca-h, 24px);
  width: calc(var(--exds-marca-h, 24px) * 1767 / 409);
}

/* La tinta va en el grupo EXTERIOR, una sola vez, como en el original
   (`BrandMark.jsx:81`): las tres capas la heredan. `evenodd` no es un adorno —
   es lo que vacía las contraformas de la «e» y la «a». */
.exds-marca-tinta {
  fill: var(--color-action-ink, #21272C);
  fill-rule: evenodd;
}

/* Las dos capas que se descubren no llevan clase ni regla propia, y es
   deliberado: no tienen NINGÚN estilo que declarar. Lo único que cambia en
   ellas es `display:none` cuando su ventana de recorte mide menos de 0.6
   unidades —para que ningún motor pinte la costura de 1px que deja un clip de
   ancho 0—, y eso lo escribe el JS fotograma a fotograma. Se localizan por
   `data-capa="e"` / `data-capa="ante"`, que es dato, no estilo.
   Una regla vacía aquí sería una clase que no significa nada. */