/* ===== Tokens ===== */
:root {
  --ink: #0a2540;        /* títulos */
  --ink-2: #64748d;      /* texto secundário */
  --muted: #8898aa;
  --line: #e7e9f0;       /* linhas da grade */

  /* ===== Paleta WOP · Índigo tecnológico =====
     Índigo = confiança + especialidade técnica. Verde = ação imediata (WhatsApp). */
  --brand-50:  #f3f2ff;
  --brand-100: #e9e7ff;
  --brand-200: #d2cdff;
  --brand-300: #a99fff;
  --brand-400: #7b6cff;
  --brand-500: #3b2bff;  /* primária: CTAs, links, foco */
  --brand-600: #2a1ed6;  /* hover */
  --brand-700: #2116b0;  /* pressionado */
  --brand-900: #0b1033;  /* marinho profundo: fundos escuros */
  --wa-50:  #eaf7ef;
  --wa-600: #15803d;     /* WhatsApp acessível (5:1 com branco) */
  --wa-700: #166534;
  --wa-800: #14532d;
  --brand: var(--brand-500);
  --brand-hover: var(--brand-600);
  --focus-ring: 0 0 0 3px #fff, 0 0 0 5px var(--brand-400);
  --bg: #ffffff;
  --tint: #f6f9fc;
  --violet: #7a5cff;
  --cyan: #00d4ff;
  --pink: #ff5c8a;
  --orange: #ffb15c;
  --green: #00e0a4;
  --blue: #4f7cff;
  --shadow: 0 50px 100px -20px rgba(50, 50, 93, .25), 0 30px 60px -30px rgba(0, 0, 0, .3);

  --nav-h: 70px;               /* altura do header */

  /* grade da página */
  --frame: 28px;               /* linha vertical externa (esquerda) */
  --content-left: 120px;       /* início do conteúdo do hero */
}
@media (min-width: 1280px) { :root { --frame: 40px; --content-left: 172px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  position: relative;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "cv11";
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
wop-nav, wop-hero, wop-logos, wop-solutions, wop-showcase, wop-superlist, wop-whatsapp { display: block; }

/* ===== Botões =====
   Hierarquia: whatsapp (ação nº1) > primary (índigo) > outline > quiet */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn__icon { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--brand-500); color: #fff; }
.btn--primary:hover { background: var(--brand-600); }
.btn--primary:active { background: var(--brand-700); }

.btn--whatsapp { background: var(--wa-600); color: #fff; }
.btn--whatsapp:hover { background: var(--wa-700); }
.btn--whatsapp:active { background: var(--wa-800); }

.btn--outline { background: #fff; color: var(--brand-500); border-color: var(--brand-200); }
.btn--outline:hover { border-color: var(--brand-500); background: var(--brand-50); }

.btn--quiet { background: rgba(255,255,255,.88); color: var(--ink); border-color: rgba(10,37,64,.12); backdrop-filter: blur(6px); }
.btn--quiet:hover { background: #fff; border-color: rgba(10,37,64,.25); }
.btn--quiet .btn__icon { width: 15px; height: 15px; color: var(--ink-2); }

.btn--lg { height: 54px; padding: 0 30px; gap: 10px; font-size: 16.5px; }
.btn--lg .btn__icon { width: 20px; height: 20px; }

/* Chevron ">" que ganha "haste" no hover */
.arrow { position: relative; width: 8px; height: 10px; display: inline-block; }
.arrow::before, .arrow::after { content: ""; position: absolute; top: 50%; transition: transform .15s, opacity .15s; }
.arrow::before { left: -1px; width: 8px; height: 1.6px; background: currentColor; transform: translateY(-50%); opacity: 0; }
.arrow::after { left: -2px; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-50%) rotate(-45deg); }
:hover > .arrow::before { opacity: 1; }
:hover > .arrow::after { transform: translate(2px, -50%) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}