@crtobiasdelsud/portal-ui 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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

@@ -225,22 +225,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'. Sólo afecta al
+      // texto; las comillas quedan fijas (apertura izq, cierre der).
+      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}>
             <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}>
           <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

@@ -209,6 +209,53 @@
   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));
+  margin: 2.25rem 0;
+  padding: 0.25rem 0;
+}
+
+.pullquoteOpen,
+.pullquoteClose {
+  display: block;
+  font-family: Georgia, "Times New Roman", serif;
+  font-weight: 700;
+  font-size: 3.75rem;
+  line-height: 0.1;
+  color: var(--pq-color);
+}
+
+/* Comillas fijas: apertura a la izquierda, cierre a la derecha. */
+.pullquoteOpen { margin-bottom: 1.5rem; text-align: left; }
+.pullquoteClose { margin-top: 1.25rem; text-align: right; }
+
+.pullquote p {
+  margin: 0;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--pq-color);
+  /* La alineación elegida en el CMS sólo afecta al texto. */
+  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

@@ -225,22 +225,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'. Sólo afecta al
+      // texto; las comillas quedan fijas (apertura izq, cierre der).
+      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}>
             <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}>
           <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

@@ -216,6 +216,53 @@
   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));
+  margin: 2.25rem 0;
+  padding: 0.25rem 0;
+}
+
+.pullquoteOpen,
+.pullquoteClose {
+  display: block;
+  font-family: Georgia, "Times New Roman", serif;
+  font-weight: 700;
+  font-size: 3.75rem;
+  line-height: 0.1;
+  color: var(--pq-color);
+}
+
+/* Comillas fijas: apertura a la izquierda, cierre a la derecha. */
+.pullquoteOpen { margin-bottom: 1.5rem; text-align: left; }
+.pullquoteClose { margin-top: 1.25rem; text-align: right; }
+
+.pullquote p {
+  margin: 0;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--pq-color);
+  /* La alineación elegida en el CMS sólo afecta al texto. */
+  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/Footers/FooterSimple/FooterSimple.jsx

@@ -33,13 +33,19 @@ export default function FooterSimple({ isAmp = false }) {
   } = s
   const social = { ...headerSocial, ...(s.social ?? {}) }
 
-  const safeTextColor = footerTextColor ?? theme.textColor ?? '#ffffff'
+  // Colores propios del footer (footer.settings) con fallback al theme global
+  const footerBg     = s.backgroundColor ?? theme.secondary ?? '#0D1333'
+  const footerText   = s.textColor ?? footerTextColor ?? theme.textColor ?? '#ffffff'
+  const footerAccent = s.primaryColor ?? theme.primary ?? footerBg
+  const footerFont   = s.fontFamily
+
   const inlineStyle = {
-    color: safeTextColor,
-    '--primary-color':        theme.primary,
-    '--secondary-color':      theme.secondary,
-    '--text-color':           safeTextColor,
-    '--social-hover-filter':  theme.primary ? hexToCssFilter(theme.primary) : 'none',
+    color: footerText,
+    ...(footerFont && { fontFamily: footerFont }),
+    '--primary-color':        footerAccent,
+    '--secondary-color':      footerBg,
+    '--text-color':           footerText,
+    '--social-hover-filter':  footerAccent ? hexToCssFilter(footerAccent) : 'none',
   }
 
   const logoEl = (logoUrl || iconUrl) && (
@@ -140,8 +146,8 @@ export default function FooterSimple({ isAmp = false }) {
   }
 
   return (
-    <div className={styles.fullcontainer}>
-      <footer className={styles.container} style={inlineStyle}>
+    <div className={styles.fullcontainer} style={inlineStyle}>
+      <footer className={styles.container}>
 
       {/* ── MAIN: izq (logo+slogan+legal) | der (nav + social+links) ── */}
       <div className={styles.mainRow}>

package/src/components/Footers/FooterSimple/FooterSimple.module.scss

@@ -14,13 +14,13 @@
   display: flex;
   align-items: center;
   padding-left: 15px;
-  
-  color: white;
+
+  color: var(--text-color, #fff);
     font-family: var(--font-inter, Inter, sans-serif);
 }
 
 .fullcontainer{
-  color: white;
+  color: var(--text-color, #fff);
 
 }
 
@@ -34,7 +34,7 @@
   box-sizing: border-box;
   margin-top: auto;
   min-height: 268px;
-  color: white;
+  color: var(--text-color, #fff);
 }
 
 // ── MAIN ROW (2 columns) ──────────────────────────────────────────────────────
@@ -91,7 +91,7 @@
   width: 100%;
 
   @media (min-width: $tablet) {
-    border-top: 1px solid white;
+    border-top: 1px solid var(--text-color, #fff);
     padding-top: 20px;
     flex-direction: row;
     align-items: center;
@@ -155,10 +155,9 @@
   text-transform: uppercase;
   color: inherit;
   opacity: 1;
-  transition: opacity 0.15s;
-  
+  transition: color 0.15s;
 
-  &:hover { opacity: 1; }
+  &:hover { color: var(--primary-color, #B1043F); }
 }
 
 // ── Divider ───────────────────────────────────────────────────────────────────
@@ -209,7 +208,7 @@
   }
 
   a {
-    color: white;
+    color: var(--text-color, #fff);
   }
 }
 
@@ -246,11 +245,11 @@
   color: inherit;
   text-decoration: none;
     opacity: 1;
-  transition: opacity 0.15s;
+  transition: color 0.15s;
   white-space: nowrap;
 
   &:hover {
-    opacity: 1;
+    color: var(--primary-color, #B1043F);
     text-decoration: underline;
   }
 }

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'