/* =========================================================
   TARELLO — folha de estilo compartilhada
   Estética: "blueprint técnico" — grade sutil, serifada
   display (Fraunces), mono para detalhes, acento verde-limão.
   ========================================================= */

/* ===== Fontes locais (Inter + Montserrat, ambas variable) ===== */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Tokens de fonte ----- */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Montserrat', 'Inter', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif:   'Montserrat', 'Inter', sans-serif;
  --font-mono:    'Inter', ui-monospace, SFMono-Regular, monospace;

  /* Tokens de cor ----- */
  --bg: #0c0e0d;
  --bg-elev: #141715;
  --surface: #161a18;
  --line: #262b28;
  --line-strong: #333a36;
  --ink: #e8ece9;
  --ink-soft: #a3aaa5;
  --ink-faint: #6b726d;
  --accent: #259261;
  --accent-deep: #218759;
  --accent-ink: #fbfbf8;
  --grid: rgba(255,255,255,0.025);
  --glow: rgba(198,242,78,0.10);
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f4f3ee;
  --bg-elev: #fbfbf8;
  --surface: #fbfbf8;
  --line: #e0ddd2;
  --line-strong: #cbc7b8;
  --ink: #1c1f1b;
  --ink-soft: #565b53;
  --ink-faint: #8c8f85;
  --accent: #259261;
  --accent-deep: #218759;
  --accent-ink: #fbfbf8;
  --grid: rgba(0,0,0,0.03);
  --glow: rgba(91,124,18,0.10);
  --shadow: 0 20px 60px -24px rgba(40,42,30,0.22);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .5s ease, color .5s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  z-index: 0;
  pointer-events: none;
}
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; width: 100%; }
.page { flex: 1 0 auto; }

.mono {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- NAV ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: var(--ink);
  text-decoration: none;
}
.brand small {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding-bottom: 2px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}
.nav-links a.navlink {
  font-size: .9rem;
  color: var(--ink-soft);
  transition: color .2s;
  position: relative;
}
.nav-links a.navlink:hover { color: var(--ink); }
.nav-links a.navlink.active { color: var(--ink); }
.nav-links a.navlink.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -26px;
  height: 2px;
  background: var(--accent);
}
.nav-links a.pill {
  border: 1px solid var(--line-strong);
  padding: 9px 18px;
  border-radius: 100px;
  color: var(--ink);
  transition: all .2s;
}
.nav-links a.pill:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.nav-tools { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

.lang-select { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  transition: border-color .2s;
}
.lang-btn:hover { border-color: var(--accent); }
.lang-btn svg { width: 12px; height: 12px; }
.lang-menu {
  position: absolute;
  top: 52px; right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 6px;
  display: none;
  flex-direction: column;
  min-width: 160px;
  box-shadow: var(--shadow);
}
.lang-menu.open { display: flex; }
.lang-menu a {
  color: var(--ink-soft);
  padding: 9px 12px;
  border-radius: 7px;
  font-size: .88rem;
  transition: background .15s, color .15s;
}
.lang-menu a:hover { background: var(--surface); color: var(--ink); }
.lang-menu a.active { color: var(--accent-deep); }
[data-theme="dark"] .lang-menu a.active { color: var(--accent); }

.theme-toggle {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .25s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: rotate(20deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.icon-sun { display: none; }
[data-theme="light"] .icon-sun { display: block; }
[data-theme="light"] .icon-moon { display: none; }

.nav-mobile-btn {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- BUTTONS ---------- */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .95rem;
  padding: 15px 30px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 8px 28px -8px var(--accent);
  display: inline-block;
  text-align: center;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px var(--accent); }
.btn-ghost {
  font-size: .95rem;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s, gap .2s;
}
.btn-ghost:hover { color: var(--ink); gap: 12px; }
.btn-outline {
  border: 1px solid var(--line-strong);
  padding: 14px 28px;
  border-radius: 100px;
  font-size: .95rem;
  color: var(--ink);
  display: inline-block;
  transition: all .2s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-deep); }
[data-theme="dark"] .btn-outline:hover { color: var(--accent); }

/* ---------- HERO ---------- */
.hero { padding: 104px 0 88px; position: relative; }
.hero::after {
  content: "";
  position: absolute;
  top: 6%; right: -12%;
  width: 540px; height: 540px;
  background: radial-gradient(circle, var(--glow), transparent 70%);
  z-index: 0;
  pointer-events: none;
}
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5.6vw, 4.7rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: 17ch;
  margin-bottom: 26px;
}
h1 em { font-style: normal; color: var(--accent-deep); }
[data-theme="dark"] h1 em { color: var(--accent); }
.hero-sub {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: 38px;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-stats {
  display: flex;
  gap: 54px;
  margin-top: 76px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.stat .num {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.stat .lbl { font-size: .85rem; color: var(--ink-soft); }

/* ---------- PAGE HEAD (inner pages) ---------- */
.page-head { padding: 84px 0 20px; position: relative; }
.page-head .mono { display: block; margin-bottom: 18px; }
.page-head h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  max-width: 20ch;
  margin-bottom: 18px;
}
.page-head p { color: var(--ink-soft); font-size: 1.08rem; max-width: 60ch; }

/* ---------- SECTION SHELL ---------- */
section { padding: 88px 0; position: relative; }
.sec-head { margin-bottom: 54px; max-width: 62ch; }
.sec-head .mono { display: block; margin-bottom: 16px; }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.sec-head p { color: var(--ink-soft); font-size: 1.04rem; }

/* ---------- SERVICES GRID ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.svc {
  padding: 34px 30px 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .3s;
}
.svc:hover { background: var(--bg-elev); }
.svc:nth-child(3n) { border-right: none; }
.svc-num {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-faint);
  letter-spacing: .1em;
}
.svc-icon {
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  display: grid; place-items: center;
  margin: 16px 0 20px;
  color: var(--accent-deep);
  transition: all .3s;
}
[data-theme="dark"] .svc-icon { color: var(--accent); }
.svc:hover .svc-icon {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.svc-icon svg { width: 22px; height: 22px; }
.svc h3 {
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 5px;
}
.svc .svc-route {
  font-family: var(--font-mono);
  font-size: .71rem;
  color: var(--accent-deep);
  margin-bottom: 13px;
  display: block;
  word-break: break-all;
}
[data-theme="dark"] .svc .svc-route { color: var(--accent); }
.svc p { font-size: .91rem; color: var(--ink-soft); margin-bottom: 16px; }
.svc ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.svc li {
  font-size: .82rem;
  color: var(--ink-soft);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.svc li::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--accent);
  flex-shrink: 0;
  transform: rotate(45deg);
  margin-top: 8px;
}

/* ---------- FEATURE GRID ---------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.feat {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 28px;
  background: var(--surface);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: border-color .3s, transform .3s;
}
.feat:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.feat-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent-deep);
  flex-shrink: 0;
  line-height: 1;
}
[data-theme="dark"] .feat-mark { color: var(--accent); }
.feat h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.06rem;
  margin-bottom: 6px;
}
.feat p { font-size: .89rem; color: var(--ink-soft); }

/* ---------- ARCHITECTURE ---------- */
.arch {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 42px 38px;
}
.arch-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
}
.arch-node {
  flex: 1;
  min-width: 132px;
  text-align: center;
  padding: 22px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}
.arch-node.solid { border-style: solid; }
.arch-node.gw { border-style: solid; background: var(--bg-elev); }
.arch-node .mono { margin-bottom: 6px; display: block; }
.arch-node strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
}
.arch-node .sub {
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--ink-faint);
  display: block;
  margin-top: 4px;
}
.arch-arrow {
  display: grid; place-items: center;
  padding: 0 6px;
  color: var(--accent-deep);
}
[data-theme="dark"] .arch-arrow { color: var(--accent); }
.arch-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1.4;
  min-width: 160px;
}
.arch-services .arch-node { padding: 12px; }

/* ---------- CLUSTER CARDS ---------- */
.cluster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cluster {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  padding: 26px 24px;
  transition: border-color .3s, transform .3s;
}
.cluster:hover { border-color: var(--accent); transform: translateY(-3px); }
.cluster .dotline {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.cluster .dotline .d {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.cluster code {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink);
  word-break: break-all;
}
.cluster p { font-size: .86rem; color: var(--ink-soft); margin-top: 8px; }

/* ---------- CODE BLOCK ---------- */
.codeblock {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg-elev);
  overflow: hidden;
  margin-top: 20px;
}
.codeblock .cb-bar {
  display: flex; gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.codeblock .cb-bar i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-strong);
  display: block;
}
.codeblock pre {
  padding: 20px 22px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.85;
  color: var(--ink-soft);
}
.codeblock pre .k { color: var(--accent-deep); }
[data-theme="dark"] .codeblock pre .k { color: var(--accent); }
.codeblock pre .c { color: var(--ink-faint); }

/* ---------- SPLIT / VALUE ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split-list { display: flex; flex-direction: column; gap: 22px; }
.split-list .row { display: flex; gap: 16px; align-items: flex-start; }
.split-list .row .ic {
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--accent-deep);
}
[data-theme="dark"] .split-list .row .ic { color: var(--accent); }
.split-list .row .ic svg { width: 18px; height: 18px; }
.split-list .row h4 { font-weight: 500; font-size: 1.02rem; margin-bottom: 3px; }
.split-list .row p { font-size: .88rem; color: var(--ink-soft); }

/* ---------- CTA STRIP ---------- */
.cta-strip {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--glow), transparent 70%);
}
.cta-strip h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  letter-spacing: -.02em;
  margin-bottom: 14px;
  position: relative;
}
.cta-strip p {
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 0 auto 30px;
  position: relative;
}
.cta-strip .hero-cta { justify-content: center; position: relative; }

/* ---------- PROSE / VALUES (about) ---------- */
.prose { max-width: 70ch; }
.prose p { color: var(--ink-soft); font-size: 1.04rem; margin-bottom: 20px; }
.prose p strong { color: var(--ink); font-weight: 500; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.value {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 30px 26px;
  background: var(--surface);
}
.value .vn {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-faint);
  letter-spacing: .12em;
}
.value h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 12px 0 8px;
}
.value p { font-size: .9rem; color: var(--ink-soft); }

.stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
/* fallback para 4 colunas se houver 4 filhos */
.stat-band:has(> .sb:nth-child(4)) {
  grid-template-columns: repeat(4, 1fr);
}
.stat-band .sb {
  padding: 32px 24px;
  border-right: 1px solid var(--line);
}
.stat-band .sb:last-child { border-right: none; }
.stat-band .sb .num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.stat-band .sb .lbl { font-size: .84rem; color: var(--ink-soft); }

/* ---------- CONTACT ---------- */
.contact-shell {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
.contact-aside {
  padding: 46px 38px;
  border-right: 1px solid var(--line);
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
}
.contact-aside h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 13px;
}
.contact-aside > p { font-size: .94rem; color: var(--ink-soft); margin-bottom: 34px; }
.contact-info { display: flex; flex-direction: column; gap: 20px; margin-top: auto; }
.ci-item .mono { display: block; margin-bottom: 4px; }
.ci-item span, .ci-item a { font-size: .94rem; }
.ci-item a:hover { color: var(--accent-deep); }
[data-theme="dark"] .ci-item a:hover { color: var(--accent); }

form.contact-form { padding: 46px 42px; }
.field { margin-bottom: 20px; }
.field label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 9px;
}
.field label .req { color: var(--accent-deep); }
[data-theme="dark"] .field label .req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 13px 15px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 300;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* honeypot — escondido de humanos, visível para bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.captcha-box {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.captcha-q {
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 13px 16px;
  white-space: nowrap;
}
.captcha-box input { max-width: 130px; }
.form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.form-note { font-size: .78rem; color: var(--ink-faint); max-width: 34ch; }
.form-alert {
  margin-bottom: 24px;
  padding: 14px 17px;
  border-radius: 9px;
  font-size: .88rem;
}
.form-alert.ok {
  border: 1px solid var(--accent);
  background: var(--glow);
  color: var(--ink);
}
.form-alert.err {
  border: 1px solid #e0563f;
  background: rgba(224,86,63,.1);
  color: var(--ink);
}

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.faq summary {
  padding: 22px 26px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus {
  font-family: var(--font-mono);
  color: var(--accent-deep);
  transition: transform .25s;
  flex-shrink: 0;
}
[data-theme="dark"] .faq summary .plus { color: var(--accent); }
.faq[open] summary .plus { transform: rotate(45deg); }
.faq .faq-body {
  padding: 0 26px 24px;
  color: var(--ink-soft);
  font-size: .94rem;
}

/* ---------- FOOTER ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 60px 0 38px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.foot-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}
.foot-brand { max-width: 34ch; }
.foot-brand .brand { margin-bottom: 13px; }
.foot-brand p { font-size: .89rem; color: var(--ink-soft); }
.foot-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.foot-col h5 {
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 15px;
}
.foot-col a {
  display: block;
  font-size: .89rem;
  color: var(--ink-soft);
  margin-bottom: 9px;
  transition: color .2s;
}
.foot-col a:hover { color: var(--ink); }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.foot-bottom p { font-size: .79rem; color: var(--ink-faint); }
.foot-social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.foot-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  transition: color .18s ease, transform .18s ease;
}
.foot-social-link:hover {
  color: var(--ink);
  transform: translateY(-1px);
}
.foot-social-link svg {
  display: block;
}

/* ---------- REVEAL ANIM ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ---------- FOOTER ADDRESS ---------- */
.foot-col-contact { min-width: 240px; }
.foot-address {
  margin-top: 12px;
  font-size: .82rem;
  color: var(--ink-soft);
  font-style: normal;
  line-height: 1.6;
}

/* ---------- PRICING PAGE ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.plan {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 30px 24px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color .3s, transform .3s;
}
.plan:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.plan-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
}
.plan-featured:hover { border-color: var(--accent); }
.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 700;
}
.plan-head { margin-bottom: 18px; }
.plan-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.plan-tag {
  font-size: .82rem;
  color: var(--ink-soft);
  min-height: 2.6em;
}
.plan-price {
  padding: 18px 0 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.plan-price-val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.4rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.plan-price-unit {
  font-size: .9rem;
  color: var(--ink-soft);
  margin-left: 4px;
}
.plan-price-sub {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
}
.plan-price-consult {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink);
}
.plan-specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  flex: 1;
}
.plan-specs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: .88rem;
}
.spec-label {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.spec-val {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}
.plan-consult {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.plan-cta { text-align: center; width: 100%; }

/* ---------- INCLUDED IN ALL PLANS ---------- */
.included-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 880px;
}
.included-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: .94rem;
  color: var(--ink-soft);
}
.included-item .check {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--accent-deep);
  margin-top: 2px;
}
[data-theme="dark"] .included-item .check { color: var(--accent); }

/* ---------- OVERAGE ---------- */
.overage {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: 13px;
  padding: 26px 30px;
  background: var(--bg-elev);
  max-width: 880px;
}
.overage-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--accent-deep);
}
[data-theme="dark"] .overage-icon { color: var(--accent); }
.overage-icon svg { width: 22px; height: 22px; }
.overage h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.overage p { color: var(--ink-soft); font-size: .92rem; }

/* ---------- ISOLATION CARDS ---------- */
.iso-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.iso-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  padding: 28px 24px;
  transition: border-color .3s, transform .3s;
}
.iso-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.iso-card .iso-num {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--accent-deep);
  letter-spacing: .12em;
  margin-bottom: 14px;
  display: block;
}
[data-theme="dark"] .iso-card .iso-num { color: var(--accent); }
.iso-card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.iso-card p { font-size: .87rem; color: var(--ink-soft); }

/* ---------- CLUSTER FLAGS GRID ---------- */
.cluster-flags {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cluster-flag {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  padding: 24px 20px;
  text-align: center;
  transition: border-color .3s, transform .3s;
}
.cluster-flag:hover { border-color: var(--accent); transform: translateY(-3px); }
.cluster-flag .flag {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}
.cluster-flag .country {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.cluster-flag code {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-faint);
  word-break: break-all;
}

/* ---------- CATEGORY NAV (services page) ---------- */
.cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: .82rem;
  color: var(--ink-soft);
  background: var(--surface);
  transition: all .2s;
}
.cat-pill:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.cat-count {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--accent-deep);
  background: var(--bg);
  padding: 2px 7px;
  border-radius: 100px;
  min-width: 22px;
  text-align: center;
}
[data-theme="dark"] .cat-count { color: var(--accent); }

/* ---------- CATEGORY BLOCK ---------- */
.cat-block { margin-bottom: 56px; scroll-margin-top: 90px; }
.cat-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -.01em;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.cat-title .mono { font-size: .68rem; }

/* ---------- SERVICE CARDS: deps and endpoints ---------- */
.svc-endpoints {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.svc-endpoints code {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  margin-top: 4px;
  word-break: break-all;
}
.svc-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 6px;
}
.svc-deps {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.dep-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.dep-pill {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink);
  background: var(--bg);
  transition: all .15s;
}
.dep-pill:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}
[data-theme="dark"] .dep-pill:hover { color: var(--accent); }
.dep-pills.muted .dep-pill {
  color: var(--ink-soft);
  border-style: dashed;
}
.dep-pill.more {
  color: var(--ink-faint);
  border-color: var(--line);
}
.svc-standalone {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-faint);
  font-style: normal;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .iso-grid { grid-template-columns: repeat(2, 1fr); }
  .cluster-flags { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc:nth-child(3n) { border-right: 1px solid var(--line); }
  .svc:nth-child(2n) { border-right: none; }
  .cluster-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-band .sb:nth-child(2) { border-right: none; }
}
@media (max-width: 820px) {
  .wrap { padding: 0 22px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 22px 28px;
    gap: 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links a.navlink.active::after { display: none; }
  .nav-mobile-btn { display: grid; }
  .feat-grid { grid-template-columns: 1fr; }
  .contact-shell { grid-template-columns: 1fr; }
  .contact-aside { border-right: none; border-bottom: 1px solid var(--line); }
  .arch-flow { flex-direction: column; }
  .arch-arrow { transform: rotate(90deg); padding: 8px 0; }
  .hero { padding: 70px 0 60px; }
  section { padding: 64px 0; }
  .page-head { padding: 60px 0 10px; }
  .cta-strip { padding: 44px 28px; }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc { border-right: none !important; }
  .stat-band { grid-template-columns: 1fr; }
  .stat-band .sb { border-right: none; border-bottom: 1px solid var(--line); }
  .stat-band .sb:last-child { border-bottom: none; }
  .hero-stats { gap: 30px; }
  form.contact-form, .contact-aside { padding: 32px 24px; }
  .field-row { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .iso-grid { grid-template-columns: 1fr; }
  .cluster-flags { grid-template-columns: 1fr; }
  .included-grid { grid-template-columns: 1fr; }
  .overage { flex-direction: column; gap: 14px; }
}

/* =========================================================
   REBUILD ADDITIONS (rebobinada de 2026)
   Componentes novos: reqres, loc-flags, sol-grid, prose,
   trial-callout, howit, affiliates, status, plan-grid 4cols.
   ========================================================= */

/* --- Header buttons: Console + Get started --- */
.nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  font: 700 13.5px/1 var(--font-sans);
  text-decoration: none; letter-spacing: .01em;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav-btn-console {
  color: var(--ink); border: 1px solid var(--line);
  background: transparent;
}
.nav-btn-console:hover { border-color: var(--ink-soft); }
.nav-btn-start {
  color: var(--accent-ink); background: var(--accent);
  border: 1px solid var(--accent);
}
.nav-btn-start:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

@media (max-width: 860px) {
  .nav-btn-console { display: none; }
}
@media (max-width: 640px) {
  .nav-btn-start { display: none; }
}

/* --- Request/Response side-by-side --- */
.reqres-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 30px;
}
.reqres {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.reqres-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.reqres-label {
  font: 500 12px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.reqres .mono { font-size: 12.5px; color: var(--ink); }
.reqres pre {
  margin: 0; padding: 18px 20px;
  font: 13px/1.65 var(--font-mono);
  color: var(--ink);
  overflow-x: auto;
  background: transparent;
}
.reqres pre .c  { color: var(--ink-soft); }
.reqres pre .k  { color: var(--accent-deep); font-weight: 600; }
.reqres pre .s  { color: var(--ink); }
.reqres pre .ok { color: var(--accent-deep); font-weight: 600; }

@media (max-width: 820px) {
  .reqres-grid { grid-template-columns: 1fr; }
}

/* --- Location flags (sem nome técnico, simples) --- */
.loc-flags {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.loc-flag {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 24px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
}
.loc-flag .flag {
  display: block;
  width: 56px;
  height: auto;
  margin-bottom: 4px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.loc-flag .country {
  font: 500 14px/1.3 var(--font-sans);
  color: var(--ink);
}
.loc-note {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 14px;
  font-style: normal;
}
@media (max-width: 640px) {
  .loc-flags { grid-template-columns: repeat(2, 1fr); }
}

/* --- Solutions home grid (cards menores) --- */
.sol-grid-home {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.sol-card-home {
  display: flex; flex-direction: column;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.sol-card-home:hover {
  border-color: var(--ink-soft);
  transform: translateY(-2px);
}
.sol-card-home h4 {
  font: 600 17px/1.3 var(--font-serif);
  color: var(--ink);
  margin: 0 0 8px;
}
.sol-card-count {
  font: 400 13px/1 var(--font-mono);
  color: var(--ink-soft);
}
@media (max-width: 860px) { .sol-grid-home { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sol-grid-home { grid-template-columns: 1fr; } }

/* --- Solutions full grid (página solutions.php) --- */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.sol-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  scroll-margin-top: 100px;
}
.sol-card-title {
  font: 600 22px/1.25 var(--font-serif);
  color: var(--ink);
  margin: 0 0 12px;
}
.sol-card-desc {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0 0 20px;
}
.sol-card-services { margin-top: 14px; }
.sol-svc-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.sol-svc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 12px/1 var(--font-sans);
  color: var(--ink);
  background: var(--bg);
}
.sol-svc-pill .sol-svc-icon {
  display: inline-flex; width: 14px; height: 14px;
  color: var(--accent-deep);
}
.sol-svc-pill svg { width: 14px; height: 14px; }
@media (max-width: 820px) { .sol-grid { grid-template-columns: 1fr; } }

/* --- How it works (steps) --- */
.howit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.howit {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.howit-num {
  display: inline-block;
  font: 600 28px/1 var(--font-serif);
  color: var(--accent);
  margin-bottom: 14px;
}
.howit h4 {
  font: 600 17px/1.3 var(--font-serif);
  color: var(--ink);
  margin: 0 0 8px;
}
.howit p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 820px) { .howit-grid { grid-template-columns: 1fr; } }

/* --- Prose (about, affiliates) --- */
.prose {
  max-width: 760px;
  margin: 0 auto;
}
.prose p {
  font: 400 17px/1.7 var(--font-sans);
  color: var(--ink);
  margin: 0 0 18px;
}
.prose .lead {
  font: 400 20px/1.55 var(--font-serif);
  color: var(--ink);
  margin: 0 0 24px;
}

/* --- Trial callout (pricing) --- */
.trial-callout {
  display: flex; align-items: center; gap: 22px;
  padding: 24px 28px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  margin-top: 30px;
}
.trial-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
}
.trial-icon svg { width: 26px; height: 26px; }
.trial-callout h3 {
  font: 600 19px/1.3 var(--font-serif);
  margin: 0 0 4px;
  color: var(--ink);
}
.trial-callout p {
  margin: 0; color: var(--ink-soft); font-size: 14.5px;
}
@media (max-width: 640px) {
  .trial-callout { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --- 4-column plan grid --- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .plan-grid { grid-template-columns: 1fr; } }

.plan-price-consult {
  font: 600 22px/1 var(--font-serif);
  color: var(--ink);
}
.plan-consult {
  color: var(--ink-soft);
  font-style: normal;
  font-size: 13px;
}

/* --- Service category nav (pills) --- */
.cat-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cat-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font: 500 13.5px/1 var(--font-sans);
  transition: border-color .18s ease, background .18s ease;
}
.cat-pill:hover { border-color: var(--ink-soft); }
.cat-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--bg);
  font: 500 11.5px/1 var(--font-mono);
  color: var(--ink-soft);
}
.cat-block { margin-bottom: 60px; }
.cat-block .cat-title {
  display: flex; align-items: baseline; gap: 14px;
  font: 600 28px/1.2 var(--font-serif);
  color: var(--ink);
  margin: 0 0 22px;
}
.cat-block .cat-title .mono {
  font-size: 13px;
  color: var(--ink-soft);
}

/* --- Affiliates headline --- */
.aff-headline {
  display: flex; align-items: center; gap: 24px;
  margin-top: 30px; padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.aff-pct {
  font: 700 64px/1 var(--font-serif);
  color: var(--accent);
}
.aff-pct-l { display: flex; flex-direction: column; gap: 4px; }
.aff-pct-l strong {
  font: 600 19px/1.3 var(--font-serif);
  color: var(--ink);
}
.aff-pct-l span {
  font: 400 14px/1.4 var(--font-mono);
  color: var(--ink-soft);
}
@media (max-width: 540px) {
  .aff-headline { flex-direction: column; align-items: flex-start; gap: 12px; }
  .aff-pct { font-size: 48px; }
}

/* --- Stat band (about) --- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.stat-band .sb { text-align: center; }
.stat-band .num {
  font: 700 36px/1 var(--font-serif);
  color: var(--accent);
  margin-bottom: 6px;
}
.stat-band .lbl {
  font: 400 13px/1.3 var(--font-sans);
  color: var(--ink-soft);
}
@media (max-width: 720px) { .stat-band { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

/* --- STATUS PAGE --- */
.status-overall {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.status-overall-lbl {
  font: 500 14px/1 var(--font-sans);
  color: var(--ink);
}
.status-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.st-ok    { background: #4ec97a; box-shadow: 0 0 0 4px color-mix(in srgb, #4ec97a 25%, transparent); }
.st-degr  { background: #e0b03c; box-shadow: 0 0 0 4px color-mix(in srgb, #e0b03c 25%, transparent); }
.st-down  { background: #d9534f; box-shadow: 0 0 0 4px color-mix(in srgb, #d9534f 25%, transparent); }
.st-maint { background: #7aa6e0; box-shadow: 0 0 0 4px color-mix(in srgb, #7aa6e0 25%, transparent); }

.status-table {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.status-thead {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.2fr 1fr;
  align-items: center;
  padding: 14px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  gap: 14px;
}
.status-row { border-bottom: 1px solid var(--line); }
.status-row:last-child { border-bottom: 0; }
.status-row summary {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.2fr 1fr;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  gap: 14px;
  transition: background .12s ease;
}
.status-row summary::-webkit-details-marker { display: none; }
.status-row summary:hover { background: var(--bg); }
.srv-cell { display: flex; flex-direction: column; gap: 4px; }
.srv-name {
  font: 600 15px/1.2 var(--font-sans);
  color: var(--ink);
}
.srv-cat {
  font-size: 11.5px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.loc-cell { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.flag-sm {
  display: inline-block;
  width: 24px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  vertical-align: middle;
}
.srv-server {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.srv-status {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px/1 var(--font-sans);
  color: var(--ink);
}
.srv-notif {
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: 10px;
}
.notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font: 600 12px/1 var(--font-sans);
}
.notif-empty { color: var(--ink-soft); font-size: 14px; }
.chev {
  color: var(--ink-soft);
  transition: transform .18s ease;
}
.status-row[open] .chev { transform: rotate(180deg); }

.status-detail {
  padding: 22px 26px 28px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.status-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.sm {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.sm-l {
  font: 500 11.5px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.sm-v {
  font: 600 18px/1.2 var(--font-serif);
  color: var(--ink);
}

.status-history { margin-bottom: 22px; }
.hist-bar {
  display: flex; gap: 3px;
  margin-top: 8px;
}
.hist-tick {
  flex: 1;
  height: 26px;
  border-radius: 3px;
}
.h-ok   { background: #4ec97a; }
.h-degr { background: #e0b03c; }
.h-down { background: #d9534f; }

.status-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.sl-block h5 {
  font: 600 13px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.sl-block ul { list-style: none; padding: 0; margin: 0; }
.sl-block li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 8px;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink);
}
.sl-block li.notif-warn { border-color: #e0b03c; }
.sl-block li.notif-info { border-color: #7aa6e0; }
.inc-date {
  display: inline-block;
  margin-right: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.inc-resolved {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #4ec97a;
  color: #0c0e0d;
  font: 600 11px/1.4 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sl-empty {
  margin: 0;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink-soft);
}

@media (max-width: 820px) {
  .status-thead { display: none; }
  .status-row summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .srv-cell, .loc-cell, .srv-server, .srv-status, .srv-notif {
    width: 100%;
  }
  .srv-notif { justify-content: flex-start; }
  .status-metrics { grid-template-columns: 1fr; }
  .status-lists { grid-template-columns: 1fr; }
}

/* --- Service endpoints code list (services.php) --- */
.svc-endpoints {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.svc-endpoints code {
  display: block;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 400 12px/1.4 var(--font-mono);
  color: var(--ink);
  word-break: break-all;
}
.svc-label {
  display: block;
  font: 500 11.5px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.svc-deps { margin-top: 12px; }
.dep-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.dep-pills.muted .dep-pill { opacity: .72; }
.dep-pill {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font: 500 12px/1.4 var(--font-sans);
  color: var(--ink);
  text-decoration: none;
}
.dep-pill:hover { border-color: var(--ink-soft); }
.svc-standalone {
  margin-top: 12px;
  font: 400 12.5px/1 var(--font-mono);
  color: var(--ink-soft);
}

/* --- Override: turn off any leftover italic from old CSS --- */
em, i, .lbl, .form-note, .hero-sub, .page-head p, .sec-head p { font-style: normal !important; }

/* =========================================================
   ADDITIONS — segunda rebobinada
   Banner urgente, grid de 7 países, etc.
   ========================================================= */

/* --- Urgent banner --- */
.urgent-banner {
  position: relative;
  width: 100%;
  border-bottom: 1px solid var(--line);
  z-index: 50;
}
.urgent-banner.urgent-info {
  background: color-mix(in srgb, #7aa6e0 14%, var(--bg));
  border-bottom-color: #7aa6e0;
}
.urgent-banner.urgent-warning {
  background: color-mix(in srgb, #e0b03c 14%, var(--bg));
  border-bottom-color: #e0b03c;
}
.urgent-banner.urgent-critical {
  background: color-mix(in srgb, #d9534f 18%, var(--bg));
  border-bottom-color: #d9534f;
  color: var(--ink);
}
.urgent-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
}
.urgent-msg {
  flex: 1;
  font: 500 14px/1.45 var(--font-sans);
  color: var(--ink);
}
.urgent-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font: 500 13px/1 var(--font-sans);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.urgent-btn:hover {
  background: var(--ink);
  color: var(--bg);
}
.urgent-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.urgent-close:hover {
  background: var(--surface);
  color: var(--ink);
}

@media (max-width: 640px) {
  .urgent-inner { gap: 10px; padding: 10px 0; }
  .urgent-msg { font-size: 13px; }
  .urgent-btn { padding: 6px 11px; font-size: 12px; }
}

/* --- 7 países: grid responsivo --- */
.loc-flags {
  grid-template-columns: repeat(7, 1fr);
}
@media (max-width: 1000px) {
  .loc-flags { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .loc-flags { grid-template-columns: repeat(2, 1fr); }
}

/* --- Ajuste fino para o logo SVG inline ---
   O HTML contém ambos os logos (um pra fundo dark, outro pra fundo light);
   o CSS mostra o correto conforme data-theme do <html>. */
.brand .brand-logo {
  display: none;
  height: 28px;
  width: auto;
}
[data-theme="dark"]  .brand .brand-logo-for-dark  { display: block; }
[data-theme="light"] .brand .brand-logo-for-light { display: block; }
/* Fallback (sem data-theme = trata como dark, default do site) */
html:not([data-theme="light"]) .brand .brand-logo-for-dark { display: block; }
.foot-brand .brand .brand-logo {
  height: 32px;
}

/* --- Required indicator no formulário: já está sem itálico,
       mas vou deixar mais discreto --- */
.field .lbl em {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 400;
  margin-left: 4px;
  font-style: normal;
}

/* =========================================================
   TERCEIRA REBOBINADA — componentes novos
   - svc-tier (badge gratuito/pago)
   - changelog timeline
   - input file PDF (careers)
   - captcha (consertar layout colado)
   - form note (margem)
   - foot-email
   ========================================================= */

/* --- Badge de tier nos cards de microsserviço --- */
.svc { position: relative; }

/* === Barra superior do card: número à esquerda, ícone de tier à direita === */
.svc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.svc-top .svc-num { margin: 0; }

/* === Ícone do tier — botão pequeno e redondo === */
.svc-tier-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--font-body);
  cursor: help;
  border: 1px solid transparent;
  background: var(--bg);
  color: var(--ink-soft);
  transition: transform .15s ease, background .15s ease;
  padding: 0;
}
.svc-tier-icon:hover, .svc-tier-icon:focus-visible {
  transform: scale(1.08);
  outline: none;
}
.svc-tier-icon.tier-free_always {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.svc-tier-icon.tier-free_with_paid {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}
[data-theme="dark"] .svc-tier-icon.tier-free_with_paid {
  color: var(--accent);
}
.svc-tier-icon.tier-paid {
  background: var(--bg);
  color: var(--ink-soft);
  border-color: var(--line);
}

/* === Tooltip flutuante (renderizado fora de qualquer overflow:hidden) ===
   Usamos um único elemento #tooltip-floater anexado ao <body> pelo JS,
   posicionado via fixed. Assim ele nunca é cortado por containers pais. */
#tooltip-floater {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font: 400 12.5px/1.5 var(--font-body);
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.4);
  visibility: hidden;
}
#tooltip-floater.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
#tooltip-floater::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
/* Quando o tooltip aparece embaixo do anchor, seta aponta pra cima */
#tooltip-floater.tooltip-bottom::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--ink);
}

@media (max-width: 540px) {
  .svc-tier-icon { width: 26px; height: 26px; font-size: 12px; }
  #tooltip-floater { max-width: 200px; font-size: 12px; }
}

/* --- Footer e-mail (sem endereço/telefone) --- */
.foot-email {
  margin-top: 12px !important;
}
.foot-email a {
  font: 500 14.5px/1 var(--font-mono);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color .15s ease;
}
.foot-email a:hover {
  border-color: var(--accent);
}

/* --- Captcha: corrigir layout colado --- */
.captcha-field {
  margin-top: 6px;
}
.captcha-field .lbl {
  display: block;
  margin-bottom: 10px;
}
.captcha-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.captcha-q {
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  font: 500 15px/1 var(--font-mono);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  white-space: nowrap;
}
.captcha-row input[type="number"] {
  flex: 1;
  max-width: 180px;
}

/* --- Margem entre botão Enviar e a nota --- */
.form-submit {
  margin-top: 8px;
}
.form-note {
  margin-top: 18px !important;
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-soft);
}

/* --- Input file (careers - upload do PDF) --- */
.field input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 10px;
  font: 400 14px/1.4 var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.field input[type="file"]:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
}
.field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: 500 13px/1 var(--font-sans);
  color: var(--ink);
  cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* =========================================================
   CHANGELOG
   ========================================================= */
.changelog {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.cl-month-title {
  font: 600 22px/1.2 var(--font-serif);
  color: var(--ink);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cl-entries {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cl-entry {
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.cl-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cl-date {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.cl-svc, .cl-ver {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font: 500 11.5px/1.4 var(--font-mono);
  color: var(--ink-soft);
}
.cl-type {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 10.5px/1.5 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cl-type.cl-added {
  background: color-mix(in srgb, #4ec97a 22%, transparent);
  color: #2a8b4d;
}
[data-theme="dark"] .cl-type.cl-added { color: #4ec97a; }
.cl-type.cl-changed {
  background: color-mix(in srgb, #7aa6e0 22%, transparent);
  color: #4a6ea3;
}
[data-theme="dark"] .cl-type.cl-changed { color: #9bbfe8; }
.cl-type.cl-fixed {
  background: color-mix(in srgb, #b58be0 22%, transparent);
  color: #6e4ba0;
}
[data-theme="dark"] .cl-type.cl-fixed { color: #c6a4e8; }
.cl-type.cl-security {
  background: color-mix(in srgb, #d9534f 22%, transparent);
  color: #b03835;
}
[data-theme="dark"] .cl-type.cl-security { color: #e87a76; }
.cl-type.cl-deprecated {
  background: color-mix(in srgb, #e0b03c 22%, transparent);
  color: #8a6e1a;
}
[data-theme="dark"] .cl-type.cl-deprecated { color: #e8c46a; }

.cl-title {
  font: 600 18px/1.35 var(--font-serif);
  color: var(--ink);
  margin: 0 0 8px;
}
.cl-body {
  font: 400 14.5px/1.55 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 540px) {
  .cl-entry { padding: 18px 20px; }
  .cl-meta { gap: 8px; }
}

/* --- Flash messages (sucesso / erro) --- */
.flash {
  margin-top: 24px;
  padding: 14px 18px;
  border-radius: 10px;
  font: 500 14.5px/1.5 var(--font-sans);
}
.flash-ok {
  background: color-mix(in srgb, #4ec97a 16%, var(--bg));
  color: var(--ink);
  border: 1px solid #4ec97a;
}
.flash-err {
  background: color-mix(in srgb, #d9534f 16%, var(--bg));
  color: var(--ink);
  border: 1px solid #d9534f;
}

/* =========================================================
   FORMULÁRIO AJAX — loading no botão, feedback inline
   ========================================================= */

/* Form sem aside, centralizado */
.contact-form-solo {
  max-width: 640px;
  margin: 0 auto;
}

/* Botão com loading */
.form-submit {
  position: relative;
  min-width: 180px;
}
.form-submit .btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-left: 10px;
  vertical-align: middle;
}
.form-submit.is-loading {
  cursor: wait;
  opacity: .85;
}
.form-submit.is-loading .btn-spinner {
  display: inline-block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Feedback inline (sucesso/erro) abaixo do botão */
.form-feedback {
  margin-top: 16px;
  padding: 0;
  border-radius: 10px;
  font: 500 14px/1.5 var(--font-body);
  min-height: 0;
  transition: all .15s ease;
}
.form-feedback:empty {
  margin-top: 0;
}
.form-feedback-ok {
  padding: 14px 18px;
  background: color-mix(in srgb, #4ec97a 16%, var(--bg));
  border: 1px solid #4ec97a;
  color: var(--ink);
}
.form-feedback-err {
  padding: 14px 18px;
  background: color-mix(in srgb, #d9534f 16%, var(--bg));
  border: 1px solid #d9534f;
  color: var(--ink);
}

/* Link dentro da nota do form (área de cliente) */
.form-note a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
[data-theme="dark"] .form-note a {
  color: var(--accent);
}
.form-note a:hover {
  text-decoration-thickness: 2px;
}

/* =========================================================
   LEGAL DOCS + API DOCS
   ========================================================= */

/* --- Container do documento legal --- */
.legal-doc {
  max-width: 780px;
  margin: 0 auto;
  font: 400 16px/1.7 var(--font-body);
  color: var(--ink);
}
.legal-doc .legal-updated {
  font: 500 13px/1.4 var(--font-mono);
  color: var(--ink-soft);
  margin: 0 0 32px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.legal-doc h2 {
  font: 600 22px/1.3 var(--font-display);
  margin: 40px 0 16px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.legal-doc h3 {
  font: 600 17px/1.4 var(--font-display);
  margin: 28px 0 12px;
  color: var(--ink);
}
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px 22px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
[data-theme="dark"] .legal-doc a { color: var(--accent); }
.legal-doc code {
  font: 500 13.5px/1.4 var(--font-mono);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.legal-doc pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 16px;
}
.legal-doc pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--ink);
}

/* Tabela em legal/docs */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 22px;
  font-size: 14.5px;
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--line);
}
.legal-table th {
  background: var(--surface);
  font-weight: 600;
  color: var(--ink);
}
.legal-table td { color: var(--ink-soft); }

/* --- API docs: grid lateral + conteúdo --- */
.docs-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}
.docs-sidebar {
  position: sticky;
  top: 90px;
  font: 400 14.5px/1.5 var(--font-body);
}
.docs-section { margin-bottom: 28px; }
.docs-section h4 {
  font: 600 11.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.docs-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}
.docs-section li { margin: 0; }
.docs-section a {
  display: block;
  padding: 6px 14px;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: all .15s ease;
}
.docs-section a:hover {
  color: var(--ink);
  border-left-color: var(--accent);
}
.docs-section a.active {
  color: var(--accent-deep);
  border-left-color: var(--accent);
  font-weight: 600;
}
[data-theme="dark"] .docs-section a.active { color: var(--accent); }

.docs-content {
  max-width: 720px;
  font: 400 16px/1.7 var(--font-body);
}
.docs-content h2 {
  font: 600 28px/1.2 var(--font-display);
  margin: 0 0 24px;
  letter-spacing: -.01em;
}
.docs-content h3,
.docs-content h4,
.docs-content p,
.docs-content ul,
.docs-content ol,
.docs-content pre,
.docs-content table,
.docs-content code { /* reusa estilos legal-doc */ }
.docs-content h3 {
  font: 600 19px/1.3 var(--font-display);
  margin: 28px 0 12px;
}
.docs-content p { margin: 0 0 14px; }
.docs-content ul, .docs-content ol { margin: 0 0 16px 22px; }
.docs-content li { margin-bottom: 6px; }
.docs-content a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="dark"] .docs-content a { color: var(--accent); }
.docs-content code {
  font: 500 13.5px/1.4 var(--font-mono);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.docs-content pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 16px;
}
.docs-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--ink);
}

/* CTA fineprint */
.cta-fineprint {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-soft);
}
.cta-fineprint a {
  color: inherit;
  text-decoration: underline;
}

/* Responsive: docs em mobile vira coluna */
@media (max-width: 900px) {
  .docs-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .docs-sidebar {
    position: static;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }
}

/* =========================================================
   COMPONENTES NOVOS (reformulação 2026-05)
   ========================================================= */

/* ---- iso-grid em 3 colunas (hierarquia da home) ---- */
.iso-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .iso-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .iso-grid-3 { grid-template-columns: 1fr; }
}

/* ---- check inline (lista de bullets em cards/listas) ---- */
.check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* ---- feat-bullets (lista de pontos dentro do card de feature) ---- */
.feat-bullets {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.feat-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .86rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.feat-bullets li::marker,
.feat-bullets li::before { content: none; display: none; }
.feat-bullets li .check {
  margin-top: 2px;
}

/* ---- free callout (página pricing) ---- */
.free-callout {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 38px 36px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.free-callout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, var(--glow), transparent 65%);
  opacity: .6;
  pointer-events: none;
}
.free-callout > * { position: relative; z-index: 1; }
.free-callout-head .mono { display: block; margin-bottom: 14px; }
.free-callout-head h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.free-callout-head p { color: var(--ink-soft); font-size: .98rem; }
.free-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.free-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .96rem;
}
.free-list li::marker,
.free-list li::before { content: none; display: none; }
.free-note {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: .82rem;
  color: var(--ink-faint);
  border-top: 1px dashed var(--line);
  padding-top: 16px;
}
@media (max-width: 820px) {
  .free-callout { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; }
  .free-callout-head h2 { font-size: 1.6rem; }
}

/* ---- included-grid (incluso em todos os projetos) ---- */
.included-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 28px;
}
.included-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .94rem;
  color: var(--ink);
}
@media (max-width: 700px) {
  .included-grid { grid-template-columns: 1fr; }
}

/* ---- reqres (exemplo request/response da home) ---- */
.reqres-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.reqres {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  overflow: hidden;
}
.reqres-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
}
.reqres-bar .reqres-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-faint);
}
.reqres-bar .mono { color: var(--accent-deep); font-size: .8rem; }
[data-theme="dark"] .reqres-bar .mono { color: var(--accent); }
.reqres pre {
  margin: 0;
  padding: 20px 22px;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.7;
  color: var(--ink);
  background: transparent;
  white-space: pre;
  overflow-x: auto;
}
.reqres pre .c { color: var(--ink-faint); }
.reqres pre .k { color: var(--ink-soft); }
.reqres pre .s { color: var(--accent-deep); }
[data-theme="dark"] .reqres pre .s { color: var(--accent); }
.reqres pre .ok { color: var(--accent); font-weight: 500; }
@media (max-width: 900px) {
  .reqres-grid { grid-template-columns: 1fr; }
  .reqres pre { font-size: .76rem; padding: 16px; }
}

/* ---- loc-note (parágrafo abaixo do mapa de bandeiras) ---- */
.loc-note {
  margin-top: 24px;
  font-size: .85rem;
  color: var(--ink-faint);
  text-align: center;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   CALCULADORA DE PREÇOS
   ========================================================= */
.calc {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 32px;
  position: relative;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 38px;
  align-items: start;
}
@media (max-width: 900px) {
  .calc { padding: 22px; }
  .calc-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Inputs column ---- */
.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.calc-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.calc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.calc-output {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}

/* ---- Currency buttons ---- */
.calc-currency-buttons,
.calc-backup-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.calc-curr-btn,
.calc-backup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: .85rem;
  cursor: pointer;
  transition: all .18s ease;
}
.calc-curr-btn .calc-curr-symbol {
  font-weight: 600;
  color: var(--ink);
}
.calc-curr-btn .calc-curr-code {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.calc-curr-btn:hover,
.calc-backup-btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.calc-curr-btn.is-active,
.calc-backup-btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.calc-curr-btn.is-active .calc-curr-symbol,
.calc-curr-btn.is-active .calc-curr-code {
  color: var(--accent-ink);
}

/* ---- Slider (range custom) ---- */
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin: 8px 0 0;
}
.calc-range::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
}
.calc-range::-moz-range-track {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-elev);
  cursor: pointer;
  margin-top: -8px;
  box-shadow: 0 0 0 1px var(--accent-deep), 0 4px 12px -4px var(--accent);
  transition: transform .15s ease;
}
.calc-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.calc-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.calc-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-elev);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--accent-deep), 0 4px 12px -4px var(--accent);
  transition: transform .15s ease;
}
.calc-range::-moz-range-thumb:hover { transform: scale(1.1); }
.calc-range:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.calc-range-marks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-faint);
  margin-top: 8px;
}

/* ---- Result aside (preço final) ---- */
.calc-result {
  position: sticky;
  top: 100px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 900px) { .calc-result { position: static; } }
.calc-result-head .mono {
  display: block;
  margin-bottom: 8px;
}
.calc-result-sub {
  font-size: .8rem;
  color: var(--ink-faint);
}
.calc-result-price {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.calc-result-val {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  letter-spacing: -.03em;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.05;
}
.calc-result-val.is-free {
  color: var(--accent);
}
.calc-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calc-breakdown-title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.calc-breakdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.calc-breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: .84rem;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.calc-breakdown li.brk-total {
  border-bottom: none;
  border-top: 1px solid var(--line-strong);
  margin-top: 4px;
  padding-top: 12px;
  font-weight: 500;
  color: var(--ink);
  font-size: .94rem;
}
.calc-breakdown li.brk-total .brk-val {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}
.calc-breakdown .brk-label {
  flex: 1;
  min-width: 0;
}
.calc-breakdown .brk-label small {
  display: block;
  font-size: .72rem;
  color: var(--ink-faint);
  margin-top: 2px;
}
.calc-breakdown .brk-val {
  font-family: var(--font-mono);
  white-space: nowrap;
}
.calc-result-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.calc-result-cta .btn-primary,
.calc-result-cta .btn-outline { justify-content: center; text-align: center; }
.calc-note {
  font-size: .76rem;
  color: var(--ink-faint);
  line-height: 1.55;
  margin-top: 4px;
}

/* Modo "grátis" - esconde breakdown */
.calc.is-free .calc-breakdown { display: none; }

/* =========================================================
   AI ASSISTANT — chat demo on home
   ========================================================= */
.ai-chat {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  overflow: hidden;
  max-width: 880px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}
.ai-chat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.ai-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.ai-dot-r { background: #e57373; }
.ai-dot-y { background: #f1c25c; }
.ai-dot-g { background: #7fc97f; }
.ai-chat-title {
  margin-left: 12px;
  font-size: .78rem;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

.ai-chat-body {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ai-msg {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ai-msg-user { flex-direction: row; }
.ai-msg-ai   { flex-direction: row; }

.ai-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
}
.ai-avatar-ai {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-deep);
}
[data-theme="dark"] .ai-avatar-ai { color: var(--accent); }

.ai-bubble {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px 18px;
  border-radius: 4px 14px 14px 14px;
}
.ai-msg-ai .ai-bubble {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 14px 4px 14px 14px;
  align-self: flex-end;
}
.ai-from {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 8px;
}
.ai-msg-ai .ai-from { color: var(--accent-deep); }
[data-theme="dark"] .ai-msg-ai .ai-from { color: var(--accent); }
.ai-bubble p {
  font-size: .94rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 10px;
}
.ai-bubble p:last-child { margin-bottom: 0; }

.ai-steps {
  list-style: none;
  margin: 4px 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .87rem;
  color: var(--ink-soft);
}
.ai-step-tag {
  flex-shrink: 0;
  font-size: .72rem;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-deep);
  border-radius: 3px;
  white-space: nowrap;
}
[data-theme="dark"] .ai-step-tag { color: var(--accent); }

.ai-caption {
  margin-top: 18px;
  font-size: .8rem;
  color: var(--ink-faint);
  text-align: center;
}

@media (max-width: 680px) {
  .ai-chat-body { padding: 22px 16px; gap: 18px; }
  .ai-bubble { padding: 13px 14px; }
  .ai-avatar { width: 32px; height: 32px; }
  .ai-steps li { padding: 8px 10px; font-size: .82rem; flex-direction: column; gap: 4px; }
}

/* Garantia: listas que usam ícone .check não devem mostrar marker do browser */
ul:has(.check) li::marker,
ul:has(.check) li::before { content: none; display: none; }
.ai-steps li::marker,
.ai-steps li::before { content: none; display: none; }

/* =========================================================
   HERO ILUSTRADO — fundo decorativo com SVG animado
   ---------------------------------------------------------
   Compatível com dark/light (currentColor herda do tema).
   ========================================================= */
.hero-illustrated,
.page-head-illustrated {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* mantém o SVG abaixo do conteúdo */
}
.hero-illustrated > .wrap,
.page-head-illustrated > .wrap {
  position: relative;
  z-index: 2;
}
.hero-illu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  color: var(--accent);          /* base verde para os traços */
  pointer-events: none;
}
[data-theme="light"] .hero-illu {
  color: var(--accent-deep);
  opacity: 0.85;
}
[data-theme="dark"] .hero-illu,
:root:not([data-theme="light"]) .hero-illu {
  opacity: 0.9;
}

/* Máscara suave nas bordas pra não brigar com o conteúdo */
.hero-illu {
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 35%, transparent 95%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 35%, transparent 95%);
}

/* ---- HOME illu animações ---- */
.hero-illu-home .hero-lines path {
  stroke-dasharray: 240 80;
  animation: heroDash 18s linear infinite;
}
.hero-illu-home .hero-lines path:nth-child(2) { animation-delay: -3s; }
.hero-illu-home .hero-lines path:nth-child(3) { animation-delay: -6s; animation-duration: 14s; }
.hero-illu-home .hero-lines path:nth-child(4) { animation-delay: -9s; animation-duration: 22s; }
.hero-illu-home .hero-lines path:nth-child(5) { animation-delay: -12s; animation-duration: 20s; }
@keyframes heroDash {
  to { stroke-dashoffset: -320; }
}

.hero-illu-home .hero-node {
  transform-origin: center;
  animation: heroNodeFloat 6s ease-in-out infinite;
}
.hero-illu-home .hero-node-1 { animation-delay: 0s; }
.hero-illu-home .hero-node-2 { animation-delay: -1.2s; }
.hero-illu-home .hero-node-3 { animation-delay: -2.4s; }
.hero-illu-home .hero-node-4 { animation-delay: -3.6s; }
.hero-illu-home .hero-node-5 { animation-delay: -4.8s; }
.hero-illu-home .hero-node-6 { animation-delay: -1.8s; }
@keyframes heroNodeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---- FEATURES illu animações ---- */
.hero-illu-features .hero-card {
  transform-origin: center;
  animation: heroCardFloat 7s ease-in-out infinite;
}
.hero-illu-features .hero-card-a { animation-delay: 0s; }
.hero-illu-features .hero-card-b { animation-delay: -1.5s; }
.hero-illu-features .hero-card-c { animation-delay: -3s; }
.hero-illu-features .hero-card-d { animation-delay: -2s; }
.hero-illu-features .hero-card-e { animation-delay: -4s; }
@keyframes heroCardFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-10px) rotate(-0.5deg); }
}

/* ---- PRICING illu animações ---- */
/* Mesmo padrão visual da home: linhas pontilhadas correndo e blocos flutuando.
   Adicionalmente, as barras de "RPS" oscilam pra simular consumo variável. */
.hero-illu-pricing .hero-lines path {
  stroke-dasharray: 240 80;
  animation: heroDash 18s linear infinite;
}
.hero-illu-pricing .hero-lines path:nth-child(2) { animation-delay: -3s; }
.hero-illu-pricing .hero-lines path:nth-child(3) { animation-delay: -6s; animation-duration: 14s; }
.hero-illu-pricing .hero-lines path:nth-child(4) { animation-delay: -9s; animation-duration: 22s; }
.hero-illu-pricing .hero-lines path:nth-child(5) { animation-delay: -12s; animation-duration: 20s; }

.hero-illu-pricing .hero-node {
  transform-origin: center;
  animation: heroNodeFloat 6s ease-in-out infinite;
}
.hero-illu-pricing .hero-node-1 { animation-delay: 0s; }
.hero-illu-pricing .hero-node-2 { animation-delay: -1.2s; }
.hero-illu-pricing .hero-node-3 { animation-delay: -2.4s; }
.hero-illu-pricing .hero-node-4 { animation-delay: -3.6s; }
.hero-illu-pricing .hero-node-5 { animation-delay: -4.8s; }
.hero-illu-pricing .hero-node-6 { animation-delay: -1.8s; }

/* Barrinhas internas dos medidores oscilam horizontalmente
   (representam request/s variando ao longo do tempo) */
.hero-illu-pricing .hero-meter-bar {
  transform-origin: left center;
  animation: heroMeterBar 3.5s ease-in-out infinite;
}
.hero-illu-pricing .hero-meter-bar-2 { animation-delay: -1.7s; }
@keyframes heroMeterBar {
  0%, 100% { transform: scaleX(1);   }
  50%      { transform: scaleX(0.55);}
}

/* ---- ABOUT illu animações ---- */
.hero-illu-about .hero-ring {
  transform-origin: 900px 300px;
  transform-box: view-box;
  animation: heroRing 4s ease-out infinite;
  opacity: 0;
}
.hero-illu-about .hero-ring-1 { animation-delay: 0s; }
.hero-illu-about .hero-ring-2 { animation-delay: -1s; }
.hero-illu-about .hero-ring-3 { animation-delay: -2s; }
.hero-illu-about .hero-ring-4 { animation-delay: -3s; }
@keyframes heroRing {
  0%   { transform: scale(0.6); opacity: 0; }
  20%  { opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}

.hero-illu-about .hero-dot {
  animation: heroDotPulse 2.6s ease-in-out infinite;
}
.hero-illu-about .hero-dot-2 { animation-delay: -0.65s; }
.hero-illu-about .hero-dot-3 { animation-delay: -1.3s; }
.hero-illu-about .hero-dot-4 { animation-delay: -1.95s; }
@keyframes heroDotPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* Respeito por usuários com prefer-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-illu *,
  .hero-illu {
    animation: none !important;
  }
}

/* =========================================================
   ROTATING WORDS — usado no hero da features
   ========================================================= */
.hero-rotating {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: -6px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink-faint);
}
.hero-rotating-prefix {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-rotating-words {
  position: relative;
  display: inline-block;
  height: 1.4em;
  overflow: hidden;
  min-width: 8em;
}
.hero-rotating-word {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .35s ease, transform .35s ease;
}
[data-theme="light"] .hero-rotating-word { color: var(--accent-deep); }
.hero-rotating-word.is-active {
  opacity: 1;
  transform: translateY(0);
}
.hero-rotating-word.is-leaving {
  opacity: 0;
  transform: translateY(-100%);
}

/* ---- Location buttons na calculadora ---- */
.calc-location-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.calc-loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: .85rem;
  cursor: pointer;
  transition: all .18s ease;
  border-radius: 4px;
}
.calc-loc-btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.calc-loc-btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.calc-loc-flag {
  width: 22px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
  display: block;
}
.calc-loc-name {
  font-weight: 500;
  white-space: nowrap;
}