/* Utilitários */
@layer utilities {
    /* Cores do tema */
    .bg-primary { background-color: var(--color-primary); }
    .text-primary { color: var(--color-primary); }
    .bg-secondary { background-color: var(--color-secondary); }
    .text-secondary { color: var(--color-secondary); }
    .bg-foreground { background-color: var(--color-foreground); }
    .text-foreground { color: var(--color-foreground); }
    .bg-accent { background-color: var(--color-accent); }
    .text-accent { color: var(--color-accent); }
    .bg-accentground { background-color: var(--color-accentground); }
    .text-accentground { color: var(--color-accentground); }

    /* Gradientes */
    .bg-gradient-primary {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accentground) 100%);
    }

    /* Hover */
    .hover\:bg-primary:hover { background-color: var(--color-primary); }
    .hover\:text-primary:hover { color: var(--color-primary); }
    .hover\:bg-secondary:hover { background-color: var(--color-secondary); }
    .hover\:text-secondary:hover { color: var(--color-secondary); }

    /* Bordas */
    .border-primary { border-color: var(--color-primary); }
    .border-secondary { border-color: var(--color-secondary); }

    /* Sombras */
    .shadow-primary {
        box-shadow: 0 4px 6px -1px rgba(0, 130, 60, 0.1),
                    0 2px 4px -1px rgba(0, 130, 60, 0.06);
    }
}

/* Componentes */
@layer components {
    /* Botões */
    .btn-primary {
        @apply px-8 py-4 bg-primary text-white font-semibold rounded-lg shadow-lg 
               hover:bg-secondary hover:text-accent transition-all duration-300 
               transform hover:scale-105 focus:outline-none focus:ring-2 
               focus:ring-primary focus:ring-opacity-50;
    }

    .btn-secondary {
        @apply px-8 py-4 bg-white text-primary font-semibold rounded-lg shadow-lg 
               hover:bg-secondary hover:text-accent transition-all duration-300 
               transform hover:scale-105 focus:outline-none focus:ring-2 
               focus:ring-primary focus:ring-opacity-50;
    }

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

    .card-primary {
        @apply card bg-primary text-white;
    }

    .card-credit {
        @apply bg-white p-6 rounded-lg shadow-lg hover:shadow-xl 
               transition-shadow duration-300 transform-gpu;
        transform-style: preserve-3d;
        perspective: 1000px;
    }

    .glare {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.33),
            rgba(0, 0, 0, 0.06)
        );
        mix-blend-mode: overlay;
        z-index: 1;
    }

    /* Formulários */
    .form-input {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg 
               focus:ring-2 focus:ring-primary focus:border-primary 
               transition-colors duration-200;
    }

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

    /* Seções */
    .section {
        @apply py-20;
    }

    .section-title {
        @apply text-4xl font-bold text-primary text-center mb-8;
    }

    .section-subtitle {
        @apply text-lg text-accent text-center mb-12 max-w-3xl mx-auto;
    }
}

/* Animações */
@layer animations {
    /* Fade In */
    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }

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

    /* Slide Up */
    .slide-up {
        animation: slideUp 0.5s ease-out;
    }

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

    /* Pulse */
    .pulse {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
}

/* Acessibilidade */
@layer accessibility {
    /* Foco visível */
    .focus-visible {
        @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50;
    }

    /* Texto para leitores de tela */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Alto contraste */
    @media (prefers-contrast: high) {
        .text-primary { color: #000; }
        .text-secondary { color: #000; }
        .bg-primary { background-color: #fff; }
        .bg-secondary { background-color: #fff; }
    }
}

/* Responsividade */
@layer responsive {
    /* Container */
    .container {
        @apply px-4 mx-auto;
        max-width: 1280px;
    }

    /* Grid */
    .grid-auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    /* Espaçamento responsivo */
    @media (max-width: 640px) {
        .section {
            @apply py-12;
        }

        .section-title {
            @apply text-3xl;
        }
    }
}

/* Utilitários de impressão */
@layer print {
    @media print {
        .no-print {
            display: none;
        }

        .print-only {
            display: block;
        }

        body {
            color: #000;
            background: #fff;
        }

        a {
            text-decoration: none;
            color: #000;
        }
    }
}

/* Adaptações para acessibilidade, se necessário */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Exemplo de componente customizado usando as variáveis do tema */
.meu-componente-customizado {
  padding: calc(var(--spacing-unit) * 4);
  background-color: var(--color-foreground);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-sans);
}

/* Exemplo de variável CSS */
:root {
  --cor-primaria: #007bff;
  --cor-texto: #333;
}

body {
  font-family: 'Inter', sans-serif; /* Exemplo de fallback se o Tailwind não carregar ou para consistência */
  color: var(--cor-texto);
  line-height: 1.6;
}

/* Você pode adicionar estilos para classes que você definir no seu HTML,
   especialmente para componentes que não são totalmente estilizados pelo Tailwind
   ou para comportamentos específicos.
*/

/* Exemplo: Estilo para um componente customizado */
.meu-componente-customizado {
  padding: 1rem;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}

/* Estilos do Swiper */
.swiper {
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.swiper-slide .bg-foreground {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.swiper-button-next,
.swiper-button-prev {
    width: 40px !important;
    height: 40px !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    color: var(--color-primary) !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: var(--color-secondary) !important;
    transform: scale(1.1);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.5rem !important;
    font-weight: bold !important;
}

.swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background-color: var(--color-primary) !important;
    opacity: 0.3 !important;
    transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background-color: var(--color-primary) !important;
    transform: scale(1.2) !important;
}

/* Ajustes responsivos para o Swiper */
@media (max-width: 640px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
    
    .swiper-pagination {
        bottom: -5px !important;
    }

    .swiper-slide .bg-foreground {
        max-width: 320px;
    }
}

/* Estilos dos Cards de Serviço */
.service-card {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card i {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.service-card h3 {
    color: var(--color-secondary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.service-card p {
    color: #666;
    line-height: 1.6;
}

/* Ajustes da seção do Swiper */
.swiper-section {
    padding: 4rem 0;
    background-color: #f9f9f9;
}

.swiper-section .section-title {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--color-primary);
}

/* Estilos dos Cards de Depoimento */
.swiper-slide .bg-foreground {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.swiper-slide .bg-foreground:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.swiper-slide .bg-foreground p {
    font-size: 1.1rem;
    line-height: 1.6;
    position: relative;
    padding: 0 1rem;
}

.swiper-slide .bg-foreground p::before {
    content: '"';
    font-size: 2rem;
    color: var(--color-primary);
    opacity: 0.3;
    position: absolute;
    left: -0.5rem;
    top: -0.5rem;
}

.swiper-slide .bg-foreground p::after {
    content: '"';
    font-size: 2rem;
    color: var(--color-primary);
    opacity: 0.3;
    position: absolute;
    right: -0.5rem;
    bottom: -0.5rem;
}

.swiper-slide .bg-primary {
    position: relative;
    overflow: visible;
    padding-top: 2rem;
}

.swiper-slide .bg-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 1;
}

.swiper-slide img {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;
    z-index: 20;
}

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

/* Estilos do CTA Final */
.cta-container {
    position: relative;
    isolation: isolate;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.cta-image-container {
    position: relative;
    overflow: visible;
}

.cta-image-container img {
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.cta-image-container:hover img {
    transform: scale(1.05) translateY(-10px);
}