/* Estilos compartilhados por todas as páginas do site. */

/* ===== Fontes da marca (entregues pelo designer, convertidas p/ woff2) ===== */
/* Grand Sapphire só tem um peso: a faixa 100–900 evita "negrito falso" do browser */
@font-face {
  font-family: "Grand Sapphire";
  src: url("fonts/grand-sapphire.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Campton";
  src: url("fonts/campton-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Campton";
  src: url("fonts/campton-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Campton";
  src: url("fonts/campton-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Campton";
  src: url("fonts/campton-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1;
}

/* Gradiente sobre a imagem do hero da home */
.hero-gradient {
  background: linear-gradient(to right, rgba(21, 29, 40, 0.92) 30%, rgba(21, 29, 40, 0.45) 100%);
}

/* Animação de revelação ao rolar a página */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Texto decorativo em movimento (página "A Banca") */
.scrolling-text {
  animation: scroll 30s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Linha animada nos cards de áreas de atuação */
.expertise-card:hover .expertise-border { width: 100%; }
.expertise-border {
  width: 0%;
  height: 1px;
  background-color: #8E5835;
  transition: width 0.4s ease;
}

/* Inputs do formulário de contato */
.custom-input {
  border: 0;
  border-bottom: 1px solid #c4c6cd;
  background: transparent;
  padding: 12px 0;
  border-radius: 0;
  width: 100%;
  transition: border-color 0.3s ease;
}
.custom-input:focus {
  outline: none;
  border-bottom: 1px solid #1F2A3C;
  box-shadow: none;
}

/* Botão flutuante do WhatsApp */
.whatsapp-float { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.whatsapp-float:hover { transform: scale(1.1); }

/* Menu mobile
   O container é flex-col, mas o JS só tira/põe a classe 'hidden'. Sem esta regra ele
   ficaria display:block ao abrir, o 'flex-col' não valeria nada e os links virariam
   inline, espremidos numa linha só. Fica em CSS (e não no toggle do JS) pra não
   depender da ordem das classes do Tailwind. Restrito ao mobile: acima de md o
   'md:hidden' do container é quem manda. */
@media (max-width: 767px) {
  #mobileMenu:not(.hidden) { display: flex; }
}