/* ==========================================================================
   BG TECH | IDENTIDADE VISUAL OFICIAL (GUARDIÃO & ARQUITETO)
   ========================================================================== */
   :root {
    /* 2. PALETA DE CORES OFICIAL */
    --bg-main:       #05070D; /* Preto Tecnológico */
    --surface-dk:    #0A1F44; /* Azul Profundo */
    --bg-elevated:   #0d2859; /* Azul Profundo Lighter */
    
    --text-hero:     #E6F2FF; /* Branco Técnico */
    --text-muted:    rgba(230, 242, 255, 0.6);
    
    --blue:          #00A8FF; /* Azul Elétrico (Destaque principal) */
    --blue-dark:     #0A1F44; /* Azul Profundo */
    --cyan:          #38D8FF; /* Azul Neon Suave (Glow/Tech) */
    --green-wpp:     #10b981;
    
    /* 3. ESTILO VISUAL / FUNDOS CLAROS (Respiro) */
    --bg-light:      #ffffff;
    --bg-light-alt:  #E6F2FF; /* Branco Técnico usado como cinza claro premium */
    --text-1:        #05070D;
    --text-2:        #1A2A40;
    --text-3:        #4A6080;
    --border-lt:     #d0e3f7;
    
    /* GRADIENTES TECH */
    --grad-btn:       linear-gradient(135deg, #00A8FF 0%, #38D8FF 100%);
    --grad-btn-hover: linear-gradient(135deg, #38D8FF 0%, #00A8FF 100%);
    --grad-cta:       linear-gradient(135deg, #0A1F44 0%, #05070D 100%);
  
    /* SOMBRAS DE PROFUNDIDADE */
    --shadow-sm:   0 4px 24px rgba(0, 168, 255, 0.06), 0 1px 4px rgba(0,0,0,0.04);
    --shadow-md:   0 8px 32px rgba(0, 168, 255, 0.12), 0 0 0 1px rgba(0, 168, 255, 0.05);
    --shadow-blue: 0 6px 24px rgba(56, 216, 255, 0.35);
    
    /* TIPOGRAFIA */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  * { box-sizing: border-box; margin: 0; padding: 0; }
  
  html { scroll-behavior: smooth; font-family: var(--font-body); background: var(--bg-main); color: var(--text-hero); }
  body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
  body.modal-open { overflow: hidden; }
  a { text-decoration: none; color: inherit; cursor: pointer; }
  button { border: none; background: none; font-family: inherit; cursor: pointer; }
  
  .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; text-align: center; }
  .text-cyan { color: var(--blue); }
  .text-electric { color: var(--blue); }
  
  /* CLASSE DA LOGO INSERIDA AQUI (Pixel Perfect) */
 .logo-mark { display: flex; align-items: center; gap: 16px; }
.brand-logo { height: 56px; width: auto; object-fit: contain; flex-shrink: 0; }
  
  /* Gradiente do Headline (Azul Eletrico + Neon) */
  .hero-highlight { background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  
  .eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 16px; }
  .section-title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 44px); font-weight: 800; letter-spacing: -0.02em; color: var(--text-1); margin-bottom: 20px; line-height: 1.1; }
  .section-subtitle { font-size: 18px; color: var(--text-3); line-height: 1.7; max-width: 700px; margin: 0 auto 64px; }
  
  .section-spacing { padding: 140px 0; }
  
  /* Contraste Seções */
  .light-section { background: var(--bg-light); color: var(--text-2); }
  .light-section .section-title { color: var(--text-1); }
  .light-section.bg-light-alt { background: var(--bg-light-alt); border-top: 1px solid var(--border-lt); border-bottom: 1px solid var(--border-lt);}
  .dark-section { background: var(--bg-main); color: var(--text-hero); }
  .dark-section .section-title { color: var(--text-hero); }
  
  /* Buttons */
  .btn-primary { background: var(--grad-btn); color: var(--bg-main); padding: 14px 28px; border-radius: 8px; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s var(--ease); box-shadow: var(--shadow-blue); position: relative; overflow: hidden; }
  .btn-primary:hover { background: var(--grad-btn-hover); transform: translateY(-3px); box-shadow: 0 10px 40px rgba(56, 216, 255, 0.50); }
  .btn-shimmer::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.4) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); transition: 0s; }
  .btn-shimmer:hover::after { animation: shimmer 1s ease-out forwards; }
  @keyframes shimmer { 100% { left: 200%; } }

  .header-cta { background: transparent; color: var(--text-hero); padding: 10px 24px; border-radius: 6px; font-weight: 700; font-size: 13px; border: 1px solid rgba(230,242,255,0.25); transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.1em;}
  .header-cta:hover { border-color: var(--blue); color: var(--blue); background: rgba(0,168,255,0.1); }
  
  .btn-outline-white { background: rgba(230,242,255,0.05); color: var(--text-hero); padding: 16px 32px; border-radius: 8px; font-weight: 700; font-size: 15px; border: 1px solid rgba(230,242,255,0.15); transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 10px;}
  .btn-outline-white:hover { border-color: rgba(230,242,255,0.4); background: rgba(230,242,255,0.1); transform: translateY(-2px); }
  
  .btn-whatsapp { background: var(--green-wpp); color: white; padding: 16px 28px; border-radius: 8px; font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s; border: none;}
  .btn-whatsapp:hover { background: #059669; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4); }
  
  .btn-ghost-whatsapp { background: transparent; color: var(--green-wpp); border: 1px solid rgba(16, 185, 129, 0.3); padding: 18px 28px; border-radius: 8px; font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s; }
  .btn-ghost-whatsapp:hover { background: rgba(16, 185, 129, 0.08); border-color: var(--green-wpp); transform: translateY(-2px); }
  
  .btn-large { padding: 18px 40px; font-size: 16px; }
  
  .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s var(--ease); }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .delay-1 { transition-delay: 0.1s; }
  .delay-2 { transition-delay: 0.2s; }
  .delay-3 { transition-delay: 0.3s; }
  
  /* Header */
  .reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--cyan); width: 0%; z-index: 9999; box-shadow: 0 0 10px var(--cyan); }
  header { position: fixed; top: 0; left: 0; right: 0; height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; z-index: 1000; transition: background 400ms ease, box-shadow 400ms ease; background: transparent; border-bottom: 1px solid transparent; }
  header.scrolled { background: rgba(5, 7, 13, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2px 20px rgba(0,0,0,0.5); }
  .logo-name { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-hero); line-height: 1; }
  .logo-tagline { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.2em; margin-top: 4px; display: block;}
  .nav-links { display: flex; gap: 40px; }
  .nav-link { font-weight: 600; font-size: 14px; color: var(--text-hero); transition: 0.3s; opacity: 0.8; }
  .nav-link:hover { color: var(--blue); opacity: 1; }
  
  .hamburger { display: none; flex-direction: column; gap: 6px; z-index: 1001; }
  .hamburger span { width: 28px; height: 2px; background: var(--text-hero); transition: 0.3s; border-radius: 2px; }
  
  .mobile-menu { position: fixed; inset: 0; background: var(--bg-main); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; z-index: 999; transform: translateX(100%); transition: transform 0.4s var(--ease); }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-link { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--text-hero); }
  
  /* HERO */
  #hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 180px 24px 80px; overflow: hidden; background: var(--bg-main);}
  
  /* GRID SVG HEXAGONAL */
  .grid-overlay { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='40' height='69.28203230275509' viewBox='0 0 40 69.28203230275509' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 17.32050807568877l-20 11.547005383792516L0 17.32050807568877V-5.773502691896258l20-11.547005383792516 20 11.547005383792516V17.32050807568877zM20 46.18802153517126l20-11.547005383792516V11.547005383792516L20 23.094010767585032 0 11.547005383792516v23.094010767585032L20 46.18802153517126zM0 63.50852961086002l20-11.547005383792516 20 11.547005383792516V86.60254037844505l-20 11.547005383792516-20-11.547005383792516V63.50852961086002z' fill='%2338D8FF' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"); animation: grid-move 30s linear infinite; mask-image: radial-gradient(ellipse at top, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at top, black 30%, transparent 80%); pointer-events: none; }
  @keyframes grid-move { from { background-position: 0 0; } to { background-position: 0 69.28px; } }
  
  .hero-glow-left { position: absolute; width: 800px; height: 800px; background: radial-gradient(ellipse 70% 55% at 15% 45%, rgba(0,168,255,0.22) 0%, transparent 60%); top: -100px; left: -200px; filter: blur(80px); pointer-events: none; }
  .hero-glow-right { position: absolute; width: 600px; height: 600px; background: radial-gradient(ellipse 50% 65% at 85% 15%, rgba(56,216,255,0.15) 0%, transparent 55%); top: 0; right: -100px; filter: blur(60px); pointer-events: none; }
  
  .particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); opacity: 0.6; pointer-events: none; box-shadow: 0 0 8px var(--cyan);}
  .p1 { top: 20%; left: 15%; animation: float1 18s infinite; }
  .p2 { top: 60%; left: 75%; animation: float1 22s infinite alternate-reverse; }
  .p3 { top: 35%; left: 55%; animation: float1 15s infinite; }
  .p4 { top: 80%; left: 25%; animation: float1 20s infinite alternate-reverse; }
  .p5 { top: 10%; left: 85%; animation: float1 25s infinite; }
  @keyframes float1 { 0%,100% { transform: translate(0,0); } 33% { transform: translate(20px,-30px); } 66% { transform: translate(-15px,20px); } }

  .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
  .hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(0, 168, 255, 0.1); border: 1px solid rgba(0, 168, 255, 0.3); color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; padding: 8px 20px; border-radius: 100px; margin-bottom: 32px; box-shadow: 0 0 20px rgba(56, 216, 255, 0.1); }
  .pulse-dot { width: 8px; height: 8px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 10px var(--cyan); animation: pulse 2s infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  
  .hero-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.03em; line-height: 1.1; color: var(--text-hero); max-width: 900px; margin-bottom: 24px; }
  .hero-subtitle { font-size: clamp(18px, 2.5vw, 22px); color: var(--text-muted); max-width: 760px; margin-bottom: 48px; line-height: 1.6; font-weight: 400;}
  .hero-hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500; }
  
  /* Trust Bar Transição Fade */
  .trust-fade { padding: 40px 24px 100px; background: linear-gradient(180deg, var(--bg-main) 0%, var(--surface-dk) 85%, var(--bg-light) 100%); position: relative; z-index: 2;}
  .trust-anchor { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: rgba(230,242,255,0.5); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 32px; }
  .trust-bar-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 40px; max-width: 1000px; margin: 0 auto; text-align: center; }
  .trust-number { font-family: var(--font-display); font-size: clamp(40px, 5vw, 56px); font-weight: 800; color: var(--blue); line-height: 1; margin-bottom: 8px; text-shadow: 0 0 24px rgba(0,168,255,0.3); }
  .trust-label { font-weight: 800; color: var(--text-hero); font-size: 16px; margin-bottom: 4px; }
  .trust-context { color: var(--text-muted); font-size: 13px; }
  
  /* Partners */
  #partners { padding: 0 24px 64px; text-align: center; border-bottom: 1px solid var(--border-lt);}
  .partners-label { font-size: 12px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 32px; }
  .partners-row { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
  .partner-chip { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 700; font-size: 16px; opacity: 0.8;}
  .partner-chip i { color: var(--text-3); }
  
  /* Problems */
  .problems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: left; }
  .problem-card { background: var(--bg-light); border: 1px solid var(--border-lt); border-radius: 16px; padding: 48px 32px; transition: all 0.3s var(--ease); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
  .problem-card:hover { transform: translateY(-8px); border-color: rgba(0,168,255,0.40); box-shadow: 0 8px 32px rgba(0,168,255,0.10), 0 0 0 1px rgba(0,168,255,0.10); }
  .problem-card-top { flex-grow: 1; }
  .problem-icon { width: 56px; height: 56px; background: var(--bg-light-alt); color: var(--blue-dark); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; border: 1px solid var(--border-lt);}
  .problem-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text-1); margin-bottom: 12px; }
  .problem-desc { color: var(--text-3); line-height: 1.7; margin-bottom: 32px; font-size: 15px; }
  .problem-stat { background: var(--bg-light-alt); color: var(--blue-dark); font-weight: 800; font-size: 13px; padding: 8px 16px; border-radius: 6px; display: inline-block; border: 1px solid var(--border-lt); align-self: flex-start;}
  
  /* Services */
  .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; text-align: left; }
  .service-card { background: var(--bg-light); border: 1px solid rgba(0,168,255,0.15); border-radius: 24px; padding: 48px; box-shadow: 0 4px 24px rgba(0,168,255,0.06), 0 1px 4px rgba(0,0,0,0.04); transition: all 0.3s; display: flex; flex-direction: column; }
  .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(0,168,255,0.40); }
  .service-card-top { flex-grow: 1; }
  .service-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
  .service-icon { width: 56px; height: 56px; background: var(--grad-btn); color: var(--bg-main); border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-blue);}
  .service-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--text-1); }
  .service-desc { color: var(--text-3); line-height: 1.7; font-size: 16px; margin-bottom: 32px; }
  .service-anchor { font-size: 13px; font-weight: 800; color: var(--blue-dark); background: var(--bg-light-alt); border: 1px solid var(--border-lt); padding: 10px 16px; border-radius: 6px; display: inline-block; align-self: flex-start;}
  
  /* Process & What Happens Next */
  .process-steps { display: flex; justify-content: space-between; position: relative; gap: 32px; max-width: 900px; margin: 0 auto 64px;}
  .process-step { flex: 1; text-align: center; position: relative; z-index: 2; }
  .process-line-wrap { position: absolute; top: 40px; left: 15%; right: 15%; height: 2px; background: var(--border-lt); z-index: 1;}
  .process-line-fill { height: 100%; width: 0%; background: var(--blue); transition: width 1.5s var(--ease); }
  .process-steps.visible .process-line-fill { width: 100%; }
  
  .process-circle { width: 80px; height: 80px; background: linear-gradient(135deg, rgba(0,168,255,0.10) 0%, rgba(56,216,255,0.05) 100%); border: 1.5px solid rgba(0,168,255,0.30); color: var(--blue-dark); font-family: var(--font-display); font-size: 28px; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; box-shadow: var(--shadow-sm); transition: 0.3s;}
  .process-step:hover .process-circle { border-color: rgba(0,168,255,0.60); transform: scale(1.06); box-shadow: 0 0 0 6px rgba(0,168,255,0.08);}
  .process-step-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-bottom: 12px; color: var(--text-1); }
  .process-step-desc { color: var(--text-3); line-height: 1.6; }

  .after-diag-box { background: var(--bg-light-alt); border: 1px solid var(--border-lt); border-radius: 16px; padding: 40px; max-width: 800px; margin: 0 auto; text-align: left; }
  .after-diag-box h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text-1); margin-bottom: 24px; }
  .after-diag-box ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
  .after-diag-box li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text-2); }
  .after-diag-box i { color: var(--blue); }

  /* Guarantee Section (O Guardião) */
  #guarantee { border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05);}
  .guarantee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: left; }
  .guarantee-card { background: rgba(230,242,255,0.02); border: 1px solid rgba(0,168,255,0.20); border-radius: 20px; padding: 48px 32px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
  .guarantee-card i { color: var(--cyan); width: 36px; height: 36px; margin-bottom: 24px; }
  .guarantee-card h4 { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text-hero); margin-bottom: 16px; }
  .guarantee-card p { color: var(--text-muted); font-size: 16px; line-height: 1.7; }

  /* Mini-Cases */
  .cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; text-align: left; }
  .case-card { background: var(--bg-light); border: 1px solid var(--border-lt); border-radius: 24px; padding: 48px; box-shadow: var(--shadow-sm); position: relative; }
  .case-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-lt); }
  .author-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(0,168,255,0.20); }
  .case-header strong { display: block; color: var(--text-1); font-size: 18px; font-weight: 800;}
  .case-header span { color: var(--text-3); font-size: 14px; }
  .case-body { display: flex; flex-direction: column; gap: 16px; }
  .case-topic { font-size: 15px; color: var(--text-2); line-height: 1.6; }
  .case-topic strong { color: var(--text-1); font-weight: 800;}
  .case-topic.highlight { background: rgba(16, 185, 129, 0.08); padding: 16px 20px; border-radius: 8px; border-left: 4px solid var(--green-wpp); color: #064e3b; font-weight: 600; }
  .case-topic.highlight strong { color: #065f46; }

  /* Founders */
  .founders-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; text-align: left; }
  .founders-list { list-style: none; margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
  .founders-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--text-2); line-height: 1.6; }
  .founders-list i { color: var(--blue); flex-shrink: 0; margin-top: 4px; }
  .founder-card { background: var(--bg-light); border: 1px solid var(--border-lt); padding: 24px; border-radius: 16px; display: flex; align-items: center; gap: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
  .founder-photo { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 2px solid rgba(0,168,255,0.20);}
  .founder-name { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text-1); margin-bottom: 4px; }
  .founder-role { color: var(--blue-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 8px; }
  .founder-bio { font-size: 14px; color: var(--text-3); line-height: 1.5; }

  /* CTA Final (SaaS Flutuante) */
  #cta-final { position: relative;}
  .cta-box { background: var(--grad-cta); border: 1px solid rgba(0,168,255,0.15); border-radius: 32px; padding: 100px 24px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.6); position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto;}
  
  /* Footer */
  .footer-top-border { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(0,168,255,0.30) 50%, transparent 100%); }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; text-align: left; margin-bottom: 64px; }
  .footer-links h4 { color: var(--text-hero); font-family: var(--font-display); font-size: 16px; font-weight: 800; margin-bottom: 20px; }
  .footer-links a { display: block; color: var(--text-muted); margin-bottom: 12px; font-size: 14px; transition: color 0.2s; }
  .footer-links a:hover { color: var(--text-hero); }
  .footer-bottom { border-top: 1px solid var(--border-dk); padding: 24px 0; }
  
  /* ==========================================================================
     QUIZ MODAL (O ESPELHO DE VENDAS)
     ========================================================================== */
  .quiz-overlay { position: fixed; inset: 0; background: rgba(5, 7, 13, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; padding: 20px; }
  .quiz-overlay.open { opacity: 1; pointer-events: auto; }
  
  .quiz-container { background: var(--bg-light); width: 100%; max-width: 680px; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.8); border: 1px solid rgba(0,168,255,0.2); transform: translateY(20px) scale(0.98); transition: transform 0.4s var(--ease); display: flex; flex-direction: column; text-align: left; max-height: 90vh; }
  .quiz-overlay.open .quiz-container { transform: translateY(0) scale(1); }
  
  .quiz-header { padding: 24px 32px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-lt); }
  .quiz-header .logo-name { font-size: 18px; color: var(--text-1); }
  .quiz-close { color: var(--text-3); padding: 8px; border-radius: 50%; transition: 0.2s; background: var(--bg-light-alt); }
  .quiz-close:hover { background: var(--border-lt); color: var(--text-1); }
  
  .quiz-progress-bar { height: 4px; background: var(--bg-light-alt); width: 100%; position: relative; }
  .quiz-progress-fill { height: 100%; background: var(--grad-btn); width: 0%; transition: width 0.5s var(--ease); }
  .pulse-progress { animation: pulse-progress 1.5s infinite; }
  @keyframes pulse-progress { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
  
  .quiz-body { padding: 40px 32px; overflow-y: auto; color: var(--text-2); position: relative; }
  
  .intro-social-proof { display: flex; justify-content: center; gap: 24px; font-size: 13px; color: var(--text-3); margin-bottom: 24px; font-weight: 700; background: var(--bg-light-alt); padding: 12px; border-radius: 8px; border: 1px solid var(--border-lt); }
  .intro-social-proof span { display: flex; align-items: center; gap: 6px; }
  .intro-social-proof i { color: var(--green-wpp); }

  .quiz-intro { text-align: center; padding: 0 0 20px 0; }
  .quiz-intro h2 { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--text-1); margin-bottom: 16px; line-height: 1.3;}
  .quiz-intro p { font-size: 16px; color: var(--text-3); margin-bottom: 16px; line-height: 1.6; }
  .quiz-intro-hint { font-size: 14px; font-weight: 700; color: var(--blue-dark); margin-bottom: 32px; background: rgba(0, 168, 255, 0.05); padding: 16px; border-radius: 8px; border: 1px solid rgba(0, 168, 255, 0.15);}
  
  .q-label { font-family: var(--font-display); font-size: 12px; font-weight: 800; color: var(--blue-dark); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 12px; display: flex; align-items: center; }
  .live-dot { display: inline-block; width: 8px; height: 8px; background: var(--green-wpp); border-radius: 50%; margin-right: 8px; animation: pulse-live-dot 1.5s infinite; }
  @keyframes pulse-live-dot { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 rgba(16,185,129,0.4); } 50% { opacity: 0.5; transform: scale(1.2); box-shadow: 0 0 8px rgba(16,185,129,0.8); } }

  .q-title { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-1); margin-bottom: 12px; line-height: 1.3; }
  .q-desc { font-size: 15px; color: var(--text-3); margin-bottom: 32px; }
  
  .q-options { display: flex; flex-direction: column; gap: 12px; }
  .q-option { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 2px solid var(--border-lt); border-radius: 12px; cursor: pointer; transition: all 0.2s; background: var(--bg-light); }
  .q-option:hover { border-color: rgba(0,168,255,0.4); background: var(--bg-light-alt); transform: translateX(4px); }
  .q-option.selected { border-color: var(--blue); background: rgba(0,168,255,0.05); }
  
  .q-icon { color: var(--text-3); }
  .q-option.selected .q-icon { color: var(--blue-dark); }
  .icon-red { color: #ef4444 !important; }
  .icon-orange { color: #f97316 !important; }
  .icon-yellow { color: #eab308 !important; }
  .icon-blue-light { color: #60A5FA !important; }
  .icon-cyan { color: var(--blue) !important; }
  
  .q-text { flex: 1; }
  .q-text strong { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--text-1); margin-bottom: 4px; }
  .q-text span { font-size: 13px; color: var(--text-3); }
  .q-check { color: var(--blue); opacity: 0; transform: scale(0.5); transition: 0.2s; }
  .q-option.selected .q-check { opacity: 1; transform: scale(1); }

  .micro-validation { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 20px; animation: fadeIn 0.4s forwards; }
  .micro-validation i { color: var(--blue); width: 48px; height: 48px; margin-bottom: 24px; animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .micro-validation p { color: var(--text-1); font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.4; }
  @keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  
  .q-input-group { margin-bottom: 20px; }
  .q-input { width: 100%; padding: 18px 24px; border: 2px solid var(--border-lt); border-radius: 12px; font-size: 16px; font-family: inherit; transition: 0.2s; background: var(--bg-light-alt); color: var(--text-1); }
  .q-input:focus { outline: none; border-color: var(--blue); background: var(--bg-light); box-shadow: 0 0 0 4px rgba(0,168,255,0.1); }
  .q-input.error { border-color: #ef4444; background: #fef2f2; }
  .q-error-msg { color: #ef4444; font-size: 13px; font-weight: 600; margin-top: 8px; display: none; }
  
  .q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-lt); }
  .btn-ghost { color: var(--text-3); font-weight: 700; display: flex; align-items: center; gap: 8px; padding: 12px 0; transition: 0.2s; font-size: 15px;}
  .btn-ghost:hover { color: var(--text-1); }
  
  .diag-loading { text-align: center; padding: 20px 0;}
  .diag-loading-ring { width: 56px; height: 56px; border: 4px solid var(--border-lt); border-top-color: var(--blue); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 32px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .diag-loading-steps { display: flex; flex-direction: column; gap: 20px; text-align: left; max-width: 460px; margin: 0 auto; }
  .diag-step { display: flex; align-items: center; gap: 16px; color: var(--text-3); font-weight: 600; font-size: 15px; transition: 0.3s; opacity: 0.4; }
  .diag-step.active { opacity: 1; color: var(--text-1); }
  .diag-step.done { opacity: 1; color: var(--border-lt); }
  .diag-step-icon { color: var(--border-lt); transition: 0.3s; }
  .diag-step.active .diag-step-icon { color: var(--blue); }
  .diag-step.done .diag-step-icon { color: var(--green-wpp); }
  .partial-number { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: #ef4444; margin-top: 4px; animation: flash 1s infinite; }
  @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  
  .mirror-text { color: var(--text-2); font-size: 16px; line-height: 1.6; margin-bottom: 32px; }
  
  .score-banner { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; padding: 24px; border: 1px solid var(--border-lt); border-radius: 16px; background: var(--bg-light-alt);}
  .score-circle { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
  .score-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .score-track { fill: none; stroke: var(--border-lt); stroke-width: 8; }
  .score-fill { fill: none; stroke: var(--blue); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset 1.5s ease-out 0.5s; }
  .score-number { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .score-val { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-1); line-height: 1; }
  .score-max { font-size: 10px; color: var(--text-muted); font-weight: 700;}
  .score-text { flex: 1; }
  .score-category { display: block; font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
  .score-text p { color: var(--text-3); font-size: 13px; line-height: 1.5; margin-top: 8px;}

  .result-box { background: var(--bg-light-alt); border-radius: 16px; padding: 32px; margin-bottom: 32px; color: var(--text-1); text-align: left; position: relative; overflow: hidden; border: 1px solid var(--border-lt);}
  .result-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #ef4444; }
  .alert-tag { display: inline-block; color: #ef4444; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
  .loss-value { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--text-1); line-height: 1; margin: 8px 0 16px; letter-spacing: -0.02em; }
  .loss-desc { color: var(--text-3); font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
  .equivalence { display: inline-block; background: #fef2f2; border: 1px solid #fecaca; padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 700; color: #ef4444; }
  
  .opps-box { margin-bottom: 40px; }
  .opp-item { margin-bottom: 20px; }
  .opp-header { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 8px; }
  .opp-header span:first-child { color: var(--text-1); font-weight: 700;}
  .opp-header span:last-child { color: #10b981; font-weight: 800;}
  .opp-bar-wrap { height: 8px; background: var(--border-lt); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
  .opp-bar { height: 100%; background: var(--blue); width: 0; transition: width 1s ease-out 1s; }
  .opp-sub { font-size: 13px; color: var(--text-3); font-weight: 500;}

  .total-opp-box { background: rgba(0,168,255,0.05); border: 1px solid rgba(0,168,255,0.20); padding: 16px; border-radius: 8px; margin-top: 24px;}
  .total-opp-label { font-size: 11px; font-weight: 800; color: var(--blue-dark); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 4px;}
  .total-opp-val { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-1); }
  
  .urgency-bar { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); color: #d97706; padding: 12px; border-radius: 8px; font-size: 13px; font-weight: 700; margin-bottom: 24px; }

  /* ==========================================================================
     RESPONSIVO
     ========================================================================== */
  @media (max-width: 900px) {
    .section-spacing { padding: 100px 0; }
    .nav-links, .header-cta { display: none; }
    .hamburger { display: flex; }
    .problems-grid, .services-grid, .cases-grid, .founders-layout, .guarantee-grid { grid-template-columns: 1fr; }
    .trust-bar-grid { gap: 40px; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .process-steps { flex-direction: column; gap: 48px; }
    .process-line-wrap { display: none; }
    #cta-final { padding: 100px 0; }
  }
  @media (max-width: 600px) {
    #hero { padding: 140px 20px 80px; }
    .hero-title { font-size: 36px; }
    .trust-number { font-size: 40px; }
    .quiz-container { height: 100%; max-height: 100vh; border-radius: 0; }
    .quiz-body { padding: 24px 20px; }
    .q-title { font-size: 22px; }
    .loss-value { font-size: 32px; }
    .cta-box { padding: 60px 20px; }
    .score-banner { flex-direction: column; text-align: left; align-items: flex-start;}
    .intro-social-proof { flex-direction: column; gap: 12px; }
  }