/* =========================================================================
   JARDIM ENCANTADO PRESERVADOS — base.css
   Design System / Fundação (dono: A1)
   Verde-floresta profundo + branco + acento verde vibrante.
   Vidro esverdeado (nunca azulado/cinza). Nível editorial Awwwards.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS (:root) — nomes exatos da direção criativa
   ------------------------------------------------------------------------- */
:root {
  /* Paleta de marca */
  --je-green-950: #050F0A;   /* fundo mais profundo, overlays */
  --je-green-900: #0A1F15;   /* fundo âncora do site */
  --je-green-800: #103826;   /* painéis, cartões */
  --je-green-600: #1E5C3F;   /* detalhes, bordas ativas */
  --je-green-400: #3FA46F;   /* realces */
  --je-accent:    #62D99B;   /* verde vibrante: CTAs, brilhos, palavras-chave */
  --je-white:     #F4F7F4;   /* tipografia principal */
  --je-white-60:  rgba(244, 247, 244, .6);   /* texto secundário */

  /* Vidro esverdeado */
  --je-glass:        rgba(16, 56, 38, .32);   /* fundo de painel de vidro */
  --je-glass-border: rgba(244, 247, 244, .14);/* borda de painel de vidro */
  --je-glow:         rgba(98, 217, 155, .35); /* brilho verde */

  /* Acento escurecido (para o botão WhatsApp e CTAs pressionados) */
  --je-accent-700: #2F9E63;

  /* Tipografia */
  --je-font-display: 'Fraunces', 'Times New Roman', serif;
  --je-font-ui:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Ritmo tipográfico */
  --je-titulo-display: clamp(3rem, 9vw, 9rem);
  --je-rotulo-tec:     clamp(.625rem, .9vw, .75rem);

  /* Espaçamento / raios / transições */
  --je-radius:      20px;
  --je-radius-sm:   12px;
  --je-pad-secao:   clamp(1.5rem, 6vw, 7rem);
  --je-ease:        cubic-bezier(.22, 1, .36, 1);
  --je-ease-inout:  cubic-bezier(.65, .05, .36, 1);

  /* Índices de camada (contrato de arquitetura) */
  --z-video:    0;
  --z-foliage:  1;
  --z-overlay:  2;
  --z-particles:3;
  --z-conteudo: 10;
  --z-header:   50;
  --z-whatsapp: 60;
  --z-menu:     100;

  color-scheme: dark;
}

/* -------------------------------------------------------------------------
   2. RESET MODERNO
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--je-font-ui);
  font-weight: 400;
  line-height: 1.6;
  color: var(--je-white);
  background-color: var(--je-green-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }
:where(p, li) { max-width: 68ch; }

/* -------------------------------------------------------------------------
   3. CAMADAS DE FUNDO (contrato: vídeo z0 · folhagem z1 · overlay z2 · partículas z3)
   ------------------------------------------------------------------------- */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: var(--z-video);
  pointer-events: none;
  background-color: var(--je-green-950);
  will-change: transform;
}

/* Camada de silhuetas de folhagem em parallax (A3 popula via JS/pseudo) */
.bg-foliage {
  position: fixed;
  inset: 0;
  z-index: var(--z-foliage);
  pointer-events: none;
  overflow: hidden;
}

/* Gradiente esverdeado de legibilidade — escurece bordas e base,
   preserva o centro do vídeo (radial + linear combinados). */
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 32%,
      transparent 0%,
      rgba(5, 15, 10, .10) 46%,
      rgba(5, 15, 10, .48) 82%,
      rgba(5, 15, 10, .72) 100%),
    linear-gradient(180deg,
      rgba(10, 31, 21, .38) 0%,
      rgba(10, 31, 21, .08) 26%,
      rgba(5, 15, 10, .30) 74%,
      rgba(5, 15, 10, .66) 100%);
}

#particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-particles);
  pointer-events: none;
}

#conteudo {
  position: relative;
  z-index: var(--z-conteudo);
}

/* -------------------------------------------------------------------------
   4. TIPOGRAFIA UTILITÁRIA
   ------------------------------------------------------------------------- */
.titulo-display {
  font-family: var(--je-font-display);
  font-weight: 340;
  font-optical-sizing: auto;
  font-size: var(--je-titulo-display);
  line-height: .96;
  letter-spacing: -.02em;
  color: var(--je-white);
}
.titulo-display em,
.titulo-display .italico {
  font-style: italic;
  font-weight: 320;
  color: var(--je-accent);
}

.rotulo-tec {
  font-family: var(--je-font-ui);
  font-weight: 600;
  font-size: var(--je-rotulo-tec);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--je-white-60);
}

/* Palavra decorativa gigante em outline / baixa opacidade (ex.: JARDIM ENCANTADO) */
.texto-fundo-gigante {
  font-family: var(--je-font-display);
  font-weight: 300;
  font-size: clamp(4rem, 18vw, 20rem);
  line-height: .8;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 247, 244, .10);
  opacity: .5;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   5. VIDRO (glassmorphism esverdeado)
   ------------------------------------------------------------------------- */
.glass {
  background: var(--je-glass);
  border: 1px solid var(--je-glass-border);
  border-radius: var(--je-radius);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    0 24px 60px -30px rgba(5, 15, 10, .8),
    inset 0 1px 0 rgba(244, 247, 244, .06);
}
/* Brilho verde sutil em bordas ativas */
.glass--ativo,
.glass:where(.is-active) {
  border-color: rgba(98, 217, 155, .35);
  box-shadow:
    0 0 40px -12px var(--je-glow),
    0 24px 60px -30px rgba(5, 15, 10, .8);
}

/* -------------------------------------------------------------------------
   6. BOTÕES
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1em 1.9em;
  font-family: var(--je-font-ui);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform .5s var(--je-ease),
    box-shadow .5s var(--je-ease),
    background-color .4s var(--je-ease),
    color .4s var(--je-ease),
    border-color .4s var(--je-ease);
  will-change: transform;
}
.btn:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 3px;
}

/* Primário: acento vibrante, texto verde-profundo, glow no hover */
.btn--primario {
  background: var(--je-accent);
  color: var(--je-green-950);
  box-shadow: 0 10px 30px -14px rgba(98, 217, 155, .5);
}
.btn--primario:hover {
  background: #74e2a9;
  transform: translateY(-2px);
  box-shadow:
    0 0 44px -8px var(--je-glow),
    0 16px 40px -18px rgba(98, 217, 155, .6);
}
.btn--primario:active { transform: translateY(0); }

/* Fantasma: borda de vidro, texto branco */
.btn--fantasma {
  background: rgba(16, 56, 38, .18);
  color: var(--je-white);
  border: 1px solid var(--je-glass-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--fantasma:hover {
  border-color: rgba(98, 217, 155, .45);
  color: var(--je-accent);
  transform: translateY(-2px);
  box-shadow: 0 0 34px -14px var(--je-glow);
}
.btn--fantasma:active { transform: translateY(0); }

/* -------------------------------------------------------------------------
   7. SEÇÃO
   ------------------------------------------------------------------------- */
.secao {
  position: relative;
  z-index: var(--z-conteudo);
  min-height: 100vh;
  padding: clamp(4rem, 10vh, 8rem) var(--je-pad-secao);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   8. HEADER (estilos base — markup em partials/menu.html, dono A4)
   ------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.75rem) var(--je-pad-secao);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color .5s var(--je-ease),
    backdrop-filter .5s var(--je-ease),
    border-color .5s var(--je-ease),
    padding .5s var(--je-ease);
}
/* Ganha leve vidro ao rolar (A4/A3 alternam a classe) */
.header--scrolled {
  background: rgba(10, 31, 21, .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: var(--je-glass-border);
  padding-top: clamp(.7rem, 1.6vw, 1.1rem);
  padding-bottom: clamp(.7rem, 1.6vw, 1.1rem);
}

/* Logo: folha da marca (PNG transparente, degradê #74E2A9→#F4F7F4)
   + tipográfico "JARDIM ENCANTADO" e rótulo "PRESERVADOS" */
.header__logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  line-height: 1;
}
.header__logo-folha {
  height: clamp(2.8rem, 4.6vw, 3.6rem);
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(98, 217, 155, .25));
  transition: transform var(--dur-micro, .22s);
}
.header__logo:hover .header__logo-folha { transform: scale(1.06) rotate(-3deg); }
.header__logo-textos {
  display: inline-flex;
  flex-direction: column;
  gap: .28em;
  line-height: 1;
}
/* Slogan fixo sob o nome (verde da marca, discreto) */
.header__logo-slogan {
  font-family: var(--je-font-ui);
  font-weight: 600;
  font-size: .5rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--je-accent);
  white-space: nowrap;
}
@media (max-width: 420px) {
  /* em telas bem estreitas o slogan encolhe para não empurrar o hambúrguer */
  .header__logo-slogan { font-size: .44rem; letter-spacing: .16em; }
}
.header__logo-marca {
  font-family: var(--je-font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  letter-spacing: .02em;
  color: var(--je-white);
}
.header__logo-rotulo {
  font-family: var(--je-font-ui);
  font-weight: 600;
  font-size: .58rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--je-accent);
  margin-top: .32em;
  padding-left: .1em;
}

/* -------------------------------------------------------------------------
   9. BOTÃO FLUTUANTE WHATSAPP (dono: A1)
   ------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: var(--z-whatsapp);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--je-green-950);
  background: var(--je-accent-700);
  box-shadow:
    0 12px 30px -10px rgba(5, 15, 10, .7),
    0 0 0 0 rgba(98, 217, 155, .45);
  transition:
    transform .45s var(--je-ease),
    background-color .35s var(--je-ease),
    box-shadow .45s var(--je-ease);
  animation: je-whatsapp-pulso 2.8s var(--je-ease-inout) infinite;
}
.whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: var(--je-white);
}
.whatsapp-float:hover {
  transform: scale(1.09);
  background: var(--je-green-600);
  animation-play-state: paused;
  box-shadow:
    0 16px 40px -12px rgba(5, 15, 10, .8),
    0 0 40px -6px var(--je-glow);
}
.whatsapp-float:active { transform: scale(1.02); }
.whatsapp-float:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 4px;
}

@keyframes je-whatsapp-pulso {
  0%   { box-shadow: 0 12px 30px -10px rgba(5,15,10,.7), 0 0 0 0 rgba(98,217,155,.45); }
  70%  { box-shadow: 0 12px 30px -10px rgba(5,15,10,.7), 0 0 0 18px rgba(98,217,155,0); }
  100% { box-shadow: 0 12px 30px -10px rgba(5,15,10,.7), 0 0 0 0 rgba(98,217,155,0); }
}

/* -------------------------------------------------------------------------
   10. SCROLLBAR + SELEÇÃO
   ------------------------------------------------------------------------- */
::selection {
  background: var(--je-accent);
  color: var(--je-green-950);
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--je-green-600) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--je-green-600);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--je-green-400); background-clip: padding-box; }

/* -------------------------------------------------------------------------
   11. MEDIA QUERIES BASE (≤768px)
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .secao { padding: clamp(3rem, 8vh, 5rem) 1.25rem; }
  .whatsapp-float { width: 52px; height: 52px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .texto-fundo-gigante { -webkit-text-stroke-width: .75px; }
}

/* -------------------------------------------------------------------------
   12. MOVIMENTO REDUZIDO — desativa animações não essenciais
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .whatsapp-float { animation: none; }
}