/* ======================================================================
   Site público da Oruha Logística — oruha.ceprone.com

   É outro sítio e não o painel: fundo mais escuro, letra de sinalética e
   o mapa das rotas como peça central. O ouro é o único acento — tudo o
   resto é preto, asfalto e cal.

   Quem lê isto está num telemóvel, com rede fraca, provavelmente com a
   carga parada à espera de camião. Por isso: nada de tipos de letra a
   mais, nada de imagens pesadas, e o botão de WhatsApp sempre à mão.
   ====================================================================== */

/* ----------------------------------------------------------------------
   Letras servidas por nós, não pelo Google.

   São 160 kB no total, com `font-display: swap`: o texto aparece logo na
   letra do sistema e troca quando a nossa chega. Em Nampula isto poupa uma
   resolução de DNS, um aperto de mão TLS e uma viagem a um servidor que pode
   estar do outro lado do mundo — e o site deixa de depender de um terceiro
   para ter a cara certa.

   Archivo e IBM Plex Sans estão sob a SIL Open Font License 1.1; as licenças
   seguem em static/fontes/.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fontes/archivo-variavel.de2f1fe81758.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fontes/plex-sans-400.77bc02670657.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fontes/plex-sans-500.f7016cd446d2.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fontes/plex-sans-600.196e3cbc5fee.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --breu:       #05060A;   /* base da página */
  --asfalto:    #0D1016;   /* superfícies levantadas */
  --asfalto-2:  #141922;
  --linha:      #1E2430;
  --linha-viva: #2C3442;

  --ouro:       #E6B436;
  --ouro-claro: #F7D479;
  --ouro-fundo: #8A6512;
  --ouro-brilho: rgba(230, 180, 54, .14);

  --cal:        #F2EFE6;   /* branco de marcação de estrada, não branco puro */
  --poeira:     #9AA0AB;
  --poeira-2:   #6B727E;

  --display: "Archivo", "Arial Narrow", sans-serif;
  --texto:   "IBM Plex Sans", system-ui, sans-serif;

  --coluna: 1180px;
  --toque: 46px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--breu);
  color: var(--poeira);
  font-family: var(--texto);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  color: var(--cal);
  line-height: 1.04;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}

a { color: var(--ouro); text-decoration: none; }
a:hover { color: var(--ouro-claro); }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
}

.coluna {
  width: 100%;
  max-width: var(--coluna);
  margin: 0 auto;
  padding: 0 1.4rem;
}

/* ---------------------------------------------------------------- Topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 6, 10, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo .coluna {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}
.topo-marca img { height: 34px; display: block; }
.topo nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.topo nav a {
  color: var(--poeira);
  font-size: .94rem;
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
}
.topo nav a:hover { color: var(--cal); border-bottom-color: var(--ouro); }
/* O botão dentro da navegação: sem isto, `.topo nav a` (mais específico)
   pinta-lhe o texto de cinzento por cima do ouro e fica ouro sobre ouro. */
.topo nav a.botao { color: #140F02; border-bottom: 0; }
.topo nav a.botao:hover { color: #140F02; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: var(--toque);
  padding: .7rem 1.4rem;
  border: 1px solid var(--ouro);
  border-radius: 3px;
  background: var(--ouro);
  color: #140F02;
  font-family: var(--texto);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.botao:hover { background: var(--ouro-claro); color: #140F02; }
.botao.vazio { background: transparent; color: var(--ouro); }
.botao.vazio:hover { background: var(--ouro-brilho); color: var(--ouro-claro); }
.botao.grande { min-height: 54px; padding: .9rem 1.8rem; font-size: 1.02rem; }

.abrir-menu {
  display: none;
  background: none;
  border: 1px solid var(--linha-viva);
  border-radius: 3px;
  color: var(--cal);
  width: 44px; height: 44px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--linha);
}
/* Clarão de fundo, parado: é o que separa o hero do resto sem precisar de
   uma imagem pesada. */
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 30% 40% -20%;
  background: radial-gradient(closest-side, rgba(230,180,54,.16), transparent 70%);
  pointer-events: none;
}
.hero .coluna {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 46%);
  gap: 3.5rem;
  align-items: center;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  min-height: 78vh;
}

/* As lâminas ocupam todas a MESMA célula de grelha, empilhadas. Assim a
   altura do bloco é a da lâmina mais alta, e nenhuma transborda para cima dos
   botões — que foi o que aconteceu com «A carga não espera pelo pagamento»,
   de título em três linhas, contra uma altura fixa de 20rem. */
.hero-texto { display: grid; }

.lamina {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease, visibility 600ms;
}
.lamina.activa { opacity: 1; visibility: visible; transform: none; }

.lamina-rotulo {
  font-size: .82rem;
  color: var(--ouro);
  margin: 0 0 .9rem;
  font-variant-numeric: tabular-nums;
}
.lamina h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  font-weight: 700;
  font-variation-settings: "wdth" 118;
}
/* O cartão de uma rota tem um título mais curto e factual do que as
   mensagens escritas à mão: cabe num corpo mais pequeno e fica melhor. */
#lamina-rota h1 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); }

.lamina p {
  margin: 1.1rem 0 0;
  font-size: 1.1rem;
  max-width: 34ch;
  color: var(--poeira);
}

.hero-accoes {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}

.laminas-indice {
  display: flex;
  gap: .5rem;
  margin-top: 2rem;
}
.laminas-indice button {
  width: 34px; height: 3px;
  padding: 0;
  border: 0;
  background: var(--linha-viva);
  cursor: pointer;
  transition: background 200ms ease;
}
.laminas-indice button[aria-current="true"] { background: var(--ouro); }

/* ------------------------------------------------------- Mapa das rotas */
.mapa { position: relative; }
.mapa svg { width: 100%; height: auto; display: block; }
.mapa .via {
  stroke: var(--linha-viva);
  stroke-width: 1.4;
  fill: none;
  transition: stroke 400ms ease, stroke-width 400ms ease;
}
/* A rota de que a lâmina fala desenha-se, em vez de aparecer de repente: é a
   única animação da página que não responde a um gesto, e serve para a vista
   ir ter com a linha certa. Com `prefers-reduced-motion` aparece feita. */
.mapa .via.acesa {
  stroke: var(--ouro);
  stroke-width: 2.6;
  stroke-dasharray: 1;
  animation: tracar 900ms cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes tracar {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
.mapa .cidade { fill: var(--poeira-2); }
/* Cidades de contexto: estão lá para o mapa ser Moçambique, não para
   prometer serviço. Por isso, mais apagadas e sem acender. */
.mapa .cidade.referencia { fill: #39414F; }
.mapa .nome.referencia { fill: #5A6372; font-size: 10.5px; }

/* A linha sensível ao toque: invisível, grossa, por cima da fina. Uma via de
   1,4 px não se acerta com o polegar. */
.mapa .toque {
  stroke: transparent;
  stroke-width: 16;
  fill: none;
  cursor: pointer;
}
/* O anel de foco do browser desenha um rectângulo à volta da caixa da linha,
   que num traço diagonal fica horrível. Marca-se o foco com a própria via. */
.mapa .toque:focus { outline: none; }
.mapa .toque:focus-visible { stroke: var(--ouro-brilho); }
.mapa .cidade.acesa { fill: var(--ouro-claro); }
.mapa .nome {
  fill: var(--poeira);
  font-family: var(--texto);
  font-size: 11.5px;
  paint-order: stroke;        /* o contorno escuro fica POR BAIXO da letra */
  stroke: var(--breu);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.mapa .nome.acesa { fill: var(--cal); }
.mapa .nucleo { fill: var(--ouro); }
.mapa .halo {
  fill: none;
  stroke: var(--ouro);
  stroke-width: 1;
  opacity: .35;
}
/* Tabela e mapa lado a lado — e um por cima do outro no telemóvel.
   Estava escrito em linha no template com `1fr 420px`, que não colapsa:
   num ecrã de 390 px a página ficava mais larga do que o ecrã e o browser
   afastava o zoom até caber. `minmax(0, 1fr)` é o que impede uma tabela
   larga de empurrar a coluna para fora, mesmo no computador. */
.rotas-grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 960px) {
  .rotas-grelha { grid-template-columns: 1fr; gap: 2rem; }
}

/* Na página das rotas o mapa acompanha a leitura da tabela: sem isto,
   carregar numa linha lá em baixo acende um mapa que já saiu do ecrã. */
.mapa-fixo { position: sticky; top: 92px; }
@media (max-width: 960px) { .mapa-fixo { position: static; } }

.mapa-legenda {
  margin-top: .8rem;
  font-size: .78rem;
  color: var(--poeira-2);
  text-align: center;
}

/* ------------------------------------------------------------- Secções */
.seccao { padding: 5rem 0; border-bottom: 1px solid var(--linha); }
.seccao.escura { background: var(--asfalto); }
.seccao h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  margin-bottom: .7rem;
}
.seccao .entrada {
  max-width: 58ch;
  margin-bottom: 2.6rem;
  font-size: 1.05rem;
}

/* Painel de partidas: as rotas como quem lê um horário. */
.horario {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.horario th {
  text-align: left;
  font-family: var(--texto);
  font-size: .78rem;
  font-weight: 500;
  color: var(--poeira-2);
  padding: 0 .9rem .7rem 0;
  border-bottom: 1px solid var(--linha-viva);
}
/* `1.190 km` partido em duas linhas numa coluna estreita fica feio e
   custa a ler. Os números não se partem. */
.horario th.numero, .horario td.numero { text-align: right; white-space: nowrap; }
.horario td {
  padding: .95rem .9rem .95rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: .98rem;
}
.horario tbody tr[data-rota-linha] { cursor: pointer; }
.horario tr:hover td { background: rgba(230,180,54,.04); }
.horario tbody tr.acesa td { background: rgba(230,180,54,.09); }
.horario tbody tr.acesa .percurso { color: var(--ouro); }
.horario .percurso { color: var(--cal); font-weight: 500; }
.horario .percurso .seta { color: var(--ouro); margin: 0 .35rem; }
.horario .dias { color: var(--ouro); }

/* Passos — aqui a numeração diz mesmo alguma coisa: é uma sequência. */
.passos { display: grid; gap: 2rem; grid-template-columns: repeat(4, 1fr); }
.passo { border-top: 2px solid var(--ouro); padding-top: 1rem; }
.passo b {
  display: block;
  font-family: var(--display);
  font-variation-settings: "wdth" 120;
  font-size: 2.1rem;
  color: var(--ouro);
  line-height: 1;
  margin-bottom: .5rem;
}
.passo h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.passo p { margin: 0; font-size: .95rem; }

.cargas { display: flex; flex-wrap: wrap; gap: .6rem; }
.carga {
  border: 1px solid var(--linha-viva);
  padding: .55rem 1rem;
  font-size: .92rem;
  color: var(--cal);
}
.carga small { color: var(--poeira-2); }

.verdades { display: grid; gap: 2.4rem; grid-template-columns: repeat(3, 1fr); }
.verdade h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.verdade p { margin: 0; }

/* ----------------------------------------------------------- Formulário */
.formulario-publico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  max-width: 760px;
}
.campo-publico {
  width: 100%;
  min-height: var(--toque);
  padding: .7rem .85rem;
  background: var(--asfalto-2);
  border: 1px solid var(--linha-viva);
  border-radius: 3px;
  color: var(--cal);
  font-family: var(--texto);
  font-size: 1rem;
}
.campo-publico:focus { border-color: var(--ouro); outline: none; }
.campo-publico::placeholder { color: var(--poeira-2); }
select.campo-publico { appearance: none; background-image: none; }
textarea.campo-publico { min-height: 110px; resize: vertical; }

.grupo-campo { display: flex; flex-direction: column; gap: .4rem; }
.grupo-campo.largo { grid-column: 1 / -1; }
.grupo-campo label { font-size: .88rem; color: var(--poeira); }
.grupo-campo .obrigatorio { color: var(--ouro); }
.erro-publico { font-size: .85rem; color: #F0806B; }

.aviso-publico {
  grid-column: 1 / -1;
  border-left: 3px solid #F0806B;
  background: rgba(240, 128, 107, .08);
  padding: .8rem 1rem;
  font-size: .92rem;
  color: #F0806B;
}

/* --------------------------------------------------------------- Rodapé */
.rodape {
  background: var(--asfalto);
  padding: 3.5rem 0 2.5rem;
  font-size: .92rem;
}
.rodape-grelha {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--linha);
}
.rodape h4 {
  font-family: var(--texto);
  font-size: .82rem;
  font-weight: 600;
  color: var(--cal);
  margin: 0 0 .8rem;
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rodape-legal {
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  color: var(--poeira-2);
  font-size: .84rem;
}
.rodape-marca img { height: 38px; margin-bottom: 1rem; display: block; }

/* Botão de WhatsApp sempre à mão no telemóvel. */
.whatsapp-fixo {
  display: none;
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------- Telemóvel */
@media (max-width: 960px) {
  .hero .coluna {
    grid-template-columns: 1fr;
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-height: 0;
  }
  .hero-texto { min-height: 18rem; }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .verdades { grid-template-columns: 1fr; gap: 1.8rem; }
  .rodape-grelha { grid-template-columns: 1fr; }
  .topo nav {
    position: fixed;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--asfalto);
    border-bottom: 1px solid var(--linha);
    padding: .5rem 1.4rem 1.4rem;
    display: none;
  }
  .topo nav.aberta { display: flex; }
  .topo nav a { padding: .9rem 0; border-bottom: 1px solid var(--linha); }
  .topo nav .botao { margin-top: .8rem; }
  .abrir-menu { display: grid; place-items: center; margin-left: auto; }
  .whatsapp-fixo { display: flex; }
  body { padding-bottom: 5rem; }
  .formulario-publico { grid-template-columns: 1fr; }
  .horario th.esconde-telemovel, .horario td.esconde-telemovel { display: none; }
}

/* A silhueta de Moçambique, por baixo das rotas: presente o suficiente para
   se reconhecer o país, apagada o suficiente para as rotas se lerem. */
.mapa .pais {
  fill: rgba(230, 180, 54, .055);
  stroke: rgba(230, 180, 54, .42);
  stroke-width: 1.3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(230, 180, 54, .18));
}

/* ====================================================================== */
/*  PÁGINA DE UMA ROTA                                                     */
/* ====================================================================== */
.migalhas { font-size: .82rem; color: var(--poeira-2); margin: 0 0 1rem; }
.migalhas a { color: var(--poeira); }

.rota-titulo {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  font-variation-settings: "wdth" 116;
}

/* Os números que a pessoa veio ver, à frente de tudo o resto. */
.rota-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin: 1.8rem 0 1.4rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.rota-numeros span {
  display: block;
  font-size: .78rem;
  color: var(--poeira-2);
  margin-bottom: .25rem;
}
.rota-numeros strong {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-size: 1.7rem;
  color: var(--ouro);
  font-weight: 700;
  white-space: nowrap;
}
.rota-entrada { max-width: 52ch; margin: 0 0 1.8rem; }
.seccao.rota-topo { padding-top: 2.6rem; }
.horario .percurso a { color: var(--cal); }
.horario .percurso a:hover { color: var(--ouro); }
.rota-texto { max-width: 62ch; }
.rota-texto p { margin: 0 0 1rem; }