/* ============================================================
   Marcela Zurli - base
   Paleta pastel dessaturada. Ver design/referencias.md para o porque
   de cada cor. Pastel puro NAO carrega texto: fica no fundo.
   ============================================================ */

:root {
  --cor-fundo:        #F7F4EE;  /* areia clara, quente. Nunca branco puro em area grande */
  --cor-fundo-alt:    #EFE9DF;  /* segundo fundo, para alternar secoes */
  --verde-salvia:     #A8C3B0;  /* principal, area e fundo */
  --verde-escuro:     #4A6B58;  /* texto sobre claro */
  --azul-sereno:      #AFC9D9;  /* secundaria, area */
  --azul-profundo:    #3E5C70;  /* titulos */
  --cor-acento:       #E0B98C;  /* UM acento quente, so CTA e detalhe */
  --cor-texto:        #2F3A33;
  --cor-texto-suave:  #5C665F;

  --fonte-titulo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-corpo:  'DM Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --spacing-section: clamp(64px, 10vw, 120px);
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--azul-profundo);
}

h1 { font-size: clamp(48px, 7vw, 96px); }
h2 { font-size: clamp(36px, 5vw, 64px); }
h3 { font-size: clamp(24px, 3vw, 36px); }

p, li { font-family: var(--fonte-corpo); }

/* Astra escreve CSS dinamico que ganha da cascata normal.
   Por isso os seletores abaixo sao mais especificos de proposito. */
body .ast-container h1,
body .ast-container h2,
body .ast-container h3 { font-family: var(--fonte-titulo); }

.elementor-section {
  padding-top: var(--spacing-section) !important;
  padding-bottom: var(--spacing-section) !important;
}

.secao-alt { background-color: var(--cor-fundo-alt); }
.secao-salvia { background-color: var(--verde-salvia); }
.secao-salvia h1, .secao-salvia h2, .secao-salvia h3 { color: var(--verde-escuro); }

/* Linha decorativa abaixo de titulo de secao */
.titulo-com-linha::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--cor-acento);
  margin-top: 16px;
}

/* Botao com preenchimento animado */
.elementor-button {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color .3s ease;
  border: 1.5px solid var(--azul-profundo) !important;
  background: transparent !important;
  color: var(--azul-profundo) !important;
  font-family: var(--fonte-corpo);
  letter-spacing: .04em;
}
.elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--azul-profundo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: -1;
}
.elementor-button:hover { color: var(--cor-fundo) !important; }
.elementor-button:hover::before { transform: scaleX(1); }

/* Lista numerada de servicos, no lugar de tres cards iguais */
.lista-servicos { list-style: none; margin: 0; padding: 0; counter-reset: srv; }
.lista-servicos li {
  counter-increment: srv;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(74,107,88,.22);
}
.lista-servicos li::before {
  content: '0' counter(srv);
  font-family: var(--fonte-titulo);
  font-size: 40px;
  line-height: 1;
  color: var(--cor-acento);
}

@media (max-width: 600px) {
  .lista-servicos li { grid-template-columns: 52px 1fr; gap: 16px; }
  .lista-servicos li::before { font-size: 30px; }
}

/* Acessibilidade: quem pediu menos movimento nao leva animacao */
@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .elementor-button::before { transition: none; }
}