/* ============================================
   IMAX DIGITAL STUDIO - STYLESHEET
   ============================================ */

:root{
  --primary:#E50914;
  --primary-light:#FF3B47;
  --primary-dark:#B81D1D;
  --background:#0A0A0A;
  --surface:rgba(255,255,255,0.03);
  --text:#FFF;
  --text-secondary:#A0A0A0;
  --text-muted:#6B6B6B;
  --glass:rgba(255,255,255,0.05);
  --glass-border:rgba(255,255,255,0.1);
  --success:#10B981;
  --whatsapp:#25D366;
  --whatsapp-dark:#128C7E;
  --radius:16px;
  --radius-sm:8px;
  --transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  --font:'Inter',sans-serif;
  --max:1200px
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--background);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 1rem}

/* ============================================
   NAVBAR - COMPLETELY REBUILT FOR MOBILE
   ============================================ */
.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  padding:1rem 0;
  transition:var(--transition);
  background:transparent;
}

.navbar.scrolled{
  background:rgba(10,10,10,0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:0.75rem 0;
  border-bottom:1px solid var(--glass-border);
}

.navbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  position:relative;
}

.logo{
  display:flex;
  align-items:center;
  z-index:1002;
  flex-shrink:0;
}

.logo-img{
  height:60px;
  width:auto;
}

/* Desktop Navigation Links */
.nav-links{
  display:flex;
  list-style:none;
  gap:2rem;
  align-items:center;
  margin:0;
  padding:0;
}

.nav-links a{
  font-weight:500;
  color:var(--text-secondary);
  transition:var(--transition);
  position:relative;
  padding:0.5rem 0;
  font-size:0.95rem;
}

.nav-links a::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:var(--primary);
  transition:var(--transition);
}

.nav-links a:hover{
  color:var(--text);
}

.nav-links a:hover::after{
  width:100%;
}

/* Desktop CTA Button */
.nav-actions{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-shrink:0;
}

/* Hamburger Menu Button - Desktop Hidden */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
  padding:12px;
  z-index:1003;
  position:relative;
  min-width:48px;
  min-height:48px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  transition:background 0.3s ease;
}

.nav-toggle:hover{
  background:rgba(255,255,255,0.1);
}

.nav-toggle span{
  display:block;
  width:24px;
  height:2.5px;
  background:var(--text);
  transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  border-radius:2px;
  transform-origin:center;
}

.nav-toggle.active span:nth-child(1){
  transform:translateY(8.5px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}

.nav-toggle.active span:nth-child(3){
  transform:translateY(-8.5px) rotate(-45deg);
}

/* Mobile CTA - Hidden on Desktop */
.nav-cta-mobile{
  display:none;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.875rem 1.75rem;
  border-radius:var(--radius);
  font-weight:600;
  font-size:1rem;
  transition:var(--transition);
  cursor:pointer;
  border:none;
  text-align:center;
  min-height:44px;
  white-space:nowrap;
}

.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:0 4px 15px rgba(229,9,20,0.3);
}

.btn-primary:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);

  box-shadow:0 6px 20px rgba(229,9,20,0.4);
}

.btn-secondary{
  background:transparent;
  color:var(--text);
  border:1px solid var(--glass-border);
}

.btn-secondary:hover{
  background:var(--glass);
  border-color:var(--text-secondary);
  transform:translateY(-2px);
}

.btn-whatsapp{
  background:var(--whatsapp);
  color:#fff;
  box-shadow:0 4px 15px rgba(37,211,102,0.3);
}

.btn-whatsapp:hover{
  background:var(--whatsapp-dark);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(37,211,102,0.4);
}

.btn-large{
  padding:1.125rem 2.25rem;
  font-size:1.125rem;
}

/* HERO */
.hero{
  padding:8rem 0 4rem;
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(229,9,20,0.05),rgba(184,29,29,0.02));
}

.hero .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}

.hero-content .tag{
  display:inline-block;
  background:var(--glass);
  border:1px solid var(--glass-border);
  padding:0.5rem 1rem;
  border-radius:100px;
  font-size:0.875rem;
  font-weight:500;
  color:var(--primary-light);
  margin-bottom:1.5rem;
}

.hero-content h1{
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:800;
  line-height:1.1;
  margin-bottom:1.5rem;
}

.hero-content h1 .highlight{
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-content .subtitle{
  font-size:1.25rem;
  color:var(--text-secondary);
  margin-bottom:2rem;
  max-width:500px;
}

.hero-ctas{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.hero-image{
  position:relative;
  height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-image::before{
  content:'';
  position:absolute;
  width:300px;
  height:300px;
  background:radial-gradient(circle,rgba(229,9,20,0.15),transparent 70%);
  border-radius:50%;
  animation:pulse 4s ease-in-out infinite;
  z-index:-1;
}

.hero-image img{
  max-width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
  border:1px solid var(--glass-border);
}

@keyframes pulse{
  0%,100%{transform:scale(1);opacity:0.5}
  50%{transform:scale(1.1);opacity:0.8}
}

/* SECTIONS */
.section{padding:6rem 0;position:relative}
.section-header{text-align:center;max-width:700px;margin:0 auto 4rem}
.section-header .tag{display:inline-block;background:var(--glass);border:1px solid var(--glass-border);padding:0.5rem 1rem;border-radius:100px;font-size:0.875rem;font-weight:500;color:var(--primary-light);margin-bottom:1rem}
.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:1rem;line-height:1.2}
.section-subtitle{font-size:1.125rem;color:var(--text-secondary);line-height:1.6}

/* SOCIAL PROOF */
.social-proof{padding:4rem 0}
.social-proof .container{text-align:center}
.trust-text{font-size:1rem;color:var(--text-secondary);margin-bottom:2rem}
.client-logos{display:flex;justify-content:center;align-items:center;gap:3rem;flex-wrap:wrap}
.client-logo{height:35px;opacity:0.5;filter:grayscale(100%) brightness(2);transition:var(--transition);padding:1rem}
.client-logo:hover{opacity:1;filter:none;transform:scale(1.05)}

/* FEATURES */
.features{background:linear-gradient(180deg,transparent,rgba(229,9,20,0.03) 50%,transparent)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem}
.feature-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius);padding:2rem;transition:var(--transition);position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-light));transform:scaleX(0);transition:var(--transition)}
.feature-card:hover{transform:translateY(-5px);border-color:rgba(229,9,20,0.3);box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.feature-card:hover::before{transform:scaleX(1)}
.feature-image{width:100%;height:200px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:1.5rem}
.feature-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.feature-card:hover .feature-image img{transform:scale(1.05)}
.feature-card h3{font-size:1.5rem;font-weight:700;margin-bottom:0.75rem}
.feature-card p{color:var(--text-secondary);line-height:1.6}
.feature-card .learn-more{display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.5rem;color:var(--primary-light);font-weight:500;font-size:0.9375rem}
.feature-card .learn-more:hover{color:var(--primary);gap:0.75rem}

/* PROCESS */
.process{background:linear-gradient(180deg,transparent,rgba(42,42,42,0.2) 50%,transparent)}
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.process-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius);padding:2rem;text-align:center;transition:var(--transition)}
.process-card:hover{transform:translateY(-5px);border-color:rgba(229,9,20,0.3);box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.process-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--primary);border-radius:50%;font-weight:700;font-size:1.125rem;margin-bottom:1rem}
.process-icon{width:80px;height:80px;margin:0 auto 1.5rem;background:rgba(229,9,20,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem}
.process-card h3{font-size:1.25rem;font-weight:700;margin-bottom:0.75rem}
.process-card p{color:var(--text-secondary);line-height:1.6}

/* BENEFITS */
.benefits{text-align:center}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:3rem}
.benefit-item{padding:1rem}
.benefit-image{width:100%;height:200px;border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem}
.benefit-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.benefit-item:hover .benefit-image img{transform:scale(1.05)}
.benefit-icon{width:80px;height:80px;background:var(--glass);border:1px solid var(--glass-border);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;backdrop-filter:blur(10px)}
.benefit-item h3{font-size:1.25rem;font-weight:700;margin-bottom:0.75rem}
.benefit-item p{color:var(--text-secondary)}

/* TESTIMONIALS */
.testimonials{background:linear-gradient(180deg,transparent,rgba(42,42,42,0.2) 50%,transparent)}
.testimonials-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem;flex-wrap:wrap;gap:1.5rem}
.testimonial-carousel{position:relative;overflow:hidden}
.testimonial-track{display:flex;gap:2rem;transition:transform 0.5s ease}
.testimonial-card{flex:0 0 calc(33.333% - 1.333rem);min-width:300px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius);padding:2rem;backdrop-filter:blur(10px);transition:var(--transition)}
.testimonial-card:hover{transform:translateY(-5px);border-color:rgba(229,9,20,0.3);box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.testimonial-card .rating{display:flex;gap:0.25rem;margin-bottom:1rem;color:#FFC107;font-size:1.25rem}
.testimonial-card p{font-size:1.125rem;line-height:1.6;margin-bottom:1.5rem;color:var(--text-secondary)}
.client-info{display:flex;align-items:center;gap:1rem}
.client-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--primary)}
.client-details h4{font-weight:600;margin-bottom:0.25rem}
.client-details p{font-size:0.875rem;color:var(--text-muted)}
.carousel-controls{display:flex;justify-content:center;gap:1rem;margin-top:2rem}
.carousel-btn{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--glass-border);color:var(--text);font-size:1.25rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center}
.carousel-btn:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-2px)}
.carousel-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:1rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--glass-border);cursor:pointer;transition:var(--transition);border:none}
.dot.active{background:var(--primary);width:24px}

/* PRICING */
.pricing-toggle{display:flex;justify-content:center;margin-bottom:3rem}
.toggle-container{display:flex;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius);padding:0.25rem}
.toggle-btn{padding:0.75rem 1.5rem;border:none;background:none;color:var(--text-secondary);font-weight:500;cursor:pointer;transition:var(--transition);border-radius:var(--radius-sm);font-family:var(--font)}
.toggle-btn.active{background:var(--primary);color:#fff}
.save-badge{background:rgba(16,185,129,0.2);color:var(--success);padding:0.25rem 0.5rem;border-radius:100px;font-size:0.75rem;font-weight:600;margin-left:0.5rem}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;align-items:flex-start}
.pricing-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius);padding:2rem;position:relative;overflow:hidden;transition:var(--transition)}
.pricing-card.popular{border-color:var(--primary);background:linear-gradient(135deg,rgba(229,9,20,0.05),rgba(184,29,29,0.02))}
.pricing-card.popular::before{content:'Most Popular';position:absolute;top:20px;right:20px;background:var(--primary);color:#fff;padding:0.5rem 1rem;border-radius:100px;font-size:0.75rem;font-weight:600}
.pricing-card:hover{transform:translateY(-5px);border-color:rgba(229,9,20,0.5);box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.pricing-card h3{font-size:1.5rem;font-weight:700;margin-bottom:0.5rem}
.pricing-card .description{color:var(--text-secondary);margin-bottom:1.5rem;font-size:0.9375rem}
.price{display:flex;align-items:baseline;gap:0.5rem;margin-bottom:1.5rem}
.price .amount{font-size:3rem;font-weight:800;transition:var(--transition)}
.price .period{color:var(--text-secondary);font-size:1rem}
.pricing-features{list-style:none;margin-bottom:2rem}
.pricing-features li{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;font-size:0.9375rem}
.pricing-features li::before{content:'✓';color:var(--success);font-weight:bold}
.pricing-features li.disabled{color:var(--text-muted);opacity:0.6}
.pricing-features li.disabled::before{content:'✗';color:var(--text-muted)}
.pricing-card .btn{width:100%}

/* FAQ */
.faq{max-width:800px;margin:0 auto}
.faq-grid{display:flex;flex-direction:column;gap:1rem}
.faq-item{border-bottom:1px solid var(--glass-border)}
.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;background:none;border:none;font-size:1.125rem;font-weight:600;color:var(--text);cursor:pointer;text-align:left;transition:var(--transition);font-family:var(--font);min-height:44px}
.faq-question:hover{color:var(--primary-light)}
.faq-question .icon{font-size:1.5rem;transition:var(--transition)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.5s ease;padding:0 0 1.5rem 0}
.faq-answer p{color:var(--text-secondary);line-height:1.6}
.faq-item.active .faq-answer{max-height:500px}
.faq-item.active .icon{transform:rotate(45deg)}

/* CTA */
.cta-section{padding:6rem 0;text-align:center;position:relative;background:linear-gradient(135deg,rgba(229,9,20,0.1),rgba(184,29,29,0.05));overflow:hidden}
.cta-section::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(229,9,20,0.1),transparent 70%);border-radius:50%;animation:pulse 8s ease-in-out infinite}
.cta-content{position:relative;z-index:1;max-width:700px;margin:0 auto}
.cta-section h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:1rem;line-height:1.2}
.cta-section p{font-size:1.125rem;color:var(--text-secondary);margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* FOOTER */
.footer{background:#050505;padding:4rem 0 2rem;position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand p{color:var(--text-secondary);margin:1rem 0;max-width:300px}
.footer-logo{height:180px;width:auto;margin-bottom:1rem}
.social-links{display:flex;gap:1rem}
.social-links a{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;transition:var(--transition);color:var(--text-secondary)}
.social-links a:hover{background:var(--primary);border-color:var(--primary);color:#fff;transform:translateY(-3px)}
.footer-links h4{font-size:1.125rem;font-weight:700;margin-bottom:1rem}
.footer-links ul{list-style:none}
.footer-links li{margin-bottom:0.75rem}
.footer-links a{color:var(--text-secondary);transition:var(--transition)}
.footer-links a:hover{color:var(--primary)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid var(--glass-border);flex-wrap:wrap;gap:1rem}
.footer-bottom p{color:var(--text-muted);font-size:0.875rem}
.footer-legal{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-legal a{color:var(--text-muted);font-size:0.875rem;transition:var(--transition)}
.footer-legal a:hover{color:var(--primary)}

/* ANIMATIONS */
.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
.animate-on-scroll.animate{opacity:1;transform:translateY(0)}

/* ============================================
   RESPONSIVE - MOBILE NAVIGATION COMPLETELY FIXED
   ============================================ */

@media(max-width:1024px){
  .hero .container{grid-template-columns:1fr;text-align:center}
  .hero-content{order:2}
  .hero-image{order:1;height:300px;margin-bottom:2rem}
  .hero-ctas{justify-content:center}
  .testimonial-card{flex:0 0 calc(50% - 1rem)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{gap:1.5rem}
}

@media(max-width:768px){

  /* MOBILE NAVIGATION - COMPLETELY REBUILT */
  
  /* Show hamburger button */
  .nav-toggle{
    display:flex !important;
    z-index:1003 !important;
  }

  /* Hide desktop nav actions */
  .nav-actions{
    display:none !important;
  }

  /* Show mobile CTA inside nav */
  .nav-cta-mobile{
    display:block !important;
    width:100%;
    margin-top:1rem;
  }

  .nav-cta-mobile .btn{
    width:100%;
    max-width:320px;
    margin:0 auto;
    display:flex;
  }

  /* Mobile Navigation Menu - Full Screen Overlay */
  .nav-links{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100vh !important;
    height:100dvh !important;
    background:rgba(10,10,10,0.98) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:0.5rem !important;
    padding:5rem 2rem 2rem !important;
    z-index:1001 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    
    /* Hidden by default - slide from top */
    transform:translateY(-100%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  }

  /* Active state - slide in */
  .nav-links.active{
    transform:translateY(0) !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  /* Nav links styling for mobile */
  .nav-links li{
    width:100%;
    text-align:center;
    list-style:none;
  }

  .nav-links a{
    display:block !important;
    font-size:1.25rem !important;
    font-weight:600 !important;
    color:var(--text) !important;
    padding:1rem !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .nav-links a::after{
    display:none !important;
  }

  .nav-links a:hover{
    color:var(--primary-light) !important;
    background:rgba(255,255,255,0.05) !important;
    border-radius:12px !important;
  }

  /* Other mobile adjustments */
  .section{padding:4rem 0}
  .testimonial-card{flex:0 0 100%}
  .testimonials-header{flex-direction:column;align-items:center;text-align:center}
  .pricing-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}
  .client-logos{gap:2rem}
  .logo-img{height:50px}
}

@media(max-width:480px){
  .hero{padding:6rem 0 3rem}
  .hero-image{height:250px}
  .features-grid{grid-template-columns:1fr}
  .testimonial-carousel{padding:0 1rem}
  .testimonial-track{gap:1rem}
  .cta-actions{flex-direction:column;align-items:center}
  .cta-actions .btn{width:100%;max-width:300px}
  .process-grid{grid-template-columns:1fr}
  .client-logos{gap:1.5rem}
  .client-logo{height:28px}
  .nav-links a{font-size:1.125rem !important}
  .btn-large{padding:1rem 1.75rem;font-size:1rem}
}