/* Skin “Linha Mogiana” (modeloSkin linha-mogiana). Design system: docs/skins/linha-mogiana.md
   Sinalização ferroviária: placas de estação, bilhete, uma cor por linha. Fundos sólidos (sem backdrop-filter sobre o WebGL).
   Contraste AA conferido para todos os pares de texto (relação mínima 4,55:1). */
@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fontes/young-serif-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fontes/atkinson-hyperlegible-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fontes/atkinson-hyperlegible-700-latin.woff2') format('woff2'); }

:root {
  /* base Mogiana */
  --mg-grafite: #25282a;          /* superfícies escuras */
  --mg-grafite-2: #33373a;        /* divisores e estados no escuro */
  --mg-grafite-solido: rgba(37, 40, 42, .94); /* barras sobre o panorama: sólido translúcido, sem desfoque */
  --mg-creme: #f2e9d6;            /* placas e bilhetes */
  --mg-creme-2: #e3d7bf;          /* fundo secundário no creme */
  --mg-tinta: #1f2123;            /* texto no creme · 13,4:1 */
  --mg-tinta-2: #5a5850;          /* texto secundário no creme · 5,9:1 */
  --mg-creme-suave: #c9c2b3;      /* texto secundário no grafite · 8,4:1 */
  /* linhas: tom forte (no creme e como fundo de texto creme) · tom claro (texto no grafite) */
  --mg-aguas: #1d6390;   --mg-aguas-clara: #8cc6e6;    /* 5,4:1 · 8,0:1 */
  --mg-centro: #9a4326;  --mg-centro-clara: #eaa585;   /* 5,4:1 · 7,2:1 */
  --mg-serra: #2c6440;   --mg-serra-clara: #95d1a6;    /* 5,8:1 · 8,4:1 */
  --mg-trem: #3b3f42;    --mg-trem-clara: #f2e9d6;     /* 8,8:1 · 12,3:1 */
  --mg-morango: #b3243a; --mg-morango-clara: #f19aa6;  /* ações e áudio · 5,4:1 · 7,0:1 */
  /* tipografia */
  --mg-placa: 'Young Serif', Georgia, 'Times New Roman', serif;
  --mg-texto: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mg-fs-1: 12px; --mg-fs-2: 14px; --mg-fs-3: 16px; --mg-fs-4: 20px; --mg-fs-5: 28px; --mg-fs-6: 40px;
  /* espaço (base 4), raios, sombra */
  --mg-e1: 4px; --mg-e2: 8px; --mg-e3: 12px; --mg-e4: 16px; --mg-e5: 24px; --mg-e6: 32px;
  --mg-r1: 6px; --mg-r2: 12px; --mg-r3: 18px;
  --mg-sombra: 0 10px 28px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
  /* movimento: só transform e opacity */
  --mg-rapido: 140ms; --mg-medio: 240ms; --mg-lento: 420ms;
  --mg-curva: cubic-bezier(.2, .7, .2, 1);
  --mg-alvo: 44px;
  /* cor da linha da cena atual (o JS troca) */
  --mg-linha: var(--mg-trem);
  --mg-linha-clara: var(--mg-trem-clara);
}

/* a interface padrão dá lugar à desta skin */
body.mg-skin .top, body.mg-skin .menu, body.mg-skin #whats, body.mg-skin #cta, body.mg-skin .veil,
body.mg-skin .drawer, body.mg-skin .zoom-controls { display: none !important; }
body.mg-skin { font-family: var(--mg-texto); }
.mg-app { position: fixed; inset: 0; z-index: 20; pointer-events: none; color: var(--mg-creme); font-family: var(--mg-texto); }
.mg-app * { box-sizing: border-box; }
.mg-app button, .mg-app a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.mg-app :focus-visible { outline: 3px solid var(--mg-linha-clara); outline-offset: 3px; }
.mg-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ── placa da estação ─────────────────────────────────────────────────────────────────────────── */
.mg-placa { position: absolute; left: var(--mg-e5); top: var(--mg-e5); pointer-events: auto; display: flex; align-items: stretch;
  max-width: min(560px, calc(100vw - 48px)); background: var(--mg-creme); color: var(--mg-tinta); border-radius: var(--mg-r1);
  box-shadow: var(--mg-sombra); overflow: hidden; }
.mg-placa-faixa { width: 10px; flex-shrink: 0; background: var(--mg-linha); }
/* Trem Mogiana: grafite com dormentes em creme, para a faixa aparecer sobre fundos escuros */
.mg-placa[data-linha="trem"] .mg-placa-faixa { background: repeating-linear-gradient(180deg, var(--mg-trem) 0 6px, var(--mg-creme-2) 6px 9px); }
.mg-placa-corpo { margin: 4px; padding: 7px 16px 8px 14px; border: 2px solid var(--mg-tinta); border-radius: 4px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px; }
.mg-placa-cidade { font-size: var(--mg-fs-1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mg-tinta-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-placa-cidade b { color: var(--mg-linha); }
.mg-placa-nome { margin: 0; font-family: var(--mg-placa); font-weight: 400; font-size: var(--mg-fs-5); line-height: 1.12;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-placa-nome.troca { animation: mg-placa var(--mg-medio) var(--mg-curva); }
@keyframes mg-placa { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* intro do motor ou janela do 3DVista na tela toda: a skin sai da frente */
body.mg-skin.tour-em-abertura .mg-app { opacity: 0; visibility: hidden; }
body.mg-skin.janela-3d .mg-app { display: none; }

/* ── celular (retrato) ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  :root { --mg-alvo: 48px; }
  /* à direita fica o botão de idioma (≈ 64 px) */
  .mg-placa { left: 8px; right: 80px; top: max(8px, env(safe-area-inset-top)); max-width: none; }
  .mg-placa-faixa { width: 8px; }
  .mg-placa-corpo { margin: 3px; padding: 4px 10px 5px; flex: 1; }
  .mg-placa-cidade { font-size: 10px; letter-spacing: .12em; }
  .mg-placa-nome { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-app *, .mg-app *::before, .mg-app *::after { animation: none !important; transition: none !important; }
}