/* ================================================================
   STAHL CONTABILIDADE — REDESIGN (sem alteração de cores)
   Muda apenas: tipografia, ícones emoji, border-radius, hover effects
   e elementos decorativos genéricos que sinalizam "feito por IA".
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400;1,500&family=Karla:wght@300;400;500;600&display=swap');

/* ── TIPOGRAFIA ───────────────────────────────────────────
   Playfair Display → Cormorant Garamond (mais elegante, menos genérico)
   DM Sans → Karla (sem-serifa limpa, menos "template")
   ──────────────────────────────────────────────────────── */
body {
  font-family: 'Karla', sans-serif !important;
}

.hero-content h1,
.section-title,
.num-value,
.contato-info h2,
#cta h2,
.fundador-avatar {
  font-family: 'Cormorant Garamond', serif !important;
}

/* Headings menores também */
.servico-card h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.18rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

/* Hero h1: mais impacto, peso mais leve */
.hero-content h1 {
  font-weight: 300 !important;
  font-size: clamp(2.8rem, 6vw, 5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
}

/* Números: mais grandiosidade */
.num-value {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 3.8rem !important;
  font-weight: 300 !important;
  letter-spacing: -.03em !important;
}

/* "Contabilidade Digital" em 2 linhas com altura total = 1 linha dos números */
.num-value--split {
  font-size: 1.9rem !important;
  line-height: 1.0 !important;
  letter-spacing: -.01em !important;
}

/* Section title: menos peso, mais refinamento */
.section-title {
  font-weight: 400 !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  letter-spacing: -.01em !important;
}

/* CTA heading */
#cta h2 {
  font-weight: 300 !important;
  font-size: clamp(2.1rem, 4vw, 3.4rem) !important;
  letter-spacing: -.02em !important;
}

/* Contato heading */
.contato-info h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-size: 2.4rem !important;
  letter-spacing: -.02em !important;
}

/* Botões: fonte diferente, mais espaçamento entre letras */
.btn-primary,
.btn-outline,
.form-submit,
.nav-cta {
  font-family: 'Karla', sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-size: .78rem !important;
}

/* Nav links */
.nav-links a {
  font-family: 'Karla', sans-serif !important;
  font-size: .75rem !important;
  letter-spacing: .09em !important;
}

/* Section tags */
.section-tag {
  font-family: 'Karla', sans-serif !important;
  font-size: .68rem !important;
  letter-spacing: .16em !important;
}

/* Labels de formulário */
.form-group label {
  font-family: 'Karla', sans-serif !important;
  font-size: .7rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ── BORDER-RADIUS ────────────────────────────────────────
   Remove arredondamentos genéricos de "template"
   ──────────────────────────────────────────────────────── */
.servico-card,
.contato-form,
.contato-item,
.formacao-item,
.pilar,
.sobre-card,
.btn-primary,
.btn-outline,
.nav-cta,
.form-submit,
.form-group input,
.form-group textarea,
.form-group select,
.wa-float,
#cookie-accept,
#cookie-decline {
  border-radius: 0 !important;
}

.hero-badge { border-radius: 0 !important; }
.fundador-avatar-wrap { text-align: center !important; }
.fundador-avatar {
  border-radius: 0 !important;
  margin: 0 auto !important;   /* centraliza a foto dentro do wrapper */
}
.fundador-avatar img { border-radius: 0 !important; }
.fundador-nome  { text-align: center !important; }
.fundador-cargo { text-align: center !important; display: block; }
.servico-icon { border-radius: 0 !important; }
.formacao-icon { border-radius: 0 !important; }
.contato-item-icon { border-radius: 0 !important; }
.pilar-icon { border-radius: 0 !important; }

/* ── HOVER SEM "FLUTUAR" ──────────────────────────────────
   translateY(-5px) nos cards é clichê de template
   ──────────────────────────────────────────────────────── */
.servico-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--cyan) !important;
  background: #fff !important;
}

/* btn-primary: sem translateY */
.btn-primary:hover {
  transform: none !important;
}

/* ── HERO: REMOVE ELEMENTOS GENÉRICOS ─────────────────────
   Círculo pulsante e cross-pattern SVG são decorativos vazios
   ──────────────────────────────────────────────────────── */
.hero-visual { display: none !important; }

/* Substitui o cross-pattern SVG por grid de pontos sutil */
#hero::before {
  background-image: radial-gradient(circle, rgba(41,169,216,0.12) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  background-position: 0 0 !important;
}

/* ── ÍCONES SVG — serviços ────────────────────────────────
   JS injeta SVGs; CSS oculta emoji e estiliza o SVG injetado
   ──────────────────────────────────────────────────────── */
.servico-icon {
  width: 46px !important;
  height: 46px !important;
  background: rgba(41,169,216,.1) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;          /* oculta emoji original */
  margin-bottom: 1.3rem !important;
}

/* quando o SVG foi injetado, remove pseudo-elemento */
.servico-icon.has-svg::before { display: none !important; }

.servico-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--cyan);
  stroke: var(--cyan);
}

/* Serviços: grid com divisória em vez de gap + cards flutuantes */
.servicos-grid {
  gap: 0 !important;
  border: 1px solid var(--light-gray);
  border-right: none;
  border-bottom: none;
}

.servico-card {
  background: var(--off-white) !important;
  border: none !important;
  border-right: 1px solid var(--light-gray) !important;
  border-bottom: 1px solid var(--light-gray) !important;
  padding: 2.2rem 1.9rem !important;
  transition: background .2s !important;
}

/* ── ÍCONES SVG — formações, pilares, contato ─────────────
   JS injeta SVGs; oculta emoji original via font-size:0
   ──────────────────────────────────────────────────────── */
/* formação: oculta emoji, mostra SVG injetado */
.formacao-icon {
  font-size: 0 !important;
}
.formacao-icon.has-svg::before { display: none !important; }
.formacao-icon svg {
  width: 17px !important;
  height: 17px !important;
  stroke: var(--cyan);
}

/* pilar e contato: SVG injetado via JS */
.pilar-icon,
.contato-item-icon {
  font-size: 0 !important;
}

.pilar-icon.has-svg::before,
.contato-item-icon.has-svg::before { display: none !important; }

.contato-item-icon svg {
  width: 17px !important;
  height: 17px !important;
  stroke: var(--cyan);
}

.pilar-icon svg {
  width: 15px !important;
  height: 15px !important;
  stroke: var(--cyan-light);
}


/* ── FUNDADOR: SOMBRA DESLOCADA NO AVATAR ─────────────────
   Mais personalidade do que o box-shadow genérico
   ──────────────────────────────────────────────────────── */
.fundador-avatar {
  box-shadow: 5px 5px 0 var(--cyan) !important;
}

/* ── FORMULÁRIO ───────────────────────────────────────────
   Campos sem border-radius e com fonte consistente
   ──────────────────────────────────────────────────────── */
.form-group input,
.form-group textarea,
.form-group select {
  font-family: 'Karla', sans-serif !important;
}

/* ── LOGO NO HERO ─────────────────────────────────────────
   filter no <img>, mix-blend-mode no wrapper (evita conflito
   de stacking context que impede o screen de funcionar)
   ──────────────────────────────────────────────────────── */
.hero-logo-wrap {
  position: absolute;
  /* centra no espaço direito do hero */
  right: 0;
  left: 52%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo-img {
  width: 85%;
  max-width: 400px;
  height: auto;
  display: block;
  filter: grayscale(1) invert(1);
}

@media (max-width: 900px) {
  .hero-logo-wrap { display: none; }
}

/* ── MOBILE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .servicos-grid {
    border-right: 1px solid var(--light-gray);
  }
  .servico-card:nth-child(odd)  { border-right: 1px solid var(--light-gray) !important; }
  .servico-card:nth-child(even) { border-right: none !important; }
}

@media (max-width: 480px) {
  .servicos-grid { border: none; }
  .servico-card {
    border: 1px solid var(--light-gray) !important;
    border-bottom: none !important;
  }
  .servico-card:last-child { border-bottom: 1px solid var(--light-gray) !important; }
}

/* ================================================================
   POLÍTICA DE PRIVACIDADE — regras específicas
   ================================================================ */

/* Hero da página interna */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a6e 55%, #1a4a7a 100%) !important;
}
.page-hero h1 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  letter-spacing: -.02em !important;
}

/* Voltar link */
.nav-back {
  font-family: 'Karla', sans-serif !important;
  font-size: .75rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* Conteúdo */
.content h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  letter-spacing: -.01em !important;
  border-bottom: 1px solid var(--light-gray) !important;
}
.content p,
.content ul li {
  font-family: 'Karla', sans-serif !important;
}
.update-date {
  border-radius: 0 !important;
  font-family: 'Karla', sans-serif !important;
  font-size: .72rem !important;
  letter-spacing: .08em !important;
}

/* Caixa de contato */
.contact-box {
  border-radius: 0 !important;
  border-left: 3px solid var(--cyan) !important;
}
.contact-box h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}