/* Variáveis de cor customizadas */
:root {
  --bg: #faf7f3;
  --text: #2b2a29;
  --muted: #5f5d59;
  --brand-1: #1f3c34;
  --brand-2: #c9b8a4;
  --brand-3: #8b5d3a;
  --brand-4: #ebe2d7;
  --brand-5: #ffffff;
  --surface: #fff8f1;
  
  /* Tamanho da imagem Sobre Mim - ajustar aqui */
  --about-image-size: 320px;  /* Altere este valor para aumentar/diminuir */
}

/* Estilos customizados adicionais */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* Tipografia para títulos */
h1, h2, h3, .font-display {
  font-family: 'Playfair Display', serif;
}

/* Scroll offset para navegação */
section {
  scroll-margin-top: 80px;
}

/* Galeria modal customizações */
.gallery-modal {
  backdrop-filter: blur(8px);
}

.gallery-thumbnail {
  transition: all 0.2s ease;
  cursor: pointer;
}

.gallery-thumbnail:hover {
  opacity: 1;
  transform: scale(1.05);
}

.gallery-thumbnail.active {
  opacity: 1;
  border-color: var(--brand-3);
}

/* Animações suaves para interações */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus visível para acessibilidade */
*:focus-visible {
  outline: 2px solid var(--brand-3);
  outline-offset: 2px;
}

/* Masonry grid para fotografia */
.masonry-grid {
  column-gap: 1.5rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .masonry-grid {
    column-count: 2;
  }
}

/* Adaptação de viewport para seções */
#portfolio {
  min-height: calc(100vh - 72px);
}

#sobre-mim,
#social-midia,
#criacao-logo,
#identidade-visual,
#branding,
#fotografia,
#contato {
  min-height: 80vh;
}

/* Container responsivo baseado em viewport */
@media (min-width: 640px) and (max-width: 1023px) {
  .container {
    max-width: 95vw;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .container {
    max-width: 90vw;
  }
  
  /* Ajuste de padding para telas médias */
  section {
    padding-top: clamp(3rem, 5vw, 5rem);
    padding-bottom: clamp(3rem, 5vw, 5rem);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1160px;
  }
}

/* Ajuste dinâmico de font-size baseado em viewport */
@media (min-width: 1024px) {
  .font-display {
    font-size: clamp(2rem, 4vw, 4.5rem);
  }
}

/* Correção de posicionamento do modal */
#gallery-modal {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
}

#gallery-modal > div {
  margin: auto;
  max-height: calc(100vh - 2rem);
}

/* Garantir que botão de fechar fique visível */
#gallery-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 60;
}