/* ============================================================
   OVERBUILD — pillnav.css
   NAV CANÔNICA DO SITE (v4 · pill flutuante de vidro).
   MESMA em index.html e /blog/. Estrutura/classes idênticas nas
   duas páginas — só os href mudam de contexto. Namespace .pnav
   pra nunca colidir com o style.css/blog.css.
   Marca: cream #F5EDD8 · orange #F06818 · ink #0D0B09.
   ============================================================ */

.pnav, .pnav * { box-sizing: border-box; }

/* wrapper: flutua sobre o conteúdo (fixed), não empurra o layout */
.pnav {
  position: fixed;
  inset: 14px 0 auto 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 0 clamp(0.9rem, 4vw, 1.5rem);
  pointer-events: none;                 /* só a ilha capta ponteiro */
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pn-cream: #F5EDD8;
  --pn-orange: #F06818;
  --pn-ink: #0D0B09;
  --pn-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.pnav-island { position: relative; width: 100%; max-width: 62rem; pointer-events: auto; }

/* halo quente vazando por baixo do vidro */
.pnav-halo {
  position: absolute; inset: -24px -40px auto -40px; height: 120px;
  z-index: -1; opacity: .7; filter: blur(34px); pointer-events: none;
  background: radial-gradient(60% 120% at 50% 0%, rgba(240,104,24,0.18), transparent 70%);
  transition: opacity .5s var(--pn-ease);
}
.pnav.is-condensed .pnav-halo { opacity: .5; }

/* ── a ilha (pill) ── */
.pnav-bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(245,237,216,0.12);
  background: linear-gradient(180deg, rgba(28,24,20,0.82) 0%, rgba(16,14,12,0.80) 100%);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  padding: 9px 8px 9px 14px;
  box-shadow: inset 0 1px 0 0 rgba(245,237,216,0.08), 0 26px 60px -26px rgba(0,0,0,0.9);
  transition: padding .52s var(--pn-ease), box-shadow .52s var(--pn-ease);
  overflow: hidden;
}
.pnav.is-condensed .pnav-bar {
  padding: 7px 8px 7px 12px;
  box-shadow: inset 0 1px 0 0 rgba(245,237,216,0.10), 0 18px 44px -22px rgba(0,0,0,0.95), 0 0 0 1px rgba(240,104,24,0.06);
}

/* aresta especular no topo do vidro */
.pnav-spec {
  position: absolute; left: 32px; right: 32px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(245,237,216,0.35), transparent);
}

/* ── marca ── */
.pnav-brand-wrap { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pnav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 6px 4px 4px; border-radius: 999px;
  color: var(--pn-cream); text-decoration: none;
}
.pnav-logo {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 28px; width: 28px; border-radius: 9px;
  background: rgba(240,104,24,0.12);
  box-shadow: inset 0 0 0 1px rgba(240,104,24,0.25);
  transition: background .5s var(--pn-ease);
}
.pnav-brand:hover .pnav-logo { background: rgba(240,104,24,0.2); }
.pnav-dot { position: relative; height: 7px; width: 7px; border-radius: 999px; background: var(--pn-orange); }
.pnav-ping {
  position: absolute; height: 7px; width: 7px; border-radius: 999px; background: var(--pn-orange);
  opacity: .4; animation: pnav-ping 2.4s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes pnav-ping { 0% { transform: scale(1); opacity: .45; } 75%,100% { transform: scale(2.4); opacity: 0; } }
.pnav-word { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--pn-cream); }
/* logo real: wordmark OVERBUILD (cream+orange). Altura fixa, largura auto → sem distorção. */
.pnav-logo-img { display: block; height: 18px; width: auto; }
.pnav-div { display: none; height: 20px; width: 1px; background: rgba(245,237,216,0.10); }

/* ── links ── */
.pnav-list {
  position: relative; display: none; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.pnav-puck {
  position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 999px;
  background: rgba(245,237,216,0.07);
  box-shadow: inset 0 0 0 1px rgba(245,237,216,0.06);
  opacity: 0; pointer-events: none;
  transition: left .48s var(--pn-ease), width .48s var(--pn-ease), opacity .3s ease;
}
.pnav-link {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em; text-decoration: none;
  color: rgba(245,237,216,0.52);
  transition: color .3s ease; white-space: nowrap;
}
.pnav-link:hover, .pnav-link.is-active { color: var(--pn-cream); }
.pnav-caret { transition: transform .42s var(--pn-ease); opacity: .5; }
.pnav-has-panel.is-open .pnav-caret { transform: rotate(180deg); }
.pnav-adot {
  position: absolute; left: 50%; bottom: -3px; height: 3px; width: 3px; border-radius: 999px;
  background: var(--pn-orange); transform: translateX(-50%);
  opacity: 0; transition: opacity .32s ease;
}
.pnav-link.is-active .pnav-adot { opacity: 1; }

/* ── direita: CTA (único botão) + burger ── */
.pnav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ═══════════ CTA "Orçamento" — REDESENHADO ═══════════
   Joia âmbar: fundo em gradiente com fundição interna, aro quente,
   brilho especular no topo, faísca cream pulsante à esquerda e seta
   que avança. Sem o sheen diagonal antigo (o cliente achou horrível). */
.pnav-cta {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 650; letter-spacing: -0.006em; text-decoration: none;
  /* rótulo e seta em BRANCO (ordem do cliente, print 22.17). Era o marrom
     #2a1206. Os dois herdam daqui via currentColor — a seta é um SVG com
     stroke="currentColor" —, então esta linha só resolve os dois. */
  color: #fff;
  background:
    linear-gradient(180deg, #FF8B3E 0%, #F26D1B 52%, #DE5B0C 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255,246,235,0.55),
    inset 0 -1px 0 0 rgba(120,44,0,0.28),
    0 1px 0 0 rgba(255,255,255,0.06),
    0 8px 20px -8px rgba(240,104,24,0.72);
  isolation: isolate; overflow: hidden;
  transition: transform .4s var(--pn-ease), box-shadow .45s var(--pn-ease), filter .4s ease, padding .52s var(--pn-ease);
}
.pnav.is-condensed .pnav-cta { padding-top: 7px; padding-bottom: 7px; }
/* domo especular superior */
.pnav-cta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 52%; z-index: 0; pointer-events: none;
  border-radius: 999px 999px 40% 40%/999px 999px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 100%);
  opacity: .8;
}
/* aro quente externo que respira no hover */
.pnav-cta::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 999px; pointer-events: none;
  background: radial-gradient(120% 140% at 50% 0%, rgba(255,180,120,0.55), transparent 60%);
  opacity: 0; transition: opacity .45s var(--pn-ease);
}
.pnav-cta:hover {
  transform: translateY(-1px);
  filter: saturate(1.06) brightness(1.03);
  box-shadow:
    inset 0 1px 0 0 rgba(255,246,235,0.6),
    inset 0 -1px 0 0 rgba(120,44,0,0.3),
    0 12px 30px -8px rgba(240,104,24,0.9),
    0 0 0 1px rgba(255,196,140,0.35);
}
.pnav-cta:hover::after { opacity: 1; }
.pnav-cta:active { transform: translateY(0); filter: saturate(1.04) brightness(0.99); }
/* FAÍSCA REMOVIDA (ordem do cliente — "remove esse pontinho desse botão",
   print 21.38.56). Era o ponto cream pulsante à esquerda do rótulo. O
   elemento continua no HTML das 3 páginas mas some por aqui: um `display:
   none` numa regra só é mais seguro que caçar a tag em cada arquivo, e
   se um HTML antigo ficar em cache o ponto não reaparece. O gap do
   flex encolhe junto, senão sobra um vão à esquerda do rótulo. */
.pnav-cta-spark { display: none !important; }
.pnav-cta { gap: 7px; padding-left: 15px; }
.pnav-cta-label { position: relative; z-index: 1; }
.pnav-cta-arrow { position: relative; z-index: 1; display: inline-flex; transition: transform .5s var(--pn-ease); }
.pnav-cta:hover .pnav-cta-arrow { transform: translate(2px, -2px); }

/* ═══════════ MOBILE · a barra é SEMPRE só marca + ⋯ ═══════════
   ORDEM DO CLIENTE (complemento do print 22.17): o CTA "Orçamento" não
   pode aparecer no mobile EM MOMENTO NENHUM — nem com o menu fechado,
   nem aberto. Antes eu tinha escondido só no estado aberto; agora sai
   da árvore inteira em ≤768px.

   `display: none` e não `visibility`/opacidade: assim ele não ocupa
   largura na ilha nem entra na ordem de tabulação, e em 390px sobra
   espaço de verdade pra marca + gatilho (era o aperto que o comentário
   histórico do style.css já tinha medido).

   O Orçamento continua a um toque no mobile: o item "Contato" do menu
   kinetic leva pra #contato. ≥769px o botão fica intocado. */
@media (max-width: 768px) {
  /* ESCOPADO EM `.pnav` DE PROPÓSITO. O overlay kinetic (#nav-overlay) é
     IRMÃO do pill, não filho — e agora ele tem o SEU próprio .pnav-cta
     dentro (ordem do cliente: o botão existe só com o menu aberto). Um
     seletor solto `.pnav-cta` aqui apagaria os dois de uma vez. */
  .pnav .pnav-cta { display: none !important; }
}

/* burger (mobile) */
.pnav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; width: 34px; border-radius: 999px; flex: none;
  color: rgba(245,237,216,0.72); background: transparent; cursor: pointer;
  border: 1px solid rgba(245,237,216,0.12);
  transition: color .3s ease, background .3s ease;
}
.pnav-burger:hover { color: var(--pn-cream); background: rgba(245,237,216,0.05); }
.pnav-burger svg { display: block; }
.pnav-burger .pnav-x { display: none; }
.pnav.is-mobile-open .pnav-burger .pnav-x { display: block; }
.pnav.is-mobile-open .pnav-burger .pnav-menu { display: none; }

/* linha de progresso do scroll na borda inferior do pill */
.pnav-progress {
  position: absolute; left: 50%; bottom: 0; height: 1px; transform: translateX(-50%);
  width: 0%; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: linear-gradient(90deg, transparent, var(--pn-orange) 35%, var(--pn-orange) 65%, transparent);
}

/* ── dropdown Soluções ── */
.pnav-panel-wrap {
  position: absolute; top: 100%; z-index: 80; padding-top: 12px;
  left: 0; transform: translateX(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity .38s var(--pn-ease);
  display: none;
}
.pnav-panel-wrap.is-open { opacity: 1; pointer-events: auto; }
.pnav-panel {
  width: 540px; max-width: min(540px, 92vw); padding: 8px; border-radius: 26px;
  border: 1px solid rgba(245,237,216,0.12);
  background: linear-gradient(180deg, rgba(28,24,20,0.94) 0%, rgba(14,12,10,0.92) 100%);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 0 rgba(245,237,216,0.08), 0 34px 70px -30px rgba(0,0,0,0.95);
  transform: translateY(-10px) scale(0.97); transform-origin: 50% 0;
  transition: transform .48s var(--pn-ease);
}
.pnav-panel-wrap.is-open .pnav-panel { transform: translateY(0) scale(1); }
.pnav-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pnav-panel-link {
  display: block; padding: 12px 14px; border-radius: 18px; text-decoration: none;
  transition: background-color .3s ease;
}
.pnav-panel-link:hover { background: rgba(245,237,216,0.05); }
.pnav-panel-link .t { display: flex; align-items: center; gap: 8px; }
.pnav-panel-link .t i {
  height: 4px; width: 4px; border-radius: 999px; background: var(--pn-orange);
  opacity: .4; transition: opacity .3s ease;
}
.pnav-panel-link:hover .t i { opacity: 1; }
.pnav-panel-link .t span { font-size: 13px; font-weight: 500; color: var(--pn-cream); }
.pnav-panel-link .d { display: block; margin-top: 4px; padding-left: 12px; font-size: 11.5px; line-height: 1.5; color: rgba(245,237,216,0.4); }
.pnav-panel-foot {
  margin-top: 4px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border-radius: 18px; padding: 12px 16px; background: rgba(245,237,216,0.03);
}
.pnav-panel-foot span { font-size: 11.5px; color: rgba(245,237,216,0.45); }
.pnav-panel-foot a { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--pn-orange); text-decoration: none; }

/* ── folha mobile ── */
.pnav-mobile {
  position: absolute; inset: 100% 0 auto 0; padding-top: 12px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .34s var(--pn-ease), transform .42s var(--pn-ease);
}
.pnav.is-mobile-open .pnav-mobile { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pnav-mobile-in {
  border-radius: 26px; padding: 8px;
  border: 1px solid rgba(245,237,216,0.12); background: rgba(20,17,14,0.94);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.95);
}
.pnav-mobile-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 18px; text-decoration: none;
  font-size: 14px; color: rgba(245,237,216,0.72);
  transition: color .3s ease, background .3s ease;
}
.pnav-mobile-link:hover, .pnav-mobile-link.is-active { color: var(--pn-cream); background: rgba(245,237,216,0.05); }
.pnav-mobile-link svg { opacity: .4; }

/* ── breakpoints — alinhados ao nav-split do site (≤768 = kinetic overlay) ──
   Burger só aparece ≤768px, exatamente onde o overlay full-screen pode abrir
   (o overlay é forçado a display:none ≥769 por style.css/blog.css). */
@media (min-width: 769px) {
  .pnav-list { display: flex; }
  .pnav-div { display: block; }
  .pnav-burger { display: none; }
  .pnav-panel-wrap { display: block; }
}
@media (max-width: 480px) {
  .pnav-logo-img { height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pnav-ping, .pnav-cta-spark::after { animation: none !important; }
  .pnav-bar, .pnav-cta, .pnav-puck, .pnav-panel, .pnav-mobile { transition: none !important; }
}