/* CSS Atualizado */
:root {
  --primary-color: #e60023;
}

/* Dark Mode Variables (default) */
.dark-mode {
  --background: #0f0f0f;
  --surface: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #a8a8a8;
  --nav-background: rgba(15, 15, 15, 0.95);
  --border-color: rgba(255, 255, 255, 0.1);
  --shadow: rgba(0, 0, 0, 0.4);
}

/* Light Mode Variables */
.light-mode {
  --background: #ffffff;
  --surface: #f8f9fa;
  --text-primary: #333333;
  --text-secondary: #666666;
  --nav-background: rgba(255, 255, 255, 0.95);
  --border-color: rgba(0, 0, 0, 0.1);
  --shadow: rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--background);
  font-family: 'Inter', sans-serif;
  padding-top: 70px;
  padding-bottom: 80px;
}

nav {
  /* Removido display, justify-content, align-items, padding, position, z-index, border-bottom, background, backdrop-filter */
  /* Utilizado utilitários Bootstrap no HTML */
}

.nav-links {
  /* Removido display, gap */
  /* Utilizado utilitários Bootstrap no HTML */
}

.theme-toggle {
  /* Removido border, border-radius, padding, display, align-items, justify-content, width, height */
  /* Utilizado utilitários e btn Bootstrap no HTML */
}

.theme-toggle:hover {
  /* Removido border-color e transform para evitar conflito com Bootstrap */
}

.theme-toggle ion-icon {
  font-size: 20px;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.moon-icon {
  display: none;
}

nav a {
  color: var(--text-secondary);
  font-weight: 500;
  transition: color 0.3s ease;
  font-size: 16px;
}

nav a.active {
  color: var(--text-primary);
}

nav a:hover {
  color: var(--text-primary);
}

nav a span {
  height: 3px;
  background: var(--primary-color);
  bottom: -2px;
}

.gallery {
  /* Removido padding, margin */
  /* Utilizado utilitários Bootstrap no HTML */
  max-width: 1600px;
}

.gallery .container-fluid {
  padding: 0;
}

.gallery img {
  /* Removido width, border-radius, margin-bottom */
  /* Utilizado utilitários Bootstrap no HTML */
  transition: transform 0.3s ease;
  cursor: zoom-in;
  background: var(--surface);
  box-shadow: 0 8px 32px var(--shadow);
  position: relative;
  overflow: hidden;
}

.gallery img:hover {
  transform: scale(1.02);
}

footer {
  /* Removido display, justify-content, align-items, gap, padding, position, border-top, background, backdrop-filter */
  /* Utilizado utilitários Bootstrap no HTML */
  height: 72px;
}

ion-icon {
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

ion-icon:hover {
  color: var(--text-primary);
  transform: scale(1.1);
}

footer img {
  /* Removido width, height, border, transition */
  /* Utilizado utilitários Bootstrap no HTML */
}

footer img:hover {
  /* ...existing code... */
}

/* Efeito de loading nas imagens */

.gallery img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent 40%,
      var(--shimmer-color) 50%,
      transparent 60%);
  animation: shimmer 1.5s infinite;
}

.dark-mode .gallery img::after {
  --shimmer-color: rgba(255, 255, 255, 0.05);
}

.light-mode .gallery img::after {
  --shimmer-color: rgba(0, 0, 0, 0.05);
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.gallery img.loaded::after {
  display: none;
}

/* Media Queries */
@media (min-width: 640px) {
  nav {
      padding: 16px 32px;
  }
}

@media (min-width: 768px) {
  nav a {
      font-size: 17px;
  }
}

@media (min-width: 1024px) {
  .gallery img {
      border-radius: 20px;
  }
}

@media (min-width: 1280px) {
  body {
      padding-left: 80px;
      padding-right: 80px;
  }
}