/* Camada de setor · logística e transporte (V-62, pedido do Pedro em 02/11/2026; mesmo molde da mineração, V-61).
   Uma extensão da direção A, nunca marca nova: logo, Host Grotesk + IBM Plex Mono, Grafite como tinta e UM Vermelho Sinal por tela
   continuam iguais. A camada troca só o que é do setor: os neutros frios viram os tons de pátio e asfalto (concreto, lona, asfalto
   molhado, meio-fio), entra o grão de asfalto, os padrões de faixa de rodovia e de lona de sider, a fotografia de estrada e pátio
   tratada e os ícones de frota (icones.svg).
   Uso: carregue DEPOIS do a.css e marque a raiz: <html data-setor="logistica">. Tema claro e escuro seguem o a.css (data-theme).
   Fonte: C:\strapasson\brand\templates\verticais\logistica\ (README.md). Cópia no site: site\public\demo\logistica\setor.css. */

/* ---------- paleta: os neutros da marca trocados pelos de pátio e asfalto (os papéis --bg --ink-muted --line do a.css seguem sozinhos) ---------- */
[data-setor="logistica"] {
  --gelo: #F1F1EE;              /* Concreto: fundo claro, o piso do pátio */
  --superficie: #FAFAF8;        /* Lona clara: campo, painel */
  --aco: #5E6266;               /* Asfalto molhado: texto de apoio no claro (5,4:1 sobre Concreto, AA) */
  --trilho: #DADBD6;            /* Meio-fio: só área apagada (trilha de barra, célula inativa) */
  --fundo-escuro: #131416;      /* Asfalto à noite: fundo escuro */
  --superficie-escura: #1C1E20; /* Pista à noite */
  --texto-claro: #F1F1EE;       /* Faixa: texto no escuro */
  --aco-claro: #A2A6A9;         /* Poeira de estrada: texto de apoio no escuro (7,5:1 sobre Asfalto à noite, AA) */
  --fio-escuro: #2E3134;        /* só área apagada no escuro */

  /* tons de estrada, SÓ ÁREA (mapa, rota, gráfico): nunca texto, nunca fio */
  --l-campo: #E4E5E0;  --l-serra: #D4D6D0;  --l-mar: #C9CDCE;  --l-divisa: #FAFAF8;
  --l-rodovia: #B3B7B8; --l-faixa: #F1F1EE; --l-caminhao: #16181B;
  --l-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .09 0 0 0 0 .1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
[data-setor="logistica"][data-theme="dark"] {
  --l-campo: #1B1D1F;  --l-serra: #24272A;  --l-mar: #0F1012;  --l-divisa: #303336;
  --l-rodovia: #474B4F; --l-faixa: #131416; --l-caminhao: #F1F1EE;
  --l-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .94 0 0 0 0 .93 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  [data-setor="logistica"]:not([data-theme="light"]) {
    --l-campo: #1B1D1F;  --l-serra: #24272A;  --l-mar: #0F1012;  --l-divisa: #303336;
    --l-rodovia: #474B4F; --l-faixa: #131416; --l-caminhao: #F1F1EE;
    --l-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .94 0 0 0 0 .93 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }
}

/* ---------- grão de asfalto: textura fina por cima do fundo, nunca por cima de texto pequeno em bloco ---------- */
.l-grao { background-image: var(--l-grao); background-size: 160px; }
@media print { .l-grao { background-image: none; } }

/* ---------- padrões: faixa de rodovia (pé de seção) e lona de sider (área), da cor da tinta pela máscara ---------- */
.l-faixa { display: block; height: 48px; background: currentColor; -webkit-mask: var(--l-faixa-url, url("padroes/faixa.svg?v=ec8b5c20")) 0 50% / 400px 100% repeat-x; mask: var(--l-faixa-url, url("padroes/faixa.svg?v=ec8b5c20")) 0 50% / 400px 100% repeat-x; }
.l-lona { display: block; height: 80px; background: currentColor; -webkit-mask: var(--l-lona-url, url("padroes/lona.svg?v=bd35b8ac")) 0 0 / 240px 100% repeat-x; mask: var(--l-lona-url, url("padroes/lona.svg?v=bd35b8ac")) 0 0 / 240px 100% repeat-x; }

/* ---------- fotografia: estrada e pátio de verdade, tratados (fotos/tratar.mjs), canto reto, uma protagonista por tela ---------- */
.l-foto { position: relative; display: block; overflow: hidden; background: var(--l-serra); }
.l-foto > img, .l-foto > video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* o grão também passa por cima da foto: junta foto, tela e fundo num material só */
.l-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--l-grao); background-size: 160px; opacity: .8; }

/* ---------- ícones (icones.svg): 24 px, traço 1,5; a célula acende só se for o vermelho da tela ---------- */
.l-ic { width: 24px; height: 24px; flex: none; }
.l-ic.acesa .celula { fill: var(--signal); }