/* ------------------------------------------------------------------
   ajustes.css — correções aplicadas sobre o CSS original do site.
   Fica em arquivo separado de propósito: tudo o que foi alterado em
   relação ao site publicado está aqui, e qualquer bloco pode ser
   removido isoladamente para voltar ao comportamento anterior.
   ------------------------------------------------------------------ */


/* 1 ----------------------------------------------------------------
   SIMETRIA DAS ÁREAS DE ATUAÇÃO

   O card "Segurança e Saúde Ocupacional" tinha a classe .wide-card,
   que o fazia ocupar 2 das 3 colunas. Com 6 cards isso produzia
   3 + (2+1) + 1 — a quebra de simetria. Neutralizando o span, os
   6 cards formam duas fileiras iguais de três.
   Efeito colateral resolvido: o texto daquele card corria a 520px
   de largura enquanto os outros corriam a ~235px.
   ------------------------------------------------------------------ */
.service-card.wide-card { grid-column: auto; }


/* 1b ---------------------------------------------------------------
   ALINHAMENTO DA LINHA DIVISÓRIA E DAS ETIQUETAS

   "Processos" e "Produtos" cabem em uma linha; "Qualidade e
   Certificação de EPIs" ocupa duas. Como o título empurra tudo o que
   vem abaixo, o card 03 ficava ~24px mais baixo que os vizinhos e a
   linha divisória saía do alinhamento.

   Agora todo título reserva a altura de duas linhas (2lh) e o texto
   se apoia na base desse espaço — os de uma linha continuam colados
   na descrição, como antes, e as divisórias de uma mesma fileira
   nascem todas na mesma altura.
   ------------------------------------------------------------------ */
.service-card h3 {
  min-height: 3em;      /* reserva para navegadores sem a unidade lh */
  min-height: 2lh;
  display: flex;
  align-items: flex-end;
}

/* Mesma lógica para a descrição: a do card 03 ocupa duas linhas e as
   demais ocupam três, o que ainda deslocava a divisória em 8px.
   Reservando três linhas, todas as divisórias nascem juntas. */
.service-card summary > p {
  min-height: 4.74em;   /* reserva para navegadores sem a unidade lh */
  min-height: 3lh;
}


/* 2 ----------------------------------------------------------------
   MARCADORES DA LISTA DO "VER ESCOPO"

   A lista vinha com list-style:none e um recuo de 23px, então os
   itens ficavam soltos, sem nada que ancorasse o início da linha.
   Agora cada item ganha um traço curto no tom do site, alinhado à
   margem, e o texto fica com recuo pendurado correto.
   ------------------------------------------------------------------ */
.service-body ul {
  padding-left: 0;
  padding-top: 26px;
}

.service-body li {
  position: relative;
  margin: 0 0 15px;
  padding-left: 26px;
}

.service-body li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: 0;
  width: 12px;
  height: 2px;
  background: var(--cyan-text);
  opacity: .85;
}

.service-body li:last-child { margin-bottom: 0; }


/* 3 ----------------------------------------------------------------
   LEGIBILIDADE

   O público do Leonardo é gestor industrial, faixa dos 40 aos 60.
   Os textos de apoio estavam em 14,5px e as etiquetas em caixa alta
   a 10px com opacidade 0,68 — pequeno demais para leitura confortável
   nessa faixa etária. Ajuste moderado, sem mexer na composição.
   ------------------------------------------------------------------ */
.service-body li { font-size: 15.5px; line-height: 1.62; }

.service-tags > span { font-size: 10.75px; opacity: .78; }

.service-action { font-size: 11px; opacity: .78; }


/* 4 ----------------------------------------------------------------
   MARCA NO CABEÇALHO (caminho C)

   A assinatura antiga era desenhada em CSS: uma linha vertical, um traço
   horizontal e o ponto ciano. Agora aquele conjunto virou o próprio
   monograma LM, e o ponto ciano passou a separar as duas letras.
   ------------------------------------------------------------------ */
.brand-signal {
  border-left: 0;
  flex: 0 0 40px;
  width: 40px;
  height: auto;
  color: var(--ink);
}

.brand-signal::before,
.brand-signal::after { content: none; }

.brand-signal svg { display: block; width: 100%; height: auto; }

@media (max-width: 720px) {
  .brand-signal { flex-basis: 34px; width: 34px; }
}


/* 5 ----------------------------------------------------------------
   MENU NO CELULAR

   Abaixo de 720px o site escondia "Atuação / Experiência / Método" e
   deixava só o botão de WhatsApp — numa página de 9 mil pixels, a única
   forma de navegar era rolar. O menu usa <details>, o mesmo recurso dos
   cards de atuação: funciona sem JavaScript, no teclado e no leitor de
   tela. O "+" que vira "−" é o mesmo sinal do "Ver escopo".
   ------------------------------------------------------------------ */
.menu-mobile { display: none; }

@media (max-width: 720px) {
  /* O cabeçalho do celular é apertado: com o botão de WhatsApp e a marca,
     não sobra largura para a palavra "Menu". Fica o glifo de duas linhas,
     que se dobra num X quando abre; o rótulo continua no HTML para quem
     usa leitor de tela. */
  .site-header { padding: 0 18px; }
  .site-header nav { gap: 14px; }
  .brand-copy strong { white-space: nowrap; }
  .nav-cta { white-space: nowrap; }

  /* O painel se alinha à borda direita do cabeçalho, não ao botão —
     por isso quem ancora é o <nav>. */
  .site-header nav { position: relative; }
  .menu-mobile { display: block; position: static; }

  .menu-mobile summary {
    position: relative;
    width: 40px;
    height: 44px;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    opacity: .82;
  }

  .menu-mobile summary::-webkit-details-marker { display: none; }

  .menu-mobile summary::before,
  .menu-mobile summary::after {
    content: "";
    position: absolute;
    left: 10px;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transition: transform .18s ease;
  }

  .menu-mobile summary::before { top: 18px; }
  .menu-mobile summary::after  { top: 25px; }

  .menu-mobile[open] summary::before { transform: translateY(3.5px) rotate(45deg); }
  .menu-mobile[open] summary::after  { transform: translateY(-3.5px) rotate(-45deg); }

  .menu-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .menu-mobile-lista {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 60;
    min-width: 196px;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 20px 44px rgba(7, 19, 29, .16);
  }

  /* O CSS original esconde todo link do <nav> no celular
     (nav a:not(.nav-cta){display:none}). Os itens do menu precisam
     escapar dessa regra. */
  .site-header nav .menu-mobile-lista a {
    display: block;
    padding: 15px 18px;
    font-size: 15.5px;
    border-bottom: 1px solid var(--line);
  }

  .site-header nav .menu-mobile-lista a:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-mobile summary::before,
  .menu-mobile summary::after { transition: none; }
}


/* 6 ----------------------------------------------------------------
   BARRA FIXA SÓ DEPOIS DA PRIMEIRA TELA

   No celular a primeira tela mostrava cinco chamadas ao mesmo tempo:
   "Falar agora" no topo, "Falar com Leonardo" e "Salvar contato" no
   meio, e a barra fixa repetindo WhatsApp e "Salvar contato" embaixo.
   Agora a barra só sobe quando a primeira tela sai de vista.

   Depende de rolagem animada por CSS (sem JavaScript). Onde o navegador
   não suportar, ou quando a pessoa pede menos movimento no sistema, a
   barra continua sempre visível — como era antes.
   ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    body { timeline-scope: --primeira-tela; }
    .hero { view-timeline: --primeira-tela block; }

    .mobile-contact-bar {
      animation: subir-barra linear both;
      animation-timeline: --primeira-tela;
      animation-range: exit 0% exit 30%;
      will-change: transform;
    }

    @keyframes subir-barra {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }
  }
}


/* 7 ----------------------------------------------------------------
   RÓTULO "EXPERIÊNCIA INDUSTRIAL"

   Leonardo não conseguiu ler a palavra antes de "INDUSTRIAL".
   Estava em 12,5px com opacidade 0,94, no ponto mais estreito do
   domo. Aumentado, opaco, e deslocado para onde há mais área escura.
   ------------------------------------------------------------------ */
.signature-label {
  font-size: 13.5px;
  letter-spacing: .09em;
  opacity: 1;
  top: 14%;
  max-width: 82%;
}

@media (max-width: 720px) {
  .signature-label { font-size: 12px; top: 13%; }
}