/* ==========================================================
   GUIA DE INSTALAÇÃO — estende assets/css/style.css
   Usa as mesmas variáveis de cor/fonte do site (tema escuro).
   ========================================================== */

/* ---------- HERO ---------- */
.ig-hero{ padding:40px 0 0; }
.ig-hero-title{
  font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(1.9rem, 6vw, 3rem); letter-spacing:0.01em; line-height:1.05;
  margin-top:4px;
}
.ig-hero-title span{ color:var(--red-text); }
.ig-hero .container > p{ color:var(--text-muted); margin-top:14px; max-width:600px; font-size:1.02rem; }

/* ---------- QUICK-NAV CHIPS ---------- */
.device-nav{
  position:sticky; top:0; z-index:20;
  background:rgba(6,6,6,0.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  margin-top:24px;
}
.device-nav-inner{
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:12px 24px;
}
.device-nav-inner::-webkit-scrollbar{ display:none; }
.device-nav a{
  flex-shrink:0; display:inline-flex; align-items:center;
  padding:8px 14px; border-radius:999px; border:1px solid var(--border-2);
  color:var(--text-muted); font-size:0.78rem; font-weight:700; letter-spacing:0.4px;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.device-nav a:hover, .device-nav a:active{
  border-color:var(--red); color:var(--text); background:var(--red-glow);
}

/* ---------- MAIN WRAP ---------- */
.ig-main{ padding:40px 24px 88px; display:flex; flex-direction:column; gap:20px; max-width:820px; }
@media (max-width:640px){ .ig-main{ padding:28px 20px 56px; gap:16px; } }

/* ---------- INTRO BLOCK ---------- */
.intro-block{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px;
}
.intro-block h2{
  font-size:clamp(1.2rem, 3.2vw, 1.5rem); text-transform:uppercase; letter-spacing:0.3px;
  margin-bottom:8px;
}
.intro-block > p{ color:var(--text-muted); font-size:0.95rem; margin-bottom:16px; line-height:1.6; }

.credential-grid{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:14px; }
@media (min-width:560px){ .credential-grid{ grid-template-columns:1fr 1fr; } }
.credential-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px; }
.credential-card .cc-title{
  font-size:11px; font-weight:800; color:var(--red-text); text-transform:uppercase;
  letter-spacing:1px; margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.credential-card p{ font-size:0.85rem; color:var(--text-muted); font-weight:500; line-height:1.55; }

.info-box{
  display:flex; gap:10px; align-items:flex-start; border-radius:10px;
  padding:12px 14px; font-size:0.85rem; font-weight:500; line-height:1.6; margin-top:10px;
}
.info-box.amber{ background:rgba(251,191,36,0.08); color:#fbbf24; border:1px solid rgba(251,191,36,0.25); }
.info-box.green{ background:rgba(34,197,94,0.08); color:#4ade80; border:1px solid rgba(34,197,94,0.25); }
.info-box .ib-icon{ font-size:18px; flex-shrink:0; line-height:1.4; }
.info-box strong{ color:inherit; }

.panel-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:16px; padding:14px 18px; border-radius:999px;
  background:var(--red); color:#fff; font-weight:700; font-size:0.9rem;
  text-decoration:none; letter-spacing:0.3px; text-align:center;
  text-transform:uppercase;
}
.panel-cta:hover{ background:var(--red-dim); }

/* ---------- DEVICE BLOCK ---------- */
.device-block{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden;
}
.section-header{ background:var(--red); padding:14px 18px; display:flex; align-items:center; gap:10px; }
.section-header h2{
  color:#fff; font-size:clamp(0.92rem, 3vw, 1.1rem); font-weight:800;
  text-transform:uppercase; letter-spacing:0.5px; line-height:1.25;
}
.section-icon{ font-size:20px; flex-shrink:0; }
.section-sub{ padding:12px 18px 0; font-size:0.85rem; color:var(--text-muted); font-weight:500; line-height:1.55; }

/* ---------- STEPS ---------- */
.steps-wrap{ padding:16px 14px; display:flex; flex-direction:column; }
.step-unit{
  display:flex; flex-direction:row; align-items:flex-start; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--border);
}
.step-unit:first-child{ padding-top:2px; }
.step-unit:last-child{ border-bottom:none; padding-bottom:2px; }
.step-info-wrap{ flex:1; min-width:0; }
.step-label{
  font-size:11px; font-weight:800; color:var(--red-text); text-transform:uppercase;
  letter-spacing:1.2px; margin-bottom:4px; display:flex; align-items:center; gap:8px; line-height:1.4;
}
.step-label::before{
  content:attr(data-n); display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:var(--red); color:#fff;
  font-size:11px; font-weight:900; flex-shrink:0;
}
.step-info{ font-size:0.9rem; color:var(--text-muted); font-weight:500; line-height:1.65; }
.step-info ol, .step-info ul{ margin:8px 0 0 18px; }
.step-info li{ margin-bottom:4px; }
.step-info li::marker{ color:var(--red-text); font-weight:700; }
.step-tip{
  display:inline-block; margin-top:10px; font-size:0.78rem; font-weight:600;
  color:#fbbf24; background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.25);
  border-radius:6px; padding:6px 10px; line-height:1.5;
}

/* ---------- IMAGE ---------- */
.image-container{
  width:110px; flex-shrink:0; background:var(--surface-2); border-radius:8px;
  border:1px solid var(--border); overflow:hidden; align-self:flex-start;
}
.image-container img{ width:100%; height:auto; display:block; cursor:zoom-in; }
@media (min-width:480px){ .image-container{ width:150px; } }
@media (min-width:700px){ .image-container{ width:190px; } .step-unit{ gap:20px; } }

/* ---------- FAQ WRAP (reuses .faq-item from style.css) ---------- */
.ig-faq-wrap{ padding:6px 18px 4px; }
.ig-faq-wrap .faq-item{ padding:16px 0; }

/* ---------- BACK TO TOP ---------- */
.back-top{
  position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%;
  background:var(--surface); color:var(--text); border:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  text-decoration:none; box-shadow:0 4px 16px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none; transition:opacity .2s; z-index:500;
}
.back-top.show{ opacity:1; pointer-events:auto; }

/* ---------- LIGHTBOX ---------- */
.lb-overlay{
  display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.92);
  align-items:center; justify-content:center; padding:16px; cursor:zoom-out;
}
.lb-overlay.active{ display:flex; }
.lb-overlay img{
  max-width:100%; max-height:90dvh; border-radius:10px; box-shadow:0 8px 48px rgba(0,0,0,0.6);
  object-fit:contain; pointer-events:none;
}
.lb-close{
  position:fixed; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff;
  font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  z-index:10000; line-height:1;
}

@supports (padding:max(0px)){
  .ig-main{ padding-bottom:max(56px, env(safe-area-inset-bottom)); }
  .back-top{ bottom:max(16px, env(safe-area-inset-bottom)); }
}

/* ---------- STANDALONE PAGE (sem header/footer do site) ---------- */
.ig-bottom-cta{ margin-top:4px; }
.ig-footer{
  border-top:1px solid var(--border); padding:24px; text-align:center;
  color:var(--text-muted); font-size:0.82rem;
}