.elementor-2035 .elementor-element.elementor-element-2751f4c{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-080160e */<style>
    /* 1. CONFIGURAÇÕES GERAIS */
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

    * { box-sizing: border-box; }

    .page-links-body {
        background-color: #f3f4f6;
        padding: 40px 15px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px; 
        font-family: 'Montserrat', sans-serif;
    }

    /* 2. CARD (SESSÃO) - O CONTAINER DO BRILHO */
    .card-sessao {
        display: flex;
        flex-direction: row; 
        background-color: #111111;
        width: 100%;
        max-width: 550px;
        min-height: 220px;
        border-radius: 20px;
        text-decoration: none;
        position: relative;
        overflow: hidden; /* Corta o brilho para ficar só na borda */
        padding: 2px; /* Define a espessura da borda de brilho */
        transition: all 0.4s ease;
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    /* 3. O BRILHO QUE GIRA (ATRÁS DE TUDO) */
    .card-sessao::before {
        content: '';
        position: absolute;
        width: 150%;
        height: 150%;
        background-image: conic-gradient(
            transparent, 
            transparent, 
            #d98e3d, /* Cor do brilho */
            transparent, 
            transparent
        );
        top: -25%;
        left: -25%;
        animation: rodar 3s linear infinite;
        z-index: 0;
    }

    @keyframes rodar {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* 4. CONTEÚDO DO CARD (ACIMA DO BRILHO) */
    .imagem-container, .texto-container {
        position: relative;
        z-index: 2; /* Garante que fiquem acima do brilho */
        background-color: #111111; /* Fundo sólido para cobrir o centro do brilho */
    }

    /* Ajuste para a imagem não perder o arredondado do canto esquerdo */
    .imagem-container {
        flex: 0.9;
        background-size: cover;
        background-position: center top;
        border-radius: 18px 0 0 18px; 
    }

    /* Efeito de transição na foto */
    .imagem-container::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        height: 100%;
        background: linear-gradient(to right, transparent, #111111);
    }

    .texto-container {
        flex: 1.1;
        padding: 25px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 0 18px 18px 0;
    }

    .titulo-sessao {
        color: #ffffff;
        font-size: 19px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .desc-sessao {
        color: #aaaaaa;
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    /* 5. BOTÃO */
    .btn-acao {
        background: linear-gradient(90deg, #d98e3d, #f2b872);
        color: #000;
        text-align: center;
        padding: 12px 20px;
        border-radius: 10px;
        font-weight: 800;
        font-size: 11px;
        text-transform: uppercase;
        align-self: flex-start;
    }

    /* 6. AJUSTES MOBILE */
    @media (max-width: 480px) {
        .card-sessao { min-height: 180px; }
        .titulo-sessao { font-size: 15px; }
        .desc-sessao { font-size: 10px; }
        .btn-acao { padding: 8px 14px; font-size: 9px; }
    }
</style>

<div class="page-links-body">

    <a href="https://w.app/zxt05n" class="card-sessao">
        <div class="imagem-container" style="background-image: url('https://jeanbiancatovisagista.com/wp-content/uploads/2026/01/carrossel-jean-instagram-.png');"></div>
        <div class="texto-container">
            <h2 class="titulo-sessao">Visagismo Presencial em São Paulo/ santa catarina</h2>
            <p class="desc-sessao">Consultoria presencial com jean para moldar sua imagem e posicionamento.</p>
            <div class="btn-acao">agendar agora</div>
        </div>
    </a>

    <a href="https://w.app/7ziopl" class="card-sessao">
        <div class="imagem-container" style="background-image: url('https://jeanbiancatovisagista.com/wp-content/uploads/2026/04/IMG_3926-scaled.jpeg');"></div>
        <div class="texto-container">
            <h2 class="titulo-sessao">Cursos, Palestras e Workshops</h2>
            <p class="desc-sessao">Cursos para profissionais da área e palestras, workshops sobre imagem estratégica .</p>
            <div class="btn-acao">contratar</div>
        </div>
    </a>

    <a href="https://jeanbiancatovisagista.com/imagem-intencional/" class="card-sessao">
        <div class="imagem-container" style="background-image: url('https://jeanbiancatovisagista.com/wp-content/uploads/2026/04/Imagem-2.jpeg');"></div>
        <div class="texto-container">
            <h2 class="titulo-sessao">Guia Imagem Intencional</h2>
            <p class="desc-sessao"> Aprenda a definir seu visual sem depender de ninguém.</p>
            <div class="btn-acao">acessar o guia</div>
        </div>
    </a>

    <a href="https://w.app/61yvhd" class="card-sessao">
        <div class="imagem-container" style="background-image: url('https://jeanbiancatovisagista.com/wp-content/uploads/2025/04/mocukup-para-online--scaled.png');"></div>
        <div class="texto-container">
            <h2 class="titulo-sessao">Consultoria On-line</h2>
            <p class="desc-sessao">Consultoria visagismo on-line e posicionamento de onde você estiver.</p>
            <div class="btn-acao">agendar agora</div>
        </div>
    </a>

</div>/* End custom CSS */