﻿// Pau Polaino — Consulta detail page (99€ + IVA)
// Page intermedia: más simple que Plan de Sueño, más profunda que llamada informativa.
// "Una hora. Un informe. Sin seguimiento." — claridad total.

/* ---------- Content data ---------- */
const C_FOR_YOU = [
  {
    icon: "moon",
    title: "Siestas cortas o madrugones",
    desc: "Tu bebé duerme bien por la noche pero las siestas son un desastre, o se despierta a las 5 de la mañana sin remedio.",
  },
  {
    icon: "sparkle",
    title: "Estás en una etapa de cambio",
    desc: "Regresión de sueño, transición de cuna a cama, primer viaje largo, vuelta al trabajo, llegada de hermano… algo se rompió y no sabes cómo recolocarlo.",
  },
  {
    icon: "star",
    title: "Tus rutinas ya no funcionan",
    desc: "Lo que valía hace 3 meses ya no vale. Necesitas horarios más flexibles pero efectivos, sin renunciar a la previsibilidad.",
  },
  {
    icon: "heart",
    title: "Solo necesitas orientación clara",
    desc: "No quieres un proceso de semanas. Quieres respuestas profesionales, hoy, para crear un entorno que favorezca el descanso de toda la familia.",
  },
];

const C_PROFILES = [
  {
    tag: "Recién nacidos · 0–4 meses",
    title: "Sentar las bases desde el principio",
    desc: "Empieza con buen pie. Trabajamos la autonomía del sueño, creamos rutinas suaves y respetuosas y preparamos a tu bebé para los cambios que llegan hacia los 4 meses.",
    points: [
      "Asentar las bases del sueño",
      "Lograr autonomía progresiva",
      "Crear rutinas suaves",
      "Establecer horarios flexibles",
      "Regular el ritmo circadiano",
      "Alargar las siestas",
    ],
    tone: "mint",
  },
  {
    tag: "Bebés · 5+ meses",
    title: "Resolver una duda o un cambio puntual",
    desc: "Tu bebé ya tiene cierta autonomía, pero algo se ha torcido: una regresión, siestas que no salen, una transición que se atasca. Una sesión y un informe para recolocarlo.",
    points: [
      "Siestas cortas o madrugones",
      "Regresiones del sueño",
      "Transición de cuna a cama",
      "Vuelta al trabajo o viajes",
      "Rutinas que dejaron de funcionar",
      "Orientación clara, sin un plan entero",
    ],
    tone: "coral",
  },
];

const C_HOW = [
  {
    n: "01",
    t: "Cuestionario de estudio del caso",
    d: "Antes de la llamada, recibo toda la información sobre vuestro bebé: edad, rutinas, despertares, lactancia, entorno, historia del sueño. Llego a la llamada habiendo estudiado tu caso, no improvisando.",
  },
  {
    n: "02",
    t: "Videollamada de 90 minutos",
    d: "Repasamos juntas tu situación, te explico qué está pasando y por qué, y trazamos las pautas concretas que vas a aplicar. Tiempo para que preguntes todo lo que necesites.",
  },
  {
    n: "03",
    t: "Informe escrito con pautas",
    d: "Después de la llamada te entrego un documento con todo lo hablado: pautas para noche, pautas para siestas, ajustes de rutina y entorno, adaptado a tu bebé y tu estilo de crianza. Lo tienes para releer cuando quieras.",
  },
];

const C_DELIVERS = [
  { t: "Evaluación personalizada", d: "Analizamos a fondo la situación actual: hábitos, rutinas, apoyos, horarios, entorno. Entiendo de dónde partimos antes de proponer." },
  { t: "Informe escrito detallado", d: "Pautas específicas para noche y siestas, adaptadas a tu bebé y a vuestro estilo. No es un PDF genérico, es para vosotros." },
  { t: "Recomendaciones prácticas", d: "Ajustes concretos de rutina, horario y ambiente. Lo que aplicas mañana, no teoría que no sabes cómo bajar al día a día." },
  { t: "Resolución de dudas", d: "Espacio para cualquier pregunta o preocupación que tengas. Cercano, profesional, sin prisa, sin juicios." },
];

const C_INCLUDED = [
  "Estudio previo de tu caso vía cuestionarios",
  "Videollamada de 90 minutos conmigo",
  "Informe escrito con pautas personalizadas",
];

const C_NOT_INCLUDED = [
  "Seguimiento posterior por WhatsApp",
  "Llamadas adicionales de ajuste",
  "Acompañamiento durante la aplicación",
];

const C_VS = [
  { feature: "Edad recomendada", rn: "0–4 meses sin autonomía", c5: "5+ meses con autonomía de sueño", plan: "5+ meses sin autonomía de sueño" },
  { feature: "Para qué sirve", rn: "Asentar una buena base de sueño desde el inicio, incluida la autonomía", c5: "Resolver una duda concreta o un cambio puntual", plan: "Cambiar el sueño de raíz, con acompañamiento" },
  { feature: "Duración del contacto", rn: "1 sesión (90 min)", c5: "1 sesión (90 min)", plan: "Semanas de seguimiento" },
  { feature: "Informe escrito", rn: "Sí", c5: "Sí", plan: "Sí" },
  { feature: "Llamadas de ajuste", rn: "❌", c5: "❌", plan: "✅ Incluidas" },
  { feature: "WhatsApp directo", rn: "❌", c5: "❌", plan: "✅ 2 semanas" },
  { feature: "Cuándo elegir", rn: "En cualquier momento entre los 0 y los 4 meses", c5: "Tienes una duda clara o un cambio puntual", plan: "Llevas meses sin dormir y necesitas un plan completo" },
];

const C_FAQ = [
  {
    q: "¿Para quién es la Consulta?",
    a: [
      "La consulta está pensada para dos tipos de familias:",
      "1. Familias con bebés mayores de 6 meses que ya duermen de forma autónoma, pero que necesitan ayuda con una situación concreta o un cambio puntual. Por ejemplo: siestas cortas, despertares tempranos, una regresión del sueño, la transición de cuna a cama, la vuelta al trabajo o cualquier otra duda específica relacionada con el sueño de su hijo.",
      "2. Familias con bebés de 0 a 4 meses que quieren comprender mejor el sueño de su bebé desde el principio. Durante la consulta aprenderéis a identificar sus señales de sueño, entender sus necesidades según la edad, establecer rutinas suaves y respetuosas, fomentar hábitos saludables desde el inicio y sentar las bases para una autonomía del sueño progresiva. También os ayudaré a prepararos para los cambios que suelen llegar alrededor de los 4 meses.",
      "Si tu bebé tiene más de 6 meses y todavía necesita ayuda para dormirse o volver a dormirse, probablemente el servicio más adecuado para vosotros sea un Plan de Sueño personalizado.",
    ],
  },
  {
    q: "¿En qué se diferencia de la llamada informativa de 10 €?",
    a: "La llamada informativa son 20 minutos para conocernos y decidir si encajamos: no recibes pautas, solo orientación. La Consulta son 90 minutos con estudio previo de tu caso e informe escrito con pautas concretas para tu bebé.",
  },
  {
    q: "¿En qué se diferencia del Plan de Sueño?",
    a: "El Plan es acompañamiento durante semanas: cambiamos el sueño de raíz conmigo al lado por WhatsApp, con llamadas de ajuste. La Consulta es una intervención puntual: una sesión, un informe, y a aplicar por tu cuenta.",
  },
  {
    q: "¿Cómo es el proceso paso a paso?",
    a: "Primero rellenas un cuestionario para que estudie vuestro caso. Luego tenemos la videollamada de 90 minutos donde te explico las características de sueño de tu bebé y cómo proceder para mejorarlo. Y después te entrego un informe escrito con todo, para que lo releas cuando quieras.",
  },
  {
    q: "¿Cuánto tarda en llegarme el informe?",
    a: "Lo recibes el mismo día, después de la consulta.",
  },
  {
    q: "¿Por dónde se hace la llamada?",
    a: "Por Google Meet. Recibes el enlace por email en cuanto reservas.",
  },
  {
    q: "¿Funciona si mi bebé recién nacido hace colecho o lacta a demanda?",
    a: "Sí. No te pido renunciar al colecho ni al pecho. Las pautas se adaptan a vuestra realidad actual, no al revés.",
  },
  {
    q: "¿Funciona si mi bebé recién nacido hace bed sharing (comparte cama con nosotros)?",
    a: "Sí. La consulta de recién nacido está pensada también para familias que actualmente comparten cama con su bebé, pero desean que aprenda a dormir de forma autónoma en su propio espacio y no saben cómo dar ese paso.",
  },
  {
    q: "¿Y si después de la consulta necesito seguimiento?",
    a: "Sin problema. Si al aplicar las pautas ves que necesitas acompañamiento, puedes añadirlo.",
  },
];

/* ===================================================
   DESKTOP — Consulta
   =================================================== */
const ConsultaDetailDesktop = () => (
  <div className="pp" style={{ width: 1440, background: PP_COLORS.cream, color: PP_COLORS.ink }}>
    <TopNav tone="ink" cta="Reservar mi consulta" />

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

      <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative" }}>
        <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 · Consulta puntual
        </div>

        <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 132, lineHeight: 0.88, letterSpacing: "-0.045em", margin: "22px 0 0", maxWidth: 1200 }}>
          Una duda.<br />
          Una sesión.{" "}
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>
            Un informe.
          </span>
        </h1>

        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 60, marginTop: 36, alignItems: "end" }}>
          <p style={{ fontSize: 22, lineHeight: 1.5, color: PP_COLORS.ink2, fontWeight: 500, maxWidth: 640 }}>
            Una sesión con dos caminos: <strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>sentar las bases del sueño</strong> de tu recién nacido (0–4 meses), o <strong style={{ color: PP_COLORS.ink, fontWeight: 700 }}>resolver una duda concreta</strong> con tu bebé de 5+ meses. Sin abrir un plan entero.
          </p>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {[
              { k: "90", l: "minutos · videollamada" },
              { k: "99 €", l: "+ IVA" },
              { k: "1 informe", l: "escrito personalizado" },
            ].map((s) => (
              <div
                key={s.l}
                style={{
                  background: "#fff",
                  border: "1px solid rgba(31,26,26,0.08)",
                  borderRadius: 18,
                  padding: "16px 22px",
                  minWidth: 140,
                }}
              >
                <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 28, letterSpacing: "-0.03em", lineHeight: 1 }}>
                  {s.k}
                </div>
                <div style={{ fontSize: 12, color: PP_COLORS.ink2, marginTop: 4, letterSpacing: "0.04em" }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: "flex", gap: 14, marginTop: 40, alignItems: "center" }}>
          <Pill bg={PP_COLORS.ink} color="#fff" size="lg" icon={<IconArrowR size={18} stroke="#fff" />}>
            Reservar mi consulta
          </Pill>
          <Pill bg="transparent" color={PP_COLORS.ink} border={`1.5px solid ${PP_COLORS.ink}`} size="lg">
            Antes, una llamada informativa
          </Pill>
        </div>
      </div>
    </section>

    {/* ---------- DOS PERFILES ---------- */}
    <section style={{ padding: "20px 56px 90px", position: "relative" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 16 }}>
            Para dos momentos
          </div>
          <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 56, lineHeight: 0.98, letterSpacing: "-0.04em", margin: 0 }}>
            La misma consulta,{" "}
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>
              dos caminos.
            </span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {C_PROFILES.map((p) => {
            const accent = p.tone === "mint" ? PP_COLORS.mintSoft : PP_COLORS.coralSoft;
            return (
              <div
                key={p.tag}
                className="pp-lift"
                style={{
                  background: "#fff",
                  borderRadius: 32,
                  padding: "40px 40px 36px",
                  border: "1px solid rgba(31,26,26,0.06)",
                  display: "flex",
                  flexDirection: "column",
                }}
              >
                <div style={{ display: "inline-flex", alignSelf: "flex-start", padding: "7px 16px", background: accent, borderRadius: 999, fontSize: 12, fontWeight: 600, letterSpacing: "0.06em", marginBottom: 22 }}>
                  {p.tag}
                </div>
                <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 32, letterSpacing: "-0.03em", lineHeight: 1.1, marginBottom: 14 }}>
                  {p.title}
                </div>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: PP_COLORS.ink2, margin: "0 0 26px" }}>{p.desc}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px 18px" }}>
                  {p.points.map((pt) => (
                    <li key={pt} style={{ display: "flex", gap: 10, fontSize: 14.5, lineHeight: 1.4, color: PP_COLORS.ink }}>
                      <span style={{ flexShrink: 0, width: 20, height: 20, borderRadius: 999, background: accent, display: "grid", placeItems: "center" }}>
                        <IconCheck size={12} stroke={PP_COLORS.ink} />
                      </span>
                      {pt}
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </section>

    {/* ---------- ¿ES PARA TI SI...? ---------- */}
    <section style={{ background: PP_COLORS.paper, padding: "100px 56px", position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start", marginBottom: 60 }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 16 }}>
              ¿Es para ti si...?
            </div>
            <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 68, lineHeight: 0.95, letterSpacing: "-0.04em", margin: 0 }}>
              Una consulta es{" "}
              <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>para ti</span>{" "}
              si...
            </h2>
          </div>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: PP_COLORS.ink2, fontWeight: 500, marginTop: 28 }}>
            Si tu bebé tiene 5+ meses y ya duerme con cierta autonomía, estos son los casos en los que una sola sesión y un informe escrito te resuelven el problema, sin abrir un plan completo.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 22 }}>
          {C_FOR_YOU.map((p, i) => (
            <div
              key={p.title}
              className="pp-lift"
              style={{
                background: "#fff",
                borderRadius: 28,
                padding: "36px 36px 32px",
                border: "1px solid rgba(31,26,26,0.06)",
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: 24,
                alignItems: "start",
              }}
            >
              <div
                style={{
                  width: 56,
                  height: 56,
                  borderRadius: 16,
                  background: i % 2 === 0 ? PP_COLORS.coralSoft : PP_COLORS.mintSoft,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  flexShrink: 0,
                }}
              >
                {p.icon === "moon" && <IconMoon size={24} stroke={PP_COLORS.ink} />}
                {p.icon === "sparkle" && <IconSparkle size={24} stroke={PP_COLORS.ink} />}
                {p.icon === "star" && <IconStar size={24} stroke={PP_COLORS.ink} />}
                {p.icon === "heart" && <IconHeart size={24} stroke={PP_COLORS.ink} />}
              </div>
              <div>
                <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 24, letterSpacing: "-0.025em", lineHeight: 1.15, marginBottom: 10 }}>
                  {p.title}
                </div>
                <div style={{ fontSize: 15, lineHeight: 1.6, color: PP_COLORS.ink2 }}>{p.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ---------- CÓMO FUNCIONA ---------- */}
    <section style={{ padding: "100px 56px", position: "relative", overflow: "hidden" }}>
      <Blob4 fill={PP_COLORS.mintSoft} className="pp-float-2" style={{ position: "absolute", width: 320, height: 320, right: -100, top: 60, opacity: 0.45 }} />

      <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 60 }}>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 16 }}>
            Cómo funciona
          </div>
          <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 68, lineHeight: 0.95, letterSpacing: "-0.04em", margin: 0 }}>
            Tres pasos.{" "}
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>
              Sin sorpresas.
            </span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, position: "relative" }}>
          {C_HOW.map((s, i) => (
            <div
              key={s.n}
              className="pp-lift"
              style={{
                background: i === 1 ? PP_COLORS.ink : "#fff",
                color: i === 1 ? PP_COLORS.cream : PP_COLORS.ink,
                borderRadius: 28,
                padding: "36px 32px 32px",
                border: i === 1 ? "1px solid rgba(0,0,0,0.2)" : "1px solid rgba(31,26,26,0.06)",
                minHeight: 320,
                display: "flex",
                flexDirection: "column",
                gap: 18,
                position: "relative",
              }}
            >
              <div
                style={{
                  fontFamily: "var(--f-serif)",
                  fontStyle: "italic",
                  fontWeight: 400,
                  fontSize: 60,
                  color: i === 1 ? PP_COLORS.coral : PP_COLORS.coral,
                  lineHeight: 1,
                  letterSpacing: "-0.02em",
                }}
              >
                {s.n}
              </div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 26, letterSpacing: "-0.025em", lineHeight: 1.15 }}>
                {s.t}
              </div>
              <div style={{ fontSize: 15, lineHeight: 1.6, color: i === 1 ? "rgba(254,255,228,0.8)" : PP_COLORS.ink2, marginTop: "auto" }}>
                {s.d}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ---------- QUÉ TE LLEVAS ---------- */}
    <section style={{ background: PP_COLORS.coralSoft, padding: "100px 56px", position: "relative", overflow: "hidden" }}>
      <Blob2 fill={PP_COLORS.cream} className="pp-float-3" style={{ position: "absolute", width: 380, height: 380, left: -120, bottom: -120, opacity: 0.5 }} />

      <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative", display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 24 }}>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 16 }}>
            Qué te llevas
          </div>
          <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 68, lineHeight: 0.95, letterSpacing: "-0.04em", margin: 0 }}>
            Cuatro entregables{" "}
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.ink }}>
              concretos.
            </span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: PP_COLORS.ink2, fontWeight: 500, marginTop: 22, maxWidth: 380 }}>
            Mi enfoque es siempre respetuoso, realista y pensado para resultados duraderos, sin dejar de lado el vínculo ni las necesidades de cada familia.
          </p>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {C_DELIVERS.map((d, i) => (
            <div
              key={d.t}
              style={{
                background: "#fff",
                borderRadius: 24,
                padding: "28px 30px",
                border: "1px solid rgba(31,26,26,0.06)",
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: 22,
                alignItems: "start",
              }}
            >
              <div
                style={{
                  fontFamily: "var(--f-serif)",
                  fontStyle: "italic",
                  fontWeight: 400,
                  fontSize: 44,
                  color: PP_COLORS.red,
                  lineHeight: 1,
                  letterSpacing: "-0.02em",
                  minWidth: 56,
                }}
              >
                0{i + 1}
              </div>
              <div>
                <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.02em", marginBottom: 6, lineHeight: 1.15 }}>
                  {d.t}
                </div>
                <div style={{ fontSize: 15, lineHeight: 1.6, color: PP_COLORS.ink2 }}>{d.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ---------- PRECIO ---------- */}
    <section style={{ padding: "120px 56px", position: "relative", overflow: "hidden" }}>
      <Blob1 fill={PP_COLORS.mintSoft} className="pp-float-1" style={{ position: "absolute", width: 380, height: 380, right: -120, top: 40, opacity: 0.45 }} />

      <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 16 }}>
            Precio
          </div>
          <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 56, lineHeight: 1, letterSpacing: "-0.04em", margin: 0 }}>
            Transparencia{" "}
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>total.</span>
          </h2>
        </div>

        <div
          className="pp-lift"
          style={{
            background: "#fff",
            borderRadius: 36,
            padding: "48px 56px",
            border: "1px solid rgba(31,26,26,0.06)",
            boxShadow: "0 40px 100px -40px rgba(31,26,26,0.2)",
            display: "grid",
            gridTemplateColumns: "1fr 1.3fr",
            gap: 56,
            alignItems: "start",
          }}
        >
          {/* Price column */}
          <div style={{ borderRight: "1px solid rgba(31,26,26,0.08)", paddingRight: 40 }}>
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 18, letterSpacing: "-0.01em", marginBottom: 12 }}>
              La Consulta
            </div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 92, letterSpacing: "-0.045em", lineHeight: 0.9 }}>
                99
              </div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 36, letterSpacing: "-0.03em" }}>
                €
              </div>
            </div>
            <div style={{ fontSize: 14, color: PP_COLORS.ink2, marginTop: 8 }}>+ IVA</div>
            <div style={{ marginTop: 28 }}>
              <Pill bg={PP_COLORS.ink} color="#fff" size="lg" icon={<IconArrowR size={18} stroke="#fff" />}>
                Reservar consulta
              </Pill>
            </div>
            <div style={{ marginTop: 18, fontSize: 12, color: PP_COLORS.ink2, lineHeight: 1.5 }}>
              Pago seguro online · Recibes confirmación + enlace de videollamada por email.
            </div>
          </div>

          {/* Includes / NOT includes */}
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
              <span style={{ width: 22, height: 22, borderRadius: 999, background: PP_COLORS.mint, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <IconCheck size={12} stroke={PP_COLORS.ink} />
              </span>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 15, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                Incluye
              </div>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px", display: "flex", flexDirection: "column", gap: 10 }}>
              {C_INCLUDED.map((i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 10, alignItems: "start", fontSize: 16, color: PP_COLORS.ink }}>
                  <span style={{ color: PP_COLORS.red, fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 18, lineHeight: 1.3 }}>✓</span>
                  <span style={{ lineHeight: 1.5 }}>{i}</span>
                </li>
              ))}
            </ul>

            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
              <span style={{ width: 22, height: 22, borderRadius: 999, background: PP_COLORS.coralSoft, display: "inline-flex", alignItems: "center", justifyContent: "center", color: PP_COLORS.ink, fontSize: 12, fontWeight: 700 }}>
                ×
              </span>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 15, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                No incluye
              </div>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {C_NOT_INCLUDED.map((i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 10, alignItems: "start", fontSize: 16, color: PP_COLORS.ink2 }}>
                  <span style={{ color: PP_COLORS.ink2, fontSize: 16 }}>—</span>
                  <span style={{ lineHeight: 1.5 }}>{i}</span>
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 24, padding: "14px 18px", background: PP_COLORS.cream, borderRadius: 14, fontSize: 13.5, lineHeight: 1.55, color: PP_COLORS.ink, border: "1px dashed rgba(31,26,26,0.15)" }}>
              <strong style={{ fontWeight: 700 }}>¿Quieres acompañamiento?</strong>{" "}
              Puedes añadirlo antes o después de la consulta.
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* ---------- COMPARATIVA vs PLAN DE SUEÑO ---------- */}
    <section style={{ background: PP_COLORS.ink, padding: "100px 56px", color: PP_COLORS.cream, position: "relative", overflow: "hidden" }}>
      <Blob3 fill={PP_COLORS.coral} className="pp-float-2" style={{ position: "absolute", width: 320, height: 320, right: -80, top: -80, opacity: 0.35 }} />

      <div style={{ maxWidth: 1200, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.coralSoft, marginBottom: 16 }}>
            Consulta vs Plan de Sueño
          </div>
          <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 56, lineHeight: 1, letterSpacing: "-0.04em", margin: 0 }}>
            Para que elijas{" "}
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>con claridad.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "rgba(254,255,228,0.78)", maxWidth: 580, margin: "20px auto 0" }}>
            No quiero que contrates una Consulta si lo que necesitas es un Plan. Ni al revés. Aquí lo tienes lado a lado.
          </p>
        </div>

        <div
          style={{
            background: "rgba(254,255,228,0.04)",
            borderRadius: 28,
            border: "1px solid rgba(254,255,228,0.12)",
            overflow: "hidden",
          }}
        >
          {/* Header */}
          <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1fr 1fr 1fr", padding: "22px 28px", borderBottom: "1px solid rgba(254,255,228,0.12)", alignItems: "end" }}>
            <div></div>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 19, letterSpacing: "-0.02em", lineHeight: 1.1 }}>Consulta<br />recién nacido</div>
              <div style={{ fontSize: 12, color: PP_COLORS.coralSoft, marginTop: 6 }}>99 € + IVA · 90 min</div>
            </div>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 19, letterSpacing: "-0.02em", lineHeight: 1.1 }}>Consulta<br />5+ meses</div>
              <div style={{ fontSize: 12, color: PP_COLORS.coralSoft, marginTop: 6 }}>99 € + IVA · 90 min</div>
            </div>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 19, letterSpacing: "-0.02em", lineHeight: 1.1 }}>Plan de Sueño</div>
              <div style={{ fontSize: 12, color: PP_COLORS.coralSoft, marginTop: 6 }}>Acompañamiento completo</div>
            </div>
          </div>

          {/* Rows */}
          {C_VS.map((row, i) => (
            <div
              key={row.feature}
              style={{
                display: "grid",
                gridTemplateColumns: "0.85fr 1fr 1fr 1fr",
                padding: "20px 28px",
                borderBottom: i < C_VS.length - 1 ? "1px solid rgba(254,255,228,0.08)" : "none",
                alignItems: "center",
              }}
            >
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 15, color: PP_COLORS.coralSoft }}>{row.feature}</div>
              <div style={{ textAlign: "center", fontSize: 14.5, lineHeight: 1.45, color: "rgba(254,255,228,0.92)" }}>{row.rn}</div>
              <div style={{ textAlign: "center", fontSize: 14.5, lineHeight: 1.45, color: "rgba(254,255,228,0.92)" }}>{row.c5}</div>
              <div style={{ textAlign: "center", fontSize: 14.5, lineHeight: 1.45, color: "rgba(254,255,228,0.92)" }}>{row.plan}</div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ---------- FAQ ---------- */}
    <section style={{ background: PP_COLORS.cream, padding: "100px 56px", position: "relative", overflow: "hidden" }}>
      <Blob2 fill={PP_COLORS.mintSoft} className="pp-float-1" style={{ position: "absolute", width: 360, height: 360, left: -120, top: 60, opacity: 0.4 }} />

      <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 16 }}>
            Preguntas frecuentes
          </div>
          <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 56, lineHeight: 1, letterSpacing: "-0.04em", margin: 0 }}>
            Sobre la Consulta,{" "}
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>en concreto.</span>
          </h2>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {C_FAQ.map((f, i) => (
            <details
              key={f.q}
              open={i === 0}
              style={{
                background: "#fff",
                borderRadius: 22,
                border: "1px solid rgba(31,26,26,0.06)",
                padding: "22px 26px",
              }}
            >
              <summary
                style={{
                  cursor: "pointer",
                  fontFamily: "var(--f-display)",
                  fontWeight: 700,
                  fontSize: 20,
                  letterSpacing: "-0.02em",
                  listStyle: "none",
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  gap: 16,
                }}
              >
                {f.q}
                <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 26, color: PP_COLORS.coral, lineHeight: 1 }}>+</span>
              </summary>
              <div style={{ marginTop: 14, fontSize: 15, lineHeight: 1.6, color: PP_COLORS.ink2 }}>{Array.isArray(f.a) ? f.a.map((p, k) => (<p key={k} style={{ margin: k === 0 ? 0 : "10px 0 0" }}>{p}</p>)) : f.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>

    {/* ---------- CTA FINAL ---------- */}
    <section style={{ background: PP_COLORS.coral, padding: "100px 56px", color: PP_COLORS.ink, textAlign: "center", position: "relative", overflow: "hidden" }}>
      <Blob4 fill={PP_COLORS.coralSoft} className="pp-float-3" style={{ position: "absolute", width: 320, height: 320, right: -100, top: -100, opacity: 0.6 }} />
      <Blob1 fill={PP_COLORS.cream} className="pp-float-2" style={{ position: "absolute", width: 280, height: 280, left: -80, bottom: -80, opacity: 0.4 }} />

      <div style={{ maxWidth: 880, margin: "0 auto", position: "relative" }}>
        <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 22, color: PP_COLORS.ink, marginBottom: 20 }}>
          90 minutos pueden cambiar el ritmo.
        </div>
        <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 76, lineHeight: 0.95, letterSpacing: "-0.04em", margin: "0 0 28px" }}>
          Tu duda{" "}
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>
            resuelta
          </span>{" "}
          en 90 minutos.
        </h2>
        <p style={{ fontSize: 19, lineHeight: 1.5, color: "rgba(31,26,26,0.78)", maxWidth: 600, margin: "0 auto 36px" }}>
          Estudio previo + videollamada + informe escrito. Sin compromiso de seguimiento, con la opción de pasar a Plan después si quieres.
        </p>
        <div style={{ display: "inline-flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
          <Pill bg={PP_COLORS.ink} color="#fff" size="lg" icon={<IconArrowR size={18} stroke="#fff" />}>
            Reservar mi consulta · 99 €
          </Pill>
          <Pill bg="transparent" color={PP_COLORS.ink} border={`1.5px solid ${PP_COLORS.ink}`} size="lg">
            Antes, llamada informativa
          </Pill>
        </div>
      </div>
    </section>

    <FooterDesktop />
  </div>
);

/* ===================================================
   MOBILE — Consulta
   =================================================== */
const ConsultaDetailMobile = () => (
  <div className="pp pp-mobile" style={{ width: 390, background: PP_COLORS.cream, color: PP_COLORS.ink, overflow: "hidden" }}>
    {/* Mobile nav */}
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 22px 20px" }}>
      <a href="/" style={{ textDecoration: "none" }}><BrandMark size="md" /></a>
      <MobileMenu />
    </div>

    {/* HERO */}
    <section style={{ padding: "16px 22px 40px", position: "relative", overflow: "hidden" }}>
      <Blob3 fill={PP_COLORS.mintSoft} className="pp-float-1" style={{ position: "absolute", width: 240, height: 240, right: -80, top: 0, opacity: 0.55 }} />

      <div style={{ position: "relative" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 12px", background: PP_COLORS.ink, color: PP_COLORS.coralSoft, borderRadius: 999, fontSize: 10, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase" }}>
          ✦ Consulta puntual
        </div>

        <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 56, lineHeight: 0.92, letterSpacing: "-0.04em", margin: "18px 0 0" }}>
          Una duda. Una sesión.{" "}
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>
            Un informe.
          </span>
        </h1>

        <p style={{ fontSize: 16, lineHeight: 1.5, color: PP_COLORS.ink2, marginTop: 18, fontWeight: 500 }}>
          Dos caminos: sentar las bases del sueño de tu recién nacido (0–4 meses), o resolver una duda concreta con tu bebé de 5+ meses. Sin abrir un plan entero.
        </p>

        <div style={{ display: "flex", gap: 8, marginTop: 22, flexWrap: "wrap" }}>
          {[
            { k: "90 min", l: "videollamada" },
            { k: "99 €", l: "+ IVA" },
            { k: "1", l: "informe escrito" },
          ].map((s) => (
            <div key={s.l} style={{ background: "#fff", border: "1px solid rgba(31,26,26,0.08)", borderRadius: 14, padding: "10px 14px", flex: "1 1 100px", minWidth: 100 }}>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em", lineHeight: 1 }}>{s.k}</div>
              <div style={{ fontSize: 11, color: PP_COLORS.ink2, marginTop: 4 }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22 }}>
          <button style={{ background: PP_COLORS.ink, color: "#fff", border: "none", padding: "14px 22px", borderRadius: 999, fontSize: 14, fontWeight: 700, fontFamily: "var(--f-body)", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", gap: 8 }}>
            Reservar mi consulta <IconArrowR size={14} stroke="#fff" />
          </button>
        </div>
      </div>
    </section>

    {/* DOS PERFILES */}
    <section style={{ padding: "40px 22px 8px" }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 12 }}>
        Para dos momentos
      </div>
      <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 32, lineHeight: 0.98, letterSpacing: "-0.04em", margin: "0 0 22px" }}>
        La misma consulta,{" "}
        <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>dos caminos.</span>
      </h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {C_PROFILES.map((p) => {
          const accent = p.tone === "mint" ? PP_COLORS.mintSoft : PP_COLORS.coralSoft;
          return (
            <div key={p.tag} style={{ background: "#fff", borderRadius: 20, padding: "22px 22px", border: "1px solid rgba(31,26,26,0.06)" }}>
              <div style={{ display: "inline-flex", padding: "5px 12px", background: accent, borderRadius: 999, fontSize: 10.5, fontWeight: 600, letterSpacing: "0.05em", marginBottom: 14 }}>
                {p.tag}
              </div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 21, letterSpacing: "-0.025em", lineHeight: 1.12, marginBottom: 8 }}>
                {p.title}
              </div>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: PP_COLORS.ink2, margin: "0 0 16px" }}>{p.desc}</p>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {p.points.map((pt) => (
                  <li key={pt} style={{ display: "flex", gap: 9, fontSize: 13, lineHeight: 1.35, color: PP_COLORS.ink }}>
                    <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius: 999, background: accent, display: "grid", placeItems: "center" }}>
                      <IconCheck size={10} stroke={PP_COLORS.ink} />
                    </span>
                    {pt}
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </section>

    {/* ¿ES PARA TI SI...? */}
    <section style={{ background: PP_COLORS.paper, padding: "44px 22px" }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 12 }}>
        ¿Es para ti si...?
      </div>
      <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 36, lineHeight: 0.95, letterSpacing: "-0.04em", margin: "0 0 22px" }}>
        Una consulta es{" "}
        <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>para ti</span>{" "}
        si...
      </h2>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {C_FOR_YOU.map((p, i) => (
          <div key={p.title} style={{ background: "#fff", borderRadius: 18, padding: "18px 20px", border: "1px solid rgba(31,26,26,0.06)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "start" }}>
            <div style={{ width: 38, height: 38, borderRadius: 12, background: i % 2 === 0 ? PP_COLORS.coralSoft : PP_COLORS.mintSoft, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              {p.icon === "moon" && <IconMoon size={18} stroke={PP_COLORS.ink} />}
              {p.icon === "sparkle" && <IconSparkle size={18} stroke={PP_COLORS.ink} />}
              {p.icon === "star" && <IconStar size={18} stroke={PP_COLORS.ink} />}
              {p.icon === "heart" && <IconHeart size={18} stroke={PP_COLORS.ink} />}
            </div>
            <div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 16, letterSpacing: "-0.02em", marginBottom: 4, lineHeight: 1.2 }}>{p.title}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: PP_COLORS.ink2 }}>{p.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* CÓMO FUNCIONA */}
    <section style={{ padding: "44px 22px" }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 12, textAlign: "center" }}>
        Cómo funciona
      </div>
      <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 36, lineHeight: 0.95, letterSpacing: "-0.04em", margin: "0 0 24px", textAlign: "center" }}>
        Tres pasos.{" "}
        <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>Sin sorpresas.</span>
      </h2>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {C_HOW.map((s, i) => (
          <div key={s.n} style={{ background: i === 1 ? PP_COLORS.ink : "#fff", color: i === 1 ? PP_COLORS.cream : PP_COLORS.ink, borderRadius: 18, padding: "20px 22px", border: i === 1 ? "1px solid rgba(0,0,0,0.2)" : "1px solid rgba(31,26,26,0.06)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "start" }}>
            <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 36, color: PP_COLORS.coral, lineHeight: 1, letterSpacing: "-0.02em" }}>
              {s.n}
            </div>
            <div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 17, letterSpacing: "-0.02em", marginBottom: 4, lineHeight: 1.2 }}>{s.t}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: i === 1 ? "rgba(254,255,228,0.85)" : PP_COLORS.ink2 }}>{s.d}</div>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* QUÉ TE LLEVAS */}
    <section style={{ background: PP_COLORS.coralSoft, padding: "44px 22px" }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 12 }}>
        Qué te llevas
      </div>
      <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 36, lineHeight: 0.95, letterSpacing: "-0.04em", margin: "0 0 22px" }}>
        Cuatro entregables{" "}
        <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.ink }}>concretos.</span>
      </h2>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {C_DELIVERS.map((d, i) => (
          <div key={d.t} style={{ background: "#fff", borderRadius: 18, padding: "20px 22px", border: "1px solid rgba(31,26,26,0.06)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "start" }}>
            <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 32, color: PP_COLORS.red, lineHeight: 1, letterSpacing: "-0.02em" }}>
              0{i + 1}
            </div>
            <div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 16, letterSpacing: "-0.02em", marginBottom: 4, lineHeight: 1.2 }}>{d.t}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: PP_COLORS.ink2 }}>{d.d}</div>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* PRECIO */}
    <section style={{ padding: "44px 22px" }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 12, textAlign: "center" }}>
        Precio
      </div>
      <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 36, lineHeight: 1, letterSpacing: "-0.04em", margin: "0 0 24px", textAlign: "center" }}>
        Transparencia <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>total.</span>
      </h2>

      <div style={{ background: "#fff", borderRadius: 24, padding: 24, border: "1px solid rgba(31,26,26,0.06)", boxShadow: "0 20px 60px -30px rgba(31,26,26,0.18)" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
          <div style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 64, letterSpacing: "-0.045em", lineHeight: 0.9 }}>99</div>
          <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 24, letterSpacing: "-0.03em" }}>€</div>
        </div>
        <div style={{ fontSize: 13, color: PP_COLORS.ink2, marginTop: 6 }}>+ IVA</div>

        <div style={{ marginTop: 22, padding: "16px 0", borderTop: "1px solid rgba(31,26,26,0.08)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
            <span style={{ width: 18, height: 18, borderRadius: 999, background: PP_COLORS.mint, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
              <IconCheck size={10} stroke={PP_COLORS.ink} />
            </span>
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 12, letterSpacing: "0.04em", textTransform: "uppercase" }}>Incluye</div>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
            {C_INCLUDED.map((i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 8, fontSize: 13.5, lineHeight: 1.45 }}>
                <span style={{ color: PP_COLORS.red, fontFamily: "var(--f-serif)", fontStyle: "italic" }}>✓</span>
                <span>{i}</span>
              </li>
            ))}
          </ul>
        </div>

        <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid rgba(31,26,26,0.08)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
            <span style={{ width: 18, height: 18, borderRadius: 999, background: PP_COLORS.coralSoft, display: "inline-flex", alignItems: "center", justifyContent: "center", color: PP_COLORS.ink, fontSize: 10, fontWeight: 700 }}>×</span>
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 12, letterSpacing: "0.04em", textTransform: "uppercase" }}>No incluye</div>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
            {C_NOT_INCLUDED.map((i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 8, fontSize: 13.5, lineHeight: 1.45, color: PP_COLORS.ink2 }}>
                <span>—</span>
                <span>{i}</span>
              </li>
            ))}
          </ul>
        </div>

        <button style={{ marginTop: 20, background: PP_COLORS.ink, color: "#fff", border: "none", padding: "14px 22px", borderRadius: 999, fontSize: 14, fontWeight: 700, fontFamily: "var(--f-body)", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", gap: 8 }}>
          Reservar consulta <IconArrowR size={14} stroke="#fff" />
        </button>

        <div style={{ marginTop: 14, padding: "12px 14px", background: PP_COLORS.cream, borderRadius: 12, fontSize: 12, lineHeight: 1.5, border: "1px dashed rgba(31,26,26,0.15)" }}>
          <strong>¿Quieres acompañamiento?</strong> Puedes añadirlo antes o después de la consulta.
        </div>
      </div>
    </section>

    {/* COMPARATIVA */}
    <section style={{ background: PP_COLORS.ink, color: PP_COLORS.cream, padding: "44px 22px" }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.coralSoft, marginBottom: 12, textAlign: "center" }}>
        Consulta vs Plan
      </div>
      <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 32, lineHeight: 1, letterSpacing: "-0.04em", margin: "0 0 24px", textAlign: "center" }}>
        Elige <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.coralSoft }}>con claridad.</span>
      </h2>

      <div style={{ background: "rgba(254,255,228,0.04)", borderRadius: 18, border: "1px solid rgba(254,255,228,0.12)", overflow: "hidden" }}>
        {C_VS.map((row, i) => (
          <div key={row.feature} style={{ padding: "16px 20px", borderBottom: i < C_VS.length - 1 ? "1px solid rgba(254,255,228,0.08)" : "none" }}>
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 12, color: PP_COLORS.coralSoft, letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 8 }}>
              {row.feature}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <div style={{ fontSize: 13, lineHeight: 1.45, padding: "10px 12px", background: "rgba(254,255,228,0.05)", borderRadius: 10 }}>
                <div style={{ fontSize: 10, color: PP_COLORS.coralSoft, marginBottom: 4, fontWeight: 600 }}>CONSULTA · RECIÉN NACIDO</div>
                {row.rn}
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.45, padding: "10px 12px", background: "rgba(254,255,228,0.05)", borderRadius: 10 }}>
                <div style={{ fontSize: 10, color: PP_COLORS.coralSoft, marginBottom: 4, fontWeight: 600 }}>CONSULTA · 5+ MESES</div>
                {row.c5}
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.45, padding: "10px 12px", background: "rgba(254,255,228,0.05)", borderRadius: 10 }}>
                <div style={{ fontSize: 10, color: PP_COLORS.coralSoft, marginBottom: 4, fontWeight: 600 }}>PLAN DE SUEÑO</div>
                {row.plan}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* FAQ */}
    <section style={{ padding: "44px 22px" }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: PP_COLORS.ink2, marginBottom: 12, textAlign: "center" }}>
        Preguntas frecuentes
      </div>
      <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 36, lineHeight: 1, letterSpacing: "-0.04em", margin: "0 0 24px", textAlign: "center" }}>
        Sobre la Consulta,<br />
        <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: PP_COLORS.red }}>en concreto.</span>
      </h2>

      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {C_FAQ.map((f, i) => (
          <details key={f.q} open={i === 0} style={{ background: "#fff", borderRadius: 16, border: "1px solid rgba(31,26,26,0.06)", padding: "16px 18px" }}>
            <summary style={{ cursor: "pointer", fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 15, letterSpacing: "-0.015em", listStyle: "none", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
              {f.q}
              <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 22, color: PP_COLORS.coral, lineHeight: 1 }}>+</span>
            </summary>
            <div style={{ marginTop: 10, fontSize: 13, lineHeight: 1.55, color: PP_COLORS.ink2 }}>{Array.isArray(f.a) ? f.a.map((p, k) => (<p key={k} style={{ margin: k === 0 ? 0 : "8px 0 0" }}>{p}</p>)) : f.a}</div>
          </details>
        ))}
      </div>
    </section>

    {/* FINAL CTA */}
    <section style={{ background: PP_COLORS.coral, padding: "56px 22px", color: PP_COLORS.ink, textAlign: "center", position: "relative", overflow: "hidden" }}>
      <Blob4 fill={PP_COLORS.coralSoft} className="pp-float-3" style={{ position: "absolute", width: 200, height: 200, right: -60, top: -60, opacity: 0.6 }} />

      <div style={{ position: "relative" }}>
        <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 16, color: PP_COLORS.ink, marginBottom: 14 }}>
          90 minutos pueden cambiar el ritmo.
        </div>
        <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 40, lineHeight: 0.95, letterSpacing: "-0.04em", margin: "0 0 18px" }}>
          Tu duda{" "}
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400 }}>resuelta</span>{" "}
          en 90 minutos.
        </h2>
        <p style={{ fontSize: 14, lineHeight: 1.5, color: "rgba(31,26,26,0.78)", margin: "0 0 26px" }}>
          Estudio previo + videollamada + informe escrito. Sin compromiso de seguimiento.
        </p>
        <button style={{ background: PP_COLORS.ink, color: "#fff", border: "none", padding: "16px 26px", borderRadius: 999, fontSize: 15, fontWeight: 700, fontFamily: "var(--f-body)", display: "inline-flex", alignItems: "center", gap: 8 }}>
          Reservar mi consulta · 99 € <IconArrowR size={16} stroke="#fff" />
        </button>
      </div>
    </section>

    {/* Mobile footer */}
    <FooterMobile />
  </div>
);

Object.assign(window, { ConsultaDetailDesktop, ConsultaDetailMobile });

