/* ============================================================
     Landing page do módulo de Gestão de Ativos.
     Carregada DEPOIS de landing.css, que já traz os componentes
     compartilhados (.reveal, .faq, .field, .btn, .hero-accent,
     .os-chip, .logo-*). Aqui ficam só as peças exclusivas da LP.
     ============================================================ */

  /* ---------- 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); }
  .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; }
  }

  /* breadcrumb */
  .crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #8a8a8a; }
  .crumb a { color: #8a8a8a; text-decoration: none; transition: color .15s ease; }
  .crumb a:hover { color: #D12B2B; }
  .crumb i { width: 13px; height: 13px; }
  .crumb b { color: #444; font-weight: 600; }

  /* 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; } }

  /* ---------- mockup da ficha do ativo (hero) ----------
     O padding do topo abre espaço para o chip flutuar ACIMA do card, sem
     cobrir o cabeçalho (nome e número de série do ativo). */
  .ativo-stage { position: relative; display: flex; justify-content: center; padding: 64px 0 34px; }
  .ativo-card {
    position: relative; z-index: 2; width: 100%; max-width: 372px;
    background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 40px 70px -28px rgba(17,17,17,.42), 0 12px 26px -14px rgba(17,17,17,.22), inset 0 0 0 1px rgba(17,17,17,.05);
    animation: cardfloat 7s ease-in-out infinite;
  }
  @keyframes cardfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
  .ac-head { background: linear-gradient(135deg, #E5403F, #C0201F); color: #fff; padding: 15px 18px; display: flex; align-items: center; gap: 11px; }
  .ac-head .ac-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; }
  .ac-head .ac-ico i { width: 19px; height: 19px; }
  .ac-head b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.15; }
  .ac-head small { display: block; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.78); letter-spacing: .04em; }
  .ac-body { padding: 16px 18px 18px; }
  .ac-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: #E9F6EF; color: #146B45; border: 1px solid rgba(31,138,91,.22);
    font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
  }
  .ac-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #1F8A5B; }
  .ac-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed #ECEAE6; font-size: 12.5px; }
  .ac-row:last-of-type { border-bottom: 0; }
  .ac-row span { color: #8a8a8a; }
  .ac-row b { color: #222; font-weight: 600; text-align: right; }
  .ac-tl { margin-top: 12px; padding-top: 14px; border-top: 1px solid #ECEAE6; }
  .ac-tl > p { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a3a3a3; margin: 0 0 10px; }
  .ac-ev { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: #444; padding-bottom: 9px; position: relative; }
  .ac-ev:last-child { padding-bottom: 0; }
  .ac-ev .st { flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #E9F6EF; color: #1F8A5B; margin-top: 1px; }
  .ac-ev .st i { width: 11px; height: 11px; }
  .ac-ev.warn .st { background: #FDF3E1; color: #B57A0B; }
  .ac-ev small { display: block; color: #9a9a9a; font-size: 11px; margin-top: 1px; }
  /* chips flutuantes ao redor da ficha */
  .ativo-chip {
    position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid rgba(17,17,17,.07); border-radius: 12px; padding: 8px 12px;
    box-shadow: 0 14px 30px -12px rgba(17,17,17,.32);
    animation: chipfloat 5.5s ease-in-out infinite;
  }
  .ativo-chip .ci { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
  .ativo-chip .ci i { width: 15px; height: 15px; }
  .ativo-chip b { display: block; font-family: 'Montserrat', sans-serif; font-size: 11.5px; color: #111; line-height: 1.15; }
  .ativo-chip small { display: block; font-size: 10.5px; color: #777; margin-top: 1px; }
  .ativo-chip-loc { top: 0; left: 4px; }
  .ativo-chip-loc .ci { background: #EAF3FB; color: #2A6FDB; }
  .ativo-chip-alert { bottom: 8px; right: -10px; animation-delay: 1.4s; }
  .ativo-chip-alert .ci { background: #FDF3E1; color: #B57A0B; }
  @media (max-width: 1023px) { .ativo-chip-alert { right: 0; } }
  /* No mobile os chips saem de cena — sem eles o respiro do topo não é necessário */
  @media (max-width: 420px) { .ativo-chip { display: none; } .ativo-stage { padding-top: 10px; } }
  @media (prefers-reduced-motion: reduce) { .ativo-card, .ativo-chip { animation: none; } }

  /* ---------- comparativo: item de estoque x ativo ---------- */
  .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-ativo { 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-ativo .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-ativo .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); } }

  /* ---------- ciclo de vida ---------- */
  .lifecycle { display: grid; gap: 12px; position: relative; }
  @media (min-width: 900px) { .lifecycle { grid-template-columns: repeat(5, 1fr); gap: 10px; } }
  .lc-node {
    background: #fff; border: 1px solid #E8E7E5; border-radius: 14px; padding: 18px 16px;
    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: 14.5px; color: #111; }
  .lc-node p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: #6b6b6b; }
  .lc-ok  { background: #E9F6EF; color: #146B45; }
  .lc-use { background: #EAF3FB; color: #2A6FDB; }
  .lc-mnt { background: #FDF3E1; color: #B57A0B; }
  .lc-off { background: #F1F0EE; color: #6b6b6b; }
  .lc-end { background: #FCEDED; color: #C0201F; }

  /* ---------- tipos de item ---------- */
  .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; }

  /* ---------- ficha do equipamento (documento público) ---------- */
  .ficha-stage { position: relative; display: flex; justify-content: center; }
  .ficha-doc {
    width: 100%; max-width: 330px; 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(9deg) rotateX(4deg);
  }
  .fd-url { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #F3F2F0; border-bottom: 1px solid #E8E7E5; font-size: 11px; color: #7a7a7a; }
  .fd-url i { flex: none; width: 13px; height: 13px; color: #1F8A5B; }
  .fd-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Space Mono', ui-monospace, monospace; }
  .fd-body { padding: 18px; }
  .fd-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: #111; letter-spacing: .02em; }
  .fd-sub { font-size: 11px; color: #9a9a9a; margin-top: 3px; }
  .fd-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .fd-cell { background: #FAF9F7; border: 1px solid #EFEDEA; border-radius: 8px; padding: 8px 10px; }
  .fd-cell small { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #a3a3a3; }
  .fd-cell b { display: block; font-size: 11.5px; color: #333; margin-top: 3px; }
  .fd-files { margin-top: 12px; display: grid; gap: 7px; }
  .fd-file { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #444; background: #fff; border: 1px solid #EFEDEA; border-radius: 8px; padding: 7px 9px; }
  .fd-file i { flex: none; width: 14px; height: 14px; color: #C0201F; }
  @media (max-width: 640px) { .ficha-doc { transform: none; } }