// Pau Polaino — Plan Recién Nacido detail page (0-4m)
// Course-based · 3 pricing tiers · Desktop + Mobile

/* ---------- Shared content data ---------- */
const PRN_PAIN = [
  "Estás embarazada y quieres prepararte para no improvisar",
  "Acabas de tener a tu bebé y ya no sabes qué es dormir",
  "Lees mil cosas contradictorias en internet",
  "Tu entorno te da consejos opuestos cada cinco minutos",
  "Te aterra crear malos hábitos sin darte cuenta",
  "Quieres disfrutar de tu bebé, no sobrevivir a sus noches",
];

const PRN_TOPICS = [
  { n: "01", t: "Empieza con un plan, no a ciegas", d: "La hoja de ruta que vas a seguir hasta tener a tu bebé durmiendo bien, y cómo sacarle el máximo partido al curso." },
  { n: "02", t: "Entiende de verdad cómo duerme tu bebé", d: "Cómo funciona el sueño, por qué se despierta y qué ganáis cuando aprende a dormir por sí mismo. El «porqué» que lo cambia todo." },
  { n: "03", t: "Las bases de seguridad, claras desde el día 1", d: "Lo que debes tener presente en todo momento para que cada decisión sea segura y esté adaptada a tu bebé." },
  { n: "04", t: "Los pilares de un sueño que funciona", d: "Las claves que rodean cada siesta y cada noche: ambiente, ritmos, señales de tu bebé y los hábitos que marcan la diferencia." },
  { n: "05", t: "Calma a tu bebé sin crear dependencias", d: "Cómo consolarle y acompañarle sin que acabe necesitando el pecho, el chupete o tus brazos para dormirse cada vez." },
  { n: "06", t: "Domina el sueño de los 0 a 3 meses", d: "Qué es normal a esta edad y mi método paso a paso para acompañar a tu bebé desde el primer día, sin agobios." },
  { n: "07", t: "Llega preparada al cambio de los 4 meses", d: "La etapa que más descoloca a las familias, resuelta: pautas adaptadas al carácter de tu bebé para superarla con ventaja." },
  { n: "08", t: "Comer y dormir, sin mitos ni dudas", d: "Aprende a distinguir si se despierta por hambre o por costumbre, cómo manejar las tomas nocturnas y qué ayuda de verdad a descansar." },
  { n: "09", t: "Las dudas que nadie te resuelve", d: "Hora ideal de acostarse, su relación con la cuna, el pañal por la noche, el reflujo… esos detalles concretos que te quitan el sueño, respondidos." },
  { n: "10", t: "Disfruta del proceso, sin presión", d: "Cómo vivir esta etapa con calma y confianza para disfrutar de tu bebé mientras aprende a dormir." },
];

const PRN_TIERS = [
  {
    name: "Curso",
    badge: "Esenciales",
    price: "67",
    sub: "Pago único · + IVA",
    desc: "Empieza con bases sólidas. Aprende a tu ritmo, donde quieras.",
    features: [
      "Acceso al curso completo (10 temas en vídeo)",
      "6 meses de acceso a la plataforma",
      "3 guías PDF descargables",
    ],
    cta: "Quiero el curso",
    url: "https://curso-paupolainosleepspecialist.systeme.io/pagocurso67",
    tone: "soft",
  },
  {
    name: "Curso + Consulta",
    badge: "El más elegido",
    price: "167",
    sub: "Pago único · + IVA",
    desc: "Todo el curso + una llamada conmigo para resolver tu caso concreto.",
    features: [
      "Todo lo del plan Curso",
      "1 videollamada conmigo (90 min)",
      "Informe con pautas específicas para tu bebé y recomendaciones personalizadas según la dinámica familiar",
    ],
    cta: "Curso + llamada",
    url: "https://curso-paupolainosleepspecialist.systeme.io/pagocursoconsulta",
    tone: "primary",
  },
  {
    name: "Curso + Consulta con seguimiento",
    badge: "Acompañamiento completo",
    price: "386",
    sub: "Pago único · + IVA",
    desc: "Curso + plan a medida + dos semanas de mi WhatsApp directo.",
    features: [
      "Todo lo del plan Curso + Consulta",
      "Plan de sueño 100% personalizado",
      "WhatsApp directo conmigo · 2 semanas",
      "Ajustes diarios sobre la marcha",
    ],
    cta: "Acompáñame entera",
    url: "/contacto/",
    tone: "dark",
  },
];

const PRN_METHOD = [
  { t: "Empieza bien desde el principio", d: "Prevenir es infinitamente más fácil que corregir. Si arrancas con buenas bases, te ahorras meses de problemas que ni sabías que existían." },
  { t: "Sin presión, sin métodos rígidos", d: "Un bebé de 0-4 meses no es para entrenarlo. Es para conocerlo, leerlo y crear las condiciones que faciliten su sueño natural." },
  { t: "Respetamos a tu bebé. Y a ti", d: "No te voy a pedir destete, ni renunciar al colecho si lo queréis. Trabajamos con lo que sois, no en contra." },
  { t: "Información veraz, no opiniones", d: "Basado en evidencia y formación profesional. Sin mitos. Sin lo que dijo tu suegra. Sin lo que vio una en Instagram." },
];

const PRN_FAQ = [
  { q: "¿Desde cuándo puedo empezar?", a: "Desde el embarazo. De hecho, lo ideal es prepararte antes de que llegue tu bebé. Pero también puedes empezar en cualquier momento de los primeros 4 meses: nunca es tarde para sentar buenas bases." },
  { q: "¿No es demasiado pronto para «trabajar» el sueño?", a: "No. La autonomía de sueño no tiene edad. Además no trabajamos el sueño como con un bebé mayor: aquí no hay rutinas tan rígidas ni horarios forzados. Lo que hacemos es acompañar su descanso de forma natural y prevenir hábitos que dentro de unos meses te complicarían la vida y harán que tu peque no tenga un descanso de calidad." },
  { q: "¿Qué diferencia hay entre los 3 planes?", a: "El Curso son los contenidos para que aprendas a tu ritmo. El Curso + Consulta añade una videollamada conmigo de 90 minutos para resolver tu caso concreto y un informe con directrices específicas para tu bebé. El Curso + Plan es acompañamiento completo: el curso, un plan personalizado, llamada de consulta y mi WhatsApp directo durante 2 semanas." },
  { q: "¿Cuánto tiempo dura el curso y cuánto acceso tengo?", a: "Tú decides el ritmo. Tienes 6 meses de acceso a la plataforma: puedes verlo entero en una tarde o ir capítulo a capítulo según lo vayas necesitando." },
  { q: "No sé qué plan elegir. ¿Cómo lo decido?", a: "Si te gusta aprender por tu cuenta, empieza por el Curso. Si quieres que revise vuestra situación concreta, ve al Curso + Consulta. Y si prefieres que te acompañe de la mano día a día, el Curso + Plan es para ti. Si dudas, escríbeme y te oriento sin compromiso." },
  { q: "¿Funciona con lactancia materna?", a: "Sí, perfectamente. Una parte importante del curso está dedicada a cómo conjugar lactancia y sueño sin sacrificar ninguna de las dos. Y lo mismo si das biberón o lactancia mixta: sin culpa y sin juicios." },
  { q: "¿Y si mi bebé tiene reflujo, cólicos o algo especial?", a: "El curso aborda los temas más habituales (incluidos cólicos y gases). Si tu caso necesita atención individual, te recomiendo el Curso + Consulta o directamente el Curso + Plan para verlo juntas." },
  { q: "¿Qué me llevo al terminar?", a: "Sales sabiendo leer a tu bebé, entendiendo su sueño y con rutinas suaves desde el inicio, sin sustos ni malos hábitos. Y quedas preparada para los 5 meses y más allá, cuando empieza una etapa nueva del sueño." },
];

/* ===================================================
   DESKTOP — Plan Recién Nacido
   =================================================== */
const PlanRecienNacidoDetailDesktop = () => (
  <div className="pp" style={{ width: 1440, background: PP_COLORS.cream, color: PP_COLORS.ink, fontFamily: "ui-sans-serif, system-ui, sans-serif" }}>
    <TopNav tone="ink" cta="Ver los planes" ctaHref="#planes" width={1440} />

    {/* ---------- HERO ---------- */}
    <section style={{ padding: "40px 56px 100px", position: "relative", overflow: "hidden" }}>
      <Blob1 fill={PP_COLORS.mintSoft} className="pp-float-1" style={{ position: "absolute", width: 520, height: 520, right: -120, top: 40, opacity: 0.6 }} />
      <Blob3 fill={PP_COLORS.coralSoft} className="pp-float-3" style={{ position: "absolute", width: 300, height: 300, left: -80, bottom: -40, opacity: 0.55 }} />

      <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 60, alignItems: "center" }}>
        {/* LEFT — text */}
        <div>
          <a href="/" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, color: PP_COLORS.ink2, textDecoration: "none", marginBottom: 24 }}>
            ← Volver a inicio
          </a>

          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", background: PP_COLORS.ink, color: PP_COLORS.mintSoft, borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase" }}>
            Curso online · Embarazo → 4 meses
          </div>

          <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 110, lineHeight: 0.9, letterSpacing: "-0.045em", margin: "20px 0 0" }}>
            Empieza<br />
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>desde el día uno.</span><br />
            Bien.
          </h1>

          <p style={{ fontSize: 21, lineHeight: 1.5, color: PP_COLORS.ink2, marginTop: 28, maxWidth: 540, fontWeight: 500 }}>
            El curso online que <strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>le enseña a tu bebé a dormirse por sí mismo</strong> en sus primeros 4 meses. Autonomía de sueño desde el principio, sin malos hábitos.
          </p>

          <div style={{ marginTop: 36, display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
            <a href="#planes" style={{ textDecoration: "none" }}>
              <Pill bg={PP_COLORS.ink} color="#fff" size="lg" icon={<IconArrowR size={18} stroke="#fff" />}>
                Ver los 3 planes
              </Pill>
            </a>
          </div>

          <div style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 20, fontSize: 13, color: PP_COLORS.ink2, flexWrap: "wrap" }}>
            <span><strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>Desde 67€ + IVA</strong></span>
            <span style={{ width: 4, height: 4, borderRadius: 999, background: PP_COLORS.ink2 }} />
            <span>3 planes disponibles</span>
            <span style={{ width: 4, height: 4, borderRadius: 999, background: PP_COLORS.ink2 }} />
            <span>10 temas · 6 meses de acceso</span>
          </div>
        </div>

        {/* RIGHT — photo cutout on mint blob backdrop */}
        <div style={{ position: "relative", height: 680 }}>
          <Blob2 fill={PP_COLORS.mint} className="pp-float-2" style={{ position: "absolute", width: 600, height: 600, left: -20, top: 40, zIndex: 1, opacity: 0.85 }} />
          <Blob3 fill={PP_COLORS.coralSoft} className="pp-float-3" style={{ position: "absolute", width: 260, height: 260, left: -100, bottom: 0, zIndex: 0, opacity: 0.6 }} />

          {/* Mom + baby cutout — transparent PNG, bottom fades into background */}
          <img
            src="/nueva-web/assets/hero-mama-bebe-2m.webp"
            alt="Pau con un bebé recién nacido"
            style={{
              position: "absolute",
              left: 10,
              right: -10,
              top: 0,
              height: 680,
              objectFit: "contain",
              objectPosition: "center bottom",
              zIndex: 2,
              filter: "drop-shadow(0 30px 40px rgba(31,26,26,0.18))",
              WebkitMaskImage: "linear-gradient(to bottom, #000 0%, #000 78%, transparent 96%)",
              maskImage: "linear-gradient(to bottom, #000 0%, #000 78%, transparent 96%)",
            }}
          />

          {/* Decorative curve overlay — masks bottom of figure */}
          <svg
            viewBox="0 0 400 120"
            preserveAspectRatio="none"
            style={{
              position: "absolute",
              left: -40,
              right: -40,
              bottom: -10,
              height: 140,
              width: "calc(100% + 80px)",
              zIndex: 3,
              pointerEvents: "none",
            }}
          >
            <path
              d="M0,80 C90,30 180,110 260,60 C330,18 380,70 400,55 L400,120 L0,120 Z"
              fill={PP_COLORS.cream}
            />
            <path
              d="M0,80 C90,30 180,110 260,60 C330,18 380,70 400,55"
              fill="none"
              stroke={PP_COLORS.ink}
              strokeWidth="1.5"
              strokeDasharray="3 8"
              strokeLinecap="round"
              opacity="0.35"
              vectorEffect="non-scaling-stroke"
            />
          </svg>

          {/* Floating "10 temas" card */}
          <div className="pp-tilt" style={{ position: "absolute", left: -40, bottom: 100, background: "#fff", borderRadius: 22, padding: "18px 22px", display: "flex", alignItems: "center", gap: 14, boxShadow: "0 22px 50px rgba(31,26,26,0.16)", transform: "rotate(-4deg)", zIndex: 4 }}>
            <div style={{ width: 50, height: 50, borderRadius: 14, background: PP_COLORS.mintSoft, display: "grid", placeItems: "center" }}>
              <IconStar size={24} stroke={PP_COLORS.ink} />
            </div>
            <div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 28, letterSpacing: "-0.03em", lineHeight: 1 }}>10 temas</div>
              <div style={{ fontSize: 12, color: PP_COLORS.ink2, marginTop: 4 }}>aprende a tu ritmo</div>
            </div>
          </div>

          {/* IACSC badge */}
          <img src="/nueva-web/assets/iacsc-badge-round.webp" alt="IACSC member" style={{ position: "absolute", right: -10, top: 30, width: 120, height: 120, objectFit: "contain", transform: "rotate(8deg)", filter: "drop-shadow(0 14px 24px rgba(31,26,26,0.18))", zIndex: 4 }} />
        </div>
      </div>
    </section>

    {/* ---------- ¿TE RECONOCES? ---------- */}
    <section style={{ background: PP_COLORS.paper, padding: "120px 56px", position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Si estás aquí, probablemente...</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 84, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 0" }}>
            Esto te <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>suena.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {PRN_PAIN.map((p, i) => (
            <div key={i} style={{ background: "#fff", borderRadius: 20, padding: "24px 28px", display: "flex", alignItems: "center", gap: 18, boxShadow: "0 6px 18px rgba(31,26,26,0.04)" }}>
              <div style={{ width: 32, height: 32, borderRadius: 999, background: PP_COLORS.mintSoft, color: PP_COLORS.ink, display: "grid", placeItems: "center", flexShrink: 0, fontWeight: 700, fontSize: 18 }}>✓</div>
              <p style={{ fontSize: 17, lineHeight: 1.4, color: PP_COLORS.ink, margin: 0, fontWeight: 500 }}>{p}</p>
            </div>
          ))}
        </div>

        <p style={{ textAlign: "center", fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 26, color: PP_COLORS.ink, marginTop: 60, lineHeight: 1.4, maxWidth: 760, margin: "60px auto 0" }}>
          Te lo digo claro: <strong style={{ fontStyle: "normal", fontFamily: "var(--f-display)", fontWeight: 700, color: PP_COLORS.red }}>prevenir es 10 veces más fácil que corregir.</strong> Y este curso te lo deja todo masticado.
        </p>
      </div>
    </section>

    {/* ---------- 10 TEMAS DEL CURSO ---------- */}
    <section style={{ background: PP_COLORS.mintSoft, padding: "140px 56px", position: "relative", overflow: "hidden" }}>
      <Blob4 fill={PP_COLORS.cream} className="pp-float-1" style={{ position: "absolute", width: 380, height: 380, right: -100, top: -80, opacity: 0.6 }} />
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <div style={{ marginBottom: 72 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>El curso</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 96, fontWeight: 700, letterSpacing: "-0.045em", lineHeight: 0.95, margin: "10px 0 0", maxWidth: 1100 }}>
            10 temas para que <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>no improvises.</span>
          </h2>
          <p style={{ fontSize: 19, color: PP_COLORS.ink2, marginTop: 24, maxWidth: 720, lineHeight: 1.55 }}>
            Del primer día a los 5 meses: aprenderás <strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>todo lo que necesitas</strong> para entender y acompañar el sueño de tu bebé. Nada de foros ni consejos contradictorios: un método claro, paso a paso.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {PRN_TOPICS.map((t, i) => (
            <div key={i} className="pp-lift" style={{ background: "#fff", borderRadius: 22, padding: "28px 28px", display: "flex", flexDirection: "column", gap: 14, boxShadow: "0 8px 22px rgba(31,26,26,0.06)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 32, fontWeight: 400, color: PP_COLORS.red, letterSpacing: "-0.04em", lineHeight: 1 }}>{t.n}</span>
                <h3 style={{ fontFamily: "var(--f-display)", fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em", margin: 0, lineHeight: 1.15 }}>{t.t}</h3>
              </div>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: PP_COLORS.ink2, margin: 0 }}>{t.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ---------- 3 PRICING TIERS ---------- */}
    <section id="planes" style={{ background: PP_COLORS.cream, padding: "140px 56px", position: "relative", overflow: "hidden", scrollMarginTop: "80px" }}>
      <Blob2 fill={PP_COLORS.coralSoft} className="pp-float-1" style={{ position: "absolute", width: 320, height: 320, right: -80, top: 100, opacity: 0.4 }} />

      <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 72 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Elige tu plan</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 88, fontWeight: 700, letterSpacing: "-0.045em", lineHeight: 0.95, margin: "10px 0 0" }}>
            3 formas de <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>empezar conmigo.</span>
          </h2>
          <p style={{ fontSize: 17, color: PP_COLORS.ink2, marginTop: 18, maxWidth: 600, margin: "18px auto 0", lineHeight: 1.5 }}>
            Elige cuánto acompañamiento quieres. Todos incluyen el curso completo.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22, alignItems: "stretch" }}>
          {PRN_TIERS.map((tier, i) => {
            const isPrimary = tier.tone === "primary";
            const isDark = tier.tone === "dark";
            return (
              <div
                key={i}
                className={isPrimary ? "" : "pp-lift"}
                style={{
                  background: isDark ? PP_COLORS.ink : isPrimary ? PP_COLORS.coral : "#fff",
                  color: isDark ? PP_COLORS.cream : PP_COLORS.ink,
                  borderRadius: 28,
                  padding: "40px 36px 36px",
                  position: "relative",
                  display: "flex",
                  flexDirection: "column",
                  gap: 18,
                  boxShadow: isPrimary
                    ? "0 22px 50px rgba(217,87,87,0.35)"
                    : "0 12px 30px rgba(31,26,26,0.08)",
                  border: isPrimary ? `2px solid ${PP_COLORS.ink}` : `1px solid ${isDark ? "rgba(255,255,255,0.1)" : "rgba(31,26,26,0.08)"}`,
                }}
              >
                {/* Badge */}
                <div style={{
                  position: "absolute",
                  top: -14,
                  left: "50%",
                  transform: "translateX(-50%)",
                  background: isPrimary ? PP_COLORS.ink : isDark ? PP_COLORS.coral : PP_COLORS.mintSoft,
                  color: isPrimary ? PP_COLORS.coralSoft : isDark ? PP_COLORS.cream : PP_COLORS.ink,
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  padding: "6px 14px",
                  borderRadius: 999,
                  whiteSpace: "nowrap",
                }}>
                  {tier.badge}
                </div>

                <div>
                  <h3 style={{ fontFamily: "var(--f-display)", fontSize: 32, fontWeight: 700, letterSpacing: "-0.03em", margin: 0, lineHeight: 1 }}>{tier.name}</h3>
                  <p style={{ fontSize: 14, lineHeight: 1.5, opacity: 0.75, marginTop: 10, marginBottom: 0 }}>{tier.desc}</p>
                </div>

                <div style={{ display: "flex", alignItems: "baseline", gap: 8, paddingBottom: 20, borderBottom: `1px solid ${isDark ? "rgba(255,255,255,0.1)" : "rgba(31,26,26,0.1)"}` }}>
                  <span style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 72, letterSpacing: "-0.05em", lineHeight: 0.9 }}>
                    {tier.price}<span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 40 }}>€</span>
                  </span>
                  <span style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 18, letterSpacing: "0.04em", textTransform: "uppercase", opacity: 0.75, marginBottom: 6 }}>+ IVA</span>
                </div>
                <div style={{ fontSize: 12, opacity: 0.65, marginTop: -8 }}>Posibilidad de pago fraccionado con Klarna o PayPal</div>

                <ul style={{ listStyle: "none", padding: 0, margin: "10px 0 0", display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                  {tier.features.map((f, j) => (
                    <li key={j} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14.5, lineHeight: 1.5 }}>
                      <span style={{
                        width: 18,
                        height: 18,
                        borderRadius: 999,
                        background: isPrimary ? PP_COLORS.ink : isDark ? PP_COLORS.mint : PP_COLORS.mintSoft,
                        color: isPrimary ? PP_COLORS.coralSoft : isDark ? PP_COLORS.ink : PP_COLORS.ink,
                        display: "grid",
                        placeItems: "center",
                        flexShrink: 0,
                        marginTop: 2,
                        fontSize: 11,
                        fontWeight: 700,
                      }}>✓</span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>

                <a href={tier.url} style={{ display: "block", marginTop: 8, textDecoration: "none" }}>
                <Pill
                  bg={isPrimary ? PP_COLORS.ink : isDark ? PP_COLORS.coral : PP_COLORS.ink}
                  color={isPrimary ? PP_COLORS.coralSoft : isDark ? PP_COLORS.cream : "#fff"}
                  size="md"
                  style={{ width: "100%", justifyContent: "center", padding: "14px 22px" }}
                  icon={<IconArrowR size={16} stroke={isPrimary ? PP_COLORS.coralSoft : isDark ? PP_COLORS.cream : "#fff"} />}
                >
                  {tier.cta}
                </Pill>
                </a>
              </div>
            );
          })}
        </div>

        <p style={{ textAlign: "center", fontSize: 13, color: PP_COLORS.ink2, marginTop: 32 }}>
          ¿No sabes cuál encaja contigo? <a href="#" style={{ color: PP_COLORS.ink, fontWeight: 600 }}>Reserva una llamada gratis</a> y lo decidimos juntas.
        </p>
      </div>
    </section>

    {/* ---------- MÉTODO ---------- */}
    <section style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, padding: "140px 56px", position: "relative", overflow: "hidden" }}>
      <Blob1 fill={PP_COLORS.mint} className="pp-float-2" style={{ position: "absolute", width: 460, height: 460, left: -150, top: -100, opacity: 0.18 }} />
      <Blob3 fill={PP_COLORS.coral} className="pp-float-3" style={{ position: "absolute", width: 320, height: 320, right: -100, bottom: -80, opacity: 0.22 }} />
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.4fr 0.6fr", gap: 80, alignItems: "start" }}>
          <div>
            <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.mintSoft }}>Mi enfoque</div>
            <h2 style={{ fontFamily: "var(--f-display)", fontSize: 84, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.9, margin: "10px 0 0" }}>
              Por qué <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.mintSoft }}>este curso.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.85, marginTop: 28, maxWidth: 360 }}>
              No es un curso más. Es información profesional, contrastada y respetuosa, contada para que la entiendas en pleno postparto.
            </p>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            {PRN_METHOD.map((m, i) => (
              <div key={i} style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 24, padding: "28px 32px" }}>
                <h3 style={{ fontFamily: "var(--f-display)", fontSize: 26, fontWeight: 700, letterSpacing: "-0.025em", margin: 0 }}>
                  <span style={{ color: PP_COLORS.mintSoft, marginRight: 12, fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 24 }}>0{i + 1}</span>
                  {m.t}
                </h3>
                <p style={{ fontSize: 16, lineHeight: 1.55, opacity: 0.78, margin: "12px 0 0" }}>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    {/* ---------- COMPARATIVA (REGALO DE ESPERAR) ---------- */}
    <section style={{ background: PP_COLORS.coralSoft, padding: "140px 56px", position: "relative", overflow: "hidden", color: PP_COLORS.ink }}>
      <Blob2 fill={PP_COLORS.cream} className="pp-float-1" style={{ position: "absolute", width: 460, height: 460, left: -150, top: -100, opacity: 0.5 }} />

      <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 60 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase" }}>Lo que cuesta NO hacerlo</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 84, fontWeight: 800, letterSpacing: "-0.045em", lineHeight: 0.9, margin: "10px 0 24px" }}>
            La diferencia <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>de prevenir.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
          <div style={{ background: "rgba(31,26,26,0.08)", border: `1.5px dashed ${PP_COLORS.ink}`, borderRadius: 24, padding: "36px 36px" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.7 }}>Sin el curso</div>
            <ul style={{ listStyle: "none", padding: 0, marginTop: 18, display: "flex", flexDirection: "column", gap: 12, fontSize: 16, lineHeight: 1.4 }}>
              <li>· Improvisas en plena privación de sueño</li>
              <li>· Decisiones tomadas a las 4am, llorando</li>
              <li>· Asociaciones de sueño difíciles de revertir</li>
              <li>· Probables 397€ + IVA en el Plan de Sueño con 6+ meses</li>
              <li>· Discusiones de pareja por agotamiento</li>
              <li>· Sentimiento de no estar a la altura</li>
            </ul>
          </div>

          <div style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, borderRadius: 24, padding: "36px 36px", boxShadow: "0 22px 50px rgba(31,26,26,0.25)" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.mintSoft }}>Con el curso</div>
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 64, letterSpacing: "-0.045em", lineHeight: 1, marginTop: 14 }}>
              Desde 67€ <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 28, opacity: 0.7 }}>+ IVA</span>
            </div>
            <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>Pago único · acceso 6 meses</div>
            <ul style={{ listStyle: "none", padding: 0, marginTop: 24, display: "flex", flexDirection: "column", gap: 12, fontSize: 15, lineHeight: 1.4 }}>
              <li style={{ display: "flex", gap: 10 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Empiezas con bases sólidas</li>
              <li style={{ display: "flex", gap: 10 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Decisiones informadas y tranquilas</li>
              <li style={{ display: "flex", gap: 10 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Buenos hábitos desde el inicio</li>
              <li style={{ display: "flex", gap: 10 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Sin tener que "corregir" después</li>
              <li style={{ display: "flex", gap: 10 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Disfrutas más, sufres menos</li>
              <li style={{ display: "flex", gap: 10 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Pareja en la misma página</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    {/* ---------- FAQ ---------- */}
    <section style={{ background: PP_COLORS.cream, padding: "140px 56px" }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 60 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Preguntas frecuentes</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 72, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 0" }}>
            Lo que necesitas <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>saber.</span>
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {PRN_FAQ.map((f, i) => (
            <details key={i} open={i === 0} style={{ background: "#fff", borderRadius: 22, padding: "24px 28px", boxShadow: "0 6px 18px rgba(31,26,26,0.04)" }}>
              <summary style={{ listStyle: "none", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.02em" }}>
                {f.q}
                <span style={{ width: 32, height: 32, borderRadius: 999, background: PP_COLORS.mintSoft, display: "grid", placeItems: "center", flexShrink: 0 }}>+</span>
              </summary>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: PP_COLORS.ink2, marginTop: 14, marginBottom: 0 }}>{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>

    {/* ---------- CTA FINAL ---------- */}
    <section style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, padding: "160px 56px", position: "relative", overflow: "hidden", textAlign: "center" }}>
      <Blob4 fill={PP_COLORS.red} className="pp-float-1" style={{ position: "absolute", width: 600, height: 600, left: "50%", top: "50%", transform: "translate(-50%,-50%)", opacity: 0.18 }} />
      <Blob2 fill={PP_COLORS.mint} className="pp-float-2" style={{ position: "absolute", width: 320, height: 320, left: -100, top: 60, opacity: 0.18 }} />

      <div style={{ position: "relative", maxWidth: 1000, margin: "0 auto" }}>
        <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.8 }}>Empieza con buen pie</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 120, fontWeight: 800, letterSpacing: "-0.05em", lineHeight: 0.88, margin: "20px 0 0" }}>
          Tu mejor versión<br />
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.mintSoft }}>como madre</span><br />
          empieza durmiendo.
        </h2>
        <p style={{ fontSize: 21, lineHeight: 1.5, opacity: 0.85, maxWidth: 640, margin: "32px auto 0" }}>
          Apúntate al curso, reserva una consulta o ven con todo el acompañamiento. Lo importante es que <strong>arranques bien</strong>.
        </p>
        <div style={{ marginTop: 44, display: "flex", justifyContent: "center", gap: 18, flexWrap: "wrap" }}>
          <a href="#planes" style={{ textDecoration: "none" }}>
            <Pill bg={PP_COLORS.mint} color={PP_COLORS.ink} size="lg" icon={<IconArrowR size={18} stroke={PP_COLORS.ink} />}>
              Ver los 3 planes
            </Pill>
          </a>
        </div>
      </div>
    </section>
    <FooterDesktop />
  </div>
);

/* ===================================================
   MOBILE — Plan Recién Nacido
   =================================================== */
const PlanRecienNacidoDetailMobile = () => (
  <div className="pp pp-mobile" style={{ width: 390, background: PP_COLORS.cream, color: PP_COLORS.ink, fontFamily: "ui-sans-serif, system-ui, sans-serif" }}>
    {/* Nav */}
    <div style={{ padding: "14px 22px 0", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <a href="/" style={{ textDecoration: "none" }}><BrandMark color={PP_COLORS.ink} /></a>
      <MobileMenu />
    </div>

    {/* HERO */}
    <section style={{ padding: "20px 22px 60px", position: "relative", overflow: "hidden" }}>
      <Blob1 fill={PP_COLORS.mintSoft} className="pp-float-1" style={{ position: "absolute", width: 360, height: 360, right: -140, top: 40, opacity: 0.55 }} />
      <div style={{ position: "relative" }}>
        <a href="/" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: PP_COLORS.ink2, textDecoration: "none", marginBottom: 16 }}>
          ← Volver a inicio
        </a>

        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 10px", background: PP_COLORS.ink, color: PP_COLORS.mintSoft, borderRadius: 999, fontSize: 10, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase" }}>
          Curso · 0 → 4 meses
        </div>

        <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 56, lineHeight: 0.92, letterSpacing: "-0.045em", margin: "14px 0 0" }}>
          Empieza<br />
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>desde el día uno.</span><br />
          Bien.
        </h1>
        <p style={{ fontSize: 15, lineHeight: 1.5, color: PP_COLORS.ink2, marginTop: 16, fontWeight: 500 }}>
          El curso online que <strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>le enseña a tu bebé a dormirse por sí mismo</strong> en sus primeros 4 meses.
        </p>

        {/* Photo cutout on mint blob backdrop */}
        <div style={{ position: "relative", margin: "28px 0 24px", height: 340 }}>
          <Blob2 fill={PP_COLORS.mint} style={{ position: "absolute", width: 360, height: 360, left: -20, top: 0, zIndex: 1, opacity: 0.85 }} />
          <Blob3 fill={PP_COLORS.coralSoft} style={{ position: "absolute", width: 180, height: 180, left: -60, bottom: -20, zIndex: 0, opacity: 0.6 }} />
          <img
            src="/nueva-web/assets/hero-mama-bebe-2m.webp"
            alt="Pau con un bebé recién nacido"
            style={{
              position: "absolute",
              left: 10,
              right: -10,
              top: 0,
              height: 340,
              objectFit: "contain",
              objectPosition: "center bottom",
              zIndex: 2,
              filter: "drop-shadow(0 18px 24px rgba(31,26,26,0.15))",
              WebkitMaskImage: "linear-gradient(to bottom, #000 0%, #000 76%, transparent 96%)",
              maskImage: "linear-gradient(to bottom, #000 0%, #000 76%, transparent 96%)",
            }}
          />
          <svg
            viewBox="0 0 400 120"
            preserveAspectRatio="none"
            style={{
              position: "absolute",
              left: -20,
              right: -20,
              bottom: -5,
              height: 90,
              width: "calc(100% + 40px)",
              zIndex: 3,
              pointerEvents: "none",
            }}
          >
            <path
              d="M0,80 C90,30 180,110 260,60 C330,18 380,70 400,55 L400,120 L0,120 Z"
              fill={PP_COLORS.cream}
            />
          </svg>
          <img src="/nueva-web/assets/iacsc-badge-round.webp" alt="IACSC" style={{ position: "absolute", left: -8, bottom: 0, width: 72, height: 72, objectFit: "contain", transform: "rotate(-6deg)", filter: "drop-shadow(0 10px 18px rgba(31,26,26,0.2))", zIndex: 4 }} />

          {/* "10 temas" floating card — bottom right, over photo */}
          <div className="pp-tilt" style={{ position: "absolute", right: -6, bottom: 16, background: "#fff", borderRadius: 16, padding: "10px 14px", display: "flex", alignItems: "center", gap: 10, boxShadow: "0 14px 26px rgba(31,26,26,0.16)", transform: "rotate(4deg)", zIndex: 4 }}>
            <div style={{ width: 32, height: 32, borderRadius: 10, background: PP_COLORS.mintSoft, display: "grid", placeItems: "center" }}>
              <IconStar size={16} stroke={PP_COLORS.ink} />
            </div>
            <div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 18, letterSpacing: "-0.03em", lineHeight: 1 }}>10 temas</div>
              <div style={{ fontSize: 9.5, color: PP_COLORS.ink2, marginTop: 3 }}>aprende a tu ritmo</div>
            </div>
          </div>
        </div>

        <a href="#planes-mobile" style={{ textDecoration: "none" }}>
          <Pill bg={PP_COLORS.ink} color="#fff" size="md" style={{ width: "100%", justifyContent: "center", padding: "16px 22px", fontSize: 15 }} icon={<IconArrowR size={16} stroke="#fff" />}>
            Ver los 3 planes
          </Pill>
        </a>
        <div style={{ marginTop: 12, textAlign: "center", fontSize: 11, color: PP_COLORS.ink2 }}>
          <strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>Desde 67€ + IVA</strong> · 3 planes · 10 temas · 6 meses de acceso
        </div>
      </div>
    </section>

    {/* TE RECONOCES */}
    <section style={{ background: PP_COLORS.paper, padding: "60px 22px" }}>
      <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Si estás aquí, probablemente...</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 42, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 24px" }}>
        Esto te <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>suena.</span>
      </h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {PRN_PAIN.map((p, i) => (
          <div key={i} style={{ background: "#fff", borderRadius: 16, padding: "16px 18px", display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ width: 26, height: 26, borderRadius: 999, background: PP_COLORS.mintSoft, color: PP_COLORS.ink, display: "grid", placeItems: "center", flexShrink: 0, fontWeight: 700, fontSize: 14 }}>✓</div>
            <p style={{ fontSize: 13.5, lineHeight: 1.4, color: PP_COLORS.ink, margin: 0, fontWeight: 500 }}>{p}</p>
          </div>
        ))}
      </div>
      <p style={{ textAlign: "center", fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 17, color: PP_COLORS.ink, marginTop: 28, lineHeight: 1.4 }}>
        <strong style={{ fontStyle: "normal", fontFamily: "var(--f-display)", fontWeight: 700, color: PP_COLORS.red }}>Prevenir es 10 veces más fácil que corregir.</strong>
      </p>
    </section>

    {/* 10 TEMAS */}
    <section style={{ background: PP_COLORS.mintSoft, padding: "60px 22px" }}>
      <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>El curso</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 42, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 12px" }}>
        10 temas para que <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>no improvises.</span>
      </h2>
      <p style={{ fontSize: 14, lineHeight: 1.5, color: PP_COLORS.ink2, marginBottom: 20 }}>
        Del primer día a los 5 meses: todo lo que necesitas para entender y acompañar el sueño de tu bebé, paso a paso.
      </p>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {PRN_TOPICS.map((t, i) => (
          <div key={i} style={{ background: "#fff", borderRadius: 16, padding: "16px 18px", display: "flex", gap: 14, alignItems: "flex-start" }}>
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 22, fontWeight: 400, color: PP_COLORS.red, lineHeight: 1, flexShrink: 0, minWidth: 30 }}>{t.n}</span>
            <div>
              <h3 style={{ fontFamily: "var(--f-display)", fontSize: 15.5, fontWeight: 700, letterSpacing: "-0.02em", margin: 0, lineHeight: 1.2 }}>{t.t}</h3>
              <p style={{ fontSize: 12.5, lineHeight: 1.5, color: PP_COLORS.ink2, margin: "6px 0 0" }}>{t.d}</p>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* 3 PRICING TIERS */}
    <section id="planes-mobile" style={{ background: PP_COLORS.cream, padding: "60px 22px" }}>
      <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2, textAlign: "center" }}>Elige tu plan</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 38, fontWeight: 700, letterSpacing: "-0.045em", lineHeight: 0.95, margin: "8px 0 0", textAlign: "center" }}>
        3 formas de <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>empezar.</span>
      </h2>
      <p style={{ fontSize: 13, color: PP_COLORS.ink2, marginTop: 12, textAlign: "center", lineHeight: 1.5 }}>
        Todos incluyen el curso completo.
      </p>

      <div style={{ display: "flex", flexDirection: "column", gap: 18, marginTop: 32 }}>
        {PRN_TIERS.map((tier, i) => {
          const isPrimary = tier.tone === "primary";
          const isDark = tier.tone === "dark";
          return (
            <div
              key={i}
              style={{
                background: isDark ? PP_COLORS.ink : isPrimary ? PP_COLORS.coral : "#fff",
                color: isDark ? PP_COLORS.cream : PP_COLORS.ink,
                borderRadius: 22,
                padding: "26px 22px 22px",
                position: "relative",
                display: "flex",
                flexDirection: "column",
                gap: 14,
                boxShadow: isPrimary ? "0 16px 32px rgba(217,87,87,0.32)" : "0 6px 18px rgba(31,26,26,0.06)",
                border: isPrimary ? `2px solid ${PP_COLORS.ink}` : `1px solid ${isDark ? "rgba(255,255,255,0.1)" : "rgba(31,26,26,0.08)"}`,
              }}
            >
              <div style={{
                position: "absolute",
                top: -11,
                left: "50%",
                transform: "translateX(-50%)",
                background: isPrimary ? PP_COLORS.ink : isDark ? PP_COLORS.coral : PP_COLORS.mintSoft,
                color: isPrimary ? PP_COLORS.coralSoft : isDark ? PP_COLORS.cream : PP_COLORS.ink,
                fontSize: 9,
                fontWeight: 700,
                letterSpacing: "0.14em",
                textTransform: "uppercase",
                padding: "5px 12px",
                borderRadius: 999,
                whiteSpace: "nowrap",
              }}>{tier.badge}</div>

              <div>
                <h3 style={{ fontFamily: "var(--f-display)", fontSize: 24, fontWeight: 700, letterSpacing: "-0.03em", margin: "4px 0 0", lineHeight: 1 }}>{tier.name}</h3>
                <p style={{ fontSize: 13, lineHeight: 1.4, opacity: 0.75, marginTop: 8, marginBottom: 0 }}>{tier.desc}</p>
              </div>

              <div style={{ display: "flex", alignItems: "baseline", gap: 8, paddingBottom: 14, borderBottom: `1px solid ${isDark ? "rgba(255,255,255,0.1)" : "rgba(31,26,26,0.1)"}` }}>
                <span style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 52, letterSpacing: "-0.05em", lineHeight: 0.9 }}>
                  {tier.price}<span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 28 }}>€</span>
                </span>
                <span style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 14, letterSpacing: "0.04em", textTransform: "uppercase", opacity: 0.75, marginBottom: 4 }}>+ IVA</span>
              </div>
              <div style={{ fontSize: 11, opacity: 0.65, marginTop: -8, lineHeight: 1.35 }}>Pago fraccionado disponible con Klarna o PayPal</div>

              <ul style={{ listStyle: "none", padding: 0, margin: "4px 0 0", display: "flex", flexDirection: "column", gap: 9 }}>
                {tier.features.map((f, j) => (
                  <li key={j} style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: 13, lineHeight: 1.45 }}>
                    <span style={{
                      width: 16,
                      height: 16,
                      borderRadius: 999,
                      background: isPrimary ? PP_COLORS.ink : isDark ? PP_COLORS.mint : PP_COLORS.mintSoft,
                      color: isPrimary ? PP_COLORS.coralSoft : PP_COLORS.ink,
                      display: "grid",
                      placeItems: "center",
                      flexShrink: 0,
                      marginTop: 2,
                      fontSize: 10,
                      fontWeight: 700,
                    }}>✓</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>

              <a href={tier.url} style={{ display: "block", marginTop: 4, textDecoration: "none" }}>
              <Pill
                bg={isPrimary ? PP_COLORS.ink : isDark ? PP_COLORS.coral : PP_COLORS.ink}
                color={isPrimary ? PP_COLORS.coralSoft : isDark ? PP_COLORS.cream : "#fff"}
                size="md"
                style={{ width: "100%", justifyContent: "center", padding: "12px 18px", fontSize: 13 }}
                icon={<IconArrowR size={14} stroke={isPrimary ? PP_COLORS.coralSoft : isDark ? PP_COLORS.cream : "#fff"} />}
              >
                {tier.cta}
              </Pill>
              </a>
            </div>
          );
        })}
      </div>

      <p style={{ textAlign: "center", fontSize: 12, color: PP_COLORS.ink2, marginTop: 24 }}>
        ¿No sabes cuál? <a href="#" style={{ color: PP_COLORS.ink, fontWeight: 600 }}>Llamada gratis</a> y decidimos.
      </p>
    </section>

    {/* MÉTODO */}
    <section style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, padding: "60px 22px", position: "relative", overflow: "hidden" }}>
      <Blob1 fill={PP_COLORS.mint} style={{ position: "absolute", width: 240, height: 240, right: -80, top: -60, opacity: 0.2 }} />
      <div style={{ position: "relative" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.mintSoft }}>Mi enfoque</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 44, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.92, margin: "8px 0 16px" }}>
          Por qué <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.mintSoft }}>este curso.</span>
        </h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {PRN_METHOD.map((m, i) => (
            <div key={i} style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 18, padding: "18px 20px" }}>
              <h3 style={{ fontFamily: "var(--f-display)", fontSize: 16.5, fontWeight: 700, letterSpacing: "-0.02em", margin: 0, lineHeight: 1.2 }}>
                <span style={{ color: PP_COLORS.mintSoft, marginRight: 8, fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>0{i + 1}</span>
                {m.t}
              </h3>
              <p style={{ fontSize: 13, lineHeight: 1.55, opacity: 0.78, margin: "8px 0 0" }}>{m.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* COMPARATIVA */}
    <section style={{ background: PP_COLORS.coralSoft, padding: "60px 22px", color: PP_COLORS.ink }}>
      <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>Lo que cuesta NO hacerlo</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 42, fontWeight: 800, letterSpacing: "-0.045em", lineHeight: 0.92, margin: "8px 0 24px" }}>
        La diferencia <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>de prevenir.</span>
      </h2>

      <div style={{ background: "rgba(31,26,26,0.08)", border: `1.5px dashed ${PP_COLORS.ink}`, borderRadius: 18, padding: "20px 22px", marginBottom: 14 }}>
        <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.7 }}>Sin el curso</div>
        <ul style={{ listStyle: "none", padding: 0, marginTop: 12, display: "flex", flexDirection: "column", gap: 8, fontSize: 13, lineHeight: 1.4 }}>
          <li>· Improvisas con privación de sueño</li>
          <li>· Asociaciones difíciles de revertir</li>
          <li>· Probables 397€ + IVA en el Plan a los 6 meses</li>
          <li>· Discusiones de pareja por agotamiento</li>
        </ul>
      </div>

      <div style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, borderRadius: 18, padding: "22px 22px", boxShadow: "0 14px 28px rgba(31,26,26,0.25)" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.mintSoft }}>Con el curso</div>
        <div style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 44, letterSpacing: "-0.045em", lineHeight: 1, marginTop: 8 }}>
          Desde 67€ <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 20, opacity: 0.7 }}>+ IVA</span>
        </div>
        <div style={{ fontSize: 11, opacity: 0.7, marginTop: 4 }}>Pago único · acceso 6 meses</div>
        <ul style={{ listStyle: "none", padding: 0, marginTop: 16, display: "flex", flexDirection: "column", gap: 8, fontSize: 13 }}>
          <li style={{ display: "flex", gap: 8 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Bases sólidas desde el inicio</li>
          <li style={{ display: "flex", gap: 8 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Decisiones informadas</li>
          <li style={{ display: "flex", gap: 8 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Sin tener que corregir después</li>
          <li style={{ display: "flex", gap: 8 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Disfrutas más, sufres menos</li>
        </ul>
      </div>
    </section>

    {/* FAQ */}
    <section style={{ background: PP_COLORS.cream, padding: "60px 22px" }}>
      <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>FAQ</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 38, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 22px" }}>
        Lo que necesitas <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>saber.</span>
      </h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {PRN_FAQ.map((f, i) => (
          <details key={i} open={i === 0} style={{ background: "#fff", borderRadius: 16, padding: "16px 18px" }}>
            <summary style={{ listStyle: "none", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 15, lineHeight: 1.25 }}>
              {f.q}
              <span style={{ width: 24, height: 24, borderRadius: 999, background: PP_COLORS.mintSoft, display: "grid", placeItems: "center", flexShrink: 0, fontSize: 13 }}>+</span>
            </summary>
            <p style={{ fontSize: 13, lineHeight: 1.55, color: PP_COLORS.ink2, margin: "10px 0 0" }}>{f.a}</p>
          </details>
        ))}
      </div>
    </section>

    {/* CTA FINAL */}
    <section style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, padding: "70px 22px", textAlign: "center", position: "relative", overflow: "hidden" }}>
      <Blob4 fill={PP_COLORS.red} style={{ position: "absolute", width: 360, height: 360, left: "50%", top: "50%", transform: "translate(-50%,-50%)", opacity: 0.18 }} />
      <div style={{ position: "relative" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.8 }}>Empieza con buen pie</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 50, fontWeight: 800, letterSpacing: "-0.045em", lineHeight: 0.9, margin: "12px 0 0" }}>
          Tu mejor versión <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.mintSoft }}>como madre</span> empieza durmiendo.
        </h2>
        <p style={{ fontSize: 14.5, lineHeight: 1.5, opacity: 0.85, marginTop: 16 }}>
          Apúntate al curso o ven con todo el acompañamiento. Lo importante es que <strong>arranques bien</strong>.
        </p>
        <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 10 }}>
          <a href="#planes-mobile" style={{ textDecoration: "none" }}>
            <Pill bg={PP_COLORS.mint} color={PP_COLORS.ink} size="md" style={{ width: "100%", justifyContent: "center", padding: "16px 22px", fontSize: 15 }} icon={<IconArrowR size={16} stroke={PP_COLORS.ink} />}>
              Ver los 3 planes
            </Pill>
          </a>
        </div>
      </div>
    </section>
    <FooterMobile />
  </div>
);

Object.assign(window, { PlanRecienNacidoDetailDesktop, PlanRecienNacidoDetailMobile });