/* ============================================================ MOVO · brand.css ------------------------------------------------------------ ESTE ES EL ÚNICO FICHERO QUE HAY QUE TOCAR PARA CAMBIOS ESTÉTICOS. Sustitúyelo entero y la aplicación cambia de piel sin recompilar ni tocar lógica. Se usa también para los CLONES DE PARTNER: cada partner tiene su propio brand.css servido desde /brand//brand.css ============================================================ */ :root{ /* --- 1. IDENTIDAD -------------------------------------- */ /* La marca visible del producto es MOVO, a secas. El operador (Avionline S.L.) aparece ÚNICAMENTE en el pie de página, en contacto y en condiciones legales. Nunca junto al logotipo ni en la barra superior. */ --brand-name:"MOVO"; --brand-operator:"Avionline S.L."; /* solo pie y legal */ /* --- 2. COLOR (azul corporativo real, extraído del logo) -- */ --c-primary:#12329b; --c-primary-dark:#0c2270; --c-primary-soft:#e7ebf6; --c-primary-faint:#f4f6fb; --c-green:#78aa6d; --c-green-soft:#edf4eb; --c-pink:#f8b0c9; --c-pink-soft:#fef2f6; --c-salmon:#ff9261; --c-salmon-2:#f8a783; --c-salmon-soft:#fff1ea; --c-ink:#0e1726; --c-ink-2:#3d4c63; --c-muted:#7a8aa3; --c-line:#e1e7f0; --c-bg:#f4f6fa; --c-surface:#ffffff; --c-ok:#1a9e6a; --c-ok-soft:#e7f6f0; --c-warn:#c8791a; --c-warn-soft:#fdf4e7; --c-error:#c0392b; --c-error-soft:#fbedeb; /* Texto sobre fondo primario (barra lateral, hero, footer) */ --c-on-primary:#ffffff; --c-on-primary-dim:#cfdcf2; --c-on-primary-faint:#a9bee6; --c-on-primary-label:#7e9ad1; --c-hairline:rgba(255,255,255,.15); --c-hover-veil:rgba(255,255,255,.07); --c-active-veil:rgba(255,255,255,.15); /* Neutros de componentes */ /* Texto sobre fondos suaves (pares semánticos) */ --c-on-primary-soft:#0a2a6e; --c-on-green-soft:#31522a; --c-on-green-strong:#3e6234; --c-on-salmon-soft:#8a3d0f; --c-on-salmon-strong:#9a4515; --c-on-warn-soft:#7a4e08; --c-on-warn-strong:#8a5a08; --c-on-error-soft:#8e2a1f; --c-on-ok-soft:#0b6b49; --c-on-pink-soft:#a03763; --c-on-accent-btn:#3a1a08; /* texto sobre botón salmón */ --c-on-green-btn:#12280c; /* texto sobre botón verde */ --c-on-green-badge:#0c2a07; --c-sidebar-foot:#bdcde9; --c-chip-bg:#edf1f7; --c-chip-fg:#42536b; --c-border-hover:#b8c8e4; /* --- 3. TIPOGRAFÍA -------------------------------------- */ /* Aspira es la corporativa de Movenbus. Si tienes licencia web, descomenta el @font-face de abajo y cambia --font-display. */ --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display:var(--font-body); --fw-black:800; --fw-demi:650; --tracking-display:-.035em; /* --- 4. FORMA ------------------------------------------ */ --radius-sm:6px; --radius:11px; --radius-lg:16px; --radius-pill:100px; --shadow-sm:0 1px 3px rgba(14,23,38,.07); --shadow:0 4px 18px rgba(14,23,38,.09); --shadow-lg:0 12px 40px rgba(14,23,38,.14); /* --- 5. ESPACIADO -------------------------------------- */ --sp-1:6px; --sp-2:10px; --sp-3:16px; --sp-4:22px; --sp-5:32px; --sp-6:48px; --container:1180px; /* --- 6. MOTIVOS GRÁFICOS ------------------------------- */ /* Movenbus: círculos grandes, cápsulas con flecha, M de 3 trazos */ --motif-circle-opacity:.10; --motif-capsule-radius:100px; } /* Modo oscuro opcional: activar con */ [data-theme="dark"]{ --c-ink:#eef3fa; --c-ink-2:#b9c6d9; --c-muted:#8296b0; --c-line:#243349; --c-bg:#0b1220; --c-surface:#121c2e; --c-primary-soft:#16294f; --c-primary-faint:#101a2c; } /* @font-face{ font-family:"Aspira"; src:url("/assets/fonts/Aspira-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face{ font-family:"Aspira"; src:url("/assets/fonts/Aspira-Black.woff2") format("woff2"); font-weight:800; font-display:swap; } */ /* ------------------------------------------------------------ LOGOTIPO — dos variantes de mapa de bits + máscara vectorial .movo-logo → elige variante según el fondo .movo-logo.on-dark → icono blanco sobre azul (logo-neg.png) .movo-logo.on-light→ icono azul sobre blanco (logo-pos.png) .movo-mark → máscara SVG para tamaños pequeños; hereda currentColor ------------------------------------------------------------ */ .movo-logo{ display:inline-block; width:1.15em; height:1.15em; vertical-align:-.22em; background-size:contain; background-repeat:no-repeat; background-position:center; border-radius:.24em; } .movo-logo.on-dark { background-image:url("logo-neg.png"); } .movo-logo.on-light{ background-image:url("logo-pos.png"); } .movo-logo.lg{width:2.1em;height:2.1em} .movo-mark{ display:inline-block; width:1em; height:1em; vertical-align:-.14em; background:currentColor; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; --mark:url('data:image/svg+xml;utf8,'); } /* Cápsula con flecha ●——→ , motivo de marca */ .capsule-arrow{ display:inline-flex; align-items:center; gap:0; color:var(--c-primary); } .capsule-arrow i{display:block;width:9px;height:9px;border-radius:50%;background:currentColor} .capsule-arrow s{display:block;width:34px;height:2.5px;background:currentColor;text-decoration:none} .capsule-arrow u{ display:block;width:0;height:0;text-decoration:none; border-left:8px solid currentColor; border-top:5px solid transparent;border-bottom:5px solid transparent; }