/* ══════════════════════════════════════════════════════════════════
   PAYTIME DESIGN SYSTEM — design-system.css
   Unified stylesheet: shared.css + design-system-new.html
   Version: V2.0 — Brand Kit V5 Final
══════════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── 1. TOKENS & VARIABLES ── */
/* ── Design Tokens ── */
:root {
  --azul-escuro: #03021E;
  --azul-profundo: #02023C;
  --azul-medio: #04017B;
  --azul-paytime: #400FF2;
  --lilas: #9884FF;
  --lilas-claro: #D9CDFD;
  --off-white: #E9E4ED;

  --primary-50: #F5F2FE;
  --primary-100: #E9E4ED;
  --primary-200: #D9CDFD;
  --primary-300: #C4B4FC;
  --primary-400: #9884FF;
  --primary-500: #400FF2;
  --primary-600: #3309C4;
  --primary-700: #04017B;
  --primary-800: #030158;
  --primary-900: #02023C;

  --grad-hero: linear-gradient(135deg, #02023C 0%, #04017B 40%, #400FF2 75%, #9884FF 100%);
  --grad-primary: linear-gradient(135deg, #04017B, #400FF2);
  --grad-accent: linear-gradient(135deg, #400FF2, #9884FF);
  --grad-light: linear-gradient(135deg, #9884FF, #D9CDFD);
  --grad-soft: linear-gradient(135deg, #D9CDFD, #E9E4ED);
  --grad-card: linear-gradient(145deg, #ffffff, #F5F2FE);


  --gray-900: #03021E;
  --gray-800: #18233C;
  --gray-700: #3D4C6F;
  --gray-600: #5A6A8A;
  --gray-500: #8A9BB8;
  --gray-400: #C6C5C9;
  --gray-300: #DDD9E4;
  --gray-200: #EDEAF2;
  --gray-100: #F5F2FA;
  --gray-50: #FAF8FD;

  --success: #22C55E;
  --warning: #F59E0B;
  --error: #F07878;
  --success-solid: #21B686;
  --warning-solid: #E6AD42;
  --error-solid: #E43E62;

  --font-heading: 'Poppins', -apple-system, sans-serif;
  --font-body: 'Poppins', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-display: clamp(1.75rem, 2.8vw + 0.6rem, 2.8rem);
  --text-h1: clamp(1.875rem, 2.5vw + 0.5rem, 2.75rem);
  --text-h2: clamp(1.5rem, 2vw + 0.3rem, 2.25rem);
  --text-h3: clamp(1.125rem, 1vw + 0.3rem, 1.5rem);
  --text-h4: clamp(1rem, 0.8vw + 0.2rem, 1.125rem);
  --text-body: 0.9rem;
  --text-body-sm: clamp(0.8125rem, 0.2vw + 0.65rem, 0.9375rem);
  --text-caption: 0.8125rem;
  --text-overline: 0.6875rem;

  /* ── Badge ── */
  --badge-font-size: 0.7rem;
  --badge-font-weight: 500;
  --badge-padding: 0.25rem 0.65rem;
  --badge-border: 1px solid;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 6rem;
  --space-20: 8rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 3px rgba(3, 2, 30, 0.06);
  --shadow-sm: 0 2px 8px rgba(3, 2, 30, 0.08);
  --shadow-md: 0 4px 20px rgba(3, 2, 30, 0.10);
  --shadow-lg: 0 8px 40px rgba(3, 2, 30, 0.12);
  --shadow-xl: 0 16px 64px rgba(3, 2, 30, 0.14);
  --shadow-blue: 0 4px 24px rgba(64, 15, 242, 0.28);

  --border-light: rgba(64, 15, 242, 0.10);
  --border-medium: rgba(64, 15, 242, 0.18);
  --border-strong: rgba(64, 15, 242, 0.35);

  --bg-body: #FAF8FD;
  --bg-white: #ffffff;
  --bg-blue: #400FF2;
  --bg-navy: #03021E;

  /* ── Light canvas tokens ── */
  --canvas: #FAF8FE;
  --canvas-deep: #F2EDFB;
  --ink: #03021E;
  --ink-soft: rgba(3, 2, 30, 0.62);
  --ink-mute: rgba(3, 2, 30, 0.45);
  --ink-line: rgba(3, 2, 30, 0.08);

  /* ── Glass blur scale ── */
  --glass-blur: 28px;
  --glass-blur-strong: 44px;

  /* ── Spacing sp- scale (matches reference pages) ── */
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
}


/* ── Additional design system tokens ── */
:root {
  --font-brand: 'Poppins', -apple-system, sans-serif;
  --font-heading: 'Poppins', -apple-system, sans-serif;
  --text-h4: clamp(1rem, 0.8vw + 0.2rem, 1.125rem);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-10: 128px;
  --radius-2xl: 44px;
  --shadow-xlg: 0 24px 60px rgba(64, 15, 242, 0.18), 0 4px 16px rgba(3, 2, 30, 0.10);
  --shadow-glow: 0 0 0 8px rgba(64, 15, 242, 0.08), 0 12px 32px rgba(64, 15, 242, 0.30);
  --border-subtle: rgba(152, 132, 255, 0.12);
  --c-dark: #03021E;
  --c-deep: #02023C;
  --c-navy: #1B1660;
  --c-blue: #400FF2;
  --c-blue-mid: #5a28ff;
  --c-lilas: #9884FF;
  --c-lilas-lt: #D9CDFD;
  --c-canvas: #FAF8FE;
  --c-canvas-dp: #F0EEFF;
  --c-gold: #d4c685;
}

/* ── 2. RESET & BASE ── */
/* ── Normalização global de ícones DS dentro de containers visuais ── */
[class*="-icon"]>.ds-icon,
[class*="__icon"]>.ds-icon,
[class*="-check"]>.ds-icon,
[class*="__check"]>.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 1em;
  height: 1em;
}


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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(186, 213, 255, 0.58), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(196, 184, 255, 0.50), transparent 34%),
    linear-gradient(180deg, #F8FAFF 0%, #F4F3FF 42%, #FFFFFF 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

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

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

ul {
  list-style: none;
}



::selection {
  background: var(--azul-paytime);
  color: #fff;
}

main {
  position: relative;
  z-index: 2;
}

/* ── 3. LAYOUT (container, section, grid) ── */
/* ── Layout ── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--sp-8) 0;
}

@media (max-width: 768px) {
  .section {
    padding: var(--sp-7) 0;
  }
}

/* ── Alternância automática de background em páginas light ──
   Hero (1º filho, ímpar) = aurora. Depois: par=branco / ímpar=aurora (transparente).
   Resultado: aurora, branco, aurora, branco… a partir do hero. */
[data-navbar-theme="light"] main>section:nth-child(even) {
  background: #ffffff;
}



/* ── 4. TYPOGRAPHY ── */
/* ── Gradient utilities ── */



/* ── DS type scale (type-*, section-head, eyebrow) ── */
/* V2 · SECTION TYPOGRAPHY STANDARDS .section-head+.section-title+.section-desc+.eyebrow ══════════════════════════════════════════════════════ */

/* Container */

/* Section title — em tag: lilás on dark, gradient on light */

/* Section description (V2 alias + light variant) */
.section-desc {
  font-size: 17px;
  color: rgba(233, 228, 237, 0.65);
  line-height: 1.6;
  max-width: 640px;
}

[data-navbar-theme="light"] .section-desc {
  color: var(--ink-soft);
}

/* ── Eyebrow pill badge ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  white-space: nowrap;
  margin-bottom: var(--space-3);
  /* dark theme defaults */
  color: var(--lilas-claro);
  background: rgba(152, 132, 255, 0.10);
  border: 1px solid rgba(152, 132, 255, 0.25);
  /* light theme: overridden via [data-navbar-theme="light"] below */
  /* color: var(--azul-paytime); */
  /* background: rgba(255, 255, 255, 0.7); */
  /* border: 1px solid rgba(64, 15, 242, 0.18); */
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  /* dark theme defaults */
  background: var(--lilas);
  /* light theme: overridden via [data-navbar-theme="light"] below */
  /* background: var(--azul-paytime); */
  /* box-shadow: 0 0 10px var(--azul-paytime); */
}

[data-navbar-theme="light"] .eyebrow {
  color: var(--azul-paytime);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(64, 15, 242, 0.18);
}

[data-navbar-theme="light"] .eyebrow .dot {
  background: var(--azul-paytime);
}

/* ══════════════════════════════════════════════════════
   
/* TYPE */



/* ── 5. BUTTONS ── */
/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1rem 1.875rem;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  text-decoration: none;
}

.btn--primary {
  background: var(--primary-500);
  color: #fff;
  box-shadow: 0 4px 18px rgba(64, 15, 242, 0.22);
}

.btn--primary:hover {
  background: #3008e6;
  box-shadow: 0 8px 26px rgba(64, 15, 242, 0.32);
}

.btn--secondary {
  background: #ffffff;
  color: rgb(11, 18, 32);
  border: 1px solid rgb(215, 218, 226);
}

.btn--secondary:hover {
  background: #E9E4ED;
  color: var(--azul-paytime, #400FF2);
  border-color: rgb(214, 209, 222);
}

.btn--white {
  background: #fff;
  color: var(--primary-500);
  box-shadow: var(--shadow-sm);
}

.btn--white:hover {
  background: #E9E4ED;
  color: var(--azul-paytime, #400FF2);
  box-shadow: var(--shadow-md);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--text-body);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* ── CTA Shine — brilho deslizante para CTAs primárias de "Falar com especialista" ── */
.btn--shine {
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px -4px rgba(64, 15, 242, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  transition: transform .25s ease, box-shadow .25s ease;
}

.btn--shine:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -4px rgba(64, 15, 242, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.btn--shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
  transform: skewX(-20deg);
  animation: shineSlide 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* Brilho branco fica suave sobre botões claros (.btn--white) */
.btn--white.btn--shine::before {
  background: linear-gradient(110deg, transparent 20%, rgba(64, 15, 242, 0.18) 50%, transparent 80%);
}

@keyframes shineSlide {
  0% {
    left: -120%;
  }

  55% {
    left: 140%;
  }

  100% {
    left: 140%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--shine::before {
    animation: none;
  }
}


/* ── 6. BADGES & PILLS ── */
/* ── Badges ── */
.badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 100px;
  border: var(--badge-border) transparent;
  font-size: 10.5px;
  font-weight: var(--badge-font-weight);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge--blue {
  background: rgba(64, 15, 242, 0.10);
  color: var(--primary-500);
  border-color: rgba(64, 15, 242, 0.2);
}

.badge--white {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

[data-navbar-theme="light"] .badge--white {
  background: rgb(255 255 255 / 15%);
  color: rgb(255 255 255 / 80%);
  border-color: rgb(255 255 255 / 40%);
  font-size: 0.6rem;
}



/* ── DS badge variants ── */

.badge.success {
  background: rgba(0, 185, 109, 0.12);
  color: #00875c;
  border: 1px solid rgba(0, 185, 109, 0.25);
}

.badge.warn {
  background: rgba(217, 148, 29, 0.12);
  color: #b06b00;
  border: 1px solid rgba(217, 148, 29, 0.25);
}

.badge.dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.badge.live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00875c;
  animation: pulse 1.6s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

/* INPUT */

/* SWITCH */



/* ── DS chip ── */
/* CHIP */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 1);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.95);
}

.chip.active {
  background: var(--azul-paytime);
  color: #fff;
  border-color: var(--azul-paytime);
}



/* ── 7. GLASS SURFACES ── */
.glass-strong {
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(200%);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 40%, rgba(64, 15, 242, 0.10) 100%);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ── Light variants ── */
[data-navbar-theme="light"] .glass {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.6) 100%);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(64, 15, 242, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.6),
    inset -1px 0 0 rgba(64, 15, 242, 0.04),
    0 14px 40px rgba(64, 15, 242, 0.10),
    0 2px 8px rgba(3, 2, 30, 0.06);
}

[data-navbar-theme="light"] .glass::before {
  background:
    radial-gradient(ellipse 70% 40% at 25% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(ellipse 50% 30% at 90% 100%, rgba(152, 132, 255, 0.18), transparent 60%);
}

[data-navbar-theme="light"] .glass::after {
  background: linear-gradient(135deg, transparent 30%, rgba(152, 132, 255, 0.10) 70%, rgba(64, 15, 242, 0.08) 100%);
}

[data-navbar-theme="light"] .glass-strong {
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 50%, rgb(217 205 253 / 19%) 100%);
  border-color: rgba(255, 255, 255, 0.95);
}

/* ── glass-white: card branco semitransparente com borda e sombra suave ── */

/* ── glass-soft: glass para páginas light com fundo branco→lilás suave ── */

/* Hero light: remove dark grad-hero, deixa o canvas de blobs aparecer */
[data-navbar-theme="light"] .hero {
  background: transparent;
}

/* ══════════════════════════════════════════════════════
   

/* ── DS glass (light canvas variants) ── */
/* GLASS */
.glass {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 50%, rgba(245, 242, 251, 0.78) 100%);
  backdrop-filter: blur(10px) saturate(170%);
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  border-radius: 22px;
  /* radius-lg liquid */
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(64, 15, 242, 0.06),
    0 14px 40px rgba(64, 15, 242, 0.10),
    0 2px 8px rgba(3, 2, 30, 0.06);
  isolation: isolate;
  overflow: hidden;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 25% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(ellipse 50% 30% at 90% 100%, rgba(152, 132, 255, 0.14), transparent 60%);
  mix-blend-mode: screen;
  z-index: 1;
}

.glass>* {
  position: relative;
  z-index: 2;
}

.glass-pill {
  border-radius: 100px;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 8px 22px rgba(64, 15, 242, 0.10);
}



/* ── Glass demo variants (dark/light) ── */
/* 1. GLASS SYSTEM */



/* ── 8. CARDS (feature-card, glass-soft, etc.) ── */
/* ── Features grid ── */

/* ── feature-header: icon + title lado a lado ── */

/* ── Check list (usado em feature-card com bullets) ── */




/* ── DS component tiles (cmp-row, module-tile, meta-card, chart-card, etc.) ── */
/* COMPONENTS */



/* ── DS glass demos ── */
/* GLASS DEMOS */



/* ── 9. HERO COMPONENTS ── */
/* ── Hero base ── */
.hero {
  background: var(--grad-hero);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 110px;
  padding-bottom: var(--space-8);
}

@keyframes circle-float {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-20px) scale(1.03);
  }
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
}



/* ── Hero light context ── */
/* Hero light: remove dark grad-hero, deixa o canvas de blobs aparecer */
[data-navbar-theme="light"] .hero {
  background: transparent;
}

/* ══════════════════════════════════════════════════════
   

/* ── Page common hero styles ── */
/* ── Page canvas (animated blobs) ── */
.page-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

@keyframes pgDrift1 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(70px, 110px) scale(1.08);
  }

  66% {
    transform: translate(-50px, 55px) scale(0.96);
  }
}

@keyframes pgDrift2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  40% {
    transform: translate(-90px, -70px) scale(1.12);
  }

  70% {
    transform: translate(55px, 38px) scale(0.92);
  }
}

@keyframes pgDrift3 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  30% {
    transform: translate(100px, -50px) scale(1.06);
  }

  65% {
    transform: translate(-35px, 85px) scale(0.96);
  }
}

@keyframes pgDrift4 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-65px, -100px) scale(1.15);
  }
}

/* ── Hero 2-col layout (canônico — usado por todas as páginas de produto/solução) ── */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  overflow: visible;
}

@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    display: none;
  }
}

/* Imagem mockada no hero 2-col (provisória — páginas banking) */

.hero-headline {
  font-size: clamp(44px, 5.4vw, 55px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-5);
  color: var(--ink);
}

.hero-headline em {
  font-style: normal;
  background: linear-gradient(135deg, var(--azul-paytime) 0%, var(--lilas) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 auto var(--sp-6);
}

.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: var(--sp-3);
  flex-wrap: nowrap;
}

.hero-ctas {
  flex-wrap: nowrap;
}

.hero-cta-row .btn,
.hero-ctas .btn {
  flex: 0 0 auto;
}

/* ── Features bento grid ── */

/* 3 por linha por padrão; linhas incompletas ficam CENTRALIZADAS (flex + justify-center) */

/* Seções com EXATAMENTE 4 cards → 4 colunas em monitor normal (≥1000px).
   Não afeta seções de 3/6 cards nem o mobile (que colapsa em 2/1 abaixo de 880px). */

/* Seções com EXATAMENTE 2 cards → 2 colunas CENTRALIZADas (não alinha à esquerda).
   Cards não devem ficar encostados na esquerda deixando buraco à direita. */

/* Flat — variantes legadas mantidas para retrocompatibilidade */

/* ── Steps grid ── */
/* Column count varies by page (3 or 4); base provides shared card styles */
.steps-grid {
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.steps-grid::before {
  content: "";
  position: absolute;
  top: 50px;
  height: 2px;
  background: linear-gradient(to right,
      transparent 0%, var(--azul-paytime) 15%,
      var(--lilas) 50%, var(--azul-paytime) 85%, transparent 100%);
  opacity: 0.35;
  z-index: 0;
}

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

  .steps-grid::before {
    display: none;
  }
}

/* ── Trust block ── */
/* grid-template-columns varies (5-col vs 4-col); each page sets its own */

/* ── CTA block ── */

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



/* ── CTA section (dark) ── */
/* ── CTA section ── */



/* ── Audience page styles ── */
/* ── Audience pages (marketplaces, fintechs, entretenimento) ── */

.audience-section {
  padding: var(--space-12) 0;
}

.audience-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(64, 15, 242, 0.10);
  box-shadow: 0 18px 48px rgba(64, 15, 242, 0.07);
}

.audience-card h3 {
  font-size: 1.08rem;
  color: var(--gray-950);
  margin-bottom: var(--space-3);
  line-height: 1.28;
}

.audience-card p {
  color: var(--gray-600);
  line-height: 1.66;
  font-size: 0.94rem;
}



/* ── Bemobi credibility section ── */
/* ── Bemobi credibility section (api, no-code) ── */



/* ── Step indicator ── */
/* ── Step indicator (plataforma, presencial) ── */



/* ── DS hero orb ── */
/* 6. HERO ORB */

@keyframes orbPulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.06);
  }
}



/* ── DS floating hero cards ── */
/* 7. FLOATING HERO CARDS */

@keyframes vcFloat1 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes vcFloat2 {

  0%,
  100% {
    transform: translateY(-6px);
  }

  50% {
    transform: translateY(6px);
  }
}

@keyframes vcFloat3 {

  0%,
  100% {
    transform: translateY(4px);
  }

  50% {
    transform: translateY(-8px);
  }
}



/* ── DS balance bar ── */
/* 8. BALANCE BAR */



/* ── 10. NAVIGATION ── */
/* ── Navbar ── */

/* Glass pill — exato do claude-design/home.html */
.glass-pill {
  border-radius: 100px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(3, 2, 30, 0.4),
    0 8px 24px rgba(3, 2, 30, 0.3);
}

/* Topbar layout — exato do claude-design/home.html */
nav.topbar {
  position: fixed;
  top: 16px;
  /* var(--sp-4) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(1180px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 22px;
  transition: background 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease, top 0.35s ease;
}

.topbar.scrolled {
  top: 10px;
}

/* Light theme pill */
[data-navbar-theme="light"] .topbar {
  background: rgb(255 255 255 / 30%);
  border-color: rgba(107, 66, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 24px rgba(64, 15, 242, 0.08);
}

/* ── Variante: barra de largura total, sem cantos arredondados (sóbria) ──
   Mantém o MESMO vidro/blur/sombra da .glass-pill (transparência igual à anterior);
   esta classe cuida só do LAYOUT: full-width, sem raio, conteúdo + megamenu
   contidos numa largura container (1200px) via padding lateral do nav.
   (.navbar__item--mega é position:static → o megamenu usa a caixa de padding do nav.)
   Backup da versão pill em _backup/*.pre-navbar-flat.bak (revert). */
nav.topbar.topbar--full {
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-width: 0 0 1px 0;
  padding: 10px 0;
}

nav.topbar.topbar--full.scrolled {
  top: 0;
}

/* Conteúdo do menu alinhado ao .container do site (mesma largura e padding).
   .navbar__inner usa a classe .container; aqui só o layout em linha. */
.topbar--full .navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  position: relative;
}

@media (max-width: 900px) {
  nav.topbar.topbar--full {
    padding: 8px 0;
  }
}

/* Megamenu (Soluções) contido na largura container, alinhado ao conteúdo */
.topbar--full .navbar__megamenu-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Megamenu à mesma distância da barra que os dropdowns simples (gap +5px).
   Compensa o deslocamento causado pelo wrapper .navbar__inner. */
.topbar--full .navbar__item--mega .navbar__dropdown {
  top: calc(100% - 2px);
}

/* Dropdowns simples (Para quem, Modelos, Recursos) à mesma distância da barra
   que o megamenu de Soluções (ponte/padding-top de 18px). */
.topbar--full .navbar__item:not(.navbar__item--mega) .navbar__dropdown {
  padding-top: 18px;
}

/* Brand */
.navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 0.2s;
}

.navbar__brand:hover {
  opacity: 0.85;
}

.navbar__logo {
  height: 25px;
  width: auto;
  display: block;
}

/* Links */
.navbar__links {
  display: flex;
  gap: 2px;
  list-style: none;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  margin-left: var(--space-5);
}

.navbar__item {
  position: relative;
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 100px;
  color: rgba(233, 228, 237, 0.80);
  transition: background 0.22s, color 0.22s;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}

.navbar__link svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.navbar__item:hover>.navbar__link {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.navbar__item:hover>.navbar__link svg {
  transform: rotate(180deg);
}

.navbar__link--plain:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

[data-navbar-theme="light"] .navbar__link {
  color: var(--gray-700);
}

[data-navbar-theme="light"] .navbar__item:hover>.navbar__link,
[data-navbar-theme="light"] .navbar__link--plain:hover {
  background: rgba(64, 15, 242, 0.07);
  color: var(--primary-500);
}

/* Dropdown */
.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  padding-top: 10px;
  /* ponte invisível: mantém hover ao cruzar o gap */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.navbar__item:hover .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.navbar__dropdown-inner {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-lg);
}

.navbar__dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background 0.15s;
  text-decoration: none;
}

.navbar__dropdown-item:hover {
  background: var(--gray-50);
}

.navbar__dropdown-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(64, 15, 242, 0.10) !important;
  color: var(--primary-500) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.navbar__dropdown-item:hover .navbar__dropdown-icon {
  background: rgba(30, 144, 255, 0.18) !important;
  color: #1e90ff !important;
  transform: scale(1.05);
}

.navbar__dropdown-item:hover .navbar__dropdown-icon svg {
  stroke: #1e90ff !important;
}

.navbar__dropdown-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor !important;
}

.navbar__dropdown-icon i {
  font-size: 0.875rem;
}

.navbar__dropdown-title {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.3;
}

.navbar__dropdown-desc {
  font-size: var(--text-caption);
  color: var(--gray-500);
  margin-top: 2px;
}

/* Actions */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.navbar__ghost {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 100px;
  color: rgba(233, 228, 237, 0.85);
  transition: background 0.22s, color 0.22s;
  text-decoration: none;
  white-space: nowrap;
}

.navbar__ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  text-decoration: none;
}

[data-navbar-theme="light"] .navbar__ghost {
  color: var(--gray-700);
}

[data-navbar-theme="light"] .navbar__ghost:hover {
  background: rgba(64, 15, 242, 0.07);
  color: var(--primary-500);
}

.navbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 18px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: var(--primary-500);
  box-shadow: 0 4px 18px rgba(64, 15, 242, 0.22);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.navbar__cta::before {
  display: none;
}

.navbar__cta:hover {
  transform: translateY(-1px);
  text-decoration: none;
  background: #3008e6;
  box-shadow: 0 8px 26px rgba(64, 15, 242, 0.32);
}

/* Secondary variant (mesmo tamanho do CTA, estilo secundário) */
.navbar__cta--secondary {
  background: #ffffff;
  color: rgb(11, 18, 32);
  border: 1px solid rgb(215, 218, 226);
  box-shadow: none;
}

.navbar__cta--secondary:hover {
  background: #f2f4f8;
  color: rgb(11, 18, 32);
  border-color: rgb(196, 201, 212);
  box-shadow: none;
}

/* Hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  margin-left: 8px;
  background: none;
  border: none;
  color: rgba(233, 228, 237, 0.85);
}

.navbar__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all 0.3s;
}

[data-navbar-theme="light"] .navbar__hamburger {
  color: var(--gray-700);
}

@media (max-width: 900px) {
  .topbar {
    padding: 8px 10px 8px 16px;
  }

  .navbar__links,
  .navbar__actions,
  .navbar__ghost {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }
}

@media (max-width: 480px) {
  .navbar__cta span {
    display: none;
  }
}






/* ── 12. CODE WINDOW ── */
/* ── Code window ────────────────────────────────────
   .code-window     → terminal escuro standalone (sempre dark)
   .code-window-glass → usa .glass/.glass-strong do contexto
───────────────────────────────────────────────────── */

/* bar e body sempre dark dentro de .code-window */

/* Syntax — dark */

/* Syntax — light (opt-in via .code-window-light no wrapper) */



/* ── DS code window (block4) ── */
/* 9. CODE WINDOW */



/* ── 13. FAQ ACCORDION ── */
/* ── FAQ accordion ── */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.faq-item {
  padding: var(--sp-5);
}

.faq-item summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  color: var(--azul-paytime);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(64, 15, 242, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: var(--sp-4);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.65;
}




/* ── 14. STAT STRIP ── */
/* ── Stat strip ── */
.stat-strip {
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.stat-strip-item {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.stat-strip-num {
  white-space: nowrap;
}

.stat-strip-item+.stat-strip-item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -0.5);
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(64, 15, 242, 0.15), transparent);
}

.stat-strip-num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--azul-paytime);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-strip-label {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.4;
}

@media (max-width: 880px) {
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-strip-item+.stat-strip-item::before {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════
   
/* 12. STAT STRIP */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
}

.stat-strip-item {
  padding: 20px 24px;
  position: relative;
}

.stat-strip-item+.stat-strip-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(152, 132, 255, 0.25), transparent);
}



/* ── Numbers bar ── */
/* ── Numbers bar (api, no-code) ── */



/* ── 15. DEVICE MOCKS (device-pos, device-phone, device-tablet, device-cards, cc) ── */
/* === DEVICE: POS terminal === */

@keyframes ripple {
  0% {
    width: 25px;
    height: 25px;
    opacity: 1;
  }

  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}

/* === DEVICE: Smartphone (Tap on Phone) === */

@keyframes ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* === DEVICE: Tablet === */

/* === DEVICE: Card stack === */

/* === QR CODE === */

/* === BANK SLIP === */
.boleto {
  width: 240px;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(3, 2, 30, 0.1);
  border: 1px solid var(--ink-line);
  position: relative;
}

/* === CHART === */

/* === TX RECEIPT === */

/* === CODE BLOCK === */

/* === ICON LIBRARY === */

/* === APP ICONS === */

/* unified squircle tile (no outer backdrop) */

/* === MOCK CLIENT LOGO === */

/* Logo variant wrapper with label */


/* Variants */

/* Vertical variant */



/* ── Paytime logo lockup (brand applications) ── */
/* Combined lockup SVG (img) inside a stage */

/* Symbol full-bleed: fills entire card */

/* TOC */

@media (max-width: 1100px) {

  main {
    padding: var(--sp-5) 0;
  }
}

/* TOAST COPY */


/* ── POS terminal mock (block4) ── */
/* 3. POS TERMINAL MOCK */

@keyframes vcRipple {
  0% {
    width: 28px;
    height: 28px;
    opacity: 1;
  }

  100% {
    width: 130px;
    height: 130px;
    opacity: 0;
  }
}



/* ── Phone mock (block4) ── */
/* 4. PHONE MOCK */
.phone-mock {
  width: 180px;
  border-radius: 28px;
  background: linear-gradient(135deg, #02023C, #04017B);
  padding: 8px;
  border: 1px solid rgba(152, 132, 255, 0.25);
  box-shadow: 0 30px 60px rgba(3, 2, 30, 0.5);
  animation: floatPhone 8s ease-in-out infinite alternate;
}

@keyframes floatPhone {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-12px);
  }
}

.phone-screen {
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #F2EDFB 100%);
  padding: 14px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
}

.phone-notch {
  width: 46px;
  height: 13px;
  background: var(--c-dark);
  border-radius: 100px;
  margin: 0 auto 10px;
}

.phone-amount-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  color: rgba(3, 2, 30, 0.4);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

.phone-amount {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-align: center;
  margin: 3px 0 12px;
}

.phone-card {
  margin: var(--sp-3) 0;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #02023C, #04017B);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phone-card .chip {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(135deg, #d4c685, #a8941a);
}

.phone-tap-circle {
  margin-top: auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-blue), var(--c-lilas));
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(64, 15, 242, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.phone-tap-circle svg {
  width: 32px;
  height: 32px;
  color: #fff;
}

.phone-tap-circle::before,
.phone-tap-circle::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(64, 15, 242, 0.5);
  border-radius: 50%;
  animation: vcRipple2 2s ease-out infinite;
}

.phone-tap-circle::after {
  animation-delay: 0.6s;
}

@keyframes vcRipple2 {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.phone-tap-lbl {
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: rgba(3, 2, 30, 0.5);
  margin-top: 6px;
}



/* ── Credit card stack (block4) ── */
/* 5. CREDIT CARD STACK */



/* ── PIX flow steps ── */
/* 13. PIX FLOW STEPS */



/* ── Trust badge ── */
/* 14. TRUST BADGE */



/* ── Routing block ── */
/* 15. ROUTING BLOCK */

.routing-tx {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.routing-tx .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.routing-tx .val {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.routing-tx .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 3px;
}

.routing-acq {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.routing-acq .name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.routing-acq .ms {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--c-lilas);
  background: rgba(64, 15, 242, 0.15);
  padding: 2px 7px;
  border-radius: 100px;
}

.routing-acq.winner {
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-mid));
  border-color: transparent;
}

.routing-acq.winner .name {
  color: #fff;
}

.routing-acq.winner .ms {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}


/* ── 16. SPLIT BUILDER ── */
/* 10. SPLIT BUILDER */



/* ── 17. MARQUEE ── */
/* 11. MARQUEE */

@keyframes vcMarquee {
  to {
    transform: translateX(-50%);
  }
}



/* ── Eyebrow badge (block4) ── */
/* 2. EYEBROW BADGE */

@keyframes dotPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}



/* ── 18. ANIMATIONS & KEYFRAMES ── */
/* ── Animations ── */
.animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}






@keyframes auroradrift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(60px, -50px) scale(1.07);
  }

  100% {
    transform: translate(-50px, 30px) scale(0.95);
  }
}

































@keyframes lm-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

@keyframes lm-float {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-12px);
  }
}

/* ── 19. PAGE BACKGROUNDS (aurora, grain, page-canvas) ── */
/* ── Aurora / Grain ─────────────────────────────────
   Fundo animado usado em páginas de tema claro.
   O .aurora tem background padrão (index.html).
   Páginas que precisarem de variação sobrescrevem
   apenas o `background` do .aurora inline.
───────────────────────────────────────────────────── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 10% 5%, rgba(152, 132, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 95% 30%, rgba(217, 205, 253, 0.16), transparent 70%),
    linear-gradient(180deg, #FDFCFE 0%, #FAF8FC 50%, #F5F2F9 100%);
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  mix-blend-mode: multiply;
  opacity: 0.5;
  animation: auroradrift 32s ease-in-out infinite alternate;
}

.aurora::before {
  top: -8%;
  left: -10%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(152, 132, 255, 0.4), transparent 60%);
  filter: blur(140px);
  mix-blend-mode: multiply;
  opacity: 0.25;
}

.aurora::after {
  bottom: -15%;
  right: -10%;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(64, 15, 242, 0.4), transparent 60%);
  animation-delay: -16s;
  animation-duration: 38s;
}

.aurora-c {
  position: absolute;
  top: 45%;
  left: 60%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 205, 253, 0.7), transparent 65%);
  filter: blur(120px);
  mix-blend-mode: multiply;
  opacity: 0.6;
  animation: auroradrift 26s ease-in-out infinite alternate-reverse;
}



.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.18  0 0 0 0 0.32  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}




/* ── 21. RESPONSIVE ── */
/* ── Shared responsive ── */



/* ── FOOTER ── */
/* ── Footer ── */
.footer {
  background: var(--bg-navy);
  padding: var(--space-8) var(--space-4);
  position: relative;
  z-index: 2;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.footer__logo-img {
  height: 28px;
  width: auto;
  display: block;
}

/* Faixa de selos de verificação (PCI DSS, ISO 9001, ReclameAQUI) */
.footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  margin-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__badge {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.88);
}

.footer__badge svg {
  height: 34px;
  width: auto;
  display: block;
}

.footer__badge-iso-img {
  height: 34px;
  width: auto;
  display: block;
  margin-right: 8px;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

/* ─────────────────────────────────────────────────────────────
   Navegador de categoria (.macro-*) — seção reaproveitável que
   lista as soluções da mesma categoria, destacando a página atual.
   Injetada por components.js (data-cat-nav). Portada do solucoes.html.
   ───────────────────────────────────────────────────────────── */
.macro-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4, 18px);
  max-width: 1120px;
  margin: 0 auto;
}

.macro-card {
  flex: 0 1 258px;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(11, 18, 32, .07);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 34px rgba(64, 15, 242, .06);
  font: inherit;
  text-decoration: none;
  display: block;
}

.macro-card.is-current {
  border-color: var(--azul-paytime);
  box-shadow: 0 0 0 2px rgba(64, 15, 242, .18), 0 18px 44px rgba(64, 15, 242, .12);
}

.macro-card__ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(64, 15, 242, .08);
  color: var(--azul-paytime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 14px;
}

.macro-card__t {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}

.macro-card__d {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 5px;
  line-height: 1.5;
}

.macro-stat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: var(--sp-6, 32px) auto 0;
  max-width: 900px;
}

.macro-stat .ms {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, #3B4463);
  background: rgba(64, 15, 242, .06);
  border: 1px solid rgba(64, 15, 242, .12);
  border-radius: 100px;
  padding: 7px 14px;
}

.macro-stat .ms b {
  color: var(--azul-paytime);
}

.macro-foot {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: var(--sp-5, 26px);
}

.macro-foot b {
  color: var(--ink);
  font-weight: 600;
}

/* Selo premiação ReclameAQUI (colorido, imagem oficial) */
.footer__badge--award {
  color: inherit;
}

.footer__badge-award-img {
  height: 50px;
  width: auto;
  display: block;
  border-radius: 6px;
}

.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-4);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.18s;
}

.footer__link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.footer__bottom {
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__copy {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.35);
}

.footer__bemobi-badge {
  opacity: 0.6;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.footer__bemobi-badge:hover {
  opacity: 1;
}

.footer__social {
  display: flex;
  gap: var(--space-2);
}

.social-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
  transition: all 0.18s;
}

.social-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.social-btn:hover {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: #fff;
  transform: translateY(-2px);
}


/* ── Responsive ── */
@media (max-width: 1024px) {

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 768px) {

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-4);
  }

  .section {
    padding: var(--space-6) 0;
  }
}

/* ══════════════════════════════════════════════════════
   

/* ── OTHERS (DS-specific components) ── */
/* AVATARS */


/* TOOLTIP */


/* PROGRESS */

/* META CARDS – financial primitives */

/* MODULES — devices & financial primitives */



@media (max-width: 1100px) {

  main {
    padding: var(--sp-5) 0;
  }
}


/* ── Live Monitor ── */
/* live monitor */

/* ── VC Stage (design system showcase) ── */
/* ── Stage (showcase area) ── */



/* ── DS colors grid (design system only) ── */
/* COLORS */



/* ── DS spacing visual ── */
/* SPACING */



/* ── DS radii / shadows visual ── */
/* RADII / SHADOWS */



/* ── SPACING UTILITIES ── */
/* SPACING UTILITIES Baseadas em --space-* (rem) e --sp-* (px) Uso: p-4,
px-6,
py-3,
mt-5,
gap-4 … Sistema --space-*: 1=0.25r 2=0.5r 3=0.75r 4=1r 5=1.5r 6=2r 8=3r 10=4r 12=5r 16=6r 20=8r Sistema --sp-*: 3=12px 4=16px 5=24px 6=32px 7=48px 8=64px 9=96px ══════════════════════════════════════════════════════ */

/* ── Padding — todas as faces ── */

/* ── Padding — eixo X (esquerda + direita) ── */

/* ── Padding — eixo Y (topo + base) ── */

/* ── Padding — faces individuais ── */

/* ── Margin — todas as faces ── */

/* ── Margin — eixo X ── */

/* ── Margin — eixo Y ── */

/* ── Margin — faces individuais ── */

/* ── Gap (flex / grid) ── */

/* ── Sistema --sp-* (px) — para quem usa a escala maior ── */

/* ══════════════════════════════════════════════════════
   GLOBAL MOBILE IMPROVEMENTS — max-width: 768px
   These rules patch common layout patterns across all
   pages. Per-page overrides live in each page's \3c style>.
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6);
  }

  .hero-visual {
    display: none !important;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-headline {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .hero-sub {
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-row,
  .hero-ctas {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
  }

  .hero-cta-row .btn,
  .hero-ctas .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Stats */
  .stat-strip {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  .stat-strip-num {
    font-size: 1.6rem;
  }

  /* Sections */
  .section {
    padding: var(--sp-8) var(--sp-4);
  }

  .section-desc {
    font-size: 15px;
  }

  /* Grids */

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid::before {
    display: none;
  }

  /* CTA block */

  .cta-row {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
  }

  .cta-row .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Comparison tables */
  .compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Badge */
  .badge {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  /* Eyebrow */
  .eyebrow {
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAVBAR DRAWER (hamburger menu)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.body--menu-open {
    overflow: hidden;
  }

  /* FULLSCREEN drawer no mobile — cobre TUDO, inclusive logo */
  .navbar--menu-open .navbar__links {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0 !important;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    background: #F5F2FE;
    padding: 64px 20px env(safe-area-inset-bottom, 24px);
    gap: 4px;
    z-index: 1000000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    justify-content: flex-start;
    align-items: stretch;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  /* Primeiro item ganha respiro extra do topo */
  .navbar--menu-open .navbar__links>li:first-child {
    margin-top: 0.5rem;
  }

  /* Removido o ::before X decorativo — o hambúrguer animado (linhas → X) é o botão real */
  /* Logo decorativo via ::after — removido, brand original agora aparece */
  /* Topbar passa a ocupar a viewport inteira quando menu aberto
     (sem isso, o transform: translateX(-50%) ancora o fixed-child à pilula) */
  nav.topbar.navbar--menu-open {
    z-index: 1000001 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    transform: none !important;
    background: #F5F2FE !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 14px 18px !important;
    border-radius: 0 !important;
    justify-content: space-between !important;
  }

  /* Logo do brand fica visível no topbar quando menu aberto */
  nav.topbar.navbar--menu-open .navbar__brand {
    visibility: visible;
    z-index: 1000002;
  }

  /* Actions (Entrar/Falar com vendas/Contrate agora) — escondidas, ficam dentro do drawer */
  nav.topbar.navbar--menu-open .navbar__actions {
    visibility: hidden;
  }

  nav.topbar.navbar--menu-open .navbar__hamburger {
    position: relative;
    z-index: 1000001 !important;
    visibility: visible !important;
  }

  nav.topbar.navbar--menu-open {
    z-index: 1000001 !important;
  }

  /* Drawer começa logo abaixo do navbar, sem espaço extra */
  .navbar--menu-open .navbar__links {
    padding-top: 70px !important;
    /* exatamente a altura do navbar */
    margin-top: 0 !important;
  }

  .navbar--menu-open .navbar__item {
    width: 100%;
    list-style: none;
  }

  .navbar--menu-open .navbar__link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(64, 15, 242, 0.06);
    font-size: 15px;
    font-weight: 600;
    color: #0e0d27;
    cursor: pointer;
  }

  .navbar--menu-open .navbar__link svg {
    transition: transform .25s;
  }

  .navbar--menu-open .navbar__item--open .navbar__link svg {
    transform: rotate(180deg);
  }

  .navbar--menu-open .navbar__dropdown {
    position: static !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    pointer-events: none !important;
    max-height: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transition: max-height .25s, opacity .2s;
  }

  .navbar--menu-open .navbar__item--open .navbar__dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: none;
    margin: 4px 0 8px !important;
    overflow: visible;
  }

  .navbar--menu-open .navbar__dropdown-inner {
    grid-template-columns: 1fr !important;
    padding: 4px 0 !important;
    gap: 4px !important;
    background: transparent !important;
  }

  .navbar--menu-open .navbar__dropdown-item {
    padding: 10px 14px !important;
    border-radius: 10px;
  }

  .navbar--menu-open li:has(> .navbar__link--plain) .navbar__link--plain {
    display: flex;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(64, 15, 242, 0.04);
    font-size: 15px;
    font-weight: 600;
    color: #0e0d27;
  }

  /* Hide top-bar actions when drawer is open — they live INSIDE drawer instead */
  .navbar--menu-open .navbar__actions {
    display: none !important;
  }

  /* Drawer-injected actions (added by JS) — only visible inside mobile drawer */
  .navbar__drawer-actions {
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(64, 15, 242, 0.08);
  }

  .navbar--menu-open .navbar__drawer-actions {
    display: flex !important;
  }

  .navbar__drawer-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }

  .navbar__drawer-actions .drawer-ghost {
    background: rgba(64, 15, 242, 0.04);
    color: #0e0d27;
    border: 1px solid rgba(64, 15, 242, 0.12);
  }

  .navbar__drawer-actions .drawer-cta {
    background: linear-gradient(135deg, #400FF2, #5a28ff);
    color: #fff;
    box-shadow: 0 8px 20px rgba(64, 15, 242, 0.25);
  }

  .navbar--menu-open .navbar__hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .navbar--menu-open .navbar__hamburger span:nth-child(2) {
    opacity: 0;
  }

  .navbar--menu-open .navbar__hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

/* ══════════════════════════════════════════════════════════════════
   DEEP MOBILE VISUAL REVIEW (CSS-only, desktop intact)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Global typography clamp — no horizontal bleed */
  body {
    -webkit-text-size-adjust: 100%;
  }

  h1,
  h2,
  h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Hero universal — stack, hide visual */
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: var(--sp-5) !important;
  }

  .hero-visual {
    display: none !important;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-headline {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
  }

  .hero-sub {
    font-size: 15px !important;
    max-width: 100%;
  }

  .hero-cta-row,
  .hero-ctas {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .hero-cta-row .btn,
  .hero-ctas .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Stats / stat-strip — collapse */
  .stat-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .stat-strip-num {
    font-size: 1.5rem !important;
  }

  .stat-strip-label {
    font-size: 11px !important;
  }

  /* Hero stats specifically */

  /* Section spacing */
  .section {
    padding: 56px var(--sp-4) !important;
  }

  .section+.section {
    padding-top: 0 !important;
  }

  /* Multi-col grids universal collapse */

  /* 2-col on mobile when source is 3-4 col */

  /* Cards trim padding */
  
  .audience-card,
  .why-item,
  .card {
    padding: 20px !important;
  }

  /* Hide decorative-only elements */

  /* Background blobs scaled down */

  .aurora-c {
    filter: blur(60px) !important;
  }

  /* CTAs centered + stacked everywhere */
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .cta-row .btn {
    width: 100%;
    justify-content: center;
  }

  /* Tables / compare blocks */
  .compare-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Code window — smaller font */

  /* Photo grids universal */

  /* Container width */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Generic 2-col layouts to 1-col */

  /* CTA block (dark final card) */
}

@media (max-width: 480px) {

  .stat-strip {
    grid-template-columns: 1fr !important;
  }

  .navbar__cta {
    font-size: 13px;
    padding: 8px 14px;
  }
}



/* ══════════════════════════════════════════════════════════════════
   MOBILE FIXES — overflow + table + button icons + stats
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Global overflow protection */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  main,
  section {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* Comparison tables — horizontal scroll with bleed-out */
  .compare-wrap,
  [class*="compare-table"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 0 16px !important;
    scrollbar-width: thin;
  }

  .compare-wrap table,
  .compare-wrap>table,
  .compare-table {
    min-width: 560px !important;
    width: max-content !important;
  }

  .compare-wrap th,
  .compare-wrap td,
  .compare-table th,
  .compare-table td {
    font-size: 12px !important;
    padding: 12px 10px !important;
    line-height: 1.4 !important;
  }

  /* Button icon size cap — fixes huge arrows in CTAs */
  .btn svg,
  .btn--primary svg,
  .btn--lg svg,
  .btn--shine svg,
  .btn--white svg,
  .navbar__cta svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .btn {
    font-size: 14px !important;
    padding: 12px 20px !important;
    gap: 8px !important;
  }

  .btn--lg {
    font-size: 15px !important;
    padding: 14px 22px !important;
  }

  .btn--shine {
    font-size: 15px !important;
    padding: 14px 22px !important;
  }

  /* Stats / bento — keep 2x2 but tighter, or stack at 480 */

  /* Bento layouts — be safe with min-width 0 */

  /* Compare table when it is grid-based (not <table>) */

  /* Eyebrow / chips dont break layout */

  .chip,
  .badge {
    font-size: 9px !important;
    padding: 4px 10px !important;
  }
}

@media (max-width: 480px) {

  /* Body padding tighter */
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}



/* ══════════════════════════════════════════════════════════════════
   MOBILE — section edges + b2b2b card uniformity
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Sections: backgrounds extend edge-to-edge, content padded only by .container */
  html,
  body {
    margin: 0 !important;
  }

  body {
    padding: 0 !important;
  }

  main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .section,
  .hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  /* Container handles all horizontal padding */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── B2B2B flow — uniform cards on mobile ── */

  /* Highlighted card keeps its gradient — just unify dimensions */

  /* Other "flow" / "chain" patterns — same idea */

  [class*="-arrow"]:not(.btn):not(.btn *) {
    display: none !important;
  }
}



/* Drawer-injected actions — hidden by default everywhere */
.navbar__drawer-actions {
  display: none !important;
}

@media (max-width: 900px) {
  .navbar--menu-open .navbar__drawer-actions {
    display: flex !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   NAVBAR MEGAMENU — estilo Stripe (full-width 3-col)
   Aplicado APENAS no item .navbar__item--mega (Soluções)
   ══════════════════════════════════════════════════════════════════ */
.navbar__item--mega {
  position: static;
}

.navbar__item--mega .navbar__dropdown {
  left: 0;
  right: 0;
  /* overlap the topbar's bottom padding so the mouse can travel from
     the link down to the menu card without losing hover */
  top: calc(100% - 12px);
  transform: translateY(-6px);
  width: 100%;
  min-width: 0;
  /* invisible hover bridge — visible card is below this padding */
  padding-top: 18px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.navbar__item--mega:hover .navbar__dropdown {
  transform: translateY(0);
}

.navbar__megamenu-inner {
  /* Fills the full topbar width — no max-width restriction */
  width: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 32px;
  box-sizing: border-box;
}

/* Liquid-glass variant — exact match to .topbar (.glass-pill + light-theme override) */

.navbar__megamenu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}

.navbar__megamenu-grid--4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.navbar__megamenu-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--azul-paytime);
  background: rgba(64, 15, 242, 0.10);
}

.navbar__megamenu-col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gray-700);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(64, 15, 242, 0.10);
}

.navbar__megamenu-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, transform .18s;
}

.navbar__megamenu-item+.navbar__megamenu-item {
  margin-top: 2px;
}

.navbar__megamenu-item:hover {
  background: rgba(64, 15, 242, 0.04);
}

.navbar__megamenu-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(64, 15, 242, 0.08);
  color: var(--azul-paytime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s, color .18s;
}

.navbar__megamenu-item__icon svg {
  width: 16px;
  height: 16px;
}

.navbar__megamenu-item:hover .navbar__megamenu-item__icon {
  background: rgba(30, 144, 255, 0.18);
  color: #1e90ff;
}

.navbar__megamenu-item__body {
  min-width: 0;
}

.navbar__megamenu-item__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--azul-paytime);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 2px;
  transition: color .18s;
}

.navbar__megamenu-item:hover .navbar__megamenu-item__title {
  color: #1e90ff;
}

.navbar__megamenu-item__desc {
  font-size: 12.5px;
  color: var(--gray-600);
  line-height: 1.4;
}

.navbar__megamenu-item--soon {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

.navbar__megamenu-item--soon .navbar__megamenu-item__title::after {
  content: " · em breve";
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-left: 4px;
}

/* Mobile — colapsa pra 1 coluna no drawer */
@media (max-width: 900px) {
  .navbar__item--mega .navbar__dropdown {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar__megamenu-inner {
    padding: 12px;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .navbar__megamenu-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .navbar__megamenu-col-title {
    margin-bottom: 8px;
    padding-bottom: 6px;
    font-size: 10px;
  }

  /* Linhas compactas: ícone pequeno + título apenas (descrição escondida no mobile) */
  .navbar__megamenu-item {
    grid-template-columns: 22px 1fr !important;
    gap: 10px !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    align-items: center !important;
  }

  .navbar__megamenu-item__icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
  }

  .navbar__megamenu-item__icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  .navbar__megamenu-item__body {
    min-width: 0;
  }

  .navbar__megamenu-item__title {
    font-size: 13px !important;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
  }

  /* Descrição escondida no mobile pra reduzir altura de cada linha */
  .navbar__megamenu-item__desc {
    display: none !important;
  }

  /* "em breve" badge inline */
  .navbar__megamenu-item--soon .navbar__megamenu-item__title::after {
    display: inline-block;
    margin-left: 4px;
    font-size: 8px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Spacing entre listas/checklists e CTAs subsequentes — fix global
   ══════════════════════════════════════════════════════════════════ */

ul+.btn,
ul+a.btn {
  margin-top: var(--space-7, 32px) !important;
}


/* Step cards — fundo sólido sem gradiente */

/* ══════════════════════════════════════════════════════════════════
   MOBILE FINAL PASS — auditoria sistêmica
   Aplicado em TODAS as páginas
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablets / mobile médio ── */
@media (max-width: 900px) {

  /* Hero: centralizar tudo + reduzir headline */
  .hero-copy,
  .hero-inner .hero-copy {
    text-align: center !important;
  }

  .hero-copy .eyebrow,
  .hero-inner .hero-copy .eyebrow,
  .hero-copy .badge {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
  }

  /* Texto longo quebra em vez de estourar a tela */
  .hero-headline,
  .hero-sub {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* Badges/eyebrows longos quebram em vez de estourar */
  .badge,
  .badge--blue,
  .eyebrow {
    white-space: normal !important;
    max-width: 100%;
    word-spacing: 0.1em;
  }

  /* Hero block: garantir que nada escapa */
  .hero-copy,
  .hero-inner {
    max-width: 100%;
    min-width: 0;
  }

  .hero-headline {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
  }

  .hero-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Section heads */

  .section-desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Padding mais compacto em sections */
  .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ── Mobile (≤768) ── */
@media (max-width: 768px) {

  /* Container final padding pra evitar tocar a borda */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Form fields — touch target mínimo iOS/Android */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important;
    /* evita zoom no iOS */
  }

  textarea {
    min-height: 88px !important;
  }

  /* Botões: garantir touch target ≥44px */
  .btn {
    min-height: 44px !important;
  }

  /* CTAs nos heros: stack vertical com margem lateral */
  .hero-cta-row,
  .hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    gap: 10px !important;
    padding-left: 10%;
    padding-right: 10%;
    box-sizing: border-box;
  }

  .hero-cta-row .btn,
  .hero-ctas .btn {
    width: 100% !important;
    max-width: none !important;
    justify-content: center;
  }

  /* Footer: empilhar colunas */
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 20px !important;
    margin-bottom: 2rem;
  }

  /* Brand (1ª coluna) ocupa as 2 colunas e centraliza tudo */
  .footer__grid>div:first-child {
    grid-column: 1 / -1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .footer__grid>div:first-child p {
    max-width: 320px;
    margin: 0 auto;
  }

  /* Badges/Pills do brand centralizadas */
  .footer__grid>div:first-child>div[class*="badge"],
  .footer__grid>div:first-child .badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Logo centralizado */
  .footer__logo {
    justify-content: center !important;
    margin-bottom: 0;
  }

  /* Submenus mais compactos no mobile */
  .footer__links {
    gap: 3px !important;
  }

  .footer__links li {
    line-height: 1.3;
  }

  .footer__links li a {
    font-size: 13px !important;
    padding: 2px 0;
    display: inline-block;
  }

  .footer__col-title {
    margin-bottom: 10px !important;
  }

  .footer__bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center;
  }

  /* Stat strip — texto menor + 2 col */
  .stat-strip {
    padding: 18px 20px !important;
    gap: 14px !important;
  }

  .stat-strip-num {
    font-size: 1.4rem !important;
  }

  .stat-strip-label {
    font-size: 11.5px !important;
  }

  /* Stat card numbers menores */

  /* Foto overlay (gradient + texto) — encolhe a fonte */

  /* Photo blocks com texto — padding interno menor */

  /* Cards — menos padding */

  /* CTA block (dark final) */

  .cta-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .cta-row .btn {
    width: 100% !important;
    max-width: 360px !important;
    margin-inline: auto !important;
  }

  /* Cross-link cards (auto-injected) */
  .xlink-section .xlink-grid {
    gap: 12px !important;
  }

  .xlink-card {
    padding: 18px !important;
  }

  /* Modal/popups: viewport seguro */
  body.body--menu-open {
    overflow: hidden !important;
  }

  /* Smooth scroll anchors */
  html {
    scroll-padding-top: 80px;
  }

  /* Sticky nav: garante topo na frente */
  nav.topbar {
    z-index: 1000 !important;
  }
}

/* ── Mobile pequeno (≤480) ── */
@media (max-width: 480px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Hero ainda mais compacto */
  .hero {
    padding-top: 90px !important;
    padding-bottom: 40px !important;
  }

  .hero-headline {
    font-size: clamp(1.7rem, 8vw, 2.3rem) !important;
  }

  /* Section padding mínimo */
  .section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* Eyebrows menores */
  .eyebrow {
    font-size: 9px !important;
    padding: 4px 10px !important;
  }

  /* Stat strip 1 col */
  .stat-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center;
    padding: 16px !important;
  }

  .stat-strip-item {
    padding: 8px 0 !important;
  }

  /* Cards padding ainda menor */

  /* h3 em cards */

  /* Photo overlay text ainda menor */

  /* Footer ainda mais compacto */
  .footer {
    padding: 36px 0 !important;
  }

  .footer__col-title {
    font-size: 12px !important;
  }

  .footer__link {
    font-size: 13px !important;
  }

  /* CTA block menor */

  /* Removido — fullscreen drawer cuida disso na regra principal acima */
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — fixes adicionais
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Garantir respiro entre sections consecutivas — evita eyebrow colado no card de cima */
  .section+.section {
    padding-top: 36px !important;
  }

  .section+section[style*="padding"] {
    padding-top: 36px !important;
  }

  /* Section-head sempre com margem do topo */

  /* Containers internos — respeitam padding do container pai (16px) */

  /* Cards/blocks que extrapolam — garante respeitar largura do container */
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — fix de overflow em containers grid/flex
   Causa: grid/flex items têm min-width: auto por default, o que
   faz crescer até caber o max-content (code blocks, mono text,
   strings longas). Em telas pequenas isso estoura o container.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Grid containers comuns — colunas podem shrinkar abaixo do max-content */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* TODOS os children desses containers — permitir shrinkagem */
  .hero-inner>* {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Code blocks com mono text — scroll horizontal interno */

  /* Tabelas com max-content forçando overflow */
  .compare-table {
    max-width: 100%;
    table-layout: auto;
  }

  /* Containers globais respeitam viewport */
  .container,
  main,
  body {
    max-width: 100vw;
    overflow-x: clip;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — centralizar conteúdo de seções 2-col que colapsam
   Mantém bullets/checklists com texto à esquerda (apenas o bloco
   inteiro fica centralizado).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Containers 2-col colapsados pra 1-col — centralizar tudo */
  
  .portal-section {
    grid-template-columns: minmax(0, 1fr) !important;
    text-align: center !important;
  }

  
  .portal-section>* {
    align-items: center;
    min-width: 0;
  }

  /* Section-head sem .center modifier — centralizar no mobile */

  /* Listas com checks/bullets — manter texto à esquerda
     mas centralizar o bloco como um todo */

  /* Listas inline complexas (com inline styles) — alinha block ao centro */
  .portal-section ul {
    max-width: 460px;
    margin: 0 auto !important;
  }

  /* CTAs (div com inline style display:flex) — centralizar */
}

/* ══════════════════════════════════════════════════════════════════
   EYEBROWS — padronização de espaçamento (desktop + mobile)
   Todas as variantes recebem o mesmo respiro do topo e do título.
   ══════════════════════════════════════════════════════════════════ */
.eyebrow {
  display: inline-flex !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/* O título imediatamente após o eyebrow nunca cola */
.eyebrow+h1,
.eyebrow+h2,
.eyebrow+h3 {
  margin-top: 0 !important;
}

@media (max-width: 768px) {

  .eyebrow {
    margin-bottom: 14px !important;
  }

  /* marketplaces — audience-section layouts colapsam e centralizam */

  /* Lista do audience mantém texto à esquerda, bloco centralizado */
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — section-stats cards uniformes + reduzir gap entre seções
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Gap menor entre as colunas que colapsaram */

  /* Stats em 1 coluna, cards uniformes */
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — hero content alignment + eyebrow tipografia
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero copy / content em coluna flexível — alinha tudo verticalmente */
  
  .hero-copy,
  .hero-inner .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    width: 100%;
  }

  /* Filhos diretos do hero content respeitam alinhamento centralizado */
  
  .hero-copy>* {
    text-align: center;
    max-width: 100%;
  }

  /* Eyebrow no mobile: menor + sem word-spacing exagerado */
  .eyebrow,
  .badge.badge--blue {
    font-size: 8px !important;
    word-spacing: 0 !important;
    letter-spacing: .14em !important;
  }
}

/* ── Stat-strip liquidglass (arredondado + visível, igual ao backup) ── */
[data-navbar-theme="light"] .stat-strip.glass-strong,
[data-navbar-theme="light"] .stat-strip.glass {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.62) 42%, rgba(217, 205, 253, 0.50) 100%);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 22px 60px rgba(64, 15, 242, 0.10);
  overflow: hidden;
}

/* ── passos / check-list (portado do site: LPs de conversão) ── */
.check-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.check-list li {
  position: relative;
  padding-left: 30px;
  font-size: var(--text-body-sm);
  color: var(--gray-600);
  line-height: 1.55;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(64, 15, 242, 0.08);
  border: 1px solid rgba(64, 15, 242, 0.18);
}
.check-list li::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 4px;
  width: 16px;
  height: 16px;
  background-color: #400FF2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.check-list li strong {
  color: var(--gray-900);
  font-weight: 700;
}
.steps-grid {
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.steps-grid::before {
  content: "";
  position: absolute;
  top: 50px;
  height: 2px;
  background: linear-gradient(to right,
      transparent 0%, var(--azul-paytime) 15%,
      var(--lilas) 50%, var(--azul-paytime) 85%, transparent 100%);
  opacity: 0.35;
  z-index: 0;
}
.step-card {
  padding: var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.step-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-paytime), #5a28ff);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 28px rgba(64, 15, 242, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.6);
  margin-bottom: var(--sp-4);
}
.step-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.step-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
@media (max-width: 880px)  {
  .steps-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .steps-grid .step-card {
    max-width: 440px;
    width: 100%;
    margin-inline: auto;
  }
  .steps-grid::before {
    display: none;
  }
}
@media (max-width: 768px)  {
  .steps-grid {
    grid-template-columns: 1fr;
  }
  .steps-grid::before {
    display: none;
  }
}
.step-card.glass {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(64, 15, 242, 0.08);
}
.case-highlight {
  max-width: 660px;
  margin: var(--sp-6, 24px) auto 0;
  padding: var(--sp-6, 32px);
  border: 1px solid rgba(11, 18, 32, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 44px rgba(11, 18, 32, 0.06);
  text-align: center;
}
.case-highlight__logo {
  width: 54px; height: 54px; border-radius: 14px;
  object-fit: cover; display: block; margin: 0 auto var(--sp-5, 24px);
  background: #fff; border: 1px solid rgba(11, 18, 32, 0.06);
  box-shadow: 0 10px 26px rgba(11, 18, 32, 0.08);
}
.case-highlight__stats {
  display: flex; justify-content: center; align-items: flex-start;
  gap: var(--sp-6, 32px); margin-bottom: var(--sp-5, 24px); flex-wrap: wrap;
}
.case-highlight__stat { flex: 1 1 0; min-width: 150px; }
.case-highlight__num {
  font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(135deg, var(--azul-paytime, #400FF2), var(--lilas, #9884FF));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.case-highlight__label { font-size: 13px; color: var(--ink-soft, #5A6577); margin-top: 8px; line-height: 1.4; }
@media (max-width: 520px)  {
  .case-highlight__stats { gap: var(--sp-4, 16px); }
  .case-highlight__stat { min-width: 45%; }
}
.check-list--cross li::before {
  background: rgba(239, 68, 68, 0.09);
  border-color: rgba(239, 68, 68, 0.26);
}
.check-list--cross li::after {
  background-color: #EF4444;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.case-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.case-spotlight { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8, 40px); align-items: center; }
.case-spotlight__logo-row { display: flex; align-items: center; gap: var(--sp-4, 16px); margin-bottom: var(--sp-5, 24px); }
.case-spotlight__logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
.case-spotlight__name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.case-spotlight h2 { font-size: clamp(30px, 3.0vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); margin: 0 0 var(--sp-4, 16px); }
.case-spotlight h2 em { font-style: normal; background: var(--cs-accent, linear-gradient(135deg, #400FF2, #5a28ff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.case-spotlight__sub { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 var(--sp-5, 24px); max-width: 480px; }
.case-spotlight__cta { background: var(--cs-accent, linear-gradient(135deg, #400FF2, #5a28ff)); border-color: transparent; color: #fff; transition: filter .18s ease, transform .18s ease, box-shadow .18s ease; }
.case-spotlight__cta:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 10px 26px var(--cs-shadow, rgba(64, 15, 242, 0.28)); }
.case-spotlight__photo { border-radius: 24px; overflow: hidden; box-shadow: 0 18px 48px var(--cs-shadow, rgba(64, 15, 242, 0.22)); }
.case-spotlight__photo img { width: 100%; height: 400px; object-fit: cover; object-position: center; display: block; }
@media (max-width: 900px)  {
  .case-spotlight { grid-template-columns: 1fr; gap: var(--sp-6, 32px); }
  .case-spotlight__sub { max-width: none; }
  .case-spotlight__photo img { height: 300px; }
}


/* ── tap-cta-full (CTA de faixa com foto, portado do site) ── */
.tap-cta-full {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 440px;
  border-radius: var(--radius-xl, 24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 80px rgba(11, 18, 32, 0.22);
  background: #0B1220 center / cover no-repeat;
}
.tap-cta-full__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 18, 32, 0.94) 0%, rgba(11, 18, 32, 0.80) 44%, rgba(11, 18, 32, 0.30) 78%, rgba(11, 18, 32, 0.10) 100%);
  pointer-events: none;
}
.tap-cta-full__body {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 5vw, 64px);
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4, 16px);
  color: #fff;
}
.tap-cta-full__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9BCFF;
}
.tap-cta-full__body h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.tap-cta-full__body h2 em { color: #C9BCFF; font-style: normal; }
.tap-cta-full__body p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}
@media (max-width: 720px)  {
  .tap-cta-full { min-height: 520px; align-items: flex-end; background-position: 60% center; }
  .tap-cta-full__scrim {
    background: linear-gradient(180deg, rgba(11, 18, 32, 0.25) 0%, rgba(11, 18, 32, 0.82) 52%, rgba(11, 18, 32, 0.96) 100%);
  }
  .tap-cta-full__body { max-width: none; }
}


/* ── Formulário embutido na seção de contato (CRO: sem popup no caminho) ── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Sem recuo: o âncora leva o topo da seção ao topo da janela. Os 84px que
   havia aqui compensavam a barra fixa do seletor de LP, que não existe mais.
   Se um header fixo voltar, este é o lugar de descontá-lo. */
#contato { scroll-margin-top: 0; }
.form-embed {
  background: #fff;
  border-radius: 20px;
  padding: clamp(6px, 1.4vw, 14px);
  margin: clamp(20px, 3vw, 30px) auto 0;
  max-width: 680px;
  box-shadow: 0 26px 60px rgba(3, 2, 30, .22);
  overflow: hidden;
}
.form-embed iframe { display: block; border-radius: 14px; }
@media (max-width: 560px) { .form-embed { padding: 4px; border-radius: 16px; } }

/* ── Nota de rodapé da faixa "Por que a Paytime" ───────────────────────
   O card diz "Go-live em 5 dias*" e o asterisco precisa levar a algum
   lugar. Cinco dias é a média de integração; o compromisso em contrato é
   de até 30 dias. Asterisco sem nota é pior do que número sem asterisco:
   sinaliza que existe uma condição e a esconde. */
.why-note {
  margin: 18px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-mute, #9AA3B2);
}

/* ══════════════════════════════════════════════════════════════════════
   Ajustes responsivos das landing pages

   Camada de sobreposição, com dois recursos que parecem exagero e não são:

   · !important — o <style> inline dos templates carrega depois deste arquivo
     e redefine .sec-head p, .feat-card e .hx-visual.
   · prefixo `html` — o eco-heroes.css também carrega depois, e traz
     `.hero-sub { font-size: 15px !important }` colhido do site. Mesmo
     !important e mesma especificidade perdem por ordem de origem; o `html`
     sobe a especificidade em um elemento e a regra passa a ganhar
     independentemente da ordem das folhas.

   O alternativo seria copiar este bloco em lp/, eco/ e no gerador do geral/ —
   três cópias que divergiriam no primeiro ajuste feito com pressa.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sec-head p { font-size: 14px !important; }
}

@media (max-width: 768px) {
  /* O visual do hero encostava no texto quando as colunas empilham. */
  html .hx-visual,
  html .hero-visual { margin-top: 1rem !important; }
}

@media (max-width: 560px) {
  html .feat-card { padding: 18px !important; }
  html .feat-card__ic { margin-bottom: 10px !important; }
}

@media (max-width: 480px) {
  html .hero {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }
  html .hero-sub,
  html .lp-hero__sub,
  html .nf-sub,
  html .rv-sub,
  html .ab-sub,
  html .as-sub,
  html .cr-sub,
  html .sb-lead { font-size: 14px !important; }
}