/* ═══════════ 7 · COMPONENTES REUTILIZÁVEIS — BOTÕES ═══════════ */
/* Todos seguem o mesmo padrão: fundo preenchido que desliza no hover
   revelando o texto branco por baixo. Usados em várias páginas. */

/* ── btn-ghost — CTA vazado padrão (usado em Sobre, seções diversas) ── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--brand);
  color: var(--brand); /* Cor do texto no estado vazado (hover) */
  padding: .85em 1.7em;
  border-radius: 2em;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
  background: transparent;
  transition: transform .5s ease, border-color .5s ease;
  z-index: 1;
}

/* 1. Fundo preenchido por padrão que desliza para a direita no hover */
.btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform: translateX(0);
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

/* 2. Container do texto */
.btn-ghost span {
  position: relative;
  display: inline-block;
}

/* 3. Camada de texto branco por cima (visível no estado padrão) */
.btn-ghost span::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #ffffff; /* Texto branco sobre o fundo preenchido */
  clip-path: inset(0 0% 0 0); /* Exibe o texto branco completo */
  transition: clip-path .5s cubic-bezier(0.4, 0, 0.2, 1); /* Sincronizado com o fundo (.5s) */
  white-space: nowrap;
}

/* HOVER */
.btn-ghost:hover {
  transform: translateY(-2px);
}

.btn-ghost:hover::before {
  transform: translateX(100%);
}

.btn-ghost:hover span::before {
  clip-path: inset(0 0% 0 100%);
}

.btn-ghost:hover::after {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .15s ease .3s, transform .15s ease .3s;
}

/* ── nav-cta — CTA do menu (desktop + mobile) ── */
.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--brand);
  color: var(--brand); /* Cor do texto no estado vazado (hover) */
  padding: .55em 1.3em;
  border-radius: 2em;
  background: transparent;
  transition: transform .3s ease;
  z-index: 1;
}

.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform: translateX(0);
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.nav-cta span {
  position: relative;
  display: inline-block;
}

.nav-cta span::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #ffffff;
  clip-path: inset(0 0% 0 0);
  transition: clip-path .5s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.nav-cta:hover::before {
  transform: translateX(100%);
}

.nav-cta:hover span::before {
  clip-path: inset(0 0% 0 100%);
}

/* ── hero-cta — CTA do hero cinematográfico da home ── */
.hero-cta {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.6rem;
  padding: 0.95em 2.2em;
  overflow: hidden;

  border: 1px solid var(--brand);
  color: var(--brand);
  background: transparent;
  border-radius: 2em;

  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;

  transition: transform .3s ease;
  cursor: pointer;
  z-index: 1;
}

.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform: translateX(-100%);
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.hero-cta span[data-text] {
  position: relative;
  display: inline-block;
}

.hero-cta span[data-text]::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #ffffff;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .35s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.cta-icon {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
  transition: color .15s ease;
}

/* ── btn-whats — CTA de WhatsApp (Contato, CTA da Missão) ── */
.btn-whats {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: 2.4rem;
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-weight: 500;
  padding: .9em 2em;
  border-radius: 3em;
  font-size: .95rem;
  letter-spacing: .04em;

  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .4s;
  z-index: 1;
  text-decoration: none;
}

.btn-whats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform: translateX(0);
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn-whats .cta-icon {
  flex-shrink: 0;
  color: #ffffff;
  transition: color .15s ease;
}

.btn-whats span {
  position: relative;
  display: inline-block;
}

.btn-whats span::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #ffffff;
  clip-path: inset(0 0% 0 0);
  transition: clip-path .50s cubic-bezier(0.40, 0, 0.2, 1);
  white-space: nowrap;
}

.btn-whats:hover {
  transform: translateY(-3px);
}

.btn-whats:hover::before {
  transform: translateX(100%);
}

.btn-whats:hover span::before {
  clip-path: inset(0 0% 0 100%);
}

.btn-whats:hover .cta-icon {
  color: var(--brand);
  transition: color .15s ease .3s;
}