/* ═══════════════════════════════════════════════════════════════
   AMILTON CONTABILIDADE — SISTEMA DE DESIGN v4.0
   Paleta: Marfim & Cedro Dourado
   Tom: Acolhimento com prestígio · Fundo claro · Acentos âmbar
   Tipografia: Playfair Display + Plus Jakarta Sans
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   1. TOKENS E VARIÁVEIS CSS
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta primária — Verde-azulado profundo (seriedade + acolhimento) ── */
  --p-50:  #E6F4F2;
  --p-100: #B8E0DA;
  --p-200: #7EC5BB;
  --p-300: #5BB8AC;
  --p-400: #3DA899;
  --p-500: #2A9080;
  --p-600: #1E7A6E;
  --p-700: #165C52;
  --p-800: #145548;
  --p-900: #0C3830;

  /* ── Paleta de destaque — Dourado âmbar (prestígio + exclusividade) ── */
  --a-100: #FAEAB8;
  --a-200: #F5D060;
  --a-300: #E8BC2A;
  --a-400: #D4A017;
  --a-500: #BA8A10;
  --a-600: #A07010;

  /* ── Paleta de sucesso (verde esmeralda) ── */
  --g-400: #2BB57A;
  --g-500: #1E9E65;
  --g-600: #157A4D;

  /* ── Paleta de erro (terracota suave) ── */
  --r-400: #D96B5A;
  --r-500: #C0503D;

  /* ── Escala neutra quente — base da harmonia de fundos ── */
  --n-0:   #FFFFFF;
  --n-50:  #FDFAF5;   /* branco marfim — fundo principal */
  --n-100: #F5EFE0;   /* creme claro — superfícies */
  --n-200: #EDE3CC;   /* areia média — bordas suaves */
  --n-300: #D9C9A3;   /* areia dourada — divisores */
  --n-400: #BBA97A;   /* ocre médio — texto terciário */
  --n-500: #9A8660;   /* ocre escuro — texto secundário */
  --n-600: #7A6640;   /* terra — subtítulos */
  --n-700: #5A4A2A;   /* castanho — texto corpo */
  --n-800: #3A2E18;   /* castanho escuro */
  --n-850: #2A2010;
  --n-900: #1C1408;   /* quase preto quente */
  --n-950: #0E0A04;

  /* ── Superfícies de fundo ── */
  --bg-base:     #FDFAF5;   /* marfim — fundo padrão da página */
  --bg-surface:  #F5EFE0;   /* creme — superfícies de seções alternadas */
  --bg-elevated: #EDE3CC;   /* areia — cards elevados */
  --bg-dark:     #1C3A3A;   /* verde escuro nobre — seções de destaque */
  --bg-dark-deep:#122828;   /* verde profundo — footer / CTA */
  --bg-glass:    rgba(255, 255, 255, 0.5);
  --bg-glass-md: rgba(255, 255, 255, 0.7);

  /* ── Bordas ── */
  --border-subtle:  rgba(90, 74, 42, 0.08);
  --border-default: rgba(90, 74, 42, 0.15);
  --border-strong:  rgba(90, 74, 42, 0.28);

  /* ── Bordas para seções escuras ── */
  --border-dark-subtle:  rgba(255, 255, 255, 0.06);
  --border-dark-default: rgba(255, 255, 255, 0.12);
  --border-dark-strong:  rgba(255, 255, 255, 0.22);

  /* ── Texto — modo claro (padrão) ── */
  --text-primary:   #0C3830;   /* verde muito escuro — máximo contraste */
  --text-secondary: #2A5C52;   /* verde médio — corpo de texto */
  --text-muted:     #7A6640;   /* ocre — texto de apoio */

  /* ── Texto — modo escuro (seções --bg-dark) ── */
  --text-on-dark-primary:   #F5EFE0;
  --text-on-dark-secondary: #B8D8D4;
  --text-on-dark-muted:     #7AADA8;

  /* ── Aliases semânticos — cores ── */
  --color-primary-400: var(--p-400);
  --color-primary-500: var(--p-500);
  --color-primary-600: var(--p-600);
  --color-accent-400:  var(--a-400);
  --color-accent-500:  var(--a-500);
  --c-green-400: var(--g-400);
  --c-green-500: var(--g-500);
  --c-green-600: var(--g-600);
  --color-neutral-0:   var(--n-0);
  --color-neutral-50:  var(--n-50);
  --color-neutral-200: var(--n-200);
  --color-neutral-300: var(--n-300);
  --color-neutral-400: var(--n-400);
  --color-neutral-500: var(--n-500);
  --color-neutral-600: var(--n-600);
  --color-neutral-700: var(--n-700);
  --color-neutral-800: var(--n-800);
  --color-neutral-900: var(--n-900);
  --color-neutral-950: var(--n-950);

  /* ── Aliases semânticos — superfícies ── */
  --bg-light:   var(--n-50);
  --bg-white:   var(--n-0);
  --border-light: var(--n-200);

  /* ── Aliases semânticos — estados ── */
  --color-success: var(--g-600);
  --color-error:   var(--r-500);

  /* ── Tipografia — famílias (inalteradas) ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* ── Tipografia — tamanhos responsivos (inalterados) ── */
  --text-xs:   clamp(0.68rem,  0.63rem + 0.25vw, 0.75rem);
  --text-sm:   clamp(0.8rem,   0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);
  --text-md:   clamp(1rem,     0.95rem + 0.35vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.6vw,     1.375rem);
  --text-xl:   clamp(1.25rem,  1.1rem + 0.75vw,  1.625rem);
  --text-2xl:  clamp(1.5rem,   1.25rem + 1.25vw, 2.125rem);
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  --text-4xl:  clamp(2.25rem,  1.75rem + 2.5vw,  3.5rem);
  --text-5xl:  clamp(2.75rem,  2rem + 3.75vw,    4.5rem);

  /* ── Tipografia — pesos (inalterados) ── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ── Tipografia — alturas de linha (inalteradas) ── */
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* ── Tipografia — espaçamento entre letras (inalterado) ── */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.14em;

  /* ── Espaçamentos (inalterados) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout (inalterado) ── */
  --section-py:    clamp(4rem, 5vw + 2rem, 7rem);
  --section-py-lg: clamp(5rem, 6vw + 2rem, 9rem);
  --container-px:  clamp(1rem, 4vw, 2rem);
  --grid-gap:      clamp(1.25rem, 2.5vw, 2rem);

  /* ── Bordas arredondadas (inalteradas) ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ── Sombras — adaptadas para fundo claro (tons quentes) ── */
  --shadow-xs: 0 1px 2px rgba(90, 74, 42, 0.12);
  --shadow-sm: 0 2px 8px rgba(90, 74, 42, 0.14);
  --shadow-md: 0 4px 24px rgba(90, 74, 42, 0.16);
  --shadow-lg: 0 8px 48px rgba(90, 74, 42, 0.18);
  --shadow-xl: 0 16px 72px rgba(90, 74, 42, 0.22);

  /* ── Sombras com brilho colorido ── */
  --shadow-glow-primary: 0 0 40px rgba(30, 122, 110, 0.25);
  --shadow-glow-accent:  0 0 40px rgba(212, 160, 23, 0.3);
  --shadow-glow-green:   0 0 32px rgba(21, 122, 77, 0.25);

  /* ── Animações — curvas de aceleração (inalteradas) ── */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Animações — durações (inalteradas) ── */
  --duration-fast:   150ms;
  --duration-normal: 280ms;
  --duration-slow:   480ms;

  /* ── Animações — transições prontas (inalteradas) ── */
  --transition-fast:   var(--duration-fast)   var(--ease-out);
  --transition-base:   var(--duration-normal) var(--ease-in-out);
  --transition-smooth: var(--duration-slow)   var(--ease-out);
  --transition-spring: var(--duration-slow)   var(--ease-spring);

  /* ── Gradientes — adaptados para nova paleta ── */
  --gradient-primary: linear-gradient(135deg, var(--p-800) 0%, var(--p-600) 60%, var(--p-400) 100%);
  --gradient-accent:  linear-gradient(135deg, var(--a-600) 0%, var(--a-300) 100%);
  --gradient-cta:     linear-gradient(135deg, var(--bg-dark-deep) 0%, var(--bg-dark) 60%, #254A48 100%);
  --gradient-dark:    linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-deep) 100%);

  /* ── Camadas z-index (inalteradas) ── */
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}


/* ══════════════════════════════════════════════════════════════
   2. RESET E BASE
   ══════════════════════════════════════════════════════════════ */

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

html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 80px; /* Garante que o título não fique sob a navbar */
    overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background-color: var(--bg-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Link de acessibilidade (pular para conteúdo) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-6);
  background: var(--p-700);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
}

/* ── Cabeçalhos ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p {
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

address {
  font-style: normal;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

/* ── Foco e seleção ── */
:focus-visible {
  outline: 2px solid var(--p-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--p-200);
  color: var(--p-900);
}

/* Barra de rolagem refinada (Estilo Higienização) */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #F5EFE0; }
::-webkit-scrollbar-thumb { 
    background: #D9C9A3; 
    border-radius: 9999px; 
}


/* ══════════════════════════════════════════════════════════════
   3. UTILITÁRIOS E CLASSES AUXILIARES
   ══════════════════════════════════════════════════════════════ */

.text-accent {
  color: var(--a-500);
}

.text-gradient {
  background: linear-gradient(135deg, var(--p-600) 0%, var(--a-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Eyebrow (label acima dos títulos) ── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  color: var(--p-700);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.section-eyebrow.light {
  color: var(--p-200);
}

/* ── Título de seção ── */
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  max-width: 690px;
  margin: 0 auto;
}

/* ── Lead (subtítulo de seção) ── */
.section-lead {
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
  line-height: var(--lh-relaxed);
}

/* ── Cabeçalho de seção (wrapper) ── */
.section-header {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

/* ── Acessibilidade — ocultar visualmente ── */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ══════════════════════════════════════════════════════════════
   4. BOTÕES
   ══════════════════════════════════════════════════════════════ */

/* ── Base comum a todos os botões ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8em 1.75em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  line-height: 1;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background var(--transition-fast);
}
.btn:hover::after {
  background: rgba(255, 255, 255, 0.08);
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}

/* ── Botão principal de CTA (sólido verde escuro) ── */
.btn-primary-cta {
  background: var(--p-700);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(30, 122, 110, 0.3);
}
.btn-primary-cta:hover {
  background: var(--p-800);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(30, 122, 110, 0.4);
  color: #fff;
}

/* ── Botão secundário (outline sobre fundo claro) ── */
.btn-secondary-cta {
  background: transparent;
  color: var(--p-700);
  border-color: var(--border-strong);
  font-size: var(--text-sm);
}
.btn-secondary-cta:hover {
  background: var(--bg-elevated);
  color: var(--p-800);
  border-color: var(--p-400);
  transform: translateY(-2px);
}

/* ── Outline primário ── */
.btn-outline-primary-cta {
  background: transparent;
  color: var(--p-700);
  border-color: rgba(30, 122, 110, 0.4);
}
.btn-outline-primary-cta:hover {
  background: rgba(30, 122, 110, 0.08);
  color: var(--p-800);
  border-color: var(--p-600);
  transform: translateY(-2px);
}

/* ── Botão da navbar (acento dourado) ── */
.btn-cta-nav {
  background: transparent;
  color: var(--a-600);
  border-color: rgba(212, 160, 23, 0.5);
  font-size: var(--text-xs);
  padding: 0.65em 1.25em;
}
.btn-cta-nav:hover {
  background: var(--a-400);
  color: var(--n-900);
  border-color: var(--a-400);
  box-shadow: 0 4px 16px rgba(212, 160, 23, 0.3);
}

/* ── Botão do banner CTA (claro sobre fundo escuro) ── */
.btn-cta-banner {
  background: var(--n-50);
  color: var(--p-800);
  border-color: var(--n-50);
  font-size: var(--text-sm);
  padding: 1em 2em;
  box-shadow: var(--shadow-md);
}
.btn-cta-banner:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--p-900);
}

/* ── Botão de serviço (outline suave) ── */
.btn-service {
  background: transparent;
  color: var(--p-700);
  border-color: rgba(30, 122, 110, 0.3);
  font-size: var(--text-xs);
  padding: 0.65em 1.25em;
  width: 100%;
  margin-top: auto;
}
.btn-service:hover {
  background: rgba(30, 122, 110, 0.08);
  color: var(--p-800);
  border-color: var(--p-600);
  transform: translateY(-1px);
}

/* ── Botão Google Review ── */
.btn-google-review {
  background: transparent;
  color: var(--n-600);
  border-color: var(--n-300);
  font-size: var(--text-xs);
  padding: 0.6em 1.25em;
}
.btn-google-review:hover {
  background: var(--n-100);
  color: var(--n-800);
}

.btn-tracar-rota {
  margin-top: var(--space-8);
}

/* ── Botão WhatsApp ── */
#comparador-regimes .btn-whatsapp {
  background: var(--g-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: var(--transition-spring);
  box-shadow: 0 4px 16px rgba(21, 122, 77, 0.25);
}
#comparador-regimes .btn-whatsapp:hover {
  background: var(--g-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-green);
  color: #fff;
}

/* ── Responsividade dos botões ── */
@media (max-width: 576px) {
  .btn {
    padding: 0.75em 1.25em;
    font-size: var(--text-xs);
  }
}

/* ══════════════════════════════════════════════════════════════
   5. NAVBAR
   ══════════════════════════════════════════════════════════════ */

.navbar {
  padding: 1rem 0;
  background-color: rgba(253, 250, 245, 0.97);
  transition:
    background-color var(--transition-smooth),
    padding var(--transition-smooth),
    box-shadow var(--transition-smooth);
  border-bottom: 1px solid transparent;
  z-index: var(--z-sticky);
}

.navbar .container {
  flex-wrap: wrap;
  align-items: center;
}

/* ── Estado ao rolar — fundo marfim com leve sombra ── */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    padding: 1.5rem 0; /* Aumenta levemente a área de toque */
}

/* ── Logo ── */
.navbar-brand { display: flex; align-items: center; padding: 0; }

.logo-img {
  height: clamp(36px, 5vw, 52px);
  width: auto;
  object-fit: contain;
  transition: height var(--transition-smooth);
}
.navbar.scrolled .logo-img { height: clamp(34px, 4vw, 46px); }

/* ── Links de navegação ── */
.navbar-nav {
  gap: var(--space-1);
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--n-500) !important;
  padding: var(--space-2) var(--space-3) !important;
  position: relative;
  transition: color var(--transition-fast) !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: calc(100% - var(--space-6));
  height: 1.5px;
  background: var(--p-600);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
  color: var(--p-800) !important;
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* ── Botão hambúrguer (mobile) ── */
.custom-toggler {
  border: none;
  padding: 0;
  width: 28px;
  height: 22px;
  position: relative;
  background: transparent;
  box-shadow: none !important;
  outline: none !important;
  flex-shrink: 0;
}

.toggler-icon {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--n-600);
  border-radius: var(--radius-full);
  transition: 0.25s ease-in-out;
  left: 0;
}

.top-bar    { top: 0; }
.middle-bar { top: 10px; }
.bottom-bar { top: 20px; }

.custom-toggler.collapsed .top-bar    { top: 0;   transform: rotate(0); }
.custom-toggler.collapsed .middle-bar { opacity: 1; left: 0; }
.custom-toggler.collapsed .bottom-bar { top: 20px; transform: rotate(0); }

.custom-toggler:not(.collapsed) .top-bar    { top: 10px;  transform: rotate(135deg); }
.custom-toggler:not(.collapsed) .middle-bar { opacity: 0; left: -60px; }
.custom-toggler:not(.collapsed) .bottom-bar { top: 10px;  transform: rotate(-135deg); }

/* ── Responsividade da navbar ── */
@media (min-width: 1025px) {
  .navbar-expand-custom .navbar-toggler  { display: none !important; }
  .navbar-expand-custom .navbar-collapse { display: flex !important; flex-basis: auto; flex-direction: row; align-items: center; }
  .navbar-expand-custom .navbar-nav      { flex-direction: row; }
}

@media (max-width: 1024px) {
  .navbar-expand-custom .navbar-toggler { display: flex !important; align-items: center; justify-content: center; }

  .navbar-collapse {
    background-color: rgba(253, 250, 245, 0.99);
    border-top: 1px solid var(--border-default);
    padding: var(--space-2) 0 var(--space-5);
    margin-top: 0;
    width: 100%;
  }

  .navbar-expand-custom .navbar-nav {
    flex-direction: column;
    width: 100%;
    padding: 0 var(--space-3);
    gap: 0;
  }

  .nav-link {
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-md);
    width: 100%;
  }
  .nav-link:hover,
  .nav-link.active {
    background: rgba(30, 122, 110, 0.06);
  }
  .nav-link::after { display: none; }

  .btn-cta-nav {
    margin: var(--space-4) var(--space-3) var(--space-2);
    justify-content: center;
    width: calc(100% - var(--space-6));
  }
}


/* ══════════════════════════════════════════════════════════════
   6. HERO
   ══════════════════════════════════════════════════════════════ */

.hero-section {
  min-height: 50svh;
  min-height: 50vh;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.hero-split-container {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 100vh;
}

/* ── Coluna de conteúdo ── */
.hero-content-col {
  display: flex;
  align-items: center;
  background: var(--bg-base);
  position: relative;
  z-index: var(--z-raised);
  padding: clamp(5rem, 8vw, 8rem) clamp(4rem, 6vw, 6rem);
}

/* ── Divisor sutil entre colunas (dourado + verde) ── */
.hero-content-col::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(30, 122, 110, 0.4) 30%,
    rgba(212, 160, 23, 0.35) 70%,
    transparent 100%
  );
  z-index: 1;
}

.hero-inner {
  max-width: 600px;
  margin-left: auto;
  padding-right: var(--space-12);
}

/* ── Eyebrow do hero ── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--p-700);
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(30, 122, 110, 0.25);
  border-radius: var(--radius-full);
  background: rgba(30, 122, 110, 0.07);
  width: fit-content;
}

/* ── Título principal ── */
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
}
.hero-title em     { font-style: italic; color: var(--p-600); }
.hero-title strong { font-weight: var(--fw-bold); color: var(--a-500); display: block; }

/* ── Subtítulo ── */
.hero-subtitle {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-7);
  max-width: 520px;
}

/* ── Barra de confiança ── */
.hero-trust-bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  padding: var(--space-4) var(--space-6);
  background: var(--bg-glass);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  width: fit-content;
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  white-space: nowrap;
}
.trust-item strong {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.trust-item strong i { color: var(--a-500); font-size: 0.9em; }
.trust-item span     { font-size: var(--text-xs); color: var(--text-muted); }

.trust-divider {
  width: 1px;
  height: 2.5rem;
  background: var(--border-default);
  flex-shrink: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* ── Coluna de imagem ── */
.hero-image-col {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.hero-image-col::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    var(--bg-base) 0%,
    rgba(253, 250, 245, 0.45) 35%,
    transparent 65%
  );
  z-index: 1;
}
.hero-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 56, 48, 0.35) 0%, transparent 50%);
  z-index: 1;
}

/* ── Responsividade do hero ── */
@media (max-width: 1024px) {
  .hero-split-container { grid-template-columns: 1fr; }

  .hero-content-col {
    min-height: 100vh;
    padding: clamp(6rem, 10vw, 8rem) var(--container-px) clamp(3rem, 6vw, 5rem);
    background-image:
      linear-gradient(to right, rgba(253, 250, 245, 0.95) 0%, rgba(253, 250, 245, 0.82) 100%),
      url('../images/banner-hero.jpg');
    background-size: cover;
    background-position: center;
  }
  .hero-content-col::after { display: none; }
  .hero-image-col          { display: none; }

  .hero-inner {
    max-width: 640px;
    margin: 0 auto;
    padding-right: 0;
    text-align: center;
  }
  .hero-eyebrow,
  .hero-trust-bar { margin-left: auto; margin-right: auto; }
  .hero-actions   { justify-content: center; }
}

@media (max-width: 576px) {
  .hero-trust-bar { flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4); }
  .trust-divider  { display: none; }
  .hero-actions   { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════
   7. BARRA DE ESTATÍSTICAS
   ══════════════════════════════════════════════════════════════ */

.stats-bar-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-8) 0;
  position: relative;
}

/* ── Linha decorativa superior (verde → dourado) ── */
.stats-bar-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--p-500), var(--a-400), transparent);
}

.stats-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  align-items: center;
}

.stats-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-4);
  position: relative;
}
.stats-bar-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--border-default);
}
.stats-bar-item strong {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.stats-bar-item strong i { color: var(--a-500); font-size: 0.8em; }
.stats-bar-item span     { font-size: var(--text-sm); color: var(--text-muted); }

@media (max-width: 768px) {
  .stats-bar-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .stats-bar-item:nth-child(2)::after { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   8. CALCULADORA — COMPARADOR DE REGIMES TRIBUTÁRIOS
   ══════════════════════════════════════════════════════════════ */

#comparador-regimes {
  background: var(--bg-base);
  padding: var(--section-py-lg) 0;
  position: relative;
  overflow: hidden;
}

#comparador-regimes::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(30, 122, 110, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

#comparador-regimes .section-eyebrow {
  color: var(--p-700);
}

/* ── Chips dos 3 regimes ── */
#comparador-regimes .regime-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  transition: var(--transition-base);
  height: 100%;
}
#comparador-regimes .regime-chip:hover {
  border-color: rgba(30, 122, 110, 0.3);
  background: rgba(30, 122, 110, 0.04);
}
#comparador-regimes .regime-chip .chip-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
#comparador-regimes .regime-chip .chip-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}
#comparador-regimes .regime-chip p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
#comparador-regimes .regime-chip .chip-limit {
  display: inline-block;
  font-size: 0.63rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
}

/* ── Card da calculadora ── */
#comparador-regimes .calc-card {
  background: var(--n-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  height: 100%;
  box-shadow: var(--shadow-md);
}

/* ── Campos de entrada ── */
#comparador-regimes .custom-input {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
  font-size: var(--text-sm);
  width: 100%;
}
#comparador-regimes .custom-input::placeholder {
  color: var(--text-muted);
}
#comparador-regimes .custom-input:focus {
  background: var(--n-0);
  border-color: var(--p-500);
  box-shadow: 0 0 0 3px rgba(30, 122, 110, 0.12);
  color: var(--text-primary);
  outline: none;
}
#comparador-regimes select.custom-input option {
  background: var(--bg-surface);
  color: var(--text-primary);
}
#comparador-regimes .form-control.custom-input,
#comparador-regimes .form-select.custom-input {
  background-color: var(--bg-base);
  color: var(--text-primary);
}
#comparador-regimes .input-group-text {
  background: var(--bg-elevated);
  border-color: var(--border-default);
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: 8px;
}

#comparador-regimes .input-group-top {
  margin-top: 8px;
}

/* ── Labels dos campos ── */
#comparador-regimes .form-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
#comparador-regimes .form-label .step-num {
  width: 20px;
  height: 20px;
  background: rgba(30, 122, 110, 0.12);
  border: 1px solid rgba(30, 122, 110, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: var(--fw-bold);
  color: var(--p-700);
  flex-shrink: 0;
}
#comparador-regimes .form-label small {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  font-size: var(--text-xs);
  margin-left: auto;
}

/* ── Dica abaixo do campo ── */
#comparador-regimes .form-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  line-height: 1.4;
}

/* ── Alerta de limite ── */
#comparador-regimes .alert-limit {
  background: rgba(212, 160, 23, 0.08);
  border: 1px solid rgba(212, 160, 23, 0.25);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.875rem;
  font-size: 0.72rem;
  color: var(--a-600);
  margin-top: 0.5rem;
  display: none;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1.45;
}

/* ── Botão calcular ── */
#comparador-regimes .btn-calc {
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 0.875rem 1.5rem;
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  width: 100%;
  transition: var(--transition-spring);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 20px rgba(30, 122, 110, 0.25);
}
#comparador-regimes .btn-calc:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(30, 122, 110, 0.4);
}
#comparador-regimes .btn-calc:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ── Placeholder (estado antes de calcular) ── */
#result-placeholder {
  background: var(--bg-surface);
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-2xl);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  transition: var(--transition-base);
}
#result-placeholder i {
  font-size: 3rem;
  color: var(--p-400);
  margin-bottom: 1rem;
  opacity: 0.7;
}
#result-placeholder h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  margin-bottom: 0.5rem;
}

/* ── Container do resultado ── */
#result-container .calc-card {
  display: flex;
  flex-direction: column;
}

/* ── Cabeçalho do resultado ── */
#comparador-regimes .result-header {
  text-align: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.25rem;
}
#comparador-regimes .result-header .label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
#best-regime-name {
  font-size: var(--text-2xl);
  margin-bottom: 0.4rem;
}
#best-regime-reason {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ── Tabela de comparação ── */
#comparador-regimes .table-dark {
  --bs-table-bg: transparent;
}
#comparador-regimes .table-dark thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  padding: 0.6rem 0.875rem;
  border-bottom: 1px solid var(--border-default) !important;
}

#comparador-regimes .regime-row {
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}
#comparador-regimes .regime-row:hover {
  background: rgba(30, 122, 110, 0.04);
}
#comparador-regimes .regime-row.best {
  background: rgba(30, 122, 110, 0.06);
}
#comparador-regimes .regime-row.best td:first-child {
  border-left: 2px solid var(--p-500);
  padding-left: calc(0.875rem - 2px);
}
#comparador-regimes .regime-row.not-eligible {
  opacity: 0.45;
}
#comparador-regimes .regime-row td {
  vertical-align: middle;
  padding: 0.8rem 0.875rem;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
#comparador-regimes .regime-row .badge {
  font-size: 0.58rem;
  padding: 0.28rem 0.5rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ── Barra de progresso ── */
#comparador-regimes .tax-bar-wrap {
  height: 3px;
  border-radius: 2px;
  background: var(--border-subtle);
  margin-top: 4px;
  overflow: hidden;
}
#comparador-regimes .tax-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.65s var(--ease-out);
}

/* ── Caixa de economia ── */
#comparador-regimes .savings-box {
  background: rgba(21, 122, 77, 0.06);
  border: 1px solid rgba(21, 122, 77, 0.18);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  transition: var(--transition-base);
}
#comparador-regimes .savings-box:hover {
  background: rgba(21, 122, 77, 0.1);
  border-color: rgba(21, 122, 77, 0.28);
}

/* ── Notas de elegibilidade ── */
#eligibility-notes {
  background: rgba(212, 160, 23, 0.06);
  border: 1px solid rgba(212, 160, 23, 0.18);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
}

/* ── Spinner de carregamento ── */
#comparador-regimes .spinner-border {
  color: #fff;
  width: 1rem;
  height: 1rem;
  border-width: 0.18em;
}

/* ── Animação de entrada do resultado ── */
@keyframes calcFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
#comparador-regimes .animate-in {
  animation: calcFadeIn 0.45s var(--ease-out) forwards;
}

/* ── Responsividade da calculadora ── */
@media (max-width: 991px) {
  #result-placeholder { min-height: 280px; }
}
@media (max-width: 576px) {
  #comparador-regimes .calc-card { padding: 1.5rem; }
  #comparador-regimes .regime-row td {
    padding: 0.6rem 0.5rem;
    font-size: var(--text-xs);
  }
}


/* ══════════════════════════════════════════════════════════════
   9. BENEFÍCIOS
   ══════════════════════════════════════════════════════════════ */

.benefits-section {
  padding: var(--section-py-lg) 0;
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}

/* ── Detalhe decorativo de fundo ── */
.benefits-section::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212, 160, 23, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.benefits-section .section-eyebrow { color: var(--p-700); }
.benefits-section .section-title   { color: var(--text-primary); }
.benefits-section .section-lead    { color: var(--text-secondary); }
.benefits-section .text-accent     { color: var(--a-500); }

/* ── Grid de cards ── */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

.benefit-card {
  background: var(--n-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--p-600), var(--a-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-smooth);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(90, 74, 42, 0.12);
  border-color: var(--p-200);
}
.benefit-card:hover::before { transform: scaleX(1); }

/* ── Ícone ── */
.benefit-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xl);
  background: var(--p-50);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-smooth);
  flex-shrink: 0;
}
.benefit-icon i {
  font-size: 1.4rem;
  color: var(--p-700);
  transition: color var(--transition-smooth);
}
.benefit-card:hover .benefit-icon    { background: var(--p-700); }
.benefit-card:hover .benefit-icon i  { color: #fff; }

/* ── Texto ── */
.benefit-body h3 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
}
.benefit-body p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── Número decorativo ── */
.benefit-num {
  position: absolute;
  bottom: var(--space-6);
  right: var(--space-6);
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: var(--fw-regular);
  color: rgba(90, 74, 42, 0.04);
  line-height: 1;
  transition: color var(--transition-smooth);
  user-select: none;
}
.benefit-card:hover .benefit-num { color: rgba(30, 122, 110, 0.07); }

@media (max-width: 991px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .benefits-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}


/* ══════════════════════════════════════════════════════════════
   10. SERVIÇOS
   ══════════════════════════════════════════════════════════════ */

.services-section {
  padding: var(--section-py-lg) 0;
  background: var(--bg-base);
  position: relative;
}

.services-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-default), transparent);
}

/* ── Card de serviço ── */
.service-card {
  background: var(--n-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth);
  position: relative;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(30, 122, 110, 0.3);
  box-shadow: var(--shadow-glow-primary);
}

/* ── Variação destaque (borda dourada) ── */
.service-card.service-featured {
  border-color: rgba(212, 160, 23, 0.35);
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.15);
}
.service-card.service-featured:hover {
  border-color: var(--a-400);
  box-shadow: var(--shadow-glow-accent);
}

/* ── Badge de destaque ── */
.service-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-raised);
  background: var(--gradient-accent);
  color: var(--n-900);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.service-img {
  height: clamp(140px, 20vw, 200px);
  background-size: cover;
  background-position: center;
  transition: transform var(--duration-slow) var(--ease-out);
  flex-shrink: 0;
  overflow: hidden;
}
.service-card:hover .service-img { transform: scale(1.04); }

.service-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
}

.service-tag {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--p-600);
  margin: 0;
}
.service-featured .service-tag { color: var(--a-500); }

.service-body h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
}
.service-body > p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  flex: 1;
  margin: 0;
}

.services-cta {
  margin-top: clamp(2.5rem, 4vw, 4rem);
}
.services-cta p {
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
  color: var(--text-secondary);
}


/* ══════════════════════════════════════════════════════════════
   11. SOBRE NÓS
   ══════════════════════════════════════════════════════════════ */

.about-section {
  padding: 0;
  overflow: hidden;
  background: var(--bg-surface);
}

.about-split-container {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: clamp(500px, 60vw, 720px);
}

.about-image-col {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.about-image-col::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, var(--bg-surface) 100%);
}

.about-content-col {
  display: flex;
  align-items: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem);
}

.about-inner             { max-width: 520px; }
.about-inner .section-eyebrow { color: var(--p-700); }
.about-inner .section-title   { color: var(--text-primary); }

.about-text {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

/* ── Estatísticas ── */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-10) 0;
  list-style: none;
  padding: 0;
}

.stat-item {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-glass);
  text-align: center;
  transition: border-color var(--transition-base);
}
.stat-item:hover { border-color: rgba(30, 122, 110, 0.3); }

.stat-item dt {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-regular);
  color: var(--p-600);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-1);
}
.stat-item dd {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  margin: 0;
}
.stat-counter {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

@media (max-width: 1024px) {
  .about-split-container { grid-template-columns: 1fr; }
  .about-image-col        { min-height: 320px; order: 1; }
  .about-image-col::after { display: none; }
  .about-content-col      { order: 2; padding: clamp(2.5rem, 5vw, 4rem) var(--container-px); justify-content: center; }
  .about-inner            { max-width: 640px; text-align: center; }
  .about-inner .section-eyebrow { display: flex; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════
   12. DEPOIMENTOS
   ══════════════════════════════════════════════════════════════ */

.testimonials-section {
  padding: var(--section-py-lg) 0;
  background: var(--bg-base);
}

.testimonial-card {
  background: var(--n-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}
.testimonial-card:hover {
  border-color: rgba(30, 122, 110, 0.25);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.testimonial-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: #fff;
  flex-shrink: 0;
}

.testimonial-author            { flex: 1; min-width: 0; }
.testimonial-author h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: 0;
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testimonial-role { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }

.testimonial-google-logo { color: #ea4335; font-size: 1.25rem; flex-shrink: 0; }
.testimonial-stars       { display: flex; gap: var(--space-1); color: var(--a-400); font-size: var(--text-sm); }

.testimonial-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  font-style: italic;
  flex: 1;
  margin: 0;
  border-left: 2px solid rgba(30, 122, 110, 0.3);
  padding-left: var(--space-4);
}

.testimonial-date { font-size: var(--text-xs); color: var(--text-muted); margin-top: auto; }

/* ── Badge Google Reviews ── */
.google-reviews-badge { margin-top: clamp(2rem, 4vw, 3.5rem); }

.google-reviews-inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--n-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  max-width: 600px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.google-reviews-score { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.google-reviews-score strong {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}

.google-stars-small { display: flex; gap: 2px; color: var(--a-400); font-size: var(--text-sm); }
.google-reviews-text p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }

@media (max-width: 576px) {
  .testimonial-top { flex-wrap: wrap; }
}


/* ══════════════════════════════════════════════════════════════
   13. BANNER DE CTA
   Seção escura nobre — verde profundo com contraste elegante
   ══════════════════════════════════════════════════════════════ */

.cta-banner-section {
  padding: 0;
  background: var(--gradient-cta);
  position: relative;
  overflow: hidden;
}

.cta-banner-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(212, 160, 23, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(0, 0, 0, 0.15) 0%, transparent 55%);
  pointer-events: none;
}

.cta-banner-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-10);
  align-items: center;
  padding: clamp(3rem, 5vw, 5rem) 0;
  position: relative;
  z-index: var(--z-raised);
}

.cta-banner-content h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--text-on-dark-primary);
  margin-bottom: var(--space-3);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.cta-banner-content h2 strong {
  font-weight: var(--fw-regular);
  color: var(--a-200);
}
.cta-banner-content p {
  font-size: var(--text-base);
  color: var(--text-on-dark-secondary);
  max-width: 540px;
  margin: 0;
}

.cta-banner-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}
.cta-banner-action small {
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
}

@media (max-width: 768px) {
  .cta-banner-inner { grid-template-columns: 1fr; text-align: center; }
  .cta-banner-action { align-items: center; }
}


/* ══════════════════════════════════════════════════════════════
   14. LOCALIZAÇÃO E CONTATO
   ══════════════════════════════════════════════════════════════ */

.location-section {
  padding: var(--section-py-lg) 0;
  background: var(--bg-surface);
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.contact-item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  transition: background var(--transition-fast);
  margin-bottom: var(--space-3);
}
.contact-item:hover { background: rgba(30, 122, 110, 0.05); }

.contact-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: rgba(30, 122, 110, 0.08);
  border: 1px solid rgba(30, 122, 110, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--p-600);
  font-size: 1.1rem;
}
.contact-icon--whatsapp {
  background: rgba(37, 211, 102, 0.1);
  border-color: rgba(37, 211, 102, 0.25);
  color: #25d366;
}

.contact-content h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.contact-content address,
.contact-content p  { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); margin: 0; }
.contact-content a       { color: var(--p-600); transition: color var(--transition-fast); }
.contact-content a:hover { color: var(--p-700); }

.location-info { display: flex; flex-direction: column; }

.map-wrapper {
  width: 100%;
  height: clamp(380px, 50vw, 520px);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-default);
  margin: 0;
  box-shadow: var(--shadow-lg);

  position: relative;
}
.map-wrapper iframe {
  /* substituir width/height 100% por: */
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}

/* mobile: aumentar a altura */
@media (max-width: 576px) {
  .map-wrapper { height: 320px; }
}

@media (max-width: 992px) {
  .location-grid { grid-template-columns: 1fr; }
  .map-wrapper   { height: clamp(280px, 50vw, 400px); }
}


/* ══════════════════════════════════════════════════════════════
   15. BOT / CHAT FLUTUANTE
   ══════════════════════════════════════════════════════════════ */

#bot-floating-button {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-overlay);
  cursor: pointer;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--p-500);
  transition: transform var(--transition-spring);
}
#bot-floating-button:hover { transform: scale(1.08); }
#bot-floating-button img   { width: 100%; height: 100%; object-fit: cover; }

.bot-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: var(--r-500);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-base);
}

#bot-chat-container {
  position: fixed;
  bottom: 90px;
  right: var(--space-6);
  width: clamp(300px, 90vw, 380px);
  max-height: 500px;
  background: var(--n-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: none;
  flex-direction: column;
  z-index: var(--z-overlay);
  box-shadow: var(--shadow-xl);
}
#bot-chat-container.open { display: flex; }

/* ── Cabeçalho do chat ── */
.bot-header {
  background: var(--gradient-primary);
  padding: var(--space-4) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bot-info { display: flex; align-items: center; gap: var(--space-3); }

.bot-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
  position: relative;
  flex-shrink: 0;
}
.bot-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bot-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--g-400);
  border-radius: var(--radius-full);
  border: 2px solid var(--p-800);
}

.bot-status h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: #fff;
  letter-spacing: 0;
  margin-bottom: 2px;
}
.bot-status span { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.75); }

.bot-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  font-size: 1rem;
}
.bot-close:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

.bot-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.typing-indicator {
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: 4px;
  align-items: center;
  border-top: 1px solid var(--border-subtle);
}
.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--n-300);
  border-radius: var(--radius-full);
  animation: typing-bounce 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-6px); }
}

@media (max-width: 576px) {
  #bot-floating-button { bottom: var(--space-5); right: var(--space-5); width: 52px; height: 52px; }
  #bot-chat-container  { bottom: 80px; right: var(--space-4); left: var(--space-4); width: auto; }
}


/* ══════════════════════════════════════════════════════════════
   16. RODAPÉ
   Fundo verde escuro nobre — continuidade com o CTA banner
   ══════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--bg-dark-deep);
  border-top: 1px solid var(--border-dark-default);
}

.footer-top {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--border-dark-default);
}

.footer-logo {
  height: clamp(32px, 4vw, 44px);
  width: auto;
  margin-bottom: var(--space-5);
}

.footer-desc {
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
  max-width: 320px;
}

/* ── Redes sociais ── */
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-dark-default);
  color: var(--text-on-dark-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-fast);
}
.footer-social a:hover {
  background: rgba(212, 160, 23, 0.15);
  color: var(--a-300);
  border-color: rgba(212, 160, 23, 0.35);
  transform: translateY(-2px);
}

.footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-on-dark-primary);
  margin-bottom: var(--space-5);
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-nav-list a {
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
  transition:
    color var(--transition-fast),
    padding-left var(--transition-fast);
  display: inline-flex;
  align-items: center;
}
.footer-nav-list a:hover {
  color: var(--text-on-dark-primary);
  padding-left: var(--space-2);
}

.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
}
.footer-contact-list i           { color: var(--p-300); font-size: 0.9rem; margin-top: 2px; flex-shrink: 0; }
.footer-contact-list a           { color: var(--text-on-dark-muted); transition: color var(--transition-fast); }
.footer-contact-list a:hover     { color: var(--text-on-dark-primary); }
.footer-contact-list address     { line-height: var(--lh-relaxed); }

.footer-bottom { padding: var(--space-5) 0; }
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-bottom p        { margin: 0; font-size: var(--text-xs); color: var(--text-on-dark-muted); }
.footer-bottom a        { color: var(--a-400); transition: color var(--transition-fast); }
.footer-bottom a:hover  { color: var(--a-300); }

@media (max-width: 768px) {
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-desc         { max-width: 100%; }
}


/* ══════════════════════════════════════════════════════════════
   17. MODAL
   ══════════════════════════════════════════════════════════════ */

.modal-contabilidade {
  background: var(--n-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.modal-contabilidade-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-5) var(--space-6);
}
.modal-contabilidade-header .modal-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  letter-spacing: 0;
}

.modal-contabilidade-body { padding: var(--space-6); }

.modal-service-group             { margin-bottom: var(--space-6); }
.modal-service-group:last-child  { margin-bottom: 0; }

.modal-service-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--p-700);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-service-item              { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.modal-service-item:last-child   { border-bottom: none; }
.modal-service-item dt {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}
.modal-service-item dd {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--lh-relaxed);
}

.modal-contabilidade-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-6);
}


/* ══════════════════════════════════════════════════════════════
   18. BOTÃO VOLTAR AO TOPO
   ══════════════════════════════════════════════════════════════ */

/* ── Grupo fixo que alinha os dois botões flutuantes ── */
.floating-buttons-group {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: var(--z-overlay);
}

/* ── Botão Scroll Top — dentro do grupo, sem posicionamento fixo próprio ── */
.btn-scroll-top {
  position: relative;
  width: 44px;
  height: 44px;
  background: var(--n-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.9);
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base),
    transform var(--transition-base),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.btn-scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.btn-scroll-top:hover {
  background: var(--p-700);
  border-color: var(--p-600);
  color: #fff;
  transform: translateY(-2px) scale(1);
  box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
  .floating-buttons-group {
    bottom: 20px;
    right: 20px;
    gap: 8px;
  }
  .btn-scroll-top {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
}

@media (max-width: 425px) {
  .floating-buttons-group {
    bottom: 16px;
    right: 16px;
    gap: 7px;
  }
  .btn-scroll-top {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   19. RESPONSIVIDADE GLOBAL
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
  .section-title { font-size: var(--text-3xl); }
}


/* ══════════════════════════════════════════════════════════════
   20. IMPRESSÃO E ACESSIBILIDADE
   ══════════════════════════════════════════════════════════════ */

@media print {
  .navbar,
  .btn-scroll-top,
  #bot-floating-button,
  #bot-chat-container,
  .cta-banner-section {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
}

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