/* Zeasy — sobrescreve a paleta "primary" (roxo) do tema NextSaaS pela escala
   oficial de marca da Zeasy (tailwind.config.ts, escala "zeasy"). O tema é
   Tailwind v4: essas classes (bg-primary-500 etc.) já leem de var(--color-primary-*),
   então basta redefinir as variáveis — não precisa tocar no main.css de 500KB do template.
   O preto do tema (--color-secondary) fica como está — aprovado. */
:root, :host {
  --color-primary-50: #e6f7f4;  /* zeasy-50 */
  --color-primary-100: #4de5cd; /* zeasy-100 */
  --color-primary-200: #4de5cd; /* zeasy-200 */
  --color-primary-300: #42c7b3; /* zeasy-300 */
  --color-primary-400: #42c7b3; /* zeasy-400 */
  --color-primary-500: #39aa98; /* zeasy-500 — cor principal da marca */
  --color-primary-600: #2e8d7e; /* zeasy-600 */
}

/* Tinta de fundo verde-clarinha pra quebrar o branco entre seções — classe própria
   porque "bg-primary-50" não existe no main.css pré-compilado do tema. */
.bg-zeasy-tint {
  background-color: #e6f7f4;
}

/* Header: liso/transparente no topo da página, vira pill com vidro fosco só depois
   de rolar. O main.js já adiciona/remove ".scroll-header" no scroll (window.scrollY > 100);
   aqui é só CSS puro porque não existe variante Tailwind pré-compilada pra "quando tiver
   essa classe" no main.css do tema. */
.header-one {
  position: fixed;
  left: 50%;
  top: 20px;
  z-index: 50;
  width: calc(100% - 40px);
  max-width: 1290px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 62px;
  padding: 0 8px 0 24px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  transition: all 0.5s ease-in-out;
}

.header-one.scroll-header {
  background-color: rgb(252 252 252 / 0.7);
  border-color: #e3e7ed;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.header-one nav a,
.header-one > a {
  white-space: nowrap;
}

.header-one nav,
.header-one nav ul,
.header-one nav li {
  flex-wrap: nowrap;
  flex-shrink: 0;
}

/* Hero: print do painel. As classes em colchete do markup original
   (max-w-[300px] até 2xl:max-w-[1024px], ml-[40px]/[70px]/[120px],
   top-[5%]/left-[5%] na cópia-fantasma) nunca existiram no main.css
   pré-compilado do tema — sem CSS nenhum, a imagem virava w-full (cola
   na esquerda, sem o empurrão que deveria jogar ela pro lado direito
   no desktop, e sem teto de tamanho no mobile). CSS próprio porque não
   existe build Tailwind neste repo pra gerar essas classes. */
.hero-panel-shot {
  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 425px) {
  .hero-panel-shot { max-width: 350px; }
}

@media (min-width: 640px) {
  .hero-panel-shot { max-width: 500px; }
}

@media (min-width: 768px) {
  .hero-panel-shot { max-width: 700px; }
}

@media (min-width: 1024px) {
  .hero-panel-shot {
    max-width: 900px;
    margin-left: 40px;
    margin-right: 0;
  }
}

@media (min-width: 1280px) {
  .hero-panel-shot { margin-left: 70px; }
}

@media (min-width: 1536px) {
  .hero-panel-shot {
    max-width: 1024px;
    margin-left: 120px;
  }
}

/* Cópia fantasma (opacity-20) atrás do print real — sem o deslocamento
   top/left ela ficava empilhada embaixo do print principal em vez de
   levemente atrás dele. */
.hero-panel-shot-ghost {
  position: absolute;
  top: 5%;
  left: 5%;
}