/* ═══════════════════════════════════════════════════════════════════════════ PRIMITIVAS DE MARCA — Vitta Seguros ═══════════════════════════════════════════════════════════════════════════ La escuela comercial de la corredora de seguros del Grupo Vitta: `vittaretail.com/seguros`. Base `vittaretail_seguros`, método ESCUDO. ┌─ DE DÓNDE SALEN ESTOS COLORES ────────────────────────────────────────────┐ De `docs/SIETE-ESCUELAS.md`, sección «1 · VittaSeguros», que es la especificación aprobada de esta escuela, y de `tools/siete-escuelas.php`, que es la misma decisión en forma de dato: #17324D azul acero profundo el tema: confianza institucional #2E6DA4 azul acento las acciones, los enlaces, el foco #C9A227 dorado sobrio el realce #F4F7FA papel el fondo de la página #5A6C80 gris acero el texto de apoyo Son CINCO colores. Todo lo demás de este archivo se DERIVÓ de ellos y se MIDIÓ con `tools/contraste.php` antes de quedar escrito. Ningún valor de acá se eligió mirando la pantalla. ⚠️ Por qué azul acero y no el azul de siempre. Un seguro se vende con la promesa de que alguien va a responder dentro de tres años. El sector entero habla en azul por eso, y el riesgo real no es parecerse a la competencia: es parecerse a un banco. El acero —azul con gris adentro, saturación 54 % y no 90 %— es la parte de esa familia que suena a institución seria y no a promoción de tarjeta de crédito. Y es OSCURO porque tiene que serlo: el sidebar y la pantalla sin conexión asumen texto blanco encima. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ DÓNDE VA CADA COLOR SE DECIDIÓ MIDIENDO ──────────────────────────────┐ El dorado es el color que esta paleta puede arruinar, y por eso es el primero que se midió: dorado sobre el papel #F4F7FA 2,25:1 ✗ ni texto (4,5) ni filete (3,0) dorado sobre blanco 2,42:1 ✗ dorado sobre el tema #17324D 5,43:1 ✓ texto y filete azul acento sobre blanco 5,47:1 ✓ blanco sobre el tema 13,13:1 ✓ O sea que el dorado NO puede ser `--m-acento` —que aterriza sobre papel— y tampoco puede ser el acento del sidebar, porque ese lugar ya se lo gana el azul claro. Es `--m-chispa`: el renglón chico del lockup, la barra del splash y el arco del disco, tres lugares que SIEMPRE caen sobre superficie profunda. Y tiene un segundo trabajo, que no es de texto: el TINTE de la fila propia del ranking y de la lección activa (`--m-realce`). Ahí el dorado no se lee, se ve, y por eso puede estar sobre papel sin romper nada. Es el mismo uso que el dorado de Chevrolet tiene en `marca-cars.css`, y por el mismo motivo. ⚠️ EL ACENTO DEL SIDEBAR NO ES EL AZUL DE MARCA, y no por gusto: #2E6DA4 acento de marca sobre el tema 2,40:1 ✗ no llega ni a filete #7FB2DC azul claro sobre el tema 5,82:1 ✓ El acento y el tema son el mismo azul con distinta luz, así que uno encima del otro no se ve. `--m-acento-profundo` sube dos escalones y la tinta que va ENCIMA de él vuelve a ser el tema —no blanco—, que es exactamente para lo que `--m-sobre-acento-profundo` tiene nombre propio. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ ESTA PALETA ENTRA SIN NINGUNA TOLERANCIA PROPIA ──────────────────────┐ `tools/contraste.php` lo dice en su lista de deuda: «una paleta nueva entra sin tolerancias y tiene que pasar los pares o no entra». En particular, los dos pares que en VITTA están en `DESCUBIERTOS` y que la paleta de retail arrastra desde el primer día: · `--v-muted-on-deep` sobre `--v-deep` — acá 6,07:1, contra 3,81:1 en retail. Se resuelve igual que en snacks: el gris del sidebar es un color PROPIO (`--m-apagado-profundo`) y no el mismo gris que se usa sobre papel. Ningún color llega a 4,5:1 contra blanco y contra una superficie saturada a la vez; con dos nombres no hace falta que lo intente. · `--m-borde` PASA los dos pares de filete en los dos temas, que es la deuda más seria de la paleta de retail —«el borde de `.v-input` es lo que dice dónde empieza el campo»—. Por eso es UN SOLO valor para los dos temas y no un `light-dark()`: hay una franja de gris que pasa contra las cuatro superficies, y partirlo en dos ramas es cómo una de las dos se queda corta sin que nadie la mire. Las dos únicas líneas donde `seguros` aparece en `TOLERADOS` son las que ya estaban marcadas como deuda DEL PRODUCTO —`--v-on-deep` sobre `--v-warn-solid` (2,95:1) y `--v-warn-fg` sobre `--v-warn-bg` (3,45:1)—, cuyos dos tokens son del producto y por lo tanto dan el MISMO número en las diez instalaciones. No hay ni una tolerancia causada por este azul. └───────────────────────────────────────────────────────────────────────────┘ ⚠️ La lista de nombres es CERRADA. `tools/tokens-css.php` exige que TODA instalación declare exactamente las mismas primitivas. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografía ─────────────────────────────────────────────────────────── La pila de la casa, y es una decisión, no un olvido. Vitta Seguros no entregó tipografía. No es un pendiente que alguien tenga que ir a buscar: de las diez instalaciones del proyecto, la ÚNICA que trae una familia propia es la del concesionario, porque Louis llegó de GM Asset Central con su licencia de concesionario adjunta. Declarar acá una `Cera` o una `Sohne` que nadie compró pediría archivos que no existen, y el navegador no lo reporta: sintetiza, engorda los trazos y «se ve un poco raro», que no es un error que nadie levante. Ver `Paleta::PALETAS['seguros']`, que declara `tipografia => null` por lo mismo. */ --m-tipo-cuerpo: 'Karla', system-ui, sans-serif; --m-tipo-titulo: 'Archivo', sans-serif; --m-tipo-logo: 'Poppins', sans-serif; /* ── Las placas del logotipo ────────────────────────────────────────────── El emblema de esta escuela es un ESCUDO, y no es una ilustración bonita: es el nombre del método. ESCUDO son las seis fases —Escucha, Simula, Cotiza, Ubica, Despeja, Ofrece— y las seis están dibujadas adentro, como seis segmentos del arco. Ver `public/img/marca/seguros/LEEME.md`. ⚠️ AZULEJO REDONDEADO Y NO DISCO, y el motivo es la forma del arte: un escudo es más alto que ancho y termina en punta. Metido en un disco, la punta queda a un pelo del filo mientras los hombros dejan aire — o sea, el recorte circular obliga a achicar el escudo para que su punta entre, y lo que se ve a 46 px es un escudo chico flotando. El azulejo respeta la caja del dibujo. `--m-marca-radio: 20%` es la esquina que dejan las tarjetas de la propia plataforma (`.v-card`), no un número inventado. ⚠️ EL COLOR DE LA PLACA LO DIJO LA MEDICIÓN Y NO EL GUSTO. `tools/marca-legible.php` mide el CONTORNO del arte —cada píxel opaco que toca uno transparente— contra la placa. Sobre los cinco candidatos: #17324D el tema 13,13:1 0,0 % fundido ← el elegido #0D1F31 el tema en oscuro 16,70:1 0,0 % #2E6DA4 el azul acento 5,47:1 0,0 % #F4F7FA el papel 1,08:1 100,0 % ✗ NO PASA #FFFFFF blanco 1,00:1 100,0 % ✗ NO PASA El cuerpo del escudo es BLANCO, así que su contorno también lo es: sobre una placa blanca —que es la que usa VITTA— el emblema desaparece entero. 1,00:1 no es «poco contraste», es el mismo color. Es exactamente la trampa que costó el halo de Cars, sólo que esta vez el número existió ANTES de la decisión, que es todo el punto de esa herramienta. ⚠️ Y LOS TAMAÑOS LOS DECIDIÓ LA REGLA, no la estética. El arte ocupa el 93,8 % de su lienzo, o sea que es un dibujo «de borde a borde»: la placa tiene que terminar donde termina el arte, o le dibuja una segunda esquina alrededor de la que ya tiene. Eso es el halo que costó la marca de Cars. Los tres valores son EXACTAMENTE los `width` de los tres `` (46 / 76 / 132), y `tools/marca-legible.php` los compara contra la vista. Consecuencia dicha en voz alta: sobre el sidebar —que ES `#17324D`— la placa no se ve y el escudo queda flotando. No es un descuido: es el mismo 13,13:1 el que dice que ahí se lee igual. Donde la placa sí hace falta es en el panel blanco del ingreso y en el splash. */ --m-marca-tamano: 46px; --m-marca-tamano-ingreso: 76px; --m-marca-tamano-splash: 132px; /* 20 % del lado: la esquina de `.v-card`, no un círculo. */ --m-marca-radio: 20%; --m-marca-aislamiento: 0; --m-marca-placa: #FFFFFF; /* ── La superficie profunda ─────────────────────────────────────────────── El azul acero de la especificación, sin tocar, en la rama clara. La rama oscura lo baja un escalón: un azul pensado para contrastar contra una página clara se ve lavado cuando la página ya es oscura. ⚠️ La rama clara tiene que ser el MISMO valor que `Paleta::PALETAS` declara como `tema`, que es lo que la barra del navegador pinta antes de que exista una hoja de estilos. Lo verifica `FronteraDeMarcaTest::testElColorDeLaBarraDelSistemaCoincideConLaSuperficieProfunda`. */ --m-profundo: light-dark(#17324D, #0D1F31); /* El segundo tono: el fondo del menú activo. 1,38:1 sobre el sidebar en tema claro y 1,29:1 en oscuro — por encima del piso de 1,2 que separa «un tono más» de «el mismo color con otro nombre». */ --m-profundo-2: light-dark(#24486B, #17334F); /* Separadores y pistas de barra sobre el fondo profundo. */ --m-linea-profunda: #33587F; /* Lo que se escribe encima del fondo profundo. 13,13:1 en claro, 16,70:1 en oscuro. */ --m-sobre-profundo: #FFFFFF; /* = el tema + blanco 76 %. 8,82:1 sobre el sidebar. */ --m-sobre-profundo-suave: #C4D6E6; /* Texto de apoyo cuando cae sobre el fondo profundo: los enlaces del menú, el cargo en el pie del sidebar, la leyenda de la barra de nivel. ⚠️ NO vale lo mismo que `--m-apagado`, y ésa es toda la diferencia con la paleta de retail. En VITTA los dos roles comparten gris y por eso el par `--v-muted-on-deep` sobre `--v-deep` está en `DESCUBIERTOS` con 3,81:1. Acá son dos colores distintos y el par da 6,07:1 en claro y 7,73:1 en oscuro. */ --m-apagado-profundo: #9DB3C8; /* ── El acento ──────────────────────────────────────────────────────────── El azul de la especificación. 5,47:1 con blanco encima sobre papel, que es lo que un botón primario necesita y lo que el dorado no puede dar. La rama oscura sube dos puntos de luz: en tema oscuro el acento tiene que separarse de una superficie casi negra (3,35:1) sin dejar de sostener el blanco de su propio botón (4,93:1). El azul de marca sin aclarar deja el primero en 3,02:1, que pasa por dos centésimas — y una paleta que pasa por dos centésimas es una paleta que va a fallar el día que alguien corrija un dígito de otra cosa. */ --m-acento: light-dark(#2E6DA4, #3B74A9); /* Disco de iniciales y estados certificados: el azul bajado. */ --m-acento-fuerte: light-dark(#1F5A8B, #2E6DA4); /* Hover de enlaces. ⚠️ En tema CLARO el hover va hacia ABAJO y no hacia arriba, al revés que en snacks. No es una preferencia: un enlace se lee sobre papel, y aclararlo lo acerca al papel. #2E6DA4 ya está en 5,47:1 y un tono más claro lo baja de 4,5:1 — o sea que el estado «te estoy apuntando» sería el estado en que el enlace se lee peor. En tema oscuro el papel es negro y la dirección se da vuelta sola. */ --m-acento-hover: light-dark(#1F5788, #6BA3D6); /* ── Y ACÁ VA EL AZUL CLARO ─────────────────────────────────────────────── El acento cuando aterriza SOBRE la superficie profunda: el filete del menú activo, la regla del logotipo, la etiqueta «Nuevo», el relleno de la barra de nivel. El azul de marca acá NO rinde —2,40:1 sobre el tema, ni filete—, porque es el mismo azul del sustrato con menos luz. Este sube hasta 5,82:1. Y la tinta que va encima es el TEMA, no blanco: 5,82:1 contra 2,26:1. Es el par que en retail y en Cars está en deuda —blanco sobre un acento saturado— y que acá se resuelve dando vuelta la tinta, que es exactamente para lo que estos dos tokens tienen nombre propio. */ --m-acento-profundo: #7FB2DC; --m-sobre-acento-profundo: #17324D; /* La chispa: el dorado sobrio de la especificación. El renglón chico del lockup, la barra del splash y el arco alrededor del disco. Siempre sobre fondo profundo, donde da 5,43:1. Sobre papel daría 2,25:1 y no se usa nunca como texto ahí; su único trabajo sobre papel es el TINTE de `--m-realce`. */ --m-chispa: #C9A227; /* ── Tinta ──────────────────────────────────────────────────────────────── El azul acero es la tinta: 12,21:1 sobre el papel de la marca y 13,13:1 sobre blanco. Un negro habría sido más fácil y menos de esta marca. */ --m-tinta: light-dark(#17324D, #E8EFF6); --m-tinta-2: light-dark(#45596E, #C3D0DD); /* El gris acero de la especificación. 5,40:1 sobre blanco y 5,02:1 sobre el papel: pasa los dos pares que en la paleta de retail están tolerados. */ --m-apagado: light-dark(#5A6C80, #93A6BA); /* Fijo en los dos temas: es el número de una fase bloqueada y el marcador de posición de los campos. Elegido en el medio de la franja que pasa 3:1 contra el relleno claro (3,59:1) y contra el oscuro (3,46:1) a la vez. */ --m-apagado-2: #6C7F94; /* ── Superficies claras ─────────────────────────────────────────────────── El fondo de la página es el PAPEL de la especificación: un blanco con azul adentro, no un gris neutro. Es lo que hace que la plataforma se lea como de esta escuela antes de que aparezca un solo botón. */ --m-fondo: light-dark(#F4F7FA, #0A1622); --m-superficie: light-dark(#FFFFFF, #10202F); /* ⚠️ Un solo valor para los dos temas, y elegido para PASAR los dos pares de filete en los dos temas: 3,59:1 sobre blanco, 3,34:1 sobre el papel, 4,60:1 sobre la superficie oscura y 5,08:1 sobre el fondo oscuro. Es la deuda más seria que arrastra la paleta de retail —«el borde de `.v-input` es lo que dice dónde empieza el campo»— y acá no se hereda. */ --m-borde: #77899C; --m-relleno: light-dark(#EAF0F6, #1B2C3D); --m-relleno-2: light-dark(#E3EBF3, #20344A); --m-relleno-3: light-dark(#E7F0F9, #17293C); /* casilla marcada, realce suave */ /* ⚠️ El realce va en DORADO y no en azul, y es el segundo trabajo de la chispa. `--v-mine-bg` pinta la fila propia del ranking, la lección activa y la etiqueta «Nuevo»: son las tres cosas que tienen que saltar de una lista donde todo lo demás ya es azul. Un realce azul dentro de una interfaz azul no realza nada. Acá el dorado no sostiene texto —lo sostiene la tinta, que encima de él da 11,76:1 en claro y 11,10:1 en oscuro— así que su 2,25:1 sobre papel no aplica. Es el mismo uso que el dorado FNR tiene en `marca-cars.css`. */ --m-realce: light-dark(#FAF2DD, #3A3117); /* ── Efectos teñidos por la marca ─────────────────────────────────────────*/ /* Los canales del azul acero, para los velos. Van sueltos y no como color porque un velo necesita `rgba()` con una opacidad distinta en cada parada del degradado, y no se puede sacar la opacidad de un color ya armado. */ --m-profundo-canales: 23, 50, 77; /* el azul acero de Vitta Seguros */ --m-halo: light-dark(rgba(46, 109, 164, .22), rgba(59, 116, 169, .38)); /* El latido del canje va en DORADO y no en azul: es el único efecto de la plataforma que celebra algo, y en esta marca lo que celebra es el dorado. Es un halo, no un texto: no tiene umbral que cumplir. */ --m-halo-latido: light-dark(rgba(201, 162, 39, .42), rgba(201, 162, 39, .52)); --m-sombra-media: light-dark(rgba(23, 50, 77, .12), rgba(0, 0, 0, .45)); --m-barra: light-dark(#C6D3E0, #2C3F55); /* ── Papel ──────────────────────────────────────────────────────────────── El diploma, el marco de la cápsula SCORM y el botón claro sobre fondo oscuro fijo. No siguen el tema: son la rama CLARA, clavada. ⚠️ `--m-papel-superficie` es BLANCO y no el papel de la marca: un diploma se IMPRIME, y la hoja de la impresora es blanca. El papel azulado queda para el fondo de la pantalla que lo muestra. ⚠️ Los tres primeros valores están escritos DOS VECES en el proyecto: acá y en `PaletaDiploma::COLORES['seguros']`, que es PHP y no puede leer CSS. `DiplomaDeMarcaTest::testCadaColorDelDiplomaExisteEnLaHojaDeSuInstalacion` compara las dos copias en cada corrida, para que ninguna se mueva sola. Y el dorado NO aparece en el diploma, por lo mismo que el dorado FNR no aparece en el de Cars y el naranja no aparece en el de snacks: sobre papel blanco da 2,42:1, en un diploma no hay superficie profunda donde apoyarlo, y un diploma se lee impreso. La identidad la pone el azul. */ --m-papel-superficie: #FFFFFF; --m-papel-fondo: #F4F7FA; --m-papel-tinta: #17324D; --m-papel-tinta-2: #45596E; --m-papel-apagado: #5A6C80; --m-papel-borde: #E2E5E9; --m-papel-profundo: #17324D; }