/* ============================================================
   Mockups · shared styles
   Each artboard scopes its styles under `.ab-NN` to avoid bleed.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #f0eee9; font-family: var(--font-body); color: var(--blue-900); }
#root { width: 100vw; height: 100vh; }

/* shared chrome bits ----------------------------------------- */
.ev-nav {
  height: 76px;
  padding: 0 56px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  position: relative; z-index: 5;
}
.ev-nav--dark {
  background: transparent;
  border-bottom-color: rgba(255,255,255,0.10);
}
.ev-nav__logo img { height: 36px; display: block; }
.ev-nav--dark .ev-nav__logo img { filter: brightness(0) invert(1); opacity: 0.94; }
.ev-nav__links { display: flex; align-items: center; gap: 32px; }
.ev-nav__link {
  font-size: 14px; font-weight: 500;
  color: var(--blue-900); text-decoration: none;
  white-space: nowrap;
}
.ev-nav--dark .ev-nav__link { color: rgba(255,255,255,0.85); }
.ev-nav__right { display: flex; align-items: center; gap: 14px; }
.ev-nav__signin {
  font-size: 14px; font-weight: 500;
  color: var(--blue-900);
  text-decoration: none;
}
.ev-nav--dark .ev-nav__signin { color: rgba(255,255,255,0.85); }
.ev-credenciar {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 18px;
  background: var(--indigo-600); color: #fff;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast);
}
.ev-credenciar:hover { background: var(--indigo-700); }
.ev-credenciar__chev {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
}
.ev-nav--dark .ev-credenciar { background: var(--cyan-500); color: var(--ink-950); }
.ev-nav--dark .ev-credenciar__chev { background: rgba(0,0,0,0.16); }

/* shared eyebrow ---------------------------------------------- */
.ev-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-eyebrow);
  font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; font-weight: 600;
}
.ev-eyebrow .num { color: var(--cyan-700); font-weight: 700; letter-spacing: 0.18em; }
.ev-eyebrow .lbl { color: var(--ink-500); }
.ev-eyebrow .rule { height: 1px; width: 56px; background: var(--line); }

.ev-eyebrow--dark .num { color: var(--cyan-400); }
.ev-eyebrow--dark .lbl { color: rgba(255,255,255,0.55); }
.ev-eyebrow--dark .rule { background: rgba(255,255,255,0.18); }

/* shared atmospheric dark backdrop --------------------------- */
.ev-dark-bg, .ev-dark-bg i {
  position: absolute; pointer-events: none;
}
.ev-dark-bg { inset: 0; }
.ev-dark-bg i {
  border-radius: 50%;
  filter: blur(140px);
}
.ev-dark-bg i.b1 {
  right: -240px; top: -200px;
  width: 820px; height: 820px;
  background: radial-gradient(circle, #1e62a4 0%, #444ca2 38%, transparent 65%);
  opacity: 0.7;
}
.ev-dark-bg i.b2 {
  left: -200px; bottom: -240px;
  width: 760px; height: 760px;
  background: radial-gradient(circle, #00a3e0 0%, #134b8d 42%, transparent 65%);
  opacity: 0.55;
}
.ev-dark-bg i.b3 {
  left: 30%; top: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, #6b3f9c 0%, #444ca2 50%, transparent 70%);
  opacity: 0.32;
}
.ev-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* arc gradient rule ----------------------------------------- */
.ev-arc-rule {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #a93b8e, #444ca2, #1e62a4, #00a3e0, #1ec9a0);
}

/* primary CTA pill ------------------------------------------ */
.ev-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 26px;
  background: var(--indigo-600);
  color: #fff;
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast), transform var(--dur-fast);
  border: none; cursor: pointer;
}
.ev-pill:hover { background: var(--indigo-700); }
.ev-pill__chev {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
}
.ev-pill--cyan { background: var(--cyan-500); color: var(--ink-950); }
.ev-pill--cyan .ev-pill__chev { background: rgba(0,0,0,0.16); color: var(--ink-950); }
.ev-pill--white { background: #fff; color: var(--indigo-700); }
.ev-pill--white:hover { background: #eef0fb; }
.ev-pill--white .ev-pill__chev { background: var(--indigo-600); color: #fff; }

.ev-pill-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--blue-900);
  font-size: 15px; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast);
}
.ev-pill-ghost:hover { background: var(--bg-soft); }
.ev-pill-ghost--dark {
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.22);
}
.ev-pill-ghost--dark:hover { background: rgba(255,255,255,0.06); }

/* annotation note (inline within artboard) ------------------ */
.ab-note {
  position: absolute;
  bottom: 18px; right: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.78);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-eyebrow);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 10;
  pointer-events: none;
}
.ab-note::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan-400);
}
.ab-note--alt { background: var(--blue-700); }
.ab-note--alt::before { background: var(--mint-300); }

/* hubs do mapa do Brasil · glow + pulsação assíncrona ------- */
.ev-hub {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px 0.5px currentColor;
}
.ev-hub::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: evHubPulse var(--hub-dur, 2.8s) var(--ease-out) infinite;
  animation-delay: var(--hub-delay, 0s);
}
@keyframes evHubPulse {
  0%   { transform: scale(1); opacity: 0.5; }
  70%  { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ev-hub::after { animation: none; } }