/* marca.css — la identidad de Picaflor Trailing.
Hereda la familia de Picaflor y le da su propia seña: el producto se ancla en el TEAL→CYAN (la
mitad fría del degradé) y el MAGENTA queda reservado para una sola cosa — la pérdida. En el
Picaflor original el degradé completo es la firma; acá, usar media paleta como color propio
distingue el producto sin salirse de la marca, y hace que el magenta signifique siempre lo mismo.
⭐ La restricción es una característica: si el color puede significar dos cosas, no significa nada. */
:root {
color-scheme: dark;
/* ── superficies ── */
--fondo: #0C011C;
--panel: #150C24;
--panel-alto: #1B1030;
--borde: #221831;
--borde-sutil: #1A1128;
/* ── texto ── */
--texto: #ECE9F3;
--texto-medio: #A79FBC;
--texto-tenue: #6E6683;
/* ── la paleta de marca (heredada de Picaflor) ── */
--pt-verde: #39C675;
--pt-teal: #31CD9C;
--pt-cyan: #11D2EE;
--pt-violeta: #6D5BF0;
--pt-magenta: #EB14A8;
/* ── semántica: cada color, UNA sola cosa ── */
--acento: #31CD9C; /* el color propio del producto */
--acento-piso: rgba(49,205,156,.12);
--favor: #39C675; /* ganancia */
--favor-piso: rgba(57,198,117,.12);
--contra: #EB14A8; /* pérdida — el magenta NO se usa para nada más */
--contra-piso: rgba(235,20,168,.12);
--atencion: #E3A008;
--atencion-piso: rgba(227,160,8,.10);
--radio: 10px;
--radio-sm: 6px;
}
/* ── EL LOGOTIPO ──
El texto NO va dentro del SVG: una tipografía embebida se rompe o pesa, y como HTML se adapta al
tamaño y al idioma. El isotipo es el archivo; el logotipo es esta composición. */
/* 🚨 EL MONOCROMO **NO** FUNCIONA CON . `currentColor` sólo resuelve si el SVG vive en el
MISMO documento: cargado con se renderiza en su propio contexto, no hereda nada y sale
NEGRO. Es la misma trampa que hacía "imposible" la variante monocroma del Picaflor original,
con otra cara. Dos formas que SÍ andan, las dos verificadas renderizando:
① incrustarlo EN LÍNEA (`