// slides4.jsx — Hijos de la Intimidad · Capítulo 4
// De la cuna a los brazos de Papá · Erradicando el espíritu de orfandad

const C4_PALETTE = {
  abyss: '#101728',
  deep: '#1b2940',
  blue: '#324864',
  mist: '#aebdca',
  paper: '#f6f0e6',
  warm: '#e0b873',
  warmDeep: '#a8753f',
  coral: '#bd735e',
  ink: '#17202d',
};

const C4_PAD = { x: 126, top: 98, bottom: 92 };

function C4Frame({ pal, children, label, light = false, t }) {
  const bg = light ? pal.paper : pal.abyss;
  const ink = light ? pal.ink : pal.paper;
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'hidden',
      padding: `${C4_PAD.top}px ${C4_PAD.x}px ${C4_PAD.bottom}px`,
      boxSizing: 'border-box', display: 'flex', flexDirection: 'column',
      background: bg, color: ink, fontFamily: "'Manrope', system-ui, sans-serif",
    }}>
      {t.vignettes && <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: light
          ? `radial-gradient(ellipse 60% 85% at 88% 25%, ${pal.warm}42, transparent 68%)`
          : `radial-gradient(ellipse 85% 75% at 20% 16%, ${pal.deep}, transparent 68%), radial-gradient(ellipse 55% 80% at 98% 60%, ${pal.warm}12, transparent 70%)`,
      }}/>}
      <div style={{
        position: 'absolute', top: 50, left: C4_PAD.x,
        fontSize: 22, letterSpacing: '.24em', textTransform: 'uppercase',
        color: light ? pal.warmDeep : pal.warm, fontWeight: 600,
      }}>{label}</div>
      <div style={{ position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
        {children}
      </div>
      <div style={{
        position: 'absolute', bottom: 34, left: C4_PAD.x, right: C4_PAD.x,
        display: 'flex', justifyContent: 'space-between',
        color: light ? pal.blue + '88' : pal.mist + '72',
        fontSize: 20, letterSpacing: '.18em', textTransform: 'uppercase',
      }}>
        <span>Hijos de la Intimidad</span>
        <span>Capítulo 4 <b style={{ color: pal.warm }}>·</b> De huérfano a hijo</span>
      </div>
    </div>
  );
}

function C4Verse({ pal, t, text, reference, light = false }) {
  if (!t.showVerses) return null;
  return (
    <div style={{
      marginTop: 32, paddingTop: 23,
      borderTop: `1px solid ${light ? pal.warmDeep + '55' : pal.blue}`,
    }}>
      <div style={{
        fontFamily: "'Fraunces', serif", fontStyle: 'italic',
        fontSize: 24 * t.fontScale, lineHeight: 1.42,
        color: light ? pal.ink + 'bb' : pal.paper + 'b8', fontWeight: 300,
      }}>"{text}"</div>
      <div style={{
        marginTop: 9, color: light ? pal.warmDeep : pal.warm,
        fontSize: 19, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 600,
      }}>{reference}</div>
    </div>
  );
}

function C4Split({ pal, t, label, title, text, verse, scene, light = false, active }) {
  const k = t.fontScale || 1;
  return (
    <C4Frame pal={pal} t={t} label={label} light={light}>
      <div style={{
        flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.08fr',
        gap: 84, alignItems: 'center', minHeight: 0,
      }}>
        <div style={{ maxWidth: 760 }}>
          <h2 style={{
            margin: 0, fontFamily: "'Fraunces', serif", fontWeight: 300,
            fontSize: 68 * k, lineHeight: 1.08, letterSpacing: '-.025em',
          }}>{title}</h2>
          <p style={{
            margin: '32px 0 0', fontSize: 29 * k, lineHeight: 1.54,
            color: light ? pal.ink + 'c4' : pal.paper + 'c0', fontWeight: 300,
          }}>{text}</p>
          {verse && <C4Verse pal={pal} t={t} light={light} {...verse}/>}
        </div>
        <div style={{
          height: '100%', maxHeight: 790, minHeight: 0,
          borderRadius: 14, overflow: 'hidden',
          border: `1px solid ${light ? pal.warmDeep + '55' : pal.blue}`,
          background: light ? '#efe6d7' : pal.deep + '88',
          boxShadow: light ? '0 35px 80px rgba(23,32,45,.14)' : '0 35px 90px rgba(0,0,0,.3)',
        }}>
          {React.cloneElement(scene, { pal, active })}
        </div>
      </div>
    </C4Frame>
  );
}

function C4Sky({ pal, n = 32 }) {
  return (
    <g>
      {Array.from({ length: n }, (_, i) => (
        <circle key={i}
          cx={(i * 97 + (i % 4) * 51) % 700}
          cy={(i * 61 + (i % 6) * 73) % 700}
          r={.8 + (i % 3) * .5}
          fill={i % 7 === 0 ? pal.warm : pal.mist}
          opacity={.14 + (i % 5) * .1}/>
      ))}
    </g>
  );
}

function C4Scene({ children, active, pal, light = false }) {
  return (
    <svg key={active ? 'active' : 'idle'} viewBox="0 0 700 700" width="100%" height="100%"
      preserveAspectRatio="xMidYMid meet" style={{ display: 'block' }}>
      <defs>
        <radialGradient id="c4Glow">
          <stop offset="0%" stopColor="#fff6df" stopOpacity=".95"/>
          <stop offset="45%" stopColor={pal.warm} stopOpacity=".48"/>
          <stop offset="100%" stopColor={pal.warm} stopOpacity="0"/>
        </radialGradient>
        <linearGradient id="c4Robe" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={pal.blue}/>
          <stop offset="100%" stopColor={pal.abyss}/>
        </linearGradient>
        <linearGradient id="c4Skin" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#8d6547"/>
          <stop offset="100%" stopColor="#dfb17e"/>
        </linearGradient>
        <linearGradient id="c4LightRobe" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#fff8e9"/>
          <stop offset="100%" stopColor={pal.warm}/>
        </linearGradient>
      </defs>
      {!light && <C4Sky pal={pal}/>}
      {children}
    </svg>
  );
}

function C4Baby({ x, y, delay = 0, pal, settling = false }) {
  return (
    <g transform={`translate(${x} ${y})`}>
      <ellipse cx="0" cy="46" rx="67" ry="12" fill={pal.abyss} opacity=".34"/>
      <rect x="-66" y="-25" width="132" height="70" rx="12" fill={pal.deep} stroke={pal.blue}/>
      <path d="M -54 4 Q 0 40 54 4 V 38 H -54 Z" fill={pal.blue} opacity=".68"/>
      <circle cx="-8" cy="-12" r="20" fill="url(#c4Skin)"/>
      <path d="M -27 -18 Q -8 -42 13 -19" fill={pal.abyss}/>
      <path d="M 11 -6 Q 18 -2 24 8" stroke={pal.warm} strokeWidth="2" opacity=".25"/>
      <g data-animated style={{
        animation: settling
          ? `c4-lastCry 7s ease-in-out ${delay}s both`
          : `c4-cry 5s ease-in-out ${delay}s infinite`,
        transformOrigin: '20px -10px',
      }}>
        <path d="M 20 -6 Q 44 -24 68 -8 M 22 1 Q 50 0 76 16" fill="none"
          stroke={pal.warm} strokeWidth="3" strokeDasharray="4 9" strokeLinecap="round"/>
      </g>
      {settling && <g data-animated style={{ animation: `c4-calmFace 7s ease ${delay}s both` }}>
        <path d="M -17 -11 Q -12 -7 -7 -11 M 0 -11 Q 5 -7 10 -11"
          fill="none" stroke={pal.abyss} strokeWidth="1.6" strokeLinecap="round"/>
        <path d="M -10 1 Q -4 5 3 1" fill="none" stroke={pal.abyss}
          strokeWidth="1.5" strokeLinecap="round" opacity=".72"/>
      </g>}
    </g>
  );
}

function C4Child({ x, y, scale = 1, pal, light = false }) {
  return (
    <g transform={`translate(${x} ${y}) scale(${scale})`}>
      <ellipse cx="0" cy="126" rx="50" ry="9" fill={pal.abyss} opacity=".3"/>
      <path d="M -20 28 Q -32 76 -24 110 L -4 110 L 0 55 L 6 110 L 28 110 Q 32 72 22 28 Z"
        fill={light ? pal.warmDeep : 'url(#c4Robe)'}/>
      <path d="M -14 42 Q -47 66 -48 96 M 14 42 Q 47 66 48 96"
        fill="none" stroke={light ? pal.warmDeep : pal.blue} strokeWidth="14" strokeLinecap="round"/>
      <rect x="-7" y="4" width="14" height="22" rx="5" fill="url(#c4Skin)"/>
      <ellipse cx="0" cy="-14" rx="25" ry="29" fill="url(#c4Skin)"/>
      <path d="M -24 -20 Q 0 -51 27 -22 Q 25 -7 17 -9 L -18 -8 Z" fill={pal.abyss}/>
    </g>
  );
}

function C4Father({ x, y, scale = 1, pal }) {
  return (
    <g transform={`translate(${x} ${y}) scale(${scale})`}>
      <circle cx="0" cy="-38" r="150" fill="url(#c4Glow)" opacity=".65"
        data-animated style={{ animation: 'c4-pulse 4.5s ease-in-out infinite', transformOrigin: '0px -38px' }}/>
      <path d="M -48 -72 Q -72 15 -95 118 L 95 118 Q 72 15 48 -72 Z"
        fill="url(#c4LightRobe)" opacity=".94"/>
      <ellipse cx="0" cy="-105" rx="32" ry="38" fill="#fff2d9"/>
      <path d="M -38 -44 Q -105 -6 -128 62 M 38 -44 Q 105 -6 128 62"
        fill="none" stroke="#fff2d9" strokeWidth="22" strokeLinecap="round"/>
      <path d="M -128 62 Q -92 88 -58 64 M 128 62 Q 92 88 58 64"
        fill="none" stroke="#fff2d9" strokeWidth="9" strokeLinecap="round"/>
    </g>
  );
}

// 01 — Portada
function C4Portada({ pal, t, active }) {
  const k = t.fontScale || 1;
  return (
    <C4Frame pal={pal} t={t} label="Capítulo 4 · Hijos de la Intimidad">
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 70, alignItems: 'center' }}>
        <div data-animated style={{ animation: active ? 'c4-fadeUp 1s ease both' : 'none' }}>
          <div style={{ color: pal.warm, fontSize: 22, letterSpacing: '.22em', textTransform: 'uppercase' }}>
            De huérfano a hijo
          </div>
          <h1 style={{
            margin: '24px 0 0', fontFamily: "'Fraunces', serif", fontWeight: 300,
            fontSize: 92 * k, lineHeight: .98, letterSpacing: '-.035em',
          }}>Erradicando<br/>el espíritu<br/><em style={{ color: pal.warm }}>de orfandad</em></h1>
          <p style={{
            margin: '34px 0 0', maxWidth: 690, fontFamily: "'Fraunces', serif",
            fontStyle: 'italic', fontSize: 31 * k, lineHeight: 1.38, color: pal.paper + 'b5',
          }}>De la cuna a los brazos de Papá · Escuchando la voz que lo cambia todo.</p>
        </div>
        <div style={{ height: 760 }}>
          <C4Scene pal={pal} active={active}>
            <path d="M 110 600 C 235 540 330 500 430 382" fill="none" stroke={pal.blue}
              strokeWidth="3" strokeDasharray="4 12"/>
            <g opacity=".46"><C4Baby x={145} y={540} pal={pal}/></g>
            <g data-animated style={{ animation: active ? 'c4-home 5.8s cubic-bezier(.4,0,.2,1) both' : 'none' }}>
              <C4Child x={150} y={455} scale={.8} pal={pal}/>
            </g>
            <g data-animated style={{ animation: active ? 'c4-answer 2s ease 2.7s both' : 'none', transformOrigin: '475px 270px' }}>
              <C4Father x={485} y={285} scale={1.03} pal={pal}/>
            </g>
          </C4Scene>
        </div>
      </div>
    </C4Frame>
  );
}

// 02 — Historia
function C4Historia({ pal, t, active }) {
  return (
    <C4Split pal={pal} t={t} active={active}
      label="01 · La historia"
      title={<>Los niños que<br/><em style={{ color: pal.warm }}>dejaron de llorar</em></>}
      text={<>En un orfanato, los bebés dejaron de llorar porque aprendieron que nadie respondería. No era paz: era abandono. El corazón también guarda silencio cuando pierde la esperanza de ser escuchado.</>}
      scene={
        <C4Scene>
          <rect x="80" y="104" width="540" height="495" rx="18" fill="none" stroke={pal.blue} strokeWidth="2"/>
          <path d="M 350 105 V 600 M 80 352 H 620" stroke={pal.blue} strokeWidth="1" opacity=".5"/>

          {/* El charco permanece: el llanto terminó, pero el abandono dejó huella. */}
          <ellipse cx="350" cy="630" rx="205" ry="24" fill={pal.warm} opacity="0"
            data-animated style={{
              animation: active ? 'c4-puddle 7s ease-out both' : 'none',
              transformOrigin: '350px 630px',
            }}/>
          <ellipse cx="350" cy="628" rx="145" ry="12" fill="#fff6df" opacity="0"
            data-animated style={{
              animation: active ? 'c4-puddle 7s ease-out .35s both' : 'none',
              transformOrigin: '350px 628px',
            }}/>

          <C4Baby x={210} y={250} delay={0} pal={pal} settling/>
          <C4Baby x={485} y={250} delay={.35} pal={pal} settling/>
          <C4Baby x={350} y={500} delay={.7} pal={pal} settling/>

          {/* Las últimas lágrimas caen todas hasta el piso. */}
          {[
            { x: 225, y: 248, drop: 378, delay: .1 },
            { x: 236, y: 252, drop: 374, delay: .45 },
            { x: 500, y: 248, drop: 378, delay: .3 },
            { x: 511, y: 252, drop: 374, delay: .65 },
            { x: 365, y: 498, drop: 128, delay: .5 },
            { x: 376, y: 502, drop: 124, delay: .85 },
          ].map((tear, i) => (
            <g key={i}>
              <circle cx={tear.x} cy={tear.y} r={5 + (i % 2)} fill="#fff6df"
                data-animated style={{
                  '--drop': `${tear.drop}px`,
                  animation: active ? `c4-tearFall 7s cubic-bezier(.45,0,.75,.4) ${tear.delay}s both` : 'none',
                  transformOrigin: `${tear.x}px ${tear.y}px`,
                }}/>
              <circle cx={tear.x} cy={tear.y - 8} r="12" fill="url(#c4Glow)" opacity="0"
                data-animated style={{
                  '--drop': `${tear.drop}px`,
                  animation: active ? `c4-tearFall 7s cubic-bezier(.45,0,.75,.4) ${tear.delay}s both` : 'none',
                  transformOrigin: `${tear.x}px ${tear.y}px`,
                }}/>
            </g>
          ))}

          <g data-animated style={{ animation: active ? 'c4-fadeIn 1.2s ease 5.2s both' : 'none' }}>
            <text x="350" y="680" textAnchor="middle" fill={pal.mist}
              fontFamily="'Fraunces', serif" fontStyle="italic" fontSize="23" opacity=".72">
              No era paz. Habían dejado de esperar una respuesta.
            </text>
          </g>
        </C4Scene>
      }/>
  );
}

// 03 — Preguntas
function C4Preguntas({ pal, t, active }) {
  const k = t.fontScale || 1;
  const qs = [
    {
      tag: 'Para compartir',
      text: '¿Cómo podemos descubrir lo que el Padre dice y siente por nosotros?',
    },
    {
      tag: 'Para compartir',
      text: '¿Por qué nos cuesta tanto ver a Dios como Abba?',
    },
    {
      tag: 'Para meditar',
      text: '¿Qué hemos vivido o experimentado que no nos permite confiar plenamente en Él?',
    },
  ];
  return (
    <C4Frame pal={pal} t={t} label="02 · Lo que preparamos en casa" light>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <h2 style={{
          margin: 0, maxWidth: 1100, fontFamily: "'Fraunces', serif", fontWeight: 300,
          fontSize: 64 * k, lineHeight: 1.08, letterSpacing: '-.025em',
        }}>Preguntas de reflexión</h2>
        <p style={{
          margin: '18px 0 0', fontFamily: "'Fraunces', serif", fontStyle: 'italic',
          color: pal.warmDeep, fontSize: 31 * k, lineHeight: 1.3,
        }}>Pensemos en qué nos identificamos con aquellos niños.</p>
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 30 }}>
          {qs.map((q, i) => (
            <div key={q.text} data-animated style={{
              minHeight: 310, padding: '38px 34px', boxSizing: 'border-box',
              border: `1px solid ${pal.warmDeep}55`, background: '#fffaf2',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              animation: active ? `c4-fadeUp .8s ease ${i * .22}s both` : 'none',
            }}>
              <div>
                <span style={{ color: pal.coral, fontFamily: "'Fraunces', serif", fontSize: 48 }}>0{i + 1}</span>
                <span style={{
                  marginLeft: 18, color: pal.warmDeep, fontSize: 14,
                  letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 600,
                }}>{q.tag}</span>
              </div>
              <p style={{ margin: 0, fontFamily: "'Fraunces', serif", fontSize: 29 * k, lineHeight: 1.3 }}>{q.text}</p>
            </div>
          ))}
        </div>
      </div>
    </C4Frame>
  );
}

// 04 — Tiempo devocional
function C4Devocional({ pal, t, active }) {
  const k = t.fontScale || 1;
  const steps = [
    ['01', '¿Qué dice?', 'Transcribe el texto bíblico.'],
    ['02', '¿Qué me dice?', 'Escúchalo personalmente.'],
    ['03', '¿Cómo me identifico?', 'Reconoce tu historia en él.'],
    ['04', '¿Qué le digo a Dios?', 'Respóndele en oración.'],
    ['05', '¿Qué decisión tomo?', 'Convierte la revelación en un paso.'],
  ];
  return (
    <C4Frame pal={pal} t={t} label="12 · Tiempo devocional">
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '.88fr 1.12fr', gap: 76, alignItems: 'center' }}>
        <div>
          <div style={{
            color: pal.warm, fontSize: 19, letterSpacing: '.2em',
            textTransform: 'uppercase', fontWeight: 600,
          }}>Leer · meditar · responder</div>
          <h2 style={{
            margin: '20px 0 0', fontFamily: "'Fraunces', serif", fontWeight: 300,
            fontSize: 68 * k, lineHeight: 1.07, letterSpacing: '-.025em',
          }}>Romanos 8:15<br/><em style={{ color: pal.warm }}>una ruta de regreso</em></h2>
          <p style={{
            margin: '30px 0 0', color: pal.paper + 'b8',
            fontSize: 26 * k, lineHeight: 1.5, fontWeight: 300,
          }}>Leímos el mismo versículo en varias versiones para permitir que la Palabra pasara de la mente al corazón.</p>
          <C4Verse pal={pal} t={t}
            text="No habéis recibido el espíritu de esclavitud para estar otra vez en temor, sino el Espíritu de adopción, por el cual clamamos: ¡Abba, Padre!"
            reference="Romanos 8:15"/>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {steps.map((step, i) => (
            <div key={step[0]} data-animated style={{
              display: 'grid', gridTemplateColumns: '64px 1fr', gap: 22, alignItems: 'center',
              padding: '20px 24px', minHeight: 102, boxSizing: 'border-box',
              border: `1px solid ${pal.blue}`, background: pal.deep + '88',
              animation: active ? `c4-fadeUp .65s ease ${i * .16}s both` : 'none',
            }}>
              <span style={{
                fontFamily: "'Fraunces', serif", color: pal.warm,
                fontSize: 36, fontStyle: 'italic',
              }}>{step[0]}</span>
              <div>
                <div style={{ color: pal.paper, fontSize: 23 * k, fontWeight: 500 }}>{step[1]}</div>
                <div style={{ marginTop: 5, color: pal.mist, fontSize: 17 * k }}>{step[2]}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </C4Frame>
  );
}

// 05 — Silencio
function C4Silencio({ pal, t, active }) {
  return (
    <C4Split pal={pal} t={t} active={active}
      label="06 · Introducción al desarrollo"
      title={<>¿Qué distingue a quienes<br/><em style={{ color: pal.warm }}>aún claman?</em></>}
      text={<><strong style={{ color: pal.paper }}>Saben que son escuchados por su Padre.</strong> Solo clama quien espera una respuesta. Podemos seguir respirando, trabajando y asistiendo mientras el corazón aprende a sobrevivir en silencio.</>}
      scene={
        <C4Scene>
          <C4Child x={190} y={440} scale={1.05} pal={pal}/>
          <g data-animated style={{ animation: active ? 'c4-reach 5s ease-in-out infinite alternate' : 'none' }}>
            <path d="M 250 350 Q 330 310 395 330" fill="none" stroke={pal.warm} strokeWidth="3"
              strokeDasharray="4 11" opacity=".7"/>
            <circle cx="402" cy="328" r="9" fill={pal.warm}/>
          </g>
          <g opacity=".28"><C4Father x={540} y={370} scale={.8} pal={pal}/></g>
          <text x="350" y="625" textAnchor="middle" fill={pal.mist} opacity=".45"
            fontFamily="'Fraunces', serif" fontStyle="italic" fontSize="28">¿Alguien me escucha?</text>
        </C4Scene>
      }/>
  );
}

// 06 — Heridas
function C4Heridas({ pal, t, active }) {
  const k = t.fontScale || 1;
  const wounds = [
    ['◷', 'Una oración sin respuesta', 'El tiempo desgastó la esperanza.'],
    ['♡', 'Una decepción', 'Mezclamos una falla humana con el corazón de Dios.'],
    ['◉', 'La vergüenza', 'Creímos que ya no teníamos derecho a acercarnos.'],
    ['◇', 'El agotamiento', 'Mucho servicio secó la intimidad.'],
    ['△', 'La autosuficiencia', 'Nos convencimos de que nuestra manera de ver y vivir la vida era mejor que la de Dios, y que estaríamos mejor sin Él.'],
    ['×', 'Una herida en la iglesia', 'Culpamos a Dios por nuestros propios errores o por las heridas que otros causaron dentro de una iglesia imperfecta.'],
  ];
  return (
    <C4Frame pal={pal} t={t} label="03 · Cuando el alma deja de clamar" light>
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '.72fr 1.28fr', gap: 72, alignItems: 'center' }}>
        <div>
          <h2 style={{
            margin: 0, fontFamily: "'Fraunces', serif", fontSize: 68 * k,
            fontWeight: 300, lineHeight: 1.08, letterSpacing: '-.025em',
          }}>¿Dónde se apagó<br/><em style={{ color: pal.warmDeep }}>tu clamor?</em></h2>
          <p style={{ marginTop: 32, fontSize: 28 * k, lineHeight: 1.5, color: pal.ink + 'b5' }}>
            Estas heridas no prueban que el Padre se alejó. Revelan dónde dejamos de acercarnos con la confianza de un hijo.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {wounds.map((w, i) => (
            <div key={w[1]} data-animated style={{
              padding: '24px 26px', minHeight: 142, background: '#fffaf2',
              border: `1px solid ${pal.warmDeep}44`, boxSizing: 'border-box',
              animation: active ? `c4-fadeUp .65s ease ${i * .13}s both` : 'none',
            }}>
              <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
                <span style={{ color: pal.coral, fontSize: 31 }}>{w[0]}</span>
                <strong style={{ fontSize: 21 * k, color: pal.ink }}>{w[1]}</strong>
              </div>
              <div style={{ marginTop: 10, fontSize: 17 * k, lineHeight: 1.4, color: pal.ink + '99' }}>{w[2]}</div>
            </div>
          ))}
        </div>
      </div>
    </C4Frame>
  );
}

// 07 — Orfanatos espirituales
function C4Orfanatos({ pal, t, active }) {
  return (
    <C4Split pal={pal} t={t} active={active}
      label="04 · Orfanatos espirituales"
      title={<>Querer cambiar el mundo<br/><em style={{ color: pal.warm }}>sin seguir siendo transformados</em></>}
      text={<>Existe el riesgo de servir apasionadamente cuando nuestra primera pasión ya no es pasar tiempo con Dios. Podemos querer transformar a otros mientras dejamos de permitir que Él transforme nuestro corazón; entonces el programa, la plataforma y los resultados ocupan el lugar de la intimidad.</>}
      scene={
        <C4Scene>
          <g data-animated style={{ animation: active ? 'c4-drift 5s ease-in-out infinite' : 'none' }}>
            <rect x="95" y="120" width="510" height="390" rx="18" fill={pal.abyss} stroke={pal.blue} strokeWidth="2"/>
            <path d="M 120 190 H 580 M 120 255 H 580 M 120 320 H 580" stroke={pal.blue} opacity=".55"/>
            {[
              [160,165,'PROGRAMA'], [310,230,'PLATAFORMA'], [205,295,'APLAUSO'], [410,360,'RENDIMIENTO'],
            ].map((a, i) => (
              <g key={a[2]} data-animated style={{ animation: active ? `c4-shake ${1.6 + i * .2}s ease-in-out infinite` : 'none' }}>
                <rect x={a[0] - 75} y={a[1] - 22} width="150" height="44" rx="22" fill={pal.deep} stroke={pal.coral} strokeOpacity=".55"/>
                <text x={a[0]} y={a[1] + 6} textAnchor="middle" fill={pal.mist} fontSize="14" letterSpacing="2">{a[2]}</text>
              </g>
            ))}
            <C4Child x={350} y={430} scale={.78} pal={pal}/>
          </g>
          <circle cx="350" cy="385" r="135" fill="none" stroke={pal.warm} strokeWidth="2"
            strokeDasharray="3 13" opacity=".18"/>
        </C4Scene>
      }/>
  );
}

// 08 — Tentación
function C4Tentacion({ pal, t, active }) {
  return (
    <C4Split pal={pal} t={t} active={active}
      label="05 · Las otras voces que no vienen del Padre"
      title={<><em style={{ color: pal.coral }}>"Si eres Hijo..."</em><br/>demuéstralo</>}
      text={<>La tentación intenta movernos del ser al hacer: demostrar identidad por medio del poder, el rendimiento, la aprobación o la reputación. Nos lleva a buscar afuera la seguridad que el Padre ya habló sobre nosotros.</>}
      scene={
        <C4Scene>
          <C4Child x={350} y={420} scale={1.05} pal={pal}/>
          {[
            { x: 120, y: 165, word: 'PODER', d: 0 },
            { x: 500, y: 155, word: 'APROBACIÓN', d: .6 },
            { x: 125, y: 510, word: 'ÉXITO', d: 1.2 },
            { x: 520, y: 515, word: 'REPUTACIÓN', d: 1.8 },
          ].map((v) => (
            <g key={v.word} data-animated style={{ animation: active ? `c4-drift 4s ease-in-out ${v.d}s infinite` : 'none' }}>
              <circle cx={v.x} cy={v.y} r="74" fill={pal.coral} opacity=".08"/>
              <circle cx={v.x} cy={v.y} r="52" fill="none" stroke={pal.coral} strokeOpacity=".45" strokeDasharray="3 9"/>
              <text x={v.x} y={v.y + 5} textAnchor="middle" fill={pal.coral} fontSize="15" letterSpacing="2">{v.word}</text>
              <path d={`M ${v.x} ${v.y} Q 350 300 350 365`} fill="none" stroke={pal.coral}
                strokeWidth="1.5" strokeDasharray="3 9" opacity=".5"/>
            </g>
          ))}
          <circle cx="350" cy="406" r="8" fill={pal.warm} data-animated
            style={{ animation: active ? 'c4-pulse 2.5s ease-in-out infinite' : 'none', transformOrigin: '350px 406px' }}/>
        </C4Scene>
      }/>
  );
}

// 09 — Espíritu de adopción
function C4Adopcion({ pal, t, active }) {
  return (
    <C4Split pal={pal} t={t} active={active} light
      label="07 · La voz que sana · El Espíritu de adopción"
      title={<>El Espíritu<br/><em style={{ color: pal.warmDeep }}>de adopción</em></>}
      text={<>El Espíritu no solo informa: da testimonio dentro de nosotros de que pertenecemos. Ser hijo es más que un conocimiento correcto; es una revelación que vuelve a despertar el clamor: ¡Abba, Padre!</>}
      verse={{
        text: 'No habéis recibido el espíritu de esclavitud para estar otra vez en temor, sino el Espíritu de adopción, por el cual clamamos: ¡Abba, Padre!',
        reference: 'Romanos 8:15–16',
      }}
      scene={
        <C4Scene light>
          <circle cx="350" cy="350" r="230" fill="url(#c4Glow)" opacity=".3"/>
          <C4Child x={350} y={425} scale={1.05} pal={pal} light/>
          <g data-animated style={{ animation: active ? 'c4-answer 1.8s ease .8s both' : 'none', transformOrigin: '350px 310px' }}>
            {[120, 170, 220].map((r, i) => (
              <circle key={r} cx="350" cy="330" r={r} fill="none" stroke={pal.warmDeep}
                strokeWidth={i === 0 ? 2 : 1} opacity={.4 - i * .09} strokeDasharray="3 12"/>
            ))}
            <text x="350" y="155" textAnchor="middle" fill={pal.warmDeep}
              fontFamily="'Fraunces', serif" fontStyle="italic" fontSize="56">Abba</text>
          </g>
          {Array.from({ length: 8 }, (_, i) => (
            <circle key={i} cx={300 + (i % 4) * 35} cy="480" r={2 + i % 2} fill={pal.warm}
              data-animated style={{ animation: active ? `c4-rise ${3.4 + i % 3}s ease-in ${i * .35}s infinite` : 'none' }}/>
          ))}
        </C4Scene>
      }/>
  );
}

// 10 — Hijo amado
function C4Amado({ pal, t, active }) {
  return (
    <C4Split pal={pal} t={t} active={active} light
      label="08 · La voz que sana · La voz del Padre"
      title={<>Antes de hacer,<br/><em style={{ color: pal.warmDeep }}>ya eras amado</em></>}
      text={<>Antes de que Jesús iniciara su ministerio, el Padre afirmó quién era y lo que producía en su corazón. La identidad antecede al desempeño. No necesitas ganar la voz que ya te llamó hijo.</>}
      verse={{
        text: 'Tú eres mi Hijo amado; en ti tengo complacencia.',
        reference: 'Marcos 1:11',
      }}
      scene={
        <C4Scene light>
          <C4Father x={350} y={250} scale={.8} pal={pal}/>
          <g data-animated style={{ animation: active ? 'c4-answer 1.8s ease 1.2s both' : 'none', transformOrigin: '350px 430px' }}>
            <C4Child x={350} y={500} scale={.85} pal={pal} light/>
            <path d="M 350 190 V 380" stroke={pal.warm} strokeWidth="20" opacity=".12"/>
            <path d="M 350 190 V 380" stroke={pal.warmDeep} strokeWidth="2" strokeDasharray="4 12"/>
          </g>
          <text x="350" y="655" textAnchor="middle" fill={pal.warmDeep}
            fontFamily="'Fraunces', serif" fontStyle="italic" fontSize="30">La identidad antecede al desempeño.</text>
        </C4Scene>
      }/>
  );
}

// 11 — Amor seguro
function C4AmorSeguro({ pal, t, active }) {
  return (
    <C4Split pal={pal} t={t} active={active} light
      label="09 · La voz que sana · Un amor seguro"
      title={<>La corrección no<br/><em style={{ color: pal.warmDeep }}>cancela la relación</em></>}
      text={<>Como un padre que contempla con amor a su hija mientras duerme, aun después de corregirla, Dios mira a sus hijos con placer. La disciplina sucede dentro de un amor seguro; nunca fuera de él.</>}
      scene={
        <C4Scene light>
          <path d="M 100 500 H 600" stroke={pal.warmDeep} strokeWidth="2" opacity=".35"/>
          <rect x="180" y="360" width="335" height="118" rx="22" fill="#e2d4bd" stroke={pal.warmDeep} strokeOpacity=".35"/>
          <path d="M 210 370 Q 340 435 495 373 V 462 H 210 Z" fill={pal.warm} opacity=".34"/>
          <ellipse cx="280" cy="370" rx="38" ry="34" fill="url(#c4Skin)"/>
          <path d="M 244 365 Q 280 320 320 358" fill={pal.abyss}/>
          <g data-animated style={{ animation: active ? 'c4-breathe 4s ease-in-out infinite' : 'none', transformOrigin: '445px 330px' }}>
            <C4Father x={485} y={285} scale={.62} pal={pal}/>
          </g>
          <path d="M 440 330 Q 365 300 300 342" fill="none" stroke={pal.warmDeep}
            strokeWidth="2" strokeDasharray="4 10" opacity=".65"/>
          <circle cx="300" cy="342" r="7" fill={pal.warm}/>
        </C4Scene>
      }/>
  );
}

// 12 — Brazos de Papá
function C4Brazos({ pal, t, active }) {
  const k = t.fontScale || 1;
  return (
    <C4Frame pal={pal} t={t} label="10 · El resultado">
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '.9fr 1.1fr', gap: 70, alignItems: 'center' }}>
        <div>
          <h2 style={{
            margin: 0, fontFamily: "'Fraunces', serif", fontSize: 76 * k,
            lineHeight: 1.05, fontWeight: 300, letterSpacing: '-.03em',
          }}>De vuelta<br/>a los brazos<br/><em style={{ color: pal.warm }}>de Papá</em></h2>
          <p style={{ marginTop: 34, fontSize: 29 * k, lineHeight: 1.5, color: pal.paper + 'bd' }}>
            La voz del Padre nos devuelve a la intimidad. En Getsemaní, Jesús clamó "Abba": no desde la distancia religiosa, sino desde la cercanía, la dependencia y la confianza.
          </p>
          <C4Verse pal={pal} t={t}
            text="Abba, Padre, todas las cosas son posibles para ti; aparta de mí esta copa; mas no lo que yo quiero, sino lo que tú."
            reference="Marcos 14:36"/>
        </div>
        <div style={{ height: 790, borderRadius: 14, overflow: 'hidden', border: `1px solid ${pal.blue}` }}>
          <C4Scene pal={pal} active={active}>
            <g data-animated style={{ animation: active ? 'c4-answer 2s ease .4s both' : 'none', transformOrigin: '420px 310px' }}>
              <C4Father x={420} y={280} scale={1.12} pal={pal}/>
            </g>
            <g data-animated style={{ animation: active ? 'c4-home 4.8s cubic-bezier(.4,0,.2,1) .4s both' : 'none' }}>
              <C4Child x={20} y={490} scale={.85} pal={pal}/>
            </g>
            <g data-animated style={{ animation: active ? 'c4-embrace 1.4s ease 3.4s both' : 'none', transformOrigin: '420px 430px' }}>
              <circle cx="420" cy="410" r="132" fill="url(#c4Glow)" opacity=".62"/>
              <path d="M 300 355 Q 420 485 540 355" fill="none" stroke="#fff2d9" strokeWidth="14"
                strokeLinecap="round" opacity=".8"/>
            </g>
            <text x="350" y="645" textAnchor="middle" fill={pal.warm}
              fontFamily="'Fraunces', serif" fontStyle="italic" fontSize="38">Solo los hijos pueden clamar Abba.</text>
          </C4Scene>
        </div>
      </div>
      <div data-animated style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(circle at 72% 42%, ${pal.warm}22, transparent 32%)`,
        animation: active ? 'c4-pulse 5s ease-in-out infinite' : 'none',
        transformOrigin: '72% 42%',
      }}/>
    </C4Frame>
  );
}

// 13 — Mapa bíblico
function C4Versiculos({ pal, t, active }) {
  const k = t.fontScale || 1;
  const left = [
    {
      ref: 'Romanos 8:15–16',
      theme: 'Adopción · el Espíritu confirma que somos hijos',
      text: 'Pues no habéis recibido el espíritu de esclavitud para estar otra vez en temor, sino que habéis recibido el espíritu de adopción, por el cual clamamos: ¡Abba, Padre! El Espíritu mismo da testimonio a nuestro espíritu, de que somos hijos de Dios.',
    },
    {
      ref: 'Lucas 3:22',
      theme: 'Identidad · el Padre habla antes del desempeño',
      text: 'Y descendió el Espíritu Santo sobre él en forma corporal, como paloma, y vino una voz del cielo que decía: Tú eres mi Hijo amado; en ti tengo complacencia.',
    },
    {
      ref: 'Juan 8:29',
      theme: 'Presencia · agradar al Padre vence la soledad',
      text: 'Porque el que me envió, conmigo está; no me ha dejado solo el Padre, porque yo hago siempre lo que le agrada.',
    },
  ];
  const right = [
    {
      ref: 'Juan 12:42–43',
      theme: 'Aprobación · la gloria de Dios o la de los hombres',
      text: 'Con todo eso, aun de los gobernantes, muchos creyeron en él; pero a causa de los fariseos no lo confesaban, para no ser expulsados de la sinagoga. Porque amaban más la gloria de los hombres que la gloria de Dios.',
    },
    {
      ref: 'Lucas 4:3–9',
      theme: 'Tentación · del ser al tener que demostrar',
      compact: true,
      text: 'Entonces el diablo le dijo: Si eres Hijo de Dios, di a esta piedra que se convierta en pan. Jesús, respondiéndole, dijo: Escrito está: No solo de pan vivirá el hombre, sino de toda palabra de Dios. Y le llevó el diablo a un alto monte, y le mostró en un momento todos los reinos de la tierra. Y le dijo el diablo: A ti te daré toda esta potestad, y la gloria de ellos; porque a mí me ha sido entregada, y a quien quiero la doy. Si tú postrado me adorares, todos serán tuyos. Respondiendo Jesús, le dijo: Vete de mí, Satanás, porque escrito está: Al Señor tu Dios adorarás, y a él sólo servirás. Y le llevó a Jerusalén, y le puso sobre el pináculo del templo, y le dijo: Si eres Hijo de Dios, échate de aquí abajo.',
    },
  ];

  const Passage = ({ item, index }) => (
    <article data-animated style={{
      padding: '20px 24px', background: '#fffaf2',
      borderLeft: `3px solid ${pal.warmDeep}`,
      boxShadow: '0 12px 32px rgba(23,32,45,.07)',
      animation: active ? `c4-fadeUp .65s ease ${index * .13}s both` : 'none',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
        <strong style={{
          color: pal.warmDeep, fontFamily: "'Fraunces', serif",
          fontSize: 27 * k, fontWeight: 400,
        }}>{item.ref}</strong>
        <span style={{
          color: pal.coral, fontSize: 12.5 * k, letterSpacing: '.11em',
          textTransform: 'uppercase', fontWeight: 600,
        }}>{item.theme}</span>
      </div>
      <p style={{
        margin: '10px 0 0', color: pal.ink + 'c7',
        fontFamily: "'Fraunces', serif", fontStyle: 'italic',
        fontSize: (item.compact ? 15 : 17) * k,
        lineHeight: item.compact ? 1.36 : 1.42,
      }}>"{item.text}"</p>
    </article>
  );

  return (
    <C4Frame pal={pal} t={t} label="11 · Todos los pasajes del capítulo" light>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 50 }}>
          <h2 style={{
            margin: 0, fontFamily: "'Fraunces', serif", fontWeight: 300,
            fontSize: 56 * k, lineHeight: 1.05, letterSpacing: '-.025em',
          }}>Mapa bíblico<br/><em style={{ color: pal.warmDeep }}>del capítulo 4</em></h2>
          <p style={{
            margin: 0, maxWidth: 760, color: pal.ink + '9f',
            fontSize: 20 * k, lineHeight: 1.42, textAlign: 'right',
          }}>Un mismo recorrido: de la esclavitud y la aprobación humana a la identidad, la presencia y la intimidad del Padre.</p>
        </div>
        <div style={{
          marginTop: 30, display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 24, alignItems: 'start', minHeight: 0,
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {left.map((item, i) => <Passage key={item.ref} item={item} index={i}/>)}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {right.map((item, i) => <Passage key={item.ref} item={item} index={i + left.length}/>)}
          </div>
        </div>
      </div>
    </C4Frame>
  );
}

Object.assign(window, {
  C4_PALETTE,
  C4Portada, C4Historia, C4Preguntas, C4Devocional, C4Silencio, C4Heridas,
  C4Orfanatos, C4Tentacion, C4Adopcion, C4Amado, C4AmorSeguro, C4Brazos,
  C4Versiculos,
});
