/* ==========================================================================
   METKE Soluções Integradas — Identidade visual
   Tokens derivados do Manual da Marca (v1.0)
   ========================================================================== */
:root {
  --brand: #0F4C81;      /* Azul escuro — headers, links, primário */
  --brand-700: #0B3B64;  /* Azul escuro (hover) */
  --accent: #2D9CDB;     /* Azul claro — hover, ênfase */
  --accent-700: #2185c1;
  --success: #2FBF71;    /* Verde — CTAs, confirmação */
  --success-700: #26a561;
  --ink: #3A3A3A;        /* Grafite — texto */
  --muted: #6B7480;      /* Texto secundário */
  --line: #E4E9F0;       /* Bordas */
  --line-2: #EEF1F5;
  --surface: #F4F6F9;    /* Fundos de seção */
  --white: #FFFFFF;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 8px 24px rgba(15, 76, 129, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 76, 129, 0.14);

  --font: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Overrides Bootstrap */
  --bs-primary: var(--brand);
  --bs-primary-rgb: 15, 76, 129;
  --bs-body-font-family: var(--font);
  --bs-body-color: var(--ink);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--accent);
  --bs-border-radius: var(--radius);
}

/* ---------- Base ---------- */
* { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, .display-font { font-family: var(--font); font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--accent); }
.text-brand { color: var(--brand) !important; }
.text-accent { color: var(--accent) !important; }
.text-success-metke { color: var(--success) !important; }
.text-muted-metke { color: var(--muted) !important; }
.bg-brand { background: var(--brand) !important; }
.bg-surface { background: var(--surface) !important; }
.section { padding: 84px 0; }
.section-sm { padding: 56px 0; }
.eyebrow {
  font-size: 12px; letter-spacing: 0.28em; font-weight: 600;
  color: var(--accent); text-transform: uppercase;
}

/* ---------- Logo ---------- */
.metke-logo { display: inline-flex; align-items: center; gap: 12px; }
.metke-logo .word { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.metke-logo .word .name { font-size: 22px; font-weight: 800; color: var(--brand); letter-spacing: 0.03em; }
.metke-logo .word .tag { font-size: 7.5px; letter-spacing: 0.34em; color: var(--ink); font-weight: 600; }
.metke-logo.light .word .name { color: #fff; }
.metke-logo.light .word .tag { color: #A9CCE8; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--radius-sm); padding: 11px 22px; transition: all .18s ease; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-metke {           /* Primário — verde */
  background: var(--success); border-color: var(--success); color: #fff;
}
.btn-metke:hover { background: var(--success-700); border-color: var(--success-700); color: #fff; }
.btn-brand {           /* Secundário — azul escuro */
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn-brand:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn-outline-brand {   /* Terciário — contorno */
  background: transparent; border: 1px solid #C3CDD8; color: var(--brand);
}
.btn-outline-brand:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline-light-metke { background: transparent; border: 1px solid rgba(255,255,255,0.45); color: #fff; }
.btn-outline-light-metke:hover { background: #fff; border-color: #fff; color: var(--brand); }
.btn-wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn-wa:hover { background: #1da851; border-color: #1da851; color: #fff; }

/* ---------- Navbar ---------- */
.navbar-metke {
  background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line-2); padding: 14px 0;
}
.navbar-metke .nav-link { color: var(--ink); font-weight: 500; font-size: 15px; padding: 8px 14px; }
.navbar-metke .nav-link:hover, .navbar-metke .nav-link.active { color: var(--brand); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--brand) 0%, #0d436f 60%, var(--brand-700) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(45,156,219,0.35), transparent 65%); pointer-events: none;
}
.hero .eyebrow { color: #7FB8E0; }
.hero h1 { color: #fff; font-weight: 800; line-height: 1.12; }
.hero .lead { color: #CFE2F2; }
.hero-badges .badge-soft {
  background: rgba(255,255,255,0.10); color: #DCEBF7; border: 1px solid rgba(255,255,255,0.18);
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
}

/* ---------- Cards ---------- */
.card-metke {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px; height: 100%; transition: transform .2s ease, box-shadow .2s ease;
}
.card-metke:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card-metke .card-ico {
  width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 26px; background: var(--surface); margin-bottom: 18px;
}
.card-metke h3, .card-metke h4 { color: var(--brand); }
.feature-list { list-style: none; padding: 0; margin: 14px 0 0; }
.feature-list li {
  position: relative; padding: 5px 0 5px 24px; color: var(--muted); font-size: 14.5px;
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}

/* ---------- Chips (para quem atendemos / diferenciais) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--ink);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.diff-item { display: flex; gap: 14px; align-items: flex-start; }
.diff-item .ck {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(47,191,113,0.14);
  color: var(--success); display: flex; align-items: center; justify-content: center; font-weight: 700;
}

/* ---------- Category / product ---------- */
.cat-card {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center; height: 100%; transition: all .18s ease; color: var(--ink);
}
.cat-card:hover { border-color: var(--accent); box-shadow: var(--shadow); color: var(--brand); transform: translateY(-3px); }
.cat-card .ico { font-size: 32px; }
.cat-card .nome { font-weight: 600; margin-top: 8px; display: block; }
.cat-card .count { font-size: 12px; color: var(--muted); }

.produto-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; transition: all .2s ease; }
.produto-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.produto-thumb {
  height: 170px; background: var(--surface); display: flex; align-items: center; justify-content: center;
  color: #9DB0C4; font-size: 46px;
}
.produto-thumb img { width: 100%; height: 100%; object-fit: cover; }
.produto-body { padding: 18px; }
.produto-body .cat { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.produto-body h3 { font-size: 16px; margin: 6px 0; color: var(--ink); }
.preco { font-weight: 700; color: var(--brand); font-size: 18px; }

/* ---------- Footer ---------- */
.footer { background: #23272B; color: #C7CDD4; padding: 64px 0 28px; }
.footer h5 { color: #fff; font-size: 15px; letter-spacing: .04em; margin-bottom: 18px; }
.footer a { color: #C7CDD4; }
.footer a:hover { color: var(--accent); }
.footer .foot-link { display: block; padding: 6px 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.10); margin-top: 40px; padding-top: 22px; font-size: 13px; color: #9AA1A8; }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 1000; width: 58px; height: 58px;
  border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 8px 24px rgba(37,211,102,0.45);
}
.wa-float:hover { color: #fff; transform: scale(1.06); }

/* ---------- Section heading ---------- */
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { color: var(--brand); font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-head p { color: var(--muted); }

/* ---------- Utility ---------- */
.divider { height: 1px; background: var(--line); border: 0; }
.badge-status { font-weight: 600; padding: 5px 10px; border-radius: 6px; font-size: 12px; }
.badge-novo { background: rgba(45,156,219,.14); color: var(--accent); }
.badge-andamento { background: rgba(247,201,72,.18); color: #b7860b; }
.badge-concluido { background: rgba(47,191,113,.16); color: var(--success-700); }

@media (max-width: 767px) {
  .section { padding: 56px 0; }
  .hero { text-align: center; }
}

/* ---------- Flash toasts (compartilhado com o admin) ---------- */
main .flash-toast, .flash-toast {
  display: flex; align-items: center; gap: 12px; max-width: 1180px; margin: 12px auto;
  padding: 14px 18px; border-radius: 10px; border-left: 4px solid; font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); width: calc(100% - 32px);
}
.flash-toast__icon { font-size: 1.1rem; }
.flash-toast__body { flex: 1; }
.flash-toast__close { background: none; border: 0; cursor: pointer; font-size: 1.3rem; opacity: .5; }
.flash-toast__close:hover { opacity: 1; }
.flash-toast--success { background:#f0fdf4; border-color:#16a34a; color:#14532d; }
.flash-toast--success .flash-toast__icon { color:#16a34a; }
.flash-toast--error { background:#fef2f2; border-color:#dc2626; color:#7f1d1d; }
.flash-toast--error .flash-toast__icon { color:#dc2626; }
.flash-toast--warning { background:#fffbeb; border-color:#d97706; color:#78350f; }
.flash-toast--info { background:#eff6ff; border-color:#2563eb; color:#1e3a8a; }