/* === Editorial pages: /paranormal + /que-es-vino-de-pasto === */

/* ====================================================================== */
/*  PARANORMAL — product page                                              */
/* ====================================================================== */

function Paranormal() {
  return (
    <Page>
      {/* HERO — split: text + real bottle photograph */}
      <section style={{ background: "var(--ink)", color: "var(--bone)", borderBottom: "1px solid #000" }}>
        <div className="container" style={{
          padding: "80px 40px",
          display: "grid",
          gridTemplateColumns: "1.2fr 1fr",
          gap: 80,
          alignItems: "center",
          minHeight: "calc(100vh - 72px)",
        }}>
          <div>
            <div className="case-tag dark" style={{ marginBottom: 36 }}>
              <span className="pip" />
              <span>Caso 001</span>
              <span style={{ width: 1, height: 12, background: "currentColor", opacity: 0.4 }} />
              <span>Levitación de silla · 2024</span>
            </div>
            <h1 style={{ color: "var(--bone)" }}>
              Paranormal<span className="italic" style={{ color: "var(--atlantic-soft)" }}>.</span>
            </h1>
            <p style={{
              fontFamily: "var(--editorial)", fontSize: 22, lineHeight: 1.5,
              marginTop: 40, color: "rgba(242,238,231,0.8)", maxWidth: "40ch",
            }}>
              Palomino Fino de la viña <span className="italic">El Poedo</span>,
              criado ocho meses sobre lías en bota vieja oxidativa. Un blanco
              de pasto seco, salino y largo, con la huella sutil del Jerez
              antiguo. <span className="italic">Embotellado como expediente.</span>
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 48, flexWrap: "wrap" }}>
              <Link to="/comprar-paranormal" className="btn" style={{ background: "var(--bone)", borderColor: "var(--bone)", color: "var(--ink)" }}>
                <span>Comprar con código {SITE.coupon}</span><span className="arrow">→</span>
              </Link>
              <ExternalBuyButton variant="ghost">Tienda Bodegas Barón</ExternalBuyButton>
            </div>
          </div>

          <div style={{ display: "flex", justifyContent: "center", position: "relative" }}>
            <img
              src="assets/bottle-paranormal.jpg"
              alt="Botella de Paranormal — Caso 001 Levitación de silla"
              style={{
                width: "min(440px, 95%)",
                height: "auto",
                display: "block",
                filter: "drop-shadow(0 60px 100px rgba(0,0,0,0.75))",
              }}
            />
          </div>
        </div>
      </section>

      {/* CASE NARRATIVE + label */}
      <section style={{ background: "var(--ink-2)", color: "var(--bone)", borderBottom: "1px solid #000" }}>
        <div className="container" style={{ padding: "120px 40px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: 96, alignItems: "center" }}>
            <div style={{ background: "var(--bone)", padding: 24, boxShadow: "0 50px 90px rgba(0,0,0,0.55)" }}>
              <img src="assets/label-case-001.png" alt="Etiqueta Caso 001 — Levitación de silla" style={{ width: "100%", display: "block" }} />
            </div>
            <div>
              <div className="eyebrow" style={{ color: "rgba(242,238,231,0.55)", marginBottom: 20 }}>
                Expediente · Caso 001
              </div>
              <h2 style={{ color: "var(--bone)" }}>
                Levitación<br/>
                <span className="italic" style={{ color: "var(--atlantic-soft)" }}>de silla.</span>
              </h2>
              <p style={{
                marginTop: 32, color: "rgba(242,238,231,0.78)",
                fontSize: 18, lineHeight: 1.75, maxWidth: "52ch",
              }}>
                Sanlúcar, invierno. Un capataz revisa la criadera del Pago El
                Poedo y anota lo que ve: una silla, suspendida sobre la
                chimenea apagada, dos palmos por encima del suelo. No hay
                viento. No hay cordel. Cuando la aguja del reloj cambia, la
                silla baja.
              </p>
              <p style={{
                marginTop: 16, color: "rgba(242,238,231,0.78)",
                fontSize: 18, lineHeight: 1.75, maxWidth: "52ch",
              }}>
                El dossier termina con una nota a lápiz:{" "}
                <span className="italic">«las botas que están debajo son las
                que mejor saben.»</span> Tres añadas después, las catamos.
                El vino salió así.
              </p>
              <div style={{
                display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
                gap: 24, marginTop: 48, paddingTop: 32,
                borderTop: "0.5px solid rgba(242,238,231,0.18)",
              }}>
                {[
                  ["1.200", "Botellas numeradas"],
                  ["8 m.",  "Sobre lías"],
                  ["12%",   "Volumen alcohólico"],
                ].map(([n, l]) => (
                  <div key={l}>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 32, color: "var(--bone)", letterSpacing: "-0.02em" }}>{n}</div>
                    <div className="eyebrow" style={{ color: "rgba(242,238,231,0.55)", marginTop: 8 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SPEC TABLE */}
      <section style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ padding: "100px 40px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "0.7fr 1.3fr", gap: 80, alignItems: "start" }}>
            <div>
              <div className="section-num">I · Ficha técnica</div>
              <h2>
                Ficha<br/>
                <span className="italic">rápida</span>.
              </h2>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 56 }}>
              <div className="spec-list">
                <div className="row"><div className="k">Tipo</div>           <div className="v">Vino blanco · Vino de pasto</div></div>
                <div className="row"><div className="k">Uva</div>            <div className="v">Palomino Fino · 100%</div></div>
                <div className="row"><div className="k">Alcohol</div>        <div className="v">12% vol.</div></div>
                <div className="row"><div className="k">Crianza</div>        <div className="v">8 meses sobre lías</div></div>
                <div className="row"><div className="k">Barrica</div>        <div className="v">Bota vieja oxidativa</div></div>
              </div>
              <div className="spec-list">
                <div className="row"><div className="k">Origen</div>         <div className="v">Sanlúcar de Barrameda</div></div>
                <div className="row"><div className="k">Viña</div>           <div className="v">El Poedo · Albariza</div></div>
                <div className="row"><div className="k">Servicio</div>       <div className="v">7 – 8 ºC</div></div>
                <div className="row"><div className="k">Edición</div>        <div className="v">1.200 botellas · pendiente conf.</div></div>
                <div className="row"><div className="k">Bodega</div>         <div className="v">Bodegas Barón</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ELABORACIÓN — 4 tiempos, big photo backdrop on vineyard */}
      <section style={{ borderBottom: "var(--hairline)" }}>
        <div className="photo tint" style={{
          height: "min(60vh, 540px)", minHeight: 380,
          backgroundImage: "url('assets/vineyard-poedo.jpg')",
        }}>
          <div className="caption">El Poedo · vendimia manual · Palomino Fino sobre albariza</div>
        </div>
        <div className="container" style={{ padding: "100px 40px" }}>
          <div className="section-num">II · Elaboración</div>
          <h2 style={{ marginBottom: 64 }}>
            Cuatro<br/>
            <span className="italic">tiempos</span>.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
            {[
              ["Viña",        "El Poedo · Sanlúcar",         "Palomino Fino sobre albariza, cerca del Atlántico. Vendimia manual a finales de agosto, baja graduación natural."],
              ["Bodega",      "Prensado suave",              "Mosto flor sin maceraciones. Fermentación en depósito, sin levaduras añadidas si la añada lo permite."],
              ["Crianza",     "Bota vieja oxidativa",        "Ocho meses sobre lías finas en botas viejas que ya no se destinan a fino. Sin velo, exposición lenta al oxígeno."],
              ["Embotellado", "Sin clarificar",              "Filtrado mínimo. 1.200 botellas numeradas — dato sujeto a confirmación final."],
            ].map(([k, t, d], i) => (
              <div key={k} style={{ padding: "0 28px", borderLeft: i === 0 ? "none" : "var(--hairline)" }}>
                <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 56, color: "var(--atlantic-deep)", lineHeight: 0.9, letterSpacing: "-0.03em" }}>
                  0{i + 1}
                </div>
                <h3 style={{ marginTop: 24, marginBottom: 6, fontSize: 26 }}>{t}</h3>
                <div className="eyebrow" style={{ marginBottom: 16 }}>{k}</div>
                <p style={{ fontSize: 14.5, color: "var(--engrave)", lineHeight: 1.7 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CATA + MARIDAJE */}
      <section className="section-pad" style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96 }}>
          <div>
            <div className="section-num">III · Notas de cata</div>
            <h2 style={{ marginBottom: 40 }}>
              <span className="italic">Cata</span>.
            </h2>
            <div className="spec-list" style={{ borderTop: "0.5px solid var(--ink)" }}>
              {[
                ["Vista",     "Dorado pajizo con destellos viejos. Reflejos ámbar tras la copa."],
                ["Nariz",     "Compota de manzana, pera licorosa, panadería, miga tostada, salina."],
                ["Boca",      "Seco, ligero, vertical. Final oxidativo limpio, largo, ligeramente almendrado."],
                ["Recuerdo",  "Más cerca del Atlántico que del Mediterráneo. Un blanco viejo, joven."],
              ].map(([k, v]) => (
                <div key={k} className="row" style={{ gridTemplateColumns: "110px 1fr" }}>
                  <div className="k">{k}</div>
                  <div className="v" style={{ fontSize: 17 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="section-num">IV · Servicio</div>
            <h2 style={{ marginBottom: 40 }}>
              <span className="italic">Mesa</span>.
            </h2>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
              {["Mariscos atlánticos","Foie de pato","Ibéricos de bellota","Queso semicurado","Queso curado","Pescado azul","Arroces secos","Cocina mediterránea"].map((t, i) => (
                <div key={t} style={{
                  padding: "18px 0",
                  borderTop: "var(--hairline)",
                  borderLeft: i % 2 === 1 ? "var(--hairline)" : "none",
                  paddingLeft: i % 2 === 1 ? 28 : 0,
                  fontFamily: "var(--serif)", fontSize: 21,
                }}>
                  {t}
                </div>
              ))}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 40 }}>
              <div style={{ border: "0.5px solid var(--ink)", padding: 24 }}>
                <div className="eyebrow">Temperatura</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 42, marginTop: 10, letterSpacing: "-0.02em" }}>7 – 8 ºC</div>
                <p style={{ fontSize: 13, color: "var(--engrave)", margin: 0, marginTop: 8 }}>Copa de blanco, no de generoso. Frío pero no helado.</p>
              </div>
              <div style={{ border: "0.5px solid var(--ink)", padding: 24 }}>
                <div className="eyebrow">Guarda</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 42, marginTop: 10, letterSpacing: "-0.02em" }}>3 – 6 <span className="italic">años</span></div>
                <p style={{ fontSize: 13, color: "var(--engrave)", margin: 0, marginTop: 8 }}>Estable en botella. Mejora en vertical, lejos de la luz.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section style={{ background: "var(--ink)", color: "var(--bone)" }}>
        <div className="container" style={{ padding: "140px 40px", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }}>
          <h2 style={{ color: "var(--bone)" }}>
            <span className="italic" style={{ color: "var(--atlantic-soft)" }}>Un vino de pasto</span><br/>
            para entrar en Jerez<br/>
            por una puerta <span className="italic">inesperada</span>.
          </h2>
          <div>
            <CouponBox tone="dark" />
            <div style={{ marginTop: 28, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <ExternalBuyButton>Comprar en Bodegas Barón</ExternalBuyButton>
              <Link to="/comprar-paranormal" className="btn btn-ghost" style={{ borderColor: "rgba(242,238,231,0.45)", color: "var(--bone)" }}>
                <span>Cómo comprar</span>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

/* ====================================================================== */
/*  QUE ES VINO DE PASTO                                                   */
/* ====================================================================== */

function QueEs() {
  const sections = [
    { id: "definicion", n: "I",   t: "Definición" },
    { id: "origen",     n: "II",  t: "Origen histórico" },
    { id: "marco",      n: "III", t: "Jerez, Sanlúcar y Palomino" },
    { id: "diferencia", n: "IV",  t: "Diferencia con los generosos" },
    { id: "regreso",    n: "V",   t: "Por qué han vuelto" },
    { id: "servicio",   n: "VI",  t: "Servicio y maridaje" },
  ];
  return (
    <Page>
      <section style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ paddingTop: 88, paddingBottom: 64 }}>
          <div className="eyebrow">Guía editorial · Categoría</div>
          <h1 style={{ marginTop: 28, maxWidth: "12ch" }}>
            Qué es un<br/>
            <span className="italic-atlantic">vino de pasto.</span>
          </h1>
          <p style={{
            fontFamily: "var(--editorial)",
            fontSize: 22, lineHeight: 1.5, marginTop: 44,
            maxWidth: "48ch", color: "var(--ink-soft)",
          }}>
            El blanco atlántico de Jerez. Seco, ligero, sin encabezar.
            La categoría que el Marco había dejado de embotellar y hoy
            recupera un puñado de bodegas.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "var(--hairline)", marginTop: 64 }}>
            {[
              ["LECTURA",     "9 minutos"],
              ["AUTORÍA",     "Redacción VdP"],
              ["ACTUALIZADO", "Mayo 2026"],
              ["CATEGORÍA",   "Fundamentos"],
            ].map(([k, v], i) => (
              <div key={k} style={{ padding: "22px 24px", borderLeft: i === 0 ? "none" : "var(--hairline)" }}>
                <div className="eyebrow">{k}</div>
                <div style={{ marginTop: 8, fontFamily: "var(--serif)", fontSize: 19 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Wide vineyard photo as topic image */}
        <div className="photo tint" style={{
          height: "min(56vh, 520px)", minHeight: 360,
          backgroundImage: "url('assets/grapes-palomino.jpg')",
        }}>
          <div className="caption">Palomino Fino · racimo recogido · vendimia 2024</div>
        </div>
      </section>

      <section className="section-pad" style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 80, alignItems: "start" }}>
          <aside style={{ position: "sticky", top: 96 }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Índice</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
              {sections.map(s => (
                <li key={s.id}>
                  <a href={"#" + s.id} style={{ display: "grid", gridTemplateColumns: "26px 1fr", gap: 10, color: "var(--ink-soft)", padding: "4px 0" }}>
                    <span className="kicker">{s.n}.</span>
                    <span style={{ fontFamily: "var(--serif)", fontSize: 18 }}>{s.t}</span>
                  </a>
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 40, padding: 24, border: "0.5px solid var(--ink)" }}>
              <div className="eyebrow">El vino</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 26, marginTop: 8, marginBottom: 16 }}>Paranormal</div>
              <Link to="/paranormal" className="btn-link" style={{ fontSize: 12.5 }}>
                <span>Ver ficha</span><span className="arrow">→</span>
              </Link>
            </div>
          </aside>

          <article style={{ maxWidth: 720 }}>
            <section id="definicion" style={{ scrollMarginTop: 96 }}>
              <div className="section-num">I · Definición</div>
              <h2 style={{ marginBottom: 28 }}>Un blanco seco,<br/><span className="italic">sin encabezar</span>.</h2>
              <p className="dropcap" style={{ fontSize: 18.5, lineHeight: 1.75 }}>
                En el Marco de Jerez se llamaba <strong>vino de pasto</strong> al
                blanco de mesa que se bebía a diario: seco, ligero, sin alcohol
                añadido. Lo contrario, en estructura, de un fino o una manzanilla.
                No es un vino generoso. Es lo que el Palomino hace cuando no se
                encabeza y se deja beber como blanco.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.75 }}>
                Hoy «vino de pasto» no es una D.O. ni una categoría legal
                estricta: es una recuperación cultural. Bodegas familiares como
                Barón vuelven a embotellar lo que durante décadas se reservaba
                para el consumo local o se diluía dentro del soleraje.
              </p>
            </section>

            <hr className="rule" style={{ margin: "64px 0" }}/>

            <section id="origen" style={{ scrollMarginTop: 96 }}>
              <div className="section-num">II · Origen</div>
              <h2 style={{ marginBottom: 28 }}>Antes del generoso,<br/><span className="italic">el blanco de viña</span>.</h2>
              <p style={{ fontSize: 17, lineHeight: 1.75 }}>
                Durante siglos, en los pagos de Jerez y Sanlúcar el vino blanco
                se bebía joven, sin encabezar y sin crianza biológica. Cuando el
                negocio del Jerez se globalizó en el siglo XIX, el fino y el
                oloroso ocuparon casi toda la producción comercial. Los blancos
                de pasto se replegaron a la mesa familiar.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.75 }}>
                En los apuntes del Marco aparecen como «vinos de pasto», «vinos
                blancos» o «vinos de añada». La diferencia, ya entonces, era
                clara: no llevan alcohol vínico añadido, no entran a soleraje,
                se beben como un vino tranquilo más.
              </p>
            </section>

            <hr className="rule" style={{ margin: "64px 0" }}/>

            <section id="marco" style={{ scrollMarginTop: 96 }}>
              <div className="section-num">III · Marco</div>
              <h2 style={{ marginBottom: 28 }}>Sanlúcar, Palomino,<br/><span className="italic">albariza</span>.</h2>
              <div className="two-col">
                <p>
                  El vino de pasto contemporáneo se hace, casi siempre, con Palomino
                  Fino, la misma uva del fino y la manzanilla. Lo que cambia es el
                  destino: en lugar de encabezar y entrar a velo de flor, se vinifica
                  y se cría como blanco.
                </p>
                <p>
                  La tierra blanca de albariza —rica en carbonato, capaz de retener
                  agua bajo costra— da vinos salinos, verticales y con cierta
                  ligereza. El Atlántico hace el resto: humedad, brisas, baja
                  graduación, frescura natural.
                </p>
                <p>
                  Sanlúcar es, por proximidad al océano, el lugar donde estos vinos
                  se vuelven especialmente magros y salinos. Jerez aporta cuerpo;
                  Sanlúcar, sal. Paranormal viene de Sanlúcar.
                </p>
              </div>
            </section>

            <hr className="rule" style={{ margin: "64px 0" }}/>

            <section id="diferencia" style={{ scrollMarginTop: 96 }}>
              <div className="section-num">IV · Diferencia</div>
              <h2 style={{ marginBottom: 28 }}>Lo que <span className="italic">no es</span>.</h2>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "0.5px solid var(--ink)" }}>
                {[
                  ["Fino",           "Encabezado a ~15%. Crianza biológica bajo velo de flor. Seco, punzante, almendrado. No es vino de pasto."],
                  ["Manzanilla",     "Versión sanluqueña del fino. Más salina, más fina. También bajo velo. No es vino de pasto."],
                  ["Amontillado",    "Fino que ha perdido el velo. Crianza mixta biológica-oxidativa. Tampoco es vino de pasto."],
                  ["Vino de pasto",  "Blanco tranquilo, sin encabezar. Puede tener crianza oxidativa (como Paranormal) pero no encabezado, no velo, no soleraje."],
                ].map(([k, v], i) => (
                  <div key={k} style={{
                    padding: 32,
                    borderLeft: i % 2 === 1 ? "0.5px solid var(--ink)" : "none",
                    borderTop:  i >= 2 ? "0.5px solid var(--ink)" : "none",
                  }}>
                    <h3 style={{ marginBottom: 12, fontSize: 26 }}>{k}</h3>
                    <p style={{ fontSize: 15, margin: 0, color: "var(--engrave)" }}>{v}</p>
                  </div>
                ))}
              </div>
            </section>

            <hr className="rule" style={{ margin: "64px 0" }}/>

            <section id="regreso" style={{ scrollMarginTop: 96 }}>
              <div className="section-num">V · Regreso</div>
              <h2 style={{ marginBottom: 28 }}>Por qué <span className="italic">han vuelto</span>.</h2>
              <p style={{ fontSize: 17, lineHeight: 1.75 }}>
                Tres motivos: la sed contemporánea por vinos blancos atlánticos
                ligeros, la revalorización del Palomino fuera del soleraje, y un
                cambio editorial dentro del propio Marco. Productores familiares,
                sumilleres y prensa especializada han vuelto a poner sobre la
                mesa lo que estaba en la viña.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.75 }}>
                Paranormal entra en esa conversación con una decisión específica:
                añadir crianza oxidativa en botas viejas. No para imitar a un
                generoso, sino para sumarle profundidad a un blanco de pasto sin
                renunciar a la categoría.
              </p>
            </section>

            <hr className="rule" style={{ margin: "64px 0" }}/>

            <section id="servicio" style={{ scrollMarginTop: 96 }}>
              <div className="section-num">VI · Servicio</div>
              <h2 style={{ marginBottom: 28 }}>Cómo se sirve y se <span className="italic">marida</span>.</h2>
              <p style={{ fontSize: 17, lineHeight: 1.75 }}>
                Como un blanco gastronómico: frío pero no helado (7-9 ºC), en
                copa de vino blanco, no de generoso. Marida mariscos, pescado
                azul, ibéricos, foie de pato y quesos curados. Aguanta cocina
                mediterránea completa sin desfondarse.
              </p>

              <div style={{
                marginTop: 48,
                background: "var(--bone-2)",
                border: "0.5px solid var(--rule)",
                padding: 32,
              }}>
                <div className="eyebrow" style={{ marginBottom: 24 }}>Las dos etiquetas · Paranormal</div>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "end" }}>
                  <a
                    href={SITE.buyUrlBlanco}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{
                      display: "block",
                      background: "var(--bone)",
                      border: "0.5px solid var(--rule)",
                      padding: 16,
                      aspectRatio: "3 / 4",
                      transition: "transform .4s ease, border-color .25s ease",
                    }}
                    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.borderColor = "var(--ink)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.borderColor = "var(--rule)"; }}
                  >
                    <img src="assets/paranormal-blanco.webp"
                         alt="Paranormal Vino Blanco de Pasto · Caso 003 · Bodegas Barón"
                         style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
                  </a>
                  <a
                    href={SITE.buyUrlOxidativo}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{
                      display: "block",
                      background: "var(--bone)",
                      border: "0.5px solid var(--rule)",
                      padding: 16,
                      aspectRatio: "3 / 4",
                      transition: "transform .4s ease, border-color .25s ease",
                    }}
                    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.borderColor = "var(--ink)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.borderColor = "var(--rule)"; }}
                  >
                    <img src="assets/paranormal-oxidativo.webp"
                         alt="Paranormal Vino Blanco Oxidativo 2023 · Caso 001 · Magnum · Bodegas Barón"
                         style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
                  </a>
                </div>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 18 }}>
                  <div>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 22, marginBottom: 4 }}>Paranormal <span className="italic">Blanco</span></div>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--engrave)" }}>
                      Caso 003 · 750 ml · 12,5% vol.
                    </div>
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 22, marginBottom: 4 }}>Paranormal <span className="italic">Oxidativo 2023</span></div>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--engrave)" }}>
                      Caso 001 · Magnum 1,5 L · 14% vol.
                    </div>
                  </div>
                </div>

                <h3 style={{ marginTop: 32, marginBottom: 12, fontSize: 26 }}>El blanco atlántico de Jerez.</h3>
                <p style={{ fontSize: 16, margin: 0, color: "var(--ink-soft)", maxWidth: "none", lineHeight: 1.55 }}>
                  Paranormal traduce la categoría a dos botellas concretas: el <strong>Blanco</strong>, directo y salino, y el <strong>Oxidativo en magnum</strong>, donde el tiempo ha hecho su trabajo. Si quieres empezar por uno, empieza por el primero.
                </p>

                <div style={{ marginTop: 24, display: "flex", gap: 14, flexWrap: "wrap" }}>
                  <Link to="/comprar-paranormal" className="btn">
                    <span>Comprar las dos</span><span className="arrow">→</span>
                  </Link>
                  <Link to="/paranormal" className="btn btn-ghost">
                    <span>Ver ficha del vino</span>
                  </Link>
                </div>
              </div>
            </section>
          </article>
        </div>
      </section>
    </Page>
  );
}

Object.assign(window, { Paranormal, QueEs });
