:root {--bg-dark:#0a0a0f;--bg-card:rgba(20,20,30,0.7);--primary:#d946ef;--secondary:#8b5cf6;--text-main:#f8fafc;--text-muted:#94a3b8;--whatsapp:#25D366;--border-color:rgba(255,255,255,0.1);} * {margin:0;padding:0;box-sizing:border-box;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;} body {background-color:var(--bg-dark);color:var(--text-main);line-height:1.6;overflow-x:hidden;} .bg-animation {position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;overflow:hidden;background:var(--bg-dark);} .orb {position:absolute;border-radius:50%;opacity:0.5;will-change:transform;animation:moveOrb 20s infinite alternate cubic-bezier(0.4,0,0.2,1);} .orb-1 {width:60vw;height:60vw;background:radial-gradient(circle,rgba(139,92,246,0.4) 0%,transparent 70%);top:-10vw;left:-10vw;} .orb-2 {width:50vw;height:50vw;background:radial-gradient(circle,rgba(217,70,239,0.4) 0%,transparent 70%);bottom:-10vw;right:-10vw;animation-duration:25s;animation-direction:alternate-reverse;} .orb-3 {width:40vw;height:40vw;background:radial-gradient(circle,rgba(56,189,248,0.3) 0%,transparent 70%);top:40vh;left:30vw;animation-duration:30s;} @keyframes moveOrb {0% {transform:translate(0,0) scale(1);} 100% {transform:translate(10vw,10vh) scale(1.2);}} .bg-grid {position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;background-size:60px 60px;background-image:linear-gradient(to right,rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,0.03) 1px,transparent 1px);transform:perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);will-change:transform;animation:moveGrid 20s linear infinite;mask-image:linear-gradient(to top,black 40%,transparent 100%);-webkit-mask-image:linear-gradient(to top,black 40%,transparent 100%);} @keyframes moveGrid {0% {transform:perspective(500px) rotateX(60deg) translateY(0) translateZ(-200px);} 100% {transform:perspective(500px) rotateX(60deg) translateY(60px) translateZ(-200px);}} .floating-hearts {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;} .heart-icon {position:absolute;bottom:-50px;opacity:0.8;animation:floatHeart 15s linear infinite;will-change:transform,opacity;} @keyframes floatHeart {0% {transform:translateY(0) rotate(-15deg) scale(0.8);opacity:0;} 10% {opacity:0.8;scale:1.1;} 90% {opacity:0.5;} 100% {transform:translateY(-120vh) rotate(25deg) scale(1);opacity:0;}} .h-1 {left:10%;animation-duration:22s;animation-delay:0s;width:35px;height:35px;} .h-2 {left:25%;animation-duration:18s;animation-delay:4s;width:25px;height:25px;} .h-3 {left:45%;animation-duration:25s;animation-delay:2s;width:45px;height:45px;} .h-4 {left:65%;animation-duration:20s;animation-delay:8s;width:20px;height:20px;} .h-5 {left:80%;animation-duration:28s;animation-delay:1s;width:30px;height:30px;} .h-6 {left:90%;animation-duration:16s;animation-delay:6s;width:40px;height:40px;} .h-7 {left:55%;animation-duration:24s;animation-delay:10s;width:28px;height:28px;} .container {max-width:1200px;margin:0 auto;padding:0 20px;} .section-padding {padding:80px 0;} .mt-4 {margin-top:24px;} .mb-4 {margin-bottom:24px;} h1,h2,h3 {font-weight:800;line-height:1.2;} .highlight {background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;} .text-center {text-align:center;} .btn {display:inline-block;padding:14px 28px;border-radius:12px;font-weight:600;text-decoration:none;transition:all 0.3s ease;cursor:pointer;border:none;text-align:center;} .btn-primary {background:linear-gradient(135deg,var(--primary),var(--secondary));color:white;box-shadow:0 10px 20px rgba(217,70,239,0.3);} .btn-primary:hover {transform:translateY(-3px);box-shadow:0 15px 30px rgba(217,70,239,0.5);} .btn-large {padding:18px 40px;font-size:1.2rem;border-radius:50px;} .btn-whatsapp {background:var(--whatsapp);color:white;box-shadow:0 10px 20px rgba(37,211,102,0.3);} .btn-whatsapp:hover {transform:translateY(-3px);box-shadow:0 15px 30px rgba(37,211,102,0.5);} .btn-whatsapp-community {background:transparent;color:var(--whatsapp);border:2px solid var(--whatsapp);} .btn-whatsapp-community:hover {background:rgba(37,211,102,0.1);} .btn-secondary {background:rgba(255,255,255,0.1);color:white;} .btn-secondary:hover {background:rgba(255,255,255,0.2);} .btn i {margin-right:8px;vertical-align:middle;} .btn-shine {position:relative;overflow:hidden;} .btn-shine::after {content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:all 0.5s ease;} .btn-shine:hover::after {left:150%;transition:all 0.5s ease;} .reveal {opacity:0;transform:translateY(30px);transition:all 0.8s cubic-bezier(0.5,0,0,1);} .reveal.active {opacity:1;transform:translateY(0);} .delay-1 {transition-delay:0.2s;} .delay-2 {transition-delay:0.4s;} .delay-3 {transition-delay:0.6s;} .hero {padding:120px 0 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;} .hero .container {display:flex;flex-direction:column;align-items:center;} .badge {display:inline-block;background:rgba(217,70,239,0.1);color:var(--primary);padding:8px 16px;border-radius:50px;font-size:0.9rem;font-weight:600;margin-bottom:24px;border:1px solid rgba(217,70,239,0.3);} .headline {font-size:4rem;margin-bottom:24px;letter-spacing:-0.02em;} .subheadline {font-size:1.2rem;color:var(--text-muted);margin-bottom:40px;max-width:600px;} .custom-video-player {position:relative;width:100%;border-radius:0;overflow:hidden;} .custom-controls {position:absolute;bottom:20px;left:20px;right:20px;background:rgba(20,20,30,0.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:15px;border:1px solid rgba(255,255,255,0.1);z-index:30;opacity:0;transform:translateY(10px);transition:all 0.3s ease;} .custom-video-player:hover .custom-controls {opacity:1;transform:translateY(0);} .control-btn {background:none;border:none;color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color 0.2s;} .control-btn:hover {color:var(--primary);} .control-btn i {width:20px;height:20px;} .progress-bar-container {flex:1;height:6px;background:rgba(255,255,255,0.2);border-radius:10px;cursor:pointer;position:relative;overflow:hidden;} .progress-bar {height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:10px;width:0%;transition:width 0.1s linear;} .problem-card {background:rgba(239,68,68,0.05);border:1px solid rgba(239,68,68,0.2);border-radius:24px;padding:60px 40px;text-align:center;max-width:800px;margin:0 auto;} .problem-icon {width:64px;height:64px;color:#ef4444;margin:0 auto 24px;} .problem-card h2 {margin-bottom:20px;} .problem-box {background:rgba(0,0,0,0.5);border:1px solid rgba(239,68,68,0.3);padding:16px;border-radius:12px;display:inline-flex;align-items:center;margin:30px 0;color:#ef4444;font-weight:600;} .steps-wrapper {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-top:50px;} .step-card {background:var(--bg-card);border:1px solid var(--border-color);border-radius:24px;padding:40px 30px;text-align:center;position:relative;transition:transform 0.3s,border-color 0.3s;} .step-card:hover {transform:translateY(-10px);border-color:var(--primary);} .step-number {width:50px;height:50px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:white;font-size:1.5rem;font-weight:bold;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:0 auto 24px;box-shadow:0 10px 20px rgba(217,70,239,0.3);} .section-header {text-align:center;margin-bottom:60px;} .features-wrapper {display:flex;gap:30px;justify-content:center;} .feature-card {flex:1;background:var(--bg-card);padding:40px 30px;border-radius:24px;border:1px solid var(--border-color);text-align:center;transition:transform 0.3s,border-color 0.3s;} .feature-card:hover {transform:translateY(-10px);border-color:var(--primary);} .feature-icon {width:64px;height:64px;background:rgba(217,70,239,0.1);color:var(--primary);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;} .testimonial-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;} .testimonial-card {background:var(--bg-card);padding:30px;border-radius:20px;border:1px solid var(--border-color);} .stars {color:#fbbf24;margin-bottom:16px;} .pricing-wrapper {display:flex;gap:30px;justify-content:center;flex-wrap:wrap;align-items:center;} .pricing-card {background:var(--bg-card);padding:40px;border-radius:24px;border:1px solid var(--border-color);width:100%;max-width:350px;text-align:center;position:relative;transition:transform 0.3s;} .pricing-card:hover {transform:translateY(-10px);} .pricing-card.featured {border-color:var(--primary);transform:scale(1.05);background:linear-gradient(180deg,rgba(20,20,30,0.9),rgba(40,20,50,0.9));box-shadow:0 20px 40px rgba(217,70,239,0.15);} .pricing-card.featured:hover {transform:scale(1.05) translateY(-10px);} .popular-badge {position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--primary),var(--secondary));padding:6px 16px;border-radius:20px;font-size:0.8rem;font-weight:bold;} .price {font-size:3rem;font-weight:800;margin:20px 0;} .price span {font-size:1rem;color:var(--text-muted);} .features-list {list-style:none;margin:30px 0;text-align:left;} .features-list li {margin-bottom:12px;display:flex;align-items:center;} .features-list i {color:var(--primary);margin-right:12px;} .guarantee-card {background:linear-gradient(135deg,rgba(37,211,102,0.1),rgba(20,30,25,0.8));border:1px solid rgba(37,211,102,0.3);border-radius:24px;padding:40px;display:flex;align-items:center;gap:30px;max-width:800px;margin:0 auto;} .guarantee-icon {width:80px;height:80px;background:var(--whatsapp);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .faq {max-width:800px;margin:0 auto;} .faq-item {background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;margin-bottom:16px;overflow:hidden;} .faq-question {padding:20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600;} .faq-answer {padding:0 20px;max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;color:var(--text-muted);} .faq-item.active .faq-answer {padding:0 20px 20px;max-height:200px;} .faq-item.active .faq-question i {transform:rotate(180deg);} .faq-question i {transition:transform 0.3s;} footer {text-align:center;padding:60px 0;border-top:1px solid var(--border-color);background:#050508;} .copyright {color:var(--text-muted);font-size:0.9rem;} .floating-whatsapp {position:fixed;bottom:30px;right:30px;width:60px;height:60px;background:var(--whatsapp);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.3);z-index:100;transition:transform 0.3s;} .floating-whatsapp:hover {transform:scale(1.1);} .modal-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s;} .modal-overlay.active {opacity:1;visibility:visible;} .modal-content {background:var(--bg-dark);padding:40px;border-radius:24px;border:1px solid var(--border-color);max-width:500px;width:90%;text-align:center;position:relative;transform:scale(0.9);opacity:0;transition:all 0.3s cubic-bezier(0.5,0,0,1);} .modal-content.active {transform:scale(1);opacity:1;} .close-modal {position:absolute;top:20px;right:20px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:color 0.3s;} .close-modal:hover {color:white;} .modal-actions-vertical {display:flex;flex-direction:column;gap:16px;margin-top:30px;} .modal-actions-horizontal {display:flex;gap:16px;margin-top:30px;} .modal-actions-horizontal .btn {flex:1;} .warning-icon {width:64px;height:64px;color:#f59e0b;margin:0 auto 20px;} @media (max-width:768px) {.section-padding {padding:50px 0;} .hero {padding:60px 0 40px;} .headline {font-size:2.2rem;} .subheadline {font-size:1rem;} .btn-large {padding:15px 30px;width:100%;font-size:1.1rem;} .problem-card {padding:30px 20px;} .problem-box {display:flex;flex-direction:column;text-align:center;gap:10px;} .problem-box i {margin-right:0;} .features-wrapper {flex-direction:column;} .pricing-card {max-width:100%;padding:30px 20px;} .pricing-card.featured {transform:scale(1);} .pricing-card.featured:hover {transform:translateY(-5px);} .price {font-size:2.5rem;} .guarantee-card {flex-direction:column;text-align:center;padding:30px 20px;gap:20px;} .modal-content {padding:30px 20px;} .modal-actions-horizontal {flex-direction:column;} .bg-grid,.floating-hearts {display:none !important;} .orb {animation:none !important;}}