/* ============================================================
   N Embalagens - Visual do site público (proposta "Preto e ouro, industrial")
   Carregado por último em cada página pública e no blog, então sobrescreve as
   fontes e o cabeçalho antigos de cada página. Inclui as fontes via <link>.
   ============================================================ */

/* ---------- tipografia ---------- */
* { font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
h1, h2, h3, h4, .section-title, .cat-title, .brand-f, .eyebrow {
  font-family: 'Archivo', 'Arial Black', system-ui, sans-serif;
  font-stretch: 112%;
}
h1, h2 { font-weight: 800; letter-spacing: -.005em; }
h3, h4 { font-weight: 700; }
.eyebrow { font-stretch: 100%; }

/* ---------- cabeçalho ---------- */
.sv-strip {
  background: #c8a84b; color: #14130f; text-align: center; padding: 7px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  font-family: 'IBM Plex Sans', sans-serif;
}
.sv-head { background: #0c0b09; border-bottom: 1px solid #2b281f; position: relative; z-index: 60; }
.sv-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.sv-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.sv-icon {
  width: 96px; aspect-ratio: 870 / 330; flex-shrink: 0; background: #c8a84b;
  -webkit-mask: url('logo_nembalagens.png') top / 100% auto no-repeat;
          mask: url('logo_nembalagens.png') top / 100% auto no-repeat;
}
.sv-brand-txt { display: flex; flex-direction: column; min-width: 0; }
.sv-name {
  font-family: 'Archivo', 'Arial Black', sans-serif; font-weight: 800; font-stretch: 125%;
  font-size: 26px; line-height: 1; color: #fff; white-space: nowrap; letter-spacing: .01em;
}
.sv-sub { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-top: 5px; color: #c8a84b; font-weight: 600; white-space: nowrap; }
.sv-right { display: flex; align-items: center; gap: 22px; }
.sv-nav { display: flex; align-items: center; gap: 22px; }
.sv-nav a { color: rgba(244, 239, 226, .9); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.sv-nav a:hover, .sv-nav a.active { color: #c8a84b; }
.sv-cta {
  background: #c8a84b; color: #14130f !important; padding: 11px 18px; border-radius: 4px;
  font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: background .15s;
}
.sv-cta:hover { background: #e0c068; }
.sv-sm { display: none; }
@media (max-width: 575px) { .sv-lg { display: none; } .sv-sm { display: inline; } }
.sv-burger { display: none; background: none; border: 1.5px solid #3a3629; border-radius: 6px; width: 42px; height: 40px; padding: 0; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.sv-burger span { display: block; width: 18px; height: 2px; background: #c8a84b; border-radius: 2px; }
.sv-burger:focus-visible, .sv-cta:focus-visible, .sv-nav a:focus-visible { outline: 2px solid #c8a84b; outline-offset: 3px; }

@media (max-width: 991px) {
  .sv-burger { display: flex; }
  .sv-right { gap: 10px; }
  .sv-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    gap: 0; background: #0c0b09; border-bottom: 1px solid #2b281f; padding: 6px 16px 14px;
  }
  .sv-head.open .sv-nav { display: flex; }
  .sv-nav a { padding: 13px 4px; border-bottom: 1px solid #1f1d16; font-size: 15px; }
  .sv-nav a:last-child { border-bottom: none; }
}
@media (max-width: 575px) {
  .sv-icon { width: 48px; }
  .sv-brand { gap: 9px; flex: 1 1 auto; }
  .sv-name { font-size: 15px; letter-spacing: 0; }
  .sv-sub { display: none; }
  .sv-in { padding-top: 12px; padding-bottom: 12px; gap: 8px; }
  .sv-right { flex-shrink: 0; gap: 8px; }
  .sv-cta { padding: 9px 11px; font-size: 12.5px; }
  .sv-burger { width: 38px; height: 38px; }
  .hero .btn-cta, .hero .btn-cta-outline { display: flex; width: 100%; justify-content: center; margin: 0 0 10px; text-align: center; }
}
@media (max-width: 360px) { .sv-name { font-size: 13.5px; } .sv-icon { width: 40px; } }

/* ---------- Home: apresentação em preto e ouro ---------- */
.hero { background: radial-gradient(ellipse at 75% 40%, #2a2517 0%, #14130f 62%); padding: 56px 0 46px; }
.hero .eyebrow { color: #c8a84b; }
.hero h1 {
  color: #f4efe2; text-transform: uppercase; font-weight: 800; font-stretch: 115%;
  font-size: clamp(28px, 3.3vw, 42px); line-height: 1.05; margin: 12px 0 16px;
}
.hero h1 .gold { color: #c8a84b; }
.hero p.lead-txt { color: #cfc8b6; }
.hero .hint { color: #9d9686; }
.hero .btn-cta { background: #c8a84b; color: #14130f; border-radius: 4px; }
.hero .btn-cta:hover { background: #e0c068; color: #14130f; }
.hero .btn-cta-outline { color: #f4efe2; border-color: rgba(244, 239, 226, .55); border-radius: 4px; }
.hero .btn-cta-outline:hover { border-color: #c8a84b; color: #c8a84b; }
.hero .hero-3d-wrap { box-shadow: 0 14px 50px rgba(0, 0, 0, .55); }
.hero .text-center a { color: #cfc8b6 !important; }
.hero .text-center a:hover { color: #c8a84b !important; }
@media (max-width: 991px) { .hero h1 { font-size: 28px; } .hero { padding: 36px 0 36px; } }

/* ---------- Home: últimos artigos do blog ---------- */
.blog-home { padding: 56px 0 60px; background: #fff; }
.blog-home-card { display: flex; flex-direction: column; gap: 8px; height: 100%; background: #faf6ee; border: 1px solid #ece4cf; border-radius: 8px; padding: 22px; text-decoration: none; color: #111; transition: transform .15s, border-color .15s; }
.blog-home-card:hover { transform: translateY(-3px); border-color: #c8a84b; color: #111; }
.blog-home-card .data { font-size: 12px; color: #8f897c; }
.blog-home-card h3 { font-size: 17px; line-height: 1.3; margin: 0; }
.blog-home-card p { font-size: 14px; color: #555; margin: 0; line-height: 1.6; }
.blog-home-card .ler { font-size: 13px; font-weight: 700; color: #8a6d1a; margin-top: auto; padding-top: 6px; }