/* Gerado a partir dos artboards do Claude Design (Site Home / Site Instalacao).
   O layout mora no style inline de cada elemento, igual ao design; este arquivo
   cobre so o que o canvas resolvia em runtime: base, estados :hover e os poucos
   ajustes de layout que o artboard (largura fixa) nao precisava ter. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito Sans', sans-serif; color: #121A3A; background: #fff; -webkit-font-smoothing: antialiased; }
a { color: #0F5AC4; }
a:hover { color: #0F5AC4; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
[id] { scroll-margin-top: 96px; }

/* ---------- estados :hover vindos de style-hover ---------- */

.hv-1:hover, .hv-1:focus-visible { color:#fff !important; }
.hv-2:hover, .hv-2:focus-visible { background:#2E83F7 !important; }
.hv-3:hover, .hv-3:focus-visible { border-color:rgba(255,255,255,.4) !important; color:#fff !important; }
.hv-4:hover, .hv-4:focus-visible { border-color:#0F5AC4 !important; color:#0F5AC4 !important; }
.hv-5:hover, .hv-5:focus-visible { background:#1E2747 !important; }
.hv-6:hover, .hv-6:focus-visible { color:#0F5AC4 !important; }
.hv-7:hover, .hv-7:focus-visible { background:rgba(255,255,255,.16) !important; }

/* ---------- acordeao das duvidas ---------- */

.faq-q { transition: opacity .15s ease; }
.faq-q:hover { opacity: .7; }

/* ---------- layout abaixo da largura do artboard ---------- */

@media (max-width: 900px) {
  /* hero da home: copy e TV lado a lado -> empilhados */
  [style*="minmax(0,1fr) minmax(0,1.05fr)"] { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; }
  [style*="animation:fadeUp .6s ease-out .15s both"] { justify-content: center !important; }

  /* guia de instalacao: sumario lateral -> some pro topo, sem sticky */
  [style*="grid-template-columns:216px minmax(0,1fr)"] { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  [style*="position:sticky; top:110px"] { position: static !important; padding: 40px 0 0 !important; }
}

@media (max-width: 640px) {
  /* blocos que o design alinha em duas pontas passam a empilhar */
  [style*="justify-content:space-between"][style*="flex-wrap:wrap"] { row-gap: 28px; }
}