<div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.body.style.backgroundColor = "white";
        });
    </script>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <style>
        body-page {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        h1,
        h2 {
            color: #333;
        }

        h1 span,
        h2 span {
            color: #B09043;
        }

        .services-section {
            margin-top: 20px;
        }

        .flip-card {
            background-color: transparent;
            width: 15%;
            max-width: 20%;
            perspective: 1000px;
            margin: 10px 10px 10px 0;
            flex: 1;
            flex-basis: calc(33.33% - 10px);
        }

        @media (max-width: 768px) {
            .flip-card {
                max-width: 80%;
                /* Aumenta a largura máxima para dispositivos móveis */
                width: 100%;
                /* Largura total do card para dispositivos móveis */
                margin: 10px auto;
                /* Centraliza os cards e ajusta o espaçamento */
            }

            .services-container {
                flex-direction: column;
                /* Muda a direção para coluna para forçar a quebra de linha */
                align-items: center;
                /* Centraliza os cards no eixo cruzado */
            }
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 170px;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateX(180deg);
        }

        .flip-card-front,
        .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .flip-card-front {
            background-color: #B09043;
            color: white;
            font-weight: bold;
        }

        .flip-card-back {
            background-color: #333;
            color: white;
            transform: rotateX(180deg);
            font-size: 12px;
            padding: 10px;
            /* Adiciona espaço interno */
            box-sizing: border-box;
            /* Inclui padding no tamanho total */
        }

        .flip-card .icon {
            font-size: 3em;
            margin-bottom: 10px;
        }

        .flip-card .button {
            padding: 10px 20px;
            background-color: #B09043;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin-top: 10px;
        }

        .flip-card .button:hover {
            background-color: #B09043;
        }

        .services-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
    </style>
    <div class="body-page">

        <div class="container">
            <h1>Área do <span>Cliente</span></h1>
            <p>Para sua comodidade, utilize os nossos serviços abaixo:</p>

            <h2>Já sou <span>Cliente</span></h2>
            <div class="services-container">
                <div class="flip-card">
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <i class="fas fa-barcode icon"></i>
                            <p>Segunda via de boleto</p>
                        </div>
                        <div class="flip-card-back">
                            <p>Clique no botão abaixo e acesse a segunda via de seu boleto</p>
                            <a class="button"
                                href="https://www.univencrm.com.br/segunda-via-boleto/?fkempresa=36">Acessar</a>
                        </div>
                    </div>
                </div>
                <div class="flip-card">
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <i class="fas fa-file-contract icon"></i>
                            <p>Extrato de recebimento</p>
                        </div>
                        <div class="flip-card-back">
                            <p>Clique no botão abaixo e acesse o seu extrato de Repasse de Aluguel</p>
                            <a class="button"
                                href="https://www.univencrm.com.br/uniloc-extrato/?fkempresa=36">Acessar</a>
                        </div>
                    </div>
                </div>
                <div class="flip-card">
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <i class="fas fa-key icon"></i>
                            <p>Aviso de desocupação</p>
                        </div>
                        <div class="flip-card-back">
                            <p>Vai devolver o imóvel?<br>Preencha o aviso de desocupação</p>
                            <a class="button" href="/aviso-de-desocupacao/">Preencher</a>
                        </div>
                    </div>
                </div>
            </div>

            <h2>Estou alugando um <span>Imóvel</span></h2>
            <div class="services-container">
                <div class="flip-card">
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <i class="fas fa-home icon"></i>
                            <p>Locador</p>
                        </div>
                        <div class="flip-card-back">
                            <p>Cadastro de Locador</p>
                            <a class="button" href="/quero-anunciar/">Preencher</a>
                        </div>
                    </div>
                </div>
                <div class="flip-card">
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <i class="fas fa-file icon"></i>
                            <p>Locatário</p>
                        </div>
                        <div class="flip-card-back">
                            <p>Cadastro de Locatário</p>
                            <a class="button" href="/fale-conosco">Preencher</a>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

Excelência em Venda e Locação de Imóveis Residenciais e Comerciais, e Lançamentos. Imobiliária com mais de 30 anos de atuação em Campinas e Região.

Referência

Confiança

Exclusivo

Excelência 

Sofisticação

Credibilidade

Qualidade

Área do Cliente

Simulador Credipronto

Piccoloto

Piccoloto Negócios Imobiliários

Comercial

Casa

Fazenda

Galpão

Hotel

Prédio

Sala

Salão

Sobrado

Terreno

Área

Industrial

Residencial

Apartamento

Apartamento Duplex

Apartamento Garden

Chácara

Cobertura

Flat

Sítio

Política de Privacidade

Piccoloto Negócios Imobiliários - Imóveis e lançamentos imobiliários em Campinas

Piccoloto Negócios Imobiliários - Imóveis e lançamentos imobiliários em Campinas

Área do Cliente

Já sou Cliente

Estou alugando um Imóvel