/* Estilos Gerais */
body { 
    font-family: 'Inter', sans-serif; 
}
.pulse-animation { 
    animation: pulse 2s infinite; 
}
@keyframes pulse { 
    0%, 100% { transform: scale(1); } 
    50% { transform: scale(1.03); } 
}
.floating { 
    animation: floating 3s ease-in-out infinite;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.card-hover { 
    transition: all 0.3s ease; 
    opacity: 0;
    transform: translateY(20px);
}
.card-hover.in-view,
.floating.in-view {
    max-width: 70%;
    opacity: 1;
    transform: translateY(0);
}
.card-hover:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 20px 40px rgba(249, 88, 23, 0.2);
}

/* ===== ESTILOS PARA SEÇÃO DE DEMOS ===== */
.demo-carousel {
    display: flex;
    gap: 39px;
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: #F95817 #374151; /* Laranja e Cinza */
}
.demo-carousel::-webkit-scrollbar {
    height: 8px;
}
.demo-carousel::-webkit-scrollbar-track {
    background: #1f2937; /* Cinza escuro */
}
.demo-carousel::-webkit-scrollbar-thumb {
    background-color: #F95817; /* Laranja */
    border-radius: 10px;
    border: 2px solid #1f2937;
}
.demo-card {
    background: #1f2937; /* bg-gray-800 */
    border: 1px solid #374151; /* bg-gray-700 */
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}
.demo-card.playing {
    border-color: #F95817;
    box-shadow: 0 0 15px rgba(249, 88, 23, 0.4);
    transform: translateY(-5px);
}
.demo-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #4b5563; /* bg-gray-600 */
    margin-bottom: 10px;
    transition: border-color 0.3s ease;
}
.demo-card.playing .demo-photo {
    border-color: #F95817;
}
.demo-name {
    font-weight: 600;
    color: #d1d5db; /* text-gray-300 */
    margin-bottom: 15px;
    font-size: 0.9rem;
}
.play-button {
    background-color: #4b5563; /* bg-gray-600 */
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    margin-top: auto;
}
.demo-card:hover .play-button,
.demo-card.playing .play-button {
    background-color: #F95817;
}

/* ===== ESTILOS PARA SEÇÃO DE PLANOS (CORRIGIDO) ===== */

/* Estilo do botão de plano ativo (laranja) */
.plan-toggle-btn.active {
    background-color: #F95817;
    color: white;
    box-shadow: 0 2px 10px rgba(249, 88, 23, 0.3);
}

/* Estilo do botão inativo */
.plan-toggle-btn {
    transition: all 0.3s ease;
}

/* Esconder os elementos de preço e links de compra que não estão ativos */
.price-monthly.hidden, 
.price-annual.hidden,
.link-monthly.hidden,
.link-annual.hidden {
    display: none;
}