/* Base Styles & Typography */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Header & Navigation */
.header-fixed {
  @apply fixed w-full z-50 transition-all duration-300;
}

.nav-link {
  @apply text-gray-700 hover:text-black transition-colors font-medium;
}

.mobile-menu {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.active {
  transform: translateY(0);
}

/* Inverte o fundo do header de branco para preto */
header {
  background-color: #000 !important; /* Preto */
  backdrop-filter: blur(4px);
}

/* Inverte as cores dos links de navegação de cinza escuro para branco/cinza claro */
header .nav-link,
header a {
  color: #e5e5e5 !important; /* Cinza muito claro, quase branco */
}

header .nav-link:hover,
header a:hover {
  color: #ffffff !important; /* Branco puro no hover */
}

/* Inverte o botão de "Orçamento Grátis" para fundo branco e texto preto */
header button {
  background-color: #ffffff !important; /* Branco */
  color: #000000 !important; /* Preto */
}

header button:hover {
  background-color: #e5e5e5 !important; /* Cinza claro no hover */
  color: #000000 !important; /* Mantém o texto preto */
}

/* Inverte o ícone do menu mobile para branco */
header #menuButton i {
  color: #ffffff !important;
}

/* Ajusta a cor da sombra para ser mais visível sobre o fundo preto */
header.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Ajusta o menu mobile para ter fundo preto */
#mobileMenu {
  background-color: #000000 !important;
  border-top-color: #333333 !important;
}

/* Inverte a cor do logo para branco */
header img.logo-invert {
  filter: invert(1) brightness(1.1);
}

/* Ajusta a opacidade do header quando com scroll */
header.bg-white\/95 {
  background-color: rgba(0, 0, 0, 0.95) !important;
}

/* Portfolio Section */
.portfolio-container {
  @apply relative;
}

.portfolio-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.portfolio-item {
  @apply border-b pb-4;
  transition: transform 0.3s ease;
  display: block;
}

.portfolio-item img {
  @apply w-full h-64 object-cover transition-all duration-300;
  filter: grayscale(100%);
}

.portfolio-item:hover img {
  filter: grayscale(0%);
}

.portfolio-item:hover {
  transform: translateY(-5px);
}

.filter-btn {
  @apply px-4 py-2 transition-all duration-300;
  border-bottom: 2px solid transparent;
}

.filter-btn.active {
  border-bottom: 2px solid black;
}

.filter-btn:hover:not(.active) {
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

/* Portfolio Navigation */
.page-number {
  @apply px-3 py-1 cursor-pointer transition-all duration-300;
}

.page-number.active {
  @apply bg-black text-white;
}

/* Navigation Controls */
.nav-button {
  @apply px-4 py-2 border border-black transition-all duration-300;
}

.nav-button:hover {
  @apply bg-black text-white;
}

/* Reviews Section */
.reviews-container {
  @apply relative overflow-hidden;
}

.reviews-track {
  @apply flex transition-transform duration-500;
  width: 100%;
}

.reviews-page {
  @apply flex-shrink-0 w-full;
}

.review-card {
  @apply bg-white p-6 border-b;
  height: 100%;
}

.page-dot {
  @apply w-2 h-2 bg-gray-300 rounded-full cursor-pointer transition-all duration-300;
}

.page-dot.active {
  @apply bg-black w-4;
}

/* Contact Form */
.form-input {
  @apply w-full py-2 bg-transparent;
  border: none;
  border-bottom: 1px solid #e2e2e2;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-bottom-color: #000;
}

.form-input::placeholder {
  @apply text-gray-400;
}

.form-button {
  @apply w-full bg-black text-white py-3 transition-all duration-300;
}

.form-button:hover {
  @apply bg-gray-800;
}

/* Map Container */
.map-container {
  @apply h-64 bg-gray-100 overflow-hidden;
}

.map-container iframe {
  @apply w-full h-full;
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  position: relative;
  background-color: white;
  padding: 0.5rem;
  max-width: 90%;
  width: 1024px;
  margin: 1rem;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal.active .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.5rem;
}

.modal-close:hover {
  color: rgb(229, 231, 235);
}

/* Utility Classes */
.transition-custom {
  transition: all 0.3s ease;
}

/* Media Queries */
@media (max-width: 768px) {
  .portfolio-grid {
    @apply grid-cols-1;
  }

  .reviews-grid {
    @apply grid-cols-1;
  }

  .nav-button {
    @apply px-2 py-1;
  }

  .filter-btn {
    @apply text-sm px-2;
  }
}

@media (max-width: 640px) {
  .filter-btn {
    @apply px-2 py-1 text-sm;
  }

  .page-number {
    @apply px-2 py-1 text-sm;
  }

  .portfolio-item img {
    @apply h-48;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

/* Print Styles */
@media print {
  .no-print {
    display: none;
  }
}

/* Active States */
.active {
  @apply font-bold;
}

/* Hover Effects */
.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
}

/* Form Validation */
.error {
  @apply border-red-500;
}

.error-message {
  @apply text-red-500 text-sm mt-1;
}

/* Loading States */
.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Success States */
.success {
  @apply text-green-500;
}