/* Configuração Base e Ruído de Fundo */
body {
    background-color: #FAF9F6;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Botão Efeito Couro Preto */
.bg-leather-dark {
    background-color: #1a1a1a;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
    color: white;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Borda Costurada dentro do botão */
.stitch-border {
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 8px; /* Ajustado para servir em ambas as páginas */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Acessibilidade */
*:focus-visible {
    outline: 2px solid #C5A059;
    outline-offset: 2px;
}

/* Scrollbar invisível */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- ANIMAÇÕES --- */

/* Slide vindo da esquerda (Usado na Bio) */
.slide-in-left { 
    animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
    opacity: 0; 
    transform: translateX(-20px); 
}

/* Fade subindo (Usado em ambas as páginas) */
.fade-up { 
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
    opacity: 0; 
    transform: translateY(20px); 
}

/* Delays de animação */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

@keyframes slideInLeft { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* Redução de movimento */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- ESTILOS ESPECÍFICOS DA PÁGINA SITES.HTML --- */

/* Acordeão (FAQ) */
.accordion-content {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}
.accordion-content.active { 
    opacity: 1; 
}

/* --- ANIMAÇÕES DOS CELULARES (DESIGN.HTML) --- */

/* Celular Central: Surge crescendo */
.pop-in {
    opacity: 0;
    transform: scale(0.8);
    animation: popIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; /* Efeito elástico */
    z-index: 20; /* Garante que fique na frente no início */
}

/* Celular Esquerdo: Desliza para esquerda e gira */
.slide-out-left {
    opacity: 0;
    /* Começa no centro, sem rotação */
    transform: translateX(60%) rotate(0deg) scale(0.9); 
    animation: slideOutLeft 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.3s; /* Espera o do meio aparecer */
    z-index: 10;
}

/* Celular Direito: Desliza para direita e gira */
.slide-out-right {
    opacity: 0;
    /* Começa no centro, sem rotação */
    transform: translateX(-60%) rotate(0deg) scale(0.9);
    animation: slideOutRight 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.3s; /* Espera o do meio aparecer */
    z-index: 10;
}

/* KEYFRAMES */

/* VINIL STYLES (FOOTER) - ATUALIZADO */
.vinyl-record {
    /* Fundo base preto */
    background-color: #1a1a1a;
    
    /* Os sulcos do disco (linhas circulares) - Aumentei o contraste */
    background-image: repeating-radial-gradient(
        #1a1a1a 0, 
        #1a1a1a 2px, 
        #333333 3px, 
        #333333 4px
    );
    
    border-radius: 50%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); /* Sombra mais forte para dar volume */
    transition: transform 0.5s ease;
}

/* O Brilho do Vinil (Reflexo de luz) */
.vinyl-record::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    /* Degradê diagonal transparente para simular luz batendo no plástico */
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Parte central (buraco) para garantir profundidade */
.vinyl-record::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

/* Braço da vitrola */
.tonearm {
    width: 6px; /* Um pouco mais grosso */
    height: 70px;
    background: #C5A059; /* Cor Dourada */
    position: absolute;
    top: -25px;
    right: -5px;
    transform-origin: top center;
    transform: rotate(-30deg);
    transition: transform 0.5s ease;
    z-index: 10;
    border-radius: 4px;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.2);
}

/* Interação */
.vinyl-wrapper:hover .vinyl-record {
    animation-play-state: paused;
    transform: scale(1.05);
    cursor: pointer;
}
.vinyl-wrapper:hover .tonearm {
    transform: rotate(0deg); /* O braço vai para o disco */
}

@keyframes popIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideOutLeft {
    to {
        opacity: 0.5; /* Mantém a transparência do design original */
        transform: translateX(0) rotate(-6deg) scale(1);
    }
}

@keyframes slideOutRight {
    to {
        opacity: 0.5; /* Mantém a transparência do design original */
        transform: translateX(0) rotate(6deg) scale(1);
    }
}

/* Efeito Hover nos Cards de Serviço */
.hover-card-up {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hover-card-up:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1);
    border-color: #e5e7eb;
}