/* New shared sections: Difference, Requirements, System, FAQ
   Each section has both a Monolith and Nebula visual treatment. */

// ============ MONOLITH STYLE ============

function MonolithDifference({ accent }) {
  const { difference } = CONTENT;
  return (
    <section style={{padding:'140px 40px',borderTop:'1px solid rgba(255,255,255,.08)',position:'relative'}}>
      <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:40,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase'}}>
        <span style={{color:accent}}>[01]</span>
        <span style={{width:40,height:1,background:'rgba(255,255,255,.2)'}}/>
        <span style={{color:'rgba(255,255,255,.6)'}}>La diferencia</span>
      </div>
      <h2 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(48px,7vw,120px)',lineHeight:.9,letterSpacing:'-.04em',textTransform:'uppercase',marginBottom:80,maxWidth:1200}}>
        Esto <span style={{color:accent}}>NO</span> es<br/>
        gestión de campañas.
      </h2>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:40}}>
        <div style={{padding:'40px 36px',border:'1px solid rgba(255,255,255,.1)',background:'#0d0d0d'}}>
          <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:32}}>
            <span style={{width:36,height:36,border:'1px solid rgba(255,255,255,.3)',display:'grid',placeItems:'center',color:'rgba(255,255,255,.5)',fontSize:20}}>✕</span>
            <span style={{fontFamily:'Archivo,sans-serif',fontWeight:800,fontSize:24,textTransform:'uppercase',color:'rgba(255,255,255,.55)'}}>Otras agencias</span>
          </div>
          <ul style={{listStyle:'none'}}>
            {difference.notUs.map((t,i)=>(
              <li key={i} style={{padding:'18px 0',borderTop:i?'1px dashed rgba(255,255,255,.08)':'none',fontSize:16,color:'rgba(255,255,255,.55)',textDecoration:'line-through',textDecorationColor:'rgba(255,255,255,.2)'}}>{t}</li>
            ))}
          </ul>
        </div>
        <div style={{padding:'40px 36px',border:`1px solid ${accent}`,background:`linear-gradient(180deg, ${accent}15, transparent)`,position:'relative'}}>
          <div style={{position:'absolute',top:-12,right:20,background:accent,color:'#0a0a0a',padding:'4px 12px',fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.2em',fontWeight:700}}>★ KERN</div>
          <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:32}}>
            <span style={{width:36,height:36,background:accent,color:'#0a0a0a',display:'grid',placeItems:'center',fontSize:20,fontWeight:900}}>✓</span>
            <span style={{fontFamily:'Archivo,sans-serif',fontWeight:800,fontSize:24,textTransform:'uppercase'}}>Lo que hacemos</span>
          </div>
          <ul style={{listStyle:'none'}}>
            {difference.us.map((t,i)=>(
              <li key={i} style={{padding:'18px 0',borderTop:i?'1px dashed rgba(255,255,255,.1)':'none',fontSize:16,color:'#fff',display:'flex',gap:12}}>
                <span style={{color:accent,flex:'0 0 auto'}}>→</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function MonolithRequirements({ accent }) {
  return (
    <section id="requisitos" style={{padding:'140px 40px',background:'#0d0d0d',borderTop:'1px solid rgba(255,255,255,.08)',borderBottom:'1px solid rgba(255,255,255,.08)'}}>
      <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:40,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase'}}>
        <span style={{color:accent}}>[04]</span>
        <span style={{width:40,height:1,background:'rgba(255,255,255,.2)'}}/>
        <span style={{color:'rgba(255,255,255,.6)'}}>Requisitos</span>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:60,alignItems:'flex-start',marginBottom:80}}>
        <h2 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(48px,7vw,120px)',lineHeight:.9,letterSpacing:'-.04em',textTransform:'uppercase'}}>
          No trabajamos<br/>con <span style={{color:accent,fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400,textTransform:'none'}}>cualquiera.</span>
        </h2>
        <p style={{fontSize:18,lineHeight:1.55,color:'rgba(255,255,255,.7)',maxWidth:520,paddingTop:20}}>
          Para que la inversión publicitaria sea rentable de verdad, hay variables que tienen que estar resueltas antes de empezar. Esto es lo que necesitamos para garantizar resultados — si no las cumples, te lo decimos y te derivamos a alguien que sí pueda ayudarte.
        </p>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:0,border:'1px solid rgba(255,255,255,.08)'}}>
        {CONTENT.requirements.map((r, i) => (
          <div key={i} data-cursor="info" style={{
            padding:'36px 32px',
            borderRight: (i%3!==2) ? '1px solid rgba(255,255,255,.08)' : 'none',
            borderBottom: i<3 ? '1px solid rgba(255,255,255,.08)' : 'none',
            position:'relative',transition:'background .3s',
          }} onMouseEnter={e=>e.currentTarget.style.background='#0a0a0a'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
            <div style={{display:'flex',alignItems:'baseline',gap:16,marginBottom:16}}>
              <span style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:48,color:accent,letterSpacing:'-.04em',lineHeight:1}}>{r.icon}</span>
            </div>
            <h3 style={{fontFamily:'Archivo,sans-serif',fontWeight:800,fontSize:22,letterSpacing:'-.01em',textTransform:'uppercase',marginBottom:12}}>{r.title}</h3>
            <p style={{fontSize:14,lineHeight:1.6,color:'rgba(255,255,255,.65)'}}>{r.desc}</p>
          </div>
        ))}
      </div>

      <div style={{marginTop:60,padding:'32px 40px',border:`2px solid ${accent}`,display:'flex',justifyContent:'space-between',alignItems:'center',gap:40,flexWrap:'wrap'}}>
        <div>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',color:accent,marginBottom:8,textTransform:'uppercase'}}>¿Cumples los requisitos?</div>
          <div style={{fontFamily:'Archivo,sans-serif',fontWeight:800,fontSize:28,letterSpacing:'-.02em'}}>Escríbenos por WhatsApp para una evaluación gratuita.</div>
        </div>
        <a href={CONTENT.callLink} style={{padding:'18px 28px',background:accent,color:'#0a0a0a',fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:13,letterSpacing:'.15em',textTransform:'uppercase'}}>Escríbenos por WhatsApp →</a>
      </div>
    </section>
  );
}

function MonolithSystem({ accent }) {
  return (
    <section id="sistema" style={{padding:'140px 40px'}}>
      <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:40,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase'}}>
        <span style={{color:accent}}>[03]</span>
        <span style={{width:40,height:1,background:'rgba(255,255,255,.2)'}}/>
        <span style={{color:'rgba(255,255,255,.6)'}}>Qué incluye</span>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1.2fr',gap:80,alignItems:'flex-start'}}>
        <div style={{position:'sticky',top:120}}>
          <h2 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(48px,6.5vw,108px)',lineHeight:.9,letterSpacing:'-.04em',textTransform:'uppercase',marginBottom:32}}>
            Un sistema<br/>completo.<br/><span style={{color:accent,fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400,textTransform:'none'}}>Todo incluido.</span>
          </h2>
          <p style={{fontSize:16,lineHeight:1.55,color:'rgba(255,255,255,.65)',maxWidth:420,marginBottom:32}}>
            Trabajamos como tu equipo interno de growth. No facturamos servicios sueltos: la operación completa está incluida en la fee mensual.
          </p>
          <div style={{padding:'14px 18px',background:'#0d0d0d',border:'1px solid rgba(255,255,255,.1)',display:'inline-flex',alignItems:'center',gap:12,fontFamily:'JetBrains Mono,monospace',fontSize:12}}>
            <span style={{color:accent}}>●</span>
            <span>{CONTENT.system.length} servicios incluidos</span>
          </div>
        </div>
        <div>
          {CONTENT.system.map((s, i) => (
            <div key={i} data-cursor="incluido" style={{
              display:'flex',alignItems:'center',gap:24,padding:'22px 0',
              borderTop:'1px solid rgba(255,255,255,.08)',
              transition:'padding-left .3s',
            }} onMouseEnter={e=>e.currentTarget.style.paddingLeft='16px'} onMouseLeave={e=>e.currentTarget.style.paddingLeft='0'}>
              <span style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,color:'rgba(255,255,255,.4)',width:32}}>{String(i+1).padStart(2,'0')}</span>
              <span style={{color:accent,fontSize:14}}>✓</span>
              <span style={{fontSize:18,fontFamily:'Archivo,sans-serif',fontWeight:500,letterSpacing:'-.01em',flex:1}}>{s}</span>
              <span style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,color:'rgba(255,255,255,.3)',letterSpacing:'.2em'}}>INCLUIDO</span>
            </div>
          ))}
          <div style={{borderBottom:'1px solid rgba(255,255,255,.08)'}}/>
        </div>
      </div>
    </section>
  );
}

function MonolithFAQ({ accent }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{padding:'140px 40px',background:'#0d0d0d',borderTop:'1px solid rgba(255,255,255,.08)'}}>
      <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:40,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase'}}>
        <span style={{color:accent}}>[10]</span>
        <span style={{width:40,height:1,background:'rgba(255,255,255,.2)'}}/>
        <span style={{color:'rgba(255,255,255,.6)'}}>Preguntas frecuentes</span>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:80,alignItems:'flex-start'}}>
        <div style={{position:'sticky',top:120}}>
          <h2 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(44px,6vw,96px)',lineHeight:.9,letterSpacing:'-.04em',textTransform:'uppercase'}}>
            Las dudas<br/>de siempre.<br/><span style={{color:accent,fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400,textTransform:'none'}}>Respondidas.</span>
          </h2>
          <a href={CONTENT.whatsappLink} style={{display:'inline-block',marginTop:32,fontFamily:'JetBrains Mono,monospace',fontSize:12,color:accent,borderBottom:`1px solid ${accent}`,paddingBottom:2}}>¿Otra pregunta? Escríbenos →</a>
        </div>
        <div>
          {CONTENT.faq.map((f, i) => (
            <div key={i} style={{borderTop:'1px solid rgba(255,255,255,.1)'}}>
              <button onClick={()=>setOpen(open===i?-1:i)} data-cursor={open===i?'cerrar':'abrir'} style={{display:'flex',justifyContent:'space-between',alignItems:'center',width:'100%',padding:'28px 0',textAlign:'left',gap:24}}>
                <span style={{fontFamily:'Archivo,sans-serif',fontWeight:700,fontSize:22,letterSpacing:'-.01em',color: open===i ? accent : '#fff',transition:'color .3s'}}>{f.q}</span>
                <span style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:32,color:open===i?accent:'rgba(255,255,255,.4)',transition:'transform .3s',transform:open===i?'rotate(45deg)':'rotate(0)'}}>+</span>
              </button>
              <div style={{maxHeight:open===i?500:0,overflow:'hidden',transition:'max-height .5s ease, padding .3s'}}>
                <p style={{padding:'0 60px 32px 0',fontSize:16,lineHeight:1.6,color:'rgba(255,255,255,.7)'}}>{f.a}</p>
              </div>
            </div>
          ))}
          <div style={{borderBottom:'1px solid rgba(255,255,255,.1)'}}/>
        </div>
      </div>
    </section>
  );
}

// ============ NEBULA STYLE ============

function NebulaDifference() {
  const { difference } = CONTENT;
  return (
    <section style={{padding:'140px 40px',maxWidth:1400,margin:'0 auto'}}>
      <div style={{marginBottom:60}}>
        <div style={{display:'flex',alignItems:'center',gap:14,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase',color:'rgba(255,255,255,.5)',marginBottom:24}}>
          <span style={{padding:'4px 10px',borderRadius:999,background:'rgba(255,255,255,.08)',border:'1px solid rgba(255,255,255,.1)'}}>01·b</span>
          <span>La diferencia</span>
        </div>
        <h2 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:'clamp(44px,6vw,96px)',lineHeight:.95,letterSpacing:'-.03em'}}>
          Esto <span style={{background:'linear-gradient(120deg,#ec4899,#7c3aed)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>no</span> es<br/>gestión de campañas.
        </h2>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
        <div style={{padding:36,borderRadius:24,background:'rgba(255,255,255,.02)',border:'1px solid rgba(255,255,255,.06)',backdropFilter:'blur(20px)'}}>
          <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:28}}>
            <span style={{width:36,height:36,borderRadius:'50%',border:'1px solid rgba(255,255,255,.2)',display:'grid',placeItems:'center',color:'rgba(255,255,255,.4)'}}>✕</span>
            <span style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:22,color:'rgba(255,255,255,.55)'}}>Otras agencias</span>
          </div>
          <ul style={{listStyle:'none'}}>
            {difference.notUs.map((t,i)=>(
              <li key={i} style={{padding:'14px 0',borderTop:i?'1px dashed rgba(255,255,255,.06)':'none',fontSize:15,color:'rgba(255,255,255,.45)'}}>{t}</li>
            ))}
          </ul>
        </div>
        <div style={{
          padding:36,borderRadius:24,
          background:'linear-gradient(140deg, rgba(124,58,237,.18), rgba(6,182,212,.08))',
          border:'1px solid rgba(124,58,237,.3)',backdropFilter:'blur(20px)',
          boxShadow:'0 30px 80px -20px rgba(124,58,237,.4)',
          position:'relative',
        }}>
          <div style={{position:'absolute',top:-14,right:20,padding:'6px 14px',borderRadius:999,background:'linear-gradient(120deg,#7c3aed,#ec4899)',fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.2em',fontWeight:600}}>★ KERN</div>
          <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:28}}>
            <span style={{width:36,height:36,borderRadius:'50%',background:'linear-gradient(120deg,#7c3aed,#06b6d4)',display:'grid',placeItems:'center',fontWeight:700}}>✓</span>
            <span style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:22}}>Lo que hacemos</span>
          </div>
          <ul style={{listStyle:'none'}}>
            {difference.us.map((t,i)=>(
              <li key={i} style={{padding:'14px 0',borderTop:i?'1px dashed rgba(255,255,255,.08)':'none',fontSize:15,color:'#fff',display:'flex',gap:12}}>
                <span style={{color:'#06b6d4',flex:'0 0 auto'}}>→</span><span>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function NebulaRequirements() {
  return (
    <section id="requisitos-n" style={{padding:'140px 40px',maxWidth:1400,margin:'0 auto',position:'relative'}}>
      <div style={{marginBottom:60}}>
        <div style={{display:'flex',alignItems:'center',gap:14,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase',color:'rgba(255,255,255,.5)',marginBottom:24}}>
          <span style={{padding:'4px 10px',borderRadius:999,background:'rgba(255,255,255,.08)',border:'1px solid rgba(255,255,255,.1)'}}>02·a</span>
          <span>Requisitos para trabajar juntos</span>
        </div>
        <h2 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:'clamp(44px,6.5vw,108px)',lineHeight:.95,letterSpacing:'-.03em',maxWidth:1100}}>
          No trabajamos<br/>con <span style={{background:'linear-gradient(120deg,#7c3aed,#06b6d4,#ec4899)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400}}>cualquiera.</span>
        </h2>
        <p style={{fontSize:17,lineHeight:1.55,color:'rgba(255,255,255,.65)',maxWidth:680,marginTop:24}}>
          Para que la inversión publicitaria sea rentable, ciertas variables tienen que estar resueltas antes de empezar. Si no cumples los requisitos, te lo decimos directamente.
        </p>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18}}>
        {CONTENT.requirements.map((r, i) => {
          const grads = [
            'linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.08))',
            'linear-gradient(135deg, rgba(236,72,153,.18), rgba(124,58,237,.08))',
            'linear-gradient(135deg, rgba(6,182,212,.18), rgba(236,72,153,.08))',
          ];
          return (
            <div key={i} data-cursor="info" style={{
              padding:32,borderRadius:20,
              background:grads[i%3],
              border:'1px solid rgba(255,255,255,.08)',backdropFilter:'blur(20px)',
              transition:'transform .3s',
            }} onMouseEnter={e=>e.currentTarget.style.transform='translateY(-4px)'} onMouseLeave={e=>e.currentTarget.style.transform='translateY(0)'}>
              <div style={{
                fontFamily:'Space Grotesk,sans-serif',fontWeight:600,fontSize:36,letterSpacing:'-.03em',marginBottom:14,
                background:'linear-gradient(120deg,#7c3aed,#06b6d4)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',
              }}>{r.icon}</div>
              <h3 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:22,letterSpacing:'-.01em',marginBottom:12}}>{r.title}</h3>
              <p style={{fontSize:14,lineHeight:1.6,color:'rgba(255,255,255,.7)'}}>{r.desc}</p>
            </div>
          );
        })}
      </div>

      <div style={{marginTop:48,padding:'32px 40px',borderRadius:24,background:'linear-gradient(120deg, rgba(124,58,237,.2), rgba(236,72,153,.12))',border:'1px solid rgba(124,58,237,.3)',backdropFilter:'blur(20px)',display:'flex',justifyContent:'space-between',alignItems:'center',gap:32,flexWrap:'wrap'}}>
        <div>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',color:'#c4b5fd',marginBottom:8,textTransform:'uppercase'}}>¿Cumples los requisitos?</div>
          <div style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:24,letterSpacing:'-.01em'}}>Postula a una llamada de evaluación gratuita.</div>
        </div>
        <a href={CONTENT.callLink} style={{padding:'16px 28px',borderRadius:999,background:'linear-gradient(120deg,#7c3aed,#ec4899)',fontFamily:'Space Grotesk,sans-serif',fontWeight:600,fontSize:14,boxShadow:'0 20px 60px -10px rgba(124,58,237,.5)'}}>Agendar llamada →</a>
      </div>
    </section>
  );
}

function NebulaSystem() {
  return (
    <section style={{padding:'140px 40px',maxWidth:1400,margin:'0 auto'}}>
      <div style={{marginBottom:60}}>
        <div style={{display:'flex',alignItems:'center',gap:14,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase',color:'rgba(255,255,255,.5)',marginBottom:24}}>
          <span style={{padding:'4px 10px',borderRadius:999,background:'rgba(255,255,255,.08)',border:'1px solid rgba(255,255,255,.1)'}}>02·b</span>
          <span>Qué incluye</span>
        </div>
        <h2 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:'clamp(44px,6vw,96px)',lineHeight:.95,letterSpacing:'-.03em',maxWidth:1100}}>
          Un sistema completo.<br/>
          <span style={{background:'linear-gradient(120deg,#7c3aed,#06b6d4)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400}}>Todo incluido en la fee.</span>
        </h2>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14}}>
        {CONTENT.system.map((s, i) => (
          <div key={i} data-cursor="incluido" style={{
            padding:'22px 24px',borderRadius:16,
            background:'rgba(255,255,255,.03)',backdropFilter:'blur(20px)',
            border:'1px solid rgba(255,255,255,.08)',
            display:'flex',alignItems:'center',gap:14,
            transition:'all .3s',
          }} onMouseEnter={e=>{e.currentTarget.style.background='rgba(124,58,237,.12)';e.currentTarget.style.borderColor='rgba(124,58,237,.3)';}} onMouseLeave={e=>{e.currentTarget.style.background='rgba(255,255,255,.03)';e.currentTarget.style.borderColor='rgba(255,255,255,.08)';}}>
            <span style={{
              minWidth:28,height:28,borderRadius:'50%',
              background:'linear-gradient(135deg,#7c3aed,#06b6d4)',
              display:'grid',placeItems:'center',fontSize:14,fontWeight:700,
            }}>✓</span>
            <span style={{fontSize:15,fontFamily:'Space Grotesk,sans-serif',fontWeight:400,letterSpacing:'-.005em'}}>{s}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function NebulaFAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq-n" style={{padding:'140px 40px',maxWidth:1400,margin:'0 auto'}}>
      <div style={{marginBottom:60}}>
        <div style={{display:'flex',alignItems:'center',gap:14,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase',color:'rgba(255,255,255,.5)',marginBottom:24}}>
          <span style={{padding:'4px 10px',borderRadius:999,background:'rgba(255,255,255,.08)',border:'1px solid rgba(255,255,255,.1)'}}>06</span>
          <span>Preguntas frecuentes</span>
        </div>
        <h2 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:'clamp(44px,6vw,96px)',lineHeight:.95,letterSpacing:'-.03em'}}>Las dudas. <span style={{background:'linear-gradient(120deg,#7c3aed,#06b6d4)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400}}>Respondidas.</span></h2>
      </div>

      <div style={{maxWidth:980}}>
        {CONTENT.faq.map((f, i) => (
          <div key={i} style={{
            marginBottom:12,borderRadius:18,overflow:'hidden',
            background: open===i ? 'linear-gradient(120deg, rgba(124,58,237,.18), rgba(6,182,212,.08))' : 'rgba(255,255,255,.03)',
            border:'1px solid '+(open===i?'rgba(124,58,237,.3)':'rgba(255,255,255,.08)'),
            backdropFilter:'blur(20px)',
            transition:'all .3s',
          }}>
            <button onClick={()=>setOpen(open===i?-1:i)} data-cursor={open===i?'cerrar':'abrir'} style={{display:'flex',justifyContent:'space-between',alignItems:'center',width:'100%',padding:'24px 28px',textAlign:'left',gap:24}}>
              <span style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:18,letterSpacing:'-.01em'}}>{f.q}</span>
              <span style={{fontSize:24,color:open===i?'#c4b5fd':'rgba(255,255,255,.5)',transition:'transform .3s',transform:open===i?'rotate(45deg)':'rotate(0)',flexShrink:0}}>+</span>
            </button>
            <div style={{maxHeight:open===i?500:0,overflow:'hidden',transition:'max-height .5s ease'}}>
              <p style={{padding:'0 28px 24px',fontSize:15,lineHeight:1.6,color:'rgba(255,255,255,.75)'}}>{f.a}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, {
  MonolithDifference, MonolithRequirements, MonolithSystem, MonolithFAQ,
  NebulaDifference, NebulaRequirements, NebulaSystem, NebulaFAQ,
});
