/* =========================================================================
   globals.css — variáveis de tema + estilos custom que o Tailwind não cobre
   bem (gradientes, animações, dividers dashed, pseudo-elementos ::before).
   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-teal, text-orange, etc.).
   ========================================================================= */
:root {
  --teal-deep: #1f5449;
  --teal: #2f7a6c;
  --orange: #f0812a;
  --orange-deep: #d9631a;
  --cream: #faf4e9;
  --cream-2: #f2e9d8;
  --charcoal: #2a231c;
  --line: rgba(42, 35, 28, 0.12);
}

html {
  scroll-behavior: smooth;
}

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

/* Signature swirl divider - echoes the logo's orange swirl under the wordmark */
.swirl {
  width: 100%;
  height: 34px;
  margin: 0 auto;
  display: block;
}
.swirl path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Header com blur — backdrop-filter para o efeito de vidro fosco */
.site-header {
  background: rgba(250, 244, 233, 0.92);
  backdrop-filter: blur(6px);
}

/* Eyebrow — traço laranja antes do texto (::before) */
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
.eyebrow.is-centered::before {
  display: none;
}

/* HERO — gradientes radiais custom de fundo */
.hero-bg {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(240, 129, 42, 0.14), transparent 55%),
    radial-gradient(90% 70% at -10% 110%, rgba(47, 122, 108, 0.16), transparent 60%);
}

/* Prato decorativo do hero */
.hero-plate {
  box-shadow: inset 0 0 0 2px rgba(42, 35, 28, 0.06);
}
.hero-plate .ring {
  border: 2px dashed rgba(240, 129, 42, 0.45);
  animation: spin 40s linear infinite;
}
.hero-plate .logo-holder {
  box-shadow: 0 20px 40px rgba(31, 84, 73, 0.18);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-plate .ring {
    animation: none;
  }
}

/* Botões — sombras coloridas custom */
.btn {
  box-shadow: 0 6px 16px rgba(31, 84, 73, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(31, 84, 73, 0.32);
}
.btn-orange {
  box-shadow: 0 6px 16px rgba(240, 129, 42, 0.32);
}
/* Botão outline (CTA secundário do hero) — sem sombra, borda fina */
.btn-ghost {
  background: transparent;
  color: var(--charcoal);
  box-shadow: none;
  border: 1.5px solid var(--line);
}
.btn-ghost:hover {
  box-shadow: none;
}

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

/* GALLERY STRIP - marquee de texto */
.strip span {
  display: inline-block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.5rem;
  color: #fff;
  padding: 0 28px;
  opacity: 0.95;
}
.strip-inner {
  animation: marquee 26s linear infinite;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .strip-inner {
    animation: none;
  }
}

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