// ============= TOP BANNER — URGENCIA =============
const TopBanner = ({ showCountdown }) =>
<div style={{
  background: 'linear-gradient(90deg, var(--ink), var(--ink-2))',
  color: '#fff',
  fontSize: 13,
  padding: '11px var(--pad-x)',
  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18,
  flexWrap: 'wrap',
  fontWeight: 500,
  position: 'relative', zIndex: 50
}}>
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <IconFlame size={16} stroke="var(--orange)" sw={2} />
      <span><strong style={{ color: 'var(--yellow)' }}>73% OFF</strong> · Oferta termina hoy</span>
    </span>
    {showCountdown &&
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '5px 14px',
    background: 'var(--orange)', color: '#fff',
    borderRadius: 999, fontWeight: 700
  }}>
        <Countdown compact dark />
      </span>
  }
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, opacity: .85 }}>
      <IconLock size={13} /> +2.847 mamás ya entraron
    </span>
  </div>;


// ============= HERO VARIANTS =============
const HERO_VARIANTS = {
  promesa: {
    pre: 'A la mamá preocupada por el desarrollo de su bebé:',
    title: [
    'Si tu bebé tiene entre ',
    <span key="x" className="highlight-yellow">0 y 6 años</span>,
    ', esto puede ser lo más importante que leas este mes.'],

    sub: 'Descubre el método casero (de 10 min al día) que está ayudando a miles de mamás a activar el desarrollo cerebral y motor de sus bebés — antes de que sea demasiado tarde.'
  },
  pregunta: {
    pre: 'Pregunta incómoda para mamás primerizas:',
    title: [
    '¿Y si tu bebé está ',
    <span key="x" className="underline-wave"><i>quedándose atrás</i></span>,
    ' en su desarrollo... y tú aún no te diste cuenta?'],

    sub: 'Existen señales silenciosas que la mayoría de mamás no saben leer. Y cuando se detectan tarde, recuperar el tiempo perdido es 10 veces más difícil.'
  },
  culpa: {
    pre: 'Antes de que cierres esta página, lee esto:',
    title: [
    'El ',
    <span key="x" className="highlight-pink">80% del cerebro</span>,
    ' de tu hijo se forma antes de los 6 años.',
    <br key="b" />,
    <i key="i" style={{ fontStyle: 'italic', color: 'var(--orange)' }}>¿Qué estás haciendo con esa ventana?</i>],

    sub: 'No es para asustarte. Es para que sepas que estás a tiempo — pero no por mucho. Este pack te da el sistema exacto, paso a paso, para no desperdiciar un solo día.'
  }
};

// ============= HERO =============
const Hero = ({ variant = 'promesa' }) => {
  const v = HERO_VARIANTS[variant];
  return (
    <section data-screen-label="Hero" style={{
      position: 'relative',
      paddingTop: 'clamp(44px, 6vw, 80px)',
      paddingBottom: 'clamp(60px, 7vw, 100px)',
      overflow: 'hidden'
    }}>
      {/* Decorative blobs */}
      <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', top: '-60px', left: '-80px', width: 340, height: 340, borderRadius: '50%', background: 'color-mix(in oklab, var(--pink) 20%, transparent)', filter: 'blur(30px)' }} />
        <div style={{ position: 'absolute', top: '120px', right: '-60px', width: 280, height: 280, borderRadius: '50%', background: 'color-mix(in oklab, var(--yellow) 35%, transparent)', filter: 'blur(20px)' }} />
        <div style={{ position: 'absolute', bottom: '-100px', left: '40%', width: 360, height: 360, borderRadius: '50%', background: 'color-mix(in oklab, var(--blue) 15%, transparent)', filter: 'blur(40px)' }} />
      </div>

      <Container size="md" style={{ position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '7px 16px', borderRadius: 999,
            background: 'var(--surface)',
            border: '1.5px solid var(--line)',
            fontSize: 12.5, fontWeight: 600, color: 'var(--ink)',
            fontFamily: 'var(--font-mono)', letterSpacing: '.05em',
            marginBottom: 22,
            boxShadow: '0 4px 14px -4px rgba(0,0,0,.08)'
          }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--green)', boxShadow: '0 0 0 4px color-mix(in oklab, var(--green) 30%, transparent)' }} />
            PACK DE ESTIMULACIÓN TEMPRANA · 0 A 6 AÑOS ·
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--ink-2)', fontSize: 18, marginBottom: 20 }}>
            {v.pre}
          </div>
        </div>

        <H as="h1" size="xxl" style={{ textAlign: 'center', marginBottom: 28, fontWeight: 500 }}>
          {v.title}
        </H>

        <div style={{ maxWidth: 680, margin: '0 auto 40px', textAlign: 'center' }}>
          <Lede style={{ fontSize: 'clamp(17px, 1.45vw, 21px)', margin: '0 auto', color: 'var(--ink-2)' }}>
            {v.sub}
          </Lede>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20, marginBottom: 40 }}>
          <button
            onClick={() => {
              const el = document.getElementById('modulos');
              if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 20, behavior: 'smooth' });
            }}
            className="cta-btn cta-pulse"
            style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
              fontWeight: 700, letterSpacing: '-0.005em',
              fontFamily: 'var(--font-body)',
              borderRadius: 999,
              background: 'var(--cta)',
              color: '#fff',
              boxShadow: '0 14px 30px -8px color-mix(in oklab, var(--cta) 55%, transparent), inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.1)',
              transition: 'transform .2s, box-shadow .2s, background .2s',
              padding: '26px 44px', fontSize: 22,
              border: 0, cursor: 'pointer',
            }}
          >
            <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1.15 }}>
              <span>SÍ, Quiero el pack por $7,99USD</span>
              <span style={{ fontSize: 11.5, fontWeight: 500, opacity: .85, fontFamily: 'var(--font-mono)', letterSpacing: '.05em', textTransform: 'uppercase', marginTop: 3 }}>Acceso inmediato · garantía 7 días</span>
            </span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14, color: 'var(--ink-dim)' }}>
            <Stars />
            <span><strong style={{ color: 'var(--ink)' }}>4.9/5</strong> · +2.847 mamás</span>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--line)' }} />
            <IconLock size={13} />
            <span>Pago 100% seguro</span>
          </div>
        </div>

        {/* Hero emotional image — mom + baby connection */}
        <div style={{ maxWidth: 900, margin: '0 auto 32px', position: 'relative' }}>
          <ImgSlot
            src="uploads/mama-1.jpg"
            alt="Mamá jugando con su hijo en un juego de estimulación temprana"
            label="FOTO HERO"
            sub="Mamá conectada con su bebé · primer plano emocional · luz natural · 1600×900"
            ratio="16/9"
            tint="var(--pink)"
            radius={24} />
          
        </div>

        {/* Social proof pill — below the image */}
        <div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: 12 }}>
          <div style={{
            padding: '12px 18px', borderRadius: 14,
            background: 'rgba(255,255,255,.96)',
            boxShadow: '0 4px 16px -6px rgba(0,0,0,.12)',
            border: '1.5px solid var(--line)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ fontSize: 24 }}>👶</div>
            <div style={{ fontSize: 13, lineHeight: 1.4, color: 'var(--ink-2)' }}>
              <strong style={{ color: 'var(--ink)' }}>+2.847 mamás</strong> ya están haciéndolo en casa
            </div>
          </div>
        </div>

        {/* Hero mock — the product */}
        <HeroMock />
      </Container>
    </section>);

};

const HeroMock = () =>
<div style={{ position: 'relative', maxWidth: 900, margin: '0 auto' }}>
    <div style={{
    position: 'relative',
    borderRadius: 26,
    padding: 'clamp(24px, 4vw, 44px)',
    background: 'var(--surface)',
    border: '1.5px solid var(--line)',
    boxShadow: '0 30px 60px -20px rgba(10, 22, 40, .18), 0 0 0 1px rgba(255,255,255,.5) inset'
  }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, alignItems: 'center' }} className="hero-mock-grid">
        {/* Real product image */}
        <div style={{ position: 'relative' }}>
          <ImgSlot
            src="uploads/mama-2.webp?v=2"
            alt="Pack de Estimulación Temprana — caja del producto"
            label="CAJA DEL PRODUCTO"
            sub=""
            ratio="3/4"
            tint="var(--pink)"
            radius={0}
            style={{ background: 'transparent', border: 'none' }} />
          {/* Sticker */}
          <div style={{ position: 'absolute', top: -10, right: -10, transform: 'rotate(12deg)' }}>
            <Sticker color="var(--yellow)" rotate={12} size={96}>
              <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', fontStyle: 'normal', letterSpacing: '.08em' }}>DESDE</div>
              <div style={{ fontSize: 28, fontWeight: 700 }}>$7,99</div>
            </Sticker>
          </div>
        </div>

        <div>
          <Pill color="var(--green)" style={{ marginBottom: 18 }}>
            ✓ ACCESO INMEDIATO
          </Pill>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2.4vw, 28px)', lineHeight: 1.2, marginBottom: 18, letterSpacing: '-.015em' }}>
            Todo lo que necesitas para estimular a tu bebé — <i style={{ color: 'var(--orange)' }}>sin adivinar</i>.
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            <Check>Programa completo 0 a 6 años (PDF)</Check>
            <Check>Rutinas de 10 min al día</Check>
            <Check>365 actividades sin pantallas</Check>
            <Check>+80 actividades imprimibles</Check>
            <Check>Señales de alerta del desarrollo</Check>
          </ul>
        </div>
      </div>
    </div>
    <style>{`@media(max-width: 820px){.hero-mock-grid{grid-template-columns: 1fr !important; gap: 32px !important}}`}</style>
  </div>;


// ============= SOCIAL PROOF STRIP =============
const SocialStrip = () =>
<div style={{
  padding: '32px 0',
  background: 'var(--ink)',
  color: '#fff',
  overflow: 'hidden'
}}>
    <Container size="xl">
      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-around', gap: 28 }}>
        <Metric n="2.847+" label="Mamás felices" color="var(--yellow)" />
        <div style={{ width: 1, height: 40, background: 'rgba(255,255,255,.15)' }} />
        <Metric n="4.9/5" label="Valoración promedio" color="var(--green)" />
        <div style={{ width: 1, height: 40, background: 'rgba(255,255,255,.15)' }} />
        <Metric n="565+" label="Actividades" color="var(--pink)" />
        <div style={{ width: 1, height: 40, background: 'rgba(255,255,255,.15)' }} />
        <Metric n="7 días" label="Garantía total" color="var(--blue)" />
      </div>
    </Container>
  </div>;

const Metric = ({ n, label, color }) =>
<div style={{ textAlign: 'center' }}>
    <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3vw, 42px)', lineHeight: 1, color, fontStyle: 'italic' }}>{n}</div>
    <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,.75)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>{label}</div>
  </div>;


// ============= TSL — CARTA ABIERTA =============
const LetterOpen = () =>
<Section bg="var(--cream-2)" label="Carta abierta">
    <Container size="md">
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <Pill color="var(--pink)" style={{ marginBottom: 20 }}>Carta abierta de una mamá a otra</Pill>
        <H size="lg" style={{ maxWidth: '22ch', margin: '0 auto' }}>
          Si estás leyendo esto, probablemente acabas de acostar a tu bebé y <i style={{ color: 'var(--orange)' }}>sientes que algo no encaja.</i>
        </H>
      </div>

      <div className="tsl-body" style={{ fontSize: 'clamp(17px, 1.4vw, 19px)', lineHeight: 1.75, color: 'var(--ink-2)', maxWidth: 640, margin: '0 auto' }}>
        <p>
          <Dropcap letter="Q" />
          uizás no lo dices en voz alta. Pero por dentro te carcome una pregunta que no te deja dormir: <strong>"¿Estaré haciendo suficiente por mi bebé?"</strong>
        </p>
        <p>
          Ves en Instagram a otras mamás con sus hijos perfectamente estimulados, hablando a los 18 meses, caminando sin apoyo a los 11, pintando dentro de la línea a los 2 años… y tú te preguntas si el tuyo está <em>"normal"</em>.
        </p>
        <p>
          Compras juguetes "Montessori" que prometen milagros. Abres Pinterest y te pierdes entre 500 ideas sueltas. Ves reels de expertas hablando rápido en 15 segundos. Terminas el día agotada, culpable, <strong>y con la sensación de que tu bebé merece algo mejor que tu improvisación diaria.</strong>
        </p>

        <Pullquote color="var(--orange)">
          Y lo peor es que tienes razón en preocuparte. Porque lo que nadie te ha dicho es que <span className="highlight-yellow">cada día que pasa sin estimular áreas clave de su cerebro… es un día que no vuelve.</span>
        </Pullquote>

        <p>
          Pero respira. No estás aquí por casualidad. Si seguiste leyendo hasta aquí, es porque algo dentro de ti sabe que mereces un plan claro. <strong>Uno que te diga qué hacer, cuándo hacerlo y por qué.</strong> Sin culpa. Sin improvisación. Sin gastar fortunas en juguetes que tu bebé ignora.
        </p>
        <p>
          En los próximos 3 minutos voy a contarte exactamente cómo más de <strong>2.847 mamás como tú</strong> están transformando la rutina con sus bebés en solo 10 minutos al día — y cómo puedes empezar hoy mismo por menos de lo que cuesta un juguete desechable.
        </p>
      </div>

      {/* Author full image with caption */}
      <div style={{ maxWidth: 560, margin: '48px auto 0', position: 'relative' }}>
        <ImgSlot
        src="uploads/mama-3.webp"
        alt="Camila trabajando con una niña en una sesión de estimulación temprana"
        label="AUTORA TRABAJANDO"
        sub="Camila con un bebé · ambiente cálido casero · 1200×800"
        ratio="3/2"
        tint="var(--orange)"
        radius={20} />
      
        <div style={{
        position: 'absolute', bottom: -18, right: -18,
        transform: 'rotate(8deg)'
      }}>
          <Sticker color="var(--yellow)" rotate={8} size={104}>
            <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', fontStyle: 'normal' }}>+8 años</div>
            <div style={{ fontSize: 14, lineHeight: 1.1 }}>acompañando<br />familias</div>
          </Sticker>
        </div>
      </div>
    </Container>
  </Section>;


// ============= DOLOR — CONSECUENCIAS =============
const PainAmplify = () =>
<Section label="Dolor amplificado">
    <Container size="md">
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <Eyebrow color="var(--orange)">Lo que nadie te dijo</Eyebrow>
        <H size="xl">
          Los primeros 6 años de tu bebé <br />
          <span style={{ color: 'var(--orange)' }}>no vuelven.</span>
        </H>
        <Lede style={{ margin: '24px auto 0', textAlign: 'center' }}>
          Y mientras tú buscas respuestas en Google, su cerebro está construyendo, literalmente, el cableado que usará el resto de su vida.
        </Lede>
      </div>

      {/* Brain/development emotional image */}
      <div style={{ maxWidth: 960, margin: '0 auto 60px' }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 10 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '8px 14px', borderRadius: 999,
            background: 'var(--ink)', color: '#fff',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', fontWeight: 700
          }}>📊 BASADO EN NEUROCIENCIA</div>
        </div>
        <ImgSlot
        src="uploads/mama-4.webp"
        alt="Comparativa: cerebro estimulado vs cerebro no estimulado en la primera infancia"
        label="FOTO CIENTÍFICA / EMOCIONAL"
        sub="Cerebro infantil ilustrado · o bebé pensativo · 1400×600"
        ratio="1000/413"
        tint="var(--blue)"
        radius={20} />
      </div>

      {/* Stats bricks */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginBottom: 72 }} className="stats-grid">
        {[
      { n: '80%', t: 'del cerebro se forma antes de los 6 años', color: 'var(--blue)' },
      { n: '1.000', t: 'conexiones neuronales por segundo en los primeros 3 años', color: 'var(--pink)' },
      { n: '10x', t: 'más difícil recuperar habilidades después de los 6', color: 'var(--orange)' }].
      map((s, i) =>
      <div key={i} style={{
        padding: 28, borderRadius: 18,
        background: 'var(--surface)',
        border: '1.5px solid var(--line)',
        boxShadow: '0 12px 30px -14px rgba(0,0,0,.1)'
      }}>
            <div style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500,
          fontSize: 'clamp(44px, 5.5vw, 64px)', lineHeight: 1,
          color: s.color, marginBottom: 14
        }}>{s.n}</div>
            <div style={{ fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.5, fontWeight: 500 }}>{s.t}</div>
          </div>
      )}
      </div>

      {/* The hard truth block */}
      <div style={{
      padding: 'clamp(32px, 4vw, 56px)',
      borderRadius: 24,
      background: 'var(--ink)',
      color: '#fff',
      position: 'relative', overflow: 'hidden'
    }}>
        <div aria-hidden style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%', background: 'color-mix(in oklab, var(--orange) 40%, transparent)', filter: 'blur(30px)' }} />
        <div style={{ position: 'relative' }}>
          <Pill color="var(--yellow)" style={{ background: 'var(--yellow)', color: 'var(--ink)', marginBottom: 20 }}>⚠ ATENCIÓN, MAMÁ</Pill>
          <H size="lg" style={{ color: '#fff', marginBottom: 24 }}>
            Esto es lo que podría estar pasando <i style={{ color: 'var(--yellow)' }}>ahora mismo</i> sin que lo notes:
          </H>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontSize: 16.5, lineHeight: 1.6 }}>
            {[
          <>Tu bebé <strong>podría estar desarrollando retrasos leves</strong> en motricidad, lenguaje o coordinación — y las señales son tan sutiles que solo un especialista las detecta.</>,
          <>Las "ventanas neurológicas" se <strong>cierran en momentos específicos</strong>: si no estimulas el lenguaje entre los 12 y 24 meses, por ejemplo, el esfuerzo después es <strong>10 veces mayor</strong>.</>,
          <>Las pantallas que usas para tener 5 minutos de paz están <strong>asociadas a retrasos de hasta 7 meses</strong> en lenguaje y atención (Canadian Medical Association, 2019).</>,
          <>Cada mes sin estimulación consciente es <strong>equivalente a borrar cientos de miles de conexiones neuronales</strong> que tu bebé podría estar formando.</>].
          map((t, i) =>
          <li key={i} style={{ display: 'flex', gap: 16, padding: '14px 0', borderBottom: i < 3 ? '1px solid rgba(255,255,255,.1)' : 'none' }}>
                <span style={{ flexShrink: 0, color: 'var(--orange)', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, width: 28 }}>0{i + 1}</span>
                <span>{t}</span>
              </li>
          )}
          </ul>
          <div style={{ marginTop: 36, padding: 22, background: 'color-mix(in oklab, var(--orange) 18%, transparent)', borderRadius: 14, borderLeft: '4px solid var(--orange)', fontSize: 17, lineHeight: 1.55 }}>
            <strong style={{ color: 'var(--yellow)' }}>Y esto no es para asustarte.</strong> Es para que entiendas que estás a tiempo — <em>pero la ventana no es infinita</em>. Por eso existe este pack: para que sepas <strong style={{ color: '#fff' }}>exactamente qué hacer</strong>, sin depender de tu intuición.
          </div>
        </div>
      </div>
    </Container>
    <style>{`@media(max-width: 700px){.stats-grid{grid-template-columns: 1fr !important}}`}</style>
  </Section>;


// ============= BEFORE / AFTER =============
const FutureSplit = () =>
<Section bg="var(--cream-2)" label="Antes/Despues">
    <Container size="lg">
      <div style={{ textAlign: 'center', marginBottom: 60 }}>
        <Eyebrow color="var(--pink)">Dos futuros posibles</Eyebrow>
        <H size="xl">¿Cuál escoges para tu bebé?</H>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="future-grid">
        {/* BAD */}
        <div style={{
        padding: 'clamp(24px, 3vw, 40px)',
        borderRadius: 20,
        background: 'var(--surface)',
        border: '1.5px solid var(--line)',
        position: 'relative'
      }}>
          <div style={{ marginBottom: 20, borderRadius: 14, overflow: 'hidden', filter: 'grayscale(.4) contrast(.95)' }}>
            <ImgSlot src="uploads/mama-5.webp" alt="Mamá agotada en el sofá mientras su bebé juega solo entre juguetes desordenados" label="FOTO — SIN PLAN" sub="Mamá cansada/abrumada · tonos apagados · 4/3" ratio="4/3" tint="#9CA3AF" radius={14} />
          </div>
          <div style={{
          position: 'absolute', top: -14, left: 24,
          padding: '5px 14px', borderRadius: 999,
          background: '#D84343', color: '#fff',
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', fontWeight: 700
        }}>SIN PLAN</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2.4vw, 28px)', lineHeight: 1.2, marginBottom: 20, color: 'var(--ink-2)' }}>
            Dentro de 6 meses, si sigues igual…
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            <Cross>Sigues improvisando con juguetes caros que nadie usa</Cross>
            <Cross>Comparas a tu bebé con otros en Instagram (y te duele)</Cross>
            <Cross>Caes en las pantallas cada vez más — y lo sabes</Cross>
            <Cross>La culpa de mamá se convierte en insomnio</Cross>
            <Cross>Pierdes ventanas críticas sin darte cuenta</Cross>
          </ul>
        </div>

        {/* GOOD */}
        <div style={{
        padding: 'clamp(24px, 3vw, 40px)',
        borderRadius: 20,
        background: 'linear-gradient(155deg, #fff, color-mix(in oklab, var(--green) 8%, white))',
        border: '2px solid var(--green)',
        boxShadow: '0 20px 40px -12px color-mix(in oklab, var(--green) 30%, transparent)',
        position: 'relative'
      }}>
          <div style={{ marginBottom: 20, borderRadius: 14, overflow: 'hidden' }}>
            <ImgSlot src="uploads/mama-6.webp" alt="Mamá sonriendo y jugando con su bebé felizmente en el suelo con juguetes" label="FOTO — CON EL PACK" sub="Mamá + bebé jugando felices · luz natural · 4/3" ratio="4/3" tint="var(--green)" radius={14} />
          </div>
          <div style={{
          position: 'absolute', top: -14, left: 24,
          padding: '5px 14px', borderRadius: 999,
          background: 'var(--green)', color: '#fff',
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', fontWeight: 700
        }}>CON EL PACK</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2.4vw, 28px)', lineHeight: 1.2, marginBottom: 20, color: 'var(--ink)' }}>
            Dentro de 6 meses, con tu plan…
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            <Check>Sigues improvisando con juguetes caros que nadie usa</Check>
            <Check>Comparas a tu bebé con otros en Instagram (y te duele)</Check>
            <Check>Caes en las pantallas cada vez más — y lo sabes</Check>
            <Check>Duermes tranquila: sabes que lo estás haciendo bien</Check>
            <Check>Aprovechas CADA ventana crítica del desarrollo</Check>
          </ul>
        </div>
      </div>
    </Container>
    <style>{`@media(max-width: 780px){.future-grid{grid-template-columns: 1fr !important}}`}</style>
  </Section>;


Object.assign(window, { TopBanner, Hero, HERO_VARIANTS, SocialStrip, LetterOpen, PainAmplify, FutureSplit });