/* Sistema visual do site institucional da MEDAL — compartilhado por todas as páginas de
 * site/ (home, serviços, prefeituras, quem somos, trabalhe conosco) e por /acompanhar/.
 *
 * Direção "sala de controle": verde #00A54F principal, ouro #FDC800 secundário, Barlow
 * servida pelo próprio site. O sistema completo está em DESIGN.md, na raiz do projeto.
 *
 * ATENÇÃO: /suporte/ carrega este arquivo como base e mantém um <style> próprio DEPOIS
 * dele, só com o que é dele. Mexeu na barra do topo ou no rodapé aqui, confira lá também
 * (e em src/index.css do app e no tema do GLPI, que são deploys separados).
 */

  /* Paleta copiada de src/lib/theme.js e src/index.css do sistema de monitoramento. São
     dois deploys separados (esta página é HTML estático puro, sem build), então os valores
     estão duplicados de propósito — mudar a cor da marca exige mexer nos dois lugares.

     Verde é a cor principal; ouro é a secundária, reservada ao que precisa puxar o olho. */
  :root {
    color-scheme: dark;
    --fundo: #080C0A;
    --painel: #0F1613;
    --painel-alto: #16201B;
    --painel-topo: #050807;
    --linha: #1E2A24;
    --linha-forte: #2C3B33;
    --texto: #E9F0EB;
    --texto-medio: #A3B5AA;
    --texto-fraco: #7C9288;
    --verde: #00A54F;
    --verde-vivo: #19C062;
    --ouro: #FDC800;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, svg { display: block; max-width: 100%; }

  body {
    font-family: 'Barlow', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    color: var(--texto);
    background: var(--fundo);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: rgba(0, 165, 79, 0.22); color: var(--texto); }
  :focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 3px; border-radius: 4px; }
  a { color: var(--verde-vivo); text-underline-offset: 3px; }

  .cond { font-family: 'Barlow Condensed', 'Barlow', sans-serif; }
  .largura { max-width: 1060px; margin: 0 auto; padding-inline: 24px; }

  /* ---------- barra do topo ---------- */
  .topo {
    border-bottom: 1px solid var(--linha);
    background: rgba(5, 8, 7, 0.92);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .topo-interno {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    flex-wrap: wrap;
  }
  /* A marca leva à home em todas as páginas, e a regra precisa morar aqui: sem ela o <a>
     fica inline e herda o `a` global — sublinhado, na cor de link e com as duas linhas do
     travessão desalinhadas (o nome encostando na borda da barra). Foi o que aconteceu em
     18/09/2026, quando o wrapper entrou nas páginas de site/ e só as folhas de /suporte/ e
     /atendimento/ tinham a regra correspondente. */
  .topo-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--texto);
    text-decoration: none;
  }
  .topo-logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
  /* A marca é um travessão de duas linhas: "MEDAL" com o peso e "Comércio & Serviços" na
     linha fina abaixo (18/09/2026). O nome inteiro numa linha só mediria o dobro do anterior
     e brigaria com o menu. A segunda linha é parte do NOME, não um rótulo — por isso caixa
     mista, sem `text-transform`. O ramo ("Suporte técnico e manutenção") saiu da barra e
     continua no cabeçalho do relatório, via EMPRESA.tagline. */
  .topo-marca-texto { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
  .topo-nome {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: 0.1em;
  }
  .topo-descritor {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--texto-fraco);
    white-space: nowrap;
  }
  /* Abaixo de 520px a segunda linha sai e fica só "MEDAL": em tela estreita o menu já
     empilha e a barra passa de 240px de altura — a linha a mais empurraria o conteúdo para
     ainda mais baixo. */
  @media (max-width: 520px) {
    .topo-descritor { display: none; }
  }
  .topo-menu {
    margin-left: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .topo-menu a {
    color: var(--texto-fraco);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 6px;
  }
  .topo-menu a:hover { color: var(--texto); background: var(--painel-alto); }

  /* ---------- faixa de chamada ----------
     Emprestada do iFixit, que abre a pagina com uma faixa fina convidando a participar. Ali
     o convite e virar membro; aqui e o telefone de quem atende. E a primeira coisa da
     pagina de proposito: quem chega com equipamento parado nao deveria ter que rolar ate o
     rodape para achar um numero. */
  .faixa {
    background: var(--painel-topo);
    border-bottom: 1px solid var(--linha);
    font-size: 13.5px;
    color: var(--texto-medio);
  }
  .faixa-interna {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    flex-wrap: wrap;
    padding-block: 9px;
    text-align: center;
  }
  .faixa a {
    color: var(--verde-vivo);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .faixa a:hover { text-decoration: underline; }

  /* ---------- botões ---------- */
  .heroi-acoes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 32px;
  }
  .ou { font-size: 13.5px; color: var(--texto-fraco); }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(.16,1,.3,1);
  }
  .btn svg { flex-shrink: 0; }
  .btn--principal { background: var(--verde); border-color: var(--verde); color: #04140B; }
  .btn--principal:hover, .btn--principal:focus-visible { background: var(--verde-vivo); border-color: var(--verde-vivo); }
  .btn--contorno { border-color: var(--linha-forte); color: var(--texto); background: var(--painel); }
  .btn--contorno:hover, .btn--contorno:focus-visible { border-color: var(--verde); background: var(--painel-alto); }
  .btn:hover svg.seta { transform: translateX(3px); }
  .btn svg.seta { transition: transform 0.2s cubic-bezier(.16,1,.3,1); }

  /* As duas frases que antes descreviam cada porta. Viraram uma linha só: a informacao que
     muda a decisao de quem le e "preciso de login?", e ela cabe numa frase. */
  .heroi-nota {
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--texto-fraco);
    line-height: 1.7;
  }

  /* O acesso da equipe nao e um terceiro destino de cliente: e interno, e por isso entra
     como linha discreta abaixo das duas portas, sem moldura e em corpo menor. Quem chega
     aqui para abrir chamado nao pode confundi-lo com o caminho dele. */
  .porta-equipe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-fraco);
    text-decoration: none;
  }
  .porta-equipe:hover { color: var(--verde-vivo); }
  .porta-equipe svg { flex-shrink: 0; }

  /* ---------- seções ----------
     O respiro dobrou. No iFixit cada secao ocupa quase uma tela e o olho descansa entre uma
     e outra; aqui as secoes vinham coladas, com 32px de folga, e a pagina lia como um
     documento denso em vez de uma apresentacao. */
  section { padding-block: clamp(52px, 8vw, 96px); border-top: 1px solid var(--linha); scroll-margin-top: 120px; }
  h2 {
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.12;
    text-align: center;
    max-width: 24ch;
    margin-inline: auto;
  }
  .secao-intro {
    font-size: 16px;
    color: var(--texto-fraco);
    margin-top: 14px;
    max-width: 58ch;
    line-height: 1.7;
    text-align: center;
    margin-inline: auto;
  }

  /* ---------- o fecho ----------
     O iFixit termina com um convite ("Participe da comunidade de reparos"), nao com o
     rodape. Esta home terminava nos dados de contato, que informam mas nao pedem nada. */
  .fecho { margin-top: 40px; display: flex; justify-content: center; }

  /* ---------- contato ---------- */
  .contato-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 22px;
    margin-top: 30px;
  }
  .contato-rotulo {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texto-fraco);
  }
  .contato-valor { font-size: 16px; margin-top: 6px; line-height: 1.6; }
  /* Para que serve cada canal, em uma linha. O cliente pediu a divisão explícita — chamado
     para suporte e suprimento, e-mail/WhatsApp para contrato e orçamento — mas "nas
     entrelinhas", sem parágrafo explicando. Um rótulo de quatro palavras sob o canal resolve:
     quem lê a linha já sabe para onde ir. */
  .contato-para {
    font-size: 12.5px;
    color: var(--texto-fraco);
    margin-top: 5px;
    line-height: 1.5;
  }
  .contato-valor a { color: var(--texto); text-decoration: none; }
  .contato-valor a:hover { color: var(--verde-vivo); text-decoration: underline; }

  /* ---------- rodapé ---------- */
  footer { border-top: 1px solid var(--linha); padding-block: 24px; }
  .rodape-interno {
    font-size: 12.5px;
    color: var(--texto-fraco);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
  }
  .rodape-interno a { color: var(--texto-medio); text-decoration: none; }
  .rodape-interno a:hover { color: var(--verde-vivo); text-decoration: underline; }
  /* A linha de direitos e documentos ocupa a largura toda, abaixo dos dados da empresa:
     é o fecho da página, e não mais um item na mesma fila do telefone. */
  .rodape-direitos { width: 100%; color: var(--texto-fraco); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  }

/* ==========================================================================
   MENU AGRUPADO — Serviços / Sou cliente / A MEDAL
   ==========================================================================
   Veio da Simpress, que separa "Seja um cliente" de "Sou cliente" e agrupa o
   resto por assunto. Com nove destinos, uma fila reta de links vira uma lista
   de compras; agrupado, cada grupo responde uma pergunta ("o que vocês fazem",
   "já sou cliente, e agora", "quem são vocês").

   O submenu abre no hover E no clique. O hover sozinho não serve: em tela de
   toque não existe hover, e para quem navega por teclado ele é invisível. O
   botão carrega aria-expanded, que é o que leitor de tela anuncia. */
.menu-grupo { position: relative; }
.menu-botao {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-fraco);
  background: none;
  border: 0;
  padding: 7px 11px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.menu-botao::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.18s ease;
}
.menu-botao:hover, .menu-grupo:hover .menu-botao { color: var(--texto); background: var(--painel-alto); }
.menu-botao[aria-expanded="true"] { color: var(--texto); background: var(--painel-alto); }
.menu-botao[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

.menu-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 232px;
  list-style: none;
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  padding: 6px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.menu-grupo:hover .menu-lista,
.menu-grupo:focus-within .menu-lista,
.menu-lista[data-aberto="sim"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu-lista a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-medio);
  text-decoration: none;
}
.menu-lista a:hover, .menu-lista a:focus-visible { background: var(--painel-alto); color: var(--texto); }
.menu-lista .explica { display: block; font-size: 12px; font-weight: 400; color: var(--texto-fraco); margin-top: 2px; }

/* A ação principal também no topo: quem chegou por uma página interna não deveria
   ter que voltar à home para abrir chamado. */
.menu-acao {
  background: var(--verde);
  border: 1px solid var(--verde);
  color: #04140B !important;
  font-weight: 600;
  padding: 8px 14px !important;
  border-radius: 7px;
}
.menu-acao:hover { background: var(--verde-vivo) !important; border-color: var(--verde-vivo); }

@media (max-width: 860px) {
  /* Sem posicionamento absoluto no celular: o submenu entra no fluxo, empurrando o
     conteúdo. Um menu flutuante em tela estreita cobre justamente o que a pessoa
     está tentando ler. */
  /* O topo deixa de ser sticky aqui. Com o menu no fluxo ele mede 244px em 390px de
     largura — 29% da tela —, e grudado no alto isso é perdido em TODA a rolagem. No
     celular ele fica no começo da página, que é onde a pessoa volta para navegar. */
  .topo { position: static; }
  .topo-interno { align-items: flex-start; }
  .topo-menu { width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: 2px; padding-bottom: 10px; }
  .menu-grupo { width: 100%; }
  .menu-botao { width: 100%; justify-content: space-between; }
  .menu-lista {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 4px 12px; min-width: 0;
    display: none;
  }
  .menu-grupo:hover .menu-lista { display: none; }
  .menu-lista[data-aberto="sim"] { display: block; }
  .menu-acao { text-align: center; margin-top: 6px; }
}

/* ==========================================================================
   PÁGINAS INTERNAS
   ========================================================================== */
/* O cabeçalho de página não é o herói da home: ele informa onde a pessoa está,
   não convence ninguém a entrar. Menor, alinhado à esquerda, com o caminho de
   volta acima do título. */
.cabecalho-pagina {
  padding-block: clamp(36px, 5.5vw, 64px) clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--linha);
}
/* Mesma coluna da prosa: com o cabeçalho em 1060px e o texto em 780px, o título e o
   primeiro parágrafo começavam em pontos diferentes, e a página parecia ter dois eixos. */
.cabecalho-pagina > .largura { max-width: 780px; }
.trilha { font-size: 13px; color: var(--texto-fraco); margin-bottom: 14px; }
.trilha a { color: var(--texto-fraco); text-decoration: none; }
.trilha a:hover { color: var(--verde-vivo); text-decoration: underline; }
.trilha span { margin-inline: 7px; }
.cabecalho-pagina h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.07;
  max-width: 20ch;
}
.cabecalho-pagina .resumo {
  font-size: clamp(15.5px, 1.8vw, 18px);
  color: var(--texto-medio);
  margin-top: 16px;
  max-width: 60ch;
  line-height: 1.65;
}

/* Prosa: o corpo das páginas internas. Medida de leitura curta de propósito —
   linha longa demais faz o olho perder a volta. */
.prosa { padding-block: clamp(40px, 6vw, 72px); }
/* A coluna de leitura é mais estreita que a largura do site e fica centralizada. Com a
   largura cheia de 1060px e a medida de 68ch do parágrafo, o texto encostava na esquerda e
   deixava metade da tela vazia à direita — parecia página quebrada, não página arejada. */
.prosa > .largura { max-width: 780px; }
.prosa h2 { font-size: clamp(22px, 2.8vw, 28px); font-weight: 600; letter-spacing: -0.02em; text-align: left; max-width: none; margin-inline: 0; }
.prosa h3 { font-size: 17.5px; font-weight: 600; margin-top: 26px; }
.prosa p { font-size: 16px; color: var(--texto-medio); line-height: 1.75; margin-top: 14px; max-width: 68ch; }
.prosa ul, .prosa ol { margin-top: 14px; padding-left: 22px; max-width: 68ch; }
.prosa li { font-size: 16px; color: var(--texto-medio); line-height: 1.75; margin-top: 8px; }
.prosa li::marker { color: var(--verde); }
.prosa .largura > * + h2 { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--linha); }
.prosa .largura > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prosa strong { color: var(--texto); font-weight: 600; }

/* Ficha de dados lado a lado dentro da prosa. */
.ficha-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 20px;
  margin-top: 24px;
}
.ficha-item { background: var(--painel); border: 1px solid var(--linha); border-radius: 10px; padding: 18px 20px; }
.ficha-item dt { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-fraco); }
.ficha-item dd { font-size: 15.5px; color: var(--texto); margin-top: 7px; line-height: 1.6; }

/* Chamada de ação no fim da página interna. */
.chamada {
  margin-top: 48px;
  padding: clamp(24px, 3.5vw, 34px);
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 12px;
  text-align: center;
}
.chamada h2 { font-size: clamp(20px, 2.6vw, 26px); text-align: center; margin-inline: auto; max-width: 24ch; }
.chamada p { margin-inline: auto; text-align: center; max-width: 52ch; }
.chamada .heroi-acoes { margin-top: 22px; }

/* ---------------------------------------------------------------------------------------
 * Botão de WhatsApp (classe .zap), fixo no canto, em todas as páginas públicas.
 *
 * Verde da marca, e não o verde do WhatsApp: quem identifica o canal é o glifo, e um
 * segundo verde brigaria com a paleta. Sem script nenhum — ver o comentário no HTML.
 * ------------------------------------------------------------------------------------ */
.zap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--verde);
  color: #04120A;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .18s ease, background .18s ease;
}

.zap:hover,
.zap:focus-visible {
  background: var(--verde-vivo);
  color: #04120A;
  transform: translateY(-2px);
}

.zap:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.zap svg { width: 22px; height: 22px; fill: currentColor; }

/* No celular vira círculo: a pílula com texto comeria a largura útil da tela. E o rodapé
   ganha folga embaixo, senão o botão cobre os links de privacidade e termos. */
@media (max-width: 760px) {
  .zap { gap: 0; padding: 14px; right: 14px; bottom: 14px; }
  .zap-rotulo { display: none; }
  footer { padding-bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .zap { transition: none; }
  .zap:hover, .zap:focus-visible { transform: none; }
}