/* ==========================================================================
   Publicações Servmetal — tema claro (réplica RibeirãoNet, marca Servmetal)
   ========================================================================== */
:root {
  --brand: #2568A0;
  --brand-700: #1B4F7A;
  --brand-300: #3A8BC9;
  --grad: linear-gradient(135deg, #2568A0 0%, #3A8BC9 100%);

  --white: #ffffff;
  --bg: #FBFBFD;
  --bg-alt: #F5F5F7;
  --line: #E3E3E8;
  --gray-200: #D2D2D7;
  --gray-400: #86868B;
  --gray-600: #515154;
  --text: #1D1D1F;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-full: 980px;

  --sh-sm: 0 2px 8px rgba(0,0,0,.04);
  --sh-md: 0 6px 24px rgba(0,0,0,.06);
  --sh-lg: 0 20px 60px rgba(0,0,0,.08);

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 96px;

  --dur: .25s; --dur-slow: .35s; --dur-fast: .2s;
  --ease: cubic-bezier(.16,1,.3,1);
  --nav-h: 66px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s4); }
.narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--s4); }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(10,10,10,.92);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  border-bottom: 1px solid #242424;
}
.site-head__inner {
  height: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.site-head__logo { display: flex; align-items: center; gap: 10px; }
.site-head__logo img { height: 40px; width: auto; }
.site-head__nav { display: flex; align-items: center; gap: var(--s3); }
.site-head__link {
  color: #A0A0A0; font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}
.site-head__link:hover { color: #fff; }
.site-head__link--active { color: #fff; font-weight: 600; }
.site-head__link--btn {
  background: var(--grad); color: #fff; padding: 9px 20px;
  border-radius: var(--r-sm); letter-spacing: .06em;
}
.site-head__link--btn:hover { color: #fff; opacity: .92; }

.site-head__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 30px; height: 30px; background: none; border: 0; padding: 0; cursor: pointer;
}
.site-head__burger span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: all .3s var(--ease); }
.site-head__burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.site-head__burger.active span:nth-child(2) { opacity: 0; }
.site-head__burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.site-head__mobile {
  display: none; position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0;
  background: rgba(10,10,10,.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 99;
}
.site-head__mobile.open { display: flex; }
.site-head__mobile a { color: #F5F5F5; font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 12px 20px; }
.site-head__mobile a:hover { color: var(--brand-300); }

@media (max-width: 960px) {
  .site-head__nav { display: none; }
  .site-head__burger { display: flex; }
}

/* ---------- Footer ---------- */
.site-foot {
  border-top: 1px solid #242424;
  background: #0A0A0A;
  padding: var(--s5) 0;
  margin-top: var(--s7);
}
.site-foot__inner {
  max-width: 1120px; margin: 0 auto; padding: 0 var(--s4);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s3);
}
.site-foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-foot__brand img { height: 40px; width: auto; align-self: flex-start; }
.site-foot__copy { font-size: 13px; color: #8a8a8a; }
.site-foot__privacy { font-size: 13px; color: #8a8a8a; transition: color var(--dur-fast) var(--ease); }
.site-foot__privacy:hover { color: var(--brand-300); }

/* ========================================
   Rodapé unificado (home + publicações)
   ======================================== */
.sfooter { background: #0A0A0A; border-top: 1px solid #242424; color: #A0A0A0; }
.sfooter__wrap { max-width: 1200px; margin: 0 auto; padding: 48px 24px 28px; }
.sfooter__top { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; justify-content: space-between; }
.sfooter__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.sfooter__logo { height: 54px; width: auto; margin-bottom: 6px; }
.sfooter__name { color: #F5F5F5; font-weight: 600; font-size: 15px; margin: 0; }
.sfooter__addr { color: #8a8a8a; font-size: 14px; margin: 0; }
.sfooter__phone { display: inline-flex; align-items: center; gap: 8px; color: #F5F5F5; font-size: 15px; font-weight: 600; margin-top: 6px; text-decoration: none; transition: color .2s ease; }
.sfooter__phone svg { width: 17px; height: 17px; color: #3A8BC9; }
.sfooter__phone:hover { color: #3A8BC9; }
.sfooter__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.sfooter__social { display: flex; gap: 10px; }
.sfooter__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #1a1a1a; border: 1px solid #2a2a2a; color: #A0A0A0; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.sfooter__social a:hover { color: #fff; background: linear-gradient(135deg, #2568A0, #3A8BC9); border-color: transparent; }
.sfooter__social svg { width: 18px; height: 18px; }
.sfooter__bottom { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 22px; border-top: 1px solid #1d1d1d; }
.sfooter__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 13px; color: #777; }
.sfooter__privacy { color: #777; text-decoration: none; transition: color .2s ease; }
.sfooter__privacy:hover { color: #3A8BC9; }
.sfooter__credit { display: inline-flex; }
.sfooter__credit img { height: 24px; width: auto; opacity: .85; display: block; }
@media (max-width: 640px) {
  .sfooter__top { flex-direction: column; gap: 24px; }
  .sfooter__contact { align-items: flex-start; }
  .sfooter__bottom { flex-direction: column; align-items: flex-start; }
}
.site-foot__credit img { height: 24px; width: auto; opacity: .85; }

.site-foot__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.site-foot__phone {
  display: inline-flex; align-items: center; gap: 9px;
  color: #F5F5F5; font-size: 16px; font-weight: 600; letter-spacing: .01em;
  transition: color var(--dur-fast) var(--ease);
}
.site-foot__phone svg { width: 18px; height: 18px; color: var(--brand-300); flex: none; }
.site-foot__phone:hover { color: var(--brand-300); }
.site-foot__social { display: flex; align-items: center; gap: 10px; }
.site-foot__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #1a1a1a; border: 1px solid #2a2a2a; color: #A0A0A0;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-foot__social a:hover { color: #fff; background: var(--grad); border-color: transparent; }
.site-foot__social svg { width: 18px; height: 18px; }

@media (max-width: 720px) {
  .site-foot__inner { flex-direction: column; align-items: flex-start; gap: var(--s4); }
}

/* ---------- Section / Hero ---------- */
.section { padding: var(--s6) 0; }
.section--compact-top { padding-top: calc(var(--nav-h) + var(--s4)); }

.eyebrow-xl {
  color: var(--brand); font-weight: 600; font-size: 15px;
  letter-spacing: .02em; text-transform: uppercase; margin-bottom: var(--s2);
}
.h2 {
  font-size: clamp(28px, 3.5vw, 44px); font-weight: 600; line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 var(--s3); color: var(--text); text-wrap: balance;
}
.lead {
  font-size: clamp(17px, 1.6vw, 20px); color: var(--gray-600);
  line-height: 1.5; max-width: 640px; margin: 0;
}

/* ---------- Controles (busca + pills) ---------- */
.pubs-controls {
  display: flex; gap: var(--s3); margin: var(--s5) 0 var(--s4); flex-wrap: wrap;
}
.pubs-search {
  flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 13px 20px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pubs-search:focus-within {
  border-color: rgba(37,104,160,.4); box-shadow: 0 0 0 4px rgba(37,104,160,.08);
}
.pubs-search svg { width: 18px; height: 18px; color: var(--gray-400); flex-shrink: 0; }
.pubs-search input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-family: var(--font); font-size: 15px; color: var(--text);
}
.pubs-btn {
  border: 0; cursor: pointer; background: var(--grad); color: #fff;
  font-family: var(--font); font-weight: 600; font-size: 15px;
  padding: 13px 28px; border-radius: var(--r-full);
  box-shadow: 0 4px 14px rgba(37,104,160,.25);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pubs-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,104,160,.32); }

.pubs-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--s5); }
.pubs-pill {
  border: 1px solid var(--line); background: var(--white); color: var(--text);
  font-family: var(--font); font-size: 14px; font-weight: 500;
  padding: 9px 18px; border-radius: var(--r-full); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pubs-pill:hover { border-color: var(--brand-300); transform: translateY(-1px); }
.pubs-pill.active {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(37,104,160,.22);
}

/* ---------- Grid + Cards ---------- */
.pubs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }

.pub {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  color: inherit;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.pub:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

.pub-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0E1626; }
.pub-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub-cover-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pub-cover-fallback span {
  color: rgba(255,255,255,.92); font-weight: 700; font-size: 22px; letter-spacing: -.01em;
  padding: 0 18px; text-align: center; text-wrap: balance;
}
.pub-cover-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.18);
}
.pub-body { padding: var(--s3); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pub-meta { font-size: 12px; color: var(--gray-400); text-transform: uppercase; font-weight: 500; letter-spacing: .04em; }
.pub-title { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin: 0; color: var(--text); text-wrap: balance; }
.pub-excerpt { font-size: 14px; color: var(--gray-400); line-height: 1.5; margin: 0; flex: 1; }
.pub-readmore { margin-top: 6px; color: var(--brand); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 3px; }
.pub-readmore::after { content: "›"; font-size: 17px; line-height: 1; transition: transform var(--dur-fast) var(--ease); }
.pub:hover .pub-readmore::after { transform: translateX(3px); }

.pubs-empty { display: none; color: var(--gray-400); font-size: 16px; padding: var(--s5) 0; text-align: center; }

/* ---------- Artigo ---------- */
.article { padding: calc(var(--nav-h) + var(--s5)) 0 var(--s7); }
.article-back { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-400); font-size: 14px; font-weight: 500; margin-bottom: var(--s3); }
.article-back::before { content: "‹"; font-size: 18px; }
.article-back:hover { color: var(--brand); }
.article-cat { display: inline-block; background: rgba(37,104,160,.08); color: var(--brand); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-full); margin-bottom: var(--s3); }
.article-h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--text); margin: 0 0 var(--s3); text-wrap: balance; }
.article-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--gray-400); font-size: 14px; margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.article-meta strong { color: var(--gray-600); font-weight: 500; }
.article-meta .sep { color: var(--gray-200); }
.article-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-lg); margin-bottom: var(--s5); }
.article-lead { font-size: 22px; color: var(--gray-600); line-height: 1.45; letter-spacing: -.015em; margin: 0 0 var(--s5); font-weight: 400; font-style: italic; }

.prose { font-size: 18px; line-height: 1.65; color: var(--gray-600); }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { font-size: 30px; font-weight: 600; letter-spacing: -.022em; color: var(--text); margin: var(--s6) 0 var(--s3); line-height: 1.18; }
.prose h3 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; color: var(--text); margin: var(--s4) 0 6px; line-height: 1.25; }
.prose h4 { font-size: 18px; font-weight: 600; color: var(--text); margin: var(--s4) 0 6px; }
.prose ul, .prose ol { padding-left: 1.4em; margin-top: var(--s2); }
.prose li { margin-bottom: 8px; line-height: 1.6; }
.prose li::marker { color: var(--gray-200); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: var(--s5) 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-700); }
.prose img { border-radius: var(--r-md); margin: var(--s4) 0; }
.prose blockquote { margin: var(--s4) 0; padding: 6px 0 6px 20px; border-left: 3px solid var(--brand-300); color: var(--gray-600); font-style: italic; }
.prose code { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .9em; }
.prose pre { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3); overflow-x: auto; }

.article-cta { margin-top: var(--s6); padding: var(--s5); background: var(--grad); color: #fff; border-radius: var(--r-lg); text-align: center; }
.article-cta h3 { color: #fff; font-size: 24px; margin: 0 0 10px; letter-spacing: -.02em; font-weight: 600; }
.article-cta p { color: rgba(255,255,255,.9); font-size: 16px; margin: 0 auto var(--s3); max-width: 480px; }
.btn-light { display: inline-block; background: #fff; color: var(--brand); font-weight: 600; padding: 13px 28px; border-radius: var(--r-full); }
.btn-light:hover { background: rgba(255,255,255,.92); }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) { .pubs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .pubs-grid { grid-template-columns: 1fr; }
  .pubs-controls { flex-direction: column; align-items: stretch; }
  .pubs-btn { width: 100%; }
  .pubs-pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--s4)) var(--s5); padding: 0 var(--s4) 4px; scrollbar-width: none; }
  .pubs-pills::-webkit-scrollbar { display: none; }
  .site-head__nav { gap: var(--s3); }
}

/* ==========================================================================
   Painel Admin
   ========================================================================== */
.adm-body { background: var(--bg-alt); }
.adm-top { background: var(--white); border-bottom: 1px solid var(--line); }
.adm-top__inner { max-width: 1000px; margin: 0 auto; padding: 14px var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.adm-top__brand { font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.adm-top__brand span { color: var(--brand); }
.adm-top__links { display: flex; gap: var(--s3); align-items: center; font-size: 14px; }
.adm-wrap { max-width: 1000px; margin: 0 auto; padding: var(--s5) var(--s4); }
.adm-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); box-shadow: var(--sh-sm); }
.adm-h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 var(--s4); }
.adm-flash { padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: var(--s4); font-size: 14px; }
.adm-flash--ok { background: #E8F5EC; color: #1B7A3D; border: 1px solid #Bfe6cc; }
.adm-flash--err { background: #FCEBEC; color: #B3261E; border: 1px solid #F3C7C9; }

.adm-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.adm-table th, .adm-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.adm-table th { background: var(--bg-alt); color: var(--gray-600); font-weight: 600; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--r-full); }
.adm-badge--pub { background: rgba(37,104,160,.1); color: var(--brand); }
.adm-badge--draft { background: #FBEFD9; color: #9A6B1E; }

.adm-field { margin-bottom: var(--s4); }
.adm-field label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-600); margin-bottom: 6px; }
.adm-field input[type=text], .adm-field input[type=date], .adm-field input[type=password],
.adm-field textarea, .adm-field select {
  width: 100%; font-family: var(--font); font-size: 15px; color: var(--text);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 14px; outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.adm-field input:focus, .adm-field textarea:focus, .adm-field select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,104,160,.12);
}
.adm-field small { display: block; color: var(--gray-400); font-size: 12px; margin-top: 5px; }
.adm-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.adm-editor { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); }
.adm-editor .ql-container { min-height: 320px; font-family: var(--font); font-size: 16px; }
.adm-cover-preview { max-width: 280px; border-radius: var(--r-sm); border: 1px solid var(--line); margin-top: 10px; }

.adm-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 0; font-family: var(--font); font-weight: 600; font-size: 14px; padding: 11px 22px; border-radius: var(--r-full); background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(37,104,160,.25); transition: transform var(--dur) var(--ease); }
.adm-btn:hover { transform: translateY(-1px); }
.adm-btn--ghost { background: transparent; color: var(--gray-600); border: 1px solid var(--line); box-shadow: none; }
.adm-btn--ghost:hover { border-color: var(--gray-400); color: var(--text); }
.adm-btn--danger { background: #B3261E; box-shadow: none; }
.adm-actions { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.adm-link { color: var(--brand); font-weight: 500; }
.adm-link--danger { color: #B3261E; }

.adm-login { max-width: 380px; margin: 12vh auto; }
.adm-login .adm-h1 { text-align: center; }
.adm-login .adm-btn { width: 100%; justify-content: center; }

@media (max-width: 640px) { .adm-row { grid-template-columns: 1fr; } }