/* Custom CSS para o site de advocacia */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Animações personalizadas */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes goldShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.gold-shimmer {
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    background-size: 200% 100%;
    animation: goldShimmer 3s infinite;
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Hover effects personalizados */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Gradientes personalizados */
.gradient-primary {
    background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
}

.gradient-light {
    background: linear-gradient(135deg, #F4E4AA 0%, #D4AF37 100%);
}

.gradient-gold {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4AA 50%, #D4AF37 100%);
}

/* Sombras personalizadas */
.shadow-primary {
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.15);
}

.shadow-hover {
    transition: box-shadow 0.3s ease;
}

.shadow-hover:hover {
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2);
}

.shadow-gold {
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* Estilos para formulários */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-300;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-300 resize-vertical min-h-[120px];
}

.form-label {
    @apply block text-secondary font-medium mb-2;
}

/* Botões personalizados */
.btn-primary {
    @apply bg-primary hover:bg-primary-dark text-secondary px-6 py-3 rounded-lg font-semibold transition duration-300 inline-flex items-center justify-center shadow-gold;
}

.btn-secondary {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-secondary px-6 py-3 rounded-lg font-semibold transition duration-300 inline-flex items-center justify-center;
}

.btn-outline {
    @apply border-2 border-white text-white hover:bg-white hover:text-primary px-6 py-3 rounded-lg font-semibold transition duration-300 inline-flex items-center justify-center;
}

/* Navegação sticky */
.sticky-nav {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
}

/* Seções com background */
.section-bg {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Cards personalizados */
.card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-300;
}

.card-header {
    @apply p-6 border-b border-gray-100;
}

.card-body {
    @apply p-6;
}

.card-footer {
    @apply p-6 border-t border-gray-100;
}

/* Estilos para o blog */
.blog-meta {
    @apply flex items-center text-sm text-text-light mb-3;
}

.blog-meta i {
    @apply mr-2;
}

/* Estilos para testimonials */
.testimonial {
    @apply bg-white rounded-xl shadow-lg p-8 relative;
}

.testimonial::before {
    content: '"';
    @apply absolute top-4 left-6 text-6xl text-primary opacity-20;
    font-family: serif;
}

/* Estilos para equipe */
.team-member {
    @apply text-center group;
}

.team-avatar {
    @apply w-32 h-32 rounded-full mx-auto mb-4 bg-gradient-to-br from-primary-light to-primary object-cover;
}

.team-name {
    @apply font-heading font-bold text-xl text-secondary mb-2;
}

.team-role {
    @apply text-primary font-medium mb-2;
}

.team-description {
    @apply text-text-gray text-sm leading-relaxed;
}

/* Estilos para áreas de atuação */
.area-card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-300 p-6 group h-full;
}

.area-icon {
    @apply bg-primary text-white w-16 h-16 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary-dark transition duration-300;
}

.area-title {
    @apply font-heading text-xl font-bold text-secondary mb-3;
}

.area-description {
    @apply text-text-gray mb-4 flex-grow;
}

.area-link {
    @apply text-primary hover:text-primary-dark font-semibold inline-flex items-center;
}

/* Loading animation */
.loading {
    @apply inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Estilos responsivos específicos */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .card {
        margin-bottom: 1.5rem;
    }
}

/* Estilos para modal */
.modal {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4;
}

.modal-content {
    @apply bg-white rounded-xl max-w-lg w-full max-h-[90vh] overflow-y-auto;
}

.modal-header {
    @apply p-6 border-b border-gray-200 flex justify-between items-center;
}

.modal-body {
    @apply p-6;
}

.modal-footer {
    @apply p-6 border-t border-gray-200 flex justify-end space-x-4;
}

/* Animações de entrada */
.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Estilos para contador animado */
.counter {
    @apply font-bold text-2xl;
}

/* Estilos para timeline */
.timeline-item {
    @apply relative pl-8 pb-8;
}

.timeline-item::before {
    content: '';
    @apply absolute left-0 top-2 w-4 h-4 bg-primary rounded-full;
}

.timeline-item::after {
    content: '';
    @apply absolute left-2 top-6 w-0.5 h-full bg-gray-300;
}

.timeline-item:last-child::after {
    display: none;
}

/* Estilos para accordion */
.accordion-item {
    @apply border border-gray-200 rounded-lg mb-4;
}

.accordion-header {
    @apply p-4 cursor-pointer bg-gray-50 hover:bg-gray-100 transition duration-300 flex justify-between items-center;
}

.accordion-content {
    @apply p-4 border-t border-gray-200;
}

/* Estilos para tabs */
.tab-nav {
    @apply flex border-b border-gray-200 mb-6;
}

.tab-button {
    @apply px-6 py-3 text-text-gray hover:text-primary transition duration-300 border-b-2 border-transparent;
}

.tab-button.active {
    @apply text-primary border-primary;
}

.tab-content {
    @apply hidden;
}

.tab-content.active {
    @apply block;
}

/* Estilos para breadcrumb */
.breadcrumb {
    @apply flex items-center space-x-2 text-sm text-text-light;
}

.breadcrumb-item {
    @apply hover:text-primary transition duration-300;
}

.breadcrumb-separator {
    @apply text-gray-400;
}

/* Utilitários */
.text-balance {
    text-wrap: balance;
}

.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Estilos especiais para logo */
.logo-container {
    position: relative;
}

.logo-container::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, #D4AF37, #F4E4AA, #D4AF37);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.logo-container:hover::after {
    opacity: 0.3;
}

/* Estilo para texto dourado */
.text-gold {
    background: linear-gradient(135deg, #D4AF37, #F4E4AA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}