/* ============================================================
     Landing page do módulo de Ordem de Serviço.
     Carregada DEPOIS de landing.css, que já traz os componentes
     compartilhados (.reveal, .faq, .field, .btn, .hero-accent e todo
     o mockup do documento: .os-stage, .os-paper, .os-doc, .os-stamp,
     .os-chip). Aqui ficam as peças de layout da LP de módulo e as
     exclusivas desta página.
     ============================================================ */

  /* ---------- tipografia e grades próprias da LP ----------
     Ficam aqui (e não como utilitários arbitrários no HTML) para a página
     renderizar igual antes e depois do "npm run build:css". */
  .mod-h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.06; }
  .mod-h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.12; }
  .mod-h2-sm { font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.12; }
  .mod-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); }
  /* subtítulo de seção: maior que o texto de apoio, menor que o h2 */
  .mod-sub { font-size: clamp(1.2rem, 2.4vw, 1.65rem); line-height: 1.25; }
  .mod-cta-h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.05; }

  .trust-list { display: grid; gap: 10px 24px; max-width: 34rem; }
  @media (min-width: 640px) { .trust-list { grid-template-columns: repeat(3, 1fr); } }

  .gain-grid { display: grid; gap: 32px; }
  @media (min-width: 768px) { .gain-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; } }

  .steps { display: grid; gap: 32px; position: relative; }
  @media (min-width: 640px) {
    .steps { grid-template-columns: repeat(3, 1fr); }
    .steps::before { content: ''; position: absolute; top: 28px; left: 16.6%; right: 16.6%; border-top: 2px dashed #E8E7E5; }
  }

  /* CTA do hero: lado a lado quando cabe, empilhado quando não */
  .cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  @media (min-width: 640px) { .cta-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; } }

  /* ---------- palco do documento no hero ----------
     .os-stage (landing.css) posiciona selo e chips em absoluto, relativos ao
     próprio palco. Na home a coluna é mais estreita; aqui o hero é mais largo,
     então limitamos a largura para o conjunto continuar coeso. */
  .os-stage { width: 100%; max-width: 430px; margin-left: auto; margin-right: auto; }

  /* ---------- modalidades de assinatura ----------
     Três cards: empilhados no mobile, lado a lado quando há largura. Grade
     própria (e não utilitários) porque a coluna do bloco é estreita. */
  .sig-grid { display: grid; gap: 12px; }
  @media (min-width: 520px) { .sig-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }

  /* ---------- comparativo: documento padrão x OS por colaborador ---------- */
  .cmp { display: grid; gap: 18px; align-items: stretch; }
  @media (min-width: 860px) { .cmp { grid-template-columns: 1fr auto 1fr; gap: 12px; } }
  .cmp-panel { background: #fff; border: 1px solid #E8E7E5; border-radius: 16px; padding: 26px 24px; }
  .cmp-panel.is-os { border: 2px solid #D12B2B; box-shadow: 0 18px 44px -20px rgba(209,43,43,.30); }
  .cmp-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9a9a9a; }
  .cmp-panel.is-os .cmp-tag { color: #D12B2B; }
  .cmp-panel h3 { margin: 12px 0 0; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 19px; color: #111; }
  .cmp-panel > p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #666; }
  .cmp-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .cmp-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: #444; }
  .cmp-list i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #b9b7b3; }
  .cmp-panel.is-os .cmp-list i { color: #1F8A5B; }
  .cmp-arrow { display: flex; align-items: center; justify-content: center; color: #D12B2B; }
  .cmp-arrow span {
    width: 44px; height: 44px; border-radius: 50%; background: #FCEDED;
    display: flex; align-items: center; justify-content: center; border: 1px solid rgba(209,43,43,.18);
  }
  .cmp-arrow i { width: 20px; height: 20px; }
  @media (max-width: 859px) { .cmp-arrow i { transform: rotate(90deg); } }

  /* ---------- situações da OS ----------
     Mesma linguagem visual do ciclo de vida do módulo de Ativos, com três
     colunas em vez de cinco. */
  .lifecycle { display: grid; gap: 12px; position: relative; }
  @media (min-width: 860px) { .lifecycle { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
  .lc-node {
    background: #fff; border: 1px solid #E8E7E5; border-radius: 14px; padding: 20px 18px;
    position: relative; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .lc-node:hover { border-color: rgba(209,43,43,.35); transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(17,17,17,.28); }
  .lc-node .lc-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
  .lc-node .lc-ico i { width: 19px; height: 19px; }
  .lc-node h4 { margin: 13px 0 0; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: #111; }
  .lc-node p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: #6b6b6b; }
  .lc-wait { background: #FDF3E1; color: #B57A0B; }
  .lc-ok   { background: #E9F6EF; color: #146B45; }
  .lc-end  { background: #FCEDED; color: #C0201F; }

  /* ---------- tipos de seção ---------- */
  .mod-types { margin-top: 56px; padding-top: 40px; border-top: 1px solid #E8E7E5; text-align: center; }
  .mod-type-row { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .type-chip {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid #E8E7E5; border-radius: 30px; padding: 9px 16px 9px 11px;
    font-size: 13.5px; font-weight: 600; color: #333;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .type-chip:hover { border-color: rgba(209,43,43,.35); box-shadow: 0 8px 20px -14px rgba(17,17,17,.3); }
  .type-chip .tc-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #FCEDED; color: #D12B2B; display: flex; align-items: center; justify-content: center; }
  .type-chip .tc-ico i { width: 15px; height: 15px; }

  /* ---------- ganhos de gestão ---------- */
  .gain { display: flex; align-items: flex-start; gap: 14px; }
  .gain .g-ico {
    flex: none; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #D12B2B; background: linear-gradient(145deg, #FCEDED 0%, #F6DEDE 100%);
    box-shadow: inset 0 0 0 1px rgba(209,43,43,.14);
  }
  .gain .g-ico i { width: 19px; height: 19px; }
  .gain h4 { margin: 2px 0 0; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: #111; }
  .gain p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: #6b6b6b; }

  /* ---------- comprovante de assinatura (trilha de evidências) ---------- */
  .osev-stage { position: relative; display: flex; justify-content: center; }
  .osev-card {
    width: 100%; max-width: 350px; background: #fff; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(17,17,17,.06);
    box-shadow: 0 34px 60px -26px rgba(17,17,17,.42), 0 10px 22px -12px rgba(17,17,17,.2);
    transform: perspective(1300px) rotateY(-8deg) rotateX(4deg);
  }
  .osev-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; background: #F3F2F0; border-bottom: 1px solid #E8E7E5; }
  .osev-head i { flex: none; width: 15px; height: 15px; color: #1F8A5B; }
  .osev-head b { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 10.5px; letter-spacing: .1em; color: #555; }
  .osev-body { padding: 18px; }
  /* bloco de assinatura reproduzindo o rodapé do documento da OS */
  .osev-doc { border: 1px solid #EFEDEA; border-radius: 10px; padding: 16px 14px; text-align: center; }
  .osev-date { display: block; font-size: 10px; color: #8a8a8a; }
  .osev-face { display: flex; justify-content: center; margin-top: 10px; }
  /* o Lucide troca o <i> por <svg>, então o seletor precisa cobrir os dois */
  .osev-face i, .osev-face svg { width: 42px; height: 42px; color: #2b2b2b; stroke-width: 1.4; }
  .osev-mode { margin: 10px 0 0; font-size: 10.5px; line-height: 1.45; color: #444; }
  .osev-mode b { font-weight: 700; color: #222; }
  .osev-key { margin: 4px 0 0; font-size: 8.5px; letter-spacing: .02em; color: #9a9a9a; word-break: break-all; }
  .osev-rule { display: block; width: 78%; margin: 14px auto 0; border-top: 1px solid #C9C7C3; }
  .osev-name { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #C0201F; }
  /* linha de histórico, como aparece na listagem do sistema */
  .osev-rows { margin-top: 14px; display: grid; gap: 0; }
  .osev-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #ECEAE6; font-size: 11.5px; }
  .osev-row:last-child { border-bottom: 0; }
  .osev-row span { color: #8a8a8a; }
  .osev-row b { color: #222; font-weight: 600; text-align: right; }
  .osev-status {
    margin-top: 12px; display: inline-flex; align-items: center; gap: 7px;
    background: #E9F6EF; border: 1px solid rgba(31,138,91,.22); border-radius: 8px; padding: 8px 11px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #146B45;
  }
  .osev-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #1F8A5B; }
  @media (max-width: 640px) { .osev-card { transform: none; } }