// Pau Polaino — Plan de Sueño detail page (5m+ flagship)
// Long-form persuasion page. Desktop + Mobile artboards.

/* ---------- Shared content data ---------- */
const PS_PAIN = [
  "Llevas meses durmiendo en tramos de 2-3 horas",
  "Tu peque solo se duerme con teta, biberón, brazos o movimiento",
  "Las siestas no pasan de 30 minutos",
  "Se despierta 4, 6, 8 veces por noche",
  "Has probado mil consejos y nada funciona del todo",
  "Te sientes culpable cada vez que algo no sale bien",
];

const PS_WIN = [
  { icon: "moon", title: "Se duerme solo", desc: "Sin teta, sin brazos, sin biberón. Aprende a iniciar el sueño por sí mismo." },
  { icon: "heart", title: "Noches de 11–12 horas", desc: "Sin despertares, con la alimentación nocturna ofrecida de forma estratégica." },
  { icon: "star", title: "Siestas largas y predecibles", desc: "Sabes a qué hora va a dormir y cuánto va a durar. Recuperas tu día." },
  { icon: "sparkle", title: "Tú vuelves a ti", desc: "Descansas. Recuperas paciencia, energía, ganas, tiempo en pareja, vida." },
];

const PS_INCLUDES = [
  { t: "Evaluación inicial profunda", d: "Cuestionarios detallados sobre rutinas, despertares, lactancia, entorno e historia del sueño." },
  { t: "Plan de sueño 100% personalizado", d: "Diseñado para tu bebé, su edad, vuestra dinámica familiar y vuestros valores." },
  { t: "Videollamada de 90 minutos", d: "Te explico el plan paso a paso, me contáis cómo os sentís, resolvemos dudas y dejamos cerrado todo para empezar a aplicar el plan." },
  { t: "2 llamadas de seguimiento (30 min)", d: "Para ajustar el plan según cómo vaya respondiendo tu bebé en cada fase." },
  { t: "🎁 Llamada final de regalo (45 min)", d: "Para cerrar el proceso, consolidar lo aprendido y dejarte preparada para el futuro." },
  { t: "WhatsApp directo conmigo · 2 semanas", d: "Cada día. Ajustes en tiempo real. No te quedas sola en ningún momento." },
];

const PS_STEPS = [
  { n: "01", t: "Llamada informativa (gratis)", d: "20 min para conocer vuestro caso y decidir juntas si encajamos." },
  { n: "02", t: "Cuestionarios", d: "Antes de empezar, recibo toda la info sobre vuestro bebé y rutinas." },
  { n: "03", t: "Plan + videollamada de 90 min", d: "Te entrego un plan a medida y lo explicamos punto por punto." },
  { n: "04", t: "2 semanas de ajustes diarios", d: "WhatsApp directo. Cada noche, cada siesta, cada duda." },
  { n: "05", t: "Llamadas de seguimiento", d: "2 llamadas + 1 final de regalo para consolidar y dejarte segura." },
];

const PS_METHOD = [
  { t: "Sin el método del «dejar llorar»", d: "No. Tu bebé nunca está solo llorando sin consuelo. Estamos en todo momento a su lado, le vemos y él nos ve; si aparece cualquier emoción, podemos sostenerla en todo momento." },
  { t: "Adaptado a vuestro caso", d: "Lactancia materna, biberón, hermanos, reflujo, prematuridad… El plan se adapta a vuestra realidad, no al revés." },
  { t: "Acompañamiento real (no PDFs sueltos)", d: "Cada día durante 2 semanas tienes mi WhatsApp. Ajustamos juntas según cómo va respondiendo." },
  { t: "Resultados duraderos", d: "No buscamos un truco que dure 3 días. Buscamos que tu bebé aprenda a dormir bien para siempre." },
];

const PS_FAQ = [
  { q: "¿Es el método del «dejar llorar»?", a: "No. Mi enfoque es respetuoso y siempre con presencia: acompañamos a tu bebé en cada paso, sin métodos extremos ni lloros sin consuelo. Enseñar a dormir nunca significa ignorar a tu hijo." },
  { q: "¿Puedo hacer el plan de sueño compartiendo habitación con mi hijo?", a: "Sí. El plan de sueño puede llevarse a cabo tanto compartiendo habitación con tu hijo como trasladándolo a su propio espacio de descanso. Conseguimos buenos resultados en ambas situaciones. Lo importante es que las pautas y estrategias que utilizamos son diferentes en función de cada caso, para adaptarnos a vuestra realidad familiar y favorecer el éxito del proceso. Durante la llamada informativa analizaremos vuestra situación concreta y os explicaremos cuál sería el enfoque más adecuado para vosotros." },
  { q: "Mi bebé ya tiene casi 2 años (o más). ¿Llego tarde?", a: "No. Este plan funciona de los 5 meses a los 7 años. Nunca es tarde para que tu peque —y tú— aprendáis a descansar mejor." },
  { q: "¿Cómo es el acompañamiento? ¿Me quedo sola con un PDF?", a: "En ningún momento. Durante 2 semanas tienes mi WhatsApp directo cada día, además de la videollamada de 90 minutos y las llamadas de seguimiento. Ajustamos juntas según cómo va respondiendo tu bebé." },
  { q: "¿Puedo pagar a plazos? ¿Y si al final no encajamos?", a: "Puedes pagar a plazos con Klarna o PayPal. Y la llamada informativa es gratis precisamente para eso: solo trabajamos juntas si creo de verdad que puedo ayudarte. Sin compromisos a ciegas." },
  { section: "Sobre resultados y expectativas", q: "¿En cuánto tiempo veré resultados?", a: "La mayoría de familias notan cambios en las primeras 72 horas. La consolidación siguiendo las pautas suele llegar entre los 10 y 14 días." },
  { q: "¿Los resultados duran o es algo temporal?", a: "Duran. No buscamos un truco que aguante tres días: buscamos que tu bebé aprenda a dormir bien de forma estable. Además, te llevas las herramientas para resolver futuras crisis o regresiones por tu cuenta." },
  { q: "¿Y si después aparece una regresión o un cambio (dientes, mudanza, viaje)?", a: "Es normal que la vida traiga baches. Por eso te enseño a entender el sueño de tu bebé, no solo a seguir un plan: cuando llegue una regresión, sabrás qué hacer." },
];

/* ===================================================
   DESKTOP — Plan de Sueño detail
   =================================================== */
const PlanSuenoDetailDesktop = () => (
  <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="Reservar llamada (gratis)" width={1440} />

    {/* ---------- HERO ---------- */}
    <section style={{ padding: "40px 56px 100px", position: "relative", overflow: "hidden" }}>
      <Blob1 fill={PP_COLORS.coral} className="pp-float-1" style={{ position: "absolute", width: 520, height: 520, right: -120, top: 40, opacity: 0.5 }} />
      <Blob3 fill={PP_COLORS.mintSoft} 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: 44 }}>
            ← Volver a inicio
          </a>

          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", background: PP_COLORS.ink, color: PP_COLORS.coralSoft, borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase" }}>
            ★ Servicio principal · 5m → 7 años
          </div>

          <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 110, lineHeight: 0.9, letterSpacing: "-0.045em", margin: "20px 0 0" }}>
            Tu peque puede<br />
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>dormir del tirón.</span><br />
            Y tú también.
          </h1>

          <p style={{ fontSize: 21, lineHeight: 1.5, color: PP_COLORS.ink2, marginTop: 28, maxWidth: 520, fontWeight: 500 }}>
            Te acompaño codo con codo hasta que toda la familia descansa. <strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>Sin métodos extremos. Sin culpa. Sin atajos.</strong>
          </p>

          {/* Price + CTAs */}
          <div style={{ marginTop: 36, display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
            <Pill bg={PP_COLORS.ink} color="#fff" size="lg" icon={<IconArrowR size={18} stroke="#fff" />}>
              Reservar llamada informativa
            </Pill>
          </div>

          <div style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 24, fontSize: 13, color: PP_COLORS.ink2 }}>
            <span><strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>397€ + IVA</strong> · Pago único o a plazos con Klarna y PayPal</span>
            <span style={{ width: 4, height: 4, borderRadius: 999, background: PP_COLORS.ink2 }} />
            <span>Llamada informativa <strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>gratis</strong> y sin compromiso</span>
          </div>
        </div>

        {/* RIGHT — photo cutout on coral blob backdrop */}
        <div style={{ position: "relative", height: 680 }}>
          {/* Large coral blob backdrop — figure sits in front */}
          <Blob2
            fill={PP_COLORS.coral}
            className="pp-float-2"
            style={{ position: "absolute", width: 600, height: 600, left: -20, top: 40, zIndex: 1 }}
          />
          {/* Small mint accent blob — bottom left, peeking from behind figure */}
          <Blob3
            fill={PP_COLORS.mintSoft}
            className="pp-float-3"
            style={{ position: "absolute", width: 260, height: 260, left: -100, bottom: 0, zIndex: 0, opacity: 0.7 }}
          />

          {/* Mom + baby cutout — transparent PNG, bottom fades into background */}
          <img
            src="/nueva-web/assets/hero-mama-bebe.webp"
            alt="Pau acompañando a un bebé en sueño"
            style={{
              position: "absolute",
              left: 20,
              right: -20,
              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, adds dynamism */}
          <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 result card */}
          <div className="pp-tilt" style={{ position: "absolute", left: -40, bottom: 80, background: "#fff", borderRadius: 22, padding: "18px 24px", display: "flex", alignItems: "center", gap: 14, boxShadow: "0 22px 50px rgba(31,26,26,0.16)", transform: "rotate(-4deg)", zIndex: 3 }}>
            <div style={{ width: 50, height: 50, borderRadius: 14, background: PP_COLORS.mintSoft, display: "grid", placeItems: "center" }}>
              <IconMoon size={24} stroke={PP_COLORS.ink} />
            </div>
            <div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 28, letterSpacing: "-0.03em", lineHeight: 1 }}>11–12<span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 22 }}>h</span></div>
              <div style={{ fontSize: 12, color: PP_COLORS.ink2, marginTop: 4 }}>de sueño nocturno</div>
            </div>
          </div>

          {/* Floating IACSC badge */}
          <img src="/nueva-web/assets/iacsc-badge-round.webp" alt="IACSC member" style={{ position: "absolute", right: -20, 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 llevas meses así...</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 84, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 0" }}>
            Esto es <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>vuestro día a día.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {PS_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.coralSoft, color: PP_COLORS.red, 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: 720, margin: "60px auto 0" }}>
          Si te sientes identificada con lo que acabas de leer, <strong style={{ fontStyle: "normal", fontFamily: "var(--f-display)", fontWeight: 700, color: PP_COLORS.red }}>este plan es para ti.</strong>
        </p>
      </div>
    </section>

    {/* ---------- LO QUE VAS A CONSEGUIR ---------- */}
    <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 }}>Cuando acabemos</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 96, fontWeight: 700, letterSpacing: "-0.045em", lineHeight: 0.95, margin: "10px 0 0", maxWidth: 1000 }}>
            Vuestras noches van a <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>verse así.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          {PS_WIN.map((w, i) => {
            const Ic = w.icon === "moon" ? IconMoon : w.icon === "heart" ? IconHeart : w.icon === "star" ? IconStar : IconSparkle;
            return (
              <div key={i} className="pp-lift" style={{ background: "#fff", borderRadius: 28, padding: "36px 30px 32px", display: "flex", flexDirection: "column", gap: 16, boxShadow: "0 12px 30px rgba(31,26,26,0.08)" }}>
                <div style={{ width: 56, height: 56, borderRadius: 16, background: PP_COLORS.coralSoft, display: "grid", placeItems: "center" }}>
                  <Ic size={26} stroke={PP_COLORS.ink} />
                </div>
                <h3 style={{ fontFamily: "var(--f-display)", fontSize: 28, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.05, margin: 0 }}>{w.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: PP_COLORS.ink2, margin: 0 }}>{w.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>

    {/* ---------- EL MÉTODO ---------- */}
    <section style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, padding: "140px 56px", position: "relative", overflow: "hidden" }}>
      <Blob1 fill={PP_COLORS.coral} className="pp-float-2" style={{ position: "absolute", width: 460, height: 460, left: -150, top: -100, opacity: 0.22 }} />
      <Blob3 fill={PP_COLORS.mint} className="pp-float-3" style={{ position: "absolute", width: 320, height: 320, right: -100, bottom: -80, opacity: 0.18 }} />
      <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.coralSoft }}>Cómo lo conseguimos</div>
            <h2 style={{ fontFamily: "var(--f-display)", fontSize: 84, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.9, margin: "10px 0 0" }}>
              Mi <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>método.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.85, marginTop: 28, maxWidth: 360 }}>
              Cuatro principios innegociables. La razón por la que más de <strong style={{ color: PP_COLORS.cream, fontWeight: 700 }}>1.000 familias</strong> han confiado en mí.
            </p>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            {PS_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: 28, fontWeight: 700, letterSpacing: "-0.025em", margin: 0, color: PP_COLORS.cream }}>
                  <span style={{ color: PP_COLORS.coralSoft, marginRight: 12, fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 26 }}>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>

    {/* ---------- QUÉ INCLUYE ---------- */}
    <section style={{ background: PP_COLORS.cream, padding: "140px 56px", position: "relative", overflow: "hidden" }}>
      <Blob2 fill={PP_COLORS.coralSoft} className="pp-float-1" style={{ position: "absolute", width: 320, height: 320, right: -80, top: 100, opacity: 0.45 }} />
      <div style={{ maxWidth: 1180, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 72 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Qué incluye</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 84, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 0" }}>
            Esto es lo que <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>recibes</span>.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
          {PS_INCLUDES.map((it, i) => (
            <div key={i} style={{ background: "#fff", borderRadius: 24, padding: "30px 32px", display: "flex", gap: 22, alignItems: "flex-start", boxShadow: "0 6px 18px rgba(31,26,26,0.04)" }}>
              <div style={{ width: 44, height: 44, borderRadius: 999, background: PP_COLORS.ink, color: "#fff", display: "grid", placeItems: "center", flexShrink: 0, fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 16 }}>
                {String(i + 1).padStart(2, "0")}
              </div>
              <div>
                <h3 style={{ fontFamily: "var(--f-display)", fontSize: 21, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.2, margin: 0 }}>{it.t}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: PP_COLORS.ink2, margin: "8px 0 0" }}>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ---------- CÓMO TRABAJAMOS ---------- */}
    <section style={{ background: PP_COLORS.paper, padding: "140px 56px", position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Cómo trabajamos juntas</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 84, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 0" }}>
            El proceso, <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>paso a paso.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 18, position: "relative" }}>
          <svg style={{ position: "absolute", left: 70, right: 70, top: 50, width: "calc(100% - 140px)", height: 4, zIndex: 0 }} viewBox="0 0 800 4" preserveAspectRatio="none">
            <line x1="0" y1="2" x2="800" y2="2" stroke={PP_COLORS.coral} strokeWidth="2.5" strokeDasharray="6 9" strokeLinecap="round" />
          </svg>

          {PS_STEPS.map((s, i) => (
            <div key={i} style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" }}>
              <div style={{ width: 88, height: 88, borderRadius: 999, background: i === 0 ? PP_COLORS.coralSoft : "#fff", border: `2px solid ${PP_COLORS.ink}`, display: "grid", placeItems: "center", fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 26, color: PP_COLORS.ink, letterSpacing: "-0.04em" }}>
                {s.n}
              </div>
              <h3 style={{ fontFamily: "var(--f-display)", fontSize: 19, fontWeight: 700, letterSpacing: "-0.02em", marginTop: 20, marginBottom: 10, lineHeight: 1.2 }}>{s.t}</h3>
              <p style={{ fontSize: 13, lineHeight: 1.5, color: PP_COLORS.ink2, maxWidth: 220, margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ---------- POR QUÉ VALE 397€ ---------- */}
    <section style={{ background: PP_COLORS.coral, 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 }} />
      <Blob4 fill={PP_COLORS.red} className="pp-float-2" style={{ position: "absolute", width: 320, height: 320, right: -80, bottom: -80, opacity: 0.35 }} />

      <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 60 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink }}>La inversión</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 96, fontWeight: 800, letterSpacing: "-0.045em", lineHeight: 0.9, margin: "10px 0 24px" }}>
            397€ <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>vs. el coste real</span>
          </h2>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: PP_COLORS.ink, maxWidth: 680, margin: "0 auto", fontWeight: 500 }}>
            Lo que cuesta el plan vs. lo que estás perdiendo cada noche que no haces nada.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginTop: 60 }}>
          <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", color: PP_COLORS.ink, opacity: 0.7 }}>Si no haces nada</div>
            <ul style={{ listStyle: "none", padding: 0, marginTop: 18, display: "flex", flexDirection: "column", gap: 12, fontSize: 16, color: PP_COLORS.ink, lineHeight: 1.4 }}>
              <li>· Tu bebé acumula cansancio y le cuesta más calmarse</li>
              <li>· Despertares constantes que fragmentan su descanso</li>
              <li>· Más irritabilidad, llanto y rabietas durante el día</li>
              <li>· Un sueño de mala calidad afecta a su desarrollo y humor</li>
              <li>· Meses (o años) más sin dormir</li>
              <li>· Discusiones de pareja por agotamiento</li>
              <li>· Bajas laborales y bajón de productividad</li>
              <li>· Paciencia bajo cero con el peque</li>
              <li>· Sensación de estar haciendo algo mal</li>
              <li>· Dinero en cuentos, productos, apps que no funcionan</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)", position: "relative" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.coralSoft }}>Si lo haces conmigo</div>
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 64, letterSpacing: "-0.045em", lineHeight: 1, marginTop: 14 }}>
              397€ <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 · sin sorpresas</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, alignItems: "center" }}><span style={{ color: PP_COLORS.mint }}>✓</span> Tu peque duerme bien en 2 semanas</li>
              <li style={{ display: "flex", gap: 10, alignItems: "center" }}><span style={{ color: PP_COLORS.mint }}>✓</span> Tú recuperas tu vida</li>
              <li style={{ display: "flex", gap: 10, alignItems: "center" }}><span style={{ color: PP_COLORS.mint }}>✓</span> Vuestra pareja respira</li>
              <li style={{ display: "flex", gap: 10, alignItems: "center" }}><span style={{ color: PP_COLORS.mint }}>✓</span> Aprendes para futuros bebés</li>
              <li style={{ display: "flex", gap: 10, alignItems: "center" }}><span style={{ color: PP_COLORS.mint }}>✓</span> Sin culpa, sin métodos extremos</li>
              <li style={{ display: "flex", gap: 10, alignItems: "center" }}><span style={{ color: PP_COLORS.mint }}>✓</span> Con acompañamiento real</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 tienes <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>en la cabeza ahora.</span>
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {PS_FAQ.map((f, i) => (
            <React.Fragment key={i}>
              {f.section && (
                <div style={{ fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase", color: PP_COLORS.ink2, fontWeight: 600, margin: "30px 0 2px" }}>{f.section}</div>
              )}
              <details 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.coralSoft, 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>
            </React.Fragment>
          ))}
        </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.coral} className="pp-float-2" style={{ position: "absolute", width: 320, height: 320, left: -100, top: 60, opacity: 0.25 }} />
      <Blob3 fill={PP_COLORS.mint} className="pp-float-3" style={{ position: "absolute", width: 280, height: 280, right: -90, bottom: 60, opacity: 0.2 }} />

      <div style={{ position: "relative", maxWidth: 1000, margin: "0 auto" }}>
        <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.8 }}>El siguiente paso</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 128, fontWeight: 800, letterSpacing: "-0.05em", lineHeight: 0.88, margin: "20px 0 0" }}>
          Esta noche puede<br />
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>empezar a cambiar.</span>
        </h2>
        <p style={{ fontSize: 21, lineHeight: 1.5, opacity: 0.85, maxWidth: 640, margin: "32px auto 0" }}>
          Reserva una <strong>llamada informativa de 20 minutos</strong> conmigo. Gratis, sin compromiso. Vemos vuestro caso y decidimos juntas si encajamos.
        </p>
        <div style={{ marginTop: 44, display: "flex", justifyContent: "center", gap: 18, flexWrap: "wrap" }}>
          <Pill bg={PP_COLORS.coral} color={PP_COLORS.cream} size="lg" icon={<IconArrowR size={18} stroke={PP_COLORS.cream} />}>
            Reservar llamada gratis
          </Pill>
        </div>
      </div>
    </section>
    <FooterDesktop />
  </div>
);

/* ===================================================
   MOBILE — Plan de Sueño detail
   =================================================== */
const PlanSuenoDetailMobile = () => (
  <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.coral} className="pp-float-1" style={{ position: "absolute", width: 360, height: 360, right: -140, top: 40, opacity: 0.45 }} />
      <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.coralSoft, borderRadius: 999, fontSize: 10, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase" }}>
          ★ 5m → 7 años
        </div>

        <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 56, lineHeight: 0.92, letterSpacing: "-0.045em", margin: "14px 0 0" }}>
          Tu peque puede<br />
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>dormir del tirón.</span><br />
          Y tú también.
        </h1>
        <p style={{ fontSize: 15, lineHeight: 1.5, color: PP_COLORS.ink2, marginTop: 16, fontWeight: 500 }}>
          Te acompaño codo con codo hasta que toda la familia descansa. <strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>Sin métodos extremos.</strong>
        </p>

        {/* Photo cutout on coral blob backdrop */}
        <div style={{ position: "relative", margin: "28px 0 24px", height: 340 }}>
          <Blob2 fill={PP_COLORS.coral} style={{ position: "absolute", width: 360, height: 360, left: -20, top: 0, zIndex: 1 }} />
          <Blob3 fill={PP_COLORS.mintSoft} style={{ position: "absolute", width: 180, height: 180, left: -60, bottom: -20, zIndex: 0, opacity: 0.7 }} />
          <img
            src="/nueva-web/assets/hero-mama-bebe.webp"
            alt="Pau acompañando a un bebé en sueño"
            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%)",
            }}
          />
          {/* Decorative curve overlay */}
          <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: 3 }} />
        </div>

        <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" />}>
          Reservar llamada (gratis)
        </Pill>
        <div style={{ marginTop: 12, display: "flex", justifyContent: "center", gap: 14, alignItems: "center", fontSize: 11, color: PP_COLORS.ink2 }}>
          <span><strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>397€ + IVA</strong></span>
          <span style={{ width: 3, height: 3, borderRadius: 999, background: PP_COLORS.ink2 }} />
          <span>Sin compromiso</span>
        </div>
        <div style={{ marginTop: 6, textAlign: "center", fontSize: 11, color: PP_COLORS.ink2 }}>
          Pago único o a plazos con <strong style={{ color: PP_COLORS.ink, fontWeight: 600 }}>Klarna</strong> y <strong style={{ color: PP_COLORS.ink, fontWeight: 600 }}>PayPal</strong>
        </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 llevas meses así...</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 42, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 24px" }}>
        Esto es <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>vuestro día a día.</span>
      </h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {PS_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.coralSoft, color: PP_COLORS.red, 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: 18, color: PP_COLORS.ink, marginTop: 28, lineHeight: 1.4 }}>
        Si te sientes identificada con lo que acabas de leer, <strong style={{ fontStyle: "normal", fontFamily: "var(--f-display)", fontWeight: 700, color: PP_COLORS.red }}>este plan es para ti.</strong>
      </p>
    </section>

    {/* LO QUE VAS A CONSEGUIR */}
    <section style={{ background: PP_COLORS.mintSoft, padding: "60px 22px" }}>
      <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Cuando acabemos</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 42, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 24px" }}>
        Vuestras noches van a <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>verse así.</span>
      </h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {PS_WIN.map((w, i) => {
          const Ic = w.icon === "moon" ? IconMoon : w.icon === "heart" ? IconHeart : w.icon === "star" ? IconStar : IconSparkle;
          return (
            <div key={i} style={{ background: "#fff", borderRadius: 22, padding: "20px 22px", display: "flex", gap: 16, alignItems: "flex-start" }}>
              <div style={{ width: 44, height: 44, borderRadius: 14, background: PP_COLORS.coralSoft, display: "grid", placeItems: "center", flexShrink: 0 }}>
                <Ic size={22} stroke={PP_COLORS.ink} />
              </div>
              <div>
                <h3 style={{ fontFamily: "var(--f-display)", fontSize: 18, fontWeight: 700, letterSpacing: "-0.02em", margin: 0, lineHeight: 1.1 }}>{w.title}</h3>
                <p style={{ fontSize: 13, lineHeight: 1.5, color: PP_COLORS.ink2, margin: "6px 0 0" }}>{w.desc}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>

    {/* EL MÉTODO */}
    <section style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, padding: "60px 22px", position: "relative", overflow: "hidden" }}>
      <Blob1 fill={PP_COLORS.coral} style={{ position: "absolute", width: 240, height: 240, right: -80, top: -60, opacity: 0.22 }} />
      <div style={{ position: "relative" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.coralSoft }}>Cómo lo conseguimos</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 44, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.92, margin: "8px 0 16px" }}>
          Mi <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>método.</span>
        </h2>
        <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85, marginBottom: 22 }}>
          Cuatro principios innegociables. La razón por la que más de <strong style={{ color: PP_COLORS.cream, fontWeight: 700 }}>1.000 familias</strong> han confiado en mí.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {PS_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: 17, fontWeight: 700, letterSpacing: "-0.02em", margin: 0, lineHeight: 1.2 }}>
                <span style={{ color: PP_COLORS.coralSoft, 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>

    {/* QUÉ INCLUYE */}
    <section style={{ background: PP_COLORS.cream, padding: "60px 22px" }}>
      <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Qué incluye</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 42, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 24px" }}>
        Esto es lo que <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>recibes.</span>
      </h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {PS_INCLUDES.map((it, i) => (
          <div key={i} style={{ background: "#fff", borderRadius: 16, padding: "18px 20px", display: "flex", gap: 14, alignItems: "flex-start" }}>
            <div style={{ width: 34, height: 34, borderRadius: 999, background: PP_COLORS.ink, color: "#fff", display: "grid", placeItems: "center", flexShrink: 0, fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 13 }}>
              {String(i + 1).padStart(2, "0")}
            </div>
            <div>
              <h3 style={{ fontFamily: "var(--f-display)", fontSize: 16, fontWeight: 700, letterSpacing: "-0.02em", margin: 0, lineHeight: 1.2 }}>{it.t}</h3>
              <p style={{ fontSize: 12.5, lineHeight: 1.5, color: PP_COLORS.ink2, margin: "6px 0 0" }}>{it.d}</p>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* CÓMO TRABAJAMOS */}
    <section style={{ background: PP_COLORS.paper, padding: "60px 22px" }}>
      <div style={{ textAlign: "center", marginBottom: 24 }}>
        <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Cómo trabajamos juntas</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 38, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 0" }}>
          El proceso, <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>paso a paso.</span>
        </h2>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {PS_STEPS.map((s, i) => (
          <div key={i} style={{ background: "#fff", borderRadius: 18, padding: "18px 20px", display: "flex", gap: 16, alignItems: "flex-start" }}>
            <div style={{ width: 52, height: 52, borderRadius: 999, background: i === 0 ? PP_COLORS.coralSoft : PP_COLORS.cream, border: `1.5px solid ${PP_COLORS.ink}`, display: "grid", placeItems: "center", flexShrink: 0, fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 18, letterSpacing: "-0.03em" }}>
              {s.n}
            </div>
            <div>
              <h3 style={{ fontFamily: "var(--f-display)", fontSize: 16, fontWeight: 700, letterSpacing: "-0.02em", margin: 0 }}>{s.t}</h3>
              <p style={{ fontSize: 12.5, lineHeight: 1.5, color: PP_COLORS.ink2, margin: "6px 0 0" }}>{s.d}</p>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* POR QUÉ 397 */}
    <section style={{ background: PP_COLORS.coral, padding: "60px 22px", color: PP_COLORS.ink, position: "relative", overflow: "hidden" }}>
      <div style={{ position: "relative" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>La inversión</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 42, fontWeight: 800, letterSpacing: "-0.045em", lineHeight: 0.92, margin: "8px 0 24px" }}>
          397€ <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>vs. el coste real.</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 }}>Si no haces nada</div>
          <ul style={{ listStyle: "none", padding: 0, marginTop: 12, display: "flex", flexDirection: "column", gap: 8, fontSize: 13, lineHeight: 1.4 }}>
            <li>· Tu bebé acumula cansancio y le cuesta calmarse</li>
            <li>· Despertares constantes que fragmentan su descanso</li>
            <li>· Más irritabilidad y llanto durante el día</li>
            <li>· Meses más sin dormir</li>
            <li>· Discusiones de pareja por agotamiento</li>
            <li>· Bajón laboral y paciencia bajo cero</li>
            <li>· Dinero en cosas que no funcionan</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.coralSoft }}>Si lo haces conmigo</div>
          <div style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 44, letterSpacing: "-0.045em", lineHeight: 1, marginTop: 8 }}>
            397€ <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 18, opacity: 0.7 }}>+ IVA</span>
          </div>
          <div style={{ fontSize: 11, opacity: 0.7, marginTop: 4 }}>Pago único · sin sorpresas</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> Duerme bien en 2 semanas</li>
            <li style={{ display: "flex", gap: 8 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Tú recuperas tu vida</li>
            <li style={{ display: "flex", gap: 8 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Sin culpa ni métodos extremos</li>
            <li style={{ display: "flex", gap: 8 }}><span style={{ color: PP_COLORS.mint }}>✓</span> Con acompañamiento real</li>
          </ul>
        </div>
      </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 tienes <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>en la cabeza ahora.</span>
      </h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {PS_FAQ.map((f, i) => (
          <React.Fragment key={i}>
            {f.section && (
              <div style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: PP_COLORS.ink2, fontWeight: 600, margin: "18px 0 2px" }}>{f.section}</div>
            )}
            <details 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.coralSoft, 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>
          </React.Fragment>
        ))}
      </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 }}>El siguiente paso</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 56, fontWeight: 800, letterSpacing: "-0.045em", lineHeight: 0.9, margin: "12px 0 0" }}>
          Esta noche puede <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>empezar a cambiar.</span>
        </h2>
        <p style={{ fontSize: 15, lineHeight: 1.5, opacity: 0.85, marginTop: 20 }}>
          Reserva una <strong>llamada informativa de 20 minutos</strong>. Gratis. Sin compromiso.
        </p>
        <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 10 }}>
          <Pill bg={PP_COLORS.coral} color={PP_COLORS.cream} size="md" style={{ width: "100%", justifyContent: "center", padding: "16px 22px", fontSize: 15 }} icon={<IconArrowR size={16} stroke={PP_COLORS.cream} />}>
            Reservar llamada gratis
          </Pill>
        </div>
      </div>
    </section>
    <FooterMobile />
  </div>
);

Object.assign(window, { PlanSuenoDetailDesktop, PlanSuenoDetailMobile });