// TAROT — Major Arcana sigils (19, complementing the 3 already in sigils.jsx)
// Each takes {color, size=300} and represents the concept geometrically.

const MSVG = ({ children, size = 300 }) => (
  <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="100%">{children}</svg>
);

const _mr = (s) => {
  let a = s >>> 0;
  return () => {
    a = (a + 0x6D2B79F5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
};

// I · EL OBSERVADOR — eye instituting distinction
const Sigil_OBSERVADOR = ({ color, size = 300 }) => {
  const cx = size/2;
  return <MSVG size={size}>
    <circle cx={cx} cy={size*0.62} r={70} fill="none" stroke={color} strokeWidth={1.2}/>
    {[-1, -0.5, 0, 0.5, 1].map((t, i) => (
      <line key={i} x1={cx + t*30} y1={size*0.22 + 10} x2={cx + t*60} y2={size*0.62 - 68} stroke={color} strokeWidth={0.4} strokeDasharray="2 3" opacity={0.6}/>
    ))}
    <path d={`M ${cx-50} ${size*0.22} Q ${cx} ${size*0.18-8} ${cx+50} ${size*0.22} Q ${cx} ${size*0.22+18} ${cx-50} ${size*0.22} Z`} fill="none" stroke={color} strokeWidth={1.4}/>
    <circle cx={cx} cy={size*0.22} r={14} fill="none" stroke={color}/>
    <circle cx={cx} cy={size*0.22} r={6} fill={color}/>
    <text x={cx} y={size*0.62 + 4} fontSize={9} textAnchor="middle" fill={color} fontFamily="serif" fontStyle="italic" opacity={0.7}>esto</text>
    <text x={cx + 95} y={size*0.62 + 4} fontSize={9} textAnchor="middle" fill={color} fontFamily="serif" fontStyle="italic" opacity={0.45}>lo demás</text>
  </MSVG>;
};

// II · LA INFORMACIÓN — difference that makes a difference
const Sigil_INFORMACION = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const bars = (sigma) => Array.from({length:13}).map((_,i)=>{
    const t = (i-6)/6;
    const h = 60 * Math.exp(-t*t*sigma);
    return { x: i*7 - 45, h };
  });
  return <MSVG size={size}>
    <defs><marker id="ar2" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M 0 0 L 6 3 L 0 6 Z" fill={color}/></marker></defs>
    <g transform={`translate(${cx-90} ${cy+30})`}>
      {bars(1.5).map((b,i)=>(<rect key={i} x={b.x} y={-b.h} width={5} height={b.h} fill={color} opacity={0.55}/>))}
      <text x={0} y={20} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">antes</text>
    </g>
    <line x1={cx-22} y1={cy-10} x2={cx+22} y2={cy-10} stroke={color} strokeWidth={1.4} markerEnd="url(#ar2)"/>
    <text x={cx} y={cy-22} fontSize={11} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">δ</text>
    <g transform={`translate(${cx+90} ${cy+30})`}>
      {bars(8).map((b,i)=>(<rect key={i} x={b.x} y={-b.h} width={5} height={b.h} fill={color}/>))}
      <text x={0} y={20} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">después</text>
    </g>
    <line x1={20} y1={cy+30} x2={size-20} y2={cy+30} stroke={color} strokeWidth={0.4} opacity={0.4}/>
  </MSVG>;
};

// III · AUTO-ORGANIZACIÓN — random → hex pattern
const Sigil_AUTOORGANIZACION = ({ color, size = 300 }) => {
  const cx = size/2;
  const r = _mr(3);
  const cells = [];
  const a = 18;
  for (let i = 0; i < 5; i++) for (let j = 0; j < 8; j++) {
    const x = size*0.6 + i*a*1.4;
    const y = 30 + j*a*1.5 + (i%2 ? a*0.75 : 0);
    if (x < size-15 && y < size-15) cells.push([x,y,i,j]);
  }
  return <MSVG size={size}>
    <defs><marker id="ar3" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M 0 0 L 6 3 L 0 6 Z" fill={color}/></marker></defs>
    {Array.from({length:32}).map((_,i)=>(
      <circle key={i} cx={20 + r()*110} cy={20 + r()*260} r={1.5+r()*1.5} fill={color} opacity={0.5+r()*0.4}/>
    ))}
    <line x1={cx-10} y1={cx} x2={cx+10} y2={cx} stroke={color} strokeWidth={1.4} markerEnd="url(#ar3)"/>
    {cells.map(([x,y,i,j]) => {
      const pts = Array.from({length:6}).map((_,k)=>{
        const ang = (k/6)*Math.PI*2;
        return `${(x+Math.cos(ang)*a*0.85).toFixed(1)},${(y+Math.sin(ang)*a*0.85).toFixed(1)}`;
      }).join(' ');
      return <g key={`${i}-${j}`}>
        <polygon points={pts} fill="none" stroke={color} strokeWidth={0.5} opacity={0.75}/>
        {(i+j)%3===0 && <line x1={x} y1={y+8} x2={x} y2={y-8} stroke={color} strokeWidth={0.6} opacity={0.7}/>}
      </g>;
    })}
  </MSVG>;
};

// IV · LA JERARQUÍA — nested containers
const Sigil_JERARQUIA = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <MSVG size={size}>
    {[0,1,2,3].map(i => {
      const w = 220 - i*52;
      const h = 260 - i*58;
      return <rect key={i} x={cx-w/2} y={cy-h/2} width={w} height={h} fill="none" stroke={color} strokeWidth={1.4 - i*0.22} opacity={1 - i*0.15}/>;
    })}
    {[0,1,2,3].map(i => {
      const h = 260 - i*58;
      return <text key={i} x={cx-95+i*20} y={cy-h/2+10} fontSize={8} fill={color} fontFamily="monospace" letterSpacing="2" opacity={0.85}>L{4-i}</text>;
    })}
    <circle cx={cx} cy={cy} r={6} fill={color}/>
    <text x={cx+12} y={cy+4} fontSize={9} fill={color} fontFamily="serif" fontStyle="italic" opacity={0.7}>L0</text>
  </MSVG>;
};

// V · EL LOCK-IN — many paths → one
const Sigil_LOCKIN = ({ color, size = 300 }) => {
  const cx = size/2;
  return <MSVG size={size}>
    {[-80,-40,0,40,80].map((dx, i) => (
      <line key={i} x1={cx+dx} y1={28} x2={cx + dx*0.3} y2={size*0.4} stroke={color} strokeWidth={0.5} opacity={0.45} strokeDasharray="2 2"/>
    ))}
    <circle cx={cx} cy={size*0.4} r={6} fill={color}/>
    <path d={`M ${cx} ${size*0.4} L ${cx-30} ${size*0.55} L ${cx+10} ${size*0.7} L ${cx-15} ${size-50}`} fill="none" stroke={color} strokeWidth={2}/>
    {[[-80,-60,-50],[-30,-50,-90],[40,80,60],[80,40,90]].map((bumps, i) => (
      <path key={i} d={`M ${cx} ${size*0.4} ${bumps.map((b,k)=>{
        const y = size*0.5 + k*40;
        return `L ${cx+b} ${y}`;
      }).join(' ')}`} fill="none" stroke={color} strokeWidth={0.4} opacity={0.18} strokeDasharray="1 3"/>
    ))}
    <rect x={cx-22} y={size-44} width={28} height={20} fill="none" stroke={color} strokeWidth={1}/>
    <path d={`M ${cx-15} ${size-44} q 0 -12 7 -12 q 7 0 7 12`} fill="none" stroke={color} strokeWidth={1}/>
    <circle cx={cx-8} cy={size-34} r={1.5} fill={color}/>
  </MSVG>;
};

// VI · EL ACOPLAMIENTO — two systems with mutual arrows
const Sigil_ACOPLAMIENTO = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <MSVG size={size}>
    <defs><marker id="ar6" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M 0 0 L 6 3 L 0 6 Z" fill={color}/></marker></defs>
    <circle cx={cx-65} cy={cy} r={40} fill="none" stroke={color} strokeWidth={1.3}/>
    <circle cx={cx+65} cy={cy} r={40} fill="none" stroke={color} strokeWidth={1.3}/>
    {[-65, 65].map((dx, i) => (
      <g key={i}>
        <circle cx={cx+dx} cy={cy-8} r={6} fill="none" stroke={color} strokeWidth={0.6} opacity={0.7}/>
        <circle cx={cx+dx-8} cy={cy+8} r={4} fill="none" stroke={color} strokeWidth={0.6} opacity={0.7}/>
        <circle cx={cx+dx+8} cy={cy+10} r={3} fill={color} opacity={0.5}/>
      </g>
    ))}
    <path d={`M ${cx-25} ${cy-14} Q ${cx} ${cy-46} ${cx+25} ${cy-14}`} fill="none" stroke={color} strokeWidth={1.2} markerEnd="url(#ar6)"/>
    <path d={`M ${cx+25} ${cy+14} Q ${cx} ${cy+46} ${cx-25} ${cy+14}`} fill="none" stroke={color} strokeWidth={1.2} markerEnd="url(#ar6)"/>
    <text x={cx-65} y={cy-52} fontSize={11} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">A</text>
    <text x={cx+65} y={cy-52} fontSize={11} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">B</text>
  </MSVG>;
};

// VII · EL ATRACTOR — limit cycle
const Sigil_ATRACTOR = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const pts = [];
  let r = 110, theta = 0;
  for (let i = 0; i < 380; i++) {
    pts.push([cx + Math.cos(theta)*r, cy + Math.sin(theta)*r]);
    theta += 0.12;
    r = r - (r - 55)*0.013;
  }
  return <MSVG size={size}>
    <circle cx={cx} cy={cy} r={6} fill={color}/>
    <circle cx={cx} cy={cy} r={55} fill="none" stroke={color} strokeWidth={1.4}/>
    <path d={pts.map(([x,y],i)=>`${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`).join(' ')} fill="none" stroke={color} strokeWidth={0.5} opacity={0.75}/>
    <circle cx={pts[0][0]} cy={pts[0][1]} r={3} fill={color} opacity={0.85}/>
  </MSVG>;
};

// VIII · LA ROBUSTEZ — structure deflecting impacts
const Sigil_ROBUSTEZ = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const N = 6;
  const polyPts = Array.from({length:N}).map((_,i)=>{
    const a = (i/N)*Math.PI*2 - Math.PI/2;
    return [cx + Math.cos(a)*55, cy + Math.sin(a)*55];
  });
  return <MSVG size={size}>
    <polygon points={polyPts.map(p=>p.join(',')).join(' ')} fill={color} fillOpacity={0.14} stroke={color} strokeWidth={1.5}/>
    {Array.from({length:N}).map((_,i)=>{
      const next = polyPts[(i+2)%N];
      return <line key={i} x1={polyPts[i][0]} y1={polyPts[i][1]} x2={next[0]} y2={next[1]} stroke={color} strokeWidth={0.5} opacity={0.6}/>;
    })}
    <circle cx={cx} cy={cy} r={4} fill={color}/>
    {[0, 1, 2, 3].map(i => {
      const a = i*Math.PI/2 + Math.PI/4;
      const x1 = cx + Math.cos(a)*120, y1 = cy + Math.sin(a)*120;
      const x2 = cx + Math.cos(a)*68, y2 = cy + Math.sin(a)*68;
      const rfa = a + Math.PI*0.7;
      const x3 = x2 + Math.cos(rfa)*45, y3 = y2 + Math.sin(rfa)*45;
      return <g key={i}>
        <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth={0.9}/>
        <line x1={x2} y1={y2} x2={x3} y2={y3} stroke={color} strokeWidth={0.5} opacity={0.5} strokeDasharray="2 2"/>
      </g>;
    })}
  </MSVG>;
};

// IX · LEJOS DEL EQUILIBRIO — flow through dissipative structure
const Sigil_LEJOSEQ = ({ color, size = 300 }) => {
  const cx = size/2;
  return <MSVG size={size}>
    <defs><marker id="ar9" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M 0 0 L 6 3 L 0 6 Z" fill={color}/></marker></defs>
    <line x1={cx-90} y1={50} x2={cx-90} y2={size-50} stroke={color} strokeWidth={1.3}/>
    <line x1={cx+90} y1={50} x2={cx+90} y2={size-50} stroke={color} strokeWidth={1.3}/>
    {[-50, 0, 50].map((dx, i) => (
      <line key={`in${i}`} x1={cx+dx} y1={18} x2={cx+dx} y2={48} stroke={color} strokeWidth={1.2} markerEnd="url(#ar9)"/>
    ))}
    {[-50, 0, 50].map((dx, i) => (
      <line key={`out${i}`} x1={cx+dx} y1={size-48} x2={cx+dx} y2={size-12} stroke={color} strokeWidth={1.2} markerEnd="url(#ar9)"/>
    ))}
    {[size*0.32, size*0.55, size*0.78].map((y, k) => (
      <g key={k}>
        <ellipse cx={cx-44} cy={y} rx={30} ry={14} fill="none" stroke={color} strokeWidth={0.7}/>
        <ellipse cx={cx+44} cy={y} rx={30} ry={14} fill="none" stroke={color} strokeWidth={0.7}/>
        <path d={`M ${cx-44} ${y-12} q 16 4 14 12`} fill="none" stroke={color} strokeWidth={0.5} markerEnd="url(#ar9)" opacity={0.7}/>
        <path d={`M ${cx+44} ${y+12} q -16 -4 -14 -12`} fill="none" stroke={color} strokeWidth={0.5} markerEnd="url(#ar9)" opacity={0.7}/>
      </g>
    ))}
  </MSVG>;
};

// X · LA BIFURCACIÓN — pitchfork diagram
const Sigil_BIFURCACION = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <MSVG size={size}>
    <line x1={30} y1={cy} x2={size-20} y2={cy} stroke={color} strokeWidth={0.5} opacity={0.5}/>
    <line x1={40} y1={30} x2={40} y2={size-30} stroke={color} strokeWidth={0.5} opacity={0.5}/>
    <text x={size-25} y={cy+12} fontSize={10} fill={color} textAnchor="end" fontFamily="serif" fontStyle="italic" opacity={0.7}>μ</text>
    <text x={50} y={38} fontSize={10} fill={color} fontFamily="serif" fontStyle="italic" opacity={0.7}>x*</text>
    <line x1={40} y1={cy} x2={cx} y2={cy} stroke={color} strokeWidth={1.7}/>
    <circle cx={cx} cy={cy} r={4.5} fill={color}/>
    <line x1={cx} y1={cy-100} x2={cx} y2={cy+100} stroke={color} strokeWidth={0.3} strokeDasharray="2 3" opacity={0.5}/>
    <text x={cx} y={size-15} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.7}>μc</text>
    <path d={`M ${cx} ${cy} Q ${cx+30} ${cy-30} ${size-30} ${cy-72}`} fill="none" stroke={color} strokeWidth={1.7}/>
    <path d={`M ${cx} ${cy} Q ${cx+30} ${cy+30} ${size-30} ${cy+72}`} fill="none" stroke={color} strokeWidth={1.7}/>
    <path d={`M ${cx} ${cy} L ${size-30} ${cy}`} fill="none" stroke={color} strokeWidth={0.6} strokeDasharray="3 3" opacity={0.55}/>
  </MSVG>;
};

// XI · LA HOMEOSTASIS — setpoint + feedback
const Sigil_HOMEOSTASIS = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <MSVG size={size}>
    <defs><marker id="ar11" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M 0 0 L 6 3 L 0 6 Z" fill={color}/></marker></defs>
    <line x1={30} y1={cy-40} x2={size-30} y2={cy-40} stroke={color} strokeWidth={1.4} strokeDasharray="6 3"/>
    <text x={size-30} y={cy-46} fontSize={9} fill={color} textAnchor="end" fontFamily="serif" fontStyle="italic">setpoint</text>
    <path d={Array.from({length:80}).map((_,i)=>{
      const x = 30 + (i/79)*(size-60);
      const y = cy - 40 + Math.sin(i*0.4)*18 * Math.exp(-i*0.018);
      return `${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    }).join(' ')} fill="none" stroke={color} strokeWidth={1.3}/>
    <g transform={`translate(${cx} ${cy+60})`}>
      <rect x={-90} y={-12} width={50} height={24} fill="none" stroke={color} strokeWidth={1}/>
      <text x={-65} y={4} fontSize={9} textAnchor="middle" fill={color} fontFamily="serif" fontStyle="italic">sensor</text>
      <rect x={40} y={-12} width={50} height={24} fill="none" stroke={color} strokeWidth={1}/>
      <text x={65} y={4} fontSize={9} textAnchor="middle" fill={color} fontFamily="serif" fontStyle="italic">ajuste</text>
      <line x1={-40} y1={0} x2={40} y2={0} stroke={color} strokeWidth={0.9} markerEnd="url(#ar11)"/>
      <path d="M 90 0 Q 120 0 120 -30 Q 120 -60 -120 -60 Q -120 0 -90 0" fill="none" stroke={color} strokeWidth={0.9} markerEnd="url(#ar11)"/>
    </g>
  </MSVG>;
};

// XII · EL RE-ENCUADRE — two triangles, dual reading
const Sigil_REENCUADRE = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <MSVG size={size}>
    <defs><marker id="ar12" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M 0 0 L 6 3 L 0 6 Z" fill={color}/></marker></defs>
    <polygon points={`${cx},${cy-80} ${cx-72},${cy+50} ${cx+72},${cy+50}`} fill="none" stroke={color} strokeWidth={1.4}/>
    <polygon points={`${cx},${cy+80} ${cx-72},${cy-50} ${cx+72},${cy-50}`} fill="none" stroke={color} strokeWidth={1.4}/>
    {(() => {
      const a = 32;
      const pts = Array.from({length:6}).map((_,i)=>{
        const ang = (i/6)*Math.PI*2 + Math.PI/6;
        return `${(cx+Math.cos(ang)*a).toFixed(1)},${(cy+Math.sin(ang)*a).toFixed(1)}`;
      }).join(' ');
      return <polygon points={pts} fill={color} fillOpacity={0.28}/>;
    })()}
    <text x={cx} y={cy-95} fontSize={10} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">A</text>
    <text x={cx} y={cy+108} fontSize={10} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">¬A</text>
    <path d={`M ${cx-105} ${cy+10} Q ${cx-118} ${cy} ${cx-105} ${cy-10}`} fill="none" stroke={color} strokeWidth={0.7} markerEnd="url(#ar12)" opacity={0.75}/>
  </MSVG>;
};

// XIII · LA DISOLUCIÓN — fragments as seeds scattering
const Sigil_DISOLUCION = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const r = _mr(13);
  return <MSVG size={size}>
    <rect x={cx-65} y={cy-65} width={130} height={130} fill="none" stroke={color} strokeWidth={0.4} strokeDasharray="2 3" opacity={0.45}/>
    {Array.from({length:14}).map((_,i)=>{
      const a = (i/14)*Math.PI*2;
      const dist = 40 + r()*80;
      const x = cx + Math.cos(a)*dist;
      const y = cy + Math.sin(a)*dist;
      return <g key={i}>
        <line x1={cx + Math.cos(a)*18} y1={cy + Math.sin(a)*18} x2={x} y2={y} stroke={color} strokeWidth={0.4} opacity={0.5} strokeDasharray="1 2"/>
        <ellipse cx={x} cy={y} rx={4 + r()*2} ry={2 + r()} fill={color} opacity={0.85} transform={`rotate(${(a*180/Math.PI).toFixed(0)} ${x} ${y})`}/>
      </g>;
    })}
    <circle cx={cx} cy={cy} r={4} fill={color} opacity={0.55}/>
  </MSVG>;
};

// XIV · ACOPLE DE ESCALAS — nested scopes with zoom
const Sigil_ACOPLEESC = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <MSVG size={size}>
    <rect x={cx-130} y={cy-130} width={260} height={260} fill="none" stroke={color} strokeWidth={0.7} opacity={0.55}/>
    <text x={cx-126} y={cy-115} fontSize={8} fill={color} fontFamily="monospace" letterSpacing="2" opacity={0.7}>MACRO ×1</text>
    {[60,90,120].map((r,i)=>(
      <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={color} strokeWidth={0.3} opacity={0.25}/>
    ))}
    <rect x={cx-60} y={cy-60} width={120} height={120} fill="none" stroke={color} strokeWidth={0.95}/>
    <text x={cx-56} y={cy-46} fontSize={8} fill={color} fontFamily="monospace" letterSpacing="2" opacity={0.85}>MESO ×10</text>
    <line x1={cx-130} y1={cy-130} x2={cx-60} y2={cy-60} stroke={color} strokeWidth={0.4} strokeDasharray="2 2" opacity={0.6}/>
    <line x1={cx+130} y1={cy-130} x2={cx+60} y2={cy-60} stroke={color} strokeWidth={0.4} strokeDasharray="2 2" opacity={0.6}/>
    <rect x={cx-22} y={cy-22} width={44} height={44} fill="none" stroke={color} strokeWidth={1.3}/>
    <line x1={cx-60} y1={cy-60} x2={cx-22} y2={cy-22} stroke={color} strokeWidth={0.4} strokeDasharray="2 2" opacity={0.7}/>
    <line x1={cx+60} y1={cy-60} x2={cx+22} y2={cy-22} stroke={color} strokeWidth={0.4} strokeDasharray="2 2" opacity={0.7}/>
    {[[-12,-8],[6,-10],[-4,4],[10,8]].map(([dx,dy],i)=>(
      <circle key={i} cx={cx+dx} cy={cy+dy} r={1.5} fill={color}/>
    ))}
    <text x={cx-18} y={cy-8} fontSize={7} fill={color} fontFamily="monospace" letterSpacing="1" opacity={0.85}>×100</text>
    <line x1={cx} y1={cy+22} x2={cx} y2={cy+60} stroke={color} strokeWidth={0.6} strokeDasharray="2 2"/>
    <line x1={cx} y1={cy+60} x2={cx} y2={cy+130} stroke={color} strokeWidth={0.6} strokeDasharray="2 2"/>
  </MSVG>;
};

// XV · EL RUNAWAY — exponential + feedback loop
const Sigil_RUNAWAY = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <MSVG size={size}>
    <defs><marker id="ar15" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M 0 0 L 6 3 L 0 6 Z" fill={color}/></marker></defs>
    <line x1={40} y1={size-40} x2={size-20} y2={size-40} stroke={color} strokeWidth={0.5} opacity={0.5}/>
    <line x1={40} y1={size-40} x2={40} y2={28} stroke={color} strokeWidth={0.5} opacity={0.5}/>
    <path d={Array.from({length:80}).map((_,i)=>{
      const t = i/79;
      const x = 40 + t*(size-70);
      const y = Math.max(22, (size-40) - Math.exp(t*3.5)*5);
      return `${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    }).join(' ')} fill="none" stroke={color} strokeWidth={1.7}/>
    <line x1={size-30} y1={50} x2={size-22} y2={26} stroke={color} strokeWidth={1.6} markerEnd="url(#ar15)"/>
    <g transform={`translate(${cx-50} ${cy+15})`}>
      <circle r={28} fill="none" stroke={color} strokeWidth={0.9}/>
      <path d="M 0 -28 A 28 28 0 0 1 26 -10" fill="none" stroke={color} strokeWidth={1.3} markerEnd="url(#ar15)"/>
      <text y={5} textAnchor="middle" fontSize={20} fill={color} fontFamily="serif" fontStyle="italic">+</text>
    </g>
  </MSVG>;
};

// XVIII · LA NO-LINEALIDAD — threshold curve
const Sigil_NOLINEAL = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <MSVG size={size}>
    <line x1={40} y1={size-40} x2={size-20} y2={size-40} stroke={color} strokeWidth={0.4} opacity={0.5}/>
    <line x1={40} y1={size-40} x2={40} y2={28} stroke={color} strokeWidth={0.4} opacity={0.5}/>
    <path d={Array.from({length:80}).map((_,i)=>{
      const t = i/79;
      const x = 40 + t*(size-70);
      const v = 1/(1 + Math.exp(-(t-0.5)*14));
      const y = (size-40) - v*(size-80);
      return `${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    }).join(' ')} fill="none" stroke={color} strokeWidth={1.7}/>
    {/* small input far from threshold */}
    <line x1={80} y1={size-40} x2={80} y2={size-52} stroke={color} strokeWidth={0.7} strokeDasharray="1 2"/>
    <line x1={80} y1={size-52} x2={40} y2={size-52} stroke={color} strokeWidth={0.7} strokeDasharray="1 2"/>
    <line x1={95} y1={size-40} x2={95} y2={size-58} stroke={color} strokeWidth={0.7} strokeDasharray="1 2"/>
    <text x={88} y={size-25} fontSize={7} fill={color} fontFamily="monospace" opacity={0.7}>Δx</text>
    {/* same Δx around threshold */}
    <line x1={cx-8} y1={size-40} x2={cx-8} y2={cy-30} stroke={color} strokeWidth={1} strokeDasharray="2 2"/>
    <line x1={cx+8} y1={size-40} x2={cx+8} y2={cy+40} stroke={color} strokeWidth={1} strokeDasharray="2 2"/>
    <line x1={cx-8} y1={cy-30} x2={40} y2={cy-30} stroke={color} strokeWidth={0.6} strokeDasharray="1 2"/>
    <line x1={cx+8} y1={cy+40} x2={40} y2={cy+40} stroke={color} strokeWidth={0.6} strokeDasharray="1 2"/>
    <text x={cx-2} y={size-25} fontSize={7} fill={color} fontFamily="monospace" opacity={0.85}>Δx</text>
    <text x={cx-32} y={cy-12} fontSize={8} fill={color} fontFamily="serif" fontStyle="italic" opacity={0.7}>umbral</text>
  </MSVG>;
};

// XIX · LA SINCRONIZACIÓN — Kuramoto in-phase
const Sigil_SINCRONIZACION = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <MSVG size={size}>
    <circle cx={cx} cy={cy} r={100} fill="none" stroke={color} strokeWidth={0.5} opacity={0.5}/>
    {Array.from({length:12}).map((_,i)=>{
      const a = -Math.PI/2 + (i-5.5)*0.06;
      const x = cx + Math.cos(a)*100;
      const y = cy + Math.sin(a)*100;
      return <g key={i}>
        <line x1={cx} y1={cy} x2={x} y2={y} stroke={color} strokeWidth={0.7} opacity={0.7}/>
        <circle cx={x} cy={y} r={3.5} fill={color}/>
      </g>;
    })}
    {/* mean field — bold arrow */}
    <line x1={cx} y1={cy} x2={cx} y2={cy-66} stroke={color} strokeWidth={2.6}/>
    <path d={`M ${cx-5} ${cy-58} L ${cx} ${cy-72} L ${cx+5} ${cy-58} Z`} fill={color}/>
    <text x={cx+8} y={cy-6} fontSize={11} fill={color} fontFamily="serif" fontStyle="italic">R≈1</text>
  </MSVG>;
};

// XX · TRANSICIÓN DE FASE — disordered → ordered
const Sigil_TRANSFASE = ({ color, size = 300 }) => {
  const cx = size/2;
  const r = _mr(20);
  const lattice = [];
  const a = 22;
  for (let i = 0; i < 6; i++) for (let j = 0; j < 11; j++) {
    const x = cx + 18 + i*a;
    const y = 30 + j*a + (i%2 ? a/2 : 0);
    if (x < size-12 && y < size-18) lattice.push([x,y]);
  }
  return <MSVG size={size}>
    {/* left: gas */}
    {Array.from({length:26}).map((_,i)=>(
      <circle key={i} cx={28 + r()*(cx-46)} cy={28 + r()*240} r={2.5} fill={color} opacity={0.7}/>
    ))}
    {/* boundary */}
    <line x1={cx} y1={20} x2={cx} y2={size-20} stroke={color} strokeWidth={1.5} strokeDasharray="4 3"/>
    <text x={cx} y={16} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">Tc</text>
    {/* right: lattice points */}
    {lattice.map(([x,y],i)=>(<circle key={i} cx={x} cy={y} r={2.5} fill={color}/>))}
    {/* faint lattice lines */}
    {Array.from({length:6}).map((_,i)=>{
      const x = cx + 18 + i*a;
      return <line key={i} x1={x} y1={30} x2={x} y2={size-30} stroke={color} strokeWidth={0.3} opacity={0.35}/>;
    })}
    <text x={cx/2 + 10} y={size-10} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.7}>desorden</text>
    <text x={cx + (size-cx)/2 + 10} y={size-10} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.85}>orden</text>
  </MSVG>;
};

// XXI · CLAUSURA OPERACIONAL — closed loop of processes
const Sigil_CLAUSURA = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const N = 6;
  const nodes = Array.from({length:N}).map((_,i)=>{
    const a = (i/N)*Math.PI*2 - Math.PI/2;
    return { x: cx + Math.cos(a)*70, y: cy + Math.sin(a)*70, a };
  });
  return <MSVG size={size}>
    <defs><marker id="ar21" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M 0 0 L 6 3 L 0 6 Z" fill={color}/></marker></defs>
    <circle cx={cx} cy={cy} r={115} fill="none" stroke={color} strokeWidth={1.4}/>
    {nodes.map((n,i) => {
      const next = nodes[(i+1)%N];
      const mx = (n.x + next.x)/2, my = (n.y + next.y)/2;
      const ctrlAng = n.a + Math.PI/2;
      const cx2 = mx + Math.cos(ctrlAng)*16;
      const cy2 = my + Math.sin(ctrlAng)*16;
      return <g key={i}>
        <path d={`M ${n.x.toFixed(1)} ${n.y.toFixed(1)} Q ${cx2.toFixed(1)} ${cy2.toFixed(1)} ${next.x.toFixed(1)} ${next.y.toFixed(1)}`} fill="none" stroke={color} strokeWidth={1} markerEnd="url(#ar21)"/>
      </g>;
    })}
    {nodes.map((n,i) => (
      <g key={`n${i}`}>
        <circle cx={n.x} cy={n.y} r={12} fill="#000" stroke={color} strokeWidth={1.3}/>
        <text x={n.x} y={n.y+4} fontSize={11} textAnchor="middle" fill={color} fontFamily="serif" fontStyle="italic">{['α','β','γ','δ','ε','ζ'][i]}</text>
      </g>
    ))}
    <circle cx={cx} cy={cy} r={6} fill="none" stroke={color} strokeWidth={0.8}/>
    <circle cx={cx} cy={cy} r={2} fill={color}/>
  </MSVG>;
};

// Register into PILOT_SIGILS map by card name, so TarotSigil dispatches them
Object.assign(PILOT_SIGILS, {
  'EL OBSERVADOR':         Sigil_OBSERVADOR,
  'LA INFORMACIÓN':        Sigil_INFORMACION,
  'AUTO-ORGANIZACIÓN':     Sigil_AUTOORGANIZACION,
  'LA JERARQUÍA':          Sigil_JERARQUIA,
  'EL LOCK-IN':            Sigil_LOCKIN,
  'EL ACOPLAMIENTO':       Sigil_ACOPLAMIENTO,
  'EL ATRACTOR':           Sigil_ATRACTOR,
  'LA ROBUSTEZ':           Sigil_ROBUSTEZ,
  'LEJOS DEL EQUILIBRIO':  Sigil_LEJOSEQ,
  'LA BIFURCACIÓN':        Sigil_BIFURCACION,
  'LA HOMEOSTASIS':        Sigil_HOMEOSTASIS,
  'EL RE-ENCUADRE':        Sigil_REENCUADRE,
  'LA DISOLUCIÓN':         Sigil_DISOLUCION,
  'ACOPLE DE ESCALAS':     Sigil_ACOPLEESC,
  'EL RUNAWAY':            Sigil_RUNAWAY,
  'LA NO-LINEALIDAD':      Sigil_NOLINEAL,
  'LA SINCRONIZACIÓN':     Sigil_SINCRONIZACION,
  'TRANSICIÓN DE FASE':    Sigil_TRANSFASE,
  'CLAUSURA OPERACIONAL':  Sigil_CLAUSURA,
});

Object.assign(window, {
  Sigil_OBSERVADOR, Sigil_INFORMACION, Sigil_AUTOORGANIZACION, Sigil_JERARQUIA,
  Sigil_LOCKIN, Sigil_ACOPLAMIENTO, Sigil_ATRACTOR, Sigil_ROBUSTEZ, Sigil_LEJOSEQ,
  Sigil_BIFURCACION, Sigil_HOMEOSTASIS, Sigil_REENCUADRE, Sigil_DISOLUCION,
  Sigil_ACOPLEESC, Sigil_RUNAWAY, Sigil_NOLINEAL, Sigil_SINCRONIZACION,
  Sigil_TRANSFASE, Sigil_CLAUSURA,
});