@crtobiasdelsud/portal-ui 1.0.32 → 1.1.2

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # Changelog
 
+## [Unreleased] — 2026-06-04
+
+### Added
+
+Soporte de "Publicar como organización" en los bylines de tarjetas, heros y
+carruseles. Hasta ahora solo `AuthorBlock` (detalle) contemplaba `publicarComoOrg`;
+el resto mostraba el byline desde `autor.nombre` y quedaba **vacío** en las notas
+publicadas como organización (el backend manda `autor: null`).
+
+- **`utils/authorDisplay.js`** (nuevo): helper `resolveAuthorDisplay()` (puro) +
+  hook `useAuthorDisplay(autor, publicarComoOrg)`. Centraliza la lógica de
+  `AuthorBlock`: con organización (o sin autor) devuelve el nombre del sitio como
+  `displayName` y su logo como `avatarSrc`, sin enlazar a `/autor/`. Lee
+  `siteName`/`iconUrl` de `SiteConfigContext` (con default seguro si no hay provider).
+- **Bylines consistentes**: `Cards/ArticleCard`, `Cabezal/CardCabezal/variants/`
+  `{Default, Compact, Featured, FeaturedDuo, FeaturedHorizontal, Medium, Carrusel}`,
+  `Cabezal/variants/LoQueSeLee` y `Hero/variants/{V1, V2, V3}` ahora muestran
+  "Por {nombre del sitio}" (y el logo como avatar donde corresponde) en notas de
+  organización, en vez de no mostrar autor. `Ranked`/`Amp` (sin byline) no cambian.
+- **Sin cambios en la API pública**: los componentes ya recibían el `article`
+  (con `publicarComoOrg`); no cambian props ni shape. `AuthorBlock` no se tocó.
+
+### Fixed
+
+Correcciones de marcado semántico, accesibilidad y validez de enlaces (HTML
+correcto para indexación e intérpretes de pantalla). Sin cambios en la API
+pública (mismos exports, mismos nombres y shape de props); sólo cambia el
+markup/atributos que renderizan los componentes. Las clases de estilo se
+preservan en todos los casos.
+
+- **Headings del Hero**: `Hero/variants/V1` renderizaba el título como `<p>` y
+  `Hero/variants/V2` como `<span>`; ahora ambos usan `<h2>` (igual que V3),
+  conservando las clases `headline`/`headlineWrap`.
+- **`alt` de imágenes de contenido**: en `EditorOutput` y `EditorOutputFull`, las
+  imágenes del cuerpo caen al epígrafe como texto alternativo antes de quedar con
+  `alt=""`, evitando dejar imágenes informativas sin descripción.
+- **Enlace de `ArticleCard`**: se eliminó el atributo `rel="canonical"` del `<a>`
+  de navegación (inválido en anclas; el canonical sólo corresponde al `<link>` del
+  head).
+- **Rutas de enlaces**: `ArticleCard`, `Feed/variants/V1`, `HeaderSimpleAmp` y
+  `MenuDrawer` ahora normalizan el `href` a `/${slug}` (con guardia a `#` cuando no
+  hay slug), alineándose con el patrón del resto de la librería.
+- **"Lee además" como encabezado**: en `EditorOutput` y `EditorOutputFull` el
+  título de relacionados pasó de `<p>` a `<h3>`.
+- **Enlace "VER MÁS" descriptivo**: las 15 variantes de `Cabezal` agregan
+  `aria-label="Ver más de <título de sección>"` al enlace, manteniendo el texto
+  visible "VER MÁS".
+- **`alt` del clima**: los iconos horarios de `ClimaView` usaban la URL/código del
+  icono como `alt`; ahora usan la condición meteorológica (o `""` si no hay).
+- **AMP `CardCabezal`**: el título se envuelve en `<h3>` (manteniendo el `<a>` y su
+  clase) y el copete se renderiza como texto plano vía `stripHtml` en lugar de
+  inyectar HTML.
+
+### Performance
+
+Optimización de LCP del destacado de portada. Sin cambios en la API pública
+(mismos exports y shape de props); sólo se pasan props que `AspectImage` ya
+acepta.
+
+- **Imágenes responsive en `Hero`**: `Hero/variants/V1`, `V2` y `V3` ahora pasan
+  `variants={article.imagen?.variants ?? null}` y `sizes="(max-width: 768px) 100vw, 66vw"`
+  a `AspectImage`, de modo que el destacado de portada sirve `srcset` y el
+  navegador baja la resolución justa según el viewport (antes bajaba siempre la
+  variante `large`).
+- **Prioridad de carga condicionada**: las tres variantes usan
+  `priority={important}` para emitir `fetchpriority=high` sólo en el destacado
+  principal. `V1` no tenía prioridad (ahora la recibe cuando es `important`); `V2`
+  y `V3` emitían `priority` fijo (siempre `true`), lo que producía múltiples
+  `fetchpriority=high` en una misma página con varios Hero; ahora queda acotado al
+  destacado principal.
+
 ## [Unreleased] — 2026-05-18
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.0.32",
+  "version": "1.1.2",
   "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",
@@ -16,6 +16,7 @@
     "CHANGELOG.md"
   ],
   "scripts": {
+    "test": "node --test src/**/*.test.js",
     "release:patch": "npm version patch && npm publish --access public",
     "release:minor": "npm version minor && npm publish --access public",
     "release:major": "npm version major && npm publish --access public"

package/src/components/ArticleHero/variants/V0/V0.jsx

@@ -1,5 +1,6 @@
 import shared from '../../ArticleHero.module.scss'
 import s from './V0.module.scss'
+import { sanitizeInlineHtml } from '../../../../utils/sanitizeHtml.js'
 
 export default function V0({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
   const VolantaEl = volanta
@@ -9,7 +10,7 @@ export default function V0({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl,
   const CopeteEl = copete
     ? <div
         className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}
-        dangerouslySetInnerHTML={{ __html: copete }}
+        dangerouslySetInnerHTML={{ __html: sanitizeInlineHtml(copete) }}
       />
     : null
 

package/src/components/ArticleHero/variants/V0Desktop/V0Desktop.jsx

@@ -1,5 +1,6 @@
 import shared from '../../ArticleHero.module.scss'
 import s from './V0Desktop.module.scss'
+import { sanitizeInlineHtml } from '../../../../utils/sanitizeHtml.js'
 
 export default function V0Desktop({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
   const VolantaEl = volanta
@@ -9,7 +10,7 @@ export default function V0Desktop({ isAmp, inlineStyle, titulo, volanta, copete,
   const CopeteEl = copete
     ? <div
         className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}
-        dangerouslySetInnerHTML={{ __html: copete }}
+        dangerouslySetInnerHTML={{ __html: sanitizeInlineHtml(copete) }}
       />
     : null
 

package/src/components/ArticleHero/variants/V0Tablet/V0Tablet.jsx

@@ -1,5 +1,6 @@
 import shared from '../../ArticleHero.module.scss'
 import s from './V0Tablet.module.scss'
+import { sanitizeInlineHtml } from '../../../../utils/sanitizeHtml.js'
 
 export default function V0Tablet({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
   const VolantaEl = volanta
@@ -9,7 +10,7 @@ export default function V0Tablet({ isAmp, inlineStyle, titulo, volanta, copete,
   const CopeteEl = copete
     ? <div
         className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}
-        dangerouslySetInnerHTML={{ __html: copete }}
+        dangerouslySetInnerHTML={{ __html: sanitizeInlineHtml(copete) }}
       />
     : null
 

package/src/components/ArticleHero/variants/V1/V1.jsx

@@ -1,5 +1,6 @@
 import shared from '../../ArticleHero.module.scss'
 import s from './V1.module.scss'
+import { sanitizeInlineHtml } from '../../../../utils/sanitizeHtml.js'
 
 export default function V1({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
   const VolantaEl = volanta
@@ -9,7 +10,7 @@ export default function V1({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl,
   const CopeteEl = copete
     ? <div
         className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}
-        dangerouslySetInnerHTML={{ __html: copete }}
+        dangerouslySetInnerHTML={{ __html: sanitizeInlineHtml(copete) }}
       />
     : null
 

package/src/components/ArticleHeroFull/ArticleHeroFull.jsx

@@ -4,6 +4,7 @@ import styles from './ArticleHeroFull.module.scss'
 import { useSiteConfig } from '../../context/SiteConfigContext.jsx'
 import Carousel from '../Carousel/Carousel.jsx'
 import AspectImage from '../UI/AspectImage/AspectImage.jsx'
+import { sanitizeInlineHtml } from '../../utils/sanitizeHtml.js'
 
 export default function ArticleHeroFull({ titulo, copete, imagen, imagenes, imagenEpigrafe, focalPoint, categoria }) {
   const { config } = useSiteConfig()
@@ -65,7 +66,7 @@ export default function ArticleHeroFull({ titulo, copete, imagen, imagenes, imag
           </div>
         )}
         <h1 className={styles.titulo}>{titulo}</h1>
-        {copete && <div className={styles.copete} dangerouslySetInnerHTML={{ __html: copete }} />}
+        {copete && <div className={styles.copete} dangerouslySetInnerHTML={{ __html: sanitizeInlineHtml(copete) }} />}
       </div>
     </div>
   )

package/src/components/Blocks/BlockColumns/BlockColumns.module.scss

@@ -9,7 +9,7 @@
   display: grid;
   gap: 20px;
 
-  @media (min-width: 1000px) {
+  @include respond(desktop) {
     gap: 30px;
   }
 }
@@ -20,7 +20,7 @@
     "recommended"
     "feed";
 
-  @media (min-width: 1000px) {
+  @include respond(desktop) {
     grid-template-columns: repeat(4, 1fr);
     grid-template-areas: "recommended hero hero feed";
   }
@@ -35,7 +35,7 @@
     "fantasma"
     "feed";
 
-  @media (min-width: 1000px) {
+  @include respond(desktop) {
     grid-template-columns: repeat(4, 1fr);
     grid-template-areas:
       "hero        hero      hero      hero"
@@ -49,7 +49,7 @@
     "recommended"
     "feed";
 
-  @media (min-width: 1000px) {
+  @include respond(desktop) {
     gap: 15px;
     grid-template-columns: repeat(4, 1fr);
     grid-template-areas: "recommended feed hero hero";
@@ -63,7 +63,7 @@
   flex-direction: column;
   padding: 10px 0;
 
-  @media (min-width: 1000px) {
+  @include respond(desktop) {
     padding: 0;
   }
 }

package/src/components/Cabezal/CardCabezal/variants/Amp/Amp.jsx

@@ -1,3 +1,5 @@
+import { volantaWithStop } from '../../../../../utils/volanta.js'
+
 export default function Amp({ article, rank }) {
   const { titulo, volanta, copete, imagen, slug } = article
   const href = slug ? `/${slug}` : '#'
@@ -10,7 +12,7 @@ export default function Amp({ article, rank }) {
         </a>
       )}
       <div className="card-cabezal__body">
-        {volanta && <span className="card-cabezal__volanta">{volanta}.</span>}
+        {volanta && <span className="card-cabezal__volanta">{volantaWithStop(volanta)}</span>}
         {titulo && <a href={href} className="card-cabezal__titulo">{titulo}</a>}
         {copete && <div className="card-cabezal__copete" dangerouslySetInnerHTML={{ __html: copete }} />}
       </div>

package/src/components/Cabezal/CardCabezal/variants/Carrusel/Carrusel.jsx

@@ -1,12 +1,14 @@
 import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import { useAuthorDisplay } from '../../../../../utils/authorDisplay.js'
 import styles from './Carrusel.module.scss'
 import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
 
 export default function CarruselCard({ article }) {
 
   const { Link } = useAdapters()
-  const { titulo, imagen, slug, autor } = article
+  const { titulo, imagen, slug, autor, publicarComoOrg } = article
   const href = slug ? `/${slug}` : '#'
+  const { displayName, avatarSrc } = useAuthorDisplay(autor, publicarComoOrg)
 
   return (
     <Tooltip text={titulo}>
@@ -22,13 +24,13 @@ export default function CarruselCard({ article }) {
       )}
       <div className={styles.body}>
         {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
-        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+        {displayName && <span className={styles.autor}>Por {displayName}</span>}
       </div>
-      {autor?.avatar && (
+      {avatarSrc && (
         <div className={styles.authorAvatarWrap}>
           <img
-            src={autor.avatar}
-            alt={autor.nombre ?? ''}
+            src={avatarSrc}
+            alt={displayName ?? ''}
             className={styles.authorAvatar}
           />
         </div>

package/src/components/Cabezal/CardCabezal/variants/Compact/Compact.jsx

@@ -1,13 +1,16 @@
 import styles from '../../CardCabezal.module.scss'
 import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import { useAuthorDisplay } from '../../../../../utils/authorDisplay.js'
 import AspectImage from '../../../../UI/AspectImage/AspectImage.jsx'
 import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+import { volantaWithStop } from '../../../../../utils/volanta.js'
 
 export default function Compact({ article }) {
 
   const { Link } = useAdapters()
-  const { titulo, volanta, imagen, slug, autor, focalPoint } = article
+  const { titulo, volanta, imagen, slug, autor, publicarComoOrg, focalPoint } = article
   const href = slug ? `/${slug}` : '#'
+  const { displayName } = useAuthorDisplay(autor, publicarComoOrg)
 
   return (
     <Tooltip text={titulo}>
@@ -25,10 +28,10 @@ export default function Compact({ article }) {
       )}
       <div className={styles.body}>
         <div className={styles.header}>
-          {volanta && <span className={styles.volanta}>{volanta}.</span>}
+          {volanta && <span className={styles.volanta}>{volantaWithStop(volanta)}</span>}
           {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
         </div>
-        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+        {displayName && <span className={styles.autor}>Por {displayName}</span>}
       </div>
     </article>
     </Tooltip>

package/src/components/Cabezal/CardCabezal/variants/Default/Default.jsx

@@ -1,13 +1,16 @@
 import styles from '../../CardCabezal.module.scss'
 import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import { useAuthorDisplay } from '../../../../../utils/authorDisplay.js'
 import AspectImage from '../../../../UI/AspectImage/AspectImage.jsx'
 import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+import { volantaWithStop } from '../../../../../utils/volanta.js'
 
 export default function Default({ article }) {
 
   const { Link } = useAdapters()
-  const { titulo, volanta, imagen, slug, autor, focalPoint } = article
+  const { titulo, volanta, imagen, slug, autor, publicarComoOrg, focalPoint } = article
   const href = slug ? `/${slug}` : '#'
+  const { displayName } = useAuthorDisplay(autor, publicarComoOrg)
 
   return (
 <Tooltip text={titulo}>
@@ -24,10 +27,10 @@ export default function Default({ article }) {
       )}
       <div className={styles.body}>
         <div className={styles.header}>
-          {volanta && <span className={styles.volanta}>{volanta}.</span>}
+          {volanta && <span className={styles.volanta}>{volantaWithStop(volanta)}</span>}
           {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
         </div>
-        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+        {displayName && <span className={styles.autor}>Por {displayName}</span>}
       </div>
     </article>
     </Tooltip>

package/src/components/Cabezal/CardCabezal/variants/Featured/Featured.jsx

@@ -1,13 +1,16 @@
 import styles from '../../CardCabezal.module.scss'
 import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import { useAuthorDisplay } from '../../../../../utils/authorDisplay.js'
 import AspectImage from '../../../../UI/AspectImage/AspectImage.jsx'
 import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+import { volantaWithStop } from '../../../../../utils/volanta.js'
 
 export default function Featured({ article, large }) {
 
   const { Link } = useAdapters()
-  const { titulo, volanta, copete, imagen, slug, autor, focalPoint } = article
+  const { titulo, volanta, copete, imagen, slug, autor, publicarComoOrg, focalPoint } = article
   const href = slug ? `/${slug}` : '#'
+  const { displayName } = useAuthorDisplay(autor, publicarComoOrg)
 
   return (
  <Tooltip text={titulo}>
@@ -25,10 +28,10 @@ export default function Featured({ article, large }) {
       )}
       <div className={styles.body}>
         <div className={styles.header}>
-          {volanta && <span className={styles.volanta}>{volanta}.</span>}
+          {volanta && <span className={styles.volanta}>{volantaWithStop(volanta)}</span>}
           {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
-        </div> 
-        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+        </div>
+        {displayName && <span className={styles.autor}>Por {displayName}</span>}
       </div>
     </article>
     </Tooltip>

package/src/components/Cabezal/CardCabezal/variants/FeaturedDuo/FeaturedDuo.jsx

@@ -1,13 +1,17 @@
 import styles from '../../CardCabezal.module.scss'
 import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import { useAuthorDisplay } from '../../../../../utils/authorDisplay.js'
+import { sanitizeInlineHtml } from '../../../../../utils/sanitizeHtml.js'
 import AspectImage from '../../../../UI/AspectImage/AspectImage.jsx'
 import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+import { volantaWithStop } from '../../../../../utils/volanta.js'
 
 export default function FeaturedDuo({ article }) {
 
   const { Link } = useAdapters()
-  const { titulo, volanta, copete, imagen, slug, autor, focalPoint } = article
+  const { titulo, volanta, copete, imagen, slug, autor, publicarComoOrg, focalPoint } = article
   const href = slug ? `/${slug}` : '#'
+  const { displayName } = useAuthorDisplay(autor, publicarComoOrg)
 
   return (
 <Tooltip text={titulo}>
@@ -24,11 +28,11 @@ export default function FeaturedDuo({ article }) {
       )}
       <div className={styles.body}>
         <div className={styles.header}>
-          {volanta && <span className={styles.volanta}>{volanta}.</span>}
+          {volanta && <span className={styles.volanta}>{volantaWithStop(volanta)}</span>}
           {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
         </div>
-        {copete && <div className={styles.copete} dangerouslySetInnerHTML={{ __html: copete }} />}
-        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+        {copete && <div className={styles.copete} dangerouslySetInnerHTML={{ __html: sanitizeInlineHtml(copete) }} />}
+        {displayName && <span className={styles.autor}>Por {displayName}</span>}
       </div>
     </article>
     </Tooltip>

package/src/components/Cabezal/CardCabezal/variants/FeaturedHorizontal/FeaturedHorizontal.jsx

@@ -1,13 +1,17 @@
 import styles from '../../CardCabezal.module.scss'
 import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import { useAuthorDisplay } from '../../../../../utils/authorDisplay.js'
+import { sanitizeInlineHtml } from '../../../../../utils/sanitizeHtml.js'
 import AspectImage from '../../../../UI/AspectImage/AspectImage.jsx'
 import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+import { volantaWithStop } from '../../../../../utils/volanta.js'
 
 export default function FeaturedHorizontal({ article }) {
 
   const { Link } = useAdapters()
-  const { titulo, volanta, copete, imagen, slug, autor, focalPoint } = article
+  const { titulo, volanta, copete, imagen, slug, autor, publicarComoOrg, focalPoint } = article
   const href = slug ? `/${slug}` : '#'
+  const { displayName } = useAuthorDisplay(autor, publicarComoOrg)
 
   return (
 <Tooltip text={titulo}>
@@ -24,11 +28,11 @@ export default function FeaturedHorizontal({ article }) {
       )}
       <div className={styles.body}>
         <div className={styles.header}>
-          {volanta && <span className={styles.volanta}>{volanta}.</span>}
+          {volanta && <span className={styles.volanta}>{volantaWithStop(volanta)}</span>}
           {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
         </div>
-        {copete && <div className={styles.copete} dangerouslySetInnerHTML={{ __html: copete }} />}
-        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+        {copete && <div className={styles.copete} dangerouslySetInnerHTML={{ __html: sanitizeInlineHtml(copete) }} />}
+        {displayName && <span className={styles.autor}>Por {displayName}</span>}
       </div>
     </article>
     </Tooltip>

package/src/components/Cabezal/CardCabezal/variants/Medium/Medium.jsx

@@ -1,13 +1,16 @@
 import styles from '../../CardCabezal.module.scss'
 import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import { useAuthorDisplay } from '../../../../../utils/authorDisplay.js'
 import AspectImage from '../../../../UI/AspectImage/AspectImage.jsx'
 import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+import { volantaWithStop } from '../../../../../utils/volanta.js'
 
 export default function Medium({ article }) {
 
   const { Link } = useAdapters()
-  const { titulo, volanta, imagen, slug, autor, focalPoint } = article
+  const { titulo, volanta, imagen, slug, autor, publicarComoOrg, focalPoint } = article
   const href = slug ? `/${slug}` : '#'
+  const { displayName } = useAuthorDisplay(autor, publicarComoOrg)
 
   return (
    <Tooltip text={titulo}>
@@ -24,10 +27,10 @@ export default function Medium({ article }) {
       )}
       <div className={styles.body}>
         <div className={styles.header}>
-          {volanta && <span className={styles.volanta}>{volanta}.</span>}
+          {volanta && <span className={styles.volanta}>{volantaWithStop(volanta)}</span>}
           {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
         </div>
-        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+        {displayName && <span className={styles.autor}>Por {displayName}</span>}
       </div>
     </article>
     </Tooltip>

package/src/components/Cabezal/CardCabezal/variants/Ranked/Ranked.jsx

@@ -2,6 +2,7 @@ import styles from '../../CardCabezal.module.scss'
 import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
 import AspectImage from '../../../../UI/AspectImage/AspectImage.jsx'
 import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+import { volantaWithStop } from '../../../../../utils/volanta.js'
 
 export default function Ranked({ article, rank, rankVariant }) {
 
@@ -25,7 +26,7 @@ export default function Ranked({ article, rank, rankVariant }) {
       )}
       <div className={styles.body}>
         <div className={styles.header}>
-          {volanta && <span className={styles.volanta}>{volanta}.</span>}
+          {volanta && <span className={styles.volanta}>{volantaWithStop(volanta)}</span>}
           {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
         </div>
         {rank != null && <span className={styles.rank}>{rank}</span>}

package/src/components/Cabezal/variants/Carrusel/Carrusel.jsx

@@ -130,7 +130,7 @@ export default function Carrusel({ titulo, verMasUrl, articles, getSlotProps })
       {titulo && (
         <div className={styles.header}>
           <h2 className={styles.titulo}>{titulo}</h2>
-          {verMasUrl && <a href={verMasUrl} className={styles.verMas}>VER MÁS</a>}
+          {verMasUrl && <a href={verMasUrl} className={styles.verMas} aria-label={`Ver más de ${titulo}`}>VER MÁS</a>}
         </div>
       )}
 

package/src/components/Cabezal/variants/Categoria/Categoria.jsx

@@ -12,7 +12,7 @@ export default function Categoria({ titulo, verMasUrl, articles, getSlotProps })
       {titulo && (
         <div className={styles.header}>
           <h2 className={styles.titulo}>{titulo}</h2>
-          {verMasUrl && <a href={verMasUrl} className={styles.verMas}>VER MÁS</a>}
+          {verMasUrl && <a href={verMasUrl} className={styles.verMas} aria-label={`Ver más de ${titulo}`}>VER MÁS</a>}
         </div>
       )}
       {articles.length > 0 && (

package/src/components/Cabezal/variants/CategoriaDos/CategoriaDos.jsx

@@ -12,7 +12,7 @@ export default function CategoriaDos({ titulo, verMasUrl, articles, getSlotProps
       {titulo && (
         <div className={styles.header}>
           <h2 className={styles.titulo}>{titulo}</h2>
-          {verMasUrl && <a href={verMasUrl} className={styles.verMas}>VER MÁS</a>}
+          {verMasUrl && <a href={verMasUrl} className={styles.verMas} aria-label={`Ver más de ${titulo}`}>VER MÁS</a>}
         </div>
       )}
       {articles.length > 0 && (

package/src/components/Cabezal/variants/Compact/Compact.jsx

@@ -7,7 +7,7 @@ export default function Compact({ titulo, verMasUrl, articles, getSlotProps }) {
       {titulo && (
         <div className={styles.header}>
           <h2 className={styles.titulo}>{titulo}</h2>
-          {verMasUrl && <a href={verMasUrl} className={styles.verMas}>VER MÁS</a>}
+          {verMasUrl && <a href={verMasUrl} className={styles.verMas} aria-label={`Ver más de ${titulo}`}>VER MÁS</a>}
         </div>
       )}
       {articles.length > 0 && (

package/src/components/Cabezal/variants/Default/Default.jsx

@@ -7,7 +7,7 @@ export default function Default({ titulo, verMasUrl, articles, tipo, getSlotProp
       {titulo && (
         <div className={styles.header}>
           <h2 className={styles.titulo}>{titulo}</h2>
-          {verMasUrl && <a href={verMasUrl} className={styles.verMas}>VER MÁS</a>}
+          {verMasUrl && <a href={verMasUrl} className={styles.verMas} aria-label={`Ver más de ${titulo}`}>VER MÁS</a>}
         </div>
       )}
       {articles.length > 0 && (

package/src/components/Cabezal/variants/Desktop/Desktop.jsx

@@ -28,7 +28,7 @@ export default function Desktop({ titulo, verMasUrl, articles, tipo }) {
       {titulo && (
         <div className={styles.header}>
           <h2 className={styles.titulo}>{titulo}</h2>
-          {verMasUrl && <a href={verMasUrl} className={styles.verMas}>VER MÁS</a>}
+          {verMasUrl && <a href={verMasUrl} className={styles.verMas} aria-label={`Ver más de ${titulo}`}>VER MÁS</a>}
         </div>
       )}
       {articles.length > 0 && (

package/src/components/Cabezal/variants/Duo/Duo.jsx

@@ -7,7 +7,7 @@ export default function Duo({ titulo, verMasUrl, articles, getSlotProps }) {
       {titulo && (
         <div className={styles.header}>
           <h2 className={styles.titulo}>{titulo}</h2>
-          {verMasUrl && <a href={verMasUrl} className={styles.verMas}>VER MÁS</a>}
+          {verMasUrl && <a href={verMasUrl} className={styles.verMas} aria-label={`Ver más de ${titulo}`}>VER MÁS</a>}
         </div>
       )}
       {articles.length > 0 && (

package/src/components/Cabezal/variants/DuoSinCopete/DuoSinCopete.jsx

@@ -7,7 +7,7 @@ export default function DuoSinCopete({ titulo, verMasUrl, articles, getSlotProps
       {titulo && (
         <div className={styles.header}>
           <h2 className={styles.titulo}>{titulo}</h2>
-          {verMasUrl && <a href={verMasUrl} className={styles.verMas}>VER MÁS</a>}
+          {verMasUrl && <a href={verMasUrl} className={styles.verMas} aria-label={`Ver más de ${titulo}`}>VER MÁS</a>}
         </div>
       )}
       {articles.length > 0 && (

package/src/components/Cabezal/variants/Horizontal/Horizontal.jsx

@@ -7,7 +7,7 @@ export default function Horizontal({ titulo, verMasUrl, articles, getSlotProps }
       {titulo && (
         <div className={styles.header}>
           <h2 className={styles.titulo}>{titulo}</h2>
-          {verMasUrl && <a href={verMasUrl} className={styles.verMas}>VER MÁS</a>}
+          {verMasUrl && <a href={verMasUrl} className={styles.verMas} aria-label={`Ver más de ${titulo}`}>VER MÁS</a>}
         </div>
       )}
       {articles.length > 0 && (

package/src/components/Cabezal/variants/LeeAdemas/LeeAdemas.jsx

@@ -1,5 +1,6 @@
 import { useAdapters } from '../../../../adapters/AdaptersContext.jsx'
 import AspectImage from '../../../UI/AspectImage/AspectImage.jsx'
+import { volantaWithStop } from '../../../../utils/volanta.js'
 import styles from './LeeAdemas.module.scss'
 
 function LeeAdemasCard({ article }) {
@@ -22,7 +23,7 @@ function LeeAdemasCard({ article }) {
       )}
       <div className={styles.body}>
         <Link href={href} className={styles.header}>
-          {volanta && <span className={styles.volanta}>{volanta}. </span>}
+          {volanta && <span className={styles.volanta}>{volantaWithStop(volanta)} </span>}
           {titulo  && <span className={styles.titulo}>{titulo}</span>}
         </Link>
       </div>

package/src/components/Cabezal/variants/LoQueSeLee/LoQueSeLee.jsx

@@ -1,5 +1,7 @@
 import { useAdapters } from '../../../../adapters/AdaptersContext.jsx'
+import { useAuthorDisplay } from '../../../../utils/authorDisplay.js'
 import AspectImage from '../../../UI/AspectImage/AspectImage.jsx'
+import { volantaWithStop } from '../../../../utils/volanta.js'
 import styles from './LoQueSeLee.module.scss'
 
 // View pura: recibe el artículo ya resuelto.
@@ -7,10 +9,13 @@ import styles from './LoQueSeLee.module.scss'
 // /api/portal/articles/trending?categoria=X y filtrar por excludeId.
 export default function LoQueSeLee({ article }) {
   const { Link } = useAdapters()
+  // El hook va antes del early-return para no violar las reglas de hooks; null-safe
+  // porque `article` puede ser null (ver guard debajo).
+  const { displayName } = useAuthorDisplay(article?.autor, article?.publicarComoOrg)
 
   if (!article) return null
 
-  const { titulo, volanta, imagen, slug, autor, focalPoint } = article
+  const { titulo, volanta, imagen, slug, focalPoint } = article
   const href = slug ? `/${slug}` : '#'
 
   return (
@@ -36,11 +41,11 @@ export default function LoQueSeLee({ article }) {
 
           <div className={styles.body}>
             <Link href={href} className={styles.textLink}>
-              {volanta && <span className={styles.volanta}>{volanta}. </span>}
+              {volanta && <span className={styles.volanta}>{volantaWithStop(volanta)} </span>}
               {titulo  && <span className={styles.titulo}>{titulo}</span>}
             </Link>
-            {autor?.nombre && (
-              <span className={styles.autor}>Por {autor.nombre}</span>
+            {displayName && (
+              <span className={styles.autor}>Por {displayName}</span>
             )}
           </div>
         </article>