/* ==========================================================================
    [ OMEGA-GHOST CAROUSEL v4.0 - WHITE LUXURY EDITION ]
    Foco: Ultra-Performance GPU + Design Editorial Minimalista.
    ========================================================================== */

    /* ==========================================================================
    [ 1. ESTRUTURA DE PISTA & NATIVE SCROLL ENGINE ]
    Aceleração de hardware GPU, rolagem magnética 1:1 e alinhamento cirúrgico.
    ========================================================================== */

    .services-section {
        width: 100%;
        padding: var(--section-padding) 0; 
        background-color: var(--white); /* Fundo branco editorial */
        position: relative;
        z-index: var(--z-base);
    }

    .carousel-container {
        width: 100%;
        position: relative;
        /* Respiro de 60px embaixo garante que o Hover 3D não tenha a sombra "cortada" */
        padding: 20px 0 60px 0; 
    }

    #carouselTrack {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; 
        gap: var(--gap-md); /* Espaçamento editorial focado (menor gap, mais união visual) */
        
        /* 1.1 MOTOR NATIVO (Scroll Liso e Impecável) */
        overflow-x: auto;
        scroll-behavior: smooth;
        
        /* 1.2 UX MAGNÉTICA (A Mágica da Apple/Netflix) */
        scroll-snap-type: x mandatory; 
        scroll-snap-stop: always; /* Força a parar 1 por 1, impedindo que o dedo passe reto por 3 cards */
        
        /* 1.3 ACELERAÇÃO DE GPU PARA MOBILE */
        -webkit-overflow-scrolling: touch; 
        will-change: scroll-position; 
        
        /* 1.4 ALINHAMENTO BASE (Mobile & Tablet) */
        /* Garante que o primeiro card e o scroll magnético respeitem as margens da tela */
        padding: 10px clamp(20px, 5vw, 40px) 20px clamp(20px, 5vw, 40px);
        scroll-padding-left: clamp(20px, 5vw, 40px);
        
        /* 1.5 OCULTAÇÃO DE BARRAS DE ROLAGEM (Estética Limpa) */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        
        /* Previne contornos azuis nativos feios ao clicar e arrastar */
        outline: none;
    }

    /* Esconde barra nativa no Chrome/Safari/Brave/Opera */
    #carouselTrack::-webkit-scrollbar {
        display: none; 
    }

    /* ==========================================================================
    [ 1.6 ALINHAMENTO MATEMÁTICO (PIXEL-PERFECT DESKTOP) ]
    ========================================================================== */
    @media (min-width: 1360px) {
        #carouselTrack {
            /* 
            A Fórmula Absoluta: 
            Pega 100% da tela real (ignorando a largura da barra do Windows), 
            subtrai o tamanho do container (1280px), divide no meio e soma o padding da sua section (40px).
            Isso crava o lado esquerdo do card EXATAMENTE na mesma linha reta do título.
            */
            padding-left: calc(((100% - var(--container-max)) / 2) + 40px);
            padding-right: calc(((100% - var(--container-max)) / 2) + 40px);
            
            /* O "freio" magnético precisa saber examente onde a pista começa */
            scroll-padding-left: calc(((100% - var(--container-max)) / 2) + 40px);
        }
    }

    /* ==========================================================================
    [ 1.7 ACESSIBILIDADE DE ALTO NÍVEL ]
    ========================================================================== */
    /* Desliga o scroll suave e animações se o usuário tiver "Reduzir Movimento" ativado no SO */
    @media (prefers-reduced-motion: reduce) {
        #carouselTrack {
            scroll-behavior: auto;
            scroll-snap-type: none;
        }
    }

    /* ==========================================================================
    [ 2. CARDS EDITORIAIS (CINEMATIC REVEAL VIP) ]
    Foco, Desfoque Inteligente (Blur) e Acessibilidade Total.
    ========================================================================== */

    .card-elite {
        /* Formato Retrato/Revista */
        flex: 0 0 clamp(260px, 22vw, 320px); 
        aspect-ratio: 3 / 4; 
        
        /* VITAL: Trava o card na esquerda acompanhando o título */
        scroll-snap-align: start; 
        
        position: relative;
        border-radius: var(--radius-lg);
        overflow: hidden;
        cursor: pointer;
        
        /* Dupla Sombra: Uma externa de profundidade, uma interna (inset) para o "Reflexo de Vidro" */
        box-shadow: 0 10px 30px rgba(0, 46, 91, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
        
        /* Curva Apple de animação: Começa rápido, termina extremamente suave */
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
        
        /* Prepara a GPU */
        will-change: transform, box-shadow;
    }

    /* Imagem de Fundo (Preenche 100% do Card) */
    .card-elite img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        will-change: transform;
    }

    /* Máscara de Gradiente e Container de Conteúdo */
    .card-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        
        /* Degradê base suave */
        background: linear-gradient(to top, rgba(0, 46, 91, 0.95) 0%, rgba(0, 46, 91, 0.2) 50%, transparent 100%);
        
        /* INOVAÇÃO: Prepara o filtro de desfoque sem ativá-lo ainda */
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 32px 24px;
        transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .card-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
        z-index: 2;
    }

    /* Tipografia Imponente */
    .card-content h3 {
        font-size: 1.8rem;
        color: var(--white);
        margin: 0;
        font-weight: var(--fw-extrabold);
        letter-spacing: 0.02em;
        text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra mais densa para leitura sobre imagens claras */
        transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* Texto de Match (Fica escondido até o hover) */
    .card-match {
        color: #89CFF0; /* Azul Bebê Premium */
        font-size: 0.95rem;
        font-weight: var(--fw-medium);
        line-height: 1.5;
        margin: 0;
        
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* O Botão de Ação Imediata (Escondido) */
    .btn-quick-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #89CFF0;
        color: var(--dark-blue);
        padding: 14px 0;
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        font-weight: var(--fw-extrabold);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-decoration: none;
        margin-top: 8px;
        
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        box-shadow: 0 8px 25px rgba(137, 207, 240, 0.15);
    }

    /* ==========================================================================
    [ ANIMAÇÕES DE INTERAÇÃO (HOVER VIP & TECLADO) ]
    Inovação: O :focus-within garante que funcione para quem navega via TAB.
    ========================================================================== */

    @media (hover: hover) {
        .card-elite:hover,
        .card-elite:focus-within {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0, 46, 91, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.3); /* Borda de vidro brilha mais */
        }

        .card-elite:hover img,
        .card-elite:focus-within img {
            transform: scale(1.1); /* Zoom de lente fotográfica */
        }

        .card-elite:hover .card-overlay,
        .card-elite:focus-within .card-overlay {
            /* A MÁGICA: O fundo desfoca e a máscara sobe, criando leitura perfeita */
            background: linear-gradient(to top, rgba(0, 46, 91, 0.98) 0%, rgba(0, 46, 91, 0.8) 50%, rgba(0, 46, 91, 0.3) 100%);
            backdrop-filter: blur(6px); /* Cinematic Blur */
            -webkit-backdrop-filter: blur(6px);
        }

        .card-elite:hover .card-content h3,
        .card-elite:focus-within .card-content h3 {
            transform: translateY(-8px);
        }

        .card-elite:hover .card-match,
        .card-elite:focus-within .card-match {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.05s; 
        }

        .card-elite:hover .btn-quick-action,
        .card-elite:focus-within .btn-quick-action {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.12s; /* Timing levemente maior para dar a sensação de cascata */
        }
        
        .btn-quick-action:hover {
            background: var(--white);
            color: var(--primary-blue);
            transform: scale(1.02);
            box-shadow: 0 0 20px rgba(137, 207, 240, 0.6); /* Brilho Neon intenso ao passar o mouse NO BOTÃO */
        }
    }

    /* ==========================================================================
    [ 3. HEADER ASSIMÉTRICO & CONTROLES VIP ]
    Navegação tátil, micro-interações de direção e alinhamento editorial.
    ========================================================================== */

    /* 3.1 Cabeçalho da Seção de Serviços */
    .services-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end; 
        margin-bottom: var(--gap-lg);
        width: 100%;
        position: relative;
        z-index: 5;
    }

    /* Força o título a alinhar à esquerda, harmonizando com a linha de leitura */
    .section-title.left-align {
        text-align: left;
        margin-bottom: 0;
        align-items: flex-start;
    }

    .section-title.left-align .shadow-text {
        left: -10px;
        transform: none;
        color: rgba(0, 46, 91, 0.03); /* Marca d'água fantasma impecável */
    }

    /* 3.2 Agrupamento dos Botões de Seta */
    .carousel-controls {
        display: flex;
        gap: 16px; /* Mais respiro entre as setas para UX superior */
        margin-bottom: 12px; /* Alinha o eixo vertical dos botões com o título */
    }

    /* 3.3 Design das Setas (Tátil & Premium) */
    .nav-btn {
        background: var(--white); /* Fundo sólido para destacar do fundo geral */
        color: var(--primary-blue);
        border: 1px solid var(--border-strong);
        width: 54px; /* Levemente maiores, formato "dial" de painéis de luxo */
        height: 54px;
        border-radius: 50%; 
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0, 46, 91, 0.05); /* Sombra base sutil */
        
        /* Curva de animação elástica (Bounce suave ao passar o mouse) */
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* A Magia: Prepara o ícone dentro do botão para se mover */
    .nav-btn svg {
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @media (hover: hover) {
        /* Estado Ativo: Fundo chumbo, seta Azul Bebê e Glow */
        .nav-btn:hover {
            background: var(--dark-blue);
            color: #89CFF0; /* Seta acende */
            border-color: var(--dark-blue);
            transform: translateY(-4px); 
            box-shadow: 0 10px 25px rgba(0, 46, 91, 0.2), 0 0 15px rgba(137, 207, 240, 0.15);
        }

        /* Directional Micro-interaction: A seta "pula" apontando o caminho */
        #prevBtn:hover svg { transform: translateX(-4px); }
        #nextBtn:hover svg { transform: translateX(4px); }
    }

    /* Feedback tátil imersivo ao clicar (Afunda na tela) */
    .nav-btn:active { 
        transform: translateY(0) scale(0.92); 
        box-shadow: 0 2px 5px rgba(0, 46, 91, 0.1);
    }

    /* Acessibilidade de Teclado */
    .nav-btn:focus-visible {
        outline: 3px solid #89CFF0;
        outline-offset: 4px;
    }

    /* 3.4 Paginação (Dots Editoriais VIP) */
    .carousel-pagination {
        display: flex;
        justify-content: center;
        align-items: center; 
        gap: 12px;
        margin-top: 24px;
        width: 100%;
    }

    .dot {
        width: 10px;
        height: 10px;
        background: var(--border-strong); 
        border-radius: var(--radius-pill);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .dot:hover { 
        background: var(--primary-blue); 
        opacity: 0.6; 
    }

    /* O "Dot" Ativo acende em Azul Bebê e se estica */
    .dot.active {
        background: #89CFF0;
        width: 34px; /* Pílula mais pronunciada */
        opacity: 1;
        box-shadow: 0 0 12px rgba(137, 207, 240, 0.5); /* Glow de Neon Azul Bebê */
    }

    /* ==========================================================================
    [ 4. FULL WIDTH ENGINE & CINEMATIC GHOST MASK ]
    Efeito editorial de borda infinita com renderização forçada na GPU.
    ========================================================================== */

    .carousel-container.full-width {
        width: 100%;
        position: relative;
        z-index: 1;
        
        /* HACK DE PERFORMANCE: Força o navegador a renderizar a máscara na Placa de Vídeo (GPU),
        garantindo que o scroll não tenha NENHUM engasgo (Zero Lag). */
        transform: translateZ(0);

        /* CINEMATIC FOG: Degradê não-linear usando múltiplos stops de opacidade. 
        Isso cria uma dissipação de fumaça orgânica em vez de um corte seco. */
        -webkit-mask-image: linear-gradient(
            to right, 
            black 0%, 
            black 75%, 
            rgba(0, 0, 0, 0.8) 85%, 
            rgba(0, 0, 0, 0.3) 95%, 
            transparent 100%
        );
        mask-image: linear-gradient(
            to right, 
            black 0%, 
            black 75%, 
            rgba(0, 0, 0, 0.8) 85%, 
            rgba(0, 0, 0, 0.3) 95%, 
            transparent 100%
        );
    }

    /* ==========================================================================
    [ RESPONSIVIDADE ADAPTATIVA DA MÁSCARA (UX) ]
    ========================================================================== */

    /* Monitores Ultrawide: O fade começa um pouco mais tarde para não cobrir o terceiro card */
    @media (min-width: 1600px) {
        .carousel-container.full-width {
            -webkit-mask-image: linear-gradient(to right, black 0%, black 82%, transparent 100%);
            mask-image: linear-gradient(to right, black 0%, black 82%, transparent 100%);
        }
    }

    /* Tablets (Landscape & Portrait): Reduz drasticamente o fade para aproveitar espaço */
    @media (max-width: 1024px) {
        .carousel-container.full-width {
            -webkit-mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
            mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
        }
    }

    /* Smartphones: Remoção cirúrgica. 
    No touch, o usuário precisa ver a borda "cortada" do próximo card para o cérebro 
    entender intuitivamente que ele deve arrastar o dedo para o lado (Affordance). */
    @media (max-width: 768px) {
        .carousel-container.full-width {
            -webkit-mask-image: none;
            mask-image: none;
            /* Limpa também o transform 3D no mobile para economizar bateria do cliente */
            transform: none; 
        }
    }

    /* ==========================================================================
    [ 5. RESPONSIVIDADE ELITE (SMARTPHONES E TABLETS) ]
    Alinhamento de precisão e adaptação de leitura para telas menores.
    ========================================================================== */

    @media (max-width: 992px) {
        .services-header {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--gap-md);
        }
        
        /* Esconde as setas para focar a UX no Swipe (arraste com o dedo) */
        .carousel-controls { 
            display: none; 
        }
    }

    @media (max-width: 768px) {
        /* Ajusta a pista para o celular: Margem menor, mas mantendo o alinhamento à esquerda */
        #carouselTrack {
            padding: 10px 16px 24px 16px;
            scroll-padding-left: 16px;
            gap: 16px; /* Gap menor no celular para o próximo card aparecer mais (Affordance) */
        }

        .card-elite {
            /* O card ocupa 80% da tela, forçando o próximo a "espiar" na borda direita */
            flex: 0 0 80vw;
            max-width: 300px;
            scroll-snap-align: start; /* Mantém o paredão esquerdo perfeito no celular! */
        }
        
        /* UX Touch: Sem mouse, o texto e botão precisam estar sempre visíveis, mas elegantes */
        .card-overlay {
            background: linear-gradient(to top, rgba(0, 46, 91, 0.95) 0%, rgba(0, 46, 91, 0.7) 45%, transparent 100%);
        }
        
        .card-match, .btn-quick-action {
            opacity: 1;
            transform: translateY(0);
        }
        
        .card-match {
            font-size: 0.9rem;
        }
        
        .btn-quick-action {
            padding: 12px 0;
            margin-top: 4px;
            box-shadow: 0 4px 15px rgba(137, 207, 240, 0.15); /* Sombra estática mais leve no mobile */
        }
    }

    /* ==========================================================================
    [ 6. TOUCH & HAPTIC FEEDBACK (MICRO-INTERAÇÕES MOBILE) ]
    Simula a sensação de "apertar um botão físico" na tela de vidro do celular.
    ========================================================================== */

    @media (hover: none) and (pointer: coarse) {
        /* Remove o flash cinza padrão horrível do Android/iOS ao tocar */
        .card-elite, .btn-quick-action {
            -webkit-tap-highlight-color: transparent;
        }

        /* Simulação de feedback tátil: O card "afunda" milímetros ao pressionar o dedo */
        .card-elite:active {
            transform: scale(0.98);
            transition: transform 0.1s ease; /* Resposta imediata ao toque */
        }

        .btn-quick-action:active {
            background: var(--white);
            color: var(--primary-blue);
            transform: scale(0.96); /* O botão afunda um pouco mais que o card */
        }
    }

    /* ==========================================================================
    [ 7. SKELETON LOADING (ESTADO DE CARREGAMENTO) ]
    Evita que o layout "pule" (CLS) enquanto as fotos pesadas carregam.
    ========================================================================== */

    /* Fundo base do card antes da imagem aparecer */
    .card-elite {
        background-color: var(--bg-gray);
        /* Prepara o brilho de carregamento (Shimmer) */
        position: relative;
    }

    /* Efeito de brilho passando pelo card enquanto a imagem não carrega */
    .card-elite::before {
        content: '';
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.2) 20%,
            rgba(255, 255, 255, 0.5) 60%,
            rgba(255, 255, 255, 0) 100%
        );
        animation: shimmer 2s infinite;
        z-index: 0; /* Fica atrás do overlay de texto */
    }

    /* Assim que a imagem carrega, ela cobre o brilho naturalmente devido ao z-index */
    .card-elite img {
        z-index: 1; 
        background-color: var(--bg-gray); /* Fundo de fallback da imagem */
    }

    @keyframes shimmer {
        100% { transform: translateX(100%); }
    }

    /* ==========================================================================
    [ 8. ACESSIBILIDADE AVANÇADA (EDGE CASES) ]
    Garante que o carrossel funcione em modos restritos de sistema.
    ========================================================================== */

    /* Modo de Alto Contraste (Windows/Acessibilidade) */
    @media (forced-colors: active) {
        .card-elite {
            border: 2px solid CanvasText;
        }
        .btn-quick-action {
            border: 1px solid CanvasText;
        }
    }

    /* Impressão: Se alguém tentar imprimir a página, o carrossel se "desenrola" em uma lista */
    @media print {
        .services-section {
            background: transparent !important;
            padding: 0;
        }
        
        #carouselTrack {
            display: block;
            overflow: visible;
            padding: 0;
        }
        
        .card-elite {
            page-break-inside: avoid;
            margin-bottom: 20px;
            box-shadow: none;
            border: 1px solid #000;
        }

        .card-overlay {
            position: static; /* Texto vai para baixo da imagem na impressão */
            background: transparent;
            color: #000;
            padding: 15px 0;
        }

        .card-content h3 { color: #000; text-shadow: none; }
        .card-match, .btn-quick-action { color: #333; opacity: 1; transform: none; }
        .btn-quick-action { border: 1px solid #000; }
        .carousel-controls, .carousel-pagination { display: none; }
    }