@charset "UTF-8";
       body {
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           background-color: #f8f9fa;
           margin: 0;
           padding: 0;
       }
       header {
           background: linear-gradient(90deg, #2c3e50, #4facfe);
           color: white;
           padding: 40px 20px;
           text-align: center;
       }
       .header-left {
	    display: flex;
	    align-items: center;
	    gap: 15px;
	}
	.header-text h1 {
	    margin: 0;
	    font-size: 3.0rem;
	    text-align: left;		    
           margin-bottom: 10px;
	}
	
	.header-text h2 {
	    margin: 0;
	    font-weight: normal;
	    color: white;
	    text-align: left;
	    font-size: 2.0em;
           opacity: 0.9;;
	}
	.login-btn {
	    position: absolute; 
	    right: 15px; 
	    top: 15px; 
	    background-color: #2c3e50; 
	    border: none;
	}

       header h1 {
           font-size: 2.5em;
           margin-bottom: 10px;
       }
       header p {
           font-size: 1.2em;
           opacity: 0.9;
       }
       .container {
           max-width: 1200px;
           margin: auto;
           padding: 40px 20px;
       }
/* ---- AJUSTES NA SEÇÃO DE BENEFÍCIOS (DIV.BENEFITS) ---- */
.benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    padding: 50px 20px; /* Aumenta o espaçamento interno para dar "respiro" */
}

/* ---- AJUSTES GERAIS NOS CARDS (DIV.CARD) ---- */
.card {
    background: #ffffff; /* Fundo branco para um visual mais limpo */
    padding: 30px; /* Aumenta o espaçamento interno */
    border-radius: 16px; /* Aumenta o raio da borda para um visual mais suave */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Sombra mais suave e destacada */
    border-top: 5px solid transparent; /* Adiciona uma borda superior que será colorida */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para o efeito de hover */
}

/* Adicione uma cor de destaque diferente para cada card, usando seletor n-th-child */
.card:nth-child(1) { border-top-color: #4facfe; } /* Azul */
.card:nth-child(2) { border-top-color: #25D366; } /* Verde WhatsApp */
.card:nth-child(3) { border-top-color: #2c3e50; } /* Cinza Escuro */

/* Efeito de elevação ao passar o mouse */
.card:hover {
    transform: translateY(-8px); /* Eleva o card suavemente */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
}

/* ---- AJUSTES NAS LISTAS (UL) E ITENS (LI) ---- */
.card h2 {
    font-size: 1.6em; /* Aumenta o tamanho do título */
    text-align: center; /* Centraliza o título */
    margin-bottom: 25px;
    position: relative;
}

/* Adiciona uma linha de destaque abaixo do título */
.card h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #4facfe; /* Cor de destaque */
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
/* Altere a cor da linha de destaque para cada card */
.card:nth-child(2) h2::after { background: #25D366; }
.card:nth-child(3) h2::after { background: #2c3e50; }

.card ul {
    list-style: none; /* Remove os marcadores padrão */
    padding: 0;
}

.card ul li {
    font-size: 1.1em;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0; /* Adiciona uma linha divisória para cada item */
    color: #555;
    position: relative;
    padding-left: 35px; /* Espaço para o ícone */
}

/* Adiciona um ícone personalizado para cada item da lista (usando pseudo-elemento) */
.card ul li::before {
    content: "✓"; /* Ícone de checkmark */
    font-family: Arial, sans-serif;
    color: #4facfe; /* Cor do ícone */
    font-weight: bold;
    font-size: 1.3em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.card:nth-child(2) ul li::before { color: #25D366; }
.card:nth-child(3) ul li::before { color: #2c3e50; }




    ul {
        padding-left: 20px;
    }
    .cta {
        text-align: center;
        margin-top: 50px;
    }
    .cta p {
        font-size: 1.2em;
        margin-bottom: 20px;
    }
/* ---- AJUSTES NA SEÇÃO PRINCIPAL ---- */
.plano {
    /* flex: 1 1 300px;  - Este é um atalho para as 3 propriedades abaixo */
    flex-grow: 1; /* Permite que os cards cresçam para preencher o espaço disponível */
    flex-shrink: 1; /* Permite que os cards encolham para caber no espaço */
    flex-basis: 300px; /* Define um tamanho base de 300px para cada card */
    max-width: 380px; /* Limita a largura máxima para que não fiquem muito largos */
    
    /* Demais estilos do plano (cores, sombra, etc.) que já temos */
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid transparent;
    position: relative;
}

.planos h2 {
    font-size: 2.5rem; /* Aumenta o tamanho do título */
    margin-bottom: 40px;
    color: #2c3e50;
    position: relative;
}

/* Adiciona um sublinhado elegante ao título */
.planos h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #007bff; /* Cor de destaque */
    margin: 10px auto 0;
    border-radius: 2px;
}

/* ---- AJUSTES NOS CARTÕES DE PLANOS ---- */
.plano {
    background: #ffffff; /* Fundo branco para um visual limpo */
    padding: 30px;
    border-radius: 16px;
    flex: 1 1 300px;
    max-width: 320px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Sombra mais destacada */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efeito de elevação suave */
    border: 3px solid transparent; /* Adiciona uma borda que pode ser usada para destaque */
    position: relative; /* Para a tag de destaque */
    opacity: 0;
    transform: translateY(30px);
    
}

/* Classe que será adicionada via JavaScript */
.planos.animado .plano {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Adicionando um atraso para cada plano */
.planos.animado .plano:nth-child(1) { transition-delay: 0.1s; }
.planos.animado .plano:nth-child(2) { transition-delay: 0.3s; }
.planos.animado .plano:nth-child(3) { transition-delay: 0.5s; }

/* Efeito de elevação no hover */
.plano:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* ---- DESTAQUE DO PLANO MAIS POPULAR (Plano Prata) ---- */
.plano.bronze {
    border-color: #007bff; /* Borda de destaque para o plano */
    transform: scale(1.05); /* Ligeiramente maior */
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* Efeito de elevação no hover para o plano destacado */
.plano.bronze:hover {
    transform: scale(1.05) translateY(-10px);
}

/* Adiciona uma tag de "Mais Popular" */
.plano.bronze::before {
    content: 'Mais Popular';
    position: absolute;
    top: -15px;
    right: -15px;
    background: #007bff;
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    transform: rotate(5deg); /* Uma leve inclinação para chamar atenção */
}

	/* ---- AJUSTES DE TEXTO E BOTÕES ---- */
	.plano h3 {
	    font-size: 1.8rem; /* Aumenta o tamanho do título do plano */
	    margin-bottom: 15px;
	    color: #333;
	}
	
	.plano p {
	    font-size: 1.0rem;
	    color: #666;
	    margin-bottom: 15px;
	}
	
	.plano strong {
	    color: #2c3e50; /* Destaca os valores importantes */
	}
	
	.preco {
	    font-size: 1.5rem; /* Aumenta o tamanho do preço principal */
	    font-weight: bold;
	    color: #2c3e50;
	    margin: 20px 0 10px; /* Mais espaço */
	}
	
	.risco {
	    font-size: 1rem;
	    color: #888;
	}
	
	.plano button {
	    background: #007bff;
	    color: #fff;
	    border: none;
	    padding: 15px;
	    border-radius: 50px; /* Borda arredondada para um visual mais moderno */
	    cursor: pointer;
	    font-size: 1.1rem;
	    font-weight: bold;
	    letter-spacing: 1px;
	    transition: 0.3s;
	    text-transform: uppercase; /* Deixa o texto em caixa alta */
	}
	
	.plano button:hover {
	    background: #0056b3;
	    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	}
	
	/* Cores personalizadas */
	.bronze h3 { color: #cd7f32; }
	.prata h3 { color: #808080; }
	.ouro h3 { color: #ffd700; }
	
	/* Opcional: Para telas ainda menores, os cards podem ficar um abaixo do outro */
	@media (max-width: 768px) {
	    .planos-container {
	        flex-direction: column;
	        align-items: center; /* Centraliza os itens na coluna */
	    }
	
	    .plano {
	        max-width: 90%; /* Ajusta a largura para telas pequenas */
	    }
	}
	/* Container que agrupa os planos */
	.planos-container {
	    display: flex; /* Define o contêiner como flexbox */
	    flex-direction: row; /* Garante que os itens fiquem na mesma linha por padrão */
	    flex-wrap: wrap; /* Permite que os itens quebrem a linha em telas menores */
	    justify-content: center; /* Centraliza os cards horizontalmente */
	    gap: 30px; /* Adiciona espaçamento entre os cards. Usei 30px para combinar com a seção de benefícios */
	    /* Você pode ajustar o 'gap' para o valor que preferir. */
	}
	
	
	/* Footer */
.footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: auto;
}

/* Estilização da classe "link-estatico" */
.link-footer:link,
.link-footer:visited,
.link-footer:hover,
.link-footer:active {
    color: #fff;
    text-decoration: none; /* Sem sublinhado */
}
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    /* Estilos adicionais para o ícone, se houver (background, imagem, etc.) */
    background-color: #25D366; /* Exemplo de cor do WhatsApp */
    border-radius: 50%; /* Para torná-lo redondo */
    display: flex; /* Para centralizar o ícone interno, se for uma imagem */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para profundidade */

    /* ANIMAÇÃO DE PULSO */
    animation: pulse 2s infinite; /* Aplica a animação 'pulse' por 2 segundos, repetindo infinitamente */
}

@keyframes pulse {
    0% {
        transform: scale(1); /* Tamanho normal */
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); /* Sombra transparente */
    }
    70% {
        transform: scale(1.05); /* Ligeiramente maior */
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); /* Sombra que se espalha e fica transparente */
    }
    100% {
        transform: scale(1); /* Volta ao tamanho normal */
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); /* Sombra transparente novamente */
    }
}
.agendamento-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 100px;
    z-index: 500;
    
    /* Adicione estes estilos para o visual do botão */
    background-color: #007bff; /* Exemplo de cor azul */
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    
    /* A LINHA ABAIXO É A ANIMAÇÃO */
    animation: pulse2 2s infinite;
}

@keyframes pulse2 {
    0% {
        transform: scale(1); /* Tamanho normal */
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); /* Sombra que se espalha */
    }
    70% {
        transform: scale(1.05); /* Ligeiramente maior */
        box-shadow: 0 0 0 15px rgba(0, 123, 255, 0); /* A sombra se espalha e fica transparente */
    }
    100% {
        transform: scale(1); /* Volta ao tamanho normal */
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); /* Sombra transparente novamente */
    }
}