/* =========================================
   1. CONFIGURAÇÕES GLOBAIS
   ========================================= */
:root {
    --blue-welex: #1e3a8a;
    --green-welex: #16a34a;
    --header-height: 80px; /* Altura do menu fixo para compensar o scroll */
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height); /* O link para na posição certa, não embaixo do menu */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Evita rolagem horizontal indesejada */
}

/* =========================================
   2. CARROSSEL (Correção Definitiva)
   ========================================= */

/* Os slides precisam ficar um em cima do outro (absolute) */
.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Lógica de Transição (Fade Suave) */
    opacity: 0;
    z-index: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none; /* Evita clicar em slides escondidos */
}

/* Slide Ativo (Visível) */
.carousel-item.active {
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
}

/* Garante que a imagem preencha o banner sem distorcer */
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Container do Texto (Fica na frente da imagem) */
.carousel-text-container {
    position: absolute;
    inset: 0; /* Ocupa todo o espaço do slide */
    z-index: 20; /* Fica ACIMA da imagem (que é z-index 10) */
    
    /* Centralização */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
    
    /* Fundo escuro leve para garantir leitura do texto branco */
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
}

/* =========================================
   3. EFEITOS VISUAIS E ANIMAÇÕES
   ========================================= */

/* Zoom suave nas fotos dos sócios ao passar o mouse */
.group:hover img {
    transform: scale(1.08);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Cards de Serviços (Levantamento suave) */
article {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

article:hover {
    transform: translateY(-5px);
}

/* Animação de Pulso (Para botão do WhatsApp se desejar destaque) */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

a[href*="wa.me"]:not(.no-pulse) {
    animation: pulse-green 2s infinite;
}

/* =========================================
   4. ACESSIBILIDADE
   ========================================= */
/* Foco visível para navegação via teclado (Tab) */
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--green-welex);
    outline-offset: 4px;
}

/* =========================================
   5. AJUSTES MOBILE
   ========================================= */
@media (max-width: 768px) {
    :root {
        --header-height: 70px; /* Header menor no celular */
    }
    
    /* Ajuste fino para texto do banner não ficar gigante no mobile */
    .carousel-text-container h1, 
    .carousel-text-container h2 {
        font-size: 2.25rem; /* ~36px */
        line-height: 1.2;
    }
}