/* =========================================================================
   globals.css — variáveis de tema + estilos custom que o Tailwind não cobre
   bem (pincelada ::after, "fita" do quadro do hero, sombras coloridas dos
   botões, marcadores de lista, filtro de logo).
   As cores abaixo são a FONTE ÚNICA de verdade: o tailwind.config.js aponta
   theme.extend.colors para estas variáveis, então mudar uma cor aqui
   atualiza todas as classes utilitárias (bg-green, text-pepper, etc.).
   ========================================================================= */
:root {
  --ink: #1e1c19;
  --green: #3f7d34;
  --green-deep: #2c5a24;
  --pepper: #d0342c;
  --paper: #fdfcf8;
  --kraft: #f3efe4;
  --line: rgba(30, 28, 25, 0.13);
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Pincelada verde sob o texto, ecoando o script manuscrito do logo */
.brush {
  position: relative;
  display: inline-block;
}
.brush::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0.04em;
  height: 0.32em;
  background: var(--green);
  opacity: 0.25;
  z-index: -1;
  border-radius: 3px;
  transform: rotate(-0.6deg);
}

/* Quadro do hero — "fita adesiva" verde no topo (::before) */
.hero-board::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 24px;
  background: rgba(63, 125, 52, 0.22);
  border-radius: 3px;
}

/* Botões — sombras coloridas custom + hover lift */
.btn {
  box-shadow: 0 6px 16px rgba(63, 125, 52, 0.28);
  transition: transform 0.2s, background 0.2s;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-red {
  box-shadow: 0 6px 16px rgba(208, 52, 44, 0.28);
}
.btn-outline {
  box-shadow: none;
}

/* Cards de feature — hover lift */
.feat-card {
  transition: transform 0.25s, box-shadow 0.25s;
}
.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(30, 28, 25, 0.08);
}

/* Lista de diferenciais (band verde) — marcador de check */
.why-list li::before {
  content: "✓";
  color: #a8d69b;
  font-weight: 700;
}

/* Footer — logo em branco via filtro */
.footer-logo {
  filter: brightness(0) invert(1);
}