/* ==========================================================================
   ESTRATÉGIA CSST — Consultoria em Segurança e Saúde no Trabalho
   Folha de estilos principal
   --------------------------------------------------------------------------
   Sumário:
   1.  Variáveis de marca (tokens)
   2.  Reset & base
   3.  Tipografia
   4.  Layout & utilitários
   5.  Botões
   6.  Header / Navegação
   7.  Hero
   8.  Seção: Serviços + Documentos Técnicos
   9.  Seção: eSocial
   10. Seção: Diferenciais
   11. Seção: Como Funciona (timeline)
   12. Seção: Sobre
   13. Seção: Números (contadores)
   14. Seção: FAQ (accordion)
   15. Seção: Contato (formulário + mapa)
   16. Rodapé
   17. Botões flutuantes (WhatsApp / Voltar ao topo)
   18. Responsividade
   ========================================================================== */

/* ==========================================================================
   1. VARIÁVEIS DE MARCA
   Paleta extraída diretamente da logo da Estratégia CSST.
   ========================================================================== */
:root {
  /* --- Cores institucionais --- */
  --verde-escuro-2: #082c1a;   /* verde mais profundo (fim de gradientes)   */
  --verde-escuro: #0b3d25;     /* verde escuro principal da marca           */
  --verde-primario: #0e4d30;   /* verde escuro usado em botões/destaques    */
  --verde-medio: #166039;      /* verde intermediário (gradientes, ícones)  */
  --verde-claro: #3fae68;      /* verde vivo — links, hover, checks         */
  --verde-suave: #e8f4ec;      /* verde muito claro — fundos de badges      */
  --verde-suave-2: #f4faf6;    /* verde quase branco — fundo de seções      */
  --amarelo: #f0b400;          /* amarelo do capacete — apenas detalhes     */
  --amarelo-suave: #fdf3d9;    /* amarelo claro — fundos de destaque sutil  */
  --branco: #ffffff;
  --cinza-claro: #f6f8f7;      /* fundo alternado de seções                 */
  --cinza-borda: #e2e8e5;      /* bordas sutis                              */
  --cinza-texto: #5c6d65;      /* texto secundário (verde-acinzentado)      */
  --texto: #11211a;            /* texto principal (quase preto, tom verde)  */

  /* --- Gradientes --- */
  --gradiente-hero: linear-gradient(150deg, var(--verde-primario) 0%, var(--verde-escuro) 48%, var(--verde-escuro-2) 100%);
  --gradiente-verde: linear-gradient(120deg, var(--verde-claro) 0%, var(--verde-medio) 100%);
  --gradiente-suave: linear-gradient(180deg, var(--verde-suave-2) 0%, var(--branco) 100%);

  /* --- Tipografia --- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* --- Espaçamento --- */
  --section-padding-y: clamp(4.5rem, 9vw, 8rem);
  --section-padding-y-sm: clamp(3rem, 6vw, 5rem);
  --container-width: 1264px;
  --container-padding: clamp(1.25rem, 5vw, 2.5rem);

  /* --- Raio de borda --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* --- Sombras --- */
  --shadow-sm: 0 2px 10px rgba(11, 61, 37, 0.06);
  --shadow-md: 0 12px 32px rgba(11, 61, 37, 0.09);
  --shadow-lg: 0 24px 60px rgba(11, 61, 37, 0.14);
  --shadow-hover: 0 30px 70px rgba(11, 61, 37, 0.2);
  --shadow-botao: 0 14px 30px rgba(14, 77, 48, 0.28);

  /* --- Transições --- */
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s ease;

  /* --- Altura do header (usada para offset de âncoras) --- */
  --header-height: 84px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

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

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background-color: var(--branco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

ul,
ol {
  list-style: none;
}

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

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

svg {
  display: block;
}

/* --- Foco visível (acessibilidade de teclado) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--amarelo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Link "pular para o conteúdo" --- */
.pular-conteudo {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--verde-escuro);
  color: var(--branco);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  z-index: 10000;
  font-weight: 600;
  transition: top var(--transition-fast);
}

.pular-conteudo:focus {
  top: 1rem;
}

/* --- Seleção de texto --- */
::selection {
  background: var(--verde-claro);
  color: var(--branco);
}

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--verde-escuro);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.35rem, 4.4vw, 3.85rem);
  font-weight: 600;
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
}

p {
  color: var(--cinza-texto);
}

.texto-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--cinza-texto);
  line-height: 1.7;
}

/* --- Cabeçalho de seção (eyebrow + título + descrição) --- */
.cabecalho-secao {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cabecalho-secao.centralizado {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-claro);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--amarelo);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.cabecalho-secao.centralizado .eyebrow {
  justify-content: center;
}

.cabecalho-secao h2 {
  margin-bottom: 1.1rem;
}

.cabecalho-secao p {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
}

/* ==========================================================================
   4. LAYOUT & UTILITÁRIOS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.secao {
  padding-block: var(--section-padding-y);
  position: relative;
}

.secao--sm {
  padding-block: var(--section-padding-y-sm);
}

.bg-clara {
  background-color: var(--cinza-claro);
}

.bg-branca {
  background-color: var(--branco);
}

.bg-verde {
  background: var(--gradiente-hero);
  color: var(--branco);
}

.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;
}

.divisor-secoes {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cinza-borda) 50%, transparent);
  border: none;
}

/* Padrão técnico de grade — usado como textura de fundo (referência ao caráter
   técnico dos laudos e documentos elaborados pela empresa) */
.textura-grade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

/* ==========================================================================
   5. BOTÕES
   ========================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 1rem 1.85rem;
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  border: 1.5px solid transparent;
}

.botao:active {
  transform: translateY(1px) scale(0.99);
}

.botao--primario {
  background: var(--amarelo);
  color: var(--verde-escuro);
  box-shadow: var(--shadow-botao);
}

.botao--primario:hover {
  background: #ffc72c;
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(240, 180, 0, 0.32);
}

.botao--secundario {
  background: rgba(255, 255, 255, 0.08);
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
}

.botao--secundario:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-3px);
}

.botao--escuro {
  background: var(--verde-primario);
  color: var(--branco);
  box-shadow: 0 14px 30px rgba(14, 77, 48, 0.22);
}

.botao--escuro:hover {
  background: var(--verde-escuro);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(14, 77, 48, 0.3);
}

.botao--whatsapp {
  background: #25d366;
  color: var(--branco);
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.32);
}

.botao--whatsapp:hover {
  background: #21bd5a;
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(37, 211, 102, 0.4);
}

.botao--bloco {
  width: 100%;
}

.botao--grande {
  padding: 1.1rem 2.2rem;
  font-size: 1.02rem;
}

/* ==========================================================================
   6. HEADER / NAVEGAÇÃO
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding-block: 1.35rem;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.header.header--rolado {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 28px rgba(11, 61, 37, 0.08);
  padding-block: 0.85rem;
}

/* --- Logo --- */
.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  z-index: 10;
}

.marca__icone {
  width: 46px;
  height: auto;
  transition: width var(--transition);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

.header--rolado .marca__icone {
  width: 42px;
}

.marca__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.marca__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--branco);
  letter-spacing: 0.01em;
  transition: color var(--transition);
}

.marca__slogan {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition);
  margin-top: 2px;
}

.header--rolado .marca__nome {
  color: var(--verde-escuro);
}

.header--rolado .marca__slogan {
  color: var(--cinza-texto);
}

/* --- Navegação principal --- */
.nav-principal {
  display: flex;
  align-items: center;
  gap: 2.1rem;
}

.nav-principal__link {
  position: relative;
  font-size: 0.94rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  padding-block: 0.4rem;
  transition: color var(--transition-fast);
}

.nav-principal__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--amarelo);
  border-radius: var(--radius-full);
  transition: width var(--transition-fast);
}

.nav-principal__link:hover,
.nav-principal__link:focus-visible,
.nav-principal__link.ativo {
  color: var(--branco);
}

.header--rolado .nav-principal__link {
  color: var(--texto);
}

.header--rolado .nav-principal__link:hover,
.header--rolado .nav-principal__link:focus-visible,
.header--rolado .nav-principal__link.ativo {
  color: var(--verde-primario);
}

.nav-principal__link:hover::after,
.nav-principal__link:focus-visible::after,
.nav-principal__link.ativo::after {
  width: 100%;
}

.header__acoes {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header__acoes .botao {
  padding: 0.75rem 1.4rem;
  font-size: 0.9rem;
}

/* --- Botão hambúrguer (mobile) --- */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  z-index: 1100;
  border-radius: var(--radius-sm);
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--branco);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}

.header--rolado .menu-toggle span {
  background: var(--verde-escuro);
}

.menu-aberto .menu-toggle span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.menu-aberto .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.menu-aberto .menu-toggle span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.menu-aberto .menu-toggle span {
  background: var(--verde-escuro) !important;
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--gradiente-hero);
  overflow: hidden;
  padding-top: var(--header-height);
  isolation: isolate;
}

/* Camadas decorativas com efeito parallax */
.hero__camada {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.hero__mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
}

.hero__mancha--1 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--verde-claro), transparent 70%);
  top: -140px;
  right: -80px;
}

.hero__mancha--2 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, var(--amarelo), transparent 72%);
  bottom: -120px;
  left: 6%;
  opacity: 0.14;
}

.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 4rem);
}

.hero__conteudo {
  color: var(--branco);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  padding: 0.5rem 1rem 0.5rem 0.7rem;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 1.6rem;
}

.hero__eyebrow .ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amarelo);
  box-shadow: 0 0 0 3px rgba(240, 180, 0, 0.28);
  flex-shrink: 0;
}

.hero__titulo {
  color: var(--branco);
  font-weight: 600;
  margin-bottom: 1.5rem;
  max-width: 15ch;
}

.hero__titulo em {
  font-style: normal;
  color: var(--amarelo);
}

.hero__texto {
  color: rgba(237, 245, 240, 0.88);
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  max-width: 46ch;
  margin-bottom: 2.3rem;
  line-height: 1.7;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.75rem;
}

.hero__indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.25rem;
}

.hero__indicador {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.hero__indicador i {
  color: var(--amarelo);
  font-size: 1.05rem;
}

.hero__indicador span {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

/* --- Composição gráfica: selo/medidor de conformidade (elemento-assinatura) --- */
.hero__grafico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin-inline: auto;
}

/* Anéis de marcações técnicas — remetem à precisão de laudos e medições (dial).
   Apenas os anéis giram; logo e cartão permanecem estáticos/legíveis. */
.hero__ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(255, 255, 255, 0.55) 0deg 1.1deg,
    transparent 1.1deg 9deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 0%, transparent 85%, black 87%, black 92%, transparent 94%);
  mask-image: radial-gradient(circle, transparent 0%, transparent 85%, black 87%, black 92%, transparent 94%);
  animation: girar-lento 100s linear infinite;
}

.hero__ticks--interna {
  inset: 11%;
  background: repeating-conic-gradient(
    rgba(240, 180, 0, 0.65) 0deg 1.6deg,
    transparent 1.6deg 30deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 0%, transparent 80%, black 83%, black 90%, transparent 93%);
  mask-image: radial-gradient(circle, transparent 0%, transparent 80%, black 83%, black 90%, transparent 93%);
  animation: girar-lento-inverso 70s linear infinite;
}

@keyframes girar-lento {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes girar-lento-inverso {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__ticks,
  .hero__ticks--interna { animation: none; }
}

.hero__anel-central {
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
}

.hero__grafico .marca__icone-grande {
  position: absolute;
  width: 34%;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.35));
  animation: flutuar 6s ease-in-out infinite;
}

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.hero__cartao-flutuante {
  position: absolute;
  bottom: 6%;
  left: -6%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: flutuar 5s ease-in-out infinite;
  animation-delay: -1.5s;
}

.hero__cartao-flutuante i {
  color: var(--amarelo);
  font-size: 1.4rem;
}

.hero__cartao-flutuante strong {
  display: block;
  color: var(--branco);
  font-family: var(--font-display);
  font-size: 1rem;
}

.hero__cartao-flutuante span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.76rem;
}

/* --- Indicador de scroll --- */
.hero__scroll {
  position: absolute;
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.65);
}

.hero__scroll span {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.hero__scroll-mouse {
  width: 22px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.hero__scroll-mouse::before {
  content: '';
  width: 3px;
  height: 7px;
  background: var(--amarelo);
  border-radius: var(--radius-full);
  animation: rolar 1.8s ease-in-out infinite;
}

@keyframes rolar {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

/* ==========================================================================
   8. SERVIÇOS + DOCUMENTOS TÉCNICOS
   ========================================================================== */
.servicos__intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}

.servicos__subgrupo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 3rem 2rem;
}

.servicos__subgrupo:first-of-type {
  margin-top: 0;
}

.servicos__subgrupo h3 {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.servicos__subgrupo h3 i {
  color: var(--verde-claro);
  font-size: 1.1rem;
}

.servicos__subgrupo-linha {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--cinza-borda), transparent);
}

.grade-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.grade-servicos--documentos {
  grid-template-columns: repeat(4, 1fr);
}

.grade-servicos--gestao {
  grid-template-columns: repeat(3, 1fr);
}

.cartao-servico {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius-lg);
  padding: 2.1rem 1.85rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}

.cartao-servico::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradiente-verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.cartao-servico:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

.cartao-servico:hover::before {
  transform: scaleX(1);
}

.cartao-servico__icone {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--verde-suave);
  color: var(--verde-primario);
  border-radius: var(--radius-md);
  font-size: 1.4rem;
  margin-bottom: 1.35rem;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.cartao-servico:hover .cartao-servico__icone {
  background: var(--gradiente-verde);
  color: var(--branco);
  transform: scale(1.08) rotate(-4deg);
}

.cartao-servico__titulo {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--verde-escuro);
  margin-bottom: 0.6rem;
}

.cartao-servico__texto {
  font-size: 0.92rem;
  color: var(--cinza-texto);
  line-height: 1.6;
}

/* CTA ao final da seção de serviços */
.servicos__cta {
  margin-top: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--verde-suave-2);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius-lg);
  padding: 2rem 2.4rem;
}

.servicos__cta p {
  color: var(--verde-escuro);
  font-weight: 500;
  font-size: 1.05rem;
  max-width: 46ch;
}

.servicos__cta strong {
  color: var(--verde-primario);
}

/* ==========================================================================
   9. ESOCIAL
   ========================================================================== */
.esocial {
  position: relative;
  overflow: hidden;
}

.grade-esocial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.cartao-esocial {
  background: var(--branco);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.1rem;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--verde-claro);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cartao-esocial:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.cartao-esocial__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.cartao-esocial__codigo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--verde-primario);
  letter-spacing: -0.01em;
}

.cartao-esocial__icone {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--verde-suave);
  color: var(--verde-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.cartao-esocial__titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--verde-escuro);
  margin-bottom: 0.75rem;
}

.cartao-esocial__texto {
  font-size: 0.93rem;
  color: var(--cinza-texto);
  line-height: 1.65;
  margin-bottom: 1.4rem;
}

.cartao-esocial__lista {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--cinza-borda);
}

.cartao-esocial__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--cinza-texto);
}

.cartao-esocial__lista i {
  color: var(--verde-claro);
  font-size: 0.8rem;
  margin-top: 0.3rem;
  flex-shrink: 0;
}

/* ==========================================================================
   10. DIFERENCIAIS
   ========================================================================== */
.diferenciais {
  position: relative;
  background: var(--gradiente-hero);
  color: var(--branco);
  overflow: hidden;
}

.diferenciais .cabecalho-secao h2,
.diferenciais .cabecalho-secao p {
  color: var(--branco);
}

.diferenciais .cabecalho-secao p {
  color: rgba(237, 245, 240, 0.78);
}

.grade-diferenciais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.cartao-diferencial {
  position: relative;
  padding: 2.3rem 1.9rem;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.cartao-diferencial:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(240, 180, 0, 0.4);
}

.cartao-diferencial__selo {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1.5px dashed rgba(240, 180, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
  position: relative;
}

.cartao-diferencial__selo::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(240, 180, 0, 0.12);
}

.cartao-diferencial__selo i {
  position: relative;
  z-index: 1;
  color: var(--amarelo);
  font-size: 1.35rem;
}

.cartao-diferencial__titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  margin-bottom: 0.6rem;
  color: var(--branco);
}

.cartao-diferencial__texto {
  font-size: 0.9rem;
  color: rgba(237, 245, 240, 0.75);
  line-height: 1.6;
}

/* ==========================================================================
   11. COMO FUNCIONA (TIMELINE)
   ========================================================================== */
.timeline {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--cinza-borda) 0,
    var(--cinza-borda) 8px,
    transparent 8px,
    transparent 16px
  );
  transform: translateX(-50%);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  gap: 0 clamp(1.25rem, 3vw, 2.75rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.timeline__item:last-child {
  margin-bottom: 0;
}

.timeline__marcador {
  grid-column: 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--branco);
  border: 2px solid var(--verde-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--verde-primario);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 2;
  justify-self: center;
}

.timeline__card {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.85rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.timeline__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.timeline__item:nth-child(odd) .timeline__card {
  grid-column: 1;
  text-align: right;
}

.timeline__item:nth-child(odd) .timeline__vazio {
  grid-column: 3;
}

.timeline__item:nth-child(even) .timeline__card {
  grid-column: 3;
  text-align: left;
}

.timeline__item:nth-child(even) .timeline__vazio {
  grid-column: 1;
}

.timeline__numero-fantasma {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--verde-claro);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  display: block;
}

.timeline__titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--verde-escuro);
  margin-bottom: 0.4rem;
}

.timeline__texto {
  font-size: 0.9rem;
  color: var(--cinza-texto);
  line-height: 1.55;
}

/* ==========================================================================
   12. SOBRE
   ========================================================================== */
.sobre .container {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* --- Composição gráfica (sem fotografia — selo institucional em destaque) --- */
.sobre__grafico {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
}

.sobre__anel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gradiente-suave);
  border: 1px solid var(--cinza-borda);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}

.sobre__anel::before {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1.5px dashed var(--verde-suave);
}

.sobre__anel img {
  width: 46%;
  filter: drop-shadow(0 14px 26px rgba(11, 61, 37, 0.22));
}

.sobre__badge-flutuante {
  position: absolute;
  bottom: 4%;
  right: -8%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 1rem 1.3rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.sobre__badge-flutuante i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradiente-verde);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.sobre__badge-flutuante strong {
  display: block;
  font-family: var(--font-display);
  color: var(--verde-escuro);
  font-size: 1.05rem;
}

.sobre__badge-flutuante span {
  font-size: 0.76rem;
  color: var(--cinza-texto);
}

.sobre__badge-topo {
  position: absolute;
  top: 2%;
  left: -10%;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius-md);
  padding: 0.7rem 1.1rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--verde-primario);
}

.sobre__badge-topo i {
  color: var(--amarelo);
}

/* --- Conteúdo textual --- */
.sobre__conteudo p {
  margin-bottom: 1.15rem;
  line-height: 1.75;
}

.sobre__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 1.5rem;
  margin-block: 1.75rem 2.25rem;
}

.sobre__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--texto);
}

.sobre__lista i {
  color: var(--branco);
  background: var(--verde-claro);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.sobre__assinatura {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cinza-borda);
}

.sobre__assinatura-icone {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--verde-suave);
  color: var(--verde-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.sobre__assinatura strong {
  display: block;
  font-family: var(--font-display);
  color: var(--verde-escuro);
  font-size: 0.98rem;
}

.sobre__assinatura span {
  font-size: 0.85rem;
  color: var(--cinza-texto);
}

/* ==========================================================================
   13. NÚMEROS (CONTADORES EM ANEL)
   ========================================================================== */
.numeros {
  position: relative;
  background: var(--verde-escuro-2);
  overflow: hidden;
}

.grade-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.numero-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
}

.numero-item__anel {
  position: relative;
  width: 128px;
  height: 128px;
}

.numero-item__anel svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.numero-item__anel circle {
  fill: none;
  stroke-width: 6;
}

.numero-item__anel .trilho {
  stroke: rgba(255, 255, 255, 0.1);
}

.numero-item__anel .progresso {
  stroke: var(--amarelo);
  stroke-linecap: round;
  stroke-dasharray: 345;
  stroke-dashoffset: 345;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.numero-item__valor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--branco);
}

.numero-item__rotulo {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(237, 245, 240, 0.8);
  max-width: 16ch;
}

/* ==========================================================================
   14. FAQ (ACCORDION)
   ========================================================================== */
.faq {
  position: relative;
}

.faq .container {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.faq__lateral {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.faq__lateral .cabecalho-secao {
  margin-bottom: 1.75rem;
}

.faq__ajuda {
  background: var(--verde-suave-2);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.faq__ajuda p {
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
}

.acordeao {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.acordeao__item {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.acordeao__item.ativo {
  border-color: var(--verde-claro);
  box-shadow: var(--shadow-md);
}

.acordeao__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.35rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--verde-escuro);
}

.acordeao__pergunta .num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--verde-claro);
  margin-right: 0.75rem;
}

.acordeao__icone {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--verde-suave);
  color: var(--verde-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}

.acordeao__item.ativo .acordeao__icone {
  transform: rotate(45deg);
  background: var(--verde-primario);
  color: var(--branco);
}

.acordeao__resposta {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
}

.acordeao__resposta-interna {
  padding: 0 1.6rem 1.5rem 1.6rem;
  color: var(--cinza-texto);
  font-size: 0.94rem;
  line-height: 1.7;
}

/* ==========================================================================
   15. CONTATO (FORMULÁRIO + MAPA)
   ========================================================================== */
.contato {
  position: relative;
  background: var(--cinza-claro);
}

.contato .container {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.contato__info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contato__cartao {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  transition: transform var(--transition), box-shadow var(--transition);
}

.contato__cartao:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.contato__cartao-icone {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradiente-verde);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.contato__cartao strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--verde-escuro);
  margin-bottom: 0.15rem;
}

.contato__cartao span,
.contato__cartao a {
  font-size: 0.9rem;
  color: var(--cinza-texto);
}

.contato__cartao a:hover {
  color: var(--verde-primario);
}

.contato__mapa {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--cinza-borda);
  box-shadow: var(--shadow-sm);
  margin-top: 0.25rem;
}

.contato__mapa iframe {
  width: 100%;
  height: 230px;
  border: 0;
  display: block;
  filter: grayscale(15%);
}

/* --- Formulário --- */
.formulario {
  background: var(--branco);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--cinza-borda);
}

.formulario__topo {
  margin-bottom: 1.75rem;
}

.formulario__topo h3 {
  color: var(--verde-escuro);
  margin-bottom: 0.5rem;
}

.formulario__topo p {
  font-size: 0.92rem;
}

.formulario__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
}

.campo.campo--total {
  grid-column: 1 / -1;
}

.campo label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--verde-escuro);
}

.campo label .opcional {
  font-weight: 400;
  color: var(--cinza-texto);
  text-transform: none;
  letter-spacing: 0;
}

.campo input,
.campo textarea {
  border: 1.5px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  background: var(--cinza-claro);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.campo input:hover,
.campo textarea:hover {
  border-color: #c7d3ce;
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verde-claro);
  background: var(--branco);
  box-shadow: 0 0 0 4px rgba(63, 174, 104, 0.14);
}

.campo textarea {
  resize: vertical;
  min-height: 130px;
}

.campo__erro {
  font-size: 0.78rem;
  color: #c0392b;
  min-height: 1em;
}

.campo.invalido input,
.campo.invalido textarea {
  border-color: #c0392b;
}

.formulario__rodape {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}

.formulario__privacidade {
  font-size: 0.78rem;
  color: var(--cinza-texto);
  text-align: center;
}

.formulario__status {
  font-size: 0.88rem;
  text-align: center;
  min-height: 1.3em;
  font-weight: 500;
}

.formulario__status.sucesso {
  color: var(--verde-primario);
}

.formulario__status.erro {
  color: #c0392b;
}

/* ==========================================================================
   16. RODAPÉ
   ========================================================================== */
.rodape {
  background: var(--verde-escuro-2);
  color: rgba(237, 245, 240, 0.82);
  position: relative;
  overflow: hidden;
}

.rodape__topo {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.9fr 1fr;
  gap: 3rem;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 3rem;
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.25rem;
}

.rodape__marca img {
  width: 44px;
}

.rodape__marca strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--branco);
}

.rodape__marca span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}

.rodape__coluna p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(237, 245, 240, 0.7);
  max-width: 32ch;
}

.rodape__redes {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.rodape__redes a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.rodape__redes a:hover {
  background: var(--verde-claro);
  border-color: var(--verde-claro);
  transform: translateY(-3px);
}

.rodape__titulo {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 1.4rem;
}

.rodape__links {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.rodape__links a {
  font-size: 0.9rem;
  color: rgba(237, 245, 240, 0.72);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.rodape__links a:hover {
  color: var(--branco);
  padding-left: 4px;
}

.rodape__contato-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  font-size: 0.9rem;
}

.rodape__contato-item i {
  color: var(--amarelo);
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
}

.rodape__contato-item a,
.rodape__contato-item span {
  color: rgba(237, 245, 240, 0.78);
}

.rodape__contato-item a:hover {
  color: var(--branco);
}

.rodape__base {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: rgba(237, 245, 240, 0.55);
}

.rodape__base a {
  color: rgba(237, 245, 240, 0.7);
}

.rodape__base a:hover {
  color: var(--branco);
}

.rodape__selo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ==========================================================================
   17. BOTÕES FLUTUANTES
   ========================================================================== */
.flutuante-whatsapp {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 60px;
  height: 60px;
  background: #25d366;
  color: var(--branco);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
  z-index: 900;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.flutuante-whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  animation: pulsar 2.4s ease-out infinite;
  z-index: -1;
}

@keyframes pulsar {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}

.flutuante-whatsapp:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 16px 36px rgba(37, 211, 102, 0.55);
}

.flutuante-topo {
  position: fixed;
  bottom: 26px;
  right: 98px;
  width: 48px;
  height: 48px;
  background: var(--branco);
  color: var(--verde-primario);
  border: 1px solid var(--cinza-borda);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: var(--shadow-md);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.flutuante-topo.visivel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.flutuante-topo:hover {
  background: var(--verde-primario);
  color: var(--branco);
}

/* ==========================================================================
   18. RESPONSIVIDADE
   ========================================================================== */

/* --------------------------------------------------------------------
   ≤ 1199px — Laptops pequenos / desktops estreitos
   -------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .grade-servicos--documentos {
    grid-template-columns: repeat(3, 1fr);
  }

  .rodape__topo {
    grid-template-columns: 1.2fr 0.8fr 1fr;
  }

  .rodape__coluna:nth-child(2) {
    grid-column: 1;
  }

  .hero__cartao-flutuante {
    left: 0;
  }

  .sobre__badge-topo {
    left: 0;
  }

  .sobre__badge-flutuante {
    right: 0;
  }
}

/* --------------------------------------------------------------------
   ≤ 991px — Tablets
   -------------------------------------------------------------------- */
@media (max-width: 991px) {
  :root {
    --header-height: 74px;
  }

  /* Navegação mobile */
  .menu-toggle {
    display: flex;
  }

  .header__acoes .botao span {
    display: none;
  }

  .header__acoes .botao {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
  }

  .nav-principal {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--branco);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.1rem;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
  }

  .menu-aberto .nav-principal {
    transform: translateX(0);
  }

  .nav-principal__link {
    color: var(--verde-escuro) !important;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
  }

  .nav-principal__link::after {
    background: var(--verde-claro);
  }

  .menu-aberto {
    overflow: hidden;
  }

  .nav-principal__cta {
    margin-top: 1rem;
  }

  /* Hero */
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: 2.5rem 3.5rem;
  }

  .hero__titulo {
    max-width: none;
    margin-inline: auto;
  }

  .hero__texto {
    margin-inline: auto;
  }

  .hero__acoes,
  .hero__indicadores {
    justify-content: center;
  }

  .hero__grafico {
    max-width: 320px;
    margin-top: 1rem;
  }

  /* Serviços / eSocial / Diferenciais */
  .grade-servicos--documentos,
  .grade-servicos--gestao {
    grid-template-columns: repeat(2, 1fr);
  }

  .grade-esocial {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .grade-diferenciais {
    grid-template-columns: repeat(2, 1fr);
  }

  .servicos__cta {
    flex-direction: column;
    text-align: center;
  }

  /* Timeline vira coluna única */
  .timeline::before {
    left: 29px;
  }

  .timeline__item {
    grid-template-columns: 58px 1fr;
  }

  .timeline__marcador {
    grid-column: 1;
    grid-row: 1;
  }

  .timeline__item:nth-child(odd) .timeline__card,
  .timeline__item:nth-child(even) .timeline__card {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }

  .timeline__item:nth-child(odd) .timeline__vazio,
  .timeline__item:nth-child(even) .timeline__vazio {
    display: none;
  }

  /* Sobre */
  .sobre .container {
    grid-template-columns: 1fr;
  }

  .sobre__grafico {
    max-width: 320px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
  }

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

  /* Números */
  .grade-numeros {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 3rem;
  }

  /* FAQ */
  .faq .container {
    grid-template-columns: 1fr;
  }

  .faq__lateral {
    position: static;
  }

  /* Contato */
  .contato .container {
    grid-template-columns: 1fr;
  }

  /* Rodapé */
  .rodape__topo {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .rodape__coluna:nth-child(2) {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------
   ≤ 767px — Celulares grandes
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .grade-servicos--documentos,
  .grade-servicos--gestao,
  .grade-diferenciais {
    grid-template-columns: 1fr;
  }

  .servicos__subgrupo {
    margin-block: 2.25rem 1.5rem;
  }

  .servicos__intro {
    align-items: flex-start;
  }

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

  .formulario {
    padding: 1.5rem;
  }

  .rodape__topo {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: left;
  }

  .rodape__base {
    flex-direction: column;
    text-align: center;
  }

  .flutuante-whatsapp {
    width: 54px;
    height: 54px;
    font-size: 1.5rem;
    bottom: 18px;
    right: 18px;
  }

  .flutuante-topo {
    width: 42px;
    height: 42px;
    bottom: 18px;
    right: 82px;
  }
}

/* --------------------------------------------------------------------
   ≤ 575px — Celulares pequenos
   -------------------------------------------------------------------- */
@media (max-width: 575px) {
  .hero__acoes {
    flex-direction: column;
    width: 100%;
  }

  .hero__acoes .botao {
    width: 100%;
  }

  .hero__indicadores {
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
  }

  .grade-numeros {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .cartao-servico,
  .cartao-esocial,
  .timeline__card {
    padding: 1.6rem 1.4rem;
  }

  .sobre__badge-flutuante {
    right: 0;
    left: 0;
    margin-inline: auto;
    width: max-content;
  }

  .marca__slogan {
    display: none;
  }
}

/* ==========================================================================
   19. IMPRESSÃO (opcional, refinamento de qualidade)
   ========================================================================== */
@media print {
  .header,
  .flutuante-whatsapp,
  .flutuante-topo,
  .hero__scroll {
    display: none !important;
  }
}