/* ==========================================================================
   Lógica Sistemas — Design System (tema claro)
   Stack: CSS3 puro, mobile-first, custom properties
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Paleta institucional */
  --color-deep: #082261;
  --color-institutional: #1E3989;
  --color-action: #2958C3;
  --color-action-hover: #1E3989;
  --color-white: #FFFFFF;
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-text: #101828;
  --color-text-muted: #475467;
  --color-text-subtle: #667085;

  /* Semânticas */
  --color-success: #12B76A;
  --color-warning: #F79009;
  --color-danger: #F04438;

  /* Aliases de superfície */
  --color-bg: var(--color-white);
  --color-bg-muted: var(--color-gray-50);
  --color-bg-card: var(--color-white);
  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);

  /* Acento (ação) */
  --color-accent: var(--color-action);
  --color-accent-hover: var(--color-action-hover);
  --color-accent-soft: rgba(41, 88, 195, 0.08);
  --color-accent-glow: rgba(41, 88, 195, 0.18);

  /* Tipografia */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Espaçamento (escala 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 72px;

  /* Raios */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 24px 64px rgba(16, 24, 40, 0.12);
  --shadow-glow: 0 0 0 1px var(--color-accent-glow), 0 8px 32px var(--color-accent-glow);

  /* Transições */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;

  /* Z-index */
  --z-header: 100;
  --z-overlay: 80;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol { list-style: none; }

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* ---------- 3. Acessibilidade ---------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-8);
}

@media (min-width: 768px) {
  .section { padding-block: var(--space-9); }
}

.section--tight { padding-block: var(--space-7); }

.section--muted {
  background: var(--color-bg-muted);
  border-block: 1px solid var(--color-border);
}

.section--dark {
  background: var(--color-deep);
  color: var(--color-white);
}

.section__header {
  max-width: 720px;
  margin-bottom: var(--space-7);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

/* ---------- 5. Tipografia ---------- */
h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--color-white); }

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

@media (min-width: 768px) {
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-2xl); }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--fs-5xl); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.eyebrow--light { color: #9DB8FF; }
.eyebrow--light::before { background: #9DB8FF; }

.lead {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

.lead--light { color: rgba(255, 255, 255, 0.78); }

.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-neon { color: #9DB8FF; }

.gradient-text {
  background: linear-gradient(120deg, var(--color-deep) 20%, var(--color-institutional) 60%, var(--color-action) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 6. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 16px var(--color-accent-glow);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--color-accent-glow);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-base);
}

.btn--block { width: 100%; }

.btn__arrow {
  transition: transform var(--dur) var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- 7. Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.header.is-scrolled {
  border-bottom-color: var(--color-border);
  background: rgba(255, 255, 255, 0.95);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-5);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  color: var(--color-deep);
}

.logo__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-institutional), var(--color-action));
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-base);
}

.logo__text span { color: var(--color-action); margin-left: .18em; }

/* Navegação desktop */
.nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 1024px) {
  .nav { display: flex; }
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--color-text);
  background: var(--color-gray-100);
}

.nav__link[aria-current="page"] { color: var(--color-accent); }

.nav__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
}
.nav__item--has-mega[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

/* ---------- 7.1 Mega-menu de Produtos ---------- */
.mega {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
  z-index: calc(var(--z-header) - 1);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block: var(--space-6);
}

@media (min-width: 768px) {
  .mega__inner { grid-template-columns: repeat(3, 1fr); }
}

.mega__col-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

.mega__list { display: grid; gap: var(--space-1); }

.mega__link {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--dur) var(--ease);
}
.mega__link:hover,
.mega__link:focus-visible {
  background: var(--color-gray-100);
}

.mega__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--fs-sm);
}

.mega__link-title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}

.mega__link-desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

.mega__cta {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-accent-soft), transparent);
  border: 1px solid var(--color-border);
}
.mega__cta h4 { margin-bottom: var(--space-2); }
.mega__cta p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Mega-menu mobile: dentro do menu mobile */
.mobile-nav__group {
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-align: left;
  border-radius: var(--radius-md);
}
.mobile-nav__group-toggle:hover { background: var(--color-gray-100); }

.mobile-nav__group-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}
.mobile-nav__group-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mobile-nav__sub {
  display: none;
  padding: 0 var(--space-4) var(--space-4);
  gap: var(--space-1);
}
.mobile-nav__sub.is-open { display: grid; }

.mobile-nav__sub-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}
.mobile-nav__sub-link:hover {
  background: var(--color-gray-100);
  color: var(--color-text);
}

.header__actions {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 1024px) {
  .header__actions { display: flex; }
}

/* Botão hamburguer */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

.nav-toggle__bars {
  position: relative;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: background var(--dur) var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* ---------- 8. Menu mobile ---------- */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--color-bg);
  z-index: var(--z-overlay);
  padding: var(--space-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
.mobile-nav.is-open { transform: translateX(0); }

@media (min-width: 1024px) {
  .mobile-nav { display: none; }
}

.mobile-nav__list { display: grid; gap: var(--space-1); margin-bottom: var(--space-5); }

.mobile-nav__link {
  display: block;
  padding: var(--space-4);
  font-size: var(--fs-lg);
  font-weight: 600;
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav__link:hover { background: var(--color-gray-100); }

.mobile-nav__actions { display: grid; gap: var(--space-3); }

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-8);
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, var(--color-accent-soft), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(8, 34, 97, 0.06), transparent 55%),
    var(--color-white);
}

.hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); }
}

.hero__title {
  margin-bottom: var(--space-5);
  color: var(--color-deep);
}

.hero__subtitle {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  max-width: 560px;
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__trust-item svg { color: var(--color-success); flex-shrink: 0; }

/* Painel visual do hero */
.hero__visual {
  position: relative;
}

.dashboard-mock {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.dashboard-mock__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-gray-50);
}

.dashboard-mock__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}
.dashboard-mock__dot:nth-child(1) { background: #FF5F57; }
.dashboard-mock__dot:nth-child(2) { background: #FEBC2E; }
.dashboard-mock__dot:nth-child(3) { background: #28C840; }

.dashboard-mock__body { padding: var(--space-5); display: grid; gap: var(--space-4); }

.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

.metric {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
}
.metric__label { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-bottom: var(--space-1); }
.metric__value { font-size: var(--fs-lg); font-weight: 700; color: var(--color-deep); }
.metric__value--up { color: var(--color-success); }

.chart-mock {
  height: 120px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-accent-soft), transparent);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.chart-mock::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49%, var(--color-border) 49%, var(--color-border) 51%, transparent 51%),
    linear-gradient(0deg, transparent 49%, var(--color-border) 49%, var(--color-border) 51%, transparent 51%);
  background-size: 40px 40px;
  opacity: 0.5;
}

/* ---------- 10. Prova social ---------- */
.social-proof {
  padding-block: var(--space-7);
  border-block: 1px solid var(--color-border);
  background: var(--color-gray-50);
}

.social-proof__label {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-5);
}

.social-proof__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
}

.social-proof__logo {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text-subtle);
  letter-spacing: -0.02em;
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social-proof__logo:hover { opacity: 1; color: var(--color-text-muted); }

/* ---------- 11. Cards genéricos ---------- */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.card__icon--neon {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.card__icon--accent {
  background: var(--color-deep);
  color: #fff;
}

.card__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-accent);
}
.card__link:hover { color: var(--color-accent-hover); }

/* ---------- 12. Ecossistema (diagrama) ---------- */
.ecosystem {
  position: relative;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 50%, var(--color-accent-soft), transparent 70%);
  border: 1px solid var(--color-border);
}

.ecosystem__center {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  margin: 0 auto var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-glow);
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: var(--space-3);
  color: var(--color-deep);
}

.ecosystem__nodes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .ecosystem__nodes { grid-template-columns: repeat(4, 1fr); }
}

.ecosystem__node {
  padding: var(--space-3);
  text-align: center;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: border-color var(--dur) var(--ease);
}
.ecosystem__node:hover { border-color: var(--color-accent); }

/* ---------- 13. Diferenciais ---------- */
.feature-split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .feature-split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .feature-split--reverse .feature-split__media { order: -1; }
}

.feature-split__media {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-gray-50);
  padding: var(--space-6);
  min-height: 280px;
  display: grid;
  place-items: center;
}

.feature-list { display: grid; gap: var(--space-4); }

.feature-list__item {
  display: flex;
  gap: var(--space-3);
}

.feature-list__check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: rgba(18, 183, 106, 0.12);
  color: var(--color-success);
  margin-top: 2px;
}

.feature-list__title { font-weight: 600; margin-bottom: var(--space-1); }
.feature-list__text { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---------- 14. CTA final ---------- */
.cta-band {
  position: relative;
  padding: var(--space-8) var(--space-5);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-institutional), var(--color-deep));
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%; 
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(157, 184, 255, 0.35), transparent 60%);
  pointer-events: none;
}

.cta-band > * { position: relative; }

.cta-band h2 { color: #fff; margin-bottom: var(--space-4); }
.cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 560px; margin: 0 auto var(--space-6); }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.cta-band .btn--primary {
  background: #fff;
  color: var(--color-deep);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.cta-band .btn--primary:hover {
  background: var(--color-gray-100);
  color: var(--color-deep);
}

.cta-band .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.cta-band .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

/* ---------- 15. Footer ---------- */
.footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-gray-50);
  padding-block: var(--space-8) var(--space-6);
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr repeat(3, 1fr); }
}

.footer__brand p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  max-width: 280px;
}

.footer__col-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--color-deep);
}

.footer__list { display: grid; gap: var(--space-2); }

.footer__link {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: color var(--dur) var(--ease);
}
.footer__link:hover { color: var(--color-accent); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}

.footer__social { display: flex; gap: var(--space-3); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-white);
  transition: all var(--dur) var(--ease);
}
.footer__social a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---------- 16. Página interna — hero ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + var(--space-7));
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border);
  background: radial-gradient(circle at 50% 0%, var(--color-accent-soft), transparent 60%);
}

.page-hero__title { margin-bottom: var(--space-4); }
.page-hero__subtitle {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  max-width: 680px;
}

/* ---------- 17. Produtos — filtros e grid ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.filter-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all var(--dur) var(--ease);
}
.filter-btn:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.filter-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  transition: all var(--dur) var(--ease);
}
.product-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.product-card__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.product-card__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.product-card__text { font-size: var(--fs-sm); color: var(--color-text-muted); flex: 1; }

.product-card__features {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.product-card__features li::before {
  content: "→ ";
  color: var(--color-accent);
}

/* ---------- 18. Formulário ---------- */
.form {
  display: grid;
  gap: var(--space-4);
}

.form__row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.form__field { display: grid; gap: var(--space-2); }

.form__label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.form__label .required { color: var(--color-danger); }

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form__input::placeholder,
.form__textarea::placeholder { color: var(--color-text-subtle); }

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.form__textarea { min-height: 140px; resize: vertical; }

.form__error {
  font-size: var(--fs-xs);
  color: var(--color-danger);
  min-height: 1em;
}

.form__input[aria-invalid="true"],
.form__textarea[aria-invalid="true"],
.form__select[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.form__success {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(18, 183, 106, 0.1);
  border: 1px solid var(--color-success);
  color: #05603A;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------- 19. Cases ---------- */
.case-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .case-card { grid-template-columns: 1fr 1fr; align-items: center; }
}

.case-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.case-metric {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
}
.case-metric__value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-action);
  line-height: 1;
  margin-bottom: var(--space-1);
}
.case-metric__label { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---------- 20. Sobre — timeline ---------- */
.timeline {
  display: grid;
  gap: var(--space-5);
  position: relative;
  padding-left: var(--space-6);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border);
}

.timeline__item { position: relative; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-6) + 1px);
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.timeline__year {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.timeline__title { font-weight: 600; margin-bottom: var(--space-1); }
.timeline__text { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---------- 21. Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

.stat { text-align: center; }
.stat__value {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat__label { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---------- 22. Animações de entrada ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 23. Utilitários ---------- */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.text-center { text-align: center; }

/* ---------- 24. Agrupamentos (plataforma) ---------- */
.group-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.group-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.group-card__tag {
  display: inline-block;
  padding: 2px var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.group-card__title { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.group-card__text { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }

.group-card__list {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.group-card__list li::before {
  content: "→ ";
  color: var(--color-accent);
  font-weight: 700;
}

/* ---------- 25. Problema ---------- */
.problem {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .problem { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.problem__content h2 { margin-bottom: var(--space-4); }

.problem__list { display: grid; gap: var(--space-4); }

.problem__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.problem__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(240, 68, 56, 0.1);
  color: var(--color-danger);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.problem__title { font-weight: 600; margin-bottom: var(--space-1); }
.problem__text { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---------- 26. IA ---------- */
.ai-block {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .ai-block { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.ai-block__content h2 { margin-bottom: var(--space-4); }
.ai-block__content .lead { margin-bottom: var(--space-6); }

.ai-block__list { display: grid; gap: var(--space-4); }

.ai-block__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ai-block__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(157, 184, 255, 0.18);
  color: #9DB8FF;
}

.ai-block__title { font-weight: 600; color: #fff; margin-bottom: var(--space-1); }
.ai-block__text { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); }

/* ---------- 27. Fluxo de IA ---------- */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
}

.flow__step {
  flex: 1 1 160px;
  min-width: 160px;
  max-width: 200px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  text-align: center;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.flow__step:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.flow__num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}

.flow__title {
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-1);
  color: var(--color-deep);
}

.flow__text {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

.flow__arrow {
  display: grid;
  place-items: center;
  color: var(--color-accent);
  font-size: var(--fs-xl);
  font-weight: 700;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .flow { flex-direction: column; align-items: stretch; }
  .flow__step { max-width: none; }
  .flow__arrow { transform: rotate(90deg); }
}

/* --- Capturas reais dos produtos Lógica (responsivas, sem dependência de JS) --- */
.product-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.product-showcase .section__header { margin-bottom: 1rem; }
.product-showcase__disclaimer {
  color: var(--color-text-muted);
  font-size: .8125rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.product-shot {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.product-shot--featured { grid-column: 1 / -1; }
.product-shot__open {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  background: #f3f6fc;
}
.product-shot__open > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 914;
  object-fit: contain;
  transition: transform .22s ease;
}
.product-shot__open:hover > img { transform: scale(1.012); }
.product-shot__open:focus-visible { outline: 3px solid var(--color-action); outline-offset: -3px; }
.product-shot__zoom {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  border-radius: 8px;
  background: rgba(8,34,97,.93);
  color: #fff;
  padding: .6rem .9rem;
  font-size: .84rem;
  font-weight: 600;
}
.product-shot figcaption {
  display: grid;
  gap: .25rem;
  padding: 1rem 1.25rem;
  line-height: 1.5;
  font-size: .875rem;
  color: var(--color-text-muted);
}
.product-shot figcaption strong { color: var(--color-deep); font-size: 1rem; }
.hero__product-shot {
  align-self: center;
  max-width: 100%;
}
.hero__product-shot figcaption { padding: .75rem 1rem; }
.hero__product-shot .product-shot__zoom { font-size: .75rem; }
.home-interface-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.home-interface-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: #fff;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.home-interface-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.home-interface-card:focus-visible { outline: 3px solid var(--color-action); outline-offset: 3px; }
.home-interface-card > img { display:block; width:100%; height:auto; aspect-ratio:1920/914; object-fit:cover; }
.home-interface-card > span { display:grid; gap:.3rem; padding:1rem; }
.home-interface-card strong { color:var(--color-deep); }
.home-interface-card small { color:var(--color-text-muted); line-height:1.5; }
.product-card__screenshot {
  display:block;
  overflow:hidden;
  margin:.9rem 0;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:#f3f6fc;
}
.product-card__screenshot img {
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:1920/914;
}
.product-card__screenshot:focus-visible { outline:3px solid var(--color-action); outline-offset:3px; }
@media(max-width: 720px) {
  .product-gallery,.home-interface-grid { grid-template-columns: 1fr; }
  .product-shot--featured { grid-column:auto; }
  .product-shot__zoom { right:.5rem; bottom:.5rem; padding:.45rem .6rem; font-size:.75rem; }
}
@media(prefers-reduced-motion:reduce){
 .product-shot__open>img,.home-interface-card{transition:none}
 .product-shot__open:hover>img {transform:none}
}


/* =======================================================================
   Galerias editoriais de interfaces — versão 2
   Exibição ampla + trilho de miniaturas, com fallback vertical sem JS.
   ======================================================================= */
.product-showcase {
  background: linear-gradient(180deg, #f7f9fe 0%, #eff3fa 100%);
}
.product-showcase .container { max-width: 1320px; }
.product-showcase .section__header { max-width: 820px; margin-bottom: .8rem; }
.product-showcase__disclaimer { max-width: 900px; margin: 0 0 1.5rem; }
.product-gallery {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 1.15rem;
  min-width: 0;
}
.product-gallery:not(.is-enhanced) > .product-shot {
  width: 100%;
  border-radius: 16px;
}
.product-gallery__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.product-gallery__heading { display: flex; align-items: center; gap: 1rem; }
.product-gallery__kicker {
  color: var(--color-institutional);
  font-size: .77rem;
  font-weight: 750;
  letter-spacing: .1em;
}
.product-gallery__count {
  display: inline-flex;
  align-items: center;
  padding: .32rem .7rem;
  font-weight: 700;
  font-size: .79rem;
  font-variant-numeric: tabular-nums;
  color: #415675;
  background: #e4ebfa;
  border: 1px solid #d6e0f0;
  border-radius: 99px;
}
.product-gallery__arrows { display: flex; align-items: center; gap: .55rem; }
.product-gallery__arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid #ccd6e8;
  background: #fff;
  color: #102a5b;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(16,42,91,.04);
}
.product-gallery__arrow:hover { background:#e8effb; border-color:#91b1e5; }
.product-gallery__arrow:focus-visible { outline:3px solid #2958c3; outline-offset:2px; }
.product-gallery__stage {
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #ccd7e8;
  box-shadow: 0 22px 48px rgba(8,34,97,.10);
}
.product-gallery.is-enhanced .product-shot {
  border: 0;
  border-radius: 0;
  width: 100%;
  margin: 0;
  box-shadow: none;
}
.product-gallery.is-enhanced .product-shot[hidden] { display:none !important; }
.product-gallery__stage .product-shot__open {
  display: block;
  padding: clamp(6px, 1vw, 14px);
  background: #e8edf5;
}
.product-gallery__stage .product-shot__open > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 914;
  object-fit: contain;
  border-radius: 7px;
  box-shadow: 0 1px 7px rgba(12,28,60,.12);
}
.product-gallery__stage .product-shot__zoom {
  right: clamp(16px,2.2vw,30px);
  bottom: clamp(16px,2.2vw,30px);
  padding: .6rem .9rem;
  box-shadow: 0 5px 15px rgba(8,34,97,.2);
}
.product-gallery__stage .product-shot figcaption {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.35rem clamp(1rem, 3vw, 2rem);
  background: #fff;
}
.product-gallery__stage .product-shot figcaption strong {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: #0b2352;
}
.product-gallery__stage .product-shot figcaption span {
  font-size: .93rem;
  color: #59687f;
  line-height: 1.55;
}
.product-gallery__rail {
  display: grid;
  grid-template-columns: repeat(var(--gallery-count), minmax(0,1fr));
  gap: .85rem;
  min-width: 0;
}
.product-gallery__thumb {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: .4rem .65rem;
  min-width: 0;
  padding: .55rem .55rem .8rem;
  border: 1px solid #d8e1ed;
  border-radius: 13px;
  background: #fff;
  text-align: left;
  color: #34445d;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.product-gallery__thumb:hover { border-color:#89a9df; background:#fbfdff; }
.product-gallery__thumb[aria-selected="true"] {
  border-color:#2958c3;
  box-shadow: inset 0 0 0 1px #2958c3, 0 5px 16px rgba(41,88,195,.1);
  background:#fafdff;
}
.product-gallery__thumb:focus-visible { outline: 3px solid #2958c3; outline-offset: 2px; }
.product-gallery__thumb-image {
  display:block;
  grid-column:1/-1;
  aspect-ratio:1920/914;
  border-radius:8px;
  overflow:hidden;
  background:#e9eef7;
  border:1px solid #e2e8f3;
}
.product-gallery__thumb-image img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.product-gallery__thumb-number {
  display:inline-block;
  color:#7e91af;
  font-size:.74rem;
  line-height:1.5;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.product-gallery__thumb[aria-selected="true"] .product-gallery__thumb-number {color:#2958c3;}
.product-gallery__thumb-title {
  font-size:.81rem;
  line-height:1.4;
  font-weight:650;
  white-space:normal;
  overflow-wrap:anywhere;
}
.product-gallery--single .product-shot { margin:0; width:100%; }
.product-gallery--single .product-shot__open { padding:10px; background:#e8edf5; }
.product-gallery--single .product-shot__open > img { width:100%;height:auto;border-radius:8px; }
.gallery-lightbox {
  border:1px solid #d7e1ef;
  padding:0;
  width:min(97vw, 1750px);
  max-width:97vw;
  max-height:95vh;
  max-height:95dvh;
  border-radius:15px;
  box-shadow:0 35px 100px rgba(6,18,45,.38);
  background:#fff;
  color:#112342;
}
.gallery-lightbox::backdrop {background:rgba(4,15,38,.78);backdrop-filter:blur(5px);}
.gallery-lightbox__top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 1rem;
  border-bottom:1px solid #dbe3ef;
}
.gallery-lightbox__title {font-size:.95rem;line-height:1.4;}
.gallery-lightbox__close {
  display:flex;
  align-items:center;
  gap:.5rem;
  background:#0b2b71;
  padding:.5rem .9rem;
  border-radius:8px;
  color:white;
  font-size:.84rem;
}
.gallery-lightbox__close > span {font-size:1.25rem;line-height:1;}
.gallery-lightbox__scroll {
  max-height:calc(95dvh - 119px);
  overflow:auto;
  background:#e9edf5;
  overscroll-behavior:contain;
}
.gallery-lightbox__scroll img {display:block;width:100%;min-width:960px;max-width:none;height:auto;}
.gallery-lightbox__hint {font-size:.75rem;color:#64748b;padding:.55rem 1rem;border-top:1px solid #dbe3ef;}

/* Home: cards de interface com leitura visual mais generosa. */
.home-interface-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.home-interface-card {display:flex;flex-direction:column;}
.home-interface-card:nth-child(3) {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:stretch;
}
.home-interface-card:nth-child(3) > img {height:100%;max-height:350px;object-fit:contain;background:#f0f4fb;}
.home-interface-card:nth-child(3) > span {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(1.25rem,3vw,2.5rem);
}
.home-interface-card:nth-child(3) > span strong {font-size:1.35rem;}
.home-interface-card > span {padding:1.15rem 1.3rem;}
.home-interface-card strong {font-size:1.08rem;}
.home-interface-card:hover {box-shadow:0 15px 35px rgba(8,34,97,.12);}

/* Cartões do catálogo com telas reais. */
.product-card__screenshot {box-shadow:0 6px 20px rgba(8,34,97,.08);border-color:#d4deee;}
.product-card__screenshot:hover {border-color:#91ace0;box-shadow:0 9px 26px rgba(8,34,97,.13);}

@media (max-width: 820px) {
  .product-showcase .container {max-width:100%;}
  .product-gallery__rail {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    padding:0 0 .6rem;
    gap:.7rem;
  }
  .product-gallery__thumb {flex:0 0 clamp(156px,40vw,216px);scroll-snap-align:start;}
  .home-interface-card:nth-child(3) {display:flex;grid-column:1/-1;}
  .home-interface-card:nth-child(3) > img {height:auto;max-height:none;}
}
@media (max-width: 600px) {
  .product-gallery__toolbar {gap:.5rem;}
  .product-gallery__heading {gap:.6rem;}
  .product-gallery__kicker {font-size:.67rem;}
  .product-gallery__arrow {width:38px;height:38px;}
  .product-gallery__stage {border-radius:12px;}
  .product-gallery__stage .product-shot__open {padding:4px;}
  .product-gallery__stage .product-shot__open > img {border-radius:5px;}
  .product-gallery__stage .product-shot__zoom {right:10px;bottom:10px;font-size:.72rem;padding:.35rem .55rem;}
  .product-gallery__stage .product-shot figcaption {padding:1rem;}
  .product-gallery__thumb {flex-basis:168px;}
  .gallery-lightbox {width:100vw;max-width:100vw;max-height:100dvh;border-radius:0;}
  .gallery-lightbox__scroll {max-height:calc(100dvh - 120px);}
  .home-interface-grid {grid-template-columns:minmax(0,1fr);}
  .home-interface-card:nth-child(3) {grid-column:auto;}
}
@media (prefers-reduced-motion:reduce){
  .product-gallery__thumb,.home-interface-card {transition:none;}
}


/* =======================================================================
   Preview de produtos — cards editoriais + modal (2026-10-26)
   ======================================================================= */
.product-showcase {
  background: linear-gradient(180deg,#f8faff 0%,#f1f5fa 100%);
}
.product-showcase .container {max-width:1280px;}
.product-showcase .section__header {max-width:780px; margin-bottom:.8rem;}
.product-showcase__disclaimer {max-width:900px; margin-bottom:2rem;}
.product-gallery,
.product-gallery.is-enhanced,
.product-gallery.is-card-gallery {
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:1.4rem;
  align-items:stretch;
}
.product-gallery.is-card-gallery .product-shot,
.product-gallery.is-card-gallery .product-shot--featured,
.product-gallery:not(.is-enhanced) .product-shot {
  grid-column:auto;
  width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
  border:1px solid #dbe3ef;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(16,36,74,.045);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.product-gallery.is-card-gallery .product-shot:hover {
  transform:translateY(-4px);
  border-color:#a5bde4;
  box-shadow:0 18px 34px rgba(14,35,86,.11);
}
.product-gallery.is-card-gallery .product-shot__open {
  position:relative;
  display:block;
  background:#eef2f8;
  padding:12px 12px 0;
  border:0;
  overflow:hidden;
}
.product-gallery.is-card-gallery .product-shot__open > img {
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:1920/914;
  object-fit:contain;
  border-radius:8px 8px 0 0;
  border:1px solid #d9e2ee;
  box-shadow:0 2px 10px rgba(20,40,90,.06);
  transition:transform .3s ease;
}
.product-gallery.is-card-gallery .product-shot:hover img {transform:scale(1.012);}
.product-gallery.is-card-gallery .product-shot__zoom {
  position:absolute;
  bottom:14px;
  right:24px;
  font-weight:650;
  font-size:.76rem;
  padding:.43rem .65rem;
  border-radius:7px;
  background:rgba(6,30,78,.92);
  color:#fff;
  pointer-events:none;
}
.product-gallery.is-card-gallery .product-shot__badge {
  position:absolute;
  top:22px;
  left:22px;
  font-size:.67rem;
  font-weight:750;
  letter-spacing:.07em;
  color:#133875;
  background:rgba(255,255,255,.97);
  border:1px solid #dce5f4;
  border-radius:7px;
  padding:.35rem .58rem;
  pointer-events:none;
  box-shadow:0 2px 9px rgba(20,40,80,.1);
}
.product-gallery.is-card-gallery .product-shot figcaption {
  display:flex;
  flex-direction:column;
  flex:1;
  gap:.46rem;
  padding:1.15rem 1.35rem 1.35rem;
  line-height:1.5;
  color:#5c6c83;
}
.product-gallery.is-card-gallery .product-shot figcaption strong {
  color:#0b2862;
  font-size:1.12rem;
  font-weight:730;
  line-height:1.3;
}
.product-gallery.is-card-gallery .product-shot figcaption span {
  color:#566783;
  font-size:.87rem;
  line-height:1.58;
}
.product-gallery.is-card-gallery .product-shot__open:focus-visible {
  outline:3px solid #2958c3;
  outline-offset:-3px;
}
.product-gallery.is-card-gallery .product-shot:last-child:nth-child(odd):not(:first-child) {
  grid-column:1 / -1;
  width:calc((100% - 1.4rem)/2);
  justify-self:center;
}
.product-gallery.is-card-gallery.product-gallery--single {
  grid-template-columns:minmax(0, 1fr);
}
.product-gallery.is-card-gallery.product-gallery--single .product-shot {
  max-width:780px;
  margin-inline:auto;
}
.shot-modal-open {overflow:hidden;}
.shot-modal {
  position:fixed;
  margin:auto;
  width:min(98vw,1680px);
  max-width:98vw;
  height:min(95dvh,1100px);
  max-height:95dvh;
  padding:0;
  border:1px solid rgba(225,233,245,.4);
  border-radius:16px;
  background:#f3f6fb;
  box-shadow:0 30px 90px rgba(3,18,53,.35);
  color:#12264b;
}
.shot-modal[open] {display:flex;flex-direction:column;}
.shot-modal::backdrop {
  background:rgba(3,15,37,.78);
  backdrop-filter:blur(5px);
}
.shot-modal__header {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 1.35rem;
  background:#fff;
  border-bottom:1px solid #dce4f0;
}
.shot-modal__heading {display:flex;flex-direction:column;min-width:0;gap:.15rem;}
.shot-modal__eyebrow {
  color:#5273ae;
  font-size:.65rem;
  font-weight:780;
  letter-spacing:.12em;
}
.shot-modal__title {font-size:1.12rem;font-weight:750;line-height:1.3;}
.shot-modal__tools,.shot-modal__navigation {display:flex;align-items:center;gap:.58rem;}
.shot-modal__counter {
  color:#5d6f8c;
  font-weight:700;
  font-size:.82rem;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  margin-right:.3rem;
}
.shot-modal__tool {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:.4rem;
  min-height:38px;
  padding:.5rem .85rem;
  font-size:.81rem;
  font-weight:690;
  line-height:1.25;
  color:#15366d;
  background:#f9fbff;
  border:1px solid #d6e0ef;
  border-radius:8px;
  white-space:nowrap;
}
.shot-modal__tool:hover {background:#eaf0fb;border-color:#9eb8e3;}
.shot-modal__tool:focus-visible {outline:3px solid #2958c3;outline-offset:2px;}
.shot-modal__tool:disabled {opacity:.35;cursor:not-allowed;}
.shot-modal__close {color:#fff;background:#153d86;border-color:#153d86;}
.shot-modal__close:hover {background:#0c2e70;border-color:#0c2e70;}
.shot-modal__close > span {font-size:1.2rem;}
.shot-modal__viewport {
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  overflow:auto;
  padding:clamp(8px,1.5vw,20px);
  overscroll-behavior:contain;
  background:#e8edf6;
}
.shot-modal__image {
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  border:1px solid #cbd6e7;
  box-shadow:0 6px 30px rgba(20,40,74,.13);
  background:#fff;
}
.shot-modal.is-zoomed .shot-modal__viewport {display:block;text-align:left;}
.shot-modal.is-zoomed .shot-modal__image {
  width:1920px;
  max-width:none;
  max-height:none;
  height:auto;
}
.shot-modal__footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:68px;
  padding:.8rem 1.35rem;
  border-top:1px solid #d9e3f2;
  background:#fff;
}
.shot-modal__description {font-size:.8rem;color:#667792;line-height:1.45;max-width:780px;}
@media (max-width: 760px) {
  .product-gallery.is-card-gallery,
  .product-gallery.is-enhanced.is-card-gallery {grid-template-columns:1fr;gap:1.1rem;}
  .product-gallery.is-card-gallery .product-shot:last-child:nth-child(odd):not(:first-child) {
    grid-column:auto;width:100%;justify-self:auto;
  }
  .product-gallery.is-card-gallery .product-shot__open {padding:9px 9px 0;}
  .product-gallery.is-card-gallery .product-shot figcaption {padding:.9rem 1.05rem 1.15rem;}
  .product-gallery.is-card-gallery .product-shot__zoom {bottom:11px;right:17px;font-size:.69rem;}
  .shot-modal {width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;}
  .shot-modal__header {padding:.7rem .85rem;gap:.5rem;}
  .shot-modal__title {font-size:.93rem;}
  .shot-modal__eyebrow {font-size:.57rem;}
  .shot-modal__tools,.shot-modal__navigation {gap:.3rem;}
  .shot-modal__tool {min-height:36px;padding:.48rem .62rem;font-size:.75rem;}
  .shot-modal__counter {font-size:.72rem;margin-right:0;}
  .shot-modal__footer {padding:.7rem .85rem;align-items:flex-start;gap:.6rem;flex-direction:column;}
  .shot-modal__description {font-size:.75rem;}
  .shot-modal__navigation {align-self:flex-end;}
  .shot-modal__viewport {padding:7px;}
}
@media (prefers-reduced-motion:reduce) {
  .product-gallery.is-card-gallery .product-shot,
  .product-gallery.is-card-gallery .product-shot__open > img {transition:none;}
}


/* Cards da homepage: ação distinta para ampliar imagem e conhecer produto. */
.home-interface-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: #fff;
}
.home-interface-preview {
  display: block;
  position: relative;
  min-width: 0;
  background: #edf2f9;
  overflow: hidden;
  border-bottom: 1px solid #e1e8f3;
}
.home-interface-preview > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920/914;
  object-fit: contain;
  transition: transform .22s ease;
}
.home-interface-preview:hover > img { transform: scale(1.015); }
.home-interface-preview__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: .42rem .7rem;
  color: #fff;
  background: rgba(8,34,97,.92);
  border-radius: 7px;
  font-weight: 680;
  font-size: .74rem;
  pointer-events: none;
}
.home-interface-preview:focus-visible { outline: 3px solid #2958c3; outline-offset: -3px; }
.home-interface-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: .95rem;
  padding: 1.05rem 1.3rem 1.25rem;
}
.home-interface-card__body > span { display: grid; gap: .28rem; }
.home-interface-card__body strong { color: #092660; font-size: 1.1rem; }
.home-interface-card__body small { color: #586a85; line-height: 1.5; }
.home-interface-card__details {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #2051b4;
  font-weight: 700;
  font-size: .84rem;
  text-decoration: none;
}
.home-interface-card__details:hover { color:#103c95; text-decoration: underline; }
.home-interface-card__details:focus-visible { outline: 3px solid #2958c3; outline-offset: 3px; }
.home-interface-card:nth-child(3) {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
}
.home-interface-card:nth-child(3) > .home-interface-preview { height: 100%; }
.home-interface-card:nth-child(3) > .home-interface-preview > img {
  height: 100%;
  max-height: 360px;
  object-fit: contain;
}
.home-interface-card:nth-child(3) > .home-interface-card__body {
  justify-content: center;
  gap: 1.2rem;
  padding: clamp(1.15rem,3vw,2.4rem);
}
.home-interface-card:nth-child(3) > .home-interface-card__body strong { font-size: 1.34rem; }
/* Modal de prévia também no hero e catálogo, preservando links "Conhecer". */
.product-card__screenshot:hover { border-color: #8daae1; }
@media (max-width: 820px) {
  .home-interface-card:nth-child(3) { display:flex; flex-direction:column; }
  .home-interface-card:nth-child(3) > .home-interface-preview > img { height:auto; max-height:none; }
  .home-interface-card:nth-child(3) > .home-interface-card__body {padding:1.05rem 1.3rem 1.25rem;}
}
@media (prefers-reduced-motion:reduce) {
  .home-interface-preview > img { transition:none; }
}

/* Etiqueta discreta para prévias do catálogo, também abertas no modal. */
.product-card__screenshot { position:relative; }
.product-card__screenshot::after {
  content:"Ampliar tela ↗";
  position:absolute;
  right:.6rem;
  bottom:.6rem;
  padding:.36rem .55rem;
  border-radius:6px;
  color:#fff;
  background:rgba(8,34,97,.93);
  font-size:.7rem;
  font-weight:650;
  line-height:1.2;
  pointer-events:none;
}
.product-card__screenshot:hover img {transform:scale(1.014);}
.product-card__screenshot img {transition:transform .22s ease;}
@media (prefers-reduced-motion:reduce) {.product-card__screenshot img {transition:none;}}


/* Navegação de Produtos: texto acessa catálogo, seta abre mega-menu. */
.nav__products {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: var(--radius-sm);
}
.nav__products-link {padding-right: .2rem; border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
.nav__products-toggle {
  padding-left: .35rem;
  padding-right: .55rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.nav__products:hover {background:var(--color-gray-100);}
.nav__products:hover > .nav__link {color:var(--color-text);}
.mega__catalog-link {
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: .9rem 1.15rem;
  border:1px solid rgba(41,88,195,.18);
  border-radius:var(--radius-md);
  background:#f2f6ff;
  color:#173e90;
}
.mega__catalog-link:hover,.mega__catalog-link:focus-visible {
  background:#e7efff;
  border-color:#94afe6;
}
.mega__catalog-link > span:first-child {display:flex;flex-direction:column;gap:.18rem;}
.mega__catalog-link strong {font-size:.94rem;}
.mega__catalog-link small {color:#526781;font-size:.78rem;}
.mega__catalog-arrow {font-size:1.3rem;}
.mobile-nav__group-head {display:flex;align-items:center;gap:.2rem;}
.mobile-nav__products-link {flex:1;}
.mobile-nav__products-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  flex:0 0 52px;
  padding:.8rem;
}
.home-products__all {margin-top:1rem;}
@media (prefers-reduced-motion: reduce) {
  .nav__products .nav__chevron {transition:none;}
}

/* Âncoras visíveis abaixo da navegação fixa. */
#crm,#app,#ia,#rede,#atendimento,#provisionamento { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Identidade visual oficial da Lógica Sistemas — 2026-10-26 */
.logo__image {display:block;width:clamp(188px,16vw,228px);height:auto;max-height:58px;object-fit:contain;object-position:left center;}
.footer .logo__image {width:248px;max-height:72px;}
.header__inner .logo {min-width:0;padding:.1rem 0;}
.product-new-hero .page-hero__subtitle {max-width:800px;}
.product-new-hero__actions {display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.7rem;}
.product-status-note {font-size:.82rem;line-height:1.65;color:var(--color-text-muted,#667791);margin-top:1.1rem;max-width:850px;}
.product-journey {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;}
.product-journey__step {min-width:0;padding:1.3rem;border:1px solid #d9e3f1;border-radius:14px;background:white;}
.product-journey__step > span {display:block;font-size:.78rem;font-weight:750;letter-spacing:.1em;color:#2958c3;margin-bottom:.65rem;}
.product-journey__step strong {display:block;font-size:1rem;color:#112e65;line-height:1.3;}
.product-journey__step p {font-size:.86rem;color:#576985;margin-top:.65rem;line-height:1.55;}
@media(max-width:1000px){.product-journey{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px){.logo__image{width:190px;max-height:46px;}.footer .logo__image{width:235px;max-height:60px;}.product-journey{grid-template-columns:1fr;}.product-new-hero__actions .btn{width:100%;text-align:center;justify-content:center;}}


/* Botão flutuante do WhatsApp — Lógica Sistemas */
.whatsapp-fab {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px) + 16px);
  bottom: max(22px, env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 990;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  text-decoration: none;
  isolation: isolate;
}
.whatsapp-fab__circle {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  flex: 0 0 60px;
  color: #fff;
  background: #25d366;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  box-shadow: 0 7px 22px rgba(6, 54, 33, .26);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.whatsapp-fab:hover .whatsapp-fab__circle,
.whatsapp-fab:focus-visible .whatsapp-fab__circle {
  background: #1fb957;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(6, 54, 33, .35);
}
.whatsapp-fab__label {
  padding: .65rem .85rem;
  border: 1px solid #dce6ec;
  border-radius: 11px;
  font-size: .81rem;
  font-weight: 700;
  line-height: 1.2;
  color: #133c34;
  background: #fff;
  box-shadow: 0 4px 16px rgba(4, 25, 45, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
  white-space: nowrap;
}
.whatsapp-fab:hover .whatsapp-fab__label,
.whatsapp-fab:focus-visible .whatsapp-fab__label {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.whatsapp-fab:focus-visible {
  border-radius: 50%;
  outline: 3px solid #0b5f4a;
  outline-offset: 4px;
}
.shot-modal-open .whatsapp-fab,
body:has(.mobile-nav.is-open) .whatsapp-fab {
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 600px) {
  .whatsapp-fab {
    right: max(14px, env(safe-area-inset-right, 0px) + 10px);
    bottom: max(16px, env(safe-area-inset-bottom, 0px) + 12px);
  }
  .whatsapp-fab__circle {width: 56px; height: 56px; flex-basis: 56px;}
  .whatsapp-fab__label {display: none;}
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab__circle, .whatsapp-fab__label {transition: none;}
}
@media print {.whatsapp-fab {display: none !important;}}
/* Logomarca oficial azul no rodapé claro. */
.footer .logo__image--footer {width: 215px; height: auto; max-height: none; filter: none; opacity: 1;}


/* Gestão de consentimento — Consent Mode v2 (estilo institucional Lógica) */
.cookie-banner[hidden] { display: none !important; }
.cookie-banner {
  position: fixed;
  left: max(20px, env(safe-area-inset-left, 0px) + 12px);
  bottom: max(20px, env(safe-area-inset-bottom, 0px) + 12px);
  width: min(455px, calc(100vw - 40px));
  z-index: 1060;
  padding: 20px 20px 18px;
  background: #fff;
  border: 1px solid #dbe3ed;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(6, 25, 58, .17);
  color: #142b50;
}
.cookie-banner__title { display: block; padding-right: 26px; font-size: .97rem; font-weight: 750; line-height: 1.3; }
.cookie-banner p { margin: 10px 0 0; font-size: .81rem; line-height: 1.55; color: #52627a; }
.cookie-banner .cookie-banner__links { margin-top: 9px; display:flex; align-items:center; gap:8px; font-size:.78rem; }
.cookie-banner__links a, .cookie-dialog__policy a { color: #2051b4; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__dismiss, .cookie-dialog__close {
  position:absolute; top:12px; right:14px;
  border:0; border-radius:7px; background:transparent;
  color:#52617a; font-size:1.45rem; line-height:1;
  width:32px;height:32px;
}
.cookie-banner__dismiss:hover,.cookie-dialog__close:hover { background:#eef2f8; color:#142b50; }
.cookie-banner__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.cookie-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:39px; padding:.55rem .85rem; border-radius:8px;
  font-family:inherit; font-size:.78rem; font-weight:720;
  line-height:1.25; border:1px solid #cbd7e7; color:#153369;
  background:#fff; cursor:pointer; white-space:nowrap;
}
.cookie-btn--accept { background:#2053b8; border-color:#2053b8; color:#fff; }
.cookie-btn--accept:hover { background:#143c8e; border-color:#143c8e; }
.cookie-btn--reject:hover,.cookie-btn--settings:hover { background:#edf3fe; }
.cookie-btn:focus-visible,.cookie-banner__dismiss:focus-visible,.cookie-dialog__close:focus-visible {
  outline:3px solid #265acc; outline-offset:3px;
}
.cookie-dialog {
  width:min(600px,calc(100vw - 28px)); max-width:calc(100vw - 28px);
  max-height: min(86vh, 760px); max-height:min(86dvh,760px);
  margin:auto; padding:0; color:#19345a; background:white;
  border:1px solid #d5dfec; border-radius:17px;
  box-shadow:0 24px 70px rgba(4,20,49,.35);
}
.cookie-dialog::backdrop { background:rgba(7,19,42,.52); backdrop-filter:blur(3px); }
.cookie-dialog__content {padding:24px; overflow:auto; max-height:min(86dvh,760px);}
.cookie-dialog__header { display:flex; position:relative; align-items:flex-start; justify-content:space-between; }
.cookie-dialog__eyebrow {display:block;color:#315db2;font-size:.7rem;letter-spacing:.12em;font-weight:750;}
.cookie-dialog h2 {font-size:1.45rem;line-height:1.25;margin:.3rem 0 0;}
.cookie-dialog__close {top:-6px;right:-8px;}
.cookie-dialog__intro {font-size:.87rem;line-height:1.6;color:#5e6f88;margin:15px 0;}
.cookie-dialog__category {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin:0; padding:17px 0; border-top:1px solid #e5ebf3;
}
.cookie-dialog__category strong {display:block;font-size:.92rem;color:#152f59;}
.cookie-dialog__category p,.cookie-dialog__category small {display:block;font-size:.79rem;color:#5f7088;line-height:1.55;margin:.35rem 0 0;}
.cookie-dialog__required {white-space:nowrap;color:#3b628d;font-size:.74rem;font-weight:680;background:#eaf1fa;border-radius:99px;padding:6px 10px;}
.cookie-dialog__category--toggle {cursor:pointer;}
.cookie-dialog__category input[type="checkbox"] {width:24px;height:24px;flex:0 0 24px;accent-color:#2457b8;cursor:pointer;}
.cookie-dialog__policy {border-top:1px solid #e5ebf3;padding-top:13px;color:#52627a;font-size:.79rem;line-height:1.5;}
.cookie-dialog__actions {display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px;}
.footer__privacy {display:flex;flex-wrap:wrap;gap:9px 16px;align-items:center;margin-top:10px;}
.footer__privacy a,.footer__privacy button {padding:0;background:none;border:0;cursor:pointer;font:inherit;color:#475467;font-size:.76rem;text-decoration:underline;text-underline-offset:2px;}
.footer__privacy a:hover,.footer__privacy button:hover {color:#2053b8;}
.footer__privacy button:focus-visible {outline:2px solid #2053b8;outline-offset:3px;}
.policy-content {max-width:880px;margin-inline:auto;}
.policy-content h2 {margin:2rem 0 .65rem;font-size:1.42rem;line-height:1.3;color:#0d2e67;}
.policy-content h3 {margin:1.3rem 0 .45rem;font-size:1.05rem;color:#0d2e67;}
.policy-content p,.policy-content li {font-size:.95rem;line-height:1.75;color:#485971;}
.policy-content ul {padding-left:1.5rem;list-style:disc;}
.policy-content li {margin:.45rem 0;}
.policy-content a {color:#2051b4;text-decoration:underline;}
.policy-content .policy-note {background:#f0f5fd;border-left:3px solid #2756b7;padding:1rem 1.2rem;border-radius:4px;margin-top:1rem;}
@media (max-width:600px) {
  .cookie-banner {left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom,0px) + 8px);width:auto;padding:17px 16px;max-height:70dvh;overflow:auto;}
  .cookie-banner__actions .cookie-btn {flex:1 1 42%;}
  .cookie-banner__actions .cookie-btn--settings {flex-basis:100%;}
  .cookie-dialog__content {padding:19px 17px;}
  .cookie-dialog__actions .cookie-btn {flex:1 1 45%;}
  .cookie-dialog h2 {font-size:1.22rem;}
}
@media print { .cookie-banner,.cookie-dialog,.footer__privacy button {display:none !important;} }
@media (prefers-reduced-motion:reduce) { .cookie-dialog,.cookie-banner {scroll-behavior:auto;} }

/* SEO Resource Library 2026 */
.page-hero__supporting{max-width:900px;margin:.8rem 0 .3rem;font-size:1.05rem;line-height:1.6;font-weight:600;color:#315783}
.resource-hero{padding-top:clamp(45px,7vw,78px);padding-bottom:clamp(45px,7vw,82px)}
.resource-hero .page-hero__title{max-width:970px}
.resource-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;align-items:center;font-size:.81rem;color:#63718a}
.resource-breadcrumb a{color:#164fa9;text-decoration:underline;text-underline-offset:3px}
.resource-updated{color:#72829a;font-size:.77rem;margin-top:18px}
.resource-shell{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(24px,4vw,60px);align-items:start}
.resource-article{min-width:0;max-width:810px;color:#42536c}
.resource-intro{font-size:1.13rem;font-weight:500;line-height:1.75;color:#163a68;margin:0 0 28px}
.resource-chapter{margin-bottom:32px}
.resource-chapter h2{font-size:clamp(1.3rem,2.5vw,1.65rem);line-height:1.3;color:#153b78;margin:0 0 14px}
.resource-chapter h3{font-size:1.05rem;color:#153b78;margin:22px 0 10px}
.resource-chapter p{font-size:.95rem;line-height:1.86;margin:0 0 15px;color:#465978}
.resource-chapter a,.resource-note a{color:#1b57b6;text-decoration:underline;text-underline-offset:2px}
.resource-checklist{padding-left:24px;margin:0 0 25px}
.resource-checklist li{list-style:disc;margin:11px 0;font-size:.94rem;line-height:1.8;color:#475c7a}
.resource-checklist--ordered li{list-style:decimal;padding-left:4px}
.resource-qa{border-top:1px solid #dee6f1;padding:15px 0}
.resource-qa:last-child{border-bottom:1px solid #dee6f1}
.resource-qa summary{font-weight:720;color:#153969;cursor:pointer;line-height:1.45}
.resource-qa summary:focus-visible{outline:2px solid #235ab8;outline-offset:4px}
.resource-qa p{margin:10px 0 2px}
.resource-note{background:#eef4fd;border-left:4px solid #205bb5;padding:22px 24px;border-radius:6px;margin-top:28px}
.resource-note strong{color:#153a73}
.resource-note p{font-size:.88rem;line-height:1.75;color:#506688;margin:8px 0 0}
.resource-aside{position:sticky;top:100px}
.resource-aside__inner{border:1px solid #dae5f0;border-radius:16px;padding:25px;box-shadow:0 10px 30px rgba(10,35,80,.055);background:#fff}
.resource-aside h2{font-size:1.21rem;line-height:1.3;margin:7px 0 12px;color:#173b72}
.resource-aside p:not(.eyebrow){font-size:.88rem;color:#50627a;line-height:1.7}
.resource-aside .btn{margin-top:13px;font-size:.82rem}
.resource-aside__link{display:block;margin-top:17px;font-size:.87rem;color:#1d56a6;text-decoration:underline;text-underline-offset:3px}
.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.resource-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.resource-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.resource-tile{display:flex;flex-direction:column;padding:26px;border:1px solid #d9e4f2;border-radius:16px;background:#fff;min-height:225px;box-shadow:0 6px 26px rgba(5,30,72,.055);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.resource-tile:hover{transform:translateY(-3px);border-color:#a5c2e9;box-shadow:0 14px 35px rgba(15,52,112,.105)}
.resource-tile:focus-visible{outline:3px solid #2463bf;outline-offset:3px}
.resource-tile__type{font-size:.71rem;letter-spacing:.07em;font-weight:760;text-transform:uppercase;color:#3168bd}
.resource-tile h3{font-size:1.2rem;color:#133b77;line-height:1.34;margin:12px 0 10px}
.resource-tile p{font-size:.89rem;color:#526581;line-height:1.65;margin:0 0 22px}
.resource-tile__action{font-size:.83rem;font-weight:750;color:#2259b4;margin-top:auto}
.resource-home__all{text-align:right;margin-top:21px;font-weight:700;color:#245bb5;font-size:.94rem}
.resource-home__all a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.resource-related__links{display:flex;gap:13px;flex-wrap:wrap;margin-top:24px}
.resource-related__link{display:inline-flex;align-items:center;gap:8px;border:1px solid #c7d9f1;border-radius:10px;padding:12px 16px;font-size:.86rem;font-weight:670;background:#fff;color:#1d4b95;text-decoration:none;line-height:1.3}
.resource-related__link:hover{background:#edf4ff;border-color:#8caedc}
.resource-related__link:focus-visible{outline:3px solid #3165b8;outline-offset:3px}
.resource-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.resource-faq-item{border:1px solid #dbe6f1;border-radius:12px;background:#fff;padding:22px}
.resource-faq-item h3{font-size:1.02rem;margin:0 0 10px;line-height:1.4;color:#173a70}
.resource-faq-item p{font-size:.89rem;line-height:1.7;color:#536781;margin:0}
@media(max-width:1080px){.resource-shell{grid-template-columns:minmax(0,1fr) 230px;gap:25px}.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.resource-shell{grid-template-columns:minmax(0,1fr)}.resource-aside{position:static}.resource-grid,.resource-grid--two,.resource-grid--three{grid-template-columns:minmax(0,1fr)}.resource-tile{min-height:0;padding:22px}.resource-faq-grid{grid-template-columns:minmax(0,1fr)}.resource-related__link{width:100%}.resource-home__all{text-align:left}.page-hero__supporting{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){.resource-tile{transition:none}}

/* Lógica functional comparison */
.resource-comparison-scroll{max-width:100%;overflow-x:auto;border:1px solid #dbe5f1;border-radius:14px;margin:19px 0 23px;scrollbar-width:thin}
.resource-comparison-scroll:focus-visible{outline:3px solid #285db8;outline-offset:3px}
.resource-comparison-table{border-collapse:collapse;min-width:920px;width:100%;font-size:.83rem;line-height:1.58}
.resource-comparison-table th,.resource-comparison-table td{padding:16px 17px;text-align:left;vertical-align:top;border-bottom:1px solid #e0e9f4}
.resource-comparison-table thead th{background:#eaf2fd;color:#133b78;font-weight:750;white-space:nowrap}
.resource-comparison-table tbody th{width:43%;background:#f7faff;color:#193a69}
.resource-comparison-table tbody tr:last-child th,.resource-comparison-table tbody tr:last-child td{border-bottom:0}
.resource-comparison-table tbody td{width:19%;color:#506581}
.resource-comparison-explainer{display:block;margin-top:7px;font-size:.83rem;font-weight:400;line-height:1.65;color:#516782}
.resource-comparison-module{display:inline-block;margin-top:10px;color:#1955ab;font-size:.8rem;text-decoration:underline;text-underline-offset:3px;font-weight:670}
.resource-comparison-yes{display:inline-block;color:#196047;font-weight:750}
.resource-comparison-disclaimer{font-size:.81rem!important;color:#697a90!important;line-height:1.75!important;margin-top:9px!important}
@media(max-width:760px){.resource-comparison-table{min-width:810px}.resource-comparison-table th,.resource-comparison-table td{padding:11px 12px}}

/* Cross-site ISP ecosystem links 2026 */
.ecosystem-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ecosystem-link{display:flex;flex-direction:column;gap:12px;min-width:0;background:#fff;border:1px solid #d9e4f2;border-radius:16px;padding:24px;color:#16447e;text-decoration:none;box-shadow:0 8px 24px rgba(10,42,88,.045);transition:border-color .2s,transform .2s}
.ecosystem-link:hover{border-color:#8eafe0;transform:translateY(-2px)}
.ecosystem-link:focus-visible{outline:3px solid #245ab4;outline-offset:3px}
.ecosystem-link strong{font-size:1.14rem;line-height:1.4;color:#163d7a}
.ecosystem-link span{font-size:.91rem;line-height:1.65;color:#536985}
.ecosystem-link small{font-size:.79rem;font-weight:730;color:#265db0;margin-top:auto}
.ecosystem-section{border-top:1px solid #e6edf6}
@media(max-width:880px){.ecosystem-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ecosystem-link-grid{grid-template-columns:minmax(0,1fr)}.ecosystem-link{padding:20px}}
@media(prefers-reduced-motion:reduce){.ecosystem-link{transition:none}}

/* Menu Produtos: quatro colunas compactas, abertura controlada por JS */
@media(min-width:1024px){
.mega{max-height:min(570px,calc(100dvh - var(--header-h) - 12px));}
.mega__inner{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;padding-block:12px 16px;}
.mega__group{min-width:0}
.mega__catalog-link{padding:.56rem .85rem}
.mega__col-title{font-size:.7rem;margin-bottom:5px}
.mega__list{gap:2px}
.mega__link{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:5px 9px}
.mega__link-title{font-size:.84rem;margin-bottom:0;line-height:1.3}
.mega__link-desc{font-size:.69rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.nav__products-toggle{cursor:pointer}
}


/* Navegação: Documentação + seta visível de Produtos (2026-10-27) */
.nav__products-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 29px;
  min-height: 35px;
  padding: 0 6px !important;
  flex-shrink: 0;
  color: #314e73;
}
.nav__products-toggle .nav__chevron { display: none; }
.nav__products-toggle::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.nav__products-toggle[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}
.nav__products-toggle:hover, .nav__products-toggle:focus-visible {
  background: #e8f1fb;
  color: #2053a4;
}
@media (min-width: 1024px) and (max-width: 1260px) {
  .header__inner { gap: .65rem; }
  .nav { gap: 0; }
  .nav__link { padding-inline: .46rem; font-size: .83rem; }
  .header__actions .btn { padding-inline: .85rem; }
  .header .logo__image { max-width: 190px; }
}