/* 
   Akira Ink Studio - Estilo Visual Premium e Moderno
   Design System por EP Studio
*/

/* 1. VARIÁVEIS E CORES DO DESIGN SYSTEM */
:root {
  --bg-charcoal: #08080B;
  --bg-graphite: #171720;
  --neon-red: #FF1744;
  --hot-pink: #FF2DAA;
  --electric-purple: #7A2CFF;
  --cyan-blue: #00E5FF;
  --yellow-gold: #FFD166;
  --soft-white: #F5F5F5;
  --text-muted: #9CA3AF;
  
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Outfit', sans-serif;
  --font-japanese: 'Noto Sans JP', sans-serif;
}

/* 2. CONFIGURAÇÕES GERAIS E COMPORTAMENTO */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-charcoal);
  color: var(--soft-white);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* Reset base de links para evitar azul padrão de navegador */
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

img {
  max-width: 100%;
  display: block;
}

/* Reset padrão para botões (corrige fundo cinza nativo) */
button {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: none;
  text-align: center;
  padding: 0;
}

/* Scroll suave e barra de rolagem customizada */
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-charcoal);
}

::-webkit-scrollbar-thumb {
  background: #252538;
  border-radius: 5px;
  border: 2px solid var(--bg-charcoal);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--electric-purple);
}

/* 3. TIPOGRAFIA E ESTILO DE LETRAS */
.font-sans { font-family: var(--font-sans); }
.font-display { font-family: var(--font-display); }
.font-japanese { font-family: var(--font-japanese); }

.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

.text-stroke {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  color: transparent;
}

/* Alinhamento de Texto */
.text-left { text-align: left; }
.text-center { text-align: center; }

/* Tamanhos de Texto */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }

/* Tamanhos Customizados */
.text-\[9px\] { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }

/* Cores de Texto */
.text-white { color: #ffffff; }
.text-gray-200 { color: #E5E7EB; }
.text-gray-300 { color: #D1D5DB; }
.text-gray-400 { color: #9CA3AF; }
.text-gray-500 { color: #6B7280; }
.text-neon-red { color: var(--neon-red); }
.text-hot-pink { color: var(--hot-pink); }
.text-electric-purple { color: var(--electric-purple); }
.text-cyan-blue { color: var(--cyan-blue); }
.text-yellow-gold { color: var(--yellow-gold); }
.text-transparent { color: transparent; }

/* 4. TEXTURA E GRADIENTES PENSADOS (ESTÉTICA MANGA/CYBER) */
.bg-charcoal { background-color: var(--bg-charcoal); }
.bg-graphite { background-color: var(--bg-graphite); }

/* Textura Simulação Manga Screen Tone */
.bg-manga-pattern {
  background-image: 
    radial-gradient(rgba(255, 23, 68, 0.12) 1px, transparent 0),
    radial-gradient(rgba(0, 229, 255, 0.08) 1px, transparent 0);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* Textura Simulação Ondas Japonesas Modernas */
.bg-japanese-waves {
  background-image: radial-gradient(circle at 100% 150%, transparent 24%, var(--bg-charcoal) 24%, var(--bg-charcoal) 28%, transparent 28%, transparent),
                    radial-gradient(circle at 0% 150%, transparent 24%, var(--bg-charcoal) 24%, var(--bg-charcoal) 28%, transparent 28%, transparent),
                    radial-gradient(circle at 50% 100%, transparent 10%, rgba(255, 23, 68, 0.04) 10%, rgba(255, 23, 68, 0.04) 14%, transparent 14%, transparent);
  background-size: 40px 20px;
}

/* Degradês de Iluminação de Fundo */
.bg-radial-gradient {
  background: radial-gradient(circle at top right, rgba(122, 44, 255, 0.12) 0%, transparent 60%),
              radial-gradient(circle at bottom left, rgba(255, 45, 170, 0.1) 0%, transparent 65%),
              var(--bg-charcoal);
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-neon-red {
  --tw-gradient-from: var(--neon-red);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 23, 68, 0));
}

.via-hot-pink {
  --tw-gradient-stops: var(--tw-gradient-from), var(--hot-pink), var(--tw-gradient-to, rgba(255, 45, 170, 0));
}

.to-electric-purple {
  --tw-gradient-to: var(--electric-purple);
}

.from-charcoal {
  --tw-gradient-from: var(--bg-charcoal);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(8, 8, 11, 0));
}

.via-transparent {
  --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

.to-transparent {
  --tw-gradient-to: transparent;
}

/* Cores com opacidade de fundo */
.bg-charcoal\/80 { background-color: rgba(8, 8, 11, 0.8); }
.bg-charcoal\/95 { background-color: rgba(8, 8, 11, 0.95); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-neon-red\/10 { background-color: rgba(255, 23, 68, 0.1); }
.bg-neon-red\/20 { background-color: rgba(255, 23, 68, 0.2); }
.bg-hot-pink\/10 { background-color: rgba(255, 45, 170, 0.1); }
.bg-hot-pink\/20 { background-color: rgba(255, 45, 170, 0.2); }
.bg-electric-purple\/10 { background-color: rgba(122, 44, 255, 0.1); }
.bg-electric-purple\/20 { background-color: rgba(122, 44, 255, 0.2); }
.bg-cyan-blue\/10 { background-color: rgba(0, 229, 255, 0.1); }
.bg-cyan-blue\/20 { background-color: rgba(0, 229, 255, 0.2); }
.bg-yellow-gold\/10 { background-color: rgba(255, 209, 102, 0.1); }

/* 5. TEXTO GLOW NEON */
.glow-text {
  text-shadow: 0 0 10px rgba(255, 23, 68, 0.6), 0 0 20px rgba(255, 45, 170, 0.4);
}

.hover\:glow-text:hover {
  text-shadow: 0 0 8px var(--cyan-blue), 0 0 15px rgba(0, 229, 255, 0.6);
}

/* 6. COMPONENTES E BOTÕES GLOW NEON */
.btn-glow {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 23, 68, 0.2);
}

.btn-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: 0.75s;
  pointer-events: none;
}

.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 23, 68, 0.5);
}

.btn-glow:hover::after {
  left: 125%;
}

/* Outros botões específicos */
.border-hot-pink\/20 { border-color: rgba(255, 45, 170, 0.2); }
.hover\:bg-hot-pink:hover {
  background-color: var(--hot-pink);
  box-shadow: 0 8px 25px rgba(255, 45, 170, 0.5);
  border-color: transparent;
}

.border-electric-purple\/20 { border-color: rgba(122, 44, 255, 0.2); }
.hover\:bg-electric-purple:hover {
  background-color: var(--electric-purple);
  box-shadow: 0 8px 25px rgba(122, 44, 255, 0.5);
  border-color: transparent;
}

.border-neon-red\/20 { border-color: rgba(255, 23, 68, 0.2); }
.hover\:bg-neon-red:hover {
  background-color: var(--neon-red);
  box-shadow: 0 8px 25px rgba(255, 23, 68, 0.5);
  border-color: transparent;
}

/* 7. CARDS COM EFEITO HOLOGRÁFICO E GLOW */
.card-glow {
  padding: 2.25rem 2rem !important; /* Increased padding for an elegant layout */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Smooth transition */
}

.card-glow:hover {
  transform: translateY(-8px) scale(1.02) !important; /* Premium Y movement + scale */
}

/* Specific neon border colors and box-shadow glows on hover */
.card-glow.hover\:border-hot-pink\/30:hover {
  border-color: var(--hot-pink) !important;
  box-shadow: 0 15px 35px rgba(255, 45, 170, 0.3), 0 0 20px rgba(255, 45, 170, 0.15) !important;
}

.card-glow.hover\:border-neon-red\/30:hover {
  border-color: var(--neon-red) !important;
  box-shadow: 0 15px 35px rgba(255, 23, 68, 0.3), 0 0 20px rgba(255, 23, 68, 0.15) !important;
}

.card-glow.hover\:border-cyan-blue\/30:hover {
  border-color: var(--cyan-blue) !important;
  box-shadow: 0 15px 35px rgba(0, 229, 255, 0.3), 0 0 20px rgba(0, 229, 255, 0.15) !important;
}

.card-glow.hover\:border-electric-purple\/30:hover {
  border-color: var(--electric-purple) !important;
  box-shadow: 0 15px 35px rgba(122, 44, 255, 0.3), 0 0 20px rgba(122, 44, 255, 0.15) !important;
}

/* 8. ANIMAÇÕES EXCLUSIVAS (KEYFRAMES) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes float1 {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(1deg); }
  50% { transform: translateY(-6px) rotate(-1deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.5deg); }
}

@keyframes pulseSlow {
  0%, 100% { transform: scale(1); opacity: 0.15; }
  50% { transform: scale(1.08); opacity: 0.25; }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinReverseSlow {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.animate-pulse-slow {
  animation: pulseSlow 6s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spinSlow 20s linear infinite;
}

.animate-spin-reverse-slow {
  animation: spinReverseSlow 25s linear infinite;
}

.float-animation-1 { animation: float1 4s ease-in-out infinite; }
.float-animation-2 { animation: float2 4.5s ease-in-out infinite; }
.float-animation-3 { animation: float3 5s ease-in-out infinite; }

/* 9. HEADER / NAV GLASSMORPHISM */
.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#main-header.scrolled {
  background-color: rgba(8, 8, 11, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  height: 75px;
}

#main-header.scrolled .h-20 {
  height: 75px;
}

/* 10. GRID DE ESTILOS E ANIMAÇÃO DE HOVER */
.style-card {
  padding: 2.25rem 2rem !important; /* Increased padding */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.style-card:hover {
  transform: translateY(-8px) scale(1.03) !important; /* Upward movement + scale */
}

/* Specific neon border and glow shadows for style-cards on hover */
.style-card.hover\:border-hot-pink\/50:hover {
  border-color: var(--hot-pink) !important;
  box-shadow: 0 15px 35px rgba(255, 45, 170, 0.35), 0 0 25px rgba(255, 45, 170, 0.2) !important;
}

.style-card.hover\:border-neon-red\/50:hover {
  border-color: var(--neon-red) !important;
  box-shadow: 0 15px 35px rgba(255, 23, 68, 0.35), 0 0 25px rgba(255, 23, 68, 0.2) !important;
}

.style-card.hover\:border-electric-purple\/50:hover {
  border-color: var(--electric-purple) !important;
  box-shadow: 0 15px 35px rgba(122, 44, 255, 0.35), 0 0 25px rgba(122, 44, 255, 0.2) !important;
}

.style-card.hover\:border-cyan-blue\/50:hover {
  border-color: var(--cyan-blue) !important;
  box-shadow: 0 15px 35px rgba(0, 229, 255, 0.35), 0 0 25px rgba(0, 229, 255, 0.2) !important;
}

.style-card.hover\:border-yellow-gold\/50:hover {
  border-color: var(--yellow-gold) !important;
  box-shadow: 0 15px 35px rgba(255, 209, 102, 0.35), 0 0 25px rgba(255, 209, 102, 0.2) !important;
}

.style-card.hover\:border-white\/40:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.15), 0 0 25px rgba(255, 255, 255, 0.1) !important;
}

/* 11. ABAS E FILTROS DA GALERIA */
.filter-btn {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--soft-white);
  cursor: pointer;
}

.filter-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.filter-btn.active {
  background-color: var(--neon-red);
  border-color: var(--neon-red);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 23, 68, 0.4);
}

/* Animações e Grid da Galeria */
.gallery-item {
  opacity: 1;
  transform: scale(1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer; /* Cursor de mão ao passar o mouse */
}

/* Classe hidden específica para filtros da galeria para remover elemento */
.gallery-item.hidden {
  display: none !important;
}

/* Utilidades para o Lightbox Modal da Galeria */
.max-h-\[70vh\] { max-height: 70vh; }
.max-w-full { max-width: 100%; }
.block { display: block; }
.inline-flex { display: inline-flex; }
.object-contain { object-fit: contain; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
.top-6 { top: 1.5rem; }
.right-6 { right: 1.5rem; }

/* 12. FAQ ACORDEÃO E ANIMAÇÃO */
.faq-item {
  background-color: var(--bg-graphite) !important; /* Ligeiramente mais claro que o fundo charcoal para maior contraste */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: var(--cyan-blue) !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.15);
}

.faq-toggle {
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
}

.faq-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 13. CLASSES DE LAYOUT AUXILIARES (Padrão Tailwind CSS Escapado) */
.hidden {
  display: none !important;
}

/* Cores de fundo sólidas */
.bg-neon-red { background-color: var(--neon-red) !important; }
.bg-hot-pink { background-color: var(--hot-pink) !important; }
.bg-electric-purple { background-color: var(--electric-purple) !important; }
.bg-cyan-blue { background-color: var(--cyan-blue) !important; }
.bg-yellow-gold { background-color: var(--yellow-gold) !important; }

.grid { display: grid; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.shrink-0 { flex-shrink: 0; }

/* Grid columns default mobile first */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* Max Width */
.max-w-7xl { max-width: 80rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-md { max-width: 28rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Spacings - Padding */
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4\.5 { padding-top: 1.125rem; padding-bottom: 1.125rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }

.pt-2 { padding-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-28 { padding-top: 7rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-16 { padding-bottom: 4rem; }

/* Spacings - Margins */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }

.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }

/* Spacings - Gaps */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* Dimensions */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-6 { width: 1.5rem; }
.h-5 { height: 1.25rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }

/* Decorative blob size */
.w-96 { width: 24rem; }
.h-96 { height: 24rem; }

/* Card specific dimensions */
.w-\[280px\] { width: 280px; }
.h-\[340px\] { height: 340px; }
.w-\[360px\] { width: 360px; }
.h-\[440px\] { height: 440px; }
.w-\[320px\] { width: 320px; }
.h-\[320px\] { height: 320px; }
.w-\[420px\] { width: 420px; }
.h-\[420px\] { height: 420px; }
.w-\[350px\] { width: 350px; }
.h-\[350px\] { height: 350px; }
.w-\[450px\] { width: 450px; }
.h-\[450px\] { height: 450px; }
.w-\[600px\] { width: 600px; }
.h-\[600px\] { height: 600px; }
.w-\[700px\] { width: 700px; }
.h-\[300px\] { height: 300px; }

/* Aspect Ratios */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }

/* Borders formatting */
.border { border: 1px solid transparent; }
.border-2 { border: 2px solid transparent; }
.border-b { border-bottom: 1px solid transparent; }
.border-y { border-top: 1px solid transparent; border-bottom: 1px solid transparent; }

/* Border Colors */
.border-white\/5 { border-color: rgba(255, 255, 255, 0.05); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-cyan-blue\/20 { border-color: rgba(0, 229, 255, 0.2); }
.border-cyan-blue\/30 { border-color: rgba(0, 229, 255, 0.3); }
.border-hot-pink\/35 { border-color: rgba(255, 45, 170, 0.35); }
.border-electric-purple\/35 { border-color: rgba(122, 44, 255, 0.35); }
.border-neon-red\/35 { border-color: rgba(255, 23, 68, 0.35); }

/* Positions & indexes */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

.top-20 { top: 5rem; }
.top-24 { top: 6rem; }
.top-4 { top: 1rem; }
.right-4 { right: 1rem; }
.bottom-4 { bottom: 1rem; }
.left-4 { left: 1rem; }
.top-1\/2 { top: 50%; transform: translateY(-50%); }
.top-1\/10 { top: 10%; }
.bottom-1\/4 { bottom: 25%; }
.right-1\/10 { right: 10%; }

/* Absolute offsets with negative margins */
.-top-4 { top: -1rem; }
.-left-6 { left: -1.5rem; }
.-right-6 { right: -1.5rem; }
.-right-10 { right: -2.5rem; }
.-bottom-4 { bottom: -1rem; }
.-bottom-6 { bottom: -1.5rem; }
.-left-2 { left: -0.5rem; }
.-inset-4 { top: -1rem; right: -1rem; bottom: -1rem; left: -1rem; }

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-25 { z-index: 25; }
.z-50 { z-index: 50; }

.object-cover { object-fit: cover; }
.transition-transform { transition-property: transform; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }

/* Interactive states hover mappings */
.hover\:border-hot-pink\/30:hover { border-color: rgba(255, 45, 170, 0.3); }
.hover\:border-neon-red\/30:hover { border-color: rgba(255, 23, 68, 0.3); }
.hover\:border-cyan-blue\/30:hover { border-color: rgba(0, 229, 255, 0.3); }
.hover\:bg-\[\#12121b\]:hover { background-color: #12121b; }
.hover\:border-hot-pink\/50:hover { border-color: rgba(255, 45, 170, 0.5); }
.hover\:bg-\[\#1f1f2d\]:hover { background-color: #1f1f2d; }
.hover\:scale-105:hover { transform: scale(1.05); }

/* Form Elements Focus styling */
input, select, textarea {
  transition: all 0.3s ease;
  background-color: var(--bg-charcoal);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px var(--bg-charcoal), 0 0 0 4px var(--neon-red);
}

.focus\:border-neon-red:focus { border-color: var(--neon-red) !important; }
.focus\:ring-neon-red:focus { box-shadow: 0 0 0 1px var(--neon-red) !important; }
.focus\:border-hot-pink:focus { border-color: var(--hot-pink) !important; }
.focus\:ring-hot-pink:focus { box-shadow: 0 0 0 1px var(--hot-pink) !important; }
.focus\:border-electric-purple:focus { border-color: var(--electric-purple) !important; }
.focus\:ring-electric-purple:focus { box-shadow: 0 0 0 1px var(--electric-purple) !important; }
.focus\:border-cyan-blue:focus { border-color: var(--cyan-blue) !important; }
.focus\:ring-cyan-blue:focus { box-shadow: 0 0 0 1px var(--cyan-blue) !important; }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px currentColor !important; }
.focus\:text-white:focus { color: #ffffff !important; }

/* 14. RESPONSIVIDADE E MEDIA QUERIES (Escapados adequadamente para o browser) */

/* Mobile & Tablet Small viewports - Menu responsive fixes */
@media (max-width: 767px) {
  #main-header nav {
    display: none;
  }
}

/* Viewport MD (640px) */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  
  .sm\:flex-row { flex-direction: row; }
  .sm\:text-5xl { font-size: 3rem; }
  .sm\:text-6xl { font-size: 3.75rem; }
  
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  
  .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .sm\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  
  .sm\:h-24 { height: 6rem; }
  .sm\:w-12 { width: 3rem; }
  .sm\:h-12 { height: 3rem; }
}

/* Viewport MD (768px) */
@media (min-width: 768px) {
  .md\:flex { display: flex !important; }
  .md\:hidden { display: none !important; }
  
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-5 { grid-column: span 5 / span 5; }
  
  .md\:items-end { align-items: flex-end; }
  .md\:flex-row { flex-direction: row; }
}

/* Viewport LG (1024px) */
@media (min-width: 1024px) {
  .lg\:flex { display: flex !important; }
  
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-12 { grid-column: span 12 / span 12; }
  
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  
  .lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
}

/* Viewport XL (1280px) */
@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   RESPONSIVE DESIGN CORRECTIONS (EP STUDIO MOBILE FIXES)
   ========================================================================== */

/* Gallery Item Hover Overlay Semantic Styles */
.gallery-item .absolute.inset-0 {
  background: linear-gradient(to top, rgba(8, 8, 11, 0.95) 0%, rgba(8, 8, 11, 0.3) 60%, transparent 100%) !important;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
}

.gallery-item:hover .absolute.inset-0 {
  opacity: 1;
}

/* On mobile / touch devices, make the overlay always visible at opacity 1 */
@media (max-width: 1024px) {
  .gallery-item .absolute.inset-0 {
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(8, 8, 11, 0.9) 0%, rgba(8, 8, 11, 0.3) 70%, transparent 100%) !important;
  }
}

/* Lightbox Modal Responsiveness & Aesthetics */
#gallery-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background-color: rgba(8, 8, 11, 0.96) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  display: none; /* controlled by JS toggle 'hidden' class */
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem 1rem;
}

#gallery-lightbox:not(.hidden) {
  display: flex !important;
}

#gallery-lightbox .relative.max-w-4xl {
  margin: auto;
  width: 100%;
  max-width: 60rem; /* 960px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

#gallery-lightbox img {
  max-height: 70vh;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 23, 68, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Responsive adjustments for lightbox in mobile/small screens */
@media (max-width: 768px) {
  #gallery-lightbox {
    align-items: flex-start; /* scroll from the top */
    padding-top: 5rem; /* leave space for the fixed close button */
  }
  
  #gallery-lightbox img {
    max-height: 50vh !important; /* give space for details and button */
  }
  
  #gallery-lightbox .relative.max-w-4xl {
    gap: 1rem;
  }
}

/* Premium Fixed Close Button */
#lightbox-close {
  position: fixed !important;
  top: 1.5rem !important;
  right: 1.5rem !important;
  z-index: 1010 !important;
  background: rgba(23, 23, 32, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 2rem !important;
  line-height: 1 !important;
  padding-bottom: 5px !important; /* vertical alignment tweak */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#lightbox-close:hover {
  background: var(--neon-red) !important;
  border-color: var(--neon-red) !important;
  transform: scale(1.05);
}

/* Footer Mobile Alignment Fixes */
@media (max-width: 767px) {
  /* Hide quick links on mobile */
  .footer-quick-links {
    display: none !important;
  }
  
  /* Center footer columns and text */
  footer .md\:col-span-5,
  footer .md\:col-span-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  footer .md\:col-span-5 .flex.items-center.gap-3,
  footer .md\:col-span-4 .flex.items-center.gap-3 {
    justify-content: center !important;
    width: 100% !important;
  }
  
  footer p.max-w-sm {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  footer .pt-2.text-xs.text-gray-500.uppercase.font-medium {
    width: 100% !important;
    text-align: center !important;
  }
}