/* 1. VARIÁVEIS DE CORES DA SUA LOGO */
        :root {
            --azul-primario: rgba(11, 103, 166, 1);
            --azul-secundario: rgba(11, 112, 164, 1);
            --cinza-escuro: rgba(64, 64, 64, 1);
            --branco: #ffffff;
            --gelo: #f4f7f9;
        }

        /* 2. CONFIGURAÇÕES GERAIS */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: var(--gelo); color: var(--cinza-escuro); line-height: 1.6; overflow-x: hidden; }
        html { scroll-behavior: smooth; }

        /* 3. CABEÇALHO (HEADER) */
        header {
            background: var(--branco);
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .logo { font-size: 1.8rem; font-weight: bold; color: var(--azul-primario); letter-spacing: 1px; }
        nav a { margin-left: 20px; text-decoration: none; color: var(--cinza-escuro); font-weight: 500; transition: 0.3s; }
        nav a:hover { color: var(--azul-primario); }
        .btn-header { background: var(--azul-primario); color: white; padding: 8px 18px; border-radius: 5px; font-size: 0.9rem; }

        /* 4. CARROSSEL (BANNER PRINCIPAL) - AJUSTADO SANGRA-PONTAS */
        .hero-carousel {
            position: relative;
            width: 100%;       /* Ocupa 100% do container pai */
            height: 80vh;      /* Altura do banner */
            overflow: hidden;
            background: var(--cinza-escuro);
            padding: 0 !important; /* FORÇA a remoção do padding de 8% da section */
            margin: 0 !important;  /* Remove margens */
        }

        .carousel-track {
            display: flex;
            width: 400%;
            height: 100%;
            animation: carouselSlide 24s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
        }

        .carousel-slide {
            width: 25%;    /* Ajuste para que cada slide tenha exatamente 1/3 do track (100% da tela) */
            height: 100%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* Sobreposição para leitura */
        .carousel-slide::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        .carousel-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
            width: 90%;
            max-width: 1200px;
        }

        .carousel-content h1 { font-size: 3rem; margin-bottom: 15px; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
        .carousel-content p { font-size: 1.2rem; margin-bottom: 25px; opacity: 0.9; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }

        /* Animação simplificada para evitar saltos */
        @keyframes carouselSlide {
            0%, 20% { transform: translateX(0%); }
            25%, 45% { transform: translateX(-25%); }
            50%, 70% { transform: translateX(-50%); }
            75%, 95% { transform: translateX(-75%); }
            100% { transform: translateX(0%); }
        }
		
		/* 4.1 INDICADORES PARA 4 SLIDES */
        .carousel-indicators {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            z-index: 10;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: 0.3s;
        }

        /* Animação sincronizada com o ciclo de 24s */
        .indicator:nth-child(1) { animation: activeInd1 24s infinite; }
        .indicator:nth-child(2) { animation: activeInd2 24s infinite; }
        .indicator:nth-child(3) { animation: activeInd3 24s infinite; }
        .indicator:nth-child(4) { animation: activeInd4 24s infinite; }

        /* Bolinha 1 (Slide T.I) */
        @keyframes activeInd1 {
            0%, 20% { background: var(--azul-secundario); transform: scale(1.3); }
            25%, 100% { background: rgba(255, 255, 255, 0.3); transform: scale(1); }
        }

        /* Bolinha 2 (Slide PABX) */
        @keyframes activeInd2 {
            0%, 20% { background: rgba(255, 255, 255, 0.3); transform: scale(1); }
            25%, 45% { background: var(--azul-secundario); transform: scale(1.3); }
            50%, 100% { background: rgba(255, 255, 255, 0.3); transform: scale(1); }
        }

        /* Bolinha 3 (Slide Estacionamento) */
        @keyframes activeInd3 {
            0%, 45% { background: rgba(255, 255, 255, 0.3); transform: scale(1); }
            50%, 70% { background: var(--azul-secundario); transform: scale(1.3); }
            75%, 100% { background: rgba(255, 255, 255, 0.3); transform: scale(1); }
        }

        /* Bolinha 4 (Slide Condominial) */
        @keyframes activeInd4 {
            0%, 70% { background: rgba(255, 255, 255, 0.3); transform: scale(1); }
            75%, 95% { background: var(--azul-secundario); transform: scale(1.3); }
            100% { background: rgba(255, 255, 255, 0.3); transform: scale(1); }
        }

        /* 5. SEÇÕES E CARDS */
        section { padding: 80px 8%; }
        .section-title { text-align: center; margin-bottom: 50px; font-size: 2.2rem; color: var(--azul-primario); position: relative; }
        .section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--azul-secundario); margin: 10px auto; }

        .grid-servicos {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        .card {
            /*background: white;*/
			background: rgba(255, 255, 255, 0.8); 
			backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: 0.4s;
            border-top: 5px solid var(--azul-primario);
        }
        .card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
        .card h3 { color: var(--azul-primario); margin-bottom: 15px; font-size: 1.4rem; }
        .card ul { list-style: none; margin-bottom: 20px; }
        .card li { margin-bottom: 8px; font-size: 0.95rem; display: flex; align-items: center; }
        .card li::before { content: '✔'; color: var(--azul-secundario); margin-right: 10px; font-weight: bold; }

        /* 6. PILARES (MISSÃO, VISÃO, VALORES) */
        .pilar-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-between;
        }
        .pilar-item {
            flex: 1;
            min-width: 300px;
            background: white;
            padding: 30px;
            border-radius: 8px;
            border-left: 5px solid var(--azul-secundario);
        }
        .pilar-item h4 { color: var(--azul-primario); margin-bottom: 10px; font-size: 1.2rem; }

        /* 7. RODAPÉ (FOOTER) */
        footer {
            background: var(--cinza-escuro);
            color: white;
            padding: 60px 8% 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
        }
        footer h4 { color: var(--azul-secundario); margin-bottom: 20px; text-transform: uppercase; }
        footer p, footer li { font-size: 0.9rem; opacity: 0.8; list-style: none; margin-bottom: 12px; }
        .copyright { text-align: center; padding: 20px; background: #1a1a1a; color: #666; font-size: 0.8rem; }

        /* RESPONSIVIDADE */
        @media (max-width: 768px) {
            header nav { display: none; }
            .carousel-content h1 { font-size: 1.8rem; }
            .hero-carousel { height: 60vh; }
        }
		
		/* 8. FORMULÁRIO DE CONTATO */
        .contato-wrapper {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }

        .form-grupo { margin-bottom: 20px; }
        .form-grupo label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--azul-primario); }
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            outline: none;
            transition: 0.3s;
        }
        .form-input:focus { border-color: var(--azul-secundario); box-shadow: 0 0 5px rgba(11, 112, 164, 0.2); }
        
        .btn-enviar {
            background: var(--azul-primario);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            width: 100%;
            transition: 0.3s;
        }
        .btn-enviar:hover { background: var(--azul-secundario); }

        /* 9. REDES SOCIAIS NO RODAPÉ */
        .social-links { display: flex; gap: 20px; margin-top: 20px; }
        .social-icon {
            width: 35px;
            height: 35px;
            background: rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: white;
            text-decoration: none;
            transition: 0.3s;
            font-size: 1.2rem;
        }
        .social-icon:hover { background: var(--azul-secundario); transform: translateY(-3px); }
		
		/* 10. OTIMIZAÇÃO PARA DISPOSITIVOS MÓVEIS */
        @media (max-width: 768px) {
            section { padding: 40px 5%; } /* Diminui o respiro lateral */
            
            .section-title { font-size: 1.8rem; }
            
            .carousel-content h1 { font-size: 1.6rem; }
            .carousel-content p { font-size: 1rem; }
            .hero-carousel { height: 50vh; } /* Banner menor no celular */

            /* Faz os itens de Rodapé e Contato ficarem em coluna única */
            .contato-wrapper, footer {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .social-links { justify-content: center; }

            .pilar-container { flex-direction: column; }
            .pilar-item { min-width: 100%; }

            /* Ajuste de margem para o mapa no mobile */
            .map-container { height: 250px; margin-top: 20px; }
        }

        /* Otimização de Imagens (Lazy Loading nativo no HTML) */
        img { max-width: 100%; height: auto; display: block; }
		
/* CONFIGURAÇÃO DOS BÕES CARD */
.card {
	backgrounf: white;
	padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
	display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empurra o botão para o fim */
    align-items: center; /* Centraliza tudo horizontalmente */
    text-align: center;
    transition: 0.3s;	
}
		
.btn-card {
	display: inline-block;
	margin-top: 15px;
	padding: 10px 20px;
	background-color: var(--azul-primario);
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	font-size: 0.9rem;
	transition: 0.3s;
	border: 2px solid var(--azul-primario);
}

.btn-card:hover {
	background-color: transparent;
	color: var(--azul-primario);
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: 0.3s;
}


/* BOTÃO FLUTUANTE DO WHATSAPP */
.whatsapp-float i { font-size: 1.5rem; }

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #128c7e;
}

/* Esconde o texto no celular para ficar apenas o ícone circular */
@media (max-width: 768px) {
    .whatsapp-float span { display: none; }
    .whatsapp-float { padding: 15px; border-radius: 50%; }
}