/* ============================================================
   JurisOne — SISTEMA A′ · «MARCA» · tokens de color y tipografía
   Única fuente de verdad de la propuesta 6 (marca.html).

   Es «la lámina» con la paleta derivada del logotipo definitivo. La
   estructura, la retícula, los radios ISO, la letra y los componentes son
   los mismos: lo que cambia es de dónde sale el color. Ya no sale de un
   gris mineral cálido inventado para la ronda 2 — sale del logotipo.

   EL LOGOTIPO, LEÍDO COMO SISTEMA
   El logotipo es la palabra «jurisone» en violeta plano, con una sola letra
   —la o de «one»— convertida en corazón, y ahí, y solo ahí, aparece la menta.
   Esa proporción es la doctrina de color de la página:
     · el violeta es la masa,
     · la menta es la marca de un punto,
     · el degradado violeta→menta existe UNA vez, dentro del logotipo, y en
       ningún otro sitio del sitio.

   DÓNDE SE VE CADA COSA
   La página sigue siendo la lámina: clara, neutra, del cliente. El violeta
   no la tiñe: aparece donde el material se asoma —el canto, el bloque
   invertido— y donde se actúa —el CTA, el control seleccionado, el foco—.
   La menta no es nunca tinta sobre claro (es ilegible) ni superficie
   (es estridente): vive sobre el violeta, exactamente como en el logotipo.

   Requiere assets/css/comun/estructura.tokens.css cargado antes.
   Ningún otro archivo de assets/css/marca/ declara un color, peso, tamaño,
   espaciado o duración literal.
   ============================================================ */

:root {
  /* ══════════════════════════════════════════════════════════
     CAPA 1 · PRIMITIVAS — cambiar aquí cambia la propuesta entera
     ══════════════════════════════════════════════════════════ */

  /* ---- Los dos colores del logotipo, tal como salen del vector ---- */
  --_violeta-marca: #4d30da;  /* el violeta del logotipo */
  --_menta:         #00f3a9;  /* los destellos y el extremo del degradado */

  /* ---- Rampa violeta: el sustrato ----
     El material que va debajo de la marca del cliente deja de ser grafito
     cálido y pasa a ser el violeta llevado hasta el negro. Se desatura al
     bajar de valor: un violeta-negro se lee como materia, un violeta
     saturado a pantalla completa se lee como fondo de escritorio. */
  --_violeta-900: #150e2e;  /* núcleo del sustrato */
  --_violeta-800: #1e1540;  /* placa sobre sustrato */
  --_violeta-700: #2c2158;  /* superficie hundida y borde sutil sobre sustrato */
  --_violeta-600: #3f3175;  /* borde marcado (decorativo) sobre sustrato */
  --_violeta-550: #8f84c4;  /* borde de control sobre sustrato — cumple 3:1 */
  --_violeta-500: #6a5ca8;  /* trazo de diagrama sobre sustrato */

  /* ---- Rampa clara: la lámina ----
     Sigue siendo un gris mineral tipo yeso, y sigue sin ser crema. Lo que
     cambia es el matiz: de pardo-oliva a un gris de sesgo violeta muy bajo
     (croma ~3 %). Un neutro cálido junto al violeta lo enturbia; un gris
     absolutamente neutro lo deja huérfano. Este acompaña sin teñir.
     El reparto sigue siendo el abierto de §12: la placa casi papel y el
     campo un escalón largo por debajo. */
  --_lamina-000: #faf9fd;  /* placa: la lámina ya impresa */
  --_lamina-100: #e4e3ec;  /* campo: la superficie de la página */
  --_lamina-200: #d3d2de;  /* hundida */
  --_lamina-300: #cbc9d9;  /* borde sutil */
  --_lamina-400: #aba9be;  /* borde marcado (decorativo) */
  --_lamina-500: #6e6b82;  /* borde de control — cumple 3:1 sobre 000, 100 y 200 */
  --_lamina-600: #66637a;  /* trazo de diagrama sobre claro */

  /* ---- Tintas ---- */
  --_tinta-900: #14111f;  /* texto sobre claro — negro de sesgo violeta */
  --_tinta-500: #4a4658;  /* texto secundario sobre claro */
  --_hueso-100: #edeaf6;  /* texto sobre sustrato */
  --_hueso-500: #a49cc0;  /* texto secundario sobre sustrato */


  /* ══════════════════════════════════════════════════════════
     CAPA 2 · SEMÁNTICAS — lo que consume el resto del CSS
     Por defecto, el mundo del sustrato. Los contextos lo reasignan.
     ══════════════════════════════════════════════════════════ */

  /* ---- Tipografía · familias ----
     Las tres de siempre. Ninguna es Funnel Display: el logotipo trae el
     color de opencard, no su letra ni sus patrones. */
  --fuente-display:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --fuente-utilidad: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Tipografía · tamaños por rol (fluidos) ---- */
  --tamano-titular-mayor:  clamp(2.75rem, 1.1rem + 7vw, 7rem);
  --tamano-titular:        clamp(2rem, 1.1rem + 3.6vw, 3.75rem);
  --tamano-subtitulo:      clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  --tamano-placa:          1.0625rem;
  --tamano-lead:           clamp(1.125rem, 1rem + .55vw, 1.4375rem);
  --tamano-cuerpo:         1.0625rem;
  --tamano-cuerpo-menor:   .9375rem;
  --tamano-utilidad:       .75rem;
  --tamano-utilidad-menor: .6875rem;

  /* ---- Tipografía · interlineado y tracking por rol ---- */
  --interlinea-titular:   .92;
  --interlinea-subtitulo: 1.06;
  --interlinea-placa:     1.2;
  --interlinea-lead:      1.5;
  --interlinea-cuerpo:    1.65;
  --interlinea-utilidad:  1.4;
  --tracking-titular:   -.03em;
  --tracking-subtitulo: -.02em;
  --tracking-placa:     -.005em;
  --tracking-utilidad:   .14em;

  /* ---- Color · superficie ---- */
  --color-superficie-base:    var(--_violeta-900);
  --color-superficie-elevada: var(--_violeta-800);
  --color-superficie-hundida: var(--_violeta-700);
  --color-superficie-inversa: var(--_hueso-100);

  /* ---- Color · borde y trazo ---- */
  --color-borde-sutil:    var(--_violeta-700);
  --color-borde-fuerte:   var(--_violeta-600);
  --color-borde-control:  var(--_violeta-550);
  --color-trazo-diagrama: var(--_violeta-500);

  /* ---- Color · texto ---- */
  --color-texto-principal:  var(--_hueso-100);
  --color-texto-secundario: var(--_hueso-500);
  --color-texto-inverso:    var(--_violeta-900);

  /* ---- Color · marca ----
     El único token de acento del sistema, y es de contexto: sobre la lámina
     la marca es el violeta; sobre el sustrato la marca es la menta. No es un
     capricho, es lo que hace el logotipo — la menta solo existe apoyada en
     el violeta, nunca sobre el papel.
     Su trabajo es siempre funcional: qué se puede pulsar, qué está
     seleccionado y dónde está el foco. Nunca decora. */
  --color-marca: var(--_menta);
  --color-foco:  var(--color-marca);

  /* ---- Tipografía · peso y ancho variable, por contexto ---- */
  --peso-display:        600;
  --peso-display-fuerte: 700;
  --peso-cuerpo:         400;
  --peso-cuerpo-fuerte:  600;
  --peso-utilidad:       500;
  --ancho-titular:   118;
  --ancho-subtitulo: 106;
  --ancho-placa:     104;

  /* ---- El logotipo ----
     Métrica real del archivo assets/marca/jurisone.png (2200 × 596):
       · altura de x .......... 309 px → .518 de la caja
       · línea de base ........ 432 px → la j baja 164 px por debajo
       · masa óptica .......... centrada en el 46,6 % de la caja, o sea
                                un 3,4 % por encima del centro geométrico
     De ahí salen las tres constantes: el tamaño se decide por la altura de
     x (no por la caja, que incluye el rasgo descendente y los destellos),
     el área de respeto es una altura de x por cada lado, y hay que empujar
     la caja 3,4 % hacia abajo para que la palabra quede centrada de verdad. */
  --razon-altura-x-logo:     .518;
  --correccion-optica-logo:  .034;
  /* En la barra el tamaño es fluido: en móvil la palabra no puede comerse
     un tercio del ancho de pantalla, y en escritorio no debe encogerse. */
  --altura-logo-nav:   clamp(30px, 22px + 1.1vw, 38px);
  --altura-logo-firma: clamp(52px, 6vw, 84px);
  --respeto-logo-nav:   calc(var(--altura-logo-nav)   * var(--razon-altura-x-logo));
  --respeto-logo-firma: calc(var(--altura-logo-firma) * var(--razon-altura-x-logo));

  /* ---- Los logotipos de la alianza ----
     Dos marcas ajenas, de proporciones distintas. Igualarlas por altura de
     caja las descompensa: «opencard» lleva descendentes y su caja es más
     alta que su mancha, mientras que «Financiera Juriscoop» es una lengüeta
     apaisada de dos líneas. La altura base es la de opencard; Juriscoop se
     ajusta con su propio factor hasta que las dos manchas pesan igual.
     El tope de ancho de Juriscoop no es estético: su archivo mide 185 px de
     ancho y por encima de ese ancho en pantallas de doble densidad empieza
     a verse blando. */
  --altura-logo-alianza:      clamp(30px, 1.4rem + 1.1vw, 44px);
  --factor-logo-juriscoop:    1.16;
  --respeto-logo-alianza:     calc(var(--altura-logo-alianza) * 1.7);

  /* ---- Color · fotografía ----
     El velo NO puede declararse una sola vez con var(--color-superficie-base)
     dentro: un custom property resuelve sus var() anidadas donde se DECLARA,
     no donde se usa. Cada contexto declara el suyo. */
  --foto-mancha:   var(--_violeta-700);
  --foto-opacidad: .35;
  --foto-velo: linear-gradient(
    180deg,
    color-mix(in srgb, var(--_violeta-900) 76%, transparent) 0%,
    color-mix(in srgb, var(--_violeta-900) 90%, transparent) 55%,
    var(--_violeta-900) 100%
  );

  /* ---- Sombra · las láminas se apilan, no flotan ---- */
  --sombra-placa:    none;
  --sombra-flotante: 0 -8px 32px -12px rgb(0 0 0 / .55);
}


/* ══════════════════════════════════════════════════════════
   CONTEXTO SUSTRATO · el violeta llevado al negro
   Es el material: lo que está debajo de la marca del cliente. En esta
   propuesta gobierna un solo bloque —«Ecosistema abierto», el otro lado—
   y ahí es donde la menta encuentra su fondo.
   ══════════════════════════════════════════════════════════ */
.sobre-sustrato {
  --color-superficie-base:    var(--_violeta-900);
  --color-superficie-elevada: var(--_violeta-800);
  --color-superficie-hundida: var(--_violeta-700);
  --color-superficie-inversa: var(--_hueso-100);

  --color-borde-sutil:    var(--_violeta-700);
  --color-borde-fuerte:   var(--_violeta-600);
  --color-borde-control:  var(--_violeta-550);
  --color-trazo-diagrama: var(--_violeta-500);

  --color-texto-principal:  var(--_hueso-100);
  --color-texto-secundario: var(--_hueso-500);
  --color-texto-inverso:    var(--_violeta-900);

  /* Sobre el violeta, la marca es la menta: 11,9:1 contra el sustrato. */
  --color-marca: var(--_menta);
  --color-foco:  var(--color-marca);

  --peso-display:        600;
  --peso-display-fuerte: 700;
  --ancho-titular:       118;

  --foto-mancha:   var(--_violeta-700);
  --foto-opacidad: .35;
  --foto-velo: linear-gradient(
    180deg,
    color-mix(in srgb, var(--_violeta-900) 76%, transparent) 0%,
    color-mix(in srgb, var(--_violeta-900) 90%, transparent) 55%,
    var(--_violeta-900) 100%
  );

  background-color: var(--color-superficie-base);
  color: var(--color-texto-principal);
}


/* ══════════════════════════════════════════════════════════
   CONTEXTO LÁMINA · la hoja, y quien gobierna esta página
   El violeta NO tiñe la lámina. La lámina es del cliente: gris mineral,
   tinta negra, sin color de nadie. El violeta solo aparece cuando el
   material se asoma (el canto, el bloque invertido) o cuando hay que
   actuar (el CTA, el control seleccionado, el foco). Esa contención es lo
   que impide que la página termine pareciendo una landing de opencard,
   que es el riesgo real de heredar este violeta.
   ══════════════════════════════════════════════════════════ */
.sobre-lamina {
  --color-superficie-base:    var(--_lamina-100);
  --color-superficie-elevada: var(--_lamina-000);
  --color-superficie-hundida: var(--_lamina-200);

  /* La superficie inversa deja de ser la tinta y pasa a ser el violeta:
     con una línea, el CTA, el idioma activo y la familia filtrada quedan
     en color de marca sin que ningún componente sepa qué color es.
     Blanco sobre este violeta: 7,3:1. */
  --color-superficie-inversa: var(--_violeta-marca);
  --color-texto-inverso:      var(--_lamina-000);

  --color-borde-sutil:    var(--_lamina-300);
  --color-borde-fuerte:   var(--_lamina-400);
  --color-borde-control:  var(--_lamina-500);
  --color-trazo-diagrama: var(--_lamina-600);

  --color-texto-principal:  var(--_tinta-900);
  --color-texto-secundario: var(--_tinta-500);

  /* Sobre la lámina, la marca es el violeta: 6,0:1 contra el campo,
     7,3:1 contra la placa y 5,1:1 contra la hundida. Sirve de anillo de
     foco en las tres. La menta aquí no entra: sobre claro no llega ni a
     1,5:1 y como superficie es un fluorescente. */
  --color-marca: var(--_violeta-marca);
  --color-foco:  var(--color-marca);

  --peso-display:        650;
  --peso-display-fuerte: 720;
  --ancho-titular:       116;

  --foto-mancha:   var(--_lamina-400);
  --foto-opacidad: .14;
  --foto-velo: linear-gradient(
    180deg,
    color-mix(in srgb, var(--_lamina-100) 70%, transparent) 0%,
    color-mix(in srgb, var(--_lamina-100) 88%, transparent) 55%,
    var(--_lamina-100) 100%
  );

  background-color: var(--color-superficie-base);
  color: var(--color-texto-principal);
}