@crtobiasdelsud/portal-ui 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "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/ArticleHeroFull/ArticleHeroFull.jsx

@@ -3,15 +3,12 @@
 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'
 
 export default function ArticleHeroFull({ titulo, copete, imagen, imagenes, imagenEpigrafe, focalPoint, categoria }) {
   const { config } = useSiteConfig()
   const siteName = config?.slots?.header?.settings?.siteName ?? ''
 
-  const objPos = focalPoint
-    ? `${focalPoint.x ?? 50}% ${focalPoint.y ?? 50}%`
-    : 'center center'
-
   // Slides del carrusel: `imagenes` (array) tiene prioridad; si no, la imagen
   // única. La primera es la principal.
   const slides = (Array.isArray(imagenes) && imagenes.length > 0)
@@ -20,26 +17,33 @@ export default function ArticleHeroFull({ titulo, copete, imagen, imagenes, imag
 
   const single = slides.length === 1 ? slides[0] : null
 
+  // Hero a pantalla casi completa → la imagen ocupa todo el ancho del viewport.
+  // `sizes="100vw"` deja que el navegador baje la variante responsive justa
+  // (ver AspectImage / ADR-0002) en vez del original a tamaño completo.
+  const heroSizes = '100vw'
+
   return (
     <div className={styles.hero}>
       {slides.length > 1 ? (
         <Carousel
-          images={slides.map((s) => ({ url: s.url, alt: titulo ?? '' }))}
+          images={slides.map((s) => ({ url: s.url, alt: titulo ?? '', variants: s.variants ?? null }))}
           focalPoint={focalPoint}
+          sizes={heroSizes}
           fill
           showEpigrafe={false}
           dotsPosition="top"
           priority
         />
       ) : single ? (
-        <img
+        <AspectImage
           src={single.url}
           alt={titulo ?? ''}
           className={styles.img}
-          style={{ objectPosition: objPos }}
-          decoding="async"
-          loading="eager"
-          fetchPriority="high"
+          fill
+          focalPoint={focalPoint}
+          variants={single.variants ?? null}
+          sizes={heroSizes}
+          priority
         />
       ) : null}
       <div className={styles.gradient} />

package/src/components/Cabezal/CardCabezal/CardCabezal.module.scss

@@ -260,7 +260,11 @@
     color: var(--text-color, #252523);
   }
 
-  @include respond(tablet) {
+  // Layout de imagen flex-fill solo desde laptop (>=960px), igual que la grilla
+  // `.list` de Categoria/CategoriaDos. En 768-960 la lista es columna flex sin
+  // altura definida: si esto arrancara en tablet, `flex:1`+`aspect-ratio:unset`
+  // colapsaria la imagen a 0. En ese rango la card queda en forma mobile (16:9).
+  @include respond(laptop) {
     height: 100%;
 
     .titulo {
@@ -284,7 +288,7 @@
 }
 
 .featuredLarge {
-  @include respond(tablet) {
+  @include respond(laptop) {
     .titulo {
       font-weight: 700;
       font-size: 2.125em;
@@ -307,7 +311,7 @@
     gap: 5px;
   }
 
-  @include respond(tablet) {
+  @include respond(laptop) {
     height: 100%;
 
     .imgLinkFill {

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

@@ -22,7 +22,12 @@ export default function V1({ article, important = false, inlineStyle }) {
             {article.volanta && <span className={styles.category}>{article.volanta}. </span>}
             {article.titulo}
           </p>
-          <p className={styles.copete}> {article.copete}</p>
+          {article.copete && (
+            <p
+              className={styles.copete}
+              dangerouslySetInnerHTML={{ __html: article.copete }}
+            />
+          )}
           {article.autor?.nombre && (
             <span className={styles.autor}>Por {article.autor.nombre}</span>
           )}