/* NG LOGÍSTICA · módulos de familia (aditivo, no toca la gramática existente)
   Puente de tokens: la familia BRANDING usa --accent (theme-able); Logística usa
   --signal (verde). Aliasamos para que los componentes compartidos rendericen verde. */
:root {
  --accent: var(--signal);
  --accent-dark: var(--signal-dark);
  --accent-bright: var(--signal-bright);
  --accent-rgb: 101, 168, 23;
}

/* ═══════════════ ASISTENTE FLOTANTE · componente modular (components.js) ═══════════════ */
.nga { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 93; }
.nga-fab { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: var(--elev-2); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease), background .3s; }
.nga-fab:hover { transform: scale(1.06); background: var(--accent-dark); }
.nga-fab svg { width: 26px; height: 26px; grid-area: 1 / 1; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.nga-i-x { opacity: 0; transform: rotate(-40deg); }
.nga.is-open .nga-i-chat { opacity: 0; transform: rotate(40deg); }
.nga.is-open .nga-i-x { opacity: 1; transform: none; }
.nga-panel { position: absolute; right: 0; bottom: 72px; width: min(342px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--elev-3); padding: 22px; transform-origin: bottom right; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.nga.is-open .nga-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.nga-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.nga-hi { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.15; }
.nga-sub { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--dim); display: flex; align-items: center; gap: 7px; }
.nga-x { flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--mute); font-size: 14px; display: grid; place-items: center; transition: background .2s, color .2s; }
.nga-x:hover { background: var(--paper-deep); color: var(--ink); }
.nga-chips { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.nga-chip { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--hairline-2); border-radius: 10px; color: var(--ink); font-size: 14px; transition: border-color .2s, background .2s, transform .2s; }
.nga-chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); transform: translateX(2px); }
.nga-chip span { color: var(--accent-dark); font-family: var(--mono); }
.nga-actions { display: flex; gap: 8px; }
.nga-btn { flex: 1; text-align: center; padding: 12px; border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 15px; transition: background .2s, border-color .2s, color .2s; }
.nga-wa { background: var(--accent); color: #fff; }
.nga-wa:hover { background: var(--accent-dark); }
.nga-mail { border: 1px solid var(--hairline-2); color: var(--ink); }
.nga-mail:hover { border-color: var(--accent); color: var(--accent-dark); }
html.menu-open .nga { display: none; }

/* ═══════════════ FOOTER INTELIGENTE · contacto accionable ═══════════════ */
.f-note { margin-top: 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--accent-bright); display: inline-flex; align-items: center; gap: 9px; }
.f-wa { display: inline-flex; align-items: center; gap: 9px; padding: 15px 24px; border: 1px solid var(--hairline-dark); border-radius: 6px; color: #f2efe8; font-family: var(--display); font-weight: 700; font-size: 16px; transition: border-color .25s, background .25s, color .25s; }
.f-wa:hover { border-color: var(--accent-bright); color: var(--accent-bright); background: rgba(var(--accent-rgb), .1); }
.f-social { display: flex; gap: 10px; margin-top: 20px; }
.f-social a { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--hairline-dark); display: grid; place-items: center; color: rgba(242, 239, 232, .7); transition: border-color .25s, color .25s; }
.f-social a:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.f-social svg { width: 17px; height: 17px; }