/* =====================================================================
   KNZ Comercial — identidade visual
   Camada carregada por último: troca fontes, cores, degradês e componentes
   sem mexer na lógica do site. Para ajustar, comece pelas variáveis.
   ===================================================================== */

/* ---------- Fontes (hospedadas no próprio site) ---------- */
@font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/red-hat-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/red-hat-display-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/red-hat-display-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../fonts/red-hat-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/red-hat-text-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/red-hat-text-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/red-hat-text-latin-600-normal.woff2") format("woff2"); }

/* ---------- Cores, degradês e medidas ---------- */
:root {
  --ink: #0B2351;          /* azul-marinho KNZ: textos, títulos e botões */
  --night: #050C1C;        /* azul quase preto: cabeçalho e fundos profundos */
  --signal: #1A56B0;       /* azul de ação: links e destaques */
  --glow: #7FA8EE;         /* azul claro sobre fundo escuro */
  --muted: #546079;        /* textos de apoio */
  --line: #D8DEE8;         /* fios e bordas */
  --soft: #EEF2F7;         /* fundo das faixas claras */
  --paper: #FFFFFF;
  --radius: 10px;
  --radius-btn: 8px;
  --grad-night: linear-gradient(100deg, #03070F 0%, #071126 38%, #0A1A3A 72%, #0E2752 100%);
  --grad-deep: radial-gradient(120% 140% at 88% 0%, rgba(46,104,206,.38) 0%, rgba(46,104,206,0) 52%), linear-gradient(155deg, #050C1C 0%, #0A1B3D 48%, #0F2C66 100%);
  --grad-btn: linear-gradient(180deg, #16397A 0%, #0B2351 100%);
  --grad-btn-hover: linear-gradient(180deg, #1D4FA3 0%, #12408E 100%);
  --grad-mist: linear-gradient(180deg, #F6F8FC 0%, #EEF2F7 100%);
  --font-display: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Red Hat Text", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Texto ---------- */
html body { font-family: var(--font-body); font-size: 16.5px; line-height: 1.62; color: var(--ink); font-feature-settings: "kern", "lnum"; text-rendering: optimizeLegibility; }
html h1, html h2, html h3, html h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; color: inherit; text-wrap: balance; }
html p { text-wrap: pretty; }
html ::selection { background: #C9DAF5; color: var(--ink); }
html :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* Rótulos acima dos títulos: texto normal, sem caixa-alta espaçada */
html [class*="kicker"], html .cc-text small, html .tq-body small, html .knz-soc small,
html .pform-kicker, html .pvideo-kicker {
  text-transform: none !important; letter-spacing: 0 !important;
  font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 500 !important;
}
html .story-kicker::before, html .contact-kicker::before, html .bx-kicker::before,
html .as-kicker::before, html .tq-kicker::before { display: none !important; }

/* ---------- Botões ---------- */
html .btn { min-height: 46px; padding: 0 22px; border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; font-size: 15.5px; letter-spacing: 0; box-shadow: none; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
html .btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid) { background: var(--grad-btn); border-color: #0B2351; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(5,12,28,.18); }
html .btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid):hover { background: var(--grad-btn-hover); border-color: #12408E; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 18px rgba(18,64,142,.28); }
html .btn.ghost { background: #fff; color: var(--ink); border: 1px solid #B9C4D6; box-shadow: none; }
html .btn.ghost:hover { border-color: var(--ink); background: #F4F7FB; }
html .btn.small { min-height: 38px; padding: 0 14px; font-size: 14.5px; }
html .btn.danger { background: transparent; }
html .btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
html .chip, html .sc-tab, html .like-btn, html .menu-toggle { border-radius: var(--radius-btn); }
/* Conta no cabeçalho: só o círculo com as iniciais (maior) e o nome, sem moldura */
html .site-header .avatar-btn { border: 0; background: transparent; box-shadow: none; padding: 0; gap: 10px; border-radius: 999px; }
html .site-header .avatar-btn:hover .avatar { box-shadow: 0 0 0 3px rgba(26,86,176,.18); }
html .site-header .avatar-btn:focus-visible { outline: 2px solid #1A56B0; outline-offset: 3px; }
html .site-header .avatar-name { display: none; }
html .site-header .avatar { width: 42px; height: 42px; font-size: 14.5px; letter-spacing: .02em; background: linear-gradient(150deg, #16397A, #0B2351); transition: box-shadow .2s; }
html .chip { font-weight: 500; }
html .chip[aria-pressed="true"], html .sc-tab[aria-selected="true"] { background: var(--grad-btn); border-color: var(--ink); color: #fff; }

/* ---------- Faixa superior escura (texto branco) e barra do menu branca ---------- */
html .topbar { background: #03070F; color: #fff; font-size: 13.5px; border-bottom: 1px solid rgba(127,168,238,.10); }
html .topbar a, html .topbar-region { color: #fff; }
html .topbar a:hover { color: #B8CDF0; }
html .site-header { background: #fff; border-bottom: 1px solid var(--line); backdrop-filter: none; color: var(--ink); box-shadow: 0 6px 24px rgba(11,35,81,.06); }
html .header-row { min-height: 76px; }
/* logotipo KNZ: mesma letra encorpada de antes */
html .brand-text { font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 800; letter-spacing: .02em; }
html .nav { gap: 30px; }
html .site-header .nav > .nav-link, html .site-header .dropdown-btn, html .site-header .account > .nav-link, html .site-header .account > a:not(.btn) { color: var(--ink); font-weight: 500; font-size: 16px; }
html .site-header .nav > .nav-link:hover, html .site-header .dropdown-btn:hover, html .site-header .nav-link.active { color: var(--signal); }
html .nav-link::after { height: 2px; bottom: 6px; background: var(--signal); }
/* menus que abrem continuam claros */
html .dropdown-panel { border-radius: var(--radius); border-color: var(--line); box-shadow: 0 24px 48px rgba(3,7,15,.28); color: var(--ink); }
html .dropdown-item { border-radius: 6px; color: var(--ink); }
html .dropdown-item:hover { background: var(--soft); }
html .dropdown-title { font-size: 14px; font-weight: 500; }
@media (max-width: 960px) {
  html .nav { background: #fff; border-bottom-color: var(--line); box-shadow: 0 24px 40px rgba(11,35,81,.10); }
}
}
html .banner { color: var(--ink); }

/* ---------- Seções ---------- */
html .section.alt { background: var(--soft); border-color: var(--line); }
html .section-head { align-items: flex-end; margin-bottom: 36px; }
html .section-head h2 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; letter-spacing: -0.025em; }
html .section-head p { font-size: 16px; color: var(--muted); max-width: 46ch; }
html .section-head a { color: var(--signal); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- Página inicial: abertura ---------- */
html .hero-waves { background: var(--grad-deep); }
html .hero-canvas { opacity: .5; mix-blend-mode: screen; }
html .hero-shade { background: linear-gradient(90deg, rgba(5,12,28,.88) 0%, rgba(5,12,28,.55) 45%, rgba(5,12,28,.05) 100%), linear-gradient(0deg, rgba(5,12,28,.45) 0%, rgba(5,12,28,0) 35%); }
html .hero { padding: clamp(72px, 10vw, 128px) 0 clamp(64px, 9vw, 112px); }
html .hero-waves h1 { font-family: var(--font-display); font-size: clamp(44px, 6.6vw, 88px); font-weight: 500; line-height: 1.0; letter-spacing: -0.035em; max-width: 13ch; text-shadow: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #B8CDF0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html .hero-sub { margin-top: 24px; font-family: var(--font-body); font-size: clamp(18px, 1.8vw, 22px); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: #B9C9E6; max-width: 34ch; -webkit-text-fill-color: #B9C9E6; }
html .hero-waves .hero-content > p { font-size: 16.5px; color: #8EA3C9; margin: 22px 0 36px; }
html .hero-waves .btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid) { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 10px 30px rgba(3,7,15,.35); }
html .hero-waves .btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid):hover { background: #E3ECFA; border-color: #E3ECFA; color: var(--ink); }
html .hero-waves .btn.ghost { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.35); }
html .hero-waves .btn.ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); color: #fff; }

/* ---------- Empresas (cartões) ---------- */
html .company-grid { gap: 16px; }
html .company-tile { border-radius: var(--radius); border-color: var(--line); background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%); transition: border-color .2s ease, box-shadow .2s ease; padding: 18px 20px; }
html .company-tile strong { font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
html .company-tile small { font-size: 14.5px; line-height: 1.45; }
html .company-logo { border-radius: 8px; border-color: var(--line); }
html .company-tile .ico { color: var(--signal); }

/* ---------- Chamada "Nossa história" ---------- */
html .story-teaser { background: var(--grad-deep); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(5,12,28,.22); }
html .story-teaser h2 { max-width: 30ch; font-weight: 600; letter-spacing: -0.02em; }
html .story-eye .lid { fill: var(--soft); }
html .story-eye .glb { stroke: var(--ink); }

/* ---------- Novidades e equipamentos (cartões) ---------- */
html .post-card, html .product-card { border-radius: var(--radius); border-color: var(--line); transition: border-color .2s ease, box-shadow .2s ease; }
html .card-thumb, html .thumb-logo { background: var(--grad-mist); }
html .card-title { font-weight: 600; font-size: 20px; line-height: 1.22; letter-spacing: -0.012em; }
html .card-meta { font-size: 13.5px; }
html .card-cat { color: var(--signal); }
html .card-excerpt { font-size: 15.5px; }
html .product-card-body strong { font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
html .product-card-link { color: var(--signal) !important; }

/* ---------- Páginas de produto e técnica ---------- */
html .phero-text h1 { font-weight: 600; letter-spacing: -0.028em; }
html .phero-media, html .showcase, html .specs, html .adv-grid li, html .pgallery figure, html .ttable-wrap, html .rows { border-radius: var(--radius); }
html .specs dd { font-variant-numeric: tabular-nums; }
html .ttable thead th, html .ttable thead th:first-child { background: #0B2351; }
html .ico.check { background: var(--grad-btn); }
html .ptab[aria-current="page"], html .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--signal); }
html .sc-title { font-weight: 600; letter-spacing: -0.025em; }

/* ---------- Formulários ---------- */
html .field input, html .field select, html .field textarea, html .toolbar input, html .toolbar select { border-radius: 8px; border-color: #C3CCDA; }
html .field input:focus, html .field select:focus, html .field textarea:focus { outline: 3px solid rgba(26,86,176,.18); border-color: var(--signal); }
html .auth-card h1 { font-weight: 600; font-size: 38px; letter-spacing: -0.03em; }
html .form-msg, html .preview-note { border-radius: 8px; }
html dialog { border-radius: 14px; }

/* ---------- Artigo ---------- */
html .article h1 { font-weight: 600; letter-spacing: -0.028em; }
html .article-body p { font-size: 18.5px; line-height: 1.72; }
html .article-cover { border-radius: var(--radius); }

/* ---------- História ---------- */
html .hs-hero { background: var(--grad-deep); }
html .hs-hero h1 { font-weight: 500; letter-spacing: -0.035em; }

/* ---------- Redes sociais e rodapé ---------- */
html .knz-soc-row a { border-radius: var(--radius-btn); }
html .knz-soc-row a:hover { transform: none; }
html .site-footer { font-size: 14px; }
html .site-footer .wrap { min-height: 88px; }

/* ---------- Painel ---------- */
html .panel-head h1 { font-weight: 600; letter-spacing: -0.028em; }
html .count { background: var(--signal); }
html .pill { border-radius: 6px; }

/* Botão claro sobre os blocos escuros */
html .story-teaser .btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid) { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 10px 30px rgba(3,7,15,.3); }
html .story-teaser .btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid):hover { background: #E3ECFA; border-color: #E3ECFA; }
/* Contato: mesmo azul profundo do banner inicial */
html .contact.contact-waves { background: radial-gradient(110% 130% at 92% 0%, rgba(46,104,206,.26) 0%, rgba(46,104,206,0) 55%), linear-gradient(155deg, #03070F 0%, #071126 42%, #0A1A3A 78%, #0E2752 100%); }
html .contact-waves::after { background: linear-gradient(90deg, rgba(3,7,15,.35) 0%, rgba(3,7,15,0) 60%); }
html .contact-waves .contact-lines { opacity: .55; }
html .contact-waves h2 { font-weight: 500; letter-spacing: -0.03em; text-shadow: none; }


/* =====================================================================
   Microinterações (ideias da taste-skill): só com mouse, nada cresce nem empurra vizinhos
   Cartões com link sobem 2px; a foto aproxima 3% dentro da moldura; botões sobem 1px e afundam ao clicar
   ===================================================================== */
html { --k-ease: cubic-bezier(.2,.8,.2,1); --k-ease-enter: cubic-bezier(.22,1,.36,1); }
html .btn { transition: transform .15s var(--k-ease), box-shadow .15s var(--k-ease), background-color .15s var(--k-ease), border-color .15s var(--k-ease), color .15s var(--k-ease); }
html .company-tile, html .post-card, html .product-card, html .listing-card, html .pvideo-card {
  transition: transform .12s var(--k-ease), border-color .12s var(--k-ease), box-shadow .12s var(--k-ease);
}
html .post-card img, html .product-card .pimg img, html .listing-card img, html .company-tile img {
  transition: transform .4s var(--k-ease);
}
html .company-tile .ico, html .product-card-link svg, html .post-card .more svg { transition: transform .12s var(--k-ease); }
@media (hover: hover) and (pointer: fine) {
  html .btn:hover { transform: translateY(-1px); }
  html .btn:active { transform: translateY(1px) scale(.985); transition-duration: .09s; }
  html .company-tile:hover, html .post-card:hover, html .product-card:hover, html .listing-card:hover, html .pvideo-card:hover {
    transform: translateY(-2px); border-color: #9FB2D2; box-shadow: 0 12px 24px rgba(11,35,81,.10);
    transition-duration: .18s;
  }
  html .post-card:hover img, html .product-card:hover .pimg img, html .listing-card:hover img, html .company-tile:hover img {
    transform: scale(1.03); transition-duration: .6s;
  }
  html .company-tile:hover .ico, html .product-card:hover .product-card-link svg, html .post-card:hover .more svg { transform: translateX(3px); transition-duration: .15s; }
}
html .post-card .post-cover, html .post-card > a:first-child, html .listing-card .listing-media { overflow: hidden; }

/* Entrada do banner inicial: uma vez por visita, ~1 s; título sobe, texto e botões aparecem em seguida */
@keyframes k-rise { from { transform: translateY(.42em); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0 0 -20% 0); } }
@keyframes k-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html .hero-waves.k-enter h1 { animation: k-rise .7s var(--k-ease-enter) both; }
html .hero-waves.k-enter .hero-content > p { animation: k-fade-up .52s var(--k-ease-enter) .38s both; }
html .hero-waves.k-enter .hero-actions > * { animation: k-fade-up .52s var(--k-ease-enter) both; }
html .hero-waves.k-enter .hero-actions > :nth-child(1) { animation-delay: .44s; }
html .hero-waves.k-enter .hero-actions > :nth-child(2) { animation-delay: .5s; }
html .hero-waves.k-enter .hero-actions > :nth-child(n+3) { animation-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  html .btn, html .company-tile, html .post-card, html .product-card, html .listing-card, html .pvideo-card,
  html .post-card img, html .product-card .pimg img, html .listing-card img, html .company-tile img { transition: border-color .12s, box-shadow .12s, background-color .12s, color .12s !important; transform: none !important; }
  html .hero-waves.k-enter h1, html .hero-waves.k-enter .hero-content > p, html .hero-waves.k-enter .hero-actions > * { animation: none !important; }
}

/* =====================================================================
   Ajustes das Web Interface Guidelines (Vercel)
   ===================================================================== */
/* Link "Pular para o conteúdo": invisível até a pessoa navegar pelo teclado (Tab) */
html .k-skip { position: fixed; left: 16px; top: -64px; z-index: 10001; padding: 12px 18px; border-radius: 8px; background: #0B2351; color: #fff; font-weight: 600; text-decoration: none; transition: top .15s var(--k-ease, ease); }
html .k-skip:focus { top: 12px; outline: 2px solid #7FA8EE; outline-offset: 2px; }
html main:focus { outline: none; }
/* Toque: sem atraso de duplo toque e realce de toque discreto */
html a, html button, html input, html select, html textarea, html label, html summary { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(26, 86, 176, .14); }
/* Títulos sem palavra sozinha na última linha */
html h1, html h2, html h3 { text-wrap: balance; }
/* Ícones pequenos com área de toque de ~44px (o desenho continua do mesmo tamanho) */
html .topbar-links > a, html .knz-soc-top a, html .knz-soc-foot a, html .twt-dot { position: relative; }
html .topbar-links > a::after, html .knz-soc-top a::after, html .knz-soc-foot a::after { content: ""; position: absolute; inset: -12px -6px; }
html .twt-dot::after { content: ""; position: absolute; inset: -20px -4px; }
/* Título da página Novidades (agora h1) com o mesmo tamanho de antes */
html .section-head h1 { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: 0; }

/* Botões de destaque das páginas de produto: fundo no degradê azul-marinho, então o texto é sempre branco
   (a Blue Air usava texto escuro porque o botão antigo era azul-claro) */
html #produto .btn.btn-accent:not(.ghost), html #produto .btn.btn-accent:not(.ghost):hover,
html .btn.btn-accent:not(.ghost), html .btn.btn-accent:not(.ghost):hover { color: #fff; }

/* O menu acompanha a rolagem só na página inicial; nas outras páginas ele sobe junto com o conteúdo */
html:not(.k-home) .site-header { position: relative; }
html:not(.k-home) .ptabs { top: 0; }
html:not(.k-home) { scroll-padding-top: 16px; }

/* Botões principais na cor de cada representada (Ver detalhes, Conhecer o equipamento, botões de destaque) */
html .has-accent .sc-actions .btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid),
html .has-accent .company-hero .btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid),
html #produto .btn.btn-accent:not(.ghost), html .has-accent .btn.btn-accent:not(.ghost) {
  background: linear-gradient(180deg, var(--accent-c), color-mix(in srgb, var(--accent-c) 82%, #000));
  border-color: color-mix(in srgb, var(--accent-c) 80%, #000); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(5,12,28,.18);
}
html .has-accent .sc-actions .btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid):hover,
html .has-accent .company-hero .btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid):hover,
html #produto .btn.btn-accent:not(.ghost):hover, html .has-accent .btn.btn-accent:not(.ghost):hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-c) 92%, #fff), var(--accent-c));
  border-color: var(--accent-c); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px color-mix(in srgb, var(--accent-c) 35%, transparent);
}
html .has-accent .product-card-link { color: var(--accent-text-c) !important; }

/* "Convidado" no menu: mesmo visual do botão Criar conta (texto branco) */
html .site-header .account > a.knz-guest-pill, html .knz-guest-pill { color: #fff; background: var(--grad-btn); border: 1px solid #0B2351; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(5,12,28,.18); }
html .site-header .account > a.knz-guest-pill:hover, html a.knz-guest-pill:hover { color: #fff; background: var(--grad-btn-hover); border-color: #12408E; }

/* ===== Painel de administração: faixa escura com as abas, conteúdo em superfícies claras ===== */
html section.panel { --pn-bg: #F2F5FA; --pn-band: #0A1A3A; --pn-line: #E1E7F0; --pn-amber: #F5B301;
  padding: 0 0 88px; background: var(--pn-bg); min-height: 70vh; }
html section.panel .panel-head, html section.panel #tabs {
  background: var(--pn-band); box-shadow: 0 0 0 100vmax var(--pn-band); clip-path: inset(0 -100vmax); }
html section.panel .panel-head { margin: 0; padding: 40px 0 26px; align-items: flex-end; }
html section.panel .panel-head h1 { color: #fff; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 3.6vw, 40px); }
html section.panel .panel-head h1::after { content: "Clientes, conversas, novidades e convites da KNZ"; display: block; margin-top: 8px; font-family: var(--font-body); font-size: 15px; font-weight: 400; letter-spacing: 0; color: #9FB0CC; }
html section.panel .panel-head #new-post.btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid) { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
html section.panel .panel-head #new-post.btn:not(.ghost):not(.danger):not(.ok):not(.danger-solid):hover { background: #E3ECFA; border-color: #E3ECFA; color: var(--ink); }
/* abas */
html section.panel #tabs { gap: 6px; border: 0; margin: -1px 0 32px; padding: 0 0 14px; scrollbar-width: none; }
html section.panel #tabs::-webkit-scrollbar { display: none; }
html section.panel .tab { min-height: 42px; padding: 0 16px; border: 0; margin: 0; border-radius: 10px; color: #B8C4DA; font-weight: 600; transition: background-color .15s var(--k-ease, ease), color .15s var(--k-ease, ease); }
@media (hover: hover) { html section.panel .tab:not([aria-selected="true"]):hover { color: #fff; background: rgba(255,255,255,.07); } }
html section.panel .tab[aria-selected="true"] { color: var(--ink); background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
html section.panel .tab:focus-visible { outline: 2px solid #8FB4FF; outline-offset: 2px; }
html section.panel .count { background: var(--pn-amber); color: #2A1E00; font-weight: 700; }
/* blocos */
html section.panel #view > .panel-block, html section.panel #view > .fx-newinv, html section.panel #view > form {
  background: #fff; border: 1px solid var(--pn-line); border-radius: 16px; padding: 22px 24px 24px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(10,26,58,.04); }
html section.panel h2 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 0 0 14px; }
html section.panel #view > p:first-child, html section.panel .kl-intro { max-width: 78ch; font-size: 14.5px; color: #5B6678; margin: 0 0 20px; }
html section.panel .rows { border-color: var(--pn-line); border-radius: 12px; }
html section.panel .row { border-bottom-color: #EDF1F6; padding: 14px 18px; transition: background-color .15s ease; }
html section.panel .row:hover { background: #FAFBFD; }
html section.panel .row-main strong { font-size: 15.5px; color: var(--ink); }
html section.panel .row-main small { font-size: 13.5px; }
html section.panel .row-actions .btn, html section.panel .row .btn { min-height: 36px; padding: 0 13px; font-size: 14px; border-radius: 9px; }
html section.panel .pill { min-height: 24px; font-size: 12px; padding: 0 10px; }
html section.panel .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; opacity: .85; }
html section.panel .panel-empty { border: 1.5px dashed #D3DBE7; background: #FAFBFD; border-radius: 12px; }
html section.panel input:not([type=checkbox]):not([type=radio]):not([type=file]), html section.panel select, html section.panel textarea { border-color: #D3DBE7; border-radius: 10px; background: #fff; }
html section.panel input:focus, html section.panel select:focus, html section.panel textarea:focus { border-color: #12459A; box-shadow: 0 0 0 3px rgba(18,69,154,.14); outline: none; }
/* números do atendimento */
html section.panel .kl-stats { gap: 14px; }
html section.panel .kl-stat { border: 1px solid var(--pn-line); border-radius: 14px; padding: 16px 18px 15px; background: #fff; box-shadow: 0 1px 2px rgba(10,26,58,.04); position: relative; }
html section.panel .kl-stat b { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
html section.panel .kl-stat span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #4A5568; }
html section.panel .kl-stat span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st, #8A93A3); flex: none; }
html section.panel .kl-stat.main { --st: #0B2351; background: linear-gradient(160deg, #0B2351, #12459A); border-color: #0B2351; }
html section.panel .kl-stat.main b, html section.panel .kl-stat.main span { color: #fff; }
html section.panel .kl-stat.main span::before { background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
html section.panel .kl-stat.guest { --st: #12459A; } html section.panel .kl-stat.visitor { --st: #8A93A3; }
html section.panel .kl-stat.member { --st: #1F8A5B; } html section.panel .kl-stat.rep { --st: #33C27F; }
@media (max-width: 640px) {
  html section.panel .panel-head { padding: 28px 0 20px; }
  html section.panel .panel-head h1::after { font-size: 14px; }
  html section.panel #view > .panel-block, html section.panel #view > .fx-newinv { padding: 18px 16px; border-radius: 14px; }
}
html[lang^="es"] section.panel .panel-head h1::after { content: "Clientes, conversaciones, novedades e invitaciones de KNZ"; }
html[lang^="en"] section.panel .panel-head h1::after { content: "KNZ customers, conversations, news and invitations"; }