/* SINSI — Estilos compartilhados da Central de Guias SSL/TLS */

:root {
  --navy-l:#02040c;
  --navy-card:#0d1229;
  --purple:#7c3aed;
  --purple-lite:#a78bfa;
  --purple-dim:rgba(124,58,237,.12);
  --purple-bd:rgba(124,58,237,.25);
  --cyan:#38bdf8;
  --g100:#f2f4fa;
  --g200:#d4d9ea;
  --g500:#8892a4;
  --border-card:rgba(255,255,255,.07);
  --amber:#d97706;
  --amber-bg:#1c1408;
  --amber-bd:rgba(245,158,11,.25);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:'Inter',sans-serif;
  background:var(--navy-l);
  color:var(--g100);
  overflow-x:hidden;
  line-height:1.7;
}

#bgCanvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}

/* ─── Hero ─────────────────────────────── */
.guide-hero{
  position:relative;z-index:1;
  padding:3rem 3.5rem 2.5rem;
  max-width:900px;
  margin:0 auto;
}

.guide-breadcrumb{
  font-size:.78rem;color:var(--g500);
  margin-bottom:1.2rem;
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
}
.guide-breadcrumb a{color:var(--g500);text-decoration:none;transition:color .2s}
.guide-breadcrumb a:hover{color:var(--purple-lite)}
.guide-breadcrumb span{opacity:.4}

.guide-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--purple-dim);
  border:1px solid var(--purple-bd);
  border-radius:100px;
  padding:.28rem .9rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;color:var(--purple-lite);
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:1.2rem;
}

.guide-hero h1{
  font-size:clamp(1.9rem,4vw,2.8rem);
  font-weight:800;line-height:1.18;
  color:#fff;margin-bottom:.85rem;
}

.guide-hero .guide-subtitle{
  font-size:1.05rem;color:var(--g500);
  line-height:1.65;margin-bottom:1.1rem;max-width:680px;
}

.guide-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;color:var(--g500);
  letter-spacing:.04em;opacity:.7;
}

/* ─── Banner LEGADO ─────────────────────── */
.guide-legacy-banner{
  position:relative;z-index:1;
  max-width:900px;margin:0 auto;
  padding:0 3.5rem 1.5rem;
}
.guide-legacy-banner-inner{
  background:#1c0a0a;border:1px solid #7f1d1d;
  border-radius:10px;padding:1.25rem 1.5rem;
  display:flex;gap:1rem;align-items:flex-start;
}
.guide-legacy-banner-inner .icon{font-size:1.3rem;flex-shrink:0;margin-top:.1rem}
.guide-legacy-banner-inner .title{font-weight:700;color:#fca5a5;margin-bottom:.35rem;font-size:.95rem}
.guide-legacy-banner-inner p{color:#f87171;font-size:.88rem;line-height:1.6}

/* ─── Conteúdo ──────────────────────────── */
.guide-content{
  position:relative;z-index:1;
  max-width:900px;margin:0 auto;
  padding:0 3.5rem 3rem;
}

.guide-intro{
  background:var(--navy-card);
  border:1px solid var(--border-card);
  border-radius:10px;
  padding:1.5rem 1.75rem;
  margin-bottom:2.5rem;
  color:var(--g200);font-size:.97rem;line-height:1.75;
}

.guide-section-title{
  font-size:1.15rem;font-weight:700;
  color:#fff;margin:2.5rem 0 1rem;
  padding-bottom:.6rem;
  border-bottom:1px solid rgba(124,58,237,.18);
}

/* Passos numerados */
.guide-steps{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}

.guide-step{
  background:var(--navy-card);
  border:1px solid var(--border-card);
  border-radius:10px;
  padding:1.25rem 1.5rem;
  display:flex;gap:1.1rem;align-items:flex-start;
  transition:border-color .2s;
}
.guide-step:hover{border-color:rgba(124,58,237,.3)}

.step-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--purple);
  color:#fff;font-weight:700;font-size:.82rem;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:.1rem;
}

.step-body{flex:1}
.step-body h3{
  font-size:1rem;font-weight:700;
  color:#fff;margin-bottom:.55rem;
}
.step-body p,.step-body li{
  font-size:.93rem;color:var(--g500);line-height:1.7;
}
.step-body strong{color:var(--g100)}

/* Blocos de código */
.code-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--purple-lite);
  display:block;margin-bottom:.4rem;
}

pre{
  background:#0f172a;
  border-left:3px solid var(--purple);
  border-radius:0 8px 8px 0;
  padding:1rem 1.25rem;
  overflow-x:auto;
  margin:.65rem 0 1rem;
}
pre code{
  font-family:'JetBrains Mono',monospace;
  font-size:.82rem;color:#a5b4fc;
  line-height:1.65;
}

/* Nota de atenção */
.guide-note{
  background:#1e1a2e;
  border-left:3px solid var(--purple);
  border-radius:0 8px 8px 0;
  padding:1rem 1.25rem;
  display:flex;gap:.75rem;align-items:flex-start;
  margin:.75rem 0;
}
.guide-note .note-icon{color:var(--purple-lite);font-size:1rem;flex-shrink:0;margin-top:.1rem}
.guide-note p{font-size:.9rem;color:var(--g500);line-height:1.65}
.guide-note strong{color:var(--g100)}

/* Nota crítica (senha, chave privada) */
.guide-warning{
  background:var(--amber-bg);
  border-left:3px solid var(--amber-bd);
  border-radius:0 8px 8px 0;
  padding:1rem 1.25rem;
  display:flex;gap:.75rem;align-items:flex-start;
  margin:.75rem 0;
}
.guide-warning .note-icon{color:var(--amber);font-size:1rem;flex-shrink:0;margin-top:.1rem}
.guide-warning p{font-size:.9rem;color:var(--amber);line-height:1.65}

/* Tabela de campos */
.guide-table{width:100%;border-collapse:collapse;margin:.75rem 0 1rem;font-size:.88rem}
.guide-table th{
  text-align:left;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;color:var(--purple-lite);
  padding:.6rem .9rem;border-bottom:1px solid rgba(124,58,237,.18);
}
.guide-table td{
  padding:.65rem .9rem;color:var(--g200);
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:top;line-height:1.55;
}
.guide-table tr:last-child td{border-bottom:none}
.guide-table td:first-child{
  font-family:'JetBrains Mono',monospace;font-size:.8rem;
  color:var(--purple-lite);white-space:nowrap;
}

/* ─── CTA de suporte ────────────────────── */
.guide-cta{
  position:relative;z-index:1;
  max-width:900px;margin:0 auto 3rem;
  padding:0 3.5rem;
}
.guide-cta-inner{
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(34,211,238,.06));
  border:1px solid rgba(124,58,237,.3);
  border-radius:14px;
  padding:2rem 2.25rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
}
.guide-cta-text h2{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:.35rem}
.guide-cta-text p{font-size:.9rem;color:var(--g500);line-height:1.6}
.guide-cta-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--purple);color:#fff;
  font-weight:700;font-size:.88rem;
  padding:.75rem 1.5rem;border-radius:8px;
  text-decoration:none;white-space:nowrap;
  transition:opacity .2s,transform .2s;
}
.guide-cta-btn:hover{opacity:.88;transform:translateY(-1px)}

/* ─── Footer ────────────────────────────── */
footer{
  background:rgba(1,2,10,.98);
  border-top:1px solid rgba(124,58,237,.18);
  padding:4rem 3.5rem 2rem;
  position:relative;z-index:1;
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;max-width:1280px;margin:0 auto 3rem;
}
.footer-logo-row{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.footer-logo-row img{height:24px}
.footer-logo-name{font-weight:800;font-size:1.1rem;color:#fff}
.footer-desc{font-size:.83rem;color:#94a3b8;line-height:1.74;margin-bottom:1rem;max-width:260px}
.footer-legal{font-size:.72rem;color:#64748b;line-height:1.68}
.footer-col-title{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;font-weight:600;color:#94a3b8;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem;
}
.footer-links{display:flex;flex-direction:column;gap:.55rem}
.footer-links a{font-size:.84rem;color:#cbd5e1;text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--purple-lite)}
.footer-bottom{
  max-width:1280px;margin:0 auto;
  border-top:1px solid rgba(255,255,255,.04);
  padding-top:1.5rem;
  display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:.5rem;align-items:center;
}
.footer-bottom p{font-size:.72rem;color:#64748b}
.footer-arch{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--purple-lite);letter-spacing:.07em;opacity:.65}

/* ─── Responsivo ────────────────────────── */
@media(max-width:768px){
  .guide-hero,.guide-legacy-banner,.guide-content,.guide-cta{padding-left:1.5rem;padding-right:1.5rem}
  footer{padding:3rem 1.5rem 1.5rem}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .guide-cta-inner{flex-direction:column;align-items:flex-start}
}