/* 1. CONFIGURAÇÕES GERAIS E FONTES */
            @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');
            html { scroll-behavior: smooth; }
            * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
            h1, h2, h3 { font-family: 'Playfair Display', serif; }
            body {
                background-image: url('https://images.unsplash.com/photo-1550581190-9c1c48d21d6c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
                background-size: cover; background-attachment: fixed; background-position: center; color: #333;
            }

            /* 2. EFEITO DE VIDRO (GLASSMORPHISM) */
            .glass {
                background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 16px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
            }

            /* 3. BARRA DE NAVEGAÇÃO */
            nav {
                display: flex; justify-content: space-between; align-items: center;
                padding: 5px 20px; position: sticky; top: 10px; margin: 0px 15px; z-index: 100;
            }
            nav h1 { font-weight: 700; font-size: 20px; color: #2c3e50; letter-spacing: 1px; }
            nav ul { list-style: none; display: flex; gap: 15px; }
            nav ul li a {
                text-decoration: none; color: #2c3e50; font-weight: 600; transition: color 0.3s ease;
                font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
            }
            nav ul li a:hover { color: #b58500; }
            section { scroll-margin-top: 100px; }

            /* 4. SEÇÃO PRINCIPAL (HERO) */
            .hero { text-align: center; padding: 60px 20px; margin: 40px auto; max-width: 800px; }
            .hero h2 { font-size: 38px; margin-bottom: 10px; font-weight: 600; color: #1a1a1a; }
            .hero p { font-size: 18px; color: #444; }

            /* 5. SEÇÃO DE EMPREENDIMENTOS E CARROSSÉIS */
            .empreendimentos { display: flex; justify-content: center; gap: 30px; padding: 40px 20px; flex-wrap: wrap; }
            .card { padding: 20px; width: 320px; text-align: center; }
            .card h3 { font-size: 22px; margin-bottom: 10px; }

            /* --- CARROSSEL --- */
            .carousel-container { position: relative; width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 15px; }
            .carousel-slide { display: flex; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); width: 100%; }
            .carousel-slide img { width: 100%; flex-shrink: 0; border-radius: 10px; cursor: pointer; transition: opacity 0.3s; }
            .carousel-slide img:hover { opacity: 0.85; }
            .btn-cristal {
                position: absolute; top: 50%; transform: translateY(-50%);
                background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.9); border-radius: 50%;
                cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.4s ease; z-index: 10;
            }
            .btn-cristal:hover {
                background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.7);
                color: #fff; transform: translateY(-50%) scale(1.05); box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
            }
            .carousel-prev, .carousel-next { width: 45px; height: 45px; font-size: 20px; font-weight: 300; }
            .carousel-prev { left: 10px; } .carousel-next { right: 10px; }

            /* Botões "Saber Mais" */
            .btn-saber-mais {
                margin-top: 15px; padding: 12px 24px; background-color: #2c3e50; color: white;
                border: none; border-radius: 8px; cursor: pointer; transition: 0.3s;
                text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 1px; width: 100%;
            }
            .btn-saber-mais:hover { background-color: #b58500; }

            /* 6. FORMULÁRIO DE CONTATO */
            .contato { max-width: 500px; margin: 50px auto; padding: 40px; text-align: center; }
            .contato h2 { font-size: 32px; margin-bottom: 10px; }
            .contato form { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
            .contato input, .contato textarea, .contato select {
                padding: 15px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.9);
                font-size: 16px; font-family: 'Montserrat', sans-serif; color: #333;
            }
            .contato select:invalid { color: #777; }
            .contato button {
                padding: 15px; background-color: #2c3e50; color: white; border: none;
                border-radius: 8px; font-weight: 600; font-size: 16px; cursor: pointer; transition: 0.3s;
                text-transform: uppercase; letter-spacing: 1px;
            }
            .contato button:hover { background-color: #b58500; }

            /* 7. RODAPÉ E WHATSAPP */
            footer { text-align: center; padding: 30px; margin-top: 50px; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); }
            footer a { margin: 0 10px; text-decoration: none; color: #2c3e50; font-weight: bold; }
            .whatsapp-btn {
                position: fixed; bottom: 30px; right: 30px; background-color: #25d366; color: white; border-radius: 50%;
                width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; z-index: 1000;
            }

            /* 8. MODAL PADRÃO (Base para os dois modais) */
            .modal-base {
                display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%;
                background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); justify-content: center; align-items: center;
            }

            /* 8A. Modal de Zoom da Imagem e Legenda */
            .modal-container-img {
                display: flex; flex-direction: column; align-items: center; max-width: 90%; max-height: 90%;
            }
            .modal-conteudo { max-width: 100%; max-height: 80vh; border-radius: 12px; animation: zoomIn 0.3s ease; }
            
            .legenda-modal {
                color: #fff; margin-top: 15px; font-size: 16px; font-weight: 400; letter-spacing: 1px;
                text-align: center; animation: zoomIn 0.3s ease; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
            }

            @keyframes zoomIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
            .fechar-modal { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; cursor: pointer; z-index: 3010; }
            .modal-prev, .modal-next { width: 60px; height: 60px; font-size: 28px; z-index: 3010; }
            .modal-prev { left: 20px; } .modal-next { right: 20px; }

            /* 8B. Modal de Ficha Técnica (Saber Mais) */
            .caixa-info {
                background: rgba(255, 255, 255, 0.95); padding: 40px; border-radius: 16px; width: 90%; max-width: 600px;
                text-align: left; position: relative; animation: zoomIn 0.3s ease; box-shadow: 0 15px 40px rgba(0,0,0,0.5);
            }
            .fechar-info {
                position: absolute; top: 15px; right: 20px; font-size: 30px; font-weight: bold; color: #333; cursor: pointer; transition: 0.3s;
            }
            .fechar-info:hover { color: #d4af37; }
            .caixa-info h2 { color: #2c3e50; margin-bottom: 15px; font-size: 28px; border-bottom: 2px solid #d4af37; padding-bottom: 10px;}
            .caixa-info p { margin-bottom: 20px; font-size: 16px; line-height: 1.6; color: #555;}
            .caixa-info ul { margin-bottom: 30px; padding-left: 20px; font-size: 15px; line-height: 2; color: #333;}
            
            .info-botoes { display: flex; gap: 15px; flex-wrap: wrap; }
            .btn-info-whats, .btn-info-form {
                flex: 1; padding: 15px; text-align: center; text-decoration: none; border-radius: 8px;
                font-weight: 600; text-transform: uppercase; font-size: 14px; transition: 0.3s; color: white;
            }
            .btn-info-whats { background-color: #25d366; } .btn-info-whats:hover { background-color: #1ebe57; }
            .btn-info-form { background-color: #2c3e50; } .btn-info-form:hover { background-color: #b58500; }

            /* 9. RESPONSIVIDADE */
            @media (max-width: 768px) {
                nav { flex-direction: column; gap: 10px; padding: 10px; } nav ul { flex-wrap: wrap; }
                .hero { padding: 40px 15px; } .card { width: 100%; max-width: 350px; }
                .fechar-modal { top: 10px; right: 20px; } .modal-prev, .modal-next { width: 45px; height: 45px; font-size: 20px; }
                .modal-prev { left: 10px; } .modal-next { right: 10px; }
                .caixa-info { padding: 25px 20px; } .info-botoes { flex-direction: column; gap: 10px; }
                .legenda-modal { font-size: 14px; } /* Legenda um pouco menor no celular */
            }