/* ===== Reset seguro ===== */
* { margin:0; padding:0; box-sizing:border-box; }
img, video, svg, canvas { max-width:100%; height:auto; display:block; }

/* ===== Forçar tema claro em todos os dispositivos ===== */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

/* ===== Design tokens ===== */
:root {
  --primary-blue: #4A90E2;
  --primary-purple: #8B5CF6;
  --text-dark: #1f2937;
  --text-medium: #64748b;
  --background-light: #f8fafc;
  --white: #ffffff;

  --accent-orange: #FF6B35;
  --accent-teal: #14B8A6;
  --accent-pink: #EC4899;
  --accent-yellow: #F59E0B;
  --mocha-mousse: #A0826D;

  --success-green: #10B981;
  --warning-orange: #F97316;
  --error-red: #EF4444;
  --info-cyan: #06B6D4;

  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  --gradient-primary: linear-gradient(135deg, #4A90E2 0%, #8B5CF6 100%);
  --gradient-warm: linear-gradient(135deg, #FF6B35 0%, #F59E0B 100%);
  --gradient-cool: linear-gradient(135deg, #14B8A6 0%, #06B6D4 100%);
  --gradient-sunset: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
  --gradient-ocean: linear-gradient(135deg, #4A90E2 0%, #14B8A6 100%);
  --gradient-mocha: linear-gradient(135deg, #A0826D 0%, #8B7355 100%);

  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-strong: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ===== Layout base ===== */
html { scroll-behavior:smooth; }
body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background: #fff;
  overflow-x: clip; /* evita barra horizontal sem "apertar" o layout */
}
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* Estabilidade de ícones (evita CLS leve) */
.fa,.fas,.fab { width:1.25em; display:inline-block; text-align:center; }

/* ===== Tipografia ===== */
h1,h2,h3,h4,h5,h6 { font-weight:600; line-height:1.2; }
.gradient-text{
  background: var(--gradient-primary);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ===== Botões ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border:none; border-radius:12px;
  font-weight:600; text-decoration:none; cursor:pointer;
  transition:all .4s cubic-bezier(.4,0,.2,1);
  font-size:16px; position:relative; overflow:hidden;
}
.btn::before{
  content:''; position:absolute; inset:0; left:-100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .6s;
}
.btn:hover::before{ left:100%; }
.btn-primary{ background:var(--gradient-primary); color:#fff; box-shadow:var(--shadow-soft); }
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:var(--shadow-medium); }
.btn-secondary{ background:#fff; color:var(--accent-orange); border:2px solid var(--accent-orange); box-shadow:var(--shadow-soft); }
.btn-secondary:hover{ background:var(--accent-orange); color:#fff; transform:translateY(-3px) scale(1.02); box-shadow:var(--shadow-medium); }
.btn-outline{ background:transparent; color:var(--primary-blue); border:2px solid var(--primary-blue); }
.btn-outline:hover{ background:var(--primary-blue); color:#fff; transform:translateY(-2px); }
.btn-large{ padding:16px 32px; font-size:18px; }

/* ===== Header/Nav ===== */
.header{
  position:fixed; top:0; left:0; width:100%;
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  z-index:1000; border-bottom:1px solid rgba(0,0,0,.1);
  transition:box-shadow .3s ease, background .3s ease;
}
.header.scrolled{ background:rgba(255,255,255,.98); box-shadow:0 2px 20px rgba(0,0,0,.1); }
.nav{ padding:1rem 0; }
.nav-container{ max-width:1200px; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; }
.nav-logo{ display:flex; align-items:center; gap:10px; font-size:24px; font-weight:700; color:var(--primary-blue); }
.nav-logo i{ font-size:28px; }
.nav-menu{ display:flex; align-items:center; gap:30px; }
.nav-link{ text-decoration:none; color:var(--text-dark); font-weight:500; transition:color .3s ease; }
.nav-link:hover{ color:var(--primary-blue); }
.nav-link.cta-button{ background:var(--gradient-primary); color:#fff; padding:10px 20px; border-radius:6px; }
.nav-toggle{ display:none; flex-direction:column; cursor:pointer; background:transparent; border:0; }
.nav-toggle span{ width:25px; height:3px; background:var(--text-dark); margin:3px 0; transition:.3s; }

/* ===== Hero ===== */
.hero{
  padding:120px 0 80px;
  background:linear-gradient(135deg,#f8fafc 0%, #e2e8f0 100%);
  position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') no-repeat center/cover;
  opacity:.5;
}
.hero-container{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  position:relative;
}
.hero-badges{ display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap; }
.badge{
  background:#fff; color:var(--primary-blue); padding:8px 16px; border-radius:20px; font-size:14px; font-weight:500;
  border:1px solid #e2e8f0; box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.hero-title{ font-size:48px; font-weight:800; margin-bottom:20px; line-height:1.1; }
.hero-subtitle{ font-size:20px; color:var(--text-medium); margin-bottom:40px; line-height:1.6; }
.hero-cta{ display:flex; gap:20px; margin-bottom:50px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:40px; }
.stat{ text-align:center; }
.stat-number{ display:block; font-size:32px; font-weight:700; color:var(--primary-blue); }
.stat-label{ font-size:14px; color:var(--text-medium); }

/* Mockup */
.hero-mockup{ position:relative; max-width:500px; margin:0 auto; }
.mockup-screen{
  background:#fff; border-radius:20px; box-shadow:0 25px 50px rgba(0,0,0,.15);
  overflow:hidden; transform:perspective(1000px) rotateY(-5deg) rotateX(5deg);
  transition:transform .3s ease;
}
.mockup-screen:hover{ transform:perspective(1000px) rotateY(0) rotateX(0); }
.mockup-header{ background:#f8fafc; padding:15px 20px; border-bottom:1px solid #e2e8f0; }
.mockup-dots{ display:flex; gap:8px; }
.mockup-dots span{ width:12px; height:12px; border-radius:50%; background:#e2e8f0; }
.mockup-dots span:nth-child(1){ background:#ef4444; }
.mockup-dots span:nth-child(2){ background:#f59e0b; }
.mockup-dots span:nth-child(3){ background:#10b981; }

.chat-interface{ display:flex; height:400px; }
.chat-sidebar{ width:200px; background:#f8fafc; border-right:1px solid #e2e8f0; padding:20px 0; }
.chat-item{ display:flex; align-items:center; gap:12px; padding:10px 20px; cursor:pointer; transition:background .3s ease; font-size:14px; }
.chat-item:hover, .chat-item.active{ background:#fff; }
.chat-item i{ font-size:20px; }
.chat-item .fa-whatsapp{ color:#25d366; }
.chat-item .fa-instagram{ color:#e4405f; }
.chat-item .fa-telegram{ color:#0088cc; }
.chat-item .fa-facebook{ color:#1877f2; }
.chat-item .fa-globe{ color:var(--accent-teal); }

.chat-main{ flex:1; padding:20px; display:flex; flex-direction:column; gap:15px; }
.chat-message{ max-width:70%; padding:12px 16px; border-radius:18px; font-size:14px; }
.chat-message.received{ background:#f1f5f9; align-self:flex-start; }
.chat-message.sent{ background:var(--primary-blue); color:#fff; align-self:flex-end; }
.typing-indicator{ display:flex; gap:4px; padding:12px 16px; background:#f1f5f9; border-radius:18px; width:fit-content; }
.typing-indicator span{ width:8px; height:8px; background:#94a3b8; border-radius:50%; animation:typing 1.4s infinite ease-in-out; }
.typing-indicator span:nth-child(2){ animation-delay:.2s; }
.typing-indicator span:nth-child(3){ animation-delay:.4s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0) } 30%{ transform:translateY(-10px) } }

/* ===== Channels ===== */
.channels{ padding:80px 0; background:#fff; position:relative; z-index:2; }
.section-title{ font-size:36px; text-align:center; margin-bottom:16px; font-weight:700; }
.section-subtitle{ font-size:18px; text-align:center; color:var(--text-medium); margin-bottom:60px; }
.channels-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; }
.channel-card{
  text-align:center; padding:40px 30px; border-radius:16px; background:#fff; border:1px solid #e2e8f0; transition:all .3s ease;
}
.channel-card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,.1); }
.channel-icon{
  width:80px; height:80px; border-radius:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:36px; color:#fff;
}
.channel-icon.whatsapp{ background:linear-gradient(135deg,#25d366,#128c7e); }
.channel-icon.instagram{ background:linear-gradient(135deg,#e4405f,#833ab4); }
.channel-icon.telegram{ background:linear-gradient(135deg,#0088cc,#0066aa); }
.channel-icon.facebook{ background:linear-gradient(135deg,#1877f2,#42a5f5); }
.channel-card h3{ font-size:24px; margin-bottom:12px; color:var(--text-dark); }
.channel-card p{ color:var(--text-medium); line-height:1.6; }

/* ===== Features ===== */
.features{ padding:80px 0; background:#f8fafc; position:relative; z-index:3; }
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; }
.feature-card{
  background:#fff; padding:40px 30px; border-radius:16px; text-align:center; border:1px solid #e2e8f0; transition:all .3s ease;
}
.feature-card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,.1); }
.feature-icon{
  width:80px; height:80px; border-radius:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:36px; color:#fff; transition:all .4s cubic-bezier(.4,0,.2,1);
}
.feature-card:nth-child(1) .feature-icon{ background:var(--gradient-sunset); }
.feature-card:nth-child(2) .feature-icon{ background:var(--gradient-cool); }
.feature-card:nth-child(3) .feature-icon{ background:var(--gradient-ocean); }
.feature-card:nth-child(4) .feature-icon{ background:var(--gradient-warm); }
.feature-card:nth-child(5) .feature-icon{ background:var(--gradient-mocha); }
.feature-card:nth-child(6) .feature-icon{ background:var(--gradient-primary); }
.feature-icon:hover{ transform:scale(1.1) rotate(5deg); box-shadow:var(--shadow-medium); }
.feature-card h3{ font-size:24px; margin-bottom:12px; color:var(--text-dark); }
.feature-card p{ color:var(--text-medium); line-height:1.6; }

/* ===== Benefits ===== */
.benefits{ padding:80px 0; background:#fff; }
.benefits-content{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.benefits-text h2{ font-size:36px; margin-bottom:40px; color:var(--text-dark); }
.benefit-item{ display:flex; gap:20px; margin-bottom:30px; }
.benefit-icon{
  width:60px; height:60px; border-radius:12px; background:var(--gradient-primary);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; flex-shrink:0;
}
.benefit-text h3{ font-size:20px; margin-bottom:8px; color:var(--text-dark); }
.benefit-text p{ color:var(--text-medium); line-height:1.6; }

/* Dashboard Mockup */
.dashboard-mockup{ background:#fff; border-radius:16px; padding:30px; box-shadow:0 20px 40px rgba(0,0,0,.1); border:1px solid #e2e8f0; }
.dashboard-header h4{ font-size:20px; margin-bottom:20px; color:var(--text-dark); }
.dashboard-stats{ display:flex; gap:30px; margin-bottom:30px; }
.dashboard-stat{ text-align:center; }
.dashboard-stat .stat-value{ display:block; font-size:28px; font-weight:700; color:var(--primary-blue); }
.dashboard-stat .stat-label{ font-size:14px; color:var(--text-medium); }
.dashboard-chart{ display:flex; align-items:end; gap:8px; height:100px; }
.chart-bar{ flex:1; background:var(--gradient-primary); border-radius:4px 4px 0 0; animation:chartGrow 1s ease-out; }
@keyframes chartGrow{ from{height:0} to{height:var(--height)} }

/* ===== Pricing ===== */
.pricing{ padding:80px 0; background:#f8fafc; }
.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; margin-bottom:40px; }
.pricing-card{
  background:#fff; border-radius:16px; padding:40px 30px; text-align:center; border:1px solid #e2e8f0; position:relative; transition:all .3s ease;
}
.pricing-card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,.1); }
.pricing-card.featured{ background:var(--gradient-warm); color:#fff; border:none; transform:scale(1.05); box-shadow:var(--shadow-strong); }
.pricing-card.featured .pricing-header h3,
.pricing-card.featured .pricing-header p,
.pricing-card.featured .pricing-price .price,
.pricing-card.featured .pricing-price .period{ color:#fff; }
.pricing-card.featured .setup-fee{ background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.3); }
.pricing-card.featured .pricing-features li{ color:rgba(255,255,255,.9); }
.pricing-card.featured .pricing-features .fa-check{ color:#fff; }

.pricing-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--gradient-primary); color:#fff; padding:6px 20px; border-radius:20px; font-size:14px; font-weight:500;
}
.pricing-header h3{ font-size:24px; margin-bottom:8px; color:var(--text-dark); }
.pricing-price{ text-align:center; margin-bottom:30px; }
.pricing-price .price{ font-size:48px; font-weight:700; color:var(--text-dark); }
.pricing-price .period{ font-size:18px; color:var(--text-medium); margin-left:5px; }
.setup-fee{
  font-size:14px; color:var(--accent-orange); font-weight:600; margin-top:8px; padding:4px 12px;
  background:linear-gradient(135deg, rgba(255,107,53,.1), rgba(245,158,11,.1));
  border-radius:20px; display:inline-block; border:1px solid rgba(255,107,53,.2);
}

/* CORREÇÃO do seletor quebrado */
.pricing-features{ list-style:none; margin-bottom:30px; }
.pricing-features li{ padding:8px 0; display:flex; align-items:center; gap:12px; }
.pricing-features .fa-check{ color:#10b981; }
.pricing-features .fa-times{ color:#ef4444; }

.pricing-guarantee{
  text-align:center; color:var(--text-medium);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.pricing-guarantee i{ color:#10b981; }

/* ===== FAQ ===== */
.faq{ padding:80px 0; background:#fff; }
.faq-grid{ max-width:800px; margin:0 auto; }
.faq-item{ border-bottom:1px solid #e2e8f0; margin-bottom:20px; }
.faq-question{
  display:flex; justify-content:space-between; align-items:center; padding:20px 0; cursor:pointer; transition:color .3s ease;
}
.faq-question:hover{ color:var(--primary-blue); }
.faq-question h3{ font-size:18px; font-weight:500; }
.faq-question i{ transition:transform .3s ease; }
.faq-item.active .faq-question i{ transform:rotate(180deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.active .faq-answer{ max-height:200px; padding-bottom:20px; }
.faq-answer p{ color:var(--text-medium); line-height:1.6; }

/* ===== CTA final ===== */
.cta-final{ padding:80px 0; background:var(--gradient-primary); color:#fff; text-align:center; }
.cta-content h2{ font-size:36px; margin-bottom:16px; }
.cta-content p{ font-size:18px; margin-bottom:40px; opacity:.9; }
.cta-buttons{ display:flex; gap:20px; justify-content:center; margin-bottom:30px; flex-wrap:wrap; }
.cta-buttons .btn-secondary{ background:#fff; color:var(--primary-blue); }
.cta-guarantee{ display:flex; align-items:center; justify-content:center; gap:8px; opacity:.9; }

/* ===== Footer ===== */
.footer{ background:#1f2937; color:#fff; padding:60px 0 20px; }
.footer-content{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-logo{ display:flex; align-items:center; gap:10px; font-size:24px; font-weight:700; margin-bottom:16px; }
.footer-logo i{ color:var(--primary-blue); }
.footer-section p{ color:#9ca3af; margin-bottom:20px; line-height:1.6; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:40px; height:40px; background:#374151; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; transition:all .3s ease;
}
.footer-social a:hover{ background:var(--primary-blue); transform:translateY(-2px); }
.footer-section h4{ margin-bottom:20px; font-size:18px; }
.footer-section ul{ list-style:none; }
.footer-section ul li{ margin-bottom:8px; }
.footer-section ul li a{ color:#9ca3af; text-decoration:none; transition:color .3s ease; }
.footer-section ul li a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid #374151; padding-top:20px; display:flex; justify-content:space-between; align-items:center; color:#9ca3af; }
.footer-links{ display:flex; gap:20px; }
.footer-links a{ color:#9ca3af; text-decoration:none; transition:color .3s ease; }
.footer-links a:hover{ color:#fff; }

/* ===== Responsivo ===== */
@media (max-width: 992px){
  .hero-container{ grid-template-columns:1fr; gap:40px; text-align:center; }
}
@media (max-width: 768px){
  .nav-menu{
    position:fixed; top:70px; left:-100%; width:100%; height:calc(100vh - 70px);
    background:#fff; flex-direction:column; justify-content:flex-start; padding-top:50px; transition:left .3s ease;
  }
  .nav-menu.active{ left:0; }
  .nav-toggle{ display:flex; }

  .hero-title{ font-size:36px; }
  .hero-subtitle{ font-size:18px; }

  .hero-cta{ justify-content:center; }
  .hero-stats{ justify-content:center; }

  .benefits-content{ grid-template-columns:1fr; gap:40px; }

  .footer-content{ grid-template-columns:1fr; gap:30px; text-align:center; }
  .footer-bottom{ flex-direction:column; gap:20px; text-align:center; }
  .cta-buttons{ flex-direction:column; align-items:center; }
  .pricing-card.featured{ transform:none; }
}
@media (max-width: 480px){
  .hero{ padding:100px 0 60px; }
  .hero-title{ font-size:28px; }
  .section-title{ font-size:28px; }
  .btn-large{ padding:14px 24px; font-size:16px; }

  .channels-grid,.features-grid,.pricing-grid{ grid-template-columns:1fr; }
}

/* ===== Animações ===== */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:translateY(0)} }
.fade-in-up{ animation:fadeInUp .6s ease-out; }

.scroll-animate{ opacity:0; transform:translateY(30px); transition:all .6s ease; }
.scroll-animate.animate{ opacity:1; transform:translateY(0); }