/* =========================================================
   SERVICE CONTÁBIL: Identidade visual
   Montserrat · Azuis da marca · Ondas como elemento gráfico
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Cores da identidade */
  --brand-900: #0B2A5B;          /* derivada, títulos sobre fundo claro */
  --brand-700: #0A47A0;          /* derivada, profundidade */
  --brand-600: #0D5CC3;          /* Azul Principal   */
  --brand-500: #2E7DE1;          /* Azul Secundário  */
  --brand-300: #6B9EF8;          /* Azul Claro       */
  --brand-200: #A9C8FF;          /* derivada, para texto sobre fundo escuro */
  --surface:   #F5F8FC;          /* Fundo Claro      */
  --ink:       #1F2D3D;          /* Texto Principal  */
  --ink-soft:  #6B7280;          /* Texto Secundário */
  --white:     #FFFFFF;
  --line:      #E4EBF5;

  /* Tipografia */
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Raios e sombras */
  --r-card: 18px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 10px -4px rgba(31, 45, 61, .14);
  --shadow-md: 0 18px 40px -24px rgba(13, 92, 195, .38);
  --shadow-lg: 0 34px 70px -34px rgba(13, 92, 195, .45);

  /* Ritmo vertical */
  --pad-section: clamp(64px, 8vw, 116px);
  --header-h: 104px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, blockquote, address { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
iframe { border: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Acessibilidade ---------- */
.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--brand-600);
  color: var(--white);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .25s ease;
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Utilitários ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.icon {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke-width: inherit;
}
.icon--lg { width: 28px; height: 28px; }

.text-brand { color: var(--brand-600); }

.eyebrow {
  margin-bottom: 14px;
  color: var(--brand-600);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow--light { color: var(--brand-300); }

/* no fundo claro o título fica no marinho da marca: o grafite do texto
   destoava do azul da segunda linha */
.h2 {
  color: var(--brand-900);
  font-size: clamp(1.7rem, 3.1vw, 2.45rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.h2--light { color: var(--white); }

.lead {
  color: var(--ink);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 500;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22,.7,.3,1), box-shadow .25s ease,
              background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn .icon { width: 18px; height: 18px; transition: transform .25s cubic-bezier(.22,.7,.3,1); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { box-shadow: var(--shadow-lg); }

.btn--ghost {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--brand-500); color: var(--brand-600); }

.btn--light {
  background: var(--white);
  color: var(--brand-600);
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .6);
}
.btn--light:hover { color: var(--brand-700); }
/* o ícone do WhatsApp não é de traço: não desliza no hover */
.btn--light:hover .icon { transform: none; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .3s ease, box-shadow .3s ease, height .3s ease;
}
.site-header.is-scrolled {
  height: 88px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 12px 30px -26px rgba(31, 45, 61, .5);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* a logo do header usa o recorte sem a margem transparente do PNG original:
   assim ela é dimensionada pela altura e ocupa de fato o espaço do header */
.brand img {
  width: auto;
  height: clamp(52px, 5vw, 72px);
  transition: height .3s ease;
}
.site-header.is-scrolled .brand img { height: clamp(44px, 4.2vw, 60px); }
.brand picture { display: block; }

/* ligar e WhatsApp só em ícone: aparecem no celular, no desktop a nav já tem os dois */
.header-quick { display: none; }

.nav { display: flex; align-items: center; gap: clamp(22px, 2.9vw, 44px); }
.nav__list { display: flex; align-items: center; gap: clamp(20px, 2.9vw, 42px); }

.nav__link {
  position: relative;
  padding: 8px 0;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 500;
  transition: color .22s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--brand-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22,.7,.3,1);
}
.nav__link:hover { color: var(--brand-600); }
.nav__link:hover::after { transform: scaleX(1); }

/* Ações do header: ligar + CTA andam juntos, com respiro menor que o do menu */
.nav__actions { display: flex; align-items: center; gap: 12px; }

.nav__phone {
  display: inline-flex;
  align-items: center;
  /* padding/gap/ícone iguais aos do .btn: o botão fecha na mesma altura do CTA */
  gap: 10px;
  padding: 13px 26px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--brand-600);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.22,.7,.3,1), background-color .25s ease,
              border-color .25s ease, color .25s ease;
}
.nav__phone .icon { width: 18px; height: 18px; }
.nav__phone:hover {
  transform: translateY(-2px);
  border-color: var(--brand-500);
  background: rgba(13, 92, 195, .06);
}
.nav__phone:active { transform: translateY(0); }

/* No topo o header é transparente e flutua sobre o banner escuro: logo e menu
   viram brancos. Ao rolar ele ganha o fundo claro e tudo volta ao normal.
   Só no desktop; no mobile o menu é um painel branco à parte. */
.site-header:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); }

@media (min-width: 901px) {
  .site-header:not(.is-scrolled) .nav__link { color: var(--white); }
  .site-header:not(.is-scrolled) .nav__link:hover { color: #C1D8FF; }
  .site-header:not(.is-scrolled) .nav__link::after { background: var(--brand-200); }

  /* o CTA azul sumiria no fundo azul: no topo ele fica branco */
  .site-header:not(.is-scrolled) .nav__cta {
    background: var(--white);
    color: var(--brand-700);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .55);
  }
  .site-header:not(.is-scrolled) .nav__cta:hover { color: var(--brand-600); }

  /* mesma lógica para o botão de ligar: contorno claro sobre o banner */
  .site-header:not(.is-scrolled) .nav__phone {
    border-color: rgba(255, 255, 255, .45);
    color: var(--white);
  }
  .site-header:not(.is-scrolled) .nav__phone:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, .14);
    color: var(--white);
  }
}

.nav-toggle {
  display: none;
  /* o painel .nav é filho do header: sem isto ele cobriria o botão de fechar */
  position: relative;
  z-index: 120;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle__close { display: none; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* sem desfoque: borrar a tela inteira travava a abertura do menu no celular */
  background: rgba(15, 30, 55, .45);
  opacity: 0;
  transition: opacity .3s ease;
}
.nav-scrim.is-open { opacity: 1; }

/* =========================================================
   ONDAS: elemento gráfico da marca
   ========================================================= */
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.wave__l1 { fill: var(--brand-300); opacity: .42; }
.wave__l2 { fill: var(--brand-500); opacity: .62; }
.wave__l3 { fill: var(--white); }

.wave--hero        { bottom: -1px; z-index: 3; height: clamp(58px, 9vw, 132px); }
.wave--band-top    { top: -1px;    z-index: 2; height: clamp(44px, 6vw, 92px); }
.wave--band-bottom { bottom: -1px; z-index: 2; height: clamp(44px, 6vw, 92px); }
.wave--footer      { top: -1px;    z-index: 2; height: var(--wave-h); }

.wave--hero .wave__l3        { fill: var(--white); }
.wave--band-top .wave__l3    { fill: var(--surface); }
.wave--band-bottom .wave__l3 { fill: var(--white); }
.wave--footer .wave__l3      { fill: var(--white); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(8px, 1.4vw, 18px));
  /* continua servindo de base caso a foto do fundo não carregue */
  background:
    radial-gradient(60% 70% at 84% 20%, rgba(46, 125, 225, .5), transparent 64%),
    linear-gradient(165deg, var(--brand-700) 0%, var(--brand-600) 62%, var(--brand-500) 100%);
}

/* ---------- Fundo fotográfico com o filtro da marca ---------- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* isola a mistura: o duotone só afeta a foto, nunca o resto da página */
  isolation: isolate;
  pointer-events: none;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 58%;
  /* tira a cor e escurece a foto: ela entra como textura sob o azul, não como imagem clara.
     Não aplicar esse filtro direto no arquivo: sem o filter o mix-blend-mode
     do véu (::before) sai mais saturado e o azul do banner muda */
  filter: grayscale(1) contrast(1.12) brightness(.62);
}

/* duotone: preserva a luminosidade da foto e troca o matiz pelo azul da marca */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(142deg, var(--brand-700) 0%, var(--brand-600) 46%, var(--brand-500) 100%);
  mix-blend-mode: color;
}

/* véu azul: fechado sobre o texto, mais aberto do lado da consultora, o terno
   dela é azul-marinho e precisa de um fundo menos escuro para não se fundir */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(104deg,
      rgba(10, 71, 160, .94) 0%,
      rgba(10, 71, 160, .88) 30%,
      rgba(13, 92, 195, .70) 52%,
      rgba(13, 92, 195, .50) 76%,
      rgba(46, 125, 225, .40) 100%),
    linear-gradient(180deg,
      rgba(7, 44, 104, .46) 0%,
      rgba(7, 44, 104, .06) 34%,
      rgba(7, 44, 104, .20) 74%,
      rgba(7, 44, 104, .40) 100%);
}

/* halo claro atrás da consultora: é o que separa o terno azul-marinho do fundo */
.hero__glow {
  position: absolute;
  top: 4%; right: 0;
  width: min(700px, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 175, 255, .40), rgba(120, 175, 255, 0) 64%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
  min-height: min(58vh, 480px);
}

.hero__copy { align-self: center; padding-bottom: clamp(44px, 7.5vw, 112px); }
.hero__title {
  color: var(--white);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -.026em;
}
/* o azul da marca não se destaca no fundo escuro: aqui vale o azul claro */
.hero__title .text-brand { color: var(--brand-200); }

.hero__lead {
  max-width: 42ch;
  margin-top: 26px;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  line-height: 1.6;
}

/* versao curta do titulo e do texto, so aparece no celular */
.hero__short { display: none; }

/* Visual: pessoa */
.hero__visual {
  position: relative;
  align-self: end;
  min-height: 260px;
  display: flex;
  /* encostada no inicio da coluna: fica mais perto do titulo do que centralizada */
  justify-content: flex-start;
  align-items: flex-end;
}

.hero__person {
  position: relative;
  z-index: 2;
  width: min(100%, 412px);
  height: auto;
  /* a base da foto encosta no fim do banner; a margem negativa em cima devolve
     a altura extra, entao os cards de atalho ficam na mesma posicao */
  margin-top: clamp(-38px, -3.2vw, -25px);
  margin-bottom: 0;
  filter: drop-shadow(0 26px 34px rgba(10, 40, 90, .2));
}

/* Entrada do hero */
.js .hero__title,
.js .hero__lead,
.js .hero__visual {
  animation: heroIn .9s cubic-bezier(.22,.7,.3,1) backwards;
}
.js .hero__title   { animation-delay: .08s; }
.js .hero__lead    { animation-delay: .18s; }
.js .hero__visual  { animation-delay: .14s; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   PILARES
   ========================================================= */
.pillars {
  position: relative;
  z-index: 4;
  padding-block: clamp(28px, 4vw, 44px);
  background: var(--white);
}

.pillars__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
}

.pillar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: clamp(16px, 2.4vw, 32px);
  border-left: 1px solid var(--line);
}
.pillars__list > .pillar:first-child { padding-left: 0; border-left: 0; }

.pillar .icon { color: var(--brand-600); stroke-width: 1.6; }
.pillar strong {
  display: block;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
}
.pillar span {
  display: block;
  font-size: .8125rem;
  line-height: 1.4;
}

/* =========================================================
   SEÇÕES: ritmo base
   ========================================================= */
.section {
  position: relative;
  padding-block: var(--pad-section);
  background: var(--white);
}
.section--contact { padding-block: clamp(32px, 3.4vw, 50px) 0; }
.section--services { background: var(--surface); }
.section--reviews  { background: var(--surface); }
.section--reviews  { padding-block: clamp(48px, 5.4vw, 76px); }
.section--reviews .section-head { margin-bottom: clamp(24px, 3vw, 36px); }
.section--support  { overflow: hidden; background: var(--surface); }

.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__sub { margin-top: 16px; font-size: 1.0625rem; }

.section-foot { margin-top: clamp(32px, 4vw, 48px); text-align: center; }

/* =========================================================
   ATENDIMENTO: cartão dividido (foto + painel da marca)
   ========================================================= */
.support {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: stretch;
  min-height: clamp(380px, 41vw, 520px);
  border-radius: clamp(20px, 2.2vw, 30px);
  overflow: hidden;
  background: linear-gradient(118deg, var(--white) 0%, var(--surface) 58%, #E9F0FA 100%);
  box-shadow: var(--shadow-lg);
}

/* Foto: encostada na base do cartão, com respiro acima da cabeça */
.support__photo {
  position: relative;
  z-index: 1;
  grid-column: 1;
}
.support__photo img {
  position: absolute;
  inset: clamp(26px, 3.4vw, 46px) 0 0 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% top;
}

/* Painel azul: avança sobre a foto com um corte diagonal */
.support__panel {
  position: relative;
  z-index: 2;
  grid-column: 2;
  display: flex;
  align-items: center;
  margin-left: clamp(-92px, -6vw, -40px);
  clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(78% 86% at 86% 14%, rgba(107, 158, 248, .34), transparent 62%),
    linear-gradient(140deg, var(--brand-700) 0%, var(--brand-600) 58%, #0C4FAA 100%);
}
/* faixas diagonais da identidade, bem sutis */
.support__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    118deg,
    rgba(255, 255, 255, .055) 0 34px,
    rgba(255, 255, 255, 0) 34px 92px
  );
  pointer-events: none;
}

.support__copy {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 5vw, 66px) clamp(26px, 4vw, 58px)
           clamp(40px, 5vw, 66px) clamp(64px, 9vw, 120px);
}
.support__title span { color: var(--brand-200); }
.support__lead {
  max-width: 44ch;
  margin-top: 20px;
  color: rgba(255, 255, 255, .82);
  font-size: 1.0625rem;
}
.support__cta { margin-top: 34px; }
.support__cta:hover .icon { transform: translateX(3px); }
/* versao curta do texto so aparece no celular */
.support__short { display: none; }
/* os envoltorios do titulo nao herdam a cor de destaque do span */
.support__title .support__full,
.support__title .support__short { color: inherit; }

/* Parceria: mesmo cartão do atendimento, com a foto enquadrada ao centro */
.section--partner { overflow: hidden; }
/* a foto do aperto de mao e horizontal: precisa de mais coluna que a do atendimento */
.support--partner {
  grid-template-columns: 54% 46%;
  min-height: clamp(420px, 44vw, 560px);
}
/* painel mais estreito: o texto ganha de volta parte do respiro lateral */
.support--partner .support__copy {
  padding-right: clamp(24px, 3vw, 46px);
  padding-left: clamp(52px, 7vw, 92px);
}
.support--partner .support__photo img {
  inset: clamp(16px, 2.2vw, 30px) 0 0 0;
  object-position: center;
}


/* =========================================================
   SERVIÇOS
   ========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  transition: transform .32s cubic-bezier(.22,.7,.3,1), box-shadow .32s ease, border-color .32s ease;
}
/* onda que sobe no hover */
.card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22,.7,.3,1);
}
.card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.card:hover::after { transform: scaleX(1); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  margin-bottom: 22px;
  border-radius: 16px;
  color: var(--brand-600);
  background: linear-gradient(140deg, rgba(107, 158, 248, .18), rgba(13, 92, 195, .10));
  transition: color .32s ease, background-color .32s ease;
}
.card__icon .icon { stroke-width: 1.6; }
.card:hover .card__icon {
  color: var(--white);
  background: linear-gradient(140deg, var(--brand-500), var(--brand-600));
}

.card__title {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}
.card__text { font-size: .9375rem; line-height: 1.6; }

/* ---------- Variante de ação: atalhos que quebram a base do banner ---------- */
.quick {
  --overlap: clamp(68px, 7.2vw, 108px);   /* quanto os cards sobem sobre o hero */
  position: relative;
  z-index: 4;
  margin-top: calc(var(--overlap) * -1);
  padding-bottom: clamp(44px, 5vw, 72px);
}
/* o fundo claro começa só depois do hero, para não cobrir a imagem de fundo dele */
.quick::before {
  content: "";
  position: absolute;
  inset: var(--overlap) 0 0 0;
  z-index: -1;
  background: var(--surface);
}

.cards--quick {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.7vw, 20px);
}

.card--action {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.1vw, 26px);
  /* sombra propria: os cards precisam saltar do azul do banner */
  border-color: transparent;
  box-shadow: 0 30px 58px -26px rgba(8, 32, 74, .55), 0 4px 14px -6px rgba(8, 32, 74, .16);
}
.card--action:hover {
  box-shadow: 0 42px 78px -28px rgba(8, 32, 74, .62), 0 6px 18px -8px rgba(8, 32, 74, .2);
}
/* sem a barra que sobe na base: nestes cards o destaque ja e o botao */
.card--action::after { content: none; }

/* três traços no topo, no gradiente da identidade */
.card__mark {
  display: block;
  width: 30px; height: 13px;
  margin-bottom: 18px;
  background-image:
    linear-gradient(90deg, var(--brand-600), var(--brand-300)),
    linear-gradient(90deg, var(--brand-600), var(--brand-300)),
    linear-gradient(90deg, var(--brand-600), var(--brand-300));
  background-size: 100% 3px;
  background-position: 0 0, 0 5px, 0 10px;
  background-repeat: no-repeat;
}

.card--action .card__title {
  margin-bottom: 10px;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
}
/* o texto empurra o botão para a base: as pílulas alinham entre os cards */
.card--action .card__text {
  flex: 1 1 auto;
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.55;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

/* pílula compacta: o rótulo mais longo cabe nas 4 colunas sem estourar */
.card__cta {
  align-self: flex-start;
  max-width: 100%;
  padding: 12px 20px;
  gap: 7px;
  font-size: .8125rem;
  /* o preenchimento da marca vem de .btn--primary: o botao ja nasce aceso */
}
/* passar o mouse em qualquer ponto do card aprofunda o botao */
.card__cta:hover,
.card--action:hover .card__cta { box-shadow: var(--shadow-lg); }
.card__cta .icon { width: 16px; height: 16px; }

/* bolinhas do carrossel dos atalhos: so existem no celular */
.quick__dots { display: none; }

/* =========================================================
   FAIXA: CONTABILIDADE ONLINE
   ========================================================= */
.band {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--pad-section) + clamp(20px, 4vw, 46px));
  background:
    radial-gradient(70% 90% at 82% 18%, rgba(107, 158, 248, .30), transparent 60%),
    linear-gradient(140deg, var(--brand-700) 0%, var(--brand-600) 55%, #0C4FAA 100%);
}

.band__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

/* tipografia ampliada: a faixa e o bloco de maior peso da pagina */
.band__copy .eyebrow { font-size: .8125rem; margin-bottom: 16px; }
.band__copy .h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); }

.band__lead {
  max-width: 50ch;
  margin-top: 22px;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(1.125rem, 1.35vw, 1.3125rem);
  line-height: 1.6;
}
/* versao curta do texto, so aparece no celular */
.band__short { display: none; }

/* selo com as barras da marca: repete o gesto das ondas em escala pequena */
.eyebrow--mark { display: flex; align-items: center; gap: 12px; }
.eyebrow--mark::before {
  content: "";
  flex: none;
  width: 30px; height: 9px;
  background:
    linear-gradient(90deg, var(--brand-300), rgba(255, 255, 255, .92)),
    linear-gradient(90deg, var(--brand-300), rgba(255, 255, 255, .92));
  background-size: 100% 3px;
  background-position: 0 0, 0 6px;
  background-repeat: no-repeat;
}

/* segunda linha do titulo em degrade: destaca a promessa sem trocar a paleta */
.band__title span {
  background: linear-gradient(92deg, #C6DCFF 0%, #A9C8FF 46%, #8FBDFF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* cartoes de prova: dois compactos + um largo com o argumento mais forte */
.band-stats {
  margin-top: clamp(26px, 3.2vw, 38px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.band-stat {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  /* sem backdrop-filter: atrás só há gradiente, o desfoque não aparecia
     e custava processamento a cada quadro da rolagem */
  background: rgba(255, 255, 255, .08);
}

.band-stat--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 1.8vw, 20px);
  border-color: rgba(169, 200, 255, .36);
  background: linear-gradient(118deg, rgba(107, 158, 248, .34), rgba(255, 255, 255, .08) 78%);
}
.band-stat__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(46px, 4.4vw, 54px);
  aspect-ratio: 1;
  border-radius: 14px;
  /* selo azulado: o icone acende sem competir com o titulo branco */
  background: rgba(169, 200, 255, .22);
  color: #DCE9FF;
}
.band-stat__icon .icon { stroke-width: 1.6; }
.band-stat__body strong {
  display: block;
  color: var(--white);
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.35;
}
.band-stat__body span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(.9375rem, 1.05vw, 1.03125rem);
  line-height: 1.5;
}


.band__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.band__halo {
  position: absolute;
  left: 50%; bottom: 2%;
  width: min(112%, 480px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 66%);
}
/* recorte sem fundo: mantem a proporcao original e so suaviza o corte da base */
.band__media img {
  position: relative;
  z-index: 2;
  width: min(124%, 600px);
  height: auto;
  filter: drop-shadow(0 34px 42px rgba(4, 24, 58, .42));
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, #000 88%, rgba(0, 0, 0, 0) 100%);
}

/* =========================================================
   SEGMENTOS
   ========================================================= */
.segments {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

/* moldura: a dupla “fica em pé” dentro do cartão, sem corte flutuante */
.segments__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-card);
  background: linear-gradient(158deg, #EDF3FD 0%, #DCE8FB 58%, #CFE0F9 100%);
  box-shadow: var(--shadow-md);
}
/* onda da marca no pé do cartão */
.segments__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(13, 92, 195, .16), transparent 70%);
}
.segments__media img {
  position: relative;
  z-index: 2;
  width: 98%;
  margin-bottom: -1%;
}

.segments__copy p { margin-top: 18px; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.chip {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  transition: transform .25s cubic-bezier(.22,.7,.3,1), background-color .25s ease,
              color .25s ease, border-color .25s ease;
}
.chip:hover {
  transform: translateY(-2px);
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: var(--white);
}

.segments__ask { margin-top: 26px; font-size: .9375rem; }
.segments__ask a {
  color: var(--brand-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.segments__ask a:hover { color: var(--brand-700); }

/* =========================================================
   AVALIAÇÕES: carrossel
   ========================================================= */
.carousel {
  position: relative;
  --per-view: 3;
  --gap: clamp(16px, 2vw, 24px);
  --track-pad-top: 10px;
  --track-pad-bottom: 22px;
  --nav-size: 48px;
}

/* o viewport não corta: o próprio trilho rola e a sombra do hover cabe no padding */
.carousel__viewport { position: relative; }

.reviews {
  display: flex;
  gap: var(--gap);
  padding: var(--track-pad-top) 0 var(--track-pad-bottom);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews::-webkit-scrollbar { display: none; }

.review {
  position: relative;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  transition: transform .32s cubic-bezier(.22,.7,.3,1), box-shadow .32s ease;
}
.review:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.review__mark {
  position: absolute;
  top: 22px; right: 24px;
  width: 34px; height: 34px;
  color: var(--brand-300);
  fill: currentColor;
  opacity: .22;
}

.stars { display: flex; gap: 3px; margin-bottom: 16px; }
.stars .icon { width: 17px; height: 17px; color: #F5A623; fill: currentColor; }

.review__text {
  flex: 1;
  margin: 0 0 22px;
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.7;
}

.review__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
}
.avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: var(--white);
  font-size: .9375rem;
  font-weight: 700;
}

/* ---------- Controles do carrossel ---------- */
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 0;
}

.carousel__nav {
  display: grid;
  place-items: center;
  width: var(--nav-size); height: var(--nav-size);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--brand-600);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease,
              color .25s ease, border-color .25s ease, opacity .25s ease;
}
.carousel__nav .icon { width: 20px; height: 20px; stroke-width: 2; }
.carousel__nav--prev .icon { transform: rotate(180deg); }

.carousel__nav:hover {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  border-color: transparent;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.carousel__nav:disabled {
  opacity: .38;
  cursor: default;
  transform: none;
  background: var(--white);
  border-color: var(--line);
  color: var(--brand-600);
  box-shadow: none;
}

/* nos ecrãs largos as setas ficam nas laterais do carrossel */
@media (min-width: 901px) {
  .carousel__nav {
    position: absolute;
    /* centra na altura dos cartões, compensando a folga menor no topo do trilho */
    top: calc(50% - (var(--track-pad-bottom) - var(--track-pad-top)) / 2);
    z-index: 2;
    margin: 0;
    transform: translateY(-50%);
  }
  .carousel__nav:hover { transform: translateY(-50%); }
  .carousel__nav:disabled { transform: translateY(-50%); }
  .carousel__nav--prev { left: -20px; }
  .carousel__nav--next { right: -20px; }
}

/* a partir daqui sobra margem fora do container: as setas saem de cima dos cartões */
@media (min-width: 1320px) {
  .carousel__nav--prev { left: -64px; }
  .carousel__nav--next { right: -64px; }
}


/* =========================================================
   CONTATO
   ========================================================= */

/* ---------- Consultora + formulário, soltos na seção ---------- */
.talk {
  display: grid;
  grid-template-columns: .98fr 1.02fr;
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
}

.talk__photo {
  /* quanto ela desce por dentro da onda e em que trecho a base se dissolve */
  --dive: clamp(32px, 4.3vw, 66px);
  --fade: clamp(20px, 2.6vw, 38px);
  position: relative;
  z-index: 4;
  justify-self: center;
  max-width: 520px;
}
.talk__photo img {
  position: relative;
  width: 100%;
  margin-bottom: calc(-1 * var(--dive));
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent 100%);
}
/* O trecho que se dissolve ganha o azul da água no lugar do vazio: a própria
   silhueta da foto serve de recorte, então o azul só entra onde ela está.
   Só liga com .is-loaded (posto pelo JS quando a foto carrega): a máscara
   no CSS baixaria a imagem já na abertura da página, furando o lazy-load. */
.talk__photo.is-loaded::after {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--dive)) 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(45, 118, 214, 0) calc(100% - var(--fade)),
    rgb(45, 118, 214) calc(100% - var(--fade) * .45));
  -webkit-mask-image: url("../imagens/fotos/contato-consultora.webp");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("../imagens/fotos/contato-consultora.webp");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.talk__panel { padding-bottom: clamp(28px, 3vw, 44px); }
.talk__panel .h2 { font-size: clamp(2rem, 3.9vw, 3.05rem); }
.talk__lead {
  max-width: 44ch;
  margin-top: 18px;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
}

/* ---------- Formulário ---------- */
.form {
  display: grid;
  gap: 18px;
  margin-top: clamp(20px, 2.4vw, 28px);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field { display: grid; gap: 9px; }
.field__label {
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.field__opt { color: var(--ink-soft); font-weight: 500; letter-spacing: 0; }

.field__input {
  width: 100%;
  padding: 17px 20px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.field__input::placeholder { color: var(--ink-soft); font-weight: 400; }
.field__input:hover { border-color: var(--brand-300); }
.field__input:focus {
  outline: 0;
  border-color: var(--brand-600);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(13, 92, 195, .12);
}
.field__input.is-invalid { border-color: #E0645B; background: #FEF6F5; }
.field__input--area { min-height: 108px; resize: vertical; }

/* Select com a seta da marca no lugar da nativa */
.field__select { position: relative; display: block; }
.field__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 54px;
  cursor: pointer;
}
.field__select select:invalid { color: var(--ink-soft); font-weight: 400; }
.field__caret {
  position: absolute;
  top: 50%; right: 20px;
  width: 20px; height: 20px;
  color: var(--brand-600);
  transform: translateY(-50%);
  pointer-events: none;
}

.form__feedback {
  padding: 13px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
}
.form__feedback--error { border-color: #F6D6D2; background: #FDF3F2; color: #B4342A; }
.form__feedback--ok { border-color: rgba(13, 92, 195, .2); background: rgba(13, 92, 195, .07); color: var(--brand-700); }

.form .btn { margin-top: 6px; padding: 19px 32px; font-size: 1.0625rem; }
/* =========================================================
   RODAPÉ
   ========================================================= */
.footer {
  --wave-h: clamp(44px, 6vw, 92px);
  position: relative;
  overflow: hidden;
  padding-top: calc(clamp(30px, 3.6vw, 52px) + clamp(44px, 6vw, 92px));
  color: rgba(255, 255, 255, .72);
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(107, 158, 248, .26), transparent 58%),
    linear-gradient(150deg, var(--brand-700), var(--brand-600) 58%, #0B4699 100%);
}

/* A água passa por cima da consultora: o mesmo fundo do rodapé, recortado pela
   curva da onda e desenhado acima da foto. É o que esconde a base reta do PNG. */
@supports ((mask-image: url("data:image/svg+xml,%3Csvg%3E%3C/svg%3E")) or (-webkit-mask-image: url("data:image/svg+xml,%3Csvg%3E%3C/svg%3E"))) {
  .footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background: inherit;
    pointer-events: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C200,16 440,104 740,72 C1020,42 1250,4 1440,36 L1440,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% var(--wave-h);
    -webkit-mask-position: 0 -1px;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C200,16 440,104 740,72 C1020,42 1250,4 1440,36 L1440,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-size: 100% var(--wave-h);
    mask-position: 0 -1px;
    mask-repeat: no-repeat;
  }
}

.footer__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.5fr;
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(26px, 3vw, 38px);
}

.footer__logo {
  width: clamp(200px, 17vw, 236px);
  filter: brightness(0) invert(1);
}
.footer__tagline {
  margin-top: 14px;
  color: rgba(255, 255, 255, .8);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.social { display: flex; gap: 12px; margin-top: 18px; }
.social a {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: var(--white);
  transition: transform .25s cubic-bezier(.22,.7,.3,1), background-color .25s ease, border-color .25s ease;
}
.social a:hover {
  transform: translateY(-3px);
  background: var(--white);
  border-color: var(--white);
  color: var(--brand-600);
}
.social .icon { width: 23px; height: 23px; stroke-width: 1.7; }

.footer__title {
  margin-bottom: 16px;
  color: var(--white);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.footer__links { display: grid; gap: 10px; }
.footer__links a {
  font-size: 1.0625rem;
  transition: color .22s ease, padding-left .22s ease;
}
.footer__links a:hover { color: var(--white); padding-left: 5px; }

.footer__contact { display: grid; gap: 12px; }
.footer__contact li { display: flex; align-items: flex-start; gap: 13px; font-size: 1.0625rem; line-height: 1.6; }
.footer__contact .icon { width: 23px; height: 23px; flex: none; stroke-width: 1.7; color: var(--brand-300); margin-top: 2px; }
.footer__contact a { overflow-wrap: anywhere; transition: color .22s ease; }
/* o e-mail e a linha mais longa da coluna: um passo menor para caber inteiro */
.footer__contact a[href^="mailto"] { font-size: 1rem; }
.footer__contact a:hover { color: var(--white); }

.footer__bottom {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .9375rem;
}

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.whatsapp-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 95;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #4AE383 0%, #25D366 46%, #12A150 100%);
  color: var(--white);
  box-shadow: 0 14px 30px -10px rgba(18, 161, 80, .62), 0 0 0 0 rgba(37, 211, 102, .42);
  animation: zapPop .5s cubic-bezier(.2,1.2,.35,1) backwards;
  transition: transform .3s cubic-bezier(.22,.7,.3,1), box-shadow .3s ease;
}

/* dois anéis que pulsam a partir do círculo, em tempos diferentes. Pulsam
   4 vezes e param (forwards deixa o anel invisível no fim): animação
   infinita manteria o celular redesenhando a tela sem parar */
.whatsapp-float::before,
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .55);
  animation: zapPulse 2.6s cubic-bezier(.22,.7,.3,1) 4 forwards;
  pointer-events: none;
}
.whatsapp-float::after { animation-delay: 1.3s; }

.whatsapp-float .icon {
  position: relative;
  width: 32px;
  height: 32px;
  fill: currentColor;
  filter: drop-shadow(0 2px 4px rgba(6, 72, 36, .28));
  transition: transform .3s cubic-bezier(.22,.7,.3,1);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: translateY(-4px) scale(1.07);
  box-shadow: 0 22px 44px -12px rgba(18, 161, 80, .78), 0 0 0 10px rgba(37, 211, 102, .16);
}
.whatsapp-float:hover .icon,
.whatsapp-float:focus-visible .icon { animation: zapWiggle .6s ease both; }
.whatsapp-float:active { transform: translateY(-1px) scale(.96); }

/* o rótulo vira balão ao lado do círculo, sem deformar o botão */
.whatsapp-float__label {
  position: absolute;
  z-index: 2;
  right: calc(100% + 14px);
  top: 50%;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translate(12px, -50%);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.7,.3,1);
}
.whatsapp-float__label::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  border: 6px solid transparent;
  border-left-color: var(--white);
  transform: translateY(-50%);
}
.whatsapp-float:hover .whatsapp-float__label,
.whatsapp-float:focus-visible .whatsapp-float__label { opacity: 1; transform: translate(0, -50%); }

@keyframes zapPulse {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}
@keyframes zapPop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
@keyframes zapWiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-12deg) scale(1.06); }
  55%      { transform: rotate(10deg)  scale(1.06); }
  80%      { transform: rotate(-5deg); }
}

/* =========================================================
   REVELAÇÃO NO SCROLL
   ========================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s cubic-bezier(.22,.7,.3,1) var(--d, 0ms),
              transform .75s cubic-bezier(.22,.7,.3,1) var(--d, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* --- Desktop menor / tablet largo --- */
@media (max-width: 1080px) {
  .nav__list { gap: 16px; }
  .nav__link { font-size: .875rem; }
  .nav__phone, .nav__cta { padding: 11px 16px; gap: 8px; font-size: .8125rem; }
  .nav__phone .icon, .nav__cta .icon { width: 16px; height: 16px; }
  .nav__actions { gap: 8px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .carousel { --per-view: 2; }
  .cards--quick { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }

  /* o formulário pede mais largura que a foto */
  .talk { grid-template-columns: .92fr 1.08fr; }
}

/* --- Tablet --- */
@media (max-width: 900px) {
  /* header alto o bastante para a logo empilhada respirar em cima e embaixo */
  :root { --header-h: 108px; }

  /* header rolado quase opaco e sem desfoque: o blur do fundo era refeito
     a cada quadro da rolagem, e é no celular que isso trava */
  .site-header.is-scrolled {
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  /* Header no celular: menu à esquerda, logo no centro, ligar e WhatsApp à
     direita. As colunas laterais têm a mesma largura, então a logo fica no
     centro exato da tela mesmo com um ícone de um lado e dois do outro */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
  }
  .nav-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
  .brand { grid-column: 2; grid-row: 1; }
  .header-quick { grid-column: 3; grid-row: 1; justify-self: end; }

  /* botão do menu: quadrado reto e translúcido sobre o banner, azul claro ao rolar */
  .nav-toggle {
    display: inline-flex;
    width: 52px; height: 52px;
    border-radius: 0;
    color: var(--white);
    background: rgba(255, 255, 255, .16);
    box-shadow: none;
    transition: background-color .3s ease, color .3s ease;
  }
  .site-header.is-scrolled .nav-toggle,
  body.nav-open .nav-toggle {
    color: var(--brand-600);
    background: rgba(13, 92, 195, .08);
  }
  .nav-toggle .icon { width: 30px; height: 30px; }

  .header-quick {
    display: flex;
    align-items: center;
    transition: opacity .3s ease, visibility .3s;
  }
  .header-quick__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    color: var(--white);
    transition: color .3s ease;
  }
  .header-quick__link .icon { width: 34px; height: 34px; }
  .site-header.is-scrolled .header-quick__link { color: var(--brand-600); }
  /* com o menu aberto os atalhos saem: ficariam acesos sobre o véu escuro */
  body.nav-open .header-quick { opacity: 0; visibility: hidden; }

  /* logo empilhada (logo-mobile.png), dimensionada pela altura */
  .brand img { height: 78px; }
  .site-header.is-scrolled .brand img { height: 64px; }

  /* o painel entra pela esquerda, do lado do botão que o abre */
  .nav {
    position: fixed;
    top: 0; left: 0;
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: min(340px, 86vw);
    height: 100dvh;
    padding: calc(var(--header-h) + 16px) 28px 32px;
    background: var(--white);
    box-shadow: 18px 0 50px -30px rgba(15, 30, 55, .6);
    transform: translateX(-105%);
    transition: transform .38s cubic-bezier(.22,.7,.3,1);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__link { display: block; padding: 16px 0; font-size: 1rem; }
  .nav__link::after { display: none; }
  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 28px;
  }
  .nav__phone { justify-content: center; padding: 13px 26px; font-size: .9375rem; gap: 10px; }
  .nav__phone .icon { width: 18px; height: 18px; }
  .nav__cta { margin-top: 0; }

  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle__open { display: none; }
  body.nav-open .nav-toggle__close { display: block; }

  /* Hero empilhado */
  .hero { padding-top: calc(var(--header-h) + 34px); }

  /* com o texto centralizado, o véu passa a ser vertical: fecha em cima, abre embaixo */
  .hero__bg img { object-position: 58% 52%; }
  .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(10, 71, 160, .94) 0%,
      rgba(10, 71, 160, .90) 42%,
      rgba(13, 92, 195, .74) 64%,
      rgba(13, 92, 195, .56) 84%,
      rgba(46, 125, 225, .46) 100%);
  }

  /* empilhado, o halo acompanha a consultora para baixo */
  .hero__glow { top: 34%; right: -14%; width: min(560px, 86vw); }

  .hero__inner {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 0;
    gap: 8px;
  }
  .hero__copy { padding-bottom: 0; text-align: center; }
  .hero__title { font-size: clamp(1.85rem, 5.6vw, 2.5rem); }
  .hero__title br { display: none; }
  .hero__lead { margin-inline: auto; }
  .hero__visual { min-height: 0; margin-top: 22px; justify-content: center; }
  .hero__person { width: min(76%, 336px); margin-top: -36px; margin-bottom: -1px; }

  /* Pilares 2x2 */
  .pillars__list { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .pillar { padding-left: 0; border-left: 0; }

  /* Blocos lado a lado viram empilhados */
  .band__inner,
  .segments { grid-template-columns: 1fr; }

  /* Contato: sem a consultora, só o formulário */
  .talk { grid-template-columns: 1fr; }
  .talk__photo { display: none; }
  .talk__panel { padding-bottom: clamp(32px, 5vw, 56px); }
  .talk__lead { max-width: none; }

  .segments__media { order: -1; }

  /* Atendimento: foto em cima, painel azul embaixo */
  .support {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .support__photo {
    grid-column: 1;
    height: clamp(300px, 52vw, 400px);
  }
  .support__photo img { inset: clamp(20px, 4vw, 34px) 0 0 0; }
  .support__panel {
    grid-column: 1;
    margin-left: 0;
    margin-top: clamp(-52px, -7vw, -28px);
    clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
  }
  .support__copy {
    max-width: none;
    padding: clamp(62px, 13vw, 96px) clamp(24px, 5vw, 44px) clamp(36px, 7vw, 52px);
  }
  .support__lead { max-width: none; }

  /* no empilhado o cartao da parceria usa o mesmo recuo dos demais */
  .support--partner .support__copy {
    padding-right: clamp(24px, 5vw, 44px);
    padding-left: clamp(24px, 5vw, 44px);
  }

  .band__media img { width: min(82%, 420px); }
  .segments__media { max-width: 520px; margin-inline: auto; }

  .section-head { max-width: none; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  body { font-size: 15.5px; }

  .cards { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .carousel { --per-view: 1; }
  .quick { --overlap: clamp(50px, 8vw, 80px); padding-bottom: 12px; }
  /* o bloco de atendimento sobe para perto dos atalhos */
  .section--support { padding-top: 28px; }

  /* Atalhos viram carrossel: arrasta de lado e mostra um card por vez.
     O card ocupa a largura toda e o intervalo e o dobro da margem lateral,
     entao o vizinho fica sempre fora da tela */
  .quick .container { padding-inline: 0; }
  .cards--quick {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 0 16px 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cards--quick::-webkit-scrollbar { display: none; }
  .cards--quick .card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* no toque o card nao sobe: so deslizaria junto com o arraste */
  .cards--quick .card:hover { transform: none; }
  /* no celular os atalhos ficam sem sombra */
  .cards--quick .card,
  .cards--quick .card:hover { box-shadow: none; }
  /* no lugar da sombra, um contorno azul bem leve separa o card do fundo claro */
  .cards--quick .card,
  .cards--quick .card:hover {
    border-color: rgba(13, 92, 195, .2);
    box-shadow: 0 8px 20px -14px rgba(8, 32, 74, .35);
  }

  .quick__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: -8px;
  }
  .quick__dots span {
    width: 8px; height: 8px;
    border-radius: var(--r-pill);
    background: var(--line);
    transition: width .3s cubic-bezier(.22,.7,.3,1), background-color .3s ease;
  }
  .quick__dots span.is-active { width: 22px; background: var(--brand-600); }

  /* Contabilidade online no celular: a contadora abre a faixa em recorte de
     busto, o titulo entra centralizado sobre a passagem da foto para o azul
     e os tres cartoes viram uma lista unica, compacta */
  .band { padding-block: 64px 76px; }
  .band__inner { gap: 0; }

  .band__media { order: -1; }
  .band__halo {
    top: 0; bottom: auto;
    width: min(118%, 420px);
  }
  .band__media img {
    width: min(76vw, 310px);
    /* corta na altura da cintura: rosto e bracos cruzados continuam na cena */
    aspect-ratio: 1024 / 1240;
    object-fit: cover;
    object-position: 50% 0;
    filter: none;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .42) 78%, transparent 95%);
            mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .42) 78%, transparent 95%);
  }

  .band__copy {
    position: relative;
    z-index: 3;
    margin-top: -26px;
    text-align: center;
  }
  /* sem o selo: com a foto em cima, o titulo ja abre a faixa sozinho */
  .band__copy .eyebrow { display: none; }
  .band__copy .h2 { font-size: clamp(2rem, 8.6vw, 2.4rem); line-height: 1.1; }
  .band__lead {
    max-width: 31ch;
    margin: 14px auto 0;
    font-size: 1rem;
    line-height: 1.55;
  }
  .band__lead strong { color: var(--white); }
  .band__full { display: none; }
  .band__short { display: inline; }

  /* um painel de vidro so, com as linhas separadas por um fio */
  .band-stats {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    background: rgba(255, 255, 255, .07);
    text-align: left;
  }
  .band-stat,
  .band-stat--wide {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .band-stat + .band-stat { border-top: 1px solid rgba(255, 255, 255, .12); }
  /* o WhatsApp segue como destaque: a linha acende no tom claro da marca */
  .band-stat--wide {
    background: linear-gradient(100deg, rgba(107, 158, 248, .32), rgba(107, 158, 248, 0) 85%);
  }
  .band-stat__icon { width: 44px; border-radius: 12px; }
  .band-stat__icon .icon { width: 23px; height: 23px; }
  .band-stat__body strong { font-size: 1rem; line-height: 1.3; }
  .band-stat__body span { margin-top: 3px; font-size: .875rem; line-height: 1.45; text-wrap: pretty; }

  .footer__inner { grid-template-columns: 1fr; gap: 26px; }
  /* o PNG da logo tem uma sobra transparente (10,4% da largura a esquerda e
     cerca de 24% da altura embaixo): a margem negativa compensa, a marca
     alinha com o texto e o slogan chega mais perto */
  .footer__logo { width: 200px; margin: 0 0 -14px -21px; }
  .footer__bottom { flex-direction: column; text-align: center; gap: 6px; }

  .whatsapp-float { width: 56px; height: 56px; }
  .whatsapp-float .icon { width: 29px; height: 29px; }
  /* no toque não há hover: o rótulo fica sempre oculto e o alvo é o ícone */
  .whatsapp-float__label { display: none; }

  .review__mark { display: none; }

  /* Avaliacoes no celular: sem setas, so o arraste, e cada gesto
     para no proximo cartao (nao pula varios de uma vez) */
  .carousel__controls { display: none; }
  .review { scroll-snap-stop: always; }

  /* Atendimento e parceria no celular: foto em fundo claro em cima, painel
     azul reto embaixo (sem o corte diagonal), texto curto e botao na largura toda */
  :is(#atendimento, #parceria) .support { border-radius: 20px; }
  :is(#atendimento, #parceria) .support__photo { height: clamp(260px, 68vw, 340px); }
  :is(#atendimento, #parceria) .support__photo img {
    inset: 18px 0 0 0;
    object-position: 58% top;
  }
  :is(#atendimento, #parceria) .support__panel {
    margin-top: 0;
    clip-path: none;
  }
  :is(#atendimento, #parceria) .support__copy { padding: 30px 22px 26px; }
  :is(#atendimento, #parceria) .support__title { font-size: clamp(1.625rem, 7.4vw, 2rem); }
  :is(#atendimento, #parceria) .support__lead { margin-top: 14px; font-size: 1rem; }
  :is(#atendimento, #parceria) .support__full { display: none; }
  :is(#atendimento, #parceria) .support__short { display: inline; }
  :is(#atendimento, #parceria) .support__cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 24px;
  }
  /* a foto do aperto de mao e horizontal: fica mais baixa e centralizada */
  #parceria .support__photo { height: clamp(220px, 58vw, 300px); }
  #parceria .support__photo img { inset: 10px 0 0 0; object-position: center; }

  /* Hero no celular: consultora grande em cima, texto curto embaixo,
     a foto se dissolve no azul e o titulo entra sobre essa passagem */
  .hero {
    padding-top: calc(var(--header-h) + 6px);
    /* mesmo valor do --overlap dos atalhos no celular, mais um respiro */
    padding-bottom: calc(clamp(50px, 8vw, 80px) + 30px);
  }
  .hero__bg img { object-position: 60% 30%; }
  .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(10, 71, 160, .78) 0%,
      rgba(13, 92, 195, .58) 30%,
      rgba(10, 71, 160, .86) 58%,
      rgba(10, 71, 160, .98) 74%,
      #0A47A0 100%);
  }
  .hero__glow {
    top: calc(var(--header-h) + 20px);
    left: 50%; right: auto;
    width: 118vw;
    transform: translateX(-50%);
  }

  .hero__inner { gap: 0; }
  .hero__visual { order: -1; margin-top: 0; }
  .hero__person {
    width: min(100%, 440px);
    margin: 0 auto;
    filter: none;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .55) 76%, transparent 94%);
            mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .55) 76%, transparent 94%);
  }

  .hero__copy {
    position: relative;
    z-index: 3;
    margin-top: clamp(-110px, -24vw, -72px);
  }
  .hero__full { display: none; }
  .hero__short { display: inline; }
  .hero__title { font-size: clamp(2rem, 8.6vw, 2.5rem); line-height: 1.1; }
  .hero__title br { display: inline; }
  .hero__lead {
    max-width: 30ch;
    margin-top: 14px;
    font-size: 1rem;
    line-height: 1.55;
  }
  .hero__lead strong { color: var(--white); font-weight: 700; }
}

@media (max-width: 380px) {
  .chips { gap: 8px; }
  .chip { padding: 8px 14px; font-size: .8125rem; }
}

/* telas bem estreitas (320px): logo e atalhos um pouco menores para o
   header caber sem estourar a largura */
@media (max-width: 350px) {
  .brand img { height: 66px; }
  .site-header.is-scrolled .brand img { height: 56px; }
  .header-quick__link { width: 42px; height: 42px; }
  .header-quick__link .icon { width: 30px; height: 30px; }
}

/* =========================================================
   TOQUE
   ========================================================= */
/* sem mouse o :hover gruda depois do toque: o cartão ficava levantado e o
   balão do WhatsApp aberto até tocar em outro lugar. No toque nada sobe. */
@media (hover: none) {
  .btn:hover,
  .btn:hover .icon,
  .support__cta:hover .icon,
  .nav__phone:hover,
  .card:hover,
  .review:hover,
  .chip:hover,
  .social a:hover,
  .whatsapp-float:hover { transform: none; }

  .whatsapp-float:hover .icon { animation: none; }
  .whatsapp-float:hover .whatsapp-float__label { opacity: 0; transform: translate(12px, -50%); }
  /* o aperto continua respondendo ao dedo */
  .whatsapp-float:active { transform: scale(.96); }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reviews { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover,
  .card:hover,
  .review:hover,
  .chip:hover,
  .whatsapp-float:hover,
  .social a:hover { transform: none; }

  /* sem pulso nem balanço quando o sistema pede menos movimento */
  .whatsapp-float { animation: none; }
  .whatsapp-float::before,
  .whatsapp-float::after { display: none; }
  .whatsapp-float:hover .icon,
  .whatsapp-float:focus-visible .icon { animation: none; }
}

/* =========================================================
   IMPRESSÃO
   ========================================================= */
@media print {
  .site-header, .nav, .whatsapp-float, .hero__visual, .hero__bg, .wave,
  .talk__photo, .form { display: none !important; }
  body { color: #000; background: #fff; }
  .js .reveal { opacity: 1; transform: none; }
}