/* ================================================================
   SuporteGO — Site público v2 "Azul vivo"
   Moderno e colorido: azul vivo derivado do logo, cantos
   arredondados, fotos reais, faixas escuras com imagem.
   Carregado DEPOIS de styles.css nas páginas públicas.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700;800&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Azul vivo (do azul claro do logo, intensificado) */
  --brand:        #0077C2;   /* botões e links — 4,75:1 com branco */
  --brand-hover:  #005F92;
  --brand-vivid:  #0EA5E9;   /* faixas, gradientes, destaques grandes */
  --brand-soft:   #DDF0FA;
  --brand-wash:   #EFF8FD;
  --cyan:         #22C3EE;   /* detalhe sobre navy (6,8:1) */
  --navy:         #002B55;
  --navy-deep:    #001A36;
  --grad-brand:   linear-gradient(135deg, #0EA5E9 0%, #0077C2 100%);
  --grad-navy:    linear-gradient(135deg, #003B73 0%, #001A36 100%);

  /* Neutros */
  --bg:           #F5F9FC;
  --bg-white:     #FFFFFF;
  --border:       #DCE6EE;
  --border-light: #E8EFF5;
  --text-primary:   #10223A;
  --text-secondary: #43566C;
  --text-muted:     #5A6C80;

  /* Compatibilidade com styles.css */
  --primary:      var(--navy);
  --primary-dark: var(--navy-deep);
  --primary-light:var(--brand);
  --accent:       var(--brand);
  --accent-dark:  var(--brand-hover);
  --ink:          var(--navy);
  --ink-link:     var(--brand);
  --desk:         var(--bg);
  --paper:        #FFFFFF;
  --rule:         var(--border);
  --rule-soft:    var(--border-light);

  /* Tipografia */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --stretch-display: 100%;
  --stretch-sub:     100%;
  --text-h1: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  --text-h2: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  --text-h3: clamp(1.1rem, 1rem + .4vw, 1.3rem);

  /* Forma */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --shadow-sm:  0 1px 2px rgba(16,34,58,.06), 0 2px 8px rgba(16,34,58,.05);
  --shadow-md:  0 6px 18px -6px rgba(0,59,115,.18), 0 2px 6px rgba(16,34,58,.05);
  --shadow-lg:  0 18px 40px -14px rgba(0,59,115,.28);
  --shadow-xl:  0 28px 60px -20px rgba(0,43,85,.35);
}

body { background: #fff; color: var(--text-primary); }
h1, h2, h3, h4 { font-family: var(--font-display); font-stretch: 100%; letter-spacing: -0.01em; color: var(--navy); }
h1 { font-weight: 700; letter-spacing: -0.02em; }
h2 { font-weight: 700; }
h3, h4 { font-weight: 600; }
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
::selection { background: var(--brand-soft); color: var(--navy); }

/* ── Botões ───────────────────────────────────────────────── */
.btn { font-family: var(--font-display); font-weight: 600; border-radius: 999px; letter-spacing: .01em; }
.btn-primary, .btn-crm {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(0,119,194,.55);
}
.btn-primary:hover, .btn-crm:hover {
  background: var(--brand-hover); border-color: var(--brand-hover); color: #fff;
  transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0,95,146,.6);
}
.btn-outline { border-color: var(--brand); color: var(--brand); border-width: 2px; background: #fff; }
.btn-outline:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.btn-outline-white { border: 2px solid rgba(255,255,255,.7); color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--navy); border-color: #fff; }
.btn-white:hover { background: var(--brand-soft); color: var(--navy); transform: translateY(-2px); }

/* ── Barra superior de contato ────────────────────────────── */
.topbar { background: var(--navy); color: #CFE3F3; font-size: .85rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; }
.topbar-contatos { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a { color: #E6F2FB; display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; }
.topbar a:hover { color: var(--cyan); }
.topbar i { color: var(--cyan); }
.topbar .btn-crm { min-height: 32px; height: 32px; padding: 0 16px; font-size: .8rem; box-shadow: none; }
@media (max-width: 760px) {
  .topbar .topbar-email, .topbar .btn-crm { display: none; }
}

/* ── Cabeçalho ────────────────────────────────────────────── */
.site-header { background: #fff; border-bottom: 3px solid transparent; border-image: var(--grad-brand) 1; box-shadow: 0 4px 16px -10px rgba(16,34,58,.25); }
.logo-img-full { height: 46px; width: auto; display: block; }
.nav-link { font-family: var(--font-display); font-weight: 500; font-size: .9rem; color: var(--text-secondary); border-radius: 999px; padding: 8px 12px; }
.nav-link::after { display: none; }
.nav-link:hover { color: var(--brand); background: var(--brand-wash); }
.nav-link.active { color: var(--brand); background: var(--brand-wash); }
.hamburger:hover { background: var(--brand-wash); }
.hamburger span { background: var(--navy); }

/* ── Seções ───────────────────────────────────────────────── */
.section { padding-block: clamp(4rem, 7vw, 6.5rem); }
.sec-titulo { text-align: center; max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.sec-titulo h2 { margin-bottom: 14px; }
.sec-titulo h2::after {
  content: ''; display: block; width: 56px; height: 4px; border-radius: 4px;
  background: var(--grad-brand); margin: 16px auto 0;
}
.sec-titulo p { color: var(--text-secondary); font-size: 1.08rem; }
.sec-titulo.esq { text-align: left; margin-left: 0; }
.sec-titulo.esq h2::after { margin-left: 0; }

.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.anim .fade-up { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  html.anim .fade-up.visible { opacity: 1; transform: none; }
}

/* ── Rodapé ───────────────────────────────────────────────── */
.site-footer { background: var(--grad-navy); color: #C9DDEE; position: relative; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-brand); }
.footer-title { font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; border: 0; padding: 0; margin-bottom: 18px; }
.footer-links a { color: #C9DDEE; }
.footer-links a:hover { color: var(--cyan); }
.footer-contact li i { color: var(--cyan); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom p, .footer-bottom a { color: #C9DDEE !important; }

:focus-visible { outline: 3px solid var(--brand-vivid); outline-offset: 2px; }

/* ================================================================
   Páginas internas — topo em faixa azul e conteúdo arredondado
   (prefixo "body" para vencer os <style> de cada página)
   ================================================================ */
body .page-hero,
body .blog-hero,
body .post-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 360px at 90% 0%, rgba(34,195,238,.35), transparent 60%),
    var(--grad-navy);
  border: 0;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.75rem, 6vw, 4.25rem);
  color: #fff;
}
body .page-hero .container::before,
body .blog-hero .container::before,
body .post-hero .container::before { display: none; }
body .page-hero h1,
body .blog-hero h1,
body .post-hero h1 { color: #fff; max-width: 22ch; font-stretch: 100%; }
body .page-hero p,
body .blog-hero p { color: #D6E8F5; }
body .post-hero .post-meta-hero, body .post-hero .post-meta-hero i { color: #C9DDEE; }
body .page-hero .label-tag,
body .post-hero .label-tag,
body .blog-hero .eyebrow {
  display: inline-block; position: static;
  background: rgba(255,255,255,.12); color: var(--cyan);
  border: 1px solid rgba(34,195,238,.35);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: 0; text-transform: none;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}

/* Cabeçalhos de seção nas páginas internas */
body .section-header { border-top: 0; padding-top: 0; }
body .section-header > .label-tag,
body .section-header > div > .label-tag {
  display: inline-block; position: static; background: var(--brand-wash); color: var(--brand);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: 0; text-transform: none;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 12px;
}
body .section-title { font-stretch: 100%; }

/* Folhas de conteúdo: cantos arredondados, borda leve, sombra suave */
body .contact-info-cards,
body .contact-form-card,
body .downloads-grid,
body .downloads-sidebar,
body .faq-group,
body .legal-content,
body .aside-bloco,
body .post-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: #fff;
}
body .contact-map {
  background: var(--brand-wash);
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  gap: 16px;
  box-shadow: none;
}
body .contact-map i {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--brand); font-size: 1.25rem;
  box-shadow: var(--shadow-sm);
}
body .contact-map p { color: var(--text-secondary); line-height: 1.55; }
body .contact-map strong { color: var(--navy); font-family: var(--font-display); font-weight: 600; }
body .aside-cta { background: var(--grad-navy); border-color: transparent; }
body .info-icon, body .download-icon, body .post-author i { color: var(--brand); }
body .category-pill, body .sidebar-category, body .filter-tab, body .tag-chip { border-radius: 999px; }
body .category-pill.active, body .sidebar-category.active { background: var(--brand-wash); color: var(--brand); box-shadow: none; }
body .filter-tab.active, body .tag-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
body .form-control, body .blog-busca input { border-radius: 12px; border-color: #C4D4E1; }
body .form-control:focus, body .blog-busca input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
body .popular-num { border-radius: 50%; border: 0; background: var(--brand-wash); color: var(--brand); }
body .post-card .capa { background: var(--grad-brand); border-bottom: 0; }
body .blog-filtros { box-shadow: 0 6px 16px -12px rgba(16,34,58,.3); }
body .selo-destaque { border: 0; background: var(--brand); color: #fff; transform: none; border-radius: 999px; }
body .legal-content h2 { border-top-color: var(--border-light); }

/* ── Base de conhecimento / FAQ: artigos soltos e lateral tingida ── */
body .kb-posts-grid {
  display: grid; gap: 18px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
body .kb-posts-grid .post-card {
  padding: 26px 28px; border-bottom: 1px solid var(--border-light);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
body .kb-posts-grid .post-card:last-child { border-bottom: 1px solid var(--border-light); }
body .kb-posts-grid .post-card:hover { background: #fff; transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand-soft); }
body .kb-posts-grid .post-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
body .kb-posts-grid .post-card p { margin-bottom: 18px; }
body .kb-posts-grid .post-card-footer { padding-top: 14px; border-top: 1px dashed var(--border); }

body .kb-sidebar {
  background: var(--brand-wash);
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 22px;
}
body .kb-sidebar .sidebar-section > h3,
body .kb-sidebar .sidebar-section > h4 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display) !important; font-size: .8rem !important; font-weight: 700;
  letter-spacing: .06em; color: var(--navy) !important;
  border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 12px !important;
}
body .kb-sidebar .sidebar-section > h3::before,
body .kb-sidebar .sidebar-section > h4::before {
  content: ''; width: 18px; height: 3px; border-radius: 3px; background: var(--grad-brand); flex: none;
}
body .kb-sidebar .sidebar-section[style*="text-align:center"] { box-shadow: var(--shadow-sm); border-color: transparent !important; }
body .kb-sidebar .category-pill:hover { background: #fff; color: var(--brand); }
body .kb-sidebar .category-pill.active { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
body .kb-sidebar .popular-post { border-bottom-color: var(--brand-soft); }
body .kb-sidebar .popular-num { background: #fff; }
body .kb-sidebar .sidebar-title,
body .kb-sidebar .sidebar-section > div[style*="text-transform:uppercase"] {
  display: flex !important; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: .78rem !important; letter-spacing: .06em !important;
  color: var(--navy) !important; margin-bottom: 12px !important;
}
body .kb-sidebar .sidebar-title::before,
body .kb-sidebar .sidebar-section > div[style*="text-transform:uppercase"]::before {
  content: ''; width: 18px; height: 3px; border-radius: 3px; background: var(--grad-brand); flex: none;
}

/* ================================================================
   Menu integrado ao topo: transparente sobre a faixa azul, vira
   barra branca translúcida ao rolar (classe .rolado via main.js).
   Páginas com topo claro usam data-sempre-branco no .topo-fixo.
   ================================================================ */
.topo-fixo { position: fixed; top: 0; left: 0; right: 0; z-index: 120; }
.topo-fixo .site-header {
  position: relative; background: transparent; box-shadow: none !important;
  border-bottom: 1px solid transparent; border-image: none;
  transition: background .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, height .45s cubic-bezier(.16,1,.3,1), border-color .45s;
}
.topo-fixo .nav-link { color: rgba(255,255,255,.88); padding: 8px 9px; font-size: .86rem; transition: color .3s, background .3s; }
.topo-fixo .nav-link:hover, .topo-fixo .nav-link.active { color: #fff; background: rgba(255,255,255,.12); }
.topo-fixo .hamburger span { background: #fff; transition: background .3s, transform .25s, opacity .25s; }
.topo-fixo .hamburger:hover { background: rgba(255,255,255,.12); }
.topo-fixo .header-inner { gap: 16px; }
.topo-fixo .main-nav { gap: 2px; }
.topo-fixo .header-actions { gap: 10px; }
.topo-fixo .logo-img-full { height: 42px; width: auto; }
.logo-troca { position: relative; display: block; }
.logo-troca .logo-escuro { position: absolute; inset: 0; opacity: 0; }
.logo-troca img { transition: opacity .35s ease; }
.btn-crm-menu { height: 42px; padding: 0 20px; font-size: .88rem; box-shadow: none; }
.topo-fixo:not(.rolado) .btn-crm-menu { background: #fff; color: var(--navy); border-color: #fff; }
.topo-fixo:not(.rolado) .btn-crm-menu:hover { background: var(--brand-soft); color: var(--navy); }

.topo-fixo.rolado .site-header {
  height: 66px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(16,34,58,.08);
  box-shadow: 0 10px 30px -18px rgba(0,43,85,.45) !important;
}
.topo-fixo.rolado .nav-link { color: var(--text-secondary); }
.topo-fixo.rolado .nav-link:hover, .topo-fixo.rolado .nav-link.active { color: var(--brand); background: var(--brand-wash); }
.topo-fixo.rolado .hamburger span { background: var(--navy); }
.topo-fixo.rolado .hamburger:hover { background: var(--brand-wash); }
.topo-fixo.rolado .logo-claro { opacity: 0; }
.topo-fixo.rolado .logo-escuro { opacity: 1; }
.mobile-nav { top: 66px; }
@media (max-width: 1320px) { .topo-fixo .nav-link { padding: 8px 7px; font-size: .82rem; } .btn-crm-menu { padding: 0 14px; } }
@media (prefers-reduced-motion: reduce) {
  .topo-fixo .site-header, .logo-troca img, .topo-fixo .nav-link { transition: none; }
}

/* Topos das páginas internas passam por trás do menu fixo */
body .page-hero, body .blog-hero, body .post-hero { padding-top: calc(clamp(3rem, 7vw, 5rem) + 76px); }
body .artigo-hero { padding-top: calc(clamp(2.5rem, 5vw, 4rem) + 76px); }
body .blog-filtros { top: 66px; }