// Full homepage components for Pau Polaino redesign

/* ---------- Section: Problem / Pain ---------- */
const ProblemSectionDesktop = () => (
  <section style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, padding: "140px 56px 160px", position: "relative", overflow: "hidden" }}>
    <Blob4 fill={PP_COLORS.coral} className="pp-float-1" style={{ position: "absolute", width: 380, height: 380, right: -120, top: -100, opacity: 0.4 }} />
    <Blob2 fill={PP_COLORS.red} className="pp-float-2" style={{ position: "absolute", width: 260, height: 260, left: -80, bottom: -120, opacity: 0.35 }} />

    <div style={{ maxWidth: 1100, position: "relative" }}>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 14px", border: "1px solid rgba(254,255,228,0.3)", borderRadius: 999, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: PP_COLORS.cream }}>
        El problema
      </div>
      <h2
        style={{
          fontFamily: "var(--f-display)",
          fontSize: 108,
          fontWeight: 700,
          lineHeight: 0.92,
          letterSpacing: "-0.045em",
          margin: "24px 0 0",
        }}
      >
        Llevas <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>meses</span><br />
        sin dormir y nadie<br />
        te dice <span style={{ position: "relative" }}>nada útil
          <svg style={{ position: "absolute", left: 0, bottom: -10, width: "100%" }} viewBox="0 0 200 10" preserveAspectRatio="none">
            <path d="M2,7 Q50,1 100,7 T198,7" stroke={PP_COLORS.red} strokeWidth="4" fill="none" />
          </svg>
        </span>.
      </h2>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 80 }}>
        {[
          { t: "“Ya dormirá cuando le toque.”", who: "Pediatra" },
          { t: "“Déjalo llorar 20 minutos.”", who: "Tu suegra" },
          { t: "“En mi caso bastó con una rutina.”", who: "Instagram" },
        ].map((q, i) => (
          <div key={i} style={{ background: "rgba(254,255,228,0.06)", border: "1px solid rgba(254,255,228,0.12)", borderRadius: 24, padding: 28 }}>
            <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 26, lineHeight: 1.25, color: PP_COLORS.cream }}>{q.t}</div>
            <div style={{ marginTop: 18, fontSize: 12, color: PP_COLORS.coralSoft, letterSpacing: "0.1em", textTransform: "uppercase" }}>— {q.who}</div>
          </div>
        ))}
      </div>

      <p style={{ marginTop: 64, fontSize: 22, lineHeight: 1.45, color: "rgba(254,255,228,0.85)", maxWidth: 720, fontFamily: "var(--f-serif)", fontStyle: "italic" }}>
        Y mientras tanto, tú llevas 7 meses funcionando con 4 horas troceadas, sintiéndote culpable por cada decisión, y leyendo foros a las 3 de la mañana.
      </p>
      <p style={{ marginTop: 18, fontSize: 22, color: PP_COLORS.cream, maxWidth: 720, fontWeight: 600 }}>
        Esto no es así. Y tiene solución.
      </p>
    </div>
  </section>
);

/* ---------- Soft blending wave + dotted accent (masks the photo's lower crop) ---------- */
const PauWaveSign = () => (
  <div style={{ position: "relative", width: "100%", height: "100%" }}>
    <svg viewBox="0 0 500 168" preserveAspectRatio="none"
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block", overflow: "visible" }}>
      {/* wave in the page tone — masks the crop by melting into the section */}
      <path d="M0,74 C110,96 210,58 320,76 C402,90 452,62 500,80 L500,168 L0,168 Z" fill={PP_COLORS.cream}></path>
      {/* delicate dotted line tracing the crest */}
      <path d="M0,74 C110,96 210,58 320,76 C402,90 452,62 500,80" fill="none"
        stroke={PP_COLORS.coral} strokeOpacity="0.5" strokeWidth="2.2" strokeLinecap="round"
        strokeDasharray="0.1 10" vectorEffect="non-scaling-stroke"></path>
    </svg>
  </div>
);

/* ---------- Section: Sobre Pau ---------- */
const SobrePauDesktop = () => (
  <section style={{ background: PP_COLORS.cream, padding: "140px 56px 160px", position: "relative", overflow: "hidden" }}>
    <Blob3 fill={PP_COLORS.mintSoft} className="pp-float-2" style={{ position: "absolute", width: 460, height: 460, right: -180, top: 60, opacity: 0.45 }} />
    <Blob2 fill={PP_COLORS.coralSoft} className="pp-float-3" style={{ position: "absolute", width: 320, height: 320, left: -120, bottom: -80, opacity: 0.55 }} />

    <div style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 80, alignItems: "flex-start", maxWidth: 1320, margin: "0 auto", position: "relative" }}>
      {/* LEFT — portrait composition (sticky while letter scrolls) */}
      <div style={{ position: "sticky", top: 60, height: 720 }}>
        {/* Soft organic backdrop card */}
        <div style={{
          position: "absolute", left: 30, top: 8, width: 452, height: 648,
          background: `linear-gradient(168deg, ${PP_COLORS.coralSoft} 0%, ${PP_COLORS.mintSoft} 100%)`,
          borderRadius: "56% 44% 46% 54% / 48% 48% 52% 52%",
          boxShadow: "0 30px 70px rgba(31,26,26,0.12)",
        }}></div>

        {/* Cutout portrait — free-standing on the blob */}
        <img
          src="/nueva-web/assets/pau-sobremi.webp"
          alt="Pau Polaino abrazando a su bebé"
          style={{
            position: "absolute", left: 14, bottom: 60, width: 500, height: "auto",
            objectFit: "contain",
            zIndex: 2,
          }}
        />

        {/* Decorative wave — soft blending curve + dotted accent masking the crop */}
        <div style={{ position: "absolute", left: -8, right: -8, bottom: 24, height: 158, zIndex: 3 }}>
          <PauWaveSign />
        </div>

        {/* Floating sticker — sin métodos rígidos */}
        <div
          style={{
            position: "absolute",
            right: -18,
            top: 44,
            background: PP_COLORS.red,
            color: PP_COLORS.cream,
            borderRadius: 22,
            padding: "16px 20px",
            transform: "rotate(4deg)",
            maxWidth: 210,
            boxShadow: "0 18px 40px rgba(239,82,82,0.3)",
            zIndex: 4,
          }}
        >
          <div style={{ fontFamily: "var(--f-display)", fontSize: 23, fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1 }}>Sin métodos<br/>fríos.</div>
          <div style={{ fontSize: 11.5, opacity: 0.92, lineHeight: 1.3, marginTop: 8 }}>Respetuosa. Realista. Sin juicios.</div>
        </div>

        {/* Certification badge — official IACSC member seal */}
        <img
          src="/nueva-web/assets/iacsc-badge-round.webp"
          alt="IACSC · International Association of Child Sleep Consultants · Member"
          style={{
            position: "absolute",
            left: -8,
            top: 56,
            width: 122,
            height: 122,
            objectFit: "contain",
            transform: "rotate(-8deg)",
            filter: "drop-shadow(0 14px 24px rgba(31,26,26,0.18))",
            zIndex: 4,
          }}
        />
      </div>

      {/* RIGHT — long-form letter */}
      <div style={{ maxWidth: 640 }}>
        <div id="sobre-pau" data-scroll-gap="40" style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Hola, soy</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 84, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 28px" }}>
          Pau <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>Polaino.</span>
        </h2>

        <p style={{ fontSize: 21, lineHeight: 1.5, color: PP_COLORS.ink, marginTop: 0, marginBottom: 28, fontWeight: 500 }}>
          Mamá y <strong style={{ fontWeight: 700 }}>Especialista en Sueño Pediátrico aprobada por la IACSC</strong>. La persona que querrías tener en tu WhatsApp después de meses sin dormir más de 3 horas seguidas.
        </p>

        <p style={{ fontSize: 17, lineHeight: 1.7, color: PP_COLORS.ink2, marginBottom: 20 }}>
          Sé lo que es que el bebé solo duerma encima de ti, los despertares cada hora, las siestas de 20 minutos y la sensación de estar haciendo algo mal.
        </p>

        <p style={{ fontSize: 17, lineHeight: 1.7, color: PP_COLORS.ink2, marginBottom: 36 }}>
          Por eso acompaño a familias desde un enfoque <strong style={{ color: PP_COLORS.ink, fontWeight: 600 }}>respetuoso, realista y sin juicios</strong>. No creo en bebés «mal acostumbrados», ni en métodos fríos que ignoran las necesidades emocionales de los niños.
        </p>

        {/* PULL QUOTE — la frase clave del manifiesto */}
        <div style={{ position: "relative", margin: "0 0 40px", padding: "32px 36px 32px 44px", background: PP_COLORS.paper, borderRadius: 28, borderLeft: `4px solid ${PP_COLORS.coral}` }}>
          <div style={{ position: "absolute", top: 8, left: 18, fontFamily: "var(--f-serif)", fontSize: 64, color: PP_COLORS.coral, opacity: 0.5, lineHeight: 1 }}>“</div>
          <p style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 30, lineHeight: 1.32, color: PP_COLORS.ink, margin: 0, letterSpacing: "-0.01em" }}>
            Muchas veces no hace falta <span style={{ textDecoration: "line-through", textDecorationColor: PP_COLORS.coral, textDecorationThickness: 2, opacity: 0.6 }}>hacer más</span>. Hace falta <strong style={{ fontStyle: "normal", fontFamily: "var(--f-display)", fontWeight: 700, color: PP_COLORS.red }}>entender mejor</strong> a tu bebé.
          </p>
        </div>

        <p style={{ fontSize: 19, lineHeight: 1.55, color: PP_COLORS.ink, marginBottom: 44, fontWeight: 500 }}>
          Mi objetivo no es solo que tu bebé duerma mejor. Es que <em style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>vuelvas a disfrutar de esta etapa</em> sin sentir que estás sobreviviendo a ella.
        </p>

        {/* CTA — ¿Empezamos? */}
        <div style={{ marginTop: 8, padding: "32px 36px", background: PP_COLORS.ink, color: PP_COLORS.cream, borderRadius: 28, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, position: "relative", overflow: "hidden" }}>
          <Blob1 fill={PP_COLORS.coral} style={{ position: "absolute", width: 220, height: 220, right: -80, top: -80, opacity: 0.35 }} />
          <div style={{ position: "relative", zIndex: 1 }}>
            <div style={{ fontFamily: "var(--f-display)", fontSize: 44, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1 }}>
              ¿<span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>Empezamos</span>?
            </div>
            <div style={{ fontSize: 14, opacity: 0.8, marginTop: 8 }}>Cuéntame vuestro caso en una llamada de 20 min.</div>
          </div>
          <Pill bg={PP_COLORS.coral} color={PP_COLORS.cream} size="lg" icon={<IconArrowR size={18} stroke={PP_COLORS.cream} />} style={{ flexShrink: 0, position: "relative", zIndex: 1 }}>
            Reservar llamada
          </Pill>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Section: Prensa (apariciones) ---------- */
const PRENSA = [
  {
    outlet: "La Razón",
    outletStyle: "serif",
    headline: "Esto es lo que quiere decir tu bebé según su forma de llorar",
    date: "3 oct 2025",
    section: "Salud",
    accent: "#c8102e", // La Razón red
    logo: "/nueva-web/assets/logo-larazon.webp",
    url: "https://www.larazon.es/salud/pau-polaino-especialista-sueno-infantil-bebes-tienen-diferentes-tipos-llanto-segun-sus-necesidades_2025100368dfd3f22aac281a5cbc92e7.html",
  },
  {
    outlet: "El Confidencial",
    outletStyle: "sans",
    headline: "Saber elegir el abrigo nocturno adecuado puede marcar la diferencia",
    date: "28 jul 2025",
    section: "Bienestar",
    accent: "#1f1a1a",
    logo: "/nueva-web/assets/logo-elconfidencial.webp",
    url: "https://www.elconfidencial.com/alma-corazon-vida/2025-07-28/pau-polaino-especialista-sueno-pediatrico-elegir-abrigo-nocturno-adecuado-1qrt_4175703/",
  },
];

const PrensaDesktop = () => (
  <section style={{ background: PP_COLORS.cream, padding: "90px 56px 100px", position: "relative", overflow: "hidden", borderTop: `1px solid ${PP_COLORS.ink}11`, borderBottom: `1px solid ${PP_COLORS.ink}11` }}>
    <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 60, marginBottom: 44 }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>En la prensa</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 56, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, margin: "10px 0 0" }}>
            Hablan de mí en <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>medios nacionales.</span>
          </h2>
        </div>
        <p style={{ maxWidth: 360, fontSize: 15, lineHeight: 1.55, color: PP_COLORS.ink2, margin: 0 }}>
          Algunos medios nacionales han contado conmigo para hablar sobre sueño infantil, desarrollo y crianza respetuosa.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
        {PRENSA.map((p, i) => (
          <a
            key={i}
            href={p.url}
            target="_blank"
            rel="noopener noreferrer"
            className="pp-lift"
            style={{
              background: "#fff",
              borderRadius: 24,
              padding: "32px 34px",
              display: "flex",
              flexDirection: "column",
              gap: 18,
              textDecoration: "none",
              color: PP_COLORS.ink,
              border: `1px solid ${PP_COLORS.ink}10`,
              boxShadow: "0 8px 24px rgba(31,26,26,0.04)",
              position: "relative",
              minHeight: 240,
            }}
          >
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <img
                  src={p.logo}
                  alt={`Logo ${p.outlet}`}
                  width={48}
                  height={48}
                  style={{ width: 48, height: 48, display: "block", flexShrink: 0, borderRadius: 999, objectFit: "cover" }}
                />
                <div
                  style={{
                    fontFamily: p.outletStyle === "serif" ? "var(--f-serif)" : "var(--f-display)",
                    fontWeight: p.outletStyle === "serif" ? 400 : 800,
                    fontStyle: p.outletStyle === "serif" ? "italic" : "normal",
                    fontSize: p.outletStyle === "serif" ? 30 : 22,
                    letterSpacing: "-0.02em",
                    textTransform: p.outletStyle === "serif" ? "none" : "uppercase",
                    color: p.accent,
                    lineHeight: 1,
                  }}
                >
                  {p.outlet}
                </div>
              </div>
              <div style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 11, color: PP_COLORS.ink2, letterSpacing: "0.04em" }}>
                <span style={{ textTransform: "uppercase" }}>{p.section}</span>
                <span style={{ width: 3, height: 3, borderRadius: 999, background: PP_COLORS.ink2, opacity: 0.5 }} />
                <span>{p.date}</span>
              </div>
            </div>

            <h3 style={{ fontFamily: "var(--f-display)", fontSize: 24, fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1.25, margin: 0, color: PP_COLORS.ink }}>
              {p.headline}
            </h3>

            <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 10, fontSize: 13, fontWeight: 500, color: PP_COLORS.ink }}>
              Leer el artículo
              <span style={{ width: 28, height: 28, borderRadius: 999, background: PP_COLORS.ink, color: "#fff", display: "grid", placeItems: "center" }}>
                <IconArrowR size={12} stroke="#fff" />
              </span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const PrensaMobile = () => (
  <MobileSection bg={PP_COLORS.cream} style={{ padding: "60px 22px 70px", borderTop: `1px solid ${PP_COLORS.ink}11`, borderBottom: `1px solid ${PP_COLORS.ink}11` }}>
    <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>En la prensa</div>
    <h2 style={{ fontFamily: "var(--f-display)", fontSize: 38, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, margin: "8px 0 22px" }}>
      Hablan de mí en <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>medios nacionales.</span>
    </h2>

    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {PRENSA.map((p, i) => (
        <a
          key={i}
          href={p.url}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            background: "#fff",
            borderRadius: 20,
            padding: "22px 22px 20px",
            display: "flex",
            flexDirection: "column",
            gap: 12,
            textDecoration: "none",
            color: PP_COLORS.ink,
            border: `1px solid ${PP_COLORS.ink}12`,
          }}
        >
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <img
                src={p.logo}
                alt={`Logo ${p.outlet}`}
                width={36}
                height={36}
                style={{ width: 36, height: 36, display: "block", flexShrink: 0, borderRadius: 999, objectFit: "cover" }}
              />
              <div
                style={{
                  fontFamily: p.outletStyle === "serif" ? "var(--f-serif)" : "var(--f-display)",
                  fontWeight: p.outletStyle === "serif" ? 400 : 800,
                  fontStyle: p.outletStyle === "serif" ? "italic" : "normal",
                  fontSize: p.outletStyle === "serif" ? 22 : 16,
                  letterSpacing: "-0.02em",
                  textTransform: p.outletStyle === "serif" ? "none" : "uppercase",
                  color: p.accent,
                  lineHeight: 1,
                }}
              >
                {p.outlet}
              </div>
            </div>
            <div style={{ fontSize: 10, color: PP_COLORS.ink2, letterSpacing: "0.04em" }}>
              {p.date}
            </div>
          </div>
          <h3 style={{ fontFamily: "var(--f-display)", fontSize: 17, fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1.3, margin: 0 }}>
            {p.headline}
          </h3>
          <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, fontWeight: 500 }}>
            Leer el artículo
            <IconArrowR size={12} stroke={PP_COLORS.ink} />
          </div>
        </a>
      ))}
    </div>
  </MobileSection>
);

const MetodoAlmasDesktop_REMOVED = () => (
  <section style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, padding: "140px 56px 160px", position: "relative", overflow: "hidden" }}>
    <Blob1 fill={PP_COLORS.coral} className="pp-float-1" style={{ position: "absolute", width: 460, height: 460, right: -150, top: -100, opacity: 0.25 }} />
    <Blob3 fill={PP_COLORS.mint} className="pp-float-3" style={{ position: "absolute", width: 280, height: 280, left: -100, bottom: -100, opacity: 0.18 }} />

    <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 60, marginBottom: 72 }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.coralSoft }}>Mi método propio</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 104, fontWeight: 700, letterSpacing: "-0.045em", lineHeight: 0.9, margin: "12px 0 0" }}>
            El método <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>ALMAS</span>.
          </h2>
        </div>
        <p style={{ maxWidth: 380, fontSize: 17, lineHeight: 1.55, opacity: 0.85, margin: 0 }}>
          Cinco pilares que guían cada plan que diseño. <strong style={{ color: PP_COLORS.cream, fontWeight: 600 }}>Sin atajos, sin métodos fríos.</strong> Solo entender a tu bebé y acompañaros con calma.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 18, alignItems: "stretch" }}>
        {METODO_ALMAS_LETRAS.map((m, i) => (
          <div
            key={i}
            className="pp-lift"
            style={{
              background: m.bg,
              color: PP_COLORS.ink,
              borderRadius: 28,
              padding: "36px 26px 32px",
              display: "flex",
              flexDirection: "column",
              minHeight: 380,
              position: "relative",
              boxShadow: "0 14px 32px rgba(0,0,0,0.18)",
            }}
          >
            <div
              style={{
                fontFamily: "var(--f-serif)",
                fontStyle: "italic",
                fontSize: 140,
                lineHeight: 0.85,
                color: PP_COLORS.red,
                letterSpacing: "-0.04em",
                marginBottom: 8,
              }}
            >
              {m.letra}
            </div>
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 26, letterSpacing: "-0.03em", lineHeight: 1, marginBottom: 14 }}>
              {m.palabra}
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: PP_COLORS.ink2, margin: 0 }}>
              {m.desc}
            </p>
          </div>
        ))}
      </div>

      {/* Placeholder note */}
      <div style={{ marginTop: 36, fontSize: 12, opacity: 0.5, fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace", letterSpacing: "0.02em" }}>
        // contenido provisional de cada letra — confirmar con Pau el significado real del acrónimo ALMAS
      </div>
    </div>
  </section>
);
const ServiciosDesktop = () => (
  <section style={{ background: PP_COLORS.mintSoft, padding: "140px 56px", position: "relative", overflow: "hidden" }}>
    <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative" }}>
      <div id="servicios" data-scroll-gap="34" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64 }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>¿Cómo puedo ayudarte?</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 96, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 0" }}>
            Tres caminos.<br />
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>Un mismo destino:</span> dormir.
          </h2>
        </div>
        <div style={{ maxWidth: 320, fontSize: 16, color: PP_COLORS.ink2, lineHeight: 1.5 }}>
          Elige según la edad de tu bebé y el momento que estás viviendo. Si tienes dudas, coméntamelo en la llamada informativa.
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 22, alignItems: "stretch" }}>

        {/* Card 1 — Plan de Sueño 5m+ (FLAGSHIP, primero) */}
        <div className="pp-lift" style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, borderRadius: 32, padding: 36, position: "relative", overflow: "hidden", display: "flex", flexDirection: "column", boxShadow: "0 18px 50px rgba(31,26,26,0.18)" }}>
          <Blob3 fill={PP_COLORS.coral} style={{ position: "absolute", width: 280, height: 280, right: -90, top: -100, opacity: 0.4 }} />
          <Blob2 fill={PP_COLORS.mint} style={{ position: "absolute", width: 200, height: 200, left: -70, bottom: -70, opacity: 0.2 }} />
          <div style={{ position: "relative", flex: 1, display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: PP_COLORS.coralSoft }}>★ Servicio principal</span>
              <span style={{ fontSize: 13, fontWeight: 600, opacity: 0.75 }}>397€ + IVA</span>
            </div>
            <div style={{ fontSize: 13, marginTop: 16, fontFamily: "var(--f-serif)", fontStyle: "italic", color: PP_COLORS.coralSoft }}>Para bebés de 5 meses en adelante</div>
            <h3 style={{ fontFamily: "var(--f-display)", fontSize: 44, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, margin: "6px 0 0" }}>
              Plan<br />
              <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>de Sueño.</span>
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, opacity: 0.88, marginTop: 18 }}>
              El acompañamiento más completo, codo con codo: tu bebé aprende a dormirse solo y a enlazar la noche entera. Con un enfoque respetuoso, adaptado a vuestra familia. Sin métodos extremos. Sin culpa.
            </p>

            <ul style={{ listStyle: "none", padding: 0, marginTop: 18, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                "Plan personalizado para tu bebé",
                "4 videollamadas de asesoría",
                "2 semanas de seguimiento por WhatsApp",
                "Pautas finales para excepciones (ej. enfermedad, regresión…)",
              ].map((t) => (
                <li key={t} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14 }}>
                  <span style={{ width: 20, height: 20, borderRadius: 999, background: PP_COLORS.coral, color: PP_COLORS.cream, display: "grid", placeItems: "center", flexShrink: 0 }}>
                    <IconCheck size={11} stroke={PP_COLORS.cream} />
                  </span>
                  {t}
                </li>
              ))}
            </ul>

            <a href="/plan-de-sueno/" style={{ marginTop: "auto", textDecoration: "none" }}>
            <Pill bg={PP_COLORS.coral} color={PP_COLORS.cream} size="md" style={{ paddingTop: 28 }} icon={<IconArrowR size={16} stroke={PP_COLORS.cream} />}>
              Quiero saber más
            </Pill>
            </a>
          </div>
        </div>

        {/* Card 2 — Plan Recién Nacido (0-4m) */}
        <div className="pp-lift" style={{ background: PP_COLORS.cream, borderRadius: 32, padding: 36, position: "relative", overflow: "hidden", display: "flex", flexDirection: "column", boxShadow: "0 8px 30px rgba(31,26,26,0.04)" }}>
          <Blob1 fill={PP_COLORS.coralSoft} style={{ position: "absolute", width: 260, height: 260, right: -90, bottom: -90, opacity: 0.55 }} />
          <div style={{ position: "relative", flex: 1, display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: PP_COLORS.red }}>Desde el embarazo</span>
              <span style={{ fontSize: 13, fontWeight: 600, color: PP_COLORS.ink2 }}>desde 67€ + IVA</span>
            </div>
            <div style={{ fontSize: 13, color: PP_COLORS.ink2, marginTop: 16, fontFamily: "var(--f-serif)", fontStyle: "italic" }}>Para bebés de 0 a 4 meses</div>
            <h3 style={{ fontFamily: "var(--f-display)", fontSize: 44, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, margin: "6px 0 0" }}>
              Plan<br />
              <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>Recién Nacido.</span>
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: PP_COLORS.ink2, marginTop: 18 }}>
              Un curso online para que tu bebé aprenda a dormir bien desde el día 1, con un enfoque respetuoso. Curso + 3 guías PDF con todo lo necesario para lograr una higiene de sueño correcta en los primeros meses.
            </p>

            <ul style={{ listStyle: "none", padding: 0, marginTop: 18, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                "Curso online (6 meses de acceso)",
                "3 guías PDF: plan, horarios y herramientas",
                "Opcional: videollamada 60 min · 167€",
                "Opcional: 2 semanas WhatsApp · 386€",
              ].map((t) => (
                <li key={t} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14 }}>
                  <span style={{ width: 20, height: 20, borderRadius: 999, background: PP_COLORS.ink, color: PP_COLORS.cream, display: "grid", placeItems: "center", flexShrink: 0 }}>
                    <IconCheck size={11} stroke={PP_COLORS.cream} />
                  </span>
                  {t}
                </li>
              ))}
            </ul>

            <a href="/curso/" style={{ marginTop: "auto", textDecoration: "none" }}>
            <Pill bg={PP_COLORS.ink} color="#fff" size="md" style={{ paddingTop: 28 }} icon={<IconArrowR size={16} stroke="#fff" />}>
              Quiero saber más
            </Pill>
            </a>
          </div>
        </div>

        {/* Card 3 — Consulta */}
        <div className="pp-lift" style={{ background: PP_COLORS.cream, borderRadius: 32, padding: 36, position: "relative", overflow: "hidden", display: "flex", flexDirection: "column", boxShadow: "0 8px 30px rgba(31,26,26,0.04)" }}>
          <Blob4 fill={PP_COLORS.mintSoft} style={{ position: "absolute", width: 260, height: 260, left: -90, bottom: -90, opacity: 0.7 }} />
          <div style={{ position: "relative", flex: 1, display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Sesión a medida</span>
              <span style={{ fontSize: 13, fontWeight: 600, color: PP_COLORS.ink2 }}>99€ + IVA</span>
            </div>
            <div style={{ fontSize: 13, color: PP_COLORS.ink2, marginTop: 16, fontFamily: "var(--f-serif)", fontStyle: "italic" }}>Para bebés de todas las edades</div>
            <h3 style={{ fontFamily: "var(--f-display)", fontSize: 44, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, margin: "6px 0 0" }}>
              Consulta<br />
              <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>puntual.</span>
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: PP_COLORS.ink2, marginTop: 18 }}>
              Una videollamada conmigo con doble enfoque: resolver dudas puntuales en bebés de 5+ meses —una regresión, una siesta que no cuadra, una rutina rota— o empezar a ganar autonomía de sueño con tu recién nacido de 0 a 4 meses.
            </p>

            <ul style={{ listStyle: "none", padding: 0, marginTop: 18, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                "Análisis de tu caso",
                "Llamada de 90 min",
                "Informe con pautas resolviendo dudas y preguntas",
                "Opcional: añadir seguimiento",
              ].map((t) => (
                <li key={t} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14 }}>
                  <span style={{ width: 20, height: 20, borderRadius: 999, background: PP_COLORS.ink, color: PP_COLORS.cream, display: "grid", placeItems: "center", flexShrink: 0 }}>
                    <IconCheck size={11} stroke={PP_COLORS.cream} />
                  </span>
                  {t}
                </li>
              ))}
            </ul>

            <a href="/consulta/" style={{ marginTop: "auto", textDecoration: "none" }}>
            <Pill bg="transparent" color={PP_COLORS.ink} border={`1.5px solid ${PP_COLORS.ink}`} size="md" style={{ paddingTop: 28 }} icon={<IconArrowR size={16} stroke={PP_COLORS.ink} />}>
              Quiero saber más
            </Pill>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Section: Cómo funciona ---------- */
const ComoFuncionaDesktop = () => (
  <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: 88, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 0" }}>
          De aquí a noches enteras<br />
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>en 3 pasos.</span>
        </h2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, position: "relative" }}>
        {/* Connecting dotted line */}
        <svg style={{ position: "absolute", left: 80, right: 80, top: 58, width: "calc(100% - 160px)", 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="8 10" strokeLinecap="round" />
        </svg>

        {[
          { n: "01", t: "Llamada informativa", d: "Una videollamada de 20 minutos para conocer vuestro caso y elegir juntas qué servicio encaja con vuestra familia.", c: PP_COLORS.coralSoft },
          { n: "02", t: "Plan personalizado", d: "Diseño un plan adaptado a tu bebé, tu lactancia, tu rutina y vuestros ritmos, con un enfoque respetuoso.", c: PP_COLORS.mint },
          { n: "03", t: "Acompañamiento", d: "Te acompaño paso a paso con videollamadas y seguimiento por WhatsApp hasta que el sueño se asienta. Sin soledad.", c: PP_COLORS.cream },
        ].map((s, i) => (
          <div key={s.n} style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" }}>
            <div style={{ width: 120, height: 120, borderRadius: 999, background: s.c, display: "grid", placeItems: "center", fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 40, color: PP_COLORS.ink, letterSpacing: "-0.04em", border: `2px solid ${PP_COLORS.ink}` }}>
              {s.n}
            </div>
            <h3 style={{ fontFamily: "var(--f-display)", fontSize: 36, fontWeight: 700, letterSpacing: "-0.03em", marginTop: 24, marginBottom: 12 }}>{s.t}</h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: PP_COLORS.ink2, maxWidth: 320 }}>{s.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Section: Resultados ---------- */
const ResultadosDesktop = () => (
  <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: 400, height: 400, left: -120, top: -120, opacity: 0.5 }} />
    <Blob3 fill={PP_COLORS.red} className="pp-float-2" style={{ position: "absolute", width: 280, height: 280, right: -80, bottom: -80, opacity: 0.4 }} />

    <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative", textAlign: "center" }}>
      <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase" }}>Resultados reales</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 112, fontWeight: 700, letterSpacing: "-0.045em", lineHeight: 0.9, margin: "10px 0 0" }}>
        Los números<br />
        <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>hablan solos.</span>
      </h2>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginTop: 80 }}>
        {[
          { n: "94%", l: "duerme de un tirón antes de 21 días" },
          { n: "+5h", l: "más de sueño nocturno medio" },
          { n: "1.400+", l: "familias acompañadas" },
          { n: "4.9★", l: "valoración media" },
        ].map((s) => (
          <div key={s.l} style={{ background: PP_COLORS.cream, borderRadius: 28, padding: 36, textAlign: "left" }}>
            <div style={{ fontFamily: "var(--f-display)", fontSize: 72, fontWeight: 800, letterSpacing: "-0.05em", lineHeight: 0.9, color: PP_COLORS.ink }}>{s.n}</div>
            <div style={{ fontSize: 15, lineHeight: 1.4, color: PP_COLORS.ink2, marginTop: 16 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Section: Testimonios ---------- */
const TestimoniosDesktop = () => {
  const testimonios = [
    {
      t: "Llegamos desesperados tras 13 meses mal durmiendo. En dos semanas pasamos de 8–12 despertares por noche a dormir del tirón casi 12 horas. Y lo más bonito: nuestro bebé también lo notó — estaba más descansado y alegre.",
      who: "Mery",
      role: "tras 13 meses sin dormir",
      featured: true,
      bg: PP_COLORS.ink,
      color: PP_COLORS.cream,
      rot: -1.5,
    },
    {
      t: "Acudimos a Paula tras una mala experiencia con otra especialista, sin mucha esperanza. Desde la primera videollamada nos devolvió la ilusión. Nos cambió la vida.",
      who: "Miguel Ángel",
      role: "tras un primer intento fallido",
      bg: PP_COLORS.coralSoft,
      rot: 1.5,
    },
    {
      t: "Empezamos cuando nuestro peque tenía 6 meses y apenas dormíamos 4 horas al día. Hoy duerme en su habitación, solo y sin despertarse.",
      who: "Juan",
      role: "papá de un bebé de 6m",
      bg: PP_COLORS.cream,
      rot: -1,
    },
    {
      t: "Si quieres que el dormir de tu hijo pase de ser un martirio al mejor momento del día — tienes que contratar a Paula.",
      who: "Manuela",
      role: "después de meses sin descansar",
      bg: PP_COLORS.mintSoft,
      rot: 2,
    },
    {
      t: "Llegamos pensando que era misión imposible que nuestro bebé de 2 años durmiera solo. Paula nos ayudó con su conocimiento, sus herramientas y también con su apoyo y confianza.",
      who: "Javier",
      role: "papá de un bebé de 2 años",
      bg: "#fff",
      rot: -1.5,
    },
    {
      t: "Solo puedo decirle GRACIAS. Veníamos con pocas expectativas tras una asesoría fallida. Paula no solo logró nuestros objetivos: entendió a nuestro bebé.",
      who: "Luisa",
      role: "tras una asesoría anterior fallida",
      bg: PP_COLORS.paper,
      rot: 1,
    },
  ];
  return (
    <section style={{ background: PP_COLORS.cream, padding: "140px 56px", position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 72, gap: 60 }}>
          <div>
            <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Lo que dicen las familias</div>
            <h2 style={{ fontFamily: "var(--f-display)", fontSize: 88, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 0" }}>
              Cartas de amor<br />
              <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>de familias que ya duermen.</span>
            </h2>
          </div>
          <a
            href="https://www.google.com/maps?cid=10317719836853677661"
            target="_blank"
            rel="noopener noreferrer"
            className="pp-lift"
            style={{ display: "inline-flex", alignItems: "center", gap: 12, background: "#fff", border: "1px solid rgba(0,0,0,0.06)", padding: "12px 18px", borderRadius: 999, boxShadow: "0 8px 22px rgba(31,26,26,0.06)", flexShrink: 0, textDecoration: "none", color: PP_COLORS.ink, cursor: "pointer" }}
          >
            <span style={{ display: "inline-flex", gap: 2 }}>
              {[0,1,2,3,4].map(i => (
                <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill={PP_COLORS.red}><path d="M12 2l2.9 6.6 7.1.7-5.4 4.9 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.3l7.1-.7z" /></svg>
              ))}
            </span>
            <span style={{ fontWeight: 700, fontSize: 16 }}>4,9</span>
            <span style={{ fontSize: 13, color: PP_COLORS.ink2 }}>· Reseñas verificadas en Google</span>
            <IconArrowR size={14} stroke={PP_COLORS.ink2} />
          </a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 26, alignItems: "start" }}>
          {testimonios.map((tt, i) => {
            const isFeatured = tt.featured;
            const txtColor = tt.color || PP_COLORS.ink;
            const subColor = tt.color ? "rgba(254,255,228,0.7)" : PP_COLORS.ink2;
            return (
              <div
                key={i}
                className="pp-tilt"
                style={{
                  background: tt.bg,
                  color: txtColor,
                  borderRadius: 32,
                  padding: isFeatured ? 40 : 32,
                  transform: `rotate(${tt.rot}deg)`,
                  boxShadow: isFeatured ? "0 22px 48px rgba(31,26,26,0.22)" : "0 14px 32px rgba(31,26,26,0.06)",
                  gridRow: isFeatured ? "span 2" : undefined,
                  display: "flex",
                  flexDirection: "column",
                  position: "relative",
                  overflow: "hidden",
                }}
              >
                {isFeatured && (
                  <>
                    <Blob3 fill={PP_COLORS.coral} style={{ position: "absolute", width: 280, height: 280, right: -100, top: -90, opacity: 0.35 }} />
                    <Blob2 fill={PP_COLORS.mint} style={{ position: "absolute", width: 220, height: 220, left: -90, bottom: -90, opacity: 0.18 }} />
                  </>
                )}
                <div style={{ position: "relative", display: "flex", flexDirection: "column", flex: 1 }}>
                  {isFeatured && (
                    <div style={{ display: "inline-flex", alignSelf: "flex-start", padding: "5px 12px", borderRadius: 999, background: PP_COLORS.coral, color: PP_COLORS.cream, fontSize: 10, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 18 }}>
                      ★ Historia destacada
                    </div>
                  )}
                  <div style={{ display: "flex", gap: 4 }}>
                    {[0,1,2,3,4].map(j => (
                      <svg key={j} width={isFeatured ? 16 : 13} height={isFeatured ? 16 : 13} viewBox="0 0 24 24" fill={isFeatured ? PP_COLORS.coral : PP_COLORS.red}><path d="M12 2l2.9 6.6 7.1.7-5.4 4.9 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.3l7.1-.7z" /></svg>
                    ))}
                  </div>
                  <div
                    style={{
                      fontFamily: "var(--f-serif)",
                      fontStyle: "italic",
                      fontSize: isFeatured ? 30 : 21,
                      lineHeight: 1.35,
                      marginTop: 18,
                      color: txtColor,
                      flex: 1,
                    }}
                  >
                    “{tt.t}”
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 26 }}>
                    <div
                      style={{
                        width: isFeatured ? 48 : 40,
                        height: isFeatured ? 48 : 40,
                        borderRadius: 999,
                        background: isFeatured ? PP_COLORS.coralSoft : PP_COLORS.coral,
                        color: PP_COLORS.cream,
                        display: "grid",
                        placeItems: "center",
                        fontFamily: "var(--f-display)",
                        fontWeight: 700,
                        fontSize: isFeatured ? 18 : 15,
                        letterSpacing: "-0.02em",
                      }}
                    >
                      {tt.who[0]}
                    </div>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: isFeatured ? 16 : 14, color: txtColor }}>{tt.who}</div>
                      <div style={{ fontSize: 12, color: subColor }}>{tt.role}</div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* ---------- Section: Recursos / Lead magnet ---------- */
const RecursosDesktop = () => (
  <section style={{ background: PP_COLORS.paper, padding: "140px 56px", position: "relative", overflow: "hidden" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" }}>
      <div>
        <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Gratis · ebook</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 84, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 0" }}>
          Las 7 noches que cambian<br />
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>el sueño de tu bebé.</span>
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: PP_COLORS.ink2, marginTop: 24, maxWidth: 480 }}>
          Un mini-plan descargable que ya han usado más de 8.000 familias. Cero spam: solo lo bueno.
        </p>
        <form style={{ marginTop: 32, display: "flex", gap: 10, maxWidth: 460 }}>
          <input
            type="email"
            placeholder="tu@email.com"
            style={{
              flex: 1,
              padding: "18px 22px",
              borderRadius: 999,
              border: `1.5px solid ${PP_COLORS.ink}`,
              background: PP_COLORS.cream,
              fontSize: 15,
              fontFamily: "var(--f-body)",
              outline: "none",
            }}
          />
          <Pill bg={PP_COLORS.ink} color="#fff" size="md" icon={<IconArrowR size={16} stroke="#fff" />} style={{ padding: "14px 22px" }}>
            Quiero el ebook
          </Pill>
        </form>
      </div>

      <div style={{ position: "relative", height: 480 }}>
        <Blob1 fill={PP_COLORS.mint} style={{ position: "absolute", inset: "20px 0 0 -20px" }} />
        {/* Ebook mockup */}
        <div
          style={{
            position: "absolute",
            left: 80,
            top: 30,
            width: 280,
            height: 380,
            background: PP_COLORS.ink,
            borderRadius: "8px 18px 18px 8px",
            color: PP_COLORS.cream,
            padding: 32,
            transform: "rotate(-6deg)",
            boxShadow: "0 30px 60px rgba(31,26,26,0.3)",
          }}
        >
          <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.6 }}>Ebook gratuito</div>
          <div style={{ fontFamily: "var(--f-display)", fontSize: 44, fontWeight: 800, lineHeight: 0.95, letterSpacing: "-0.04em", marginTop: 20 }}>
            7 noches.
          </div>
          <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 28, marginTop: 8, color: PP_COLORS.coralSoft }}>
            Un nuevo descanso.
          </div>
          <div style={{ position: "absolute", left: 32, bottom: 32, fontSize: 13, opacity: 0.7 }}>
            por Pau Polaino
          </div>
        </div>
        <div
          style={{
            position: "absolute",
            right: 40,
            top: 80,
            background: PP_COLORS.red,
            color: PP_COLORS.cream,
            borderRadius: 999,
            padding: "10px 18px",
            fontWeight: 600,
            fontSize: 13,
            transform: "rotate(8deg)",
            boxShadow: "0 12px 30px rgba(239,82,82,0.4)",
          }}
        >
          GRATIS · PDF
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Section: FAQ ---------- */
const FAQDesktop = () => {
  const faqs = [
    { 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." },
    { q: "¿A qué edad puedo empezar?", a: "Tengo planes adaptados a cada etapa: desde el embarazo y los primeros meses (Plan Recién Nacido) hasta el Plan de Sueño para bebés de 5 meses en adelante." },
    { q: "¿Cuánto dura el acompañamiento?", a: "Depende del servicio. El Plan de Sueño incluye 4 videollamadas y 2 semanas de seguimiento diario por WhatsApp. El Plan Recién Nacido tiene 6 meses de acceso al curso y opciones de seguimiento adicional." },
    { q: "¿En cuánto tiempo veré resultados?", a: "La mayoría de familias empieza a notar cambios en las primeras 72 horas. La consolidación real suele llegar entre los 10 y 14 días, según el caso." },
    { q: "¿Acompañas también las siestas?", a: "Sí. Las siestas son parte fundamental del descanso. Trabajamos noche y siestas en el mismo plan, sin separarlas." },
    { q: "¿Y si mi pareja no está convencida?", a: "Lo entiendo. Te animo a que vengáis los dos a la llamada informativa: contesto todas las dudas y así decidís juntos con la misma información." },
  ];
  return (
    <section style={{ background: PP_COLORS.cream, padding: "140px 56px" }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Preguntas frecuentes</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 80, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "10px 0 0" }}>
            Lo que toda mamá<br />
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>se pregunta.</span>
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {faqs.map((f, i) => (
            <details key={i} open={i === 0} style={{ background: "#fff", borderRadius: 24, padding: "26px 32px", boxShadow: "0 6px 18px rgba(31,26,26,0.04)" }}>
              <summary style={{ listStyle: "none", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 24, letterSpacing: "-0.02em" }}>
                {f.q}
                <span style={{ width: 36, height: 36, borderRadius: 999, background: PP_COLORS.coralSoft, display: "grid", placeItems: "center" }}>+</span>
              </summary>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: PP_COLORS.ink2, marginTop: 16, marginBottom: 0 }}>{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Section: CTA final ---------- */
const CTAFinalDesktop = () => (
  <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: 1100, 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: 152, 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: 22, lineHeight: 1.5, opacity: 0.85, maxWidth: 680, margin: "32px auto 0" }}>
        Reserva una <strong>llamada informativa de 20 minutos</strong> conmigo. Te cuento cómo trabajo, vemos vuestro caso y decidimos juntas si encajamos.
      </p>
      <div style={{ display: "flex", justifyContent: "center", gap: 16, marginTop: 44 }}>
        <Pill bg={PP_COLORS.red} color={PP_COLORS.cream} size="lg" icon={<IconArrowR size={18} stroke={PP_COLORS.cream} />}>
          Reservar llamada informativa
        </Pill>
      </div>
      <div style={{ marginTop: 28, fontSize: 13, opacity: 0.6 }}>
        Coste: 10 € en concepto de fianza — te los devolvemos tras la llamada, contrates o no
      </div>
    </div>
  </section>
);

/* ---------- Footer ---------- */
const PP_FOOTER_HREF = {
  "Plan de Sueño (5m+)": "/plan-de-sueno/",
  "Plan Recién Nacido (0–4m)": "/curso/",
  "Consulta puntual": "/consulta/",
  "Sobre mí": "/\#sobre-pau",
  "Contacto": "/contacto/",
  "Política de privacidad": "/privacidad/",
  "Términos y condiciones": "/terminos/",
  "Aviso legal": "/terminos/",
};

const FooterDesktop = () => (
  <footer style={{ background: PP_COLORS.coralSoft, padding: "80px 56px 40px", color: PP_COLORS.ink }}>
    <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.8fr 1fr 1fr 1fr", gap: 40 }}>
      <div>
        <BrandMark size="lg" />
        <p style={{ marginTop: 20, fontSize: 14, lineHeight: 1.55, color: PP_COLORS.ink2, maxWidth: 340 }}>
          Experta en Sueño Pediátrico · Miembro de IACSC. Mi objetivo es empoderar a los padres con conocimientos prácticos y útiles sobre el sueño de sus hijos, para que puedan tomar decisiones informadas a largo plazo.
        </p>
        <div style={{ marginTop: 24, display: "flex", gap: 10 }}>
          <a href="https://www.instagram.com/paupolaino_sleepspecialist/" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 16px", borderRadius: 999, background: PP_COLORS.ink, color: PP_COLORS.cream, fontSize: 13, fontWeight: 500, textDecoration: "none" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
            Instagram
          </a>
          <a href="https://www.tiktok.com/@paupolaino" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 16px", borderRadius: 999, background: PP_COLORS.ink, color: PP_COLORS.cream, fontSize: 13, fontWeight: 500, textDecoration: "none" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V9.66a8.07 8.07 0 0 0 4.7 1.5V7.7a4.79 4.79 0 0 1-1.77-1z"/></svg>
            TikTok
          </a>
        </div>
      </div>
      {[
        { t: "Servicios", l: ["Plan de Sueño (5m+)", "Plan Recién Nacido (0–4m)", "Consulta puntual"] },
        { t: "Pau", l: ["Sobre mí", "Contacto"] },
        { t: "Legal", l: ["Política de privacidad", "Términos y condiciones", "Aviso legal"] },
      ].map((c) => (
        <div key={c.t}>
          <div style={{ fontWeight: 600, fontSize: 13, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 14 }}>{c.t}</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            {c.l.map((i) => <li key={i} style={{ fontSize: 15 }}><a href={PP_FOOTER_HREF[i] || "#"} style={{ color: "inherit", textDecoration: "none" }}>{i}</a></li>)}
          </ul>
        </div>
      ))}
    </div>
    <div style={{ maxWidth: 1280, margin: "60px auto 0", paddingTop: 24, borderTop: "1px solid rgba(31,26,26,0.15)", display: "flex", justifyContent: "space-between", fontSize: 13, color: PP_COLORS.ink2 }}>
      <span>© 2026 Pau Polaino · Todos los derechos reservados</span>
      <span>Hecho con cariño</span>
    </div>
  </footer>
);

/* Shared mobile footer — mirrors the desktop footer structure, stacked for 390px */
const FooterMobile = () => (
  <footer style={{ background: PP_COLORS.coralSoft, padding: "56px 22px 28px", color: PP_COLORS.ink }}>
    <BrandMark size="md" />
    <p style={{ marginTop: 16, fontSize: 13, lineHeight: 1.55, color: PP_COLORS.ink2, maxWidth: 320 }}>
      Experta en Sueño Pediátrico · Miembro de IACSC. Mi objetivo es empoderar a los padres con conocimientos prácticos sobre el sueño de sus hijos, para tomar decisiones informadas a largo plazo.
    </p>
    <div style={{ marginTop: 20, display: "flex", gap: 10 }}>
      <a href="https://www.instagram.com/paupolaino_sleepspecialist/" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 16px", borderRadius: 999, background: PP_COLORS.ink, color: PP_COLORS.cream, fontSize: 13, fontWeight: 500, textDecoration: "none" }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
        Instagram
      </a>
      <a href="https://www.tiktok.com/@paupolaino" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 16px", borderRadius: 999, background: PP_COLORS.ink, color: PP_COLORS.cream, fontSize: 13, fontWeight: 500, textDecoration: "none" }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V9.66a8.07 8.07 0 0 0 4.7 1.5V7.7a4.79 4.79 0 0 1-1.77-1z"/></svg>
        TikTok
      </a>
    </div>
    <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "32px 24px" }}>
      {[
        { t: "Servicios", l: ["Plan de Sueño (5m+)", "Plan Recién Nacido (0–4m)", "Consulta puntual"] },
        { t: "Pau", l: ["Sobre mí", "Contacto"] },
        { t: "Legal", l: ["Política de privacidad", "Términos y condiciones", "Aviso legal"] },
      ].map((c) => (
        <div key={c.t}>
          <div style={{ fontWeight: 600, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 12 }}>{c.t}</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            {c.l.map((i) => <li key={i} style={{ fontSize: 13, color: PP_COLORS.ink2 }}><a href={PP_FOOTER_HREF[i] || "#"} style={{ color: "inherit", textDecoration: "none" }}>{i}</a></li>)}
          </ul>
        </div>
      ))}
    </div>
    <div style={{ marginTop: 36, paddingTop: 20, borderTop: "1px solid rgba(31,26,26,0.15)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, fontSize: 11, color: PP_COLORS.ink2 }}>
      <span>© 2026 Pau Polaino</span>
      <span>Hecho con cariño</span>
    </div>
  </footer>
);

/* ================================================ */
/*           FULL HOMEPAGE — DESKTOP                */
/* ================================================ */
const HomepageDesktop = () => (
  <div style={{ width: 1440, background: PP_COLORS.cream }}>
    <HeroADesktop />
    <PrensaDesktop />
    <ProblemSectionDesktop />
    <SobrePauDesktop />
    <ServiciosDesktop />
    <ComoFuncionaDesktop />
    {/* ResultadosDesktop eliminado — sin métricas reales verificadas */}
    <TestimoniosDesktop />
    {/* RecursosDesktop eliminado — sin lead magnet real */}
    <FAQDesktop />
    <CTAFinalDesktop />
    <FooterDesktop />
  </div>
);

/* ================================================ */
/*           FULL HOMEPAGE — MOBILE                 */
/* ================================================ */

const MobileSection = ({ children, bg = PP_COLORS.cream, color = PP_COLORS.ink, style, id }) => (
  <section id={id} style={{ background: bg, color, padding: "60px 22px", position: "relative", overflow: "hidden", ...style }}>{children}</section>
);

const HomepageMobile = () => (
  <div className="pp pp-mobile" style={{ width: 390, background: PP_COLORS.cream }}>
    <HeroAMobile />

    <PrensaMobile />

    {/* Problem */}
    <MobileSection bg={PP_COLORS.ink} color={PP_COLORS.cream} style={{ padding: "80px 22px" }}>
      <Blob4 fill={PP_COLORS.coral} style={{ position: "absolute", width: 200, height: 200, right: -60, top: -60, opacity: 0.4 }} />
      <div style={{ display: "inline-flex", padding: "6px 12px", border: "1px solid rgba(254,255,228,0.3)", borderRadius: 999, fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase" }}>El problema</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 52, fontWeight: 700, lineHeight: 0.9, letterSpacing: "-0.04em", margin: "16px 0 0" }}>
        Llevas <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>meses</span> sin dormir y nadie te dice nada útil.
      </h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 32 }}>
        {[
          ["“Ya dormirá cuando le toque.”", "Pediatra"],
          ["“Déjalo llorar 20 min.”", "Tu suegra"],
          ["“En mi caso bastó una rutina.”", "Instagram"],
        ].map(([q, w], i) => (
          <div key={i} style={{ background: "rgba(254,255,228,0.06)", border: "1px solid rgba(254,255,228,0.12)", borderRadius: 18, padding: "16px 18px" }}>
            <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 18, lineHeight: 1.25 }}>{q}</div>
            <div style={{ marginTop: 8, fontSize: 10, color: PP_COLORS.coralSoft, letterSpacing: "0.1em", textTransform: "uppercase" }}>— {w}</div>
          </div>
        ))}
      </div>
      <p style={{ marginTop: 28, fontSize: 16, fontFamily: "var(--f-serif)", fontStyle: "italic", lineHeight: 1.4, color: "rgba(254,255,228,0.85)" }}>
        Y tú llevas 7 meses funcionando con 4h troceadas, leyendo foros a las 3 a.m.
      </p>
      <p style={{ marginTop: 14, fontSize: 17, fontWeight: 600 }}>
        Esto no es así. Y tiene solución.
      </p>
    </MobileSection>

    {/* Sobre Pau */}
    <MobileSection id="sobre-pau" bg={PP_COLORS.cream} style={{ padding: "80px 22px 100px" }}>
      <Blob3 fill={PP_COLORS.mintSoft} style={{ position: "absolute", width: 260, height: 260, right: -100, top: -80, opacity: 0.5 }} />
      <Blob2 fill={PP_COLORS.coralSoft} style={{ position: "absolute", width: 220, height: 220, left: -90, bottom: -60, opacity: 0.6 }} />
      <div style={{ position: "relative" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Hola, soy</div>
        <h2 style={{ fontFamily: "var(--f-display)", fontSize: 56, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 24px" }}>
          Pau <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>Polaino.</span>
        </h2>

        {/* Photo + stickers */}
        <div style={{ position: "relative", height: 408, marginBottom: -8 }}>
          {/* Soft organic backdrop */}
          <div style={{
            position: "absolute", left: 4, top: 6, width: 296, height: 352,
            background: `linear-gradient(168deg, ${PP_COLORS.coralSoft} 0%, ${PP_COLORS.mintSoft} 100%)`,
            borderRadius: "56% 44% 46% 54% / 48% 48% 52% 52%",
          }}></div>

          {/* Cutout portrait */}
          <img
            src="/nueva-web/assets/pau-sobremi.webp"
            alt="Pau Polaino abrazando a su bebé"
            style={{
              position: "absolute", left: -6, bottom: 52, width: 318, height: "auto",
              objectFit: "contain",
              zIndex: 2,
            }}
          />

          {/* Decorative wave — soft blending curve + dotted accent masking the crop */}
          <div style={{ position: "absolute", left: -10, right: -6, bottom: 0, height: 138, zIndex: 3 }}>
            <PauWaveSign />
          </div>

          {/* Sin métodos fríos sticker */}
          <div style={{ position: "absolute", right: -14, top: 22, background: PP_COLORS.red, color: PP_COLORS.cream, borderRadius: 18, padding: "12px 16px", transform: "rotate(4deg)", maxWidth: 152, boxShadow: "0 12px 24px rgba(239,82,82,0.28)", zIndex: 4 }}>
            <div style={{ fontFamily: "var(--f-display)", fontSize: 20, fontWeight: 800, lineHeight: 1, letterSpacing: "-0.03em" }}>Sin métodos<br/>fríos.</div>
            <div style={{ fontSize: 10, marginTop: 6, lineHeight: 1.25 }}>Respetuosa. Realista. Sin juicios.</div>
          </div>

          {/* IACSC badge */}
          <img
            src="/nueva-web/assets/iacsc-badge-round.webp"
            alt="IACSC · Member"
            style={{
              position: "absolute",
              left: -12,
              top: 34,
              width: 84,
              height: 84,
              objectFit: "contain",
              transform: "rotate(-8deg)",
              filter: "drop-shadow(0 10px 18px rgba(31,26,26,0.18))",
              zIndex: 4,
            }}
          />
        </div>

        {/* Letter */}
        <p style={{ fontSize: 16, lineHeight: 1.5, color: PP_COLORS.ink, marginBottom: 20, fontWeight: 500 }}>
          Mamá y <strong style={{ fontWeight: 700 }}>Especialista en Sueño Pediátrico aprobada por la IACSC</strong>. La persona que querrías tener en tu WhatsApp después de meses sin dormir más de 3 horas seguidas.
        </p>

        <p style={{ fontSize: 14, lineHeight: 1.65, color: PP_COLORS.ink2, marginBottom: 16 }}>
          Sé lo que es que el bebé solo duerma encima de ti, los despertares cada hora, las siestas de 20 minutos y la sensación de estar haciendo algo mal.
        </p>

        <p style={{ fontSize: 14, lineHeight: 1.65, color: PP_COLORS.ink2, marginBottom: 28 }}>
          Por eso acompaño a familias desde un enfoque <strong style={{ color: PP_COLORS.ink, fontWeight: 600 }}>respetuoso, realista y sin juicios</strong>. No creo en bebés «mal acostumbrados», ni en métodos fríos que ignoran las necesidades emocionales de los niños.
        </p>

        {/* Pull quote */}
        <div style={{ position: "relative", margin: "0 0 28px", padding: "22px 22px 22px 26px", background: PP_COLORS.paper, borderRadius: 22, borderLeft: `3px solid ${PP_COLORS.coral}` }}>
          <div style={{ position: "absolute", top: 2, left: 10, fontFamily: "var(--f-serif)", fontSize: 44, color: PP_COLORS.coral, opacity: 0.5, lineHeight: 1 }}>“</div>
          <p style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.32, color: PP_COLORS.ink, margin: 0, letterSpacing: "-0.01em" }}>
            Muchas veces no hace falta <span style={{ textDecoration: "line-through", textDecorationColor: PP_COLORS.coral, textDecorationThickness: 2, opacity: 0.6 }}>hacer más</span>. Hace falta <strong style={{ fontStyle: "normal", fontFamily: "var(--f-display)", fontWeight: 700, color: PP_COLORS.red }}>entender mejor</strong> a tu bebé.
          </p>
        </div>

        <p style={{ fontSize: 16, lineHeight: 1.5, color: PP_COLORS.ink, marginBottom: 28, fontWeight: 500 }}>
          Mi objetivo no es solo que tu bebé duerma mejor. Es que <em style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>vuelvas a disfrutar de esta etapa</em> sin sentir que estás sobreviviendo a ella.
        </p>

        {/* CTA — ¿Empezamos? */}
        <div style={{ marginTop: 28, padding: "24px 22px", background: PP_COLORS.ink, color: PP_COLORS.cream, borderRadius: 24, position: "relative", overflow: "hidden" }}>
          <Blob1 fill={PP_COLORS.coral} style={{ position: "absolute", width: 180, height: 180, right: -70, top: -70, opacity: 0.35 }} />
          <div style={{ position: "relative", zIndex: 1 }}>
            <div style={{ fontFamily: "var(--f-display)", fontSize: 36, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1 }}>
              ¿<span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>Empezamos</span>?
            </div>
            <div style={{ fontSize: 13, opacity: 0.8, marginTop: 8, lineHeight: 1.4 }}>Cuéntame vuestro caso en una llamada de 20 min.</div>
            <Pill bg={PP_COLORS.coral} color={PP_COLORS.cream} size="md" style={{ marginTop: 18, width: "100%", justifyContent: "center" }} icon={<IconArrowR size={14} stroke={PP_COLORS.cream} />}>
              Reservar llamada
            </Pill>
          </div>
        </div>
      </div>
    </MobileSection>

    {/* Servicios */}
    <MobileSection id="servicios" bg={PP_COLORS.mintSoft}>
      <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>¿Cómo puedo ayudarte?</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 50, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 28px" }}>
        Tres caminos.<br />
        <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>Un destino:</span> dormir.
      </h2>

      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>

        {/* Card 1 — Plan de Sueño (FLAGSHIP, primero) */}
        <div style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, borderRadius: 26, padding: 24, position: "relative", overflow: "hidden", boxShadow: "0 14px 32px rgba(31,26,26,0.18)" }}>
          <Blob3 fill={PP_COLORS.coral} style={{ position: "absolute", width: 200, height: 200, right: -70, top: -70, opacity: 0.35 }} />
          <div style={{ position: "relative" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: PP_COLORS.coralSoft }}>★ Servicio principal</span>
              <span style={{ fontSize: 12, fontWeight: 600, opacity: 0.7 }}>397€ + IVA</span>
            </div>
            <div style={{ fontSize: 12, marginTop: 10, fontFamily: "var(--f-serif)", fontStyle: "italic", color: PP_COLORS.coralSoft }}>Bebés de 5 meses en adelante</div>
            <h3 style={{ fontFamily: "var(--f-display)", fontSize: 34, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, margin: "4px 0 0" }}>
              Plan <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>de Sueño.</span>
            </h3>
            <p style={{ fontSize: 14, lineHeight: 1.5, opacity: 0.88, marginTop: 10 }}>
              El acompañamiento más completo: estudio del caso, informe con pautas de sueño, 4 videollamadas + 2 semanas por WhatsApp. Enfoque respetuoso. Sin métodos extremos.
            </p>
            <a href="/plan-de-sueno/" style={{ display: "block", marginTop: 18, textDecoration: "none" }}>
            <Pill bg={PP_COLORS.coral} color={PP_COLORS.cream} size="md" style={{ width: "100%", justifyContent: "center" }} icon={<IconArrowR size={14} stroke={PP_COLORS.cream} />}>
              Quiero saber más
            </Pill>
            </a>
          </div>
        </div>

        {/* Card 2 — Plan Recién Nacido (0-4m) */}
        <div style={{ background: PP_COLORS.cream, borderRadius: 26, padding: 24, position: "relative", overflow: "hidden" }}>
          <Blob1 fill={PP_COLORS.coralSoft} style={{ position: "absolute", width: 180, height: 180, right: -60, bottom: -60, opacity: 0.55 }} />
          <div style={{ position: "relative" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: PP_COLORS.red }}>Desde el embarazo</span>
              <span style={{ fontSize: 12, fontWeight: 600, color: PP_COLORS.ink2 }}>desde 67€ + IVA</span>
            </div>
            <div style={{ fontSize: 12, color: PP_COLORS.ink2, marginTop: 10, fontFamily: "var(--f-serif)", fontStyle: "italic" }}>Bebés de 0 a 4 meses</div>
            <h3 style={{ fontFamily: "var(--f-display)", fontSize: 34, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, margin: "4px 0 0" }}>
              Plan <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>Recién Nacido.</span>
            </h3>
            <p style={{ fontSize: 14, lineHeight: 1.5, color: PP_COLORS.ink2, marginTop: 10 }}>
              Curso online + 3 guías PDF para que tu bebé aprenda a dormir bien desde el día 1, con un enfoque respetuoso. Opcional: videollamada y 2 semanas por WhatsApp.
            </p>
            <a href="/curso/" style={{ display: "block", marginTop: 18, textDecoration: "none" }}>
            <Pill bg={PP_COLORS.ink} color="#fff" size="md" style={{ width: "100%", justifyContent: "center" }} icon={<IconArrowR size={14} stroke="#fff" />}>
              Quiero saber más
            </Pill>
            </a>
          </div>
        </div>

        {/* Card 3 — Consulta puntual */}
        <div style={{ background: PP_COLORS.cream, borderRadius: 26, padding: 24, position: "relative", overflow: "hidden" }}>
          <Blob4 fill={PP_COLORS.mintSoft} style={{ position: "absolute", width: 180, height: 180, left: -60, bottom: -60, opacity: 0.7 }} />
          <div style={{ position: "relative" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Sesión a medida</span>
              <span style={{ fontSize: 12, fontWeight: 600, color: PP_COLORS.ink2 }}>99€ + IVA</span>
            </div>
            <div style={{ fontSize: 12, color: PP_COLORS.ink2, marginTop: 10, fontFamily: "var(--f-serif)", fontStyle: "italic" }}>Todas las edades</div>
            <h3 style={{ fontFamily: "var(--f-display)", fontSize: 34, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, margin: "4px 0 0" }}>
              Consulta <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>puntual.</span>
            </h3>
            <p style={{ fontSize: 14, lineHeight: 1.5, color: PP_COLORS.ink2, marginTop: 10 }}>
              Una videollamada para resolver dudas puntuales en bebés de 5+ meses, o ganar autonomía de sueño con tu recién nacido (0-4 meses).
            </p>
            <a href="/consulta/" style={{ display: "block", marginTop: 18, textDecoration: "none" }}>
            <Pill bg="transparent" color={PP_COLORS.ink} border={`1.5px solid ${PP_COLORS.ink}`} size="md" style={{ width: "100%", justifyContent: "center" }} icon={<IconArrowR size={14} stroke={PP_COLORS.ink} />}>
              Quiero saber más
            </Pill>
            </a>
          </div>
        </div>
      </div>
    </MobileSection>

    {/* Cómo funciona */}
    <MobileSection bg={PP_COLORS.paper}>
      <div style={{ textAlign: "center", marginBottom: 32 }}>
        <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: 46, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 0" }}>
          De aquí<br />
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>a noches enteras.</span>
        </h2>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        {[
          { n: "01", t: "Llamada informativa", d: "20 min para conocer vuestro caso y elegir juntas el servicio.", c: PP_COLORS.coralSoft },
          { n: "02", t: "Plan personalizado", d: "Un plan adaptado a tu bebé y vuestra familia, con un enfoque respetuoso.", c: PP_COLORS.mint },
          { n: "03", t: "Acompañamiento", d: "Videollamadas y seguimiento por WhatsApp hasta que el sueño se asienta.", c: PP_COLORS.cream },
        ].map((s, i, arr) => (
          <div key={s.n} style={{ display: "flex", gap: 18, alignItems: "stretch" }}>
            <div style={{ flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "center" }}>
              <div style={{ width: 64, height: 64, borderRadius: 999, background: s.c, display: "grid", placeItems: "center", fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 22, letterSpacing: "-0.03em", border: `2px solid ${PP_COLORS.ink}` }}>
                {s.n}
              </div>
              {i < arr.length - 1 && (
                <div style={{ flex: 1, width: 0, borderLeft: `2.5px dashed ${PP_COLORS.coral}`, marginTop: 6, marginBottom: -20 }}></div>
              )}
            </div>
            <div>
              <h3 style={{ fontFamily: "var(--f-display)", fontSize: 24, fontWeight: 700, letterSpacing: "-0.03em", margin: 0 }}>{s.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: PP_COLORS.ink2, marginTop: 6 }}>{s.d}</p>
            </div>
          </div>
        ))}
      </div>
    </MobileSection>

    {/* Resultados móvil eliminado — sin métricas reales verificadas */}

    {/* Testimonios */}
    <MobileSection bg={PP_COLORS.cream}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 12, marginBottom: 24 }}>
        <div>
          <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>Familias que duermen</div>
          <h2 style={{ fontFamily: "var(--f-display)", fontSize: 42, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 0" }}>
            Cartas de amor<br />
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>de familias que ya duermen.</span>
          </h2>
        </div>
      </div>
      <a
        href="https://www.google.com/maps?cid=10317719836853677661"
        target="_blank"
        rel="noopener noreferrer"
        style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "#fff", border: "1px solid rgba(0,0,0,0.06)", padding: "8px 14px", borderRadius: 999, fontSize: 11, marginBottom: 24, boxShadow: "0 4px 14px rgba(31,26,26,0.06)", textDecoration: "none", color: PP_COLORS.ink }}
      >
        <span style={{ display: "inline-flex", gap: 1 }}>
          {[0,1,2,3,4].map(i => (
            <svg key={i} width="11" height="11" viewBox="0 0 24 24" fill={PP_COLORS.red}><path d="M12 2l2.9 6.6 7.1.7-5.4 4.9 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.3l7.1-.7z" /></svg>
          ))}
        </span>
        <span style={{ fontWeight: 700 }}>4,9</span>
        <span style={{ color: PP_COLORS.ink2 }}>· Reseñas verificadas en Google</span>
        <IconArrowR size={11} stroke={PP_COLORS.ink2} />
      </a>
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {[
          {
            t: "Llegamos desesperados tras 13 meses mal durmiendo. En dos semanas pasamos de 8–12 despertares por noche a dormir del tirón casi 12 horas.",
            who: "Mery",
            role: "tras 13 meses sin dormir",
            bg: PP_COLORS.ink,
            color: PP_COLORS.cream,
            rot: -1,
            featured: true,
          },
          {
            t: "Acudimos a Paula tras una mala experiencia con otra especialista. Desde la primera videollamada nos devolvió la ilusión. Nos cambió la vida.",
            who: "Miguel Ángel",
            role: "tras un intento fallido",
            bg: PP_COLORS.coralSoft,
            rot: 1,
          },
          {
            t: "Empezamos cuando nuestro peque tenía 6 meses y apenas dormíamos 4 horas al día. Hoy duerme en su habitación, solo y sin despertarse.",
            who: "Juan",
            role: "papá de un bebé de 6m",
            bg: PP_COLORS.mintSoft,
            rot: -1,
          },
          {
            t: "Si quieres que el dormir de tu hijo pase de ser un martirio al mejor momento del día — tienes que contratar a Paula.",
            who: "Manuela",
            role: "después de meses sin descansar",
            bg: "#fff",
            rot: 1,
          },
          {
            t: "Solo puedo decirle GRACIAS. Veníamos con pocas expectativas tras una asesoría fallida. Paula entendió a nuestro bebé.",
            who: "Luisa",
            role: "tras una asesoría anterior fallida",
            bg: PP_COLORS.paper,
            rot: -1,
          },
        ].map((tt, i) => {
          const txtColor = tt.color || PP_COLORS.ink;
          const subColor = tt.color ? "rgba(254,255,228,0.7)" : PP_COLORS.ink2;
          return (
            <div
              key={i}
              className="pp-reveal"
              style={{
                background: tt.bg,
                color: txtColor,
                borderRadius: 24,
                padding: tt.featured ? 26 : 22,
                transform: `rotate(${tt.rot}deg)`,
                boxShadow: tt.featured ? "0 18px 32px rgba(31,26,26,0.2)" : "0 10px 22px rgba(31,26,26,0.06)",
                position: "relative",
                overflow: "hidden",
              }}
            >
              {tt.featured && (
                <Blob3 fill={PP_COLORS.coral} style={{ position: "absolute", width: 200, height: 200, right: -80, top: -80, opacity: 0.32 }} />
              )}
              <div style={{ position: "relative" }}>
                {tt.featured && (
                  <div style={{ display: "inline-flex", padding: "4px 10px", borderRadius: 999, background: PP_COLORS.coral, color: PP_COLORS.cream, fontSize: 9, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 12 }}>
                    ★ Destacada
                  </div>
                )}
                <div style={{ display: "flex", gap: 3 }}>
                  {[0,1,2,3,4].map(j => (
                    <svg key={j} width="10" height="10" viewBox="0 0 24 24" fill={tt.featured ? PP_COLORS.coral : PP_COLORS.red}><path d="M12 2l2.9 6.6 7.1.7-5.4 4.9 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.3l7.1-.7z" /></svg>
                  ))}
                </div>
                <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: tt.featured ? 20 : 17, lineHeight: 1.4, marginTop: 12, color: txtColor }}>
                  “{tt.t}”
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 16 }}>
                  <div style={{ width: 32, height: 32, borderRadius: 999, background: tt.featured ? PP_COLORS.coralSoft : PP_COLORS.coral, color: PP_COLORS.cream, display: "grid", placeItems: "center", fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 13 }}>
                    {tt.who[0]}
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13, color: txtColor }}>{tt.who}</div>
                    <div style={{ fontSize: 11, color: subColor }}>{tt.role}</div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </MobileSection>

    {/* Lead magnet móvil eliminado — sin ebook real */}

    {/* FAQ */}
    <MobileSection bg={PP_COLORS.cream}>
      <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: PP_COLORS.ink2 }}>FAQ</div>
      <h2 style={{ fontFamily: "var(--f-display)", fontSize: 44, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "8px 0 24px" }}>
        Lo que toda mamá <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>se pregunta.</span>
      </h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {[
          { q: "¿Es “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." },
          { q: "¿A qué edad puedo empezar?", a: "Tengo planes adaptados a cada etapa: desde el embarazo y los primeros meses (Plan Recién Nacido) hasta el Plan de Sueño para bebés de 5 meses en adelante." },
          { q: "¿Cuánto dura el acompañamiento?", a: "Depende del servicio. El Plan de Sueño incluye 4 videollamadas y 2 semanas de seguimiento diario por WhatsApp. El Plan Recién Nacido tiene 6 meses de acceso al curso y opciones de seguimiento adicional." },
          { q: "¿En cuánto tiempo veré resultados?", a: "La mayoría de familias empieza a notar cambios en las primeras 72 horas. La consolidación real suele llegar entre los 10 y 14 días, según el caso." },
          { q: "¿Acompañas también las siestas?", a: "Sí. Las siestas son parte fundamental del descanso. Trabajamos noche y siestas en el mismo plan, sin separarlas." },
          { q: "¿Y si mi pareja no está convencida?", a: "Lo entiendo. Te animo a que vengáis los dos a la llamada informativa: contesto todas las dudas y así decidís juntos con la misma información." },
        ].map((f, i) => (
          <details key={i} open={i === 0} style={{ background: "#fff", borderRadius: 18, padding: "18px 20px", boxShadow: "0 4px 12px rgba(31,26,26,0.04)" }}>
            <summary style={{ listStyle: "none", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 16 }}>
              {f.q}
              <span style={{ width: 26, height: 26, borderRadius: 999, background: PP_COLORS.coralSoft, display: "grid", placeItems: "center", fontSize: 14 }}>+</span>
            </summary>
            <p style={{ fontSize: 13, lineHeight: 1.55, color: PP_COLORS.ink2, marginTop: 10, marginBottom: 0 }}>{f.a}</p>
          </details>
        ))}
      </div>
    </MobileSection>

    {/* CTA final */}
    <MobileSection bg={PP_COLORS.ink} color={PP_COLORS.cream} style={{ padding: "80px 22px", textAlign: "center" }}>
      <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: 60, fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 0.9, margin: "14px 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: 16, lineHeight: 1.5, opacity: 0.85, marginTop: 18 }}>
          Reserva una <strong>llamada informativa de 20 min</strong> conmigo. Vemos vuestro caso y decidimos si encajamos.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 28 }}>
          <Pill bg={PP_COLORS.red} color={PP_COLORS.cream} size="md" style={{ justifyContent: "center", padding: "16px 22px" }} icon={<IconArrowR size={16} stroke={PP_COLORS.cream} />}>
            Reservar llamada
          </Pill>
        </div>
        <div style={{ marginTop: 18, fontSize: 11, opacity: 0.6, lineHeight: 1.5 }}>
          Coste: 10 € en fianza · reembolsables tras la llamada
        </div>
      </div>
    </MobileSection>

    {/* Footer mobile */}
    <FooterMobile />
  </div>
);

Object.assign(window, { HomepageDesktop, HomepageMobile, FooterDesktop, FooterMobile });