/* ========================================
   IMPORTAÇÃO DA FONTE AILERON HEAVY
======================================== */

@font-face {
    font-family: 'Aileron Heavy';
    src: url('./assets/Aileron-Heavy.woff2') format('woff2'),
         url('./assets/Aileron-Heavy.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   IDENTIDADE VISUAL - FONTES GERAIS
======================================== */

body, html {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 300;
}

h1, h2.text-5xl, h2.text-7xl, .text-5xl, .text-7xl {
  font-family: 'Inter', 'DM Sans', sans-serif !important;
  font-weight: 200 !important;
  letter-spacing: -0.02em;
}

h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
}

.font-bold, .font-black, .font-semibold {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
}

p, span, div, button, a {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300;
}

button, .btn {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
}

nav, nav a, nav button {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
}

#catalog h3, #products h3 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
}

/* ========================================
   NOVA IDENTIDADE VISUAL (TURQUESA + CIANO)
======================================== */

.text-gradient {
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: #009297 !important;      
  --tw-gradient-stops: var(--tw-gradient-from), #00a3b8, var(--tw-gradient-to) !important; 
  --tw-gradient-to: #00b8d4 !important;        
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.text-\[\#1a7a8e\], .text-\[\#10b981\], .text-\[\#d4af37\] { color: #009297 !important; }
.bg-\[\#1a7a8e\], .bg-\[\#10b981\] { background-color: #009297 !important; }
.border-\[\#1a7a8e\] { border-color: #009297 !important; }

/* ========================================
   RESTAURAÇÃO DO HERO (FILTRO ESCURO)
======================================== */

.from-black\/70 {
    --tw-gradient-from: #000000 !important;
    --tw-gradient-to: transparent !important;
    --tw-gradient-stops: rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, transparent 100% !important;
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

/* ========================================
   CORREÇÃO DE ÍCONES E CARDS (SOBRE)
   AJUSTE DE TRANSPARÊNCIA FEITO AQUI
======================================== */

#about .w-16.h-16 {
    background-image: linear-gradient(135deg, #009297, #00b8d4) !important;
    opacity: 1 !important;
    display: flex !important;
}

#about .w-16.h-16 svg { color: #ffffff !important; }

/* AQUI ESTÁ A MUDANÇA: Reduzi a opacidade de 0.30 para 0.10 (fundo) e 0.20 (borda) */
.rounded-xl.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, rgba(0, 146, 151, 0.10), rgba(0, 184, 212, 0.10)) !important;
    border: 1px solid rgba(0, 146, 151, 0.20) !important;
}

.rounded-xl p.text-4xl {
    background: linear-gradient(to right, #009297, #00b8d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
    color: #009297 !important;
}

/* ========================================
   CORREÇÃO FINAL CONTATO
======================================== */

#contact .w-16.h-16.rounded-xl {
    background-image: linear-gradient(135deg, #009297, #00b8d4) !important;
}

/*#contact .w-12.h-12.rounded-full {
    background-image: linear-gradient(135deg, #009297, #00b8d4) !important;
}

#contact a span.text-lg { color: #009297 !important; }
#contact svg { color: inherit !important; }
#contact .w-16.h-16 svg, #contact .w-12.h-12 svg { color: #ffffff !important; }

/* ========================================
   CORREÇÃO DE BOTÕES (GRADIENTES)
======================================== */

.from-\[\#009297\],
.hover\:from-\[\#009297\]:hover,
.group:hover .group-hover\:from-\[\#009297\] {
  --tw-gradient-from: #009297 !important;
  --tw-gradient-to: rgb(0 146 151 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-\[\#00b8d4\],
.hover\:to-\[\#00b8d4\]:hover,
.group:hover .group-hover\:to-\[\#00b8d4\],
.to-\[\#1e3a8a\], .to-\[\#2563eb\], .to-\[\#10b981\], .to-\[\#d4af37\] {
  --tw-gradient-to: #00b8d4 !important;
}

.bg-gradient-to-r:not(.from-black\/70) {
    background-image: linear-gradient(to right, #009297, #00b8d4) !important;
}

.group:hover .group-hover\:text-white { color: #ffffff !important; }
.group:hover .group-hover\:border-transparent { border-color: transparent !important; }

/* ========================================
   CORREÇÕES DE LAYOUT
======================================== */

#products .grid > div { display: flex; flex-direction: column; min-height: 100%; }
#products .grid > div > div:last-child { display: flex; flex-direction: column; flex: 1; }
#products .grid > div > div:last-child > ul { flex: 1; margin-bottom: 1.5rem; }
#products .grid > div > div:last-child > button { margin-top: auto; }

#catalog .grid > div > .relative.h-96,
#catalog .grid > div > .relative { height: 256px !important; min-height: 256px !important; max-height: 256px !important; }
#catalog .grid > div > .relative img { height: 256px !important; min-height: 256px !important; max-height: 256px !important; object-fit: cover !important; }
#catalog .grid > div { display: flex; flex-direction: column; height: 100%; }
#catalog .grid > div > div:first-child { flex-shrink: 0; }
#catalog .grid > div > div:last-child { display: flex; flex-direction: column; flex: 1; padding: 1rem; }
#catalog .grid > div > div:last-child > h3 { min-height: 3rem; margin-bottom: 0.75rem; }
#catalog .grid > div > div:last-child > div:first-of-type { flex: 1; margin-bottom: 1rem; }
#catalog .grid > div > div:last-child > button { margin-top: auto; width: 100%; }

@media (min-width: 768px) {
  #products .grid, #catalog .grid { align-items: stretch; }
  #products .grid > div, #catalog .grid > div { height: 100%; }
}
@media (max-width: 767px) {
  #catalog .grid > div { min-height: auto; }
}

[role="dialog"] { max-width: 850px !important; width: auto !important; }
[role="dialog"] .relative { width: 400px !important; height: 380px !important; max-width: 400px !important; max-height: 380px !important; flex-shrink: 0 !important; }
[role="dialog"] img[alt] { width: 400px !important; height: 380px !important; max-width: 400px !important; max-height: 380px !important; object-fit: cover !important; }
[role="dialog"] > div > div.grid { padding: 1.5rem !important; gap: 1.5rem !important; }
[role="dialog"] .grid > div:last-child { max-width: 380px !important; }
[role="dialog"] h2 { font-size: 1.5rem !important; line-height: 1.2 !important; margin-bottom: 0.5rem !important; }
[role="dialog"] .grid .grid > div { padding: 0.75rem !important; }
[role="dialog"] button, [role="dialog"] a[href*="mailto"] { padding: 0.875rem 1.5rem !important; font-size: 0.95rem !important; }

@media (max-width: 768px) {
  [role="dialog"] { max-width: 95% !important; width: 95% !important; }
  [role="dialog"] .relative { width: 100% !important; height: 300px !important; max-width: 100% !important; max-height: 300px !important; }
  [role="dialog"] img[alt] { width: 100% !important; height: 300px !important; max-width: 100% !important; max-height: 300px !important; }
  [role="dialog"] .grid > div:last-child { max-width: 100% !important; }
  [role="dialog"] > div > div.grid { padding: 1rem !important; gap: 1rem !important; }
}

/* ========================================
   FONTE EXCLUSIVA DO HERO (AILERON HEAVY)
======================================== */

#root > div > div:first-child h1,
h1.text-5xl.font-extrabold,
h1.text-7xl.font-extrabold {
    font-family: 'Aileron Heavy', 'Arial Black', 'Inter', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase;
}

/* ========================================
   EFEITO ESPECIAL BOTÃO HEADER (VER CATÁLOGO)
======================================== */

/* Seleciona especificamente o botão com gradiente dentro da navegação */
nav button.bg-gradient-to-r {
    position: relative !important;
    z-index: 100 !important; /* Garante que fique acima de qualquer filtro */
    overflow: hidden !important; /* Para o efeito de brilho não vazar */
    transition: all 0.3s ease-in-out !important;
    border: 1px solid rgba(255,255,255,0.1) !important; /* Borda sutil premium */
}

/* Estado Hover (Ao passar o mouse) */
nav button.bg-gradient-to-r:hover {
    transform: translateY(-2px) scale(1.05) !important; /* Sobe e cresce */
    box-shadow: 0 0 20px rgba(0, 184, 212, 0.6), 
                0 0 40px rgba(0, 146, 151, 0.3) !important; /* Brilho Ciano Neon */
    filter: brightness(1.1) !important; /* Aumenta a luminosidade */
}

/* Efeito de Luz Passante (Shine Effect) */
nav button.bg-gradient-to-r::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important; /* Começa fora da esquerda */
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
    transform: skewX(-20deg) !important; /* Inclina a luz */
    transition: none !important;
}

nav button.bg-gradient-to-r:hover::after {
    left: 150% !important; /* Vai para a direita */
    transition: 0.7s ease-in-out !important; /* Duração do brilho passando */
}

/* ========================================
   CORREÇÃO HOVER BOTÃO "NOSSA HISTÓRIA"
======================================== */

/* Força a cor Turquesa no texto quando o mouse passa por cima */
#home button.border-white:hover,
#home button.border-2:hover {
    color: #009297 !important; /* Turquesa da marca */
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* ========================================
   CORREÇÃO HOVER LINKS DO CABEÇALHO
======================================== */

/* Aplica cor Turquesa no hover apenas para botões de texto (sem fundo gradiente) */
nav button:not(.bg-gradient-to-r):hover {
    color: #009297 !important;
}

/* Garante que o ícone de idioma e a seta também fiquem Turquesa */
nav button:not(.bg-gradient-to-r):hover svg {
    color: #009297 !important;
}

/* ========================================
   RESTAURAÇÃO DO EFEITO "CORRIDA" (CARDS SOBRE)
======================================== */

/* Seleciona a linha superior (div absoluta no topo) dentro dos cards da seção #about */
#about .group > div.absolute.top-0 {
    /* Gradiente ajustado: 
       Turquesa (#009297) -> Ciano (#00b8d4) -> VERDE ESMERALDA (#10b981) -> Turquesa (#009297)
       Usamos o #10b981 que é um verde vibrante para destacar.
    */
    background-image: linear-gradient(90deg, #009297, #00b8d4, #10b981, #009297) !important;
    
    /* Mantém o tamanho grande para permitir o movimento */
    background-size: 300% 100% !important;
    
    /* Posição inicial */
    background-position: 0% 0% !important;
    
    /* Suaviza a transição */
    transition: background-position 0.6s ease-in-out !important;
}

/* Quando passar o mouse no card (group), move a linha */
#about .group:hover > div.absolute.top-0 {
    /* Desloca o gradiente para a direita */
    background-position: 100% 0% !important;
}

/* ========================================
   CORES ORIGINAIS DAS REDES SOCIAIS
======================================== */

/* Instagram (Gradiente Laranja/Roxo) */
#contact a[href*="instagram"] {
    background-image: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045) !important;
}

/* LinkedIn (Azul) */
#contact a[href*="linkedin"] {
    background-image: linear-gradient(135deg, #0077b5, #0e76a8) !important;
}

/* WhatsApp (Verde) */
#contact a[href*="wa.me"] {
    background-image: linear-gradient(135deg, #25D366, #128C7E) !important;
}