/* Importação das fontes */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Variáveis CSS para fontes e cores */
:root {
    --font-chocolates: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-dm-sans: 'DM Sans', sans-serif;
    --font-montserrat: 'Montserrat', sans-serif;
    
    /* Cores da marca */
    --brand-pink: #e70e45;
    --brand-purple: #833ab4;
    --brand-yellow: #ffcc00;
    --brand-gradient-1: #833ab4;
    --brand-gradient-2: #e1306c;
    --brand-gradient-3: #fd1d1d;
    --brand-dark-bg: #1c2120;
    
    /* Timing functions profissionais */
    --ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* === SISTEMA DE ANIMAÇÕES PROFISSIONAIS === */

/* Performance otimizada */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Configuração básica sem scroll customizado */
html {
    scroll-padding-top: 80px;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    /* Otimizações para performance */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Reduzir animações em dispositivos com preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Estados iniciais para animações de entrada */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--ease-out-cubic);
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation para múltiplos elementos */
.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.4s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.5s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.6s; }

/* Animações específicas por tipo */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s var(--ease-out-cubic);
}

.fade-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.fade-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s var(--ease-out-cubic);
}

.fade-left.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.fade-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s var(--ease-out-cubic);
}

.fade-right.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s var(--ease-bounce);
}

.scale-in.animate-in {
    opacity: 1;
    transform: scale(1);
}

/* === ANIMAÇÕES DE ELEMENTOS ESPECÍFICOS === */

/* Hero Section - Animação especial para título principal */
.hero-title {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    animation: heroTitleReveal 1.2s var(--ease-out-cubic) 0.3s forwards;
}

@keyframes heroTitleReveal {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hero Author - Animação com typing effect */
.hero-author {
    opacity: 0;
    animation: fadeInUp 0.8s var(--ease-out-cubic) 0.6s forwards;
}

/* Hero Headline - Animação suave */
.hero-headline {
    opacity: 0;
    transform: translateY(30px);
    animation: heroHeadlineReveal 1.2s var(--ease-out-cubic) 0.9s forwards;
}

@keyframes heroHeadlineReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    70% {
        opacity: 0.9;
        transform: translateY(-3px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* === BOTÕES E CTAs PROFISSIONAIS === */

/* Gradiente animado para botões principais */
.gradient-button {
    background: linear-gradient(135deg, var(--brand-gradient-1) 0%, var(--brand-gradient-2) 50%, var(--brand-gradient-3) 100%);
    background-size: 200% 200%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease-out-cubic);
    animation: gradientFlow 3s ease-in-out infinite;
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.gradient-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.7s var(--ease-out-cubic);
}

.gradient-button:hover {
    background: linear-gradient(135deg, #6b2c88 0%, #c72054 50%, #e01818 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(131, 58, 180, 0.5);
    animation: none;
}

.gradient-button:hover::before {
    left: 100%;
}

.gradient-button:active {
    transform: translateY(-1px) scale(1.02);
    transition: all 0.1s ease;
}

/* Animação da seta nos botões */
.arrow-icon {
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.4s var(--ease-bounce);
}

.gradient-button:hover .arrow-icon {
    transform: translateX(8px) scale(1.1);
    animation: arrowBounce 0.6s var(--ease-bounce);
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(8px) scale(1.1); }
    50% { transform: translateX(12px) scale(1.2); }
}

/* === CARDS E ESTATÍSTICAS === */

/* Stats cards com animação de contadores */
.stats-card {
    transition: all 0.4s var(--ease-out-cubic);
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(231, 14, 69, 0.1), transparent);
    transition: left 0.8s var(--ease-out-cubic);
}

.stats-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.stats-card:hover::before {
    left: 100%;
}

/* Animação de números contadores */
.counter-number {
    font-variant-numeric: tabular-nums;
    transition: all 0.3s var(--ease-out-cubic);
}

.counter-number.counting {
    animation: numberPulse 0.1s ease;
}

@keyframes numberPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* === SEÇÃO DE CASOS DE SUCESSO CORRIGIDA === */

/* Container dos perfis - remover efeito geral de hover */
#casos-de-sucesso .grid {
    position: relative;
}

/* Cards de perfis com hover individual elegante */
.profile-card, 
#casos-de-sucesso .grid > div {
    transition: all 0.4s var(--ease-out-cubic);
    position: relative;
    transform-origin: center;
}

/* Card ativo individual fica em destaque */
#casos-de-sucesso .grid > div:hover {
    opacity: 1;
    transform: scale(1.03) translateY(-8px);
    filter: brightness(1.05);
    box-shadow: 0 20px 40px rgba(231, 14, 69, 0.2), 
                0 8px 20px rgba(231, 14, 69, 0.15);
    z-index: 10;
    position: relative;
}

/* Efeito suave no depoimento do Christian */
#casos-de-sucesso .bg-black {
    transition: all 0.4s var(--ease-out-cubic);
}

#casos-de-sucesso .bg-black:hover {
    transform: scale(1.03) translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* Responsividade mobile - efeitos mais suaves */
@media (max-width: 768px) {
    #casos-de-sucesso .grid > div:hover {
        transform: scale(1.02) translateY(-4px);
        box-shadow: 0 10px 20px rgba(231, 14, 69, 0.15);
    }
    
    #casos-de-sucesso .bg-black:hover {
        transform: scale(1.02) translateY(-4px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
}

/* Touch devices - efeito simplificado */
@media (hover: none) {
    #casos-de-sucesso .grid > div:hover {
        transform: none;
        filter: none;
        box-shadow: 0 4px 8px rgba(231, 14, 69, 0.1);
    }
}

/* === SEÇÃO SOBRE MIM PREMIUM === */

/* Badge de especialidade com animação */
.about-section .bg-gradient-to-r {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* Card de foto com efeito premium */
.about-section .rounded-full.bg-gradient-to-br {
    position: relative;
    overflow: hidden;
}

.about-section .rounded-full.bg-gradient-to-br::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--brand-purple), var(--brand-pink), var(--brand-purple));
    border-radius: inherit;
    z-index: -1;
    animation: borderRotate 3s linear infinite;
}

@keyframes borderRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Badge de verificação com pulse */
.about-section .bg-blue-500 {
    animation: verifiedPulse 2s ease-in-out infinite;
}

@keyframes verifiedPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Cards de conquistas com hover elegante */
.about-section .shadow-lg {
    transition: all 0.3s var(--ease-out-cubic);
}

.about-section .shadow-lg:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Métricas com animação de entrada */
.about-section .text-3xl,
.about-section .text-4xl {
    transition: all 0.3s var(--ease-out-cubic);
}

.about-section .text-3xl:hover,
.about-section .text-4xl:hover {
    transform: scale(1.1);
}

/* Background pattern com movimento sutil */
.about-section .absolute.inset-0 {
    animation: patternMove 20s ease-in-out infinite;
}

@keyframes patternMove {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(10px) translateY(-10px); }
    50% { transform: translateX(-5px) translateY(10px); }
    75% { transform: translateX(-10px) translateY(-5px); }
}

/* CTA final com efeito premium */
.about-section .max-w-2xl.mx-auto {
    position: relative;
    overflow: hidden;
}

.about-section .max-w-2xl.mx-auto::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(231, 14, 69, 0.1), transparent);
    transition: left 0.8s var(--ease-out-cubic);
}

.about-section .max-w-2xl.mx-auto:hover::before {
    left: 100%;
}

/* Animação das setas (conectores) */
.step-arrow {
    animation: floatArrow 2s ease-in-out infinite;
}

@keyframes floatArrow {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-5px) rotate(5deg); 
        opacity: 1;
    }
}

/* === CARD PRINCIPAL DE OFERTA CORRIGIDO === */

/* Card de preço com efeitos muito sutis */
#card-preco {
    transition: all 0.6s var(--ease-out-cubic);
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    z-index: 40;
    transform-origin: center;
}

#card-preco::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--brand-gradient-1), var(--brand-gradient-2), var(--brand-gradient-3), var(--brand-gradient-1));
    background-size: 300% 300%;
    border-radius: inherit;
    z-index: -1;
    animation: borderGlow 6s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% { 
        background-position: 0% 50%;
        filter: blur(0px);
    }
    50% { 
        background-position: 100% 50%;
        filter: blur(0.5px);
    }
}

/* Hover muito sutil para o card de preço */
#card-preco:hover {
    transform: translateY(-1px) scale(1.002);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.22);
    z-index: 50;
}

/* Badge de desconto animado */
.badge-offer {
    animation: badgeBounce 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes badgeBounce {
    0%, 100% { transform: rotate(12deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.1); }
}

/* Preço com efeito glow */
.price-glow {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    animation: priceGlow 2s ease-in-out infinite alternate;
}

@keyframes priceGlow {
    0% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
    100% { text-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.2); }
}

/* === CONTADOR REGRESSIVO === */

/* Animação dos números do contador */
#days, #hours, #minutes, #seconds {
    transition: all 0.3s var(--ease-bounce);
    animation: counterPulse 2s infinite;
    font-variant-numeric: tabular-nums;
}

@keyframes counterPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Efeito especial para segundos */
#seconds {
    animation: secondsTick 1s infinite;
    color: var(--brand-pink);
}

@keyframes secondsTick {
    0% { 
        transform: scale(1);
        color: var(--brand-pink);
    }
    50% { 
        transform: scale(1.1);
        color: #ff1744;
        text-shadow: 0 0 10px rgba(255, 23, 68, 0.5);
    }
    100% { 
        transform: scale(1);
        color: var(--brand-pink);
    }
}

/* === FAQ COM ANIMAÇÕES CORRIGIDAS === */

.faq-button {
    transition: all 0.3s var(--ease-out-cubic);
    border-radius: 1rem;
}

.faq-button:hover {
    background-color: rgba(231, 14, 69, 0.05);
    transform: translateY(-1px);
}

.faq-icon {
    transition: transform 0.3s var(--ease-out-cubic);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out-cubic);
    opacity: 0;
}

.faq-content.show {
    opacity: 1;
    transition: max-height 0.4s var(--ease-out-cubic), opacity 0.4s var(--ease-out-cubic);
}

/* === MICRO-INTERAÇÕES AVANÇADAS === */

/* Hover effect para links */
a:not(.gradient-button) {
    position: relative;
    transition: color 0.3s ease;
}

a:not(.gradient-button):hover {
    color: var(--brand-pink);
}

a:not(.gradient-button)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-pink), var(--brand-purple));
    transition: width 0.3s var(--ease-out-cubic);
}

a:not(.gradient-button):hover::after {
    width: 100%;
}

/* === RESPONSIVIDADE OTIMIZADA === */

@media (max-width: 768px) {
    /* Reduzir animações complexas no mobile para performance */
    .gradient-button {
        animation: none;
    }
    
    #card-preco::before {
        animation: none;
    }
    
    .stats-card:hover {
        transform: translateY(-5px) scale(1.01);
    }
    
    .profile-card:hover {
        transform: translateY(-5px);
    }
    
    /* Otimizar delays para mobile */
    .animate-on-scroll:nth-child(n) {
        transition-delay: 0.1s;
    }
}

/* === ANIMAÇÕES DE ENTRADA AVANÇADAS === */

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Classes utilitárias para animações */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }

/* Otimização para GPU */
.gpu-optimized {
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* === CLASSES EXISTENTES MANTIDAS === */

/* Classes de fontes personalizadas */
.font-chocolates {
    font-family: var(--font-chocolates);
}

.font-dm-sans {
    font-family: var(--font-dm-sans);
}

.font-montserrat {
    font-family: var(--font-montserrat);
}

/* Gradiente roxo para seção AGORA */
.gradient-bg-purple {
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-gradient-2) 100%);
}

/* Uniformização das imagens de perfil */
.profile-image,
img[src*="before.png"],
img[src*="after.png"] {
    min-height: 100px !important;
}

@media (min-width: 768px) {
    .profile-image,
    img[src*="before.png"],
    img[src*="after.png"] {
        min-height: 120px !important;
    }
}

/* Estilo para cards dos passos */
.step-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Gradiente animado para seção de urgência */
.urgency-bg {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Efeito de brilho nos números do contador */
.counter-glow {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Animação suave para o backdrop blur */
.backdrop-blur-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Animação para o botão CTA principal */
.cta-button {
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

.cta-button:hover::before {
    left: 100%;
}

/* Responsividade final */
    @media (max-width: 640px) {
        #days, #hours, #minutes, #seconds {
            font-size: 1.5rem !important;
        }
        
        .urgency-counter p {
            font-size: 0.75rem !important;
        }
        
        #card-preco .text-5xl {
            font-size: 3rem !important;
        }
        
        #card-preco .text-2xl {
            font-size: 1.5rem !important;
    }
}