:root {
  --white: #FFFFFF;
  --green: #5e604b;         /* Verde Corporativo */
  --leaf-green: #2e7d32;    /* Verde Folha */
  --leaf-green-hover: #255d28; /* Hover do Verde Folha */
  --leaf-green-light: #43a047; /* Verde Folha mais claro para títulos */
  --tan: #d7b393;            /* Tan */
  --brown-sugar: #b0714e;    /* Brown sugar */
  --gray-900: #2D2D2D;       /* Cinza Escuro */
  --gray-600: #666666;       /* Cinza Médio */
  --gray-100: #F5F5F5;       /* Cinza Claro */
}

body { font-family: 'Inter', sans-serif; background: var(--white); color: var(--gray-900); margin: 0; }

/* Canvas de partículas de fundo (folhas) */
#particles-bg {
  position: fixed;
  inset: 0;
  z-index: 0; /* acima dos backgrounds, abaixo do conteúdo */
  pointer-events: none;
}

/* Garantir que o conteúdo fique acima do canvas de partículas */
.hero-section,
.section-light,
.section-alt,
.footer,
.whatsapp-float {
  position: relative;
  z-index: 1;
}

/* Camada de partículas por seção (exceto hero) */
.section-particles {
  position: absolute;
  inset: 0;
  z-index: 0; /* abaixo do conteúdo da seção */
  pointer-events: none;
}

/* Variável para controlar o brilho do título (usada pelo anime.js no mobile) */
:root { --hero-glow: 14px; }

/* HERO - fundo com imagem hero_whatsapp_2025 e overlay escuro para legibilidade */
.hero-section {
  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    image-set(
      url('../images/corporate_meditation.webp') type('image/webp') 1x,
      url('../images/corporate_meditation.png') type('image/png') 1x
    );
  background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; position: relative; color: #fff;
}

.hero-title { font-weight: 800; letter-spacing: -0.02em; text-align: center; line-height: .95; }
.hero-title .word-1 { display: inline; color: #fff; }
.hero-title .word-2 { display: inline; color: var(--leaf-green-light); }
.hero-subtitle { color: #fff; max-width: 800px; margin: 0 auto; background: rgba(0,0,0,0.25); padding: 0.5rem 0.75rem; border-radius: 10px; margin-top: clamp(28px, 7vh, 96px); }

/* HERO — descer subtítulo apenas em desktop (>= 1024px) */
@media (min-width: 1024px) {
  .hero-subtitle { margin-top: 14vh; }
}

/* Reforço de legibilidade: sombra no texto da hero */
.hero-section .hero-title,
.hero-section .hero-subtitle,
.hero-section > p {
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* HERO — título como top-text */
.hero-title-top {
  top: 84px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  /* Sombra salmão/terra específica do título (sobrepõe a padrão) */
  text-shadow: 0 4px var(--hero-glow) var(--tan);
  /* Tamanho aproximado de 60pt e responsivo */
  font-size: clamp(40px, 10vw, 80px);
}
@media (max-width: 639px) {
  .hero-title-top { top: 84px; font-size: 70px; }
  /* Sombra do título mais próxima das palavras no mobile */
  .hero-title-top { text-shadow: 0 3px 8px var(--tan); }
  /* Palavras do título preparadas para transform */
  .hero-title .word-1,
  .hero-title .word-2 { display: inline-block; transform-origin: center; }
  /* sem animação CSS no mobile; anime.js cuida da escala */
  .hero-pulse { animation: none !important; transform: none; will-change: transform; }
  /* Descer subtítulo no mobile */
  .hero-subtitle { margin-top: 16vh !important; }
}

/* Fonte do título como Script (prioriza Story Script) */
.hero-title { font-family: 'Story Script', 'Style Script', 'Inter', cursive; }

/* Conteúdo do título preparado para animação via anime.js (sem animação CSS) */
.hero-pulse { display: inline-block; will-change: transform; backface-visibility: hidden; }

/* No mobile, desativa a animação CSS por escala para evitar artefato de camada */
@media (max-width: 639px) {
  .hero-pulse { animation: none !important; transform: none !important; will-change: auto; }
}

/* Seções claras e alternadas */
.section-light { background: var(--white); }
.section-alt { background: var(--tan); }

/* Acentos e títulos */
.text-golden { color: var(--tan); }
.text-green { color: var(--green); }
.text-justify { text-align: justify; text-align-last: left; hyphens: auto; }
.text-leaf { color: var(--leaf-green); }

/* HERO — mobile: ocupar laterais e justificar apenas top/bottom */
@media (max-width: 639px) {
  .hero-section > p:first-of-type,
  .hero-section > p:last-of-type {
    left: 5vw !important;
    right: 5vw !important;
    width: auto !important;
    transform: none !important; /* neutraliza -translate-x-1/2 */
    text-align: justify !important; /* sobrepõe .text-center */
    text-align-last: left;
    text-justify: inter-word; /* prioriza ajuste entre palavras */
    hyphens: none; /* evita hifenização */
    word-break: keep-all; /* não quebrar palavras */
    overflow-wrap: normal; /* evitar quebra forçada */
    line-height: 1.35;
  }
}

/* Cards e hovers */
.card { border: 1px solid rgba(0,0,0,0.06); background: #fff; border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }

/* Botões */
.btn-primary { background: var(--green); color: #fff; font-weight: 700; border-radius: 10px; padding: .9rem 1.25rem; }
.btn-primary:hover { background: #51533f; }
.btn-primary.btn-leaf { background: var(--leaf-green); }
.btn-primary.btn-leaf:hover { background: var(--leaf-green-hover); }
.btn-secondary { background: var(--tan); color: #2b2b2b; font-weight: 700; border-radius: 10px; padding: .9rem 1.25rem; }
.btn-secondary:hover { filter: brightness(0.95); }
.btn-primary:focus, .btn-secondary:focus, a:focus { outline: 3px solid var(--tan); outline-offset: 2px; }

/* Ícones de lista/contato */
.contact-icon { font-size: 1.15rem; color: var(--green); }

/* Float WhatsApp */
.whatsapp-float { position: fixed; right: 18px; bottom: 28px; background: var(--leaf-green); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 50; animation: pulse-scale 2.4s ease-in-out infinite; will-change: transform, box-shadow; }
.whatsapp-float:hover, .whatsapp-float:focus { transform: scale(1.05); background: var(--leaf-green-hover); animation-play-state: paused; }
.whatsapp-float i { font-size: 32px; }

@keyframes pulse-scale {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
  }
}

/* Footer */
.footer { background: var(--tan); color: var(--gray-600); }

/* Reduzir animações para usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}