/* Identidade visual: verde de campo cirúrgico, aço e branco estéril */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css");

:root {
  --verde-950: #062724;
  --verde-900: #0a3a35;
  --verde-800: #0d4f48;
  --verde-700: #10645b;
  --verde-600: #157a6e;
  --verde-500: #1f9483;
  --verde-300: #7cc8b9;
  --verde-100: #dcefe9;
  --verde-50:  #eef7f4;
  --aco-700: #3d4a48;
  --aco-500: #6b7a77;
  --aco-300: #b5c0bd;
  --aco-200: #d6dedb;
  --aco-100: #e8eeec;

  --bg: #f5f8f7;
  --surface: #ffffff;
  --surface-2: #eef3f1;
  --ink: #0f1e1b;
  --ink-2: #4b5b57;
  --ink-3: #85938f;
  --line: #dde5e2;
  --accent: var(--verde-700);
  --accent-ink: #ffffff;
  --accent-soft: var(--verde-100);
  --ambar: #b7741a;
  --ambar-soft: #fbf0dd;
  --ok: #1f8a4c;
  --ok-soft: #e1f3e7;
  --erro: #c2410c;
  --erro-soft: #fdeadf;
  --violeta: #5b4bc4;
  --violeta-soft: #ebe8fb;
  --bandeja: #e7f1ee;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --sombra: 0 1px 2px rgba(6, 39, 36, .06), 0 8px 24px rgba(6, 39, 36, .07);
  --sombra-lg: 0 2px 6px rgba(6, 39, 36, .08), 0 24px 60px rgba(6, 39, 36, .16);
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: "Manrope", "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1715; --surface: #11211e; --surface-2: #172b27; --ink: #e6efec; --ink-2: #a5b6b1; --ink-3: #74857f;
    --line: #22362f; --accent: #2bb39f; --accent-ink: #04201c; --accent-soft: #123a33;
    --ambar: #e3b25b; --ambar-soft: #1f302c; --ok: #5fc48a; --ok-soft: #173325; --erro: #f08a5d; --erro-soft: #2a2427;
    --violeta: #a99cf2; --violeta-soft: #262140; --bandeja: #dfe9e6;
    --sombra: none; --sombra-lg: 0 24px 60px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1715; --surface: #11211e; --surface-2: #172b27; --ink: #e6efec; --ink-2: #a5b6b1; --ink-3: #74857f;
  --line: #22362f; --accent: #2bb39f; --accent-ink: #04201c; --accent-soft: #123a33;
  --ambar: #e3b25b; --ambar-soft: #1f302c; --ok: #5fc48a; --ok-soft: #173325; --erro: #f08a5d; --erro-soft: #2a2427;
  --violeta: #a99cf2; --violeta-soft: #262140; --bandeja: #dfe9e6;
  --sombra: none; --sombra-lg: 0 24px 60px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--fonte); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); letter-spacing: -.02em; line-height: 1.15; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
.ti { line-height: 1; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--fonte-titulo); font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: inherit; text-decoration: none; }
.marca .selo { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(145deg, var(--verde-500), var(--verde-800)); color: #fff; font-size: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.marca small { display: block; font-family: var(--fonte); font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin-top: 1px; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 18px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink); transition: transform .08s, background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { border-color: var(--aco-300); }
.btn:active { transform: scale(.98); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(16, 100, 91, .25); }
.btn.pri:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.lg { padding: 14px 26px; font-size: 16.5px; border-radius: 14px; }
.btn.sm { padding: 7px 13px; font-size: 14px; border-radius: 10px; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }

/* Foto de instrumental (fundo branco do catálogo some sobre superfícies claras) */
.foto-inst { mix-blend-mode: multiply; object-fit: contain; display: block; }