.elementor-kit-7{--e-global-color-primary:#000000;--e-global-color-secondary:#000000;--e-global-color-text:#000000;--e-global-color-accent:#000000;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arthur Abreu - Barbearia Profissional</title>
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        /* Estilos personalizados para a fonte e fundos imersivos */
        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Efeito de profundidade com sobreposição escura e imagem de fundo fixa (parallax) */
        .bg-hero {
            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.pexels.com/photos/3998414/pexels-photo-3998414.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .bg-details {
            background-image: linear-gradient(rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.8)), url('https://images.pexels.com/photos/1805600/pexels-photo-1805600.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .bg-cta {
             background-color: #000;
        }

        /* Sombra de texto sutil para melhor legibilidade e profundidade */
        .text-shadow {
            text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
        }
        
        /* Animação de entrada suave */
        .fade-in-up {
            animation: fadeInUp 1s ease-out forwards;
            opacity: 0;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="bg-black text-white selection:bg-white selection:text-black">

    <!-- Seção 1: Hero - O primeiro impacto -->
    <section class="bg-hero min-h-screen w-full flex flex-col justify-center items-center p-6 text-center">
        <header class="absolute top-0 left-0 w-full p-6">
            <div class="w-12 h-12 fade-in-up">
                <!-- Logo de teste - Iniciais "AA" com um estilo de navalha -->
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 18L16 6M16 18L8 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="white" stroke-width="1.5"/>
                </svg>
            </div>
        </header>

        <div class="max-w-xl">
            <!-- Hook de 3 segundos (H2) -->
            <h2 class="text-xl md:text-2xl font-medium text-gray-300 mb-2 text-shadow fade-in-up" style="animation-delay: 100ms;">O seu melhor estilo em 25 minutos.</h2>
            
            <!-- Título Principal (H1) -->
            <h1 class="text-5xl md:text-7xl font-bold tracking-tighter text-shadow mb-6 fade-in-up" style="animation-delay: 200ms;">Arthur Abreu Barbearia</h1>
            
            <!-- Subtítulo (H3) -->
            <h3 class="text-lg md:text-xl font-light text-gray-400 text-shadow fade-in-up" style="animation-delay: 300ms;">Cortes que definem sua identidade: Profissional, Social, Pessoal.</h3>
        </div>
        
        <!-- Seta de rolagem para indicar mais conteúdo -->
        <div class="absolute bottom-10 animate-bounce">
            <svg class="w-6 h-6 text-gray-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
            </svg>
        </div>
    </section>

    <!-- Seção 2: Detalhes - O valor do seu serviço -->
    <section class="bg-details min-h-screen w-full flex flex-col justify-center items-center p-6 text-center">
        <div class="max-w-2xl fade-in-up">
            <!-- Título da Seção (H2) -->
            <h2 class="text-4xl md:text-5xl font-bold tracking-tighter mb-4 text-shadow">A Experiência Certa para Você</h2>
            
            <!-- Descrição (H3) -->
            <h3 class="text-lg md:text-xl text-gray-300 mb-10 text-shadow">Cada detalhe é pensado para entregar mais do que um corte, uma assinatura de estilo e confiança.</h3>

            <div class="space-y-8 text-left">
                <div class="fade-in-up" style="animation-delay: 200ms;">
                    <h3 class="text-xl font-semibold mb-1">Precisão e Estilo</h3>
                    <p class="text-gray-400">Do clássico ao moderno, encontramos o visual que reflete sua personalidade, com técnica apurada e atenção aos mínimos detalhes.</p>
                </div>
                <div class="fade-in-up" style="animation-delay: 300ms;">
                    <h3 class="text-xl font-semibold mb-1">Agilidade Profissional</h3>
                    <p class="text-gray-400">Seu tempo é valioso. Garanto um serviço completo e impecável em até 25 minutos, perfeito para a sua rotina agitada.</p>
                </div>
                <div class="fade-in-up" style="animation-delay: 400ms;">
                    <h3 class="text-xl font-semibold mb-1">Ambiente e Atendimento</h3>
                    <p class="text-gray-400">Um espaço criado para você relaxar e ter um atendimento exclusivo, focado 100% na sua satisfação.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Seção 3: CTA - Chamada para Ação -->
    <section class="bg-cta w-full flex flex-col justify-center items-center text-center py-24 px-6">
        <div class="max-w-xl fade-in-up">
            <!-- Título da CTA (H2) -->
            <h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4">Pronto para transformar seu visual?</h2>
            
            <!-- Descrição da CTA (H3) -->
            <h3 class="text-lg md:text-xl text-gray-400 mb-8">Clique no botão abaixo e agende seu horário diretamente pelo WhatsApp. Simples e rápido.</h3>

            <!-- Botão de Ação (CTA) -->
            <a href="https://api.whatsapp.com/send?phone=5521965387520&text=Olá%20Arthur%2C%20gostaria%20de%20agendar%20meu%20horário%20com%20voce."
               target="_blank"
               class="inline-block bg-white text-black font-semibold tracking-wide uppercase py-4 px-10 rounded-full transition-all duration-300 ease-in-out shadow-lg hover:shadow-2xl hover:shadow-gray-700/50 hover:scale-105 transform">
                Agendar Meu Horário
            </a>
        </div>
    </section>
    
    <!-- Rodapé -->
    <footer class="bg-black text-center py-8">
        <p class="text-gray-600 text-sm">&copy; 2025 Arthur Abreu. Todos os direitos reservados.</p>
    </footer>

</body>
</html>/* End custom CSS */