html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
  body { background:#fff; color:#0B1420; -webkit-font-smoothing:antialiased; }

  /* ---------- Header ---------- */
  #site-header { background: linear-gradient(to bottom, rgba(2,14,30,.92), rgba(2,14,30,0)); }
  #site-header.is-solid {
    background:#020E1E; backdrop-filter: blur(6px);
    box-shadow: 0 12px 30px -18px rgba(0,0,0,.9);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  /* ---------- Marca ---------- */
  .brand-sub { font-family:Montserrat, sans-serif; font-weight:700; letter-spacing:.34em; }

  /* ---------- Malha técnica (blueprint) ---------- */
  .blueprint {
    background-image:
      linear-gradient(rgba(226,169,30,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(226,169,30,.07) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
  }
  .blueprint-light {
    background-image:
      linear-gradient(rgba(2,14,30,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(2,14,30,.05) 1px, transparent 1px);
    background-size: 32px 32px, 32px 32px;
  }
  /* Faixa diagonal de advertência, como nos guindastes */
  .hazard { background-image: repeating-linear-gradient(135deg, #E2A91E 0 14px, #020E1E 14px 28px); }

  /* ---------- Animações de entrada ---------- */
  .reveal { opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
  .reveal.is-visible { opacity:1; transform:none; }
  .reveal-delay-1 { transition-delay:.08s } .reveal-delay-2 { transition-delay:.16s }
  .reveal-delay-3 { transition-delay:.24s } .reveal-delay-4 { transition-delay:.32s }

  /* ---------- Botões ---------- */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700;
         letter-spacing:.02em; border-radius:2px; transition: transform .18s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
         min-height:48px; padding:.75rem 1.6rem; cursor:pointer; }
  .btn:active { transform: translateY(1px) scale(.99); }
  .btn-primary { background:#E2A91E; color:#020E1E; box-shadow:0 10px 24px -12px rgba(226,169,30,.9); }
  .btn-primary:hover { background:#F2C14E; box-shadow:0 14px 30px -12px rgba(226,169,30,.95); transform:translateY(-2px); }
  .btn-ghost { border:2px solid rgba(255,255,255,.35); color:#fff; }
  .btn-ghost:hover { border-color:#E2A91E; color:#E2A91E; background:rgba(226,169,30,.08); transform:translateY(-2px); }
  .btn-dark { background:#020E1E; color:#fff; }
  .btn-dark:hover { background:#0D2440; transform:translateY(-2px); }
  .btn-outline-dark { border:2px solid #020E1E; color:#020E1E; }
  .btn-outline-dark:hover { background:#020E1E; color:#fff; transform:translateY(-2px); }

  :where(a,button,input,select,textarea,[tabindex]):focus-visible {
    outline:3px solid #E2A91E; outline-offset:3px; border-radius:2px;
  }

  /* ---------- Cards ---------- */
  .card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(2,14,30,.55); border-color:#E2A91E; }
  .card:hover .card-img { transform: scale(1.05); }
  .card-img { transition: transform .4s cubic-bezier(.16,.84,.44,1); }

  /* ---------- Chips de filtro ---------- */
  .chip[aria-pressed="true"] { background:#020E1E; color:#fff; border-color:#020E1E; }
  .chip[aria-pressed="true"] .chip-count { background:#E2A91E; color:#020E1E; }

  .spec-row:nth-child(odd) { background:#F5F7FA; }
  .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* ---------- Formulário ---------- */
  .field { width:100%; min-height:48px; border:1px solid #D8DFE8; background:#fff; padding:.7rem .9rem;
           border-radius:2px; font-size:16px; transition: border-color .2s, box-shadow .2s; }
  .field:focus { border-color:#020E1E; box-shadow:0 0 0 3px rgba(2,14,30,.08); outline:none; }
  .field[aria-invalid="true"] { border-color:#C0322B; background:#FEF6F5; }
  .err { color:#9E241D; font-weight:600; font-size:.875rem; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .reveal { opacity:1; transform:none; }
  }

  /* ---------- Dúvidas frequentes ---------- */
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary { list-style: none; }
  .faq summary:hover { background: #F5F7FA; }
  .faq[open] summary { background: #F5F7FA; }
  .faq[open] .faq-icone { transform: rotate(180deg); }

  /* Cards escondidos pelo filtro: precisa de !important porque a utilitária
     .flex do Tailwind vence o [hidden] do preflight (mesma especificidade). */
  [hidden] { display: none !important; }
