@crtobiasdelsud/portal-ui 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Componentes compartidos entre el portal (Next) y el CMS (Vite) — widgets, views, providers para adapters y article pool.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/ArticleDetailView/ArticleDetailView.jsx

@@ -0,0 +1,39 @@
+'use client'
+
+import styles from './ArticleDetailView.module.scss'
+import Standard from './Standard.jsx'
+import Full from './Full.jsx'
+
+/**
+ * ArticleDetailView — réplica portable de las screens `ArticleDetail` /
+ * `ArticleDetailFull` del portal (editor-template-front).
+ *
+ * Pensada para previews fuera del portal (ej. el CMS): es una *vista pura*,
+ * recibe el artículo ya resuelto y no hace data-fetching ni depende del
+ * registry de widgets. Reproduce el layout y los estilos de las screens, y
+ * elige la variante igual que el portal:
+ *
+ *   article.tipoContenido === 'notaEspecial'  →  Full   (ArticleDetailFull)
+ *   resto                                     →  Standard (ArticleDetail)
+ *
+ * El root recrea el `<main>` del portal con `container-type: inline-size`
+ * para que las container-queries de los componentes portal-ui respondan al
+ * ancho real del contenedor — imprescindible al renderizar en un iframe.
+ *
+ * @param {object} props
+ * @param {object} props.article - Artículo resuelto. Shape esperado:
+ *   { id, titulo, volanta, copete, imagen: { url, epigrafe }, imagenEpigrafe,
+ *     focalPoint, categoria: { nombre, slug }, autor, publicarComoOrg,
+ *     fechaPublicacion, tipoContenido, cuerpo (payload EditorJS) }
+ */
+export default function ArticleDetailView({ article }) {
+  if (!article) return null
+
+  const isFull = article.tipoContenido === 'notaEspecial'
+
+  return (
+    <main className={styles.root}>
+      {isFull ? <Full article={article} /> : <Standard article={article} />}
+    </main>
+  )
+}

package/src/components/ArticleDetailView/ArticleDetailView.module.scss

@@ -0,0 +1,18 @@
+// Root del preview — recrea el `<main>` del portal: es el container de las
+// container-queries (`container-type: inline-size`) de los componentes
+// portal-ui, para que el responsive responda al ancho real del contenedor
+// (clave cuando se renderiza dentro de un iframe).
+//
+// NOTA: a diferencia del `<main>` real, NO se usa `min-height: 100dvh` —
+// dentro de un iframe auto-dimensionado generaría un loop de altura.
+.root {
+  overflow-x: clip;
+  display: flex;
+  flex-direction: column;
+  container-type: inline-size;
+  background: #fff;
+
+  // Fija la altura del hero "full" a un valor estable: dentro de un iframe
+  // auto-dimensionado, el `90vh/75vh` por defecto generaría un loop de altura.
+  --ahf-min-h: 620px;
+}

package/src/components/ArticleDetailView/Full.jsx

@@ -0,0 +1,46 @@
+'use client'
+
+import ArticleHeroFull from '../ArticleHeroFull/ArticleHeroFull.jsx'
+import AuthorBlock from '../AuthorBlock/AuthorBlock.jsx'
+import ShareBlock from '../ShareBlock/ShareBlock.jsx'
+import EditorOutputFull from '../EditorOutputFull/EditorOutputFull.jsx'
+import styles from './Full.module.scss'
+
+/**
+ * Réplica de la screen `ArticleDetailFull` (camino non-AMP) del portal —
+ * la "nota especial": hero a sangre + cuerpo a una columna.
+ *
+ * Se omiten las piezas de infraestructura de la app (ArticleTracker y la
+ * zona post-body de widgets desde el registry).
+ */
+export default function Full({ article }) {
+  const imagenEpigrafe = article.imagen?.epigrafe ?? article.imagenEpigrafe ?? null
+
+  return (
+    <>
+      <ArticleHeroFull
+        titulo={article.titulo}
+        copete={article.copete}
+        imagen={article.imagen?.url ?? null}
+        imagenEpigrafe={imagenEpigrafe}
+        focalPoint={article.focalPoint}
+        categoria={article.categoria ?? null}
+      />
+
+      <div className={styles.wrap}>
+        <div className={styles.author}>
+          <AuthorBlock
+            autor={article.autor}
+            publicarComoOrg={article.publicarComoOrg}
+            fechaPublicacion={article.fechaPublicacion}
+          />
+          <ShareBlock />
+        </div>
+
+        <div className={styles.body}>
+          <EditorOutputFull data={article.cuerpo} />
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/ArticleDetailView/Full.module.scss

@@ -0,0 +1,48 @@
+// Réplica de ArticleDetailFull.module.scss del portal (editor-template-front).
+@use "../../styles/index" as *;
+
+.wrap {
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem 1rem;
+  box-sizing: border-box;
+
+  @include respond(tablet) {
+    max-width: 66.66667%;
+    min-width: 66.66667%;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0;
+  }
+
+  @include respond(laptop) {
+    max-width: 1250px;
+  }
+}
+
+.author {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  flex-direction: column;
+  margin: 1rem 0 1.5rem;
+  width: 100%;
+
+  @include respond(tablet) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.heroImage {
+  width: 100%;
+  margin-bottom: 2rem;
+}
+
+.body {
+  width: 100%;
+}
+
+.postBody {
+  margin-top: 2rem;
+}

package/src/components/ArticleDetailView/Standard.jsx

@@ -0,0 +1,116 @@
+'use client'
+
+import PageWrapper from '../UI/PageWrapper/PageWrapper.jsx'
+import AspectImage from '../UI/AspectImage/AspectImage.jsx'
+import EditorOutput from '../EditorOutput/EditorOutput.jsx'
+import Breadcrumb from '../Breadcrumb/Breadcrumb.jsx'
+import ArticleHero from '../ArticleHero/ArticleHero.jsx'
+import AuthorBlock from '../AuthorBlock/AuthorBlock.jsx'
+import ShareBlock from '../ShareBlock/ShareBlock.jsx'
+import SpeechButton from '../SpeechButton/SpeechButton.jsx'
+import ArticleSidebar from '../ArticleSidebar/ArticleSidebar.jsx'
+import styles from './Standard.module.scss'
+
+/**
+ * Réplica de la screen `ArticleDetail` (camino non-AMP) del portal.
+ *
+ * Reproduce el mismo árbol JSX y los mismos estilos. Se omiten las piezas
+ * que dependen de infraestructura de la app (ArticleTracker, zonas de
+ * widgets pre/post/in-body desde el registry, LoQueSeLee con data-fetching):
+ * el preview muestra el artículo en sí, no la config de layout del sitio.
+ */
+export default function Standard({ article }) {
+  // Epígrafe de la imagen principal — normalizado en `imagen.epigrafe` y/o
+  // `imagenEpigrafe` a nivel raíz; puede venir null.
+  const imagenEpigrafe = article.imagen?.epigrafe ?? article.imagenEpigrafe ?? null
+
+  const breadcrumbItems = [
+    { label: 'Inicio', href: '/' },
+    { label: article.categoria?.nombre ?? '', href: `/${article.categoria?.slug ?? ''}` },
+  ]
+
+  return (
+    <PageWrapper>
+      <div className={styles.pageWrap}>
+        <div className={styles.articleWrap}>
+
+          {/* Row 2 — breadcrumb, hero, autor, speechbutton */}
+          <div className={styles.articleHeader}>
+            <Breadcrumb items={breadcrumbItems} />
+            <ArticleHero
+              titulo={article.titulo}
+              volanta={article.volanta}
+              copete={article.copete}
+              imagen={article.imagen?.url ?? null}
+              imagenEpigrafe={imagenEpigrafe}
+              focalPoint={article.focalPoint}
+              hideImageOnDesktop
+              extras={
+                <div className={styles.heroExtras}>
+                  <AuthorBlock
+                    autor={article.autor}
+                    publicarComoOrg={article.publicarComoOrg}
+                    fechaPublicacion={article.fechaPublicacion}
+                  />
+                  <ShareBlock />
+                </div>
+              }
+            />
+            {/* mobile-only: autor + share debajo del hero */}
+            <div className={styles.authorContainer}>
+              <AuthorBlock
+                autor={article.autor}
+                publicarComoOrg={article.publicarComoOrg}
+                fechaPublicacion={article.fechaPublicacion}
+              />
+              <ShareBlock />
+            </div>
+            {/* mobile-only: speechbutton debajo del hero */}
+            <div className={styles.speechMobile}>
+              <SpeechButton
+                titulo={article.titulo}
+                copete={article.copete}
+                cuerpo={article.cuerpo}
+                imagen={article.imagen?.url ?? null}
+              />
+            </div>
+          </div>
+
+          {/* Row 3 — body (2fr) + sidebar sticky (1fr) */}
+          <div className={styles.contentRow}>
+            <div className={styles.body}>
+              {article.imagen?.url && (
+                <figure className={styles.bodyImage}>
+                  <AspectImage
+                    src={article.imagen.url}
+                    alt={article.titulo ?? ''}
+                    aspect="16:9"
+                    focalPoint={article.focalPoint}
+                  />
+                  {imagenEpigrafe && (
+                    <figcaption className={styles.bodyImageCaption}>{imagenEpigrafe}</figcaption>
+                  )}
+                </figure>
+              )}
+              <div className={styles.speechDesktop}>
+                <SpeechButton
+                  titulo={article.titulo}
+                  copete={article.copete}
+                  cuerpo={article.cuerpo}
+                  imagen={article.imagen?.url ?? null}
+                />
+              </div>
+              {article.cuerpo?.blocks?.length > 0 && (
+                <EditorOutput data={article.cuerpo} />
+              )}
+            </div>
+            <div className={styles.sidebarPlacement}>
+              <ArticleSidebar hasWidgets={false} />
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </PageWrapper>
+  )
+}

package/src/components/ArticleDetailView/Standard.module.scss

@@ -0,0 +1,179 @@
+// Réplica de ArticleDetail.module.scss del portal (editor-template-front).
+@use "../../styles/index" as *;
+
+// ── Tokens ────────────────────────────────────────────────────────────────────
+$page-max:   1376px;
+$sidebar-w:  322px;
+$col-gap:    30px;
+$page-pad:   16px;
+
+// ── Contenedor de ancho máximo ────────────────────────────────────────────────
+.pageWrap {
+  width: 100%;
+  max-width: $page-max;
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  @include respond(tablet) {
+    max-width: 720px;
+  }
+
+  @include respond(laptop) {
+    max-width: 960px;
+  }
+
+  @include respond(desktop) {
+    max-width: $page-max;
+  }
+}
+
+// ── Grid de 4 columnas iguales (igual que Home) ───────────────────────────────
+.articleWrap {
+  @include respond(laptop) {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    column-gap: $col-gap;
+    row-gap: 0;
+    align-items: start;
+  }
+
+  @include respond(desktop) {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    column-gap: $col-gap;
+    row-gap: 0;
+    align-items: start;
+  }
+}
+
+// Breadcrumb + Hero + Author + SpeechButton — cols 1-3, row 2
+.articleHeader {
+  min-width: 0;
+  padding-top: 1.5rem;
+
+  @include respond(laptop) {
+    grid-column: 1 / 3;
+    grid-row: 2;
+  }
+
+  @include respond(desktop) {
+    grid-column: 1 / 4;
+    grid-row: 2;
+  }
+}
+
+// Row 3 — grid item que agrupa body + sidebar.
+.contentRow {
+  min-width: 0;
+
+  @include respond(laptop) {
+    grid-column: 1 / 4;
+    grid-row: 3;
+    display: flex;
+    align-items: stretch;
+    gap: $col-gap;
+  }
+
+  @include respond(desktop) {
+    grid-column: 1 / 4;
+    grid-row: 3;
+    display: flex;
+    align-items: stretch;
+    gap: $col-gap;
+  }
+}
+
+// Body — hijo flex del contentRow (2/3 del ancho)
+.body {
+  min-width: 0;
+  flex: 2 1 0;
+  align-self: flex-start;
+}
+
+// Sidebar — ocupa el alto del body para que los sticky internos funcionen
+.sidebarPlacement {
+  display: none;
+  container-type: inline-size;
+
+  @include respond(laptop) {
+    display: block;
+    flex: 1 0 0;
+    min-width: 0;
+  }
+
+  @include respond(desktop) {
+    display: block;
+    flex: 1 0 0;
+    min-width: 0;
+  }
+}
+
+// Widgets dentro del body — separación vertical entre widgets consecutivos
+.inBodyWidget {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+// ── Imagen del artículo en el body (tablet+) ─────────────────────────────────
+.bodyImage {
+  display: none;
+  position: relative;
+  margin: 0;
+
+  @include respond(tablet) {
+    display: block;
+    margin: 0 0 1.5rem;
+  }
+}
+
+// ── Epígrafe — franja negra sobre el borde inferior de la imagen ─────────────
+.bodyImageCaption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  margin: 0;
+  padding: 10px 14px;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: #fff;
+  background: #000;
+}
+
+// ── SpeechButton mobile (en articleHeader) / desktop (en body tras imagen) ───
+.speechMobile {
+  @include respond(laptop) {
+    display: none;
+  }
+}
+
+.speechDesktop {
+  display: none;
+
+  @include respond(laptop) {
+    display: block;
+    margin-bottom: 1rem;
+  }
+}
+
+// ── Author + share (mobile) ───────────────────────────────────────────────────
+.authorContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.5rem;
+
+  @include respond(laptop) {
+    display: none;
+  }
+}
+
+// Extras dentro del hero — visible solo en desktop (el ArticleHero lo oculta en mobile)
+.heroExtras {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.75rem;
+}

package/src/components/ArticleHero/ArticleHero.jsx

@@ -14,7 +14,7 @@ import V0Desktop from './variants/V0Desktop/V0Desktop'
 
 const VARIANTS = { '0': V0, '1': V1, '2': V2, '3': V3, '4': V4, '5': V5 }
 
-export default function ArticleHero({ titulo, volanta, copete, imagen, focalPoint, isAmp = false, extras = null, hideImageOnDesktop = false }) {
+export default function ArticleHero({ titulo, volanta, copete, imagen, imagenEpigrafe, focalPoint, isAmp = false, extras = null, hideImageOnDesktop = false }) {
   const theme   = useTheme()
   const variant = String(theme.articleHero ?? 1)
 
@@ -27,10 +27,21 @@ export default function ArticleHero({ titulo, volanta, copete, imagen, focalPoin
 
   const ExtrasEl = (!isAmp && extras) ? <div className={styles.extras}>{extras}</div> : null
 
+  // Epígrafe: overlay sutil sobre el borde inferior de la imagen del hero.
+  // Solo non-amp (en amp no se aplican los CSS modules).
+  const EpigrafeEl = (!isAmp && imagen && imagenEpigrafe)
+    ? <p className={styles.epigrafe}>{imagenEpigrafe}</p>
+    : null
+
   const ImgEl = imagen
     ? isAmp
       ? <img src={imagen} alt={titulo ?? ''} className="article-hero__img" />
-      : <AspectImage src={imagen} alt={titulo ?? ''} aspect="16:9" fill={true} focalPoint={focalPoint} />
+      : (
+        <>
+          <AspectImage src={imagen} alt={titulo ?? ''} aspect="16:9" fill={true} focalPoint={focalPoint} />
+          {EpigrafeEl}
+        </>
+      )
     : null
 
   const imgWrapClass = isAmp

package/src/components/ArticleHero/ArticleHero.module.scss

@@ -87,3 +87,19 @@
     max-height: none;
   }
 }
+
+// ── Epígrafe de la imagen — franja negra sobre el borde inferior de la foto ──
+.epigrafe {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  margin: 0;
+  padding: 10px 14px;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 0.8rem;
+  line-height: 1.35;
+  color: #fff;
+  background: #000;
+}

package/src/components/ArticleHeroFull/ArticleHeroFull.jsx

@@ -3,7 +3,7 @@
 import styles from './ArticleHeroFull.module.scss'
 import { useSiteConfig } from '../../context/SiteConfigContext.jsx'
 
-export default function ArticleHeroFull({ titulo, copete, imagen, focalPoint, categoria }) {
+export default function ArticleHeroFull({ titulo, copete, imagen, imagenEpigrafe, focalPoint, categoria }) {
   const { config } = useSiteConfig()
   const siteName = config?.slots?.header?.settings?.siteName ?? ''
 
@@ -22,6 +22,9 @@ export default function ArticleHeroFull({ titulo, copete, imagen, focalPoint, ca
         />
       )}
       <div className={styles.gradient} />
+      {imagen && imagenEpigrafe && (
+        <p className={styles.epigrafe}>{imagenEpigrafe}</p>
+      )}
       <div className={styles.content}>
         {categoria && (
           <div className={styles.breadcrumb}>

package/src/components/ArticleHeroFull/ArticleHeroFull.module.scss

@@ -3,17 +3,20 @@
 .hero {
   position: relative;
   width: 100%;
-  min-height: 90vh;
+  // Altura via custom property: el portal usa el default en `vh`; un preview
+  // dentro de un iframe puede fijar `--ahf-min-h` a un valor estable y evitar
+  // el loop de altura (vh → alto del iframe → scrollHeight → vh…).
+  min-height: var(--ahf-min-h, 90vh);
   overflow: hidden;
   display: flex;
   align-items: flex-end;
 
   @include respond(tablet) {
-    min-height: 75vh;
+    min-height: var(--ahf-min-h, 75vh);
   }
 
   @include respond(desktop) {
-    min-height: 75vh;
+    min-height: var(--ahf-min-h, 75vh);
   }
 }
 
@@ -113,4 +116,24 @@
     line-height: 1.3em;
     padding-top: 1.875rem;
   }
+}
+
+// ── Epígrafe de la imagen — crédito sutil en el borde inferior del hero ──────
+.epigrafe {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  margin: 0;
+  padding: 0 5% 0.5rem;
+  font-family: var(--font-inter), Inter, sans-serif;
+  font-size: 0.78rem;
+  line-height: 1.35;
+  text-align: right;
+  color: rgb(255 255 255 / 0.75);
+
+  @include respond(tablet) {
+    padding: 0 10% 0.6rem;
+  }
 }

package/src/components/AuthorBlock/AuthorBlock.jsx

@@ -15,7 +15,7 @@ function formatDate(fechaPublicacion, useLongDate) {
   const fecha = date.toLocaleDateString('es-AR', useLongDate
     ? { day: '2-digit', month: 'long',    year: 'numeric' }
     : { day: '2-digit', month: '2-digit', year: 'numeric' })
-  const hora  = date.toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit' })
+  const hora  = date.toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' })
   return `${fecha} - ${hora}`
 }
 

package/src/components/EditorOutput/EditorOutput.jsx

@@ -14,6 +14,8 @@ const ampCls = {
   listOl:           "eo-list-ol",
   quote:            "eo-quote",
   image:            "eo-image",
+  imageWrap:        "eo-image-wrap",
+  epigrafe:         "eo-image-epigrafe",
   delimiter:        "eo-delimiter",
   code:             "eo-code",
   pullquote:        "eo-pullquote",
@@ -114,23 +116,25 @@ function Block({ block, cls, isAmp }) {
       )
 
     case "image": {
-      const src    = block.data.url || block.data.file?.url
-      const alt    = block.data.altText || block.data.caption || ""
-      const credit = block.data.authorCredits || block.data.caption
+      const src      = block.data.url || block.data.file?.url
+      const alt      = block.data.altText || block.data.caption || ""
+      const epigrafe = block.data.epigrafe
       return (
         <figure className={cls.image}>
-          {isAmp
-            ? <img src={src} alt={alt} />
-            : <Image
-                src={src}
-                alt={alt}
-                width={0}
-                height={0}
-                sizes="(max-width: 768px) 100vw, 800px"
-                style={{ width: "100%", height: "auto" }}
-              />
-          }
-          {credit && <figcaption>{credit}</figcaption>}
+          <div className={cls.imageWrap}>
+            {isAmp
+              ? <img src={src} alt={alt} />
+              : <Image
+                  src={src}
+                  alt={alt}
+                  width={0}
+                  height={0}
+                  sizes="(max-width: 768px) 100vw, 800px"
+                  style={{ width: "100%", height: "auto" }}
+                />
+            }
+            {epigrafe && <p className={cls.epigrafe}>{epigrafe}</p>}
+          </div>
         </figure>
       )
     }
@@ -225,22 +229,27 @@ function Block({ block, cls, isAmp }) {
       return <div className={cls.raw} dangerouslySetInnerHTML={{ __html: block.data.html }} suppressHydrationWarning />
 
     case "pullquote": {
-      const { variant, text } = block.data
+      const { variant, text, color, align } = block.data
       const hasClose = variant !== "2"
+      // color === '' → el CSS cae a var(--primary-color, #af0437).
+      // align ausente (bloques viejos) → default 'center'. `data-align` mueve
+      // todo el bloque (comillas + texto); `--pq-text-align` alinea el texto.
+      const pqStyle = { "--pq-text-align": align || "center" }
+      if (color) pqStyle["--eo-pullquote-color"] = color
       if (isAmp) {
         return (
-          <div className={cls.pullquote}>
+          <div className={cls.pullquote} style={pqStyle} data-align={align || "center"}>
             <span className={cls.pullquoteOpen}>&ldquo;</span>
-            <p>{text}</p>
+            <p dangerouslySetInnerHTML={{ __html: text }} suppressHydrationWarning />
             {hasClose && <span className={cls.pullquoteClose}>&rdquo;</span>}
           </div>
         )
       }
       const pullCls = [cls.pullquote, cls[`pullquoteV${variant}`]].filter(Boolean).join(" ")
       return (
-        <div className={pullCls}>
+        <div className={pullCls} style={pqStyle} data-align={align || "center"}>
           <span className={cls.pullquoteOpen}>&ldquo;</span>
-          <p>{text}</p>
+          <p dangerouslySetInnerHTML={{ __html: text }} suppressHydrationWarning />
           {hasClose && <span className={cls.pullquoteClose}>&rdquo;</span>}
         </div>
       )

package/src/components/EditorOutput/EditorOutput.module.scss

@@ -108,13 +108,28 @@
     height: auto;
     display: block;
   }
+}
 
-  figcaption {
-    font-size: 0.8rem;
-    opacity: 0.6;
-    margin-top: 0.4rem;
-    text-align: center;
-  }
+// Wrapper relativo para anclar el epígrafe sobre la imagen (igual que el hero).
+.imageWrap {
+  position: relative;
+  display: block;
+}
+
+// Epígrafe — franja negra sobre el borde inferior de la foto (estilo ArticleHero).
+.epigrafe {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  margin: 0;
+  padding: 10px 14px;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 0.8rem;
+  line-height: 1.35;
+  color: #fff;
+  background: #000;
 }
 
 .embed {
@@ -209,6 +224,71 @@
   line-height: 1.6;
 }
 
+/* ── Pullquote / Cita destacada ──
+   El color usa `--eo-pullquote-color` (parámetro elegido en el CMS);
+   si no se setea, cae al color del portal: var(--primary-color, #af0437). */
+.pullquote {
+  --pq-color: var(--eo-pullquote-color, var(--primary-color, #af0437));
+  /* Comillas a los lados del texto (no arriba/abajo): fila flex con la
+     comilla de apertura a la izquierda y la de cierre a la derecha. */
+  display: flex;
+  align-items: stretch;
+  gap: 0.75rem;
+  max-width: 500px;
+  margin: 2.25rem auto;
+  padding: 0.25rem 0;
+}
+
+/* La alineación mueve TODO el bloque (comillas + texto) a izq/centro/der. */
+.pullquote[data-align="left"] { margin-inline: 0 auto; }
+.pullquote[data-align="right"] { margin-inline: auto 0; }
+.pullquote[data-align="center"] { margin-inline: auto; }
+
+.pullquoteOpen,
+.pullquoteClose {
+  flex: 0 0 auto;
+  font-family: Georgia, "Times New Roman", serif;
+  font-weight: 700;
+  font-size: 6.5rem;
+  line-height: 1;
+  color: var(--pq-color);
+}
+
+/* Apertura pegada arriba; cierre pegado abajo — flanqueando el texto.
+   line-height 0.1 en el cierre colapsa la caja de línea: así el glifo (que
+   se dibuja arriba de su caja) cae hasta el fondo del bloque. */
+.pullquoteOpen { align-self: flex-start; }
+.pullquoteClose { align-self: flex-end; line-height: 0.1; }
+
+.pullquote p {
+  flex: 1 1 auto;
+  /* Permite que el flex item se encoja: sin esto una palabra larga sin
+     espacios revienta el max-width del bloque. */
+  min-width: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  margin: 0;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--pq-color);
+  text-align: var(--pq-text-align, center);
+}
+
+/* Variante 3 — comillas en color, texto en negro. */
+.pullquoteV3 p { color: #111; }
+
+/* Variante 2 — fondo oscuro, texto blanco, sólo comilla de apertura. */
+.pullquoteV2 {
+  background: #333;
+  border-radius: 6px;
+  padding: 1.5rem 1.75rem 2rem;
+
+  p { color: #fff; }
+  .pullquoteClose { display: none; }
+}
+
 .table {
   width: 100%;
   border-collapse: collapse;

package/src/components/EditorOutputFull/EditorOutputFull.jsx

@@ -14,6 +14,8 @@ const ampCls = {
   listOl:           "eo-list-ol",
   quote:            "eo-quote",
   image:            "eo-image",
+  imageWrap:        "eo-image-wrap",
+  epigrafe:         "eo-image-epigrafe",
   delimiter:        "eo-delimiter",
   code:             "eo-code",
   pullquote:        "eo-pullquote",
@@ -114,23 +116,25 @@ function Block({ block, cls, isAmp }) {
       )
 
     case "image": {
-      const src    = block.data.url || block.data.file?.url
-      const alt    = block.data.altText || block.data.caption || ""
-      const credit = block.data.authorCredits || block.data.caption
+      const src      = block.data.url || block.data.file?.url
+      const alt      = block.data.altText || block.data.caption || ""
+      const epigrafe = block.data.epigrafe
       return (
         <figure className={cls.image}>
-          {isAmp
-            ? <img src={src} alt={alt} />
-            : <Image
-                src={src}
-                alt={alt}
-                width={0}
-                height={0}
-                sizes="(max-width: 768px) 100vw, 800px"
-                style={{ width: "100%", height: "auto" }}
-              />
-          }
-          {credit && <figcaption>{credit}</figcaption>}
+          <div className={cls.imageWrap}>
+            {isAmp
+              ? <img src={src} alt={alt} />
+              : <Image
+                  src={src}
+                  alt={alt}
+                  width={0}
+                  height={0}
+                  sizes="(max-width: 768px) 100vw, 800px"
+                  style={{ width: "100%", height: "auto" }}
+                />
+            }
+            {epigrafe && <p className={cls.epigrafe}>{epigrafe}</p>}
+          </div>
         </figure>
       )
     }
@@ -225,22 +229,27 @@ function Block({ block, cls, isAmp }) {
       return <div className={cls.raw} dangerouslySetInnerHTML={{ __html: block.data.html }} />
 
     case "pullquote": {
-      const { variant, text } = block.data
+      const { variant, text, color, align } = block.data
       const hasClose = variant !== "2"
+      // color === '' → el CSS cae a var(--primary-color, #af0437).
+      // align ausente (bloques viejos) → default 'center'. `data-align` mueve
+      // todo el bloque (comillas + texto); `--pq-text-align` alinea el texto.
+      const pqStyle = { "--pq-text-align": align || "center" }
+      if (color) pqStyle["--eo-pullquote-color"] = color
       if (isAmp) {
         return (
-          <div className={cls.pullquote}>
+          <div className={cls.pullquote} style={pqStyle} data-align={align || "center"}>
             <span className={cls.pullquoteOpen}>&ldquo;</span>
-            <p>{text}</p>
+            <p dangerouslySetInnerHTML={{ __html: text }} />
             {hasClose && <span className={cls.pullquoteClose}>&rdquo;</span>}
           </div>
         )
       }
       const pullCls = [cls.pullquote, cls[`pullquoteV${variant}`]].filter(Boolean).join(" ")
       return (
-        <div className={pullCls}>
+        <div className={pullCls} style={pqStyle} data-align={align || "center"}>
           <span className={cls.pullquoteOpen}>&ldquo;</span>
-          <p>{text}</p>
+          <p dangerouslySetInnerHTML={{ __html: text }} />
           {hasClose && <span className={cls.pullquoteClose}>&rdquo;</span>}
         </div>
       )

package/src/components/EditorOutputFull/EditorOutputFull.module.scss

@@ -115,13 +115,28 @@
     height: auto;
     display: block;
   }
+}
 
-  figcaption {
-    font-size: 0.8rem;
-    opacity: 0.6;
-    margin-top: 0.4rem;
-    text-align: center;
-  }
+// Wrapper relativo para anclar el epígrafe sobre la imagen (igual que el hero).
+.imageWrap {
+  position: relative;
+  display: block;
+}
+
+// Epígrafe — franja negra sobre el borde inferior de la foto (estilo ArticleHero).
+.epigrafe {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  margin: 0;
+  padding: 10px 14px;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 0.8rem;
+  line-height: 1.35;
+  color: #fff;
+  background: #000;
 }
 
 .embed {
@@ -216,6 +231,71 @@
   line-height: 1.6;
 }
 
+/* ── Pullquote / Cita destacada ──
+   El color usa `--eo-pullquote-color` (parámetro elegido en el CMS);
+   si no se setea, cae al color del portal: var(--primary-color, #af0437). */
+.pullquote {
+  --pq-color: var(--eo-pullquote-color, var(--primary-color, #af0437));
+  /* Comillas a los lados del texto (no arriba/abajo): fila flex con la
+     comilla de apertura a la izquierda y la de cierre a la derecha. */
+  display: flex;
+  align-items: stretch;
+  gap: 0.75rem;
+  max-width: 500px;
+  margin: 2.25rem auto;
+  padding: 0.25rem 0;
+}
+
+/* La alineación mueve TODO el bloque (comillas + texto) a izq/centro/der. */
+.pullquote[data-align="left"] { margin-inline: 0 auto; }
+.pullquote[data-align="right"] { margin-inline: auto 0; }
+.pullquote[data-align="center"] { margin-inline: auto; }
+
+.pullquoteOpen,
+.pullquoteClose {
+  flex: 0 0 auto;
+  font-family: Georgia, "Times New Roman", serif;
+  font-weight: 700;
+  font-size: 6.5rem;
+  line-height: 1;
+  color: var(--pq-color);
+}
+
+/* Apertura pegada arriba; cierre pegado abajo — flanqueando el texto.
+   line-height 0.1 en el cierre colapsa la caja de línea: así el glifo (que
+   se dibuja arriba de su caja) cae hasta el fondo del bloque. */
+.pullquoteOpen { align-self: flex-start; }
+.pullquoteClose { align-self: flex-end; line-height: 0.1; }
+
+.pullquote p {
+  flex: 1 1 auto;
+  /* Permite que el flex item se encoja: sin esto una palabra larga sin
+     espacios revienta el max-width del bloque. */
+  min-width: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  margin: 0;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--pq-color);
+  text-align: var(--pq-text-align, center);
+}
+
+/* Variante 3 — comillas en color, texto en negro. */
+.pullquoteV3 p { color: #111; }
+
+/* Variante 2 — fondo oscuro, texto blanco, sólo comilla de apertura. */
+.pullquoteV2 {
+  background: #333;
+  border-radius: 6px;
+  padding: 1.5rem 1.75rem 2rem;
+
+  p { color: #fff; }
+  .pullquoteClose { display: none; }
+}
+
 .table {
   width: 100%;
   border-collapse: collapse;

package/src/index.js

@@ -57,6 +57,9 @@ export { default as ArticleHero }     from './components/ArticleHero/ArticleHero
 export { default as ArticleHeroFull } from './components/ArticleHeroFull/ArticleHeroFull.jsx'
 export { default as ArticleSidebar }  from './components/ArticleSidebar/ArticleSidebar.jsx'
 
+// === Screens / vistas de detalle de artículo (réplica portable para previews) ===
+export { default as ArticleDetailView } from './components/ArticleDetailView/ArticleDetailView.jsx'
+
 // === Headers ===
 export { default as HeaderSimpleSwitch }         from './components/Headers/HeaderSimple/HeaderSimpleSwitch/HeaderSimpleSwitch.jsx'
 export { default as HeaderSimpleDesktop }        from './components/Headers/HeaderSimple/HeaderSimpleDesktop/HeaderSimpleDesktop.jsx'